/* ============================================================
   PAY66 Design System v2.0 — Core（机构级金融 · 冷灰蓝）
   ------------------------------------------------------------
   定位：v1 是"AI 生成感"的科技黑金风；v2 是 Stripe / Mercury /
         Linear 式的机构级金融后台 —— 克制、可信、精准。

   本文件是 v2 的【唯一真源】，通过三层兼容桥接覆盖旧页面：
     第 4 节  →  --p66-*  （v1 基础令牌，components/utilities 依赖）
     第 5 节  →  --ds-*   （v1 兼容层，本身是 var(--p66-*) 无需重定义）
     第 6 节  →  --pn-*   （glass/theme.css 多主题体系，全部收口为单一风格）
     第 7 节  →  --brand/--bg/--card...（收银台模板内的局部变量）
   因此本文件加载后，239 个 index 页面 + 51 个收银台页面即刻换肤。

   加载顺序要求：必须位于所有 v1 样式之后（各模板 </head> 前），
   以确保同优先级下的级联覆盖成立。
   ============================================================ */

/* ------------------------------------------------------------
   1. v2 语义令牌（--ui-*）—— 新增页面请直接使用这一层
   ------------------------------------------------------------ */
html:root,
html[data-theme] {
  /* === 背景层级（3 级，不再更多）=== */
  --ui-bg:            #f7f8fa;   /* 页面底 */
  --ui-surface:       #ffffff;   /* 卡片/表面 */
  --ui-surface-hover: #f3f4f6;   /* 悬浮态 */
  --ui-surface-sunken:#f1f3f5;   /* 内嵌/表头 */

  /* === 侧边栏（纯色，★彻底取消渐变）=== */
  --ui-sidebar:            #111827;
  --ui-sidebar-hover:      #1f2937;
  --ui-sidebar-active:     #1f2937;
  --ui-sidebar-border:     rgba(255, 255, 255, 0.06);
  --ui-sidebar-text:       #9ca3af;
  --ui-sidebar-text-strong:#ffffff;
  --ui-sidebar-accent:     #2563eb; /* 选中项左侧色条 */

  /* === 文字层级（4 级）=== */
  --ui-text:          #111827;
  --ui-text-secondary:#4b5563;
  --ui-text-muted:    #6b7280;
  --ui-text-subtle:   #9ca3af;
  --ui-text-inverse:  #ffffff;

  /* === 边框（3 级）=== */
  --ui-border:        #e5e7eb;
  --ui-border-light:  #f1f3f5;
  --ui-border-strong: #d1d5db;

  /* === 强调色（★全站唯一主色，金色已删除）=== */
  --ui-accent:        #2563eb;
  --ui-accent-hover:  #1d4ed8;
  --ui-accent-soft:   rgba(37, 99, 235, 0.08);
  --ui-accent-border: rgba(37, 99, 235, 0.22);

  /* === 功能色 === */
  --ui-success:       #059669;
  --ui-success-soft:  rgba(5, 150, 105, 0.08);
  --ui-warning:       #d97706;
  --ui-warning-soft:  rgba(217, 119, 6, 0.08);
  --ui-danger:        #dc2626;
  --ui-danger-soft:   rgba(220, 38, 38, 0.08);

  /* === 圆角（统一 8px 基准，取消 14/18/22/24px 混用）=== */
  --ui-radius-sm: 6px;
  --ui-radius:    8px;
  --ui-radius-lg: 12px;
  --ui-radius-full: 9999px;

  /* === 阴影（★仅 1 级，取消多层描边发光）=== */
  --ui-shadow:    0 1px 2px rgba(16, 24, 40, 0.06);
  --ui-shadow-md: 0 1px 3px rgba(16, 24, 40, 0.10);
  --ui-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10);

  /* === 字体 === */
  --ui-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                  "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --ui-font-mono: "SF Mono", "Cascadia Code", "Consolas", "Menlo", monospace;

  /* === 动效（★仅保留颜色/背景过渡，取消浮起位移）=== */
  --ui-transition-fast:   120ms ease;
  --ui-transition-normal: 160ms ease;
}

/* ------------------------------------------------------------
   2. v2 语义类（新页面用；旧页面不受影响）
   ------------------------------------------------------------ */
.ui-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}
.ui-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ------------------------------------------------------------
   3. 全局去装饰（★"AI 味"清理开关）
   ------------------------------------------------------------ */

/* 3.1 移除全站玻璃拟态 —— 这是"AI 感"最显著的来源之一 */
*,
*::before,
*::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 3.2 取消卡片浮起位移（保留纯色过渡，观感更沉稳） */
.ds-card:hover,
.metric-card:hover,
.order-stat-card:hover,
.card:hover {
  transform: none !important;
}

/* 3.3 文字选中色 */
::selection {
  background: var(--ui-accent-soft);
  color: var(--ui-text);
}

/* 3.4 滚动条（细、中性，避免系统默认粗条破坏观感） */
* { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* 3.5 统一焦点环（可访问性 + 专业感） */
:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}

/* 3.6 金额/数字统一等宽对齐 */
.metric-value,
.order-stat-value,
.amount,
.amount-value,
.ds-table td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ------------------------------------------------------------
   4. 桥接层：--p66-*（v1 基础令牌）
      ★ 只覆盖"基础色令牌"，v1 中的别名（--p66-accent: var(--p66-gold) 等）
        为 var() 引用，会自动跟随，无需重复定义。
   ------------------------------------------------------------ */
html:root,
html[data-theme] {
  /* 主色系：由"科技黑金"改为"机构灰蓝" */
  --p66-navy:         #111827;
  --p66-navy-light:   #1f2937;
  --p66-navy-lighter: #374151;

  /* gold 家族整体改为唯一强调蓝（旧页面中所有金色装饰随之转蓝） */
  --p66-gold:        #2563eb;
  --p66-gold-light:  #3b82f6;
  --p66-gold-deep:   #1d4ed8;
  --p66-gold-bg:     rgba(37, 99, 235, 0.08);
  --p66-gold-border: rgba(37, 99, 235, 0.22);

  /* 功能色：降低饱和度，去掉"糖果色" */
  --p66-green:        #059669;
  --p66-green-light:  #10b981;
  --p66-green-bg:     rgba(5, 150, 105, 0.08);
  --p66-green-border: rgba(5, 150, 105, 0.22);

  --p66-red:        #dc2626;
  --p66-red-light:  #ef4444;
  --p66-red-bg:     rgba(220, 38, 38, 0.08);
  --p66-red-border: rgba(220, 38, 38, 0.22);

  --p66-orange:        #d97706;
  --p66-orange-light:  #f59e0b;
  --p66-orange-bg:     rgba(217, 119, 6, 0.08);
  --p66-orange-border: rgba(217, 119, 6, 0.22);

  /* info 与 accent 合并，保证"全站只有一个强调色" */
  --p66-blue:        #2563eb;
  --p66-blue-light:  #3b82f6;
  --p66-blue-bg:     rgba(37, 99, 235, 0.08);
  --p66-blue-border: rgba(37, 99, 235, 0.22);

  /* 中性层级 */
  --p66-text:          #111827;
  --p66-text-secondary:#4b5563;
  --p66-text-muted:    #6b7280;
  --p66-text-disabled: #9ca3af;

  --p66-bg:         #f7f8fa;
  --p66-bg-surface: #ffffff;
  --p66-bg-hover:   #f3f4f6;
  --p66-bg-active:  #e5e7eb;

  --p66-border:        #e5e7eb;
  --p66-border-light:  #f1f3f5;
  --p66-border-strong: #d1d5db;

  /* 圆角收口 */
  --p66-radius-sm: 6px;
  --p66-radius-md: 8px;
  --p66-radius-lg: 12px;

  /* 阴影收口（v1 的 3 级改为 2 级，取消厚重投影） */
  --p66-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --p66-shadow-md: 0 1px 3px rgba(16, 24, 40, 0.10);
  --p66-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10);

  /* 动效收口 */
  --p66-transition-fast:   120ms ease;
  --p66-transition-normal: 160ms ease;
  --p66-transition-slow:   200ms ease;
}

/* ------------------------------------------------------------
   5. 桥接层：--ds-* 修正
      --ds-* 在 v1 中已全部指向 var(--p66-*)，第 4 节生效后自动跟随。
      此处仅覆写 2 个"写死"的装饰型令牌（v1 中它们不是 var 引用）。
   ------------------------------------------------------------ */
html:root,
html[data-theme] {
  /* 原为 0 0 8px 金色光晕 → 改为普通卡片阴影 */
  --ds-shadow-gold: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* ------------------------------------------------------------
   6. 桥接层：--pn-*（glass/theme.css 多主题体系）
      ★ 策略：不再保留 5 套主题配色，全部收口为 v2 单一风格。
        使用 html[data-theme] 选择器以覆盖 [data-theme="xxx"] 的高优先级块。
   ------------------------------------------------------------ */
html:root,
html[data-theme] {
  /* 背景/表面 */
  --pn-bg:             #f7f8fa;
  --pn-surface:        #ffffff;
  --pn-surface-raised: #ffffff;
  --pn-surface-hover:  #f3f4f6;
  --pn-surface-soft:   #f1f3f5;

  /* 主色（原为深 navy，用于侧栏/主按钮） */
  --pn-primary:       #111827;
  --pn-primary-hover: #1f2937;
  --pn-primary-light: #f3f4f6;
  --pn-primary-text:  #ffffff;
  --pn-primary-deep:  #0b1220;

  /* 强调色（原为金色 #d4af37 → 唯一强调蓝） */
  --pn-accent:        #2563eb;
  --pn-accent-hover:  #1d4ed8;
  --pn-accent-light:  #eff6ff;
  --pn-accent-text:   #ffffff;
  --pn-accent-soft:   #dbeafe;
  --pn-accent-deep:   #1d4ed8;
  --pn-accent-border: rgba(37, 99, 235, 0.22);
  --pn-accent-bg:     rgba(37, 99, 235, 0.08);

  /* 侧边栏（★核心：member.html 里的渐变/金色光晕全部失效） */
  --pn-sidebar-bg:     #111827;
  --pn-sidebar-border: rgba(255, 255, 255, 0.06);
  --pn-accent-rgba:    rgba(255, 255, 255, 0.06); /* 原为金色装饰线 */
  --pn-accent-shadow:  rgba(0, 0, 0, 0);          /* 原为金色发光 */
  --pn-text-dim:       #6b7280;

  /* 功能色 */
  --pn-success:       #059669;
  --pn-success-hover: #047857;
  --pn-success-light: #ecfdf5;
  --pn-warning:       #d97706;
  --pn-warning-hover: #b45309;
  --pn-warning-light: #fffbeb;
  --pn-danger:        #dc2626;
  --pn-danger-hover:  #b91c1c;
  --pn-danger-light:  #fef2f2;

  /* 文字 */
  --pn-text:           #111827;
  --pn-text-bright:    #111827;   /* v1 暗色高亮字别名；蓝主题下与主文字同色，防止白底不可见 */
  --pn-text-secondary: #4b5563;
  --pn-text-muted:     #6b7280;
  --pn-text-inverse:   #ffffff;
  --pn-text-deep:      #111827;

  /* 边框 */
  --pn-border:        #e5e7eb;
  --pn-border-light:  #f1f3f5;
  --pn-border-focus:  #2563eb;
  --pn-border-gold:   rgba(37, 99, 235, 0.22);

  /* 阴影（取消金色光晕与夸张投影） */
  --pn-shadow-sm:   0 1px 2px rgba(16, 24, 40, 0.06);
  --pn-shadow:      0 1px 2px rgba(16, 24, 40, 0.06);
  --pn-shadow-md:   0 1px 3px rgba(16, 24, 40, 0.10);
  --pn-shadow-lg:   0 8px 24px rgba(16, 24, 40, 0.10);
  --pn-shadow-xl:   0 12px 32px rgba(16, 24, 40, 0.12);
  --pn-shadow-gold: 0 1px 2px rgba(16, 24, 40, 0.06);
  --pn-shadow-deep: 0 8px 24px rgba(16, 24, 40, 0.10);

  /* 圆角收口（原为 8/12/16/24） */
  --pn-radius-sm: 6px;
  --pn-radius:    8px;
  --pn-radius-lg: 12px;
  --pn-radius-xl: 12px;

  /* 渐变（★禁用：改为纯色，消除"AI 金色渐变"） */
  --pn-gold-gradient: none;
  --pn-deep-gradient: none;

  /* 桥接补充：模板引用但 v1 / ui-core 此前均未定义的令牌（统一收口为蓝主题取值） */
  --pn-font-sans:        var(--ui-font-sans);
  --pn-font-mono:        var(--ui-font-mono);
  --pn-teal:             #0d9488;
  --pn-teal-hover:       #0f766e;
  --pn-transition:       var(--p66-transition-normal, 160ms ease);

  --ds-card-bg:          var(--ui-surface);
  --ds-font-family-mono: var(--ui-font-mono);
  --ds-font-weight-extrabold: 800;
  --ds-line-height-relaxed:   1.6;
  --ds-spacing-xs: 4px;
  --ds-spacing-sm: 8px;
  --ds-spacing-md: 16px;
  --ds-spacing-lg: 24px;
  --ds-spacing-xl: 32px;
  --ds-spacing-xxl: 48px;

  --primary: var(--ui-accent, #2563eb);
}

/* 侧边栏/品牌区若直接引用了渐变令牌，此处兜底为纯色 */
.sidebar {
  background-image: none !important;
  background-color: var(--ui-sidebar) !important;
}

/* ------------------------------------------------------------
   7. 桥接层：收银台模板内的局部变量
      （app/pay/view/pay/*.html 在 {literal}<style> 中自行定义了
        :root{--brand/--bg/--card/--border/--text/--sub/--muted/--radius}）
      ★ 注意：不覆盖 --wx / --ali / --qq / --usdt / --accent，
        微信绿、支付宝蓝等品牌色必须保留（用户靠颜色识别渠道）。
   ------------------------------------------------------------ */
html:root,
html[data-theme] {
  --brand:      #2563eb;
  --brand-soft: rgba(37, 99, 235, 0.08);

  --bg:     #f7f8fa;
  --card:   #ffffff;
  --border: #e5e7eb;
  --input:  #f9fafb;

  --text:   #111827;
  --sub:    #4b5563;
  --muted:  #6b7280;

  /* 收银台卡片略圆于后台，保持"消费端更亲和"的观感 */
  --radius: 14px;

  /* ----------------------------------------------------------
     通用变量名兜底
     ----------------------------------------------------------
     背景：审计发现 42 个页面存在同一处生成器缺陷 —— 一个
     「light theme auto override」块缺少选择器包裹，导致整块被浏览器丢弃：
         /* ===== light theme auto override ===== *／
             --bg: #f3f4f6 !important;
             ...
         }
     因此这些页面实际沿用了"深色主题"的原始取值，出现
     浅灰文字落在白底上（对比度≈1.9:1，几乎不可读）等问题。

     这些变量名原本不在本文件的桥接范围内，此处按变量名兜底，
     一处修正全部受影响页面，无需改动 42 个文件。

     ★ 刻意不覆盖 --accent / --wx / --ali / --qq / --usdt：
       它们是渠道品牌色（微信绿/支付宝蓝等），必须保留。
     ---------------------------------------------------------- */
  --gold:       var(--ui-accent);
  --gold-deep:  var(--ui-accent-hover);
  --gold-light: #3b82f6;

  --input-bg:   var(--ui-surface);
  --input:      var(--ui-surface);

  --text-bright: var(--ui-text);
  --text-dim:    var(--ui-text-muted);

  --green:  var(--ui-success);
  --red:    var(--ui-danger);
  --amber:  var(--ui-warning);
  --blue:   var(--ui-accent);
  --purple: var(--ui-accent);
}

/* ------------------------------------------------------------
   8. Shell 皮肤（商户 / 管理后台外壳 member.html）
   ------------------------------------------------------------
   背景：外壳的骨架（分组导航、收起、移动端抽屉）本身是好的，
        但带着大量"AI 味"装饰：渐变装饰线、发光阴影、蓝色圆点、
        两行导航项、hover 位移。这里只做视觉收敛，不改 DOM / JS。

   ★ 重要：member.html 内联样式里定义了 .sidebar.collapsed 与移动端
     断点，本段使用了 !important，因此必须同步复述这些功能性规则，
     否则会破坏「侧栏收起」和「手机端抽屉」两个功能。
   ============================================================ */

/* 8.1 侧边栏容器（纯色，取消渐变与装饰线） */
.sidebar{
  width:240px !important;
  background:#111827 !important;
  background-image:none !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
}
.sidebar::before{display:none !important}        /* 顶部渐变装饰线 */
.sidebar-brand::after{display:none !important}   /* 品牌区下渐变装饰线 */
.sidebar-foot::before{display:none !important}   /* 底部上渐变装饰线 */

/* 8.2 品牌区 */
.sidebar-brand{
  height:60px !important;
  padding:0 12px 0 14px !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.brand-icon{
  width:28px !important;height:28px !important;
  border:none !important;
  border-radius:7px !important;
  background:var(--ui-accent) !important;
  background-image:none !important;
  color:#fff !important;
  font-size:15px !important;
  box-shadow:none !important;
}
.brand-icon:hover{box-shadow:none !important;transform:none !important}
.brand-text{font-size:15px !important;font-weight:700 !important;color:#fff !important;letter-spacing:.02em !important}
.brand-text span{color:#fff !important}
.brand-toggle{
  width:30px !important;height:30px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:6px !important;
}
.brand-toggle,
.brand-toggle i{color:#9ca3af !important}
.brand-toggle:hover{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
}
.brand-toggle:hover,
.brand-toggle:hover i{color:#fff !important}

/* 8.3 商户 / 管理 切换（扁平按钮，取消渐变与光晕） */
.sys-switch{padding:14px 12px 8px !important;gap:6px !important}
.sys-tab{
  height:32px !important;
  border-radius:6px !important;
  background:transparent !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#9ca3af !important;
  font-size:12px !important;font-weight:600 !important;
  box-shadow:none !important;
}
.sys-tab:hover:not(.on){background:rgba(255,255,255,.06) !important;color:#e5e7eb !important}
/* 选中态：克制的"分段控件"观感。
   原先用整块高饱和强调蓝，在深色侧栏里过于抢眼（实机截图验证后调整）。 */
.sys-tab.on{
  background:rgba(255,255,255,.10) !important;
  background-image:none !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#fff !important;
  font-weight:600 !important;
  box-shadow:none !important;
}

/* 8.4 分组导航 */
.sidebar-nav{padding:8px !important}
.nav-group{margin-bottom:2px !important;border-radius:0 !important}
.nav-group-header{padding:14px 10px 6px !important;cursor:default !important}
.nav-group-header:hover{background:transparent !important}
.nav-group-title{
  font-size:10px !important;font-weight:700 !important;
  letter-spacing:.09em !important;text-transform:uppercase !important;
  color:#4b5563 !important;
}
.nav-group-title::before{display:none !important}  /* 蓝色圆点装饰 */
.nav-group-count{display:none !important}          /* 数量胶囊 */
.nav-items{padding:0 !important}

.nav-item{
  height:38px !important;
  padding:0 10px !important;
  gap:10px !important;
  font-size:13.5px !important;
  color:#9ca3af !important;
  border-radius:6px !important;
  transition:background 120ms ease,color 120ms ease !important;
}
.nav-item:hover{
  background:rgba(255,255,255,.05) !important;
  color:#e5e7eb !important;
  transform:none !important;
}
.nav-item.on{
  background:#1f2937 !important;
  background-image:none !important;
  color:#fff !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
/* 选中态：左侧 2px 强调色条（基准页同款） */
.nav-item.on::before{
  left:-8px !important;
  top:8px !important;bottom:8px !important;height:auto !important;
  width:2px !important;
  transform:none !important;
  background:var(--ui-accent) !important;
  background-image:none !important;
  border-radius:0 2px 2px 0 !important;
  box-shadow:none !important;
}
.nav-item i{font-size:16px !important;width:16px !important;opacity:1 !important}
.nav-item.on i{color:#fff !important;opacity:1 !important}
/* 改为单行导航（与基准页一致），隐藏第二行说明文案 */
.nav-item-desc{display:none !important}

/* 8.5 侧栏底部 */
.sidebar-foot{padding:8px !important;border-top:1px solid rgba(255,255,255,.06) !important}
.sidebar-foot .foot-btn{
  height:34px !important;border-radius:6px !important;
  font-size:12.5px !important;color:#6b7280 !important;
}
.sidebar-foot .foot-btn:hover{
  background:rgba(255,255,255,.05) !important;
  color:#e5e7eb !important;
  transform:none !important;
}
.sidebar-foot .foot-btn.logout:hover{color:#f87171 !important;background:rgba(239,68,68,.08) !important}

/* 8.6 顶栏（取消阴影与渐变，按钮扁平） */
.app-header{
  height:56px !important;
  padding:0 20px !important;
  background:#fff !important;
  border-bottom:1px solid var(--ui-border) !important;
  box-shadow:none !important;
}
.hdr-btn{
  width:34px !important;height:34px !important;
  border-radius:6px !important;
  color:var(--ui-text-muted) !important;
  font-size:16px !important;
}
.hdr-btn:hover{color:var(--ui-text) !important;background:var(--ui-surface-hover) !important}
.hdr-sep{margin:0 6px !important}
.user-panel{gap:8px !important;border-radius:6px !important}
.user-panel:hover{background:var(--ui-surface-hover) !important}
.user-dot{
  width:30px !important;height:30px !important;
  border-radius:6px !important;
  background:var(--ui-accent) !important;
  background-image:none !important;
  border:none !important;
  font-size:12.5px !important;
  box-shadow:none !important;
}
.user-panel:hover .user-dot{box-shadow:none !important}

/* 8.7 内容区 / 提示 / 进度条 */
.app-content{background:var(--ui-bg) !important}
.toast-item{border-radius:8px !important;box-shadow:0 4px 16px rgba(16,24,40,.10) !important}
#nprogress .bar{
  background:var(--ui-accent) !important;
  background-image:none !important;
}
#nprogress .bar::after{display:none !important}

/* 8.8 功能保留：收起态（★必须复述，否则 !important 会破坏收起） */
.sidebar.collapsed{width:64px !important}
.sidebar.collapsed .sidebar-brand{justify-content:center !important;padding:0 !important}
.sidebar.collapsed .brand-text{display:none !important}
.sidebar.collapsed .brand-toggle{width:30px !important;height:30px !important;margin-left:0 !important}
.sidebar.collapsed .sys-switch{flex-direction:column !important;padding:10px 8px !important}
.sidebar.collapsed .sys-tab{width:44px !important;flex:none !important;font-size:16px !important}
.sidebar.collapsed .nav-group-header{display:none !important}
.sidebar.collapsed .nav-item{justify-content:center !important;padding:0 !important;gap:0 !important;transform:none !important}
.sidebar.collapsed .nav-item:hover{transform:none !important}
.sidebar.collapsed .nav-item span{display:none !important}
.sidebar.collapsed .nav-item.on::before{
  left:0 !important;top:50% !important;bottom:auto !important;
  height:24px !important;width:2px !important;
  transform:translateY(-50%) !important;
}
.sidebar.collapsed .sidebar-foot .foot-btn{justify-content:center !important;padding:0 !important;transform:none !important}
.sidebar.collapsed .sidebar-foot .foot-btn:hover{transform:none !important}
.sidebar.collapsed .sidebar-foot .foot-btn span{display:none !important}

/* 8.9 功能保留：移动端抽屉（★同上，必须复述断点内的宽度） */
@media (max-width:768px){
  .sidebar{
    width:260px !important;
    max-width:82vw !important;
    box-shadow:0 0 40px rgba(16,24,40,.28) !important;
  }
}

/* 8.10 主题已由 v2 统一为单一风格，「配色切换」不再产生任何视觉变化，
      保留会造成"点了没反应"的困惑，故隐藏。共三处：
        · 外壳顶栏右上角的下拉
        · game/list.html 与 game_my.html 顶部的「界面主题」整卡
          （该卡文案还在宣传"选择喜欢的配色"，且下拉首项名为"深空金"，属金色残留）
      ★ 如需恢复多主题：删除本段即可（同时需在第 6 节移除 --pn-* 覆盖，
        让 theme.css 的多主题重新生效）。 */
.header-right > div:has(#themeSelect){display:none !important}
#themeSelect,.header-right i.ri-palette-line{display:none !important}

.theme-switcher{display:none !important}
/* 用 :has() 定位"包含主题下拉的那张卡"并整卡隐藏。
   注意：不同页面结构不一致 ——
     · game/list.html 的 select 在 .theme-switcher 里（孙节点）
     · game_my.html   的 select 直接是 .card 的子节点
   故用后代选择器版本，两种结构都能命中；#themeSelect 全站唯一，不会误伤。 */
.card:has(#themeSelect){display:none !important}
/* admin/user.html 的包装层没有类名（纯内联样式），单独兜一层，
   避免只隐藏 select 后残留一个孤立的调色板图标 */
div:has(> #themeSelect){display:none !important}

/* ------------------------------------------------------------
   9. 组件层规格（.ds-* 设计系统）
   ------------------------------------------------------------
   这一层是真正的"AI 味"集中地，也是性价比最高的一处：
   .ds-card / .ds-btn / .ds-table / .ds-form-input 被 239 个页面共用，
   在此收敛一次，全站组件观感同时升级，无需改动任何一个页面文件。

   被清理的典型"AI 生成感"：
     · .ds-btn-primary   蓝色渐变 + 发光阴影 + hover 上浮
     · .ds-card-title::before / .ds-page-title::before  标题前的彩色竖条
     · .ds-table 行 hover 的左侧渐变扫光
     · 过大的圆角(10/14/18px)与多层阴影
   ============================================================ */

/* 9.1 按钮 */
.ds-btn{
  height:34px !important;
  padding:0 14px !important;
  gap:6px !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  border-radius:var(--ui-radius) !important;
  transition:background var(--ui-transition-fast),color var(--ui-transition-fast),border-color var(--ui-transition-fast) !important;
}
.ds-btn-sm{height:30px !important;padding:0 11px !important;font-size:12px !important}
.ds-btn-lg{height:44px !important;padding:0 22px !important;font-size:14px !important}

/* 主按钮：由"渐变+发光+上浮"改为扁平纯色 */
.ds-btn-primary{
  background:var(--ui-accent) !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:none !important;
}
.ds-btn-primary:hover{
  background:var(--ui-accent-hover) !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:none !important;
}
.ds-btn-primary:active{transform:none !important}

/* 次按钮：细边框 + 中性 hover（不再泛蓝光） */
.ds-btn-secondary{
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border:1px solid var(--ui-border-strong) !important;
}
.ds-btn-secondary:hover{
  background:var(--ui-surface-hover) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-text-subtle) !important;
}
.ds-btn-outline{
  background:transparent !important;
  color:var(--ui-accent) !important;
  border:1px solid var(--ui-accent) !important;
}
.ds-btn-outline:hover{background:var(--ui-accent-soft) !important}
.ds-btn-danger{
  background:var(--ui-danger-soft) !important;
  color:var(--ui-danger) !important;
  border:1px solid rgba(220,38,38,.22) !important;
}
.ds-btn-danger:hover{
  background:var(--ui-danger) !important;
  color:#fff !important;
  border-color:var(--ui-danger) !important;
}

/* 9.2 卡片：统一 12px 圆角 + 单层阴影，hover 只换边框不"跳起来" */
.ds-card{
  border:1px solid var(--ui-border) !important;
  border-radius:var(--ui-radius-lg) !important;
  box-shadow:var(--ui-shadow) !important;
  /* ★ 此处刻意不加 !important：
     !important 会压过页面内联 style="padding:..."，
     曾导致「到账提示音栏」等使用内联内边距的卡片被强制为 20px。
     ui-core 是最后加载的样式表，同优先级下本就胜出，无需 !important。 */
  padding:20px;
  transition:border-color var(--ui-transition-fast) !important;
}
.ds-card:hover{
  border-color:var(--ui-border-strong) !important;
  box-shadow:var(--ui-shadow) !important;
}
.ds-card-header{
  padding-bottom:14px !important;
  margin-bottom:16px !important;
  border-bottom:1px solid var(--ui-border-light) !important;
}
.ds-card-title{
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--ui-text) !important;
}
/* 移除每张卡片标题前的彩色竖条装饰 */
.ds-card-title::before{display:none !important}
.ds-card-subtitle{
  font-size:12px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  color:var(--ui-text-subtle) !important;
}

/* 9.3 表格：表头改中性浅灰底 + 1px 分隔线，并移除行 hover 的渐变扫光 */
.ds-table th{
  padding:10px 16px !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:.05em !important;
  color:var(--ui-text-muted) !important;
  background:var(--ui-surface-sunken) !important;
  border-bottom:1px solid var(--ui-border) !important;
}
.ds-table td{
  padding:13px 16px !important;
  font-size:13.5px !important;
  color:var(--ui-text) !important;
  border-bottom:1px solid var(--ui-border-light) !important;
}
.ds-table tr:hover td{background:var(--ui-surface-hover) !important}
.ds-table tr:hover td:first-child{background:var(--ui-surface-hover) !important}

/* 9.4 表单：降高度、细边框、统一焦点环 */
.ds-form-group{margin-bottom:16px !important}
.ds-form-label{
  font-size:12.5px !important;
  font-weight:600 !important;
  color:var(--ui-text-secondary) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  margin-bottom:6px !important;
}
.ds-form-input{
  height:36px !important;
  padding:0 11px !important;
  font-size:13.5px !important;
  background:var(--ui-surface) !important;
  border:1px solid var(--ui-border-strong) !important;
  border-radius:var(--ui-radius) !important;
}
.ds-form-input:focus{
  border-color:var(--ui-accent) !important;
  box-shadow:0 0 0 3px var(--ui-accent-soft) !important;
  background:var(--ui-surface) !important;
}
textarea.ds-form-input{
  height:auto !important;
  padding:10px 11px !important;
}
.ds-form-help,.ds-form-error{font-size:11.5px !important}

/* 9.5 徽章：由"胶囊"改为小圆角矩形，边界更克制 */
.ds-badge{
  padding:0 9px !important;
  height:22px !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  border-radius:5px !important;
  border:none !important;
}
.ds-badge-success{background:var(--ui-success-soft) !important;color:var(--ui-success) !important}
.ds-badge-danger{background:var(--ui-danger-soft) !important;color:var(--ui-danger) !important}
.ds-badge-warning{background:var(--ui-warning-soft) !important;color:var(--ui-warning) !important}
.ds-badge-info{background:var(--ui-accent-soft) !important;color:var(--ui-accent) !important}
.ds-badge-gold{background:var(--ui-accent-soft) !important;color:var(--ui-accent) !important}
.ds-badge-dark{background:var(--ui-surface-sunken) !important;color:var(--ui-text-muted) !important}

/* 9.6 页头：移除彩色竖条、压缩尺寸（外壳已有顶栏，页内不再叠一个大标题） */
.ds-page-title,.ds-page-title-sticky{
  font-size:18px !important;
  font-weight:700 !important;
  color:var(--ui-text) !important;
  letter-spacing:-.01em !important;
}
.ds-page-title::before,
.ds-page-title-sticky::before{display:none !important}
.ds-page-subtitle,.ds-page-subtitle-sticky{
  font-size:12.5px !important;
  color:var(--ui-text-muted) !important;
  margin-left:0 !important;
}
.ds-page-header-sticky{
  padding:16px 24px !important;
  background:var(--ui-surface) !important;
  border-bottom:1px solid var(--ui-border) !important;
  box-shadow:none !important;
}
.ds-page-breadcrumb-sticky{
  margin-left:0 !important;
  margin-top:6px !important;
  font-size:12px !important;
}
.ds-page-header{margin-bottom:20px !important;padding-bottom:16px !important}

/* 9.7 修正被 --ds-text-inverse 影响的主按钮文字色 */
html:root,
html[data-theme]{--ds-text-inverse:#ffffff}

/* ------------------------------------------------------------
   10. 设计系统缺口补全 + 变量层收口
   ------------------------------------------------------------
   ★ 关键发现：admin-design-system.css 自带一套 :root{--ds-radius/--ds-shadow/...}
     且它在 pay66-core.css **之后**加载，因此 v1 的 --ds-* 桥接层压不住它。
     只覆盖 --p66-* 无法修正 .ds-* 组件的圆角与阴影。

   解决方式：在变量层用 html:root 一次性收口（特异性高于 :root），
     这样所有 .ds-* 组件无需逐个改写即自动统一；
     再对少数"源码写死了渐变/发光"的组件做定点清理。
   ============================================================ */

/* 10.1 变量层收口：圆角 / 阴影 / 软底色 / 反白色 */
html:root,
html[data-theme]{
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 12px;

  --ds-shadow-sm:   0 1px 2px rgba(16,24,40,.06);
  --ds-shadow-card: 0 1px 2px rgba(16,24,40,.06);
  --ds-shadow-md:   0 1px 3px rgba(16,24,40,.10);
  --ds-shadow-lg:   0 8px 24px rgba(16,24,40,.10);
  --ds-shadow-gold: 0 1px 2px rgba(16,24,40,.06);   /* 原为蓝色发光 */

  --ds-text-inverse: #ffffff;                        /* 原为 #f7f8fa */

  /* 软底色改为低透明度，与 --ui-*-soft 保持一致 */
  --ds-success-bg: rgba(5,150,105,.08);
  --ds-danger-bg:  rgba(220,38,38,.08);
  --ds-warning-bg: rgba(217,119,6,.08);
  --ds-info-bg:    rgba(37,99,235,.08);
  --ds-info:       #2563eb;
}

/* 10.2 复选框 / 单选框：源码写死了渐变，需定点清理 */
.ds-checkbox,
.ds-radio{
  border-width:1px !important;
  border-color:var(--ui-border-strong) !important;
  border-radius:var(--ui-radius-sm) !important;
}
.ds-radio{border-radius:50% !important}
.ds-checkbox:hover,
.ds-radio:hover{border-color:var(--ui-accent) !important}
.ds-checkbox:checked,
.ds-radio:checked{
  background:var(--ui-accent) !important;
  background-image:none !important;   /* 去掉 linear-gradient 渐变 */
  border-color:var(--ui-accent) !important;
}
.ds-checkbox:checked::after,
.ds-radio:checked::after{color:#fff !important}

/* 10.3 分页：源码为渐变+发光，且自带 margin-top 会破坏 flex 基线 */
.ds-pagination{
  margin-top:16px !important;
  margin-bottom:0 !important;
  gap:6px !important;
}
.ds-card-footer .ds-pagination,
.ds-flex .ds-pagination,
.ds-items-center .ds-pagination,
.ds-justify-between .ds-pagination{margin-top:0 !important}

.ds-page-link{
  min-width:34px !important;
  height:34px !important;
  border-width:1px !important;
  border-radius:var(--ui-radius) !important;
  font-weight:600 !important;
  transition:background var(--ui-transition-fast),color var(--ui-transition-fast),border-color var(--ui-transition-fast) !important;
}
.ds-page-link:hover:not(.active):not(.disabled){
  color:var(--ui-text) !important;
  border-color:var(--ui-border-strong) !important;
  background:var(--ui-surface-hover) !important;
}
.ds-page-link.active{
  background:var(--ui-accent) !important;
  background-image:none !important;   /* 去掉 linear-gradient 渐变 */
  color:#fff !important;
  border-color:var(--ui-accent) !important;
  box-shadow:none !important;
}

/* 10.4 Toast：阴影与圆角按规范收敛 */
.ds-toast-item{
  padding:10px 16px !important;
  font-size:13px !important;
  border-radius:var(--ui-radius) !important;
  box-shadow:0 4px 16px rgba(16,24,40,.10) !important;
}
.ds-toast-success{background:var(--ui-success-soft) !important;color:var(--ui-success) !important;border-color:rgba(5,150,105,.22) !important}
.ds-toast-error{background:var(--ui-danger-soft) !important;color:var(--ui-danger) !important;border-color:rgba(220,38,38,.22) !important}

/* 10.5 弹窗：源码里的 backdrop-filter 在此清理（不依赖全局兜底） */
.ds-modal-overlay{
  background:rgba(17,24,39,.45) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.ds-modal{
  border-radius:var(--ui-radius-lg) !important;
  padding:24px !important;
}
.ds-modal-header{margin-bottom:16px !important}
.ds-modal-title{font-size:15px !important;font-weight:600 !important;color:var(--ui-text) !important}
.ds-modal-close{
  width:30px !important;height:30px !important;
  background:var(--ui-surface-sunken) !important;
  border-radius:var(--ui-radius-sm) !important;
  font-size:16px !important;
  color:var(--ui-text-muted) !important;
}
.ds-modal-close:hover{background:var(--ui-surface-hover) !important;color:var(--ui-text) !important}
.ds-modal-body{padding:16px 0 !important}
.ds-modal-footer{
  padding-top:16px !important;
  border-top:1px solid var(--ui-border-light) !important;
}

/* 10.6 按钮禁用态：设计系统原本完全没有该状态，补上 */
.ds-btn:disabled,
.ds-btn.disabled{
  opacity:.5 !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
}

/* ------------------------------------------------------------
   11. Tailwind 调色板收口 —— 覆盖面最大的一处
   ------------------------------------------------------------
   实测统计（298 个视图）：
     · Tailwind 工具类   207 个页面在用   ← 实际覆盖面最大
     · theme.css 变量    272 个页面
     · pay66-core 变量   239 个页面
     · .ds-* 组件         仅 15 个页面

   原 Tailwind 调色板自带"AI 科技感"：
     · slate 系（text-slate-700 单类就用 1230 次）带明显蓝调
     · indigo / blue / violet / purple 多套蓝紫抢眼
     · emerald / amber 偏高饱和
   此处把这些颜色工具类统一映射到 v2 令牌，一次覆盖约 2000 处用法，
   且**不需要改动任何页面文件**。

   加载顺序：tailwind-compiled.css 在前，本文件在最后，同优先级下本文件胜出。
   hover: 变体特异性更高（类+伪类），故在第 11.8 节单独覆盖。
   ============================================================ */

/* 11.1 中性文字：去掉 slate 的蓝调，收口为 4 级灰阶 */
.text-slate-900,.text-gray-900,
.text-slate-800,.text-gray-800,
.text-slate-700,.text-gray-700{color:var(--ui-text) !important}
.text-slate-600,.text-gray-600{color:var(--ui-text-secondary) !important}
.text-slate-500,.text-gray-500{color:var(--ui-text-muted) !important}
.text-slate-400,.text-gray-400,
.text-slate-300,.text-gray-300{color:var(--ui-text-subtle) !important}

/* 11.2 强调色族：多套蓝紫统一为唯一强调蓝 */
.text-indigo-400,.text-indigo-500,.text-indigo-600,
.text-blue-300,.text-blue-400,.text-blue-500,.text-blue-600,
.text-violet-600,.text-purple-600,.text-sky-500,.text-sky-600,
.text-pink-600{color:var(--ui-accent) !important}

/* 11.3 功能色：降饱和对齐 v2 */
.text-emerald-500,.text-emerald-600,
.text-green-400,.text-green-500,.text-green-600,
.text-teal-500,.text-teal-600{color:var(--ui-success) !important}
.text-amber-400,.text-amber-500,.text-amber-600,.text-amber-800,
.text-orange-400,.text-orange-500{color:var(--ui-warning) !important}
.text-red-400,.text-red-500,.text-red-600{color:var(--ui-danger) !important}

/* 11.4 背景色 */
.bg-gray-50,.bg-slate-50,.bg-gray-100,.bg-slate-100{background-color:var(--ui-surface-sunken) !important}
.bg-gray-200{background-color:var(--ui-border) !important}
.bg-red-50,.bg-rose-50{background-color:var(--ui-danger-soft) !important}
.bg-amber-50,.bg-orange-50,.bg-yellow-50{background-color:var(--ui-warning-soft) !important}
.bg-green-50,.bg-emerald-50,.bg-teal-50{background-color:var(--ui-success-soft) !important}
.bg-indigo-50,.bg-blue-50,.bg-purple-50,.bg-violet-50,.bg-pink-50,.bg-sky-50{background-color:var(--ui-accent-soft) !important}
.bg-indigo-400,.bg-indigo-500,.bg-indigo-600,.bg-blue-500,.bg-blue-600,
.bg-purple-600,.bg-sky-500{background-color:var(--ui-accent) !important}
.bg-indigo-700,.bg-sky-600,.bg-blue-700{background-color:var(--ui-accent-hover) !important}

/* 11.5 边框色（border-slate-700 刻意保留：它属于深色面板，属合法设计） */
.border-gray-100,.border-slate-100{border-color:var(--ui-border-light) !important}
.border-gray-200,.border-slate-200,.border-gray-300,.border-slate-300{border-color:var(--ui-border) !important}
.border-indigo-300,.border-indigo-400,.border-pink-400{border-color:var(--ui-accent-border) !important}
.border-blue-500,.border-blue-800{border-color:var(--ui-accent) !important}
.border-red-100,.border-red-200,.border-red-300{border-color:rgba(220,38,38,.22) !important}
.border-amber-100,.border-amber-200,.border-amber-800{border-color:rgba(217,119,6,.22) !important}

/* 11.6 形状与阴影收敛 */
.rounded-2xl,.rounded-3xl{border-radius:var(--ui-radius-lg) !important}
.shadow-lg,.shadow-xl,.shadow-2xl{box-shadow:var(--ui-shadow) !important}

/* 11.7 渐变拍平
   全站仅 5 处使用 bg-gradient-to-*，且全部是 text-white 上的按钮/徽标
   （wangyi_mkey / wangyi_app_ds 的提交按钮、langya 的赠币徽标、bug_list 的图标芯片），
   因此拍平为实色不会出现"浅底白字"的对比问题。 */
.bg-gradient-to-r,.bg-gradient-to-l,.bg-gradient-to-t,.bg-gradient-to-b,
.bg-gradient-to-tr,.bg-gradient-to-tl,.bg-gradient-to-br,.bg-gradient-to-bl{
  background-image:none !important;
  background-color:var(--ui-accent) !important;
}

/* 11.8 hover 变体（特异性高于基类，需单独覆盖；全站共 25 处） */
.hover\:bg-gray-200:hover{background-color:var(--ui-surface-hover) !important}
.hover\:bg-indigo-50:hover,.hover\:bg-violet-50:hover{background-color:var(--ui-accent-soft) !important}
.hover\:bg-red-50:hover{background-color:var(--ui-danger-soft) !important}
.hover\:bg-indigo-400:hover,.hover\:bg-indigo-600:hover,
.hover\:bg-blue-500:hover,.hover\:bg-blue-600:hover,
.hover\:bg-purple-600:hover,.hover\:bg-sky-600:hover{background-color:var(--ui-accent) !important}
.hover\:bg-indigo-700:hover{background-color:var(--ui-accent-hover) !important}
.hover\:text-red-400:hover,.hover\:text-red-500:hover{color:var(--ui-danger) !important}
.hover\:text-indigo-600:hover{color:var(--ui-accent) !important}
.hover\:border-indigo-300:hover{border-color:var(--ui-accent-border) !important}
/* hover:from-* / hover:to-* 无需处理：基类渐变已被 11.7 关闭，其 hover 变体不再产生视觉效果 */

/* ------------------------------------------------------------
   12. hover 浮起位移清除
   ------------------------------------------------------------
   审计结果：全站 24 处 hover 位移，集中在下列 13 个页面级选择器。
   "卡片/按钮 hover 浮起"是典型的 AI 生成交互语言，v2 统一取消。
   此处按实际存在的选择器定点覆盖，刻意不使用 *:hover 通配，
   以免破坏弹窗、下拉菜单、加载动画等依赖 transform 的组件。
   ============================================================ */
.btn-primary:hover,
.btn-submit:hover,
.btn-install:hover,
.btn-market:hover,
.btn-purple:hover,
.env-btn-primary:hover,
.channel-card:hover,
.land-card:hover,
.news-card:hover,
.layui-btn:hover,
.quick button:hover{
  transform:none !important;
}

/* 图标放大 / 箭头位移等 hover 微动效（同属 AI 装饰语言）→ 一并取消 */
.why:hover::before,
.stat-card:hover .stat-icon,
.news-item:hover .news-item-arrow,
.metric-card:hover .metric-icon,
.chip:hover i{
  transform:none !important;
}

/* ------------------------------------------------------------
   14. 功能性圆角白名单（说明，非规则）
   ------------------------------------------------------------
   巡检发现全站 20/22/24px 圆角绝大多数属功能性，不可压平：
     · .toggle-slider / .switch .slider / .slider —— 开关滑块，必须胶囊形
     · .tag-* / 小徽标 —— 胶囊标签
   因此 v2 只收口"卡片类"圆角（12px），上述元素保持原样。
   ============================================================ */

/* ------------------------------------------------------------
   13. 遗留渐变端色修正
   ------------------------------------------------------------
   上一轮的色值迁移把金色 #c99440 一类映射为强调蓝，但部分渐变的
   "另一端"是浅金 #e5c75a / rgba(244,229,176)，未被映射，
   结果产生了 蓝→黄 的异常渐变（已定位：admin/plugin.html 的
   .btn-primary/.btn-market:hover、admin/config_set.html 的 .layui-btn:hover，
   以及 member.html 的 .nav-item.on::before 与 #nprogress .bar）。
   前 3 处已在源文件直接修正，后 2 处在第 8 节覆盖。
   此处再加一道兜底：任何仍残留浅金端色的渐变，一律拍平为强调蓝。 */
.btn-primary:hover,
.btn-market:hover,
.layui-btn:hover{
  background-image:none !important;
  background-color:var(--ui-accent-hover) !important;
}

/* ------------------------------------------------------------
   14. 主按钮静止态统一
   ------------------------------------------------------------
   审计结果（截图验证发现）：.btn-primary 在模板里被各自定义了 6 种底色 ——
     · #2563eb 蓝（7 个文件，正确）
     · #111827 深黑（game/list、game_my、land/list、land_list）
     · var(--p66-navy)→深黑（admin/user）
     · #4f46e5 旧靛蓝（land/bug_list）
     · var(--gold)→已被迁移脚本改写为蓝（msg_list）
     · var(--accent)/var(--primary)（ban_ip、mash_list_view、steamcn_capture）
   而上一节只统一了 :hover —— 于是出现"静止是黑的、一悬停变蓝"的
   状态翻转不一致，比静态色差更刺眼。
   v2 的 <link> 注入在 </head> 之前，晚于各模板的内联 <style>，
   同权重（0,1,0）下后加载者胜，故此处一条规则即可全站收口。
   ★ 若某页确有需要非蓝主按钮，请勿改本规则，改为不套用 .btn-primary。 */
.btn-primary,
.env-btn-primary{
  background-color:var(--ui-accent);
  border-color:var(--ui-accent);
  color:#fff;
}