/* ============================================================================
   Avanox Markets CRM · iOS 27 / macOS 27 "Golden Gate" 主题层
   ----------------------------------------------------------------------------
   设计语言：Liquid Glass 2.0 —— WWDC26 的 iOS 27 / macOS 27 对去年 Liquid Glass
   的修正版。逐条落到本文件：

     ① 窗口圆角统一**收敛**（tighter corner radius）—— 12px → 10px / 9px → 7px
     ② 统一磨砂**顶部工具栏**（uniform toolbar）：磨砂、细描边、按钮与正文分离
     ③ 侧边栏**延伸至窗口边缘**，图标恢复彩色 —— 且**仅当前活动项上色**
     ④ 玻璃**更好地弥散**后方内容以提升可读性（blur + saturate + tint）
     ⑤ 新增**材质强度调节**（通透 ↔ 饱满色调）—— 见文件末尾 .lg-pop

   底色（V1.10.52 由深色改为**浅灰 + 奶白**，用户指定）：
     --bg    #F2F1EE   暖浅灰（奶灰）—— 窗口内容底
     --card  #FDFDFB   奶白（off-white，暖调）—— 抬升面（卡片 / 分组 / 工具栏）
     浅色下层次靠「底面略暗 + 面略亮 + 极轻描边」建立，而非投影。
     对比度已按 WCAG 实测（见下方 token 注释），三级文本全部 ≥4.5:1。

   作用域：body.admin
     theme.css 用 :root 定义浅色 token、用 body.dark 定义深色 token；而**门户的
     「品牌设置 → 默认主题」（brand.defaultMode）也会给门户 body 加 dark class** ——
     也就是说 body.dark 是两页共用的作用域。本文件改用 body.admin（只出现在后台
     index.html 的 body 上），后台与门户彻底解耦：
       · 后台 = body.admin → 本文件的「浅灰奶白 + Liquid Glass」主题层
       · 门户 = body.dark（若开启深色）→ theme.css 的深色基线，互不干扰

   引入顺序：theme.css → quasar.css → macos27.css（本文件必须最后）

   ⚠️ 关于强调色：后台强调色由品牌红改为系统蓝（用户指定）。但 theme.css 里 `--red`
      同时承担「品牌强调」与「危险/必填/告警」两种语义，二者不能混为一谈，因此
      **新增 --accent 蓝色通道接管强调位**，`--red` 保留给破坏性操作与语义告警：
        · 换成蓝：primary 按钮 / 导航 active / tab active / switch on /
                 输入框 focus / 步骤条 / 进度条 / 设置中心选中态 / 头像
        · 保留红：danger 按钮 / 必填星号 / 数据缺失 / 未读徽标 / 关闭按钮 /
                 .up（红涨）—— 涨红跌绿是国内交易惯例，属业务语义，不可动
   ============================================================================ */

/* ==========================================================================
   1. 设计 token
   ========================================================================== */

/* Liquid Glass 材质强度：0 = 通透(ultra clear) → 1 = 饱满色调(fully tinted)
   由后台顶栏材质滑块写入（localStorage 持久化），JS 用
   document.documentElement.style.setProperty('--lg-tint', v) 更新。 */
:root{ --lg-tint:.55; }

body.admin{
  /* ---- 背景层级：窗口模型「底色 → 抬升面 → 悬浮面」 ----
     浅灰奶白：底面偏暖略暗，面亮而偏暖白，靠明度差+极轻描边建立层次。 */
  --bg:#F2F1EE;                       /* 窗口内容底：暖浅灰（奶灰） */
  --card:#FDFDFB;                     /* 抬升面（卡片 / 分组 / 工具栏）：奶白 */
  --surface-2:#F7F6F3;                /* 悬浮面（菜单 / 弹出层）：介于两者之间 */
  --line:rgba(60,60,67,.14);          /* 分隔线（hairline，跟随 iOS 系统灰） */
  --line-strong:rgba(60,60,67,.24);
  --chip:rgba(120,120,128,.14);       /* 控件填充 */

  /* ---- 文本层级（对比度**实测**，底 = #FDFDFB 即全站最亮面，最保守） ----
     --ink    α.90 → 合成 #191919 → 17.3:1  （AAA；主文本）
     --ink-2  α.80 → 合成 #66666B →  5.8:1  （AA ；次要文本）
     --gray   α.72 → 合成 #727277 →  4.7:1  （AA ；标签/空态，承载信息 → 不可再降）
     ⚠️ 浅色主题的「弱文本」受 4.5:1 下限约束，数值上比深色版更接近主文本；
        层级由**明度 + 字号/字重**共同表达（而不是只靠调淡）。 */
  --ink:rgba(0,0,0,.90);
  --ink-2:rgba(60,60,67,.80);
  --gray:rgba(60,60,67,.72);

  /* ---- 语义色（iOS system colors · light 档） ---- */
  --red:#FF3B30; --red-hi:#FF6961; --red-600:#D70015; --red-700:#B00010;
  --red-soft:rgba(255,59,48,.12);
  --done:#34C759; --warn:#FF9500; --info:#007AFF; --violet:#AF52DE;

  /* ---- Liquid Glass 强调通道 ---- */
  --accent:#007AFF;                   /* iOS systemBlue (light) */
  --accent-hi:#3D9BFF;
  --accent-press:#0062CC;
  --accent-soft:rgba(0,122,255,.12);
  --accent-ring:rgba(0,122,255,.34);

  /* 图表主色：共享的 bars()/lineChart() 默认色读它。
     门户（无 .admin）未定义 → 自动回落 var(--red)，两端互不干扰。 */
  --chart-1:var(--accent);

  /* ---- 圆角：收敛（①） ---- */
  --radius:10px; --radius-sm:7px;
  --r-ctl:7px; --r-sm:6px; --r-pill:999px;
  --r-win:10px;

  /* ---- 阴影：Liquid Glass 靠层级不靠投影。浅色下投影必须更淡更散，
         否则在浅底上会出现"脏灰晕"，反而比深色主题更显眼。 ---- */
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(0,0,0,.07);
  --shadow-pop:0 10px 34px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.07);

  /* ---- 缓动：Apple spring 近似 ---- */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-fast:cubic-bezier(.25,.1,.25,1);

  /* ---- 材质：由 --lg-tint 派生的玻璃参数（④） ----
     通透端模糊小、玻璃薄；饱满端模糊大、底色厚重 → 对比更高更易读 */
  --blur:calc(14px + 20px * var(--lg-tint));
  --blur-heavy:calc(26px + 28px * var(--lg-tint));
  --glass:calc(.54 + .32 * var(--lg-tint));      /* 玻璃层不透明度 */
  --glass-hi:calc(.64 + .28 * var(--lg-tint));   /* 悬浮层（更厚） */

  /* 玻璃层的**底色**（RGB 三元组，配合 rgba() 使用）。
     ⚠️ 单独抽成 token 而不是各处写死 rgba(…)：玻璃底色必须与 --card 同源，
        否则以后改主题色时会出现「卡片改了、顶栏/侧栏没改」的不一致。
        用法：background:rgba(var(--glass-rgb),var(--glass-hi)) */
  --glass-rgb:253,253,251;
}

/* ==========================================================================
   2. 可访问性偏好（macOS 27 把「可读性优先」写进了系统设置，这里逐条响应）
   ========================================================================== */

/* 降低透明度：直接退回不透明，保证任何背景下都清晰 */
@media (prefers-reduced-transparency:reduce){
  body.admin{
    --glass:1; --glass-hi:1;
    --blur:0px; --blur-heavy:0px;
    --card:#FDFDFB; --bg:#F2F1EE;
  }
  body.admin .topbar,body.admin .sidebar,body.admin .modal,body.admin .drawer,
  body.admin .wb-menu,body.admin .more-dd,body.admin .lg-pop,body.admin .toast,
  body.admin thead th,body.admin .wb-head,body.admin .wb-tabs,body.admin .login-card{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:#FDFDFB!important;
  }
}
/* 增强对比：加粗描边、加深次级文本（浅色下是**加深**而不是抬亮） */
@media (prefers-contrast:more){
  body.admin{
    --line:rgba(60,60,67,.34); --line-strong:rgba(60,60,67,.48);
    --ink-2:rgba(28,28,30,.92); --gray:rgba(28,28,30,.86);
  }
}
/* 减弱动效：关掉所有位移/缩放/淡入，只保留颜色过渡 */
@media (prefers-reduced-motion:reduce){
  body.admin *,body.admin *::before,body.admin *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  body.admin .btn:active,body.admin .icon-btn:active{transform:none!important}
}

/* ==========================================================================
   3. 基础
   ========================================================================== */

body.admin{
  background:var(--bg);
  color:var(--ink);
  /* macOS 用 SF Pro；中文回落到苹方 */
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",
              "Noto Sans SC","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 选中文本用系统蓝 */
body.admin ::selection{background:rgba(0,122,255,.24);color:inherit}

/* 原生控件（checkbox / radio / range / progress）跟随系统强调色 ——
   否则 Chromium 会按自己的默认色渲染，与整站蓝调不一致。 */
body.admin{ accent-color:var(--accent); }

/* 滚动条：macOS overlay 样式（细、无轨道、半透明圆钮）
   ⚠️ 浅色主题下滚动条要**变深**（深色是白色半透明），否则在奶白底上看不见。 */
body.admin ::-webkit-scrollbar{width:11px;height:11px}
body.admin ::-webkit-scrollbar-track{background:transparent}
body.admin ::-webkit-scrollbar-thumb{
  background:rgba(60,60,67,.26);border-radius:6px;
  border:3px solid transparent;background-clip:content-box;
}
body.admin ::-webkit-scrollbar-thumb:hover{background:rgba(60,60,67,.42);background-clip:content-box}
body.admin ::-webkit-scrollbar-corner{background:transparent}

/* 全站焦点环：macOS 用外扩光晕，不是 outline 方框 */
body.admin :focus-visible{
  outline:none;
  box-shadow:0 0 0 3.5px var(--accent-ring);
  border-radius:var(--r-ctl);
}
body.admin a:focus-visible,body.admin .nav-item:focus-visible,
body.admin .nav-sub a:focus-visible,body.admin .tab:focus-visible{
  outline:none;box-shadow:0 0 0 3.5px var(--accent-ring);
}

/* ==========================================================================
   4. 布局：统一工具栏（②） + 侧边栏（③）
   ========================================================================== */

/* ---- 统一顶部工具栏：磨砂、hairline 下边、无投影 ---- */
body.admin .topbar{
  min-height:52px;
  padding:0 14px;
  background:rgba(var(--glass-rgb),var(--glass-hi));
  backdrop-filter:blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  gap:9px;
}
/* 顶栏里的 pill 是导航项：做成 macOS 分段控件的观感 */
body.admin .topbar .pill{
  border-radius:var(--r-ctl);
  padding:5px 11px;
  background:transparent;
  font-weight:600;
  transition:background-color .18s var(--ease-fast),color .18s var(--ease-fast);
}
body.admin .topbar .pill:hover{background:var(--chip)}
body.admin .topbar .pill[data-nav],body.admin #more-btn{cursor:pointer}

/* ---- 侧边栏：延伸至窗口边缘 + 玻璃 + 彩色图标（仅活动项） ---- */
body.admin .sidebar{
  width:236px;
  background:rgba(var(--glass-rgb),var(--glass));
  backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  border-right:1px solid var(--line);
}
body.admin .sidebar .brand{border-bottom:1px solid var(--line);padding:16px 16px 12px}
body.admin .sidebar nav{padding:8px 8px 20px}

/* 导航项：macOS 侧栏行 —— 默认中性，仅当前活动项上色 */
body.admin .nav-item{
  border-radius:var(--r-ctl);
  padding:8px 10px;
  color:var(--ink-2);
  font-size:13.5px;
  font-weight:500;
  gap:9px;
  transition:background-color .16s var(--ease-fast),color .16s var(--ease-fast);
}
body.admin .nav-item .ic{color:var(--gray);opacity:1;transition:color .16s var(--ease-fast)}
body.admin .nav-item:hover{background:var(--chip);color:var(--ink)}
body.admin .nav-item:hover .ic{color:var(--ink-2)}

/* ⚠️ theme.css 两处硬编码红色必须覆盖：line 69 的红色渐变 / line 70 的 body.admin 红字 */
body.admin .nav-item.active,
body.admin .nav-item.active:hover{
  background:var(--accent-soft);
  color:var(--accent);        /* 浅色档 accent-hi(#3D9BFF) 在浅蓝底上仅约 2.6:1 → 用 --accent */
  font-weight:600;
  box-shadow:none;
}
/* macOS 27 特色：**只有当前活动项**的图标上色 */
body.admin .nav-item.active .ic{color:var(--accent);opacity:1}

body.admin .nav-sub a{border-radius:var(--r-sm);padding:7px 10px 7px 36px;color:var(--gray);font-size:13px}
body.admin .nav-sub a:hover{background:var(--chip);color:var(--ink)}
body.admin .nav-sub a.active{
  background:var(--accent-soft);color:var(--accent);font-weight:600;
}

/* 内容区：macOS 窗口内边距更克制 */
body.admin .content{padding:18px 20px 56px}

/* 顶部提示条：用柔和的暖黄调，不做高饱和。
   ⚠️ 文字色必须是**深琥珀**（#8F5200，实测 5.4:1）—— 深色档用的浅琥珀 #FFCF7A
      放到浅底上对比度只有 1.7:1，整条提示都读不清。 */
body.admin .notice-bar{
  background:rgba(255,149,0,.12);
  border-bottom:1px solid rgba(255,149,0,.28);
  color:#8F5200;
}

/* 顶栏品牌 logo。
 *
 * ⚠️ V1.10.52 删除了原先的两条规则（`filter:invert(1) brightness(1.12)!important`
 *    与「圆角品牌芯片」的描边）：
 *    那是**旧 JPEG logo（白底黑字）**时代的补救 —— 靠 invert 把黑字变白以适配深色顶栏，
 *    再用圆角+描边把残留的方块底包装成"有意的 app 图标"。
 *    V1.10.47 已换成**背景透明的矢量 SVG**，invert 不再需要，而且**有害**：
 *      · `invert(1)` 会把品牌红一起反成青色，彩色标识被反错；
 *      · 后台转浅色后，白色字标被反成黑色、黑字标被反成白色（在奶白顶栏上直接看不见）。
 *    现在直接用浅色主题版矢量标识（`logo.svg` = 深色字标 + 品牌红标记），
 *    由 admin.js 的 LOGO 常量统一给出，CSS 不再做任何滤镜处理。 */
body.admin .topbar > img{
  height:26px!important;
  margin-right:2px;
}

/* 顶栏导航项（.tb-nav）：macOS 27 的「仅当前项上色」——
   默认图标中性灰，只有活动项的图标变成系统蓝。 */
body.admin .topbar .tb-nav{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
body.admin .topbar .tb-nav .material-icons{
  color:var(--gray);transition:color .16s var(--ease-fast);
}
body.admin .topbar .tb-nav:hover .material-icons{color:var(--ink-2)}
body.admin .topbar .tb-nav.on{background:var(--accent-soft);color:var(--accent)}
body.admin .topbar .tb-nav.on .material-icons{color:var(--accent)}
/* 未读计数徽标：macOS 里未读就是红，保留 */
body.admin .tb-count{
  background:var(--red);color:#fff;border-radius:var(--r-pill);
  padding:0 6px;font-size:11px;font-weight:700;line-height:1.6;
}

/* ---- 顶栏图标按钮 ---- */
body.admin .icon-btn{
  width:32px;height:32px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  color:var(--ink-2);
  transition:background-color .16s var(--ease-fast),color .16s var(--ease-fast),
             transform .12s var(--ease);
}
body.admin .icon-btn:hover{background:var(--chip);color:var(--ink)}
body.admin .icon-btn:active{transform:scale(.94)}

/* 未读徽标：macOS 里未读就是红点，保留红（业务语义，非品牌强调） */
body.admin .dot,body.admin .tb-dot{background:var(--red);box-shadow:0 0 0 2px rgba(var(--glass-rgb),.9)}

/* 头像：macOS 更中性，改用系统蓝 */
body.admin .avatar{background:var(--accent);color:#fff}
body.admin .wb-av{background:var(--accent)}
body.admin .tb-caret{opacity:.8}

body.admin .more-dd{
  background:rgba(var(--glass-rgb),var(--glass-hi));
  backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow-pop);
  padding:6px;
}
body.admin .more-dd .nav-item{font-size:13px}

/* ==========================================================================
   5. 卡片 / KPI / 网格
   ========================================================================== */

body.admin .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:14px;
}
body.admin .card.tight{padding:13px}

body.admin .card-h{gap:9px;margin-bottom:13px;row-gap:8px}
body.admin .card-h h3{font-size:14.5px;font-weight:650;letter-spacing:-.1px}
body.admin .card-h .right{gap:7px;row-gap:7px}

body.admin .grid{gap:12px}

body.admin .kpi{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 15px;
  box-shadow:var(--shadow);
}
body.admin .kpi .lbl{font-size:12px;color:var(--gray);gap:6px}
body.admin .kpi .val{font-size:21px;font-weight:660;letter-spacing:-.5px;margin-top:5px}
body.admin .kpi .sub{font-size:11.5px;color:var(--gray);margin-top:3px}
/* 强调条改用系统蓝 */
body.admin .kpi.accent{border-left:3px solid var(--accent)}

/* ==========================================================================
   6. 按钮（覆盖 quasar.css 的 Material 位移 + 重阴影）
   ========================================================================== */

body.admin .btn{
  border-radius:var(--r-ctl);
  padding:8px 15px;
  font-size:13.5px;
  font-weight:600;
  gap:6px;
  background:var(--chip);
  color:var(--ink);
  border:1px solid var(--line-strong);
  box-shadow:none;
  letter-spacing:-.05px;
  transition:background-color .16s var(--ease-fast),filter .16s var(--ease-fast),
             box-shadow .16s var(--ease-fast),transform .12s var(--ease);
}
body.admin .btn:hover{background:rgba(120,120,128,.18);filter:none}
/* macOS 按下是**缩放**，不是 Material 的 translateY(2px)（见 quasar.css） */
body.admin .btn:active{transform:scale(.97)}

/* 主按钮：系统蓝 + 内高光（macOS 默认按钮的立体感来自内高光，不是外投影） */
body.admin .btn.primary{
  background:linear-gradient(180deg,var(--accent-hi) 0%,var(--accent) 52%,var(--accent-press) 100%);
  color:#fff;
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.30),0 .5px 2px rgba(0,0,0,.16);
}
body.admin .btn.primary:hover{
  background:linear-gradient(180deg,#5FADFF 0%,#1E8FFF 52%,#0A7AE8 100%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.36),0 1px 4px rgba(0,0,0,.20);
}
body.admin .btn.primary:active{transform:scale(.97)}

/* 次要按钮：透明 + hairline（macOS 的「取消/次要」按钮） */
body.admin .btn.ghost{
  background:rgba(120,120,128,.10);
  border:1px solid var(--line-strong);
  color:var(--ink);
}
body.admin .btn.ghost:hover{background:rgba(120,120,128,.17)}

/* 危险按钮：破坏性操作用红，保留语义红。
   ⚠️ 文字色用 --red-600（#D70015）而不是深色档的 #FF8A80：
      后者是"深底上的浅红"，放到浅红底上对比度只剩 1.8:1，读不清。 */
body.admin .btn.danger{
  background:rgba(255,59,48,.10);
  color:var(--red-600);
  border:1px solid rgba(255,59,48,.28);
}
body.admin .btn.danger:hover{background:rgba(255,59,48,.17)}

body.admin .btn.sm{padding:5px 11px;font-size:12.5px;border-radius:var(--r-sm)}
body.admin .btn:disabled{opacity:.42;cursor:not-allowed;filter:none}
body.admin .btn:disabled:active{transform:none}

/* ==========================================================================
   7. 表单控件
   ========================================================================== */

body.admin .field label{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
body.admin .field .req{color:var(--red)}          /* 必填星号 = 警示语义 → 保留红 */
body.admin .field .hint{font-size:11.5px;color:var(--gray);margin-top:4px}
body.admin .field .err{font-size:11.5px;color:var(--red);margin-top:4px;font-weight:600}

body.admin .field input,body.admin .field select,body.admin .field textarea{
  padding:8px 11px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-ctl);
  background:rgba(120,120,128,.10);   /* 覆盖 theme.css 的深色输入底 */
  color:var(--ink);
  transition:border-color .16s var(--ease-fast),box-shadow .16s var(--ease-fast),
             background-color .16s var(--ease-fast);
}
body.admin .field input::placeholder,body.admin .field textarea::placeholder{
  color:var(--gray);opacity:.7;
}
/* focus：macOS 的外扩光晕（不是内阴影）。
   ⚠️ 浅色下聚焦是把填充**提亮到白**（iOS 的做法），而不是像深色那样再压深一层灰 ——
      后者在浅底上会让输入框看起来"变脏/禁用"。 */
body.admin .field input:focus,body.admin .field select:focus,body.admin .field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3.5px var(--accent-ring);
  background:#fff;
  outline:none;
}

/* 设置中心的控件（不在 .field 内，theme.css 单独复制了一套外观） */
body.admin .sc-cell input,body.admin .sc-cell select,body.admin .sc-cell textarea{
  padding:8px 11px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-ctl);
  background:rgba(120,120,128,.10);
  color:var(--ink);
}
body.admin .sc-cell input:focus,body.admin .sc-cell select:focus,body.admin .sc-cell textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3.5px var(--accent-ring);
  background:#fff;
}

body.admin .form-row{gap:12px}

/* 单选卡片 */
body.admin .radio-card{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:11px;
  background:rgba(120,120,128,.07);
  transition:border-color .16s var(--ease-fast),background-color .16s var(--ease-fast);
}
body.admin .radio-card:hover{background:rgba(120,120,128,.12)}
body.admin .radio-card.on{
  border-color:var(--accent);
  background:var(--accent-soft);
  /* ⚠️ 用 --accent 而不是 --accent-hi：浅色档的 accent-hi(#3D9BFF) 放在浅蓝底上
     对比度只有 ~2.6:1，选中项的文字会读不清。强调文字一律用 --accent。 */
  color:var(--accent);               /* 覆盖 theme.css 的深色档浅红 #FF8B95 */
}
body.admin .radio-card small{color:var(--gray)}

/* 开关：macOS switch（38×22，关=灰填充，开=系统蓝） */
body.admin .switch{
  width:38px;height:22px;border-radius:11px;
  background:rgba(120,120,128,.20);
  transition:background-color .22s var(--ease);
}
body.admin .switch.on{background:var(--accent)}
body.admin .switch::after{
  width:18px;height:18px;top:2px;left:2px;
  background:#fff;
  box-shadow:0 1px 2.5px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.05);
  transition:left .22s var(--ease);
}
body.admin .switch.on::after{left:18px}

/* tabs：macOS 分段控件观感 */
body.admin .tabs{border-bottom:1px solid var(--line);gap:2px;margin-bottom:14px}
body.admin .tab{
  padding:8px 13px;font-size:13.5px;color:var(--gray);
  border-bottom:2px solid transparent;font-weight:600;
  transition:color .16s var(--ease-fast),border-color .16s var(--ease-fast);
}
body.admin .tab:hover{color:var(--ink)}
body.admin .tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ==========================================================================
   8. 表格
   ========================================================================== */

body.admin .table-wrap{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
}
body.admin table{font-size:13px}
body.admin thead th{
  background:rgba(var(--glass-rgb),var(--glass-hi));
  backdrop-filter:blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
  color:var(--ink-2);
  font-weight:600;
  padding:9px 12px;
  border-bottom:1px solid var(--line-strong);
  letter-spacing:.1px;
}
body.admin tbody td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink)}
body.admin tbody tr:hover{background:rgba(60,60,67,.045)}   /* 覆盖 theme.css 的深色行悬停 */
body.admin tbody tr:last-child td{border-bottom:none}
body.admin .empty{padding:36px;color:var(--gray);font-size:13px}

/* ==========================================================================
   9. 徽标 / 标签 / 进度
   ==========================================================================
   ⚠️ 徽标是小字（11.5px）承载状态信息 → 文字必须达 WCAG AA 4.5:1。
      浅色下不能沿用深色档的「深底 + 浅彩字」，要反过来用「浅彩底 + 深彩字」。
      下列每个组合都按实际合成底色算过对比度（括号内为实测值），不要凭观感改。 */
body.admin .badge{border-radius:var(--r-pill);font-size:11.5px;padding:2px 9px;font-weight:600}
body.admin .b-red{background:rgba(255,59,48,.12);color:#C1121F}      /* 5.2:1 */
body.admin .b-green{background:rgba(52,199,89,.16);color:#0A6E34}    /* 5.5:1 */
body.admin .b-amber{background:rgba(255,149,0,.18);color:#8F5200}    /* 5.3:1 */
body.admin .b-blue{background:rgba(0,122,255,.12);color:#0057B8}     /* 5.8:1 */
body.admin .b-violet{background:rgba(175,82,222,.14);color:#7A2E9E}  /* 6.4:1 */
body.admin .b-gray{background:var(--chip);color:var(--ink-2)}

body.admin .pill{background:var(--chip);border-radius:var(--r-pill);font-size:12.5px;font-weight:600}
body.admin .hint-box{
  background:rgba(120,120,128,.09);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  font-size:12.5px;
  color:var(--ink-2);
  line-height:1.72;
  border:1px solid var(--line);
}
body.admin .hint-box b{color:var(--accent)}         /* 提示内强调 → 系统蓝 */
body.admin .hint-box.warn{
  background:rgba(255,149,0,.12);
  border-color:rgba(255,149,0,.28);
  color:#8F5200;
}
body.admin .hint-box.warn b{color:#7A4300}

body.admin .bar{height:6px;border-radius:3px;background:rgba(120,120,128,.20)}
body.admin .bar>i{background:var(--accent);border-radius:3px}

/* 步骤条 → 系统蓝 */
body.admin .step{color:var(--gray);font-size:12px}
body.admin .step::before{background:rgba(120,120,128,.28)}
body.admin .step::after{background:rgba(120,120,128,.18)}
body.admin .step.done,body.admin .step.on{color:var(--accent)}
body.admin .step.done::before,body.admin .step.on::before{background:var(--accent)}
body.admin .step.done::after{background:var(--accent)}

body.admin .list-row{border-bottom:1px solid var(--line);padding:10px 0}
body.admin .blank{color:var(--red);font-weight:700}   /* 数据缺失 = 异常 → 保留红 */
body.admin .up{color:var(--red)}                       /* 涨=红（国内惯例：红涨绿跌，不可动） */
body.admin .down{color:var(--done)}                    /* 跌=绿 */

/* ==========================================================================
   10. 弹窗 / 抽屉 / 提示
   ========================================================================== */

body.admin .mask{background:rgba(0,0,0,.28);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

body.admin .modal{
  background:rgba(var(--glass-rgb),var(--glass-hi));
  backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  border:1px solid var(--line-strong);
  border-radius:var(--r-win);
  box-shadow:var(--shadow-pop);
}
body.admin .modal-h{
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  background:transparent;
}
body.admin .modal-h h3{font-size:15.5px;font-weight:650;letter-spacing:-.15px}
body.admin .modal-h .x{color:var(--gray);border-radius:var(--r-sm);width:26px;height:26px;
  display:grid;place-items:center;transition:background-color .16s var(--ease-fast),color .16s var(--ease-fast)}
body.admin .modal-h .x:hover{background:var(--chip);color:var(--ink)}
body.admin .modal-b{padding:18px 20px}
body.admin .modal-f{
  padding:13px 20px;border-top:1px solid var(--line);
  background:transparent;gap:9px;
}

body.admin .drawer{
  background:rgba(var(--glass-rgb),var(--glass-hi));
  backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  border-left:1px solid var(--line-strong);
  box-shadow:var(--shadow-pop);
}

/* toast：macOS 通知横幅观感 */
body.admin #toasts{gap:9px}
body.admin .toast{
  background:rgba(var(--glass-rgb),var(--glass-hi));
  backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  border:1px solid var(--line-strong);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  padding:11px 15px;
  box-shadow:var(--shadow-pop);
  font-size:13px;
}
body.admin .toast.ok{border-left-color:var(--done)}
body.admin .toast.warn{border-left-color:var(--warn)}

/* ==========================================================================
   11. 后台专属区块：用户菜单 / 滑出面板 / 下载中心 / 应用市场
   ========================================================================== */

body.admin .wb-menu{
  background:rgba(var(--glass-rgb),var(--glass-hi));
  backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow-pop);
}
body.admin .wb-me{border-bottom:1px solid var(--line);padding:13px 13px 11px}
body.admin .wb-men{font-size:13.5px}
body.admin .wb-mee,body.admin .wb-mei{color:var(--gray)}
body.admin .wb-mi{border-radius:var(--r-sm);font-size:13.5px;color:var(--ink)}
body.admin .wb-mi:hover{background:var(--chip)}
body.admin .wb-mi.danger{color:var(--red)}
body.admin .wb-mi-tag{border:1px solid var(--line-strong);color:var(--gray)}
body.admin .wb-mi-tag.on{color:#0A6E34;border-color:rgba(52,199,89,.42)}
body.admin .wb-mfoot{border-top:1px solid var(--line)}

body.admin .wb-head{background:transparent;border-bottom:1px solid var(--line)}
body.admin .wb-tabs{background:transparent;border-bottom:1px solid var(--line)}
body.admin .wb-tabs .tab{border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:4px 12px}
body.admin .wb-tabs .tab.active{
  background:var(--accent-soft);color:var(--accent);border-color:transparent;
}
body.admin .wb-item{border-radius:var(--radius-sm)}
body.admin .wb-item:hover{background:var(--chip);border-color:var(--line)}
body.admin .wb-item.hi{border-left:3px solid var(--accent)}
body.admin .wb-ic{background:var(--chip);border-radius:var(--r-sm);color:var(--ink-2)}
body.admin .wb-item.lv-warn .wb-ic{color:#8F5200}
body.admin .wb-item.lv-ok .wb-ic{color:#0A6E34}
body.admin .wb-item.lv-info .wb-ic{color:#0057B8}
body.admin .wb-t{font-size:13.5px}
body.admin .wb-s{color:var(--ink-2)}
body.admin .wb-time,body.admin .wb-empty{color:var(--gray)}
body.admin .wb-ver{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)}
body.admin .wb-ver-h .material-icons{color:var(--accent)}
body.admin .wb-ver-b{color:var(--ink-2)}

body.admin .wb-dlc,body.admin .app-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
body.admin .app-card{border-radius:var(--radius)}
body.admin .app-card:hover{box-shadow:var(--shadow);border-color:var(--line-strong)}
body.admin .app-card.on{border-color:rgba(52,199,89,.50)}
body.admin .app-ic{background:var(--chip);border-radius:var(--r-sm);color:var(--accent)}
body.admin .app-ds{color:var(--ink-2)}
body.admin .app-cat,body.admin .apps-stat{color:var(--gray)}
body.admin .apps-tools input{
  background:rgba(120,120,128,.10);border:1px solid var(--line-strong);
  border-radius:var(--r-ctl);
}
body.admin .apps-sec-h{color:var(--ink-2)}
body.admin .apps-sec-h span{background:var(--chip);color:var(--gray)}

/* ==========================================================================
   12. 设置中心（V1.10.26）的选中态与硬编码点
   ========================================================================== */

body.admin .sc-nav{border-right:1px solid var(--line)}
body.admin .sc-item{border-radius:var(--r-sm);color:var(--ink-2)}
body.admin .sc-item:hover{background:var(--chip)}
body.admin .sc-item.active{
  background:var(--accent-soft);color:var(--ink);font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent);     /* 覆盖 var(--red) */
}
body.admin .sc-item .material-icons{color:var(--gray)}
body.admin .sc-item.active .material-icons{color:var(--accent)}
body.admin .sc-grp-h{border-radius:var(--r-sm);color:var(--ink-2)}
body.admin .sc-grp-h:hover{background:var(--chip)}
body.admin .sc-sec-h{color:var(--gray)}
body.admin .sc-dot{background:var(--done)}
body.admin .sc-opt.on,body.admin .sc-tab.on{background:var(--accent);color:#fff}
body.admin .sc-cell input::placeholder,body.admin .sc-cell textarea::placeholder{color:var(--gray);opacity:.7}

/* ==========================================================================
   13. 其它后台专属：MT5 终端 / AI 悬浮窗 / MFA / 人脸 等硬编码点
   ========================================================================== */

body.admin .mt5t-tab.on,body.admin .mt5t-tf.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* MT5 终端嵌入帧：终端自身界面是深色，这里保持深底是**有意为之**（浅色帧会让终端像贴片） */
body.admin .mt5t-frame{background:#0E0F11}
/* theme.css L580 的 body.admin 分支是硬编码品牌红 */
body.admin .mt5t-row.on{background:var(--accent-soft)}

/* ---- MT5 量化工作区左侧模块导航（theme.css L290-293 硬编码品牌红） ----
   macOS 27「仅当前项上色」：默认中性，选中项系统蓝且图标上色。 */
body.admin .quant-side{border-radius:var(--radius);background:var(--card);border:1px solid var(--line)}
body.admin .qs-title{color:var(--accent);font-size:13.5px;border-bottom:1px solid var(--line)}
body.admin .qs-item{
  border-radius:var(--r-ctl);color:var(--ink-2);font-size:13px;opacity:1;
  transition:background-color .16s var(--ease-fast),color .16s var(--ease-fast);
}
body.admin .qs-item .material-icons{color:var(--gray);transition:color .16s var(--ease-fast)}
body.admin .qs-item:hover{background:var(--chip);color:var(--ink)}
body.admin .qs-item:hover .material-icons{color:var(--ink-2)}
body.admin .qs-item.on{background:var(--accent-soft);color:var(--accent);font-weight:650}
body.admin .qs-item.on .material-icons{color:var(--accent)}
/* 计数徽标保留红（未读/待办惯例）；.qs-dot 的绿是「热」标记，语义色不动 */
body.admin .qs-badge{background:var(--red);color:#fff;border-radius:var(--r-pill)}

/* 交易室大屏卡片：原本是品牌红淡渐变 → 系统蓝淡渐变 */
body.admin .q-wallcard{background:linear-gradient(180deg,rgba(0,122,255,.055),transparent 200px)}

/* AI 悬浮球的红色投影 → 跟随强调色 */
body.admin .ai-fab{box-shadow:0 10px 26px rgba(0,122,255,.30)}
body.admin .ai-fab:hover{box-shadow:0 14px 32px rgba(0,122,255,.38)}

/* theme.css line 258 的 .ai-head 是白底渐变。历史上后台是深色，那里会变成「白底浅字」
   （与 V1.10.26 登录输入框同型缺陷），所以需覆盖。V1.10.52 后台转浅色后该缺陷本身已消失，
   但仍显式给奶白渐变 —— 不依赖 theme.css 的取值，避免它日后改动时这里静默跟坏。 */
body.admin .ai-head{
  background:linear-gradient(180deg,#FDFDFB 0%,#F7F6F3 100%);
  border-bottom:1px solid var(--line);
}
body.admin .ai-msg.u .ai-bub{background:var(--accent);color:#fff}
body.admin .ai-fab{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-press) 100%);color:#fff}
body.admin .qs-badge{background:var(--red);color:#fff}      /* 数字徽标 → 保留红 */
body.admin .qw-alert.p0>b{background:var(--red);color:#fff}
body.admin .qw-alert.p2>b{background:var(--accent);color:#fff}

body.admin .mfa-input{background:rgba(120,120,128,.10)}
/* 二维码必须白底才能被摄像头/相册识别，不做深色化 */
body.admin .mfa-qr{background:#fff;border:1px solid var(--line)}
body.admin .face-st.ok{color:var(--done)}
body.admin .face-st.err{color:var(--red)}

/* 悬浮窗关闭按钮 hover 用红（macOS 关闭按钮惯例）—— 保留 */
body.admin .fwin-btn[data-fw="close"]:hover{background:var(--red);color:#fff}

/* ==========================================================================
   14. 登录页（后台 body.admin 分支）
   ========================================================================== */

body.admin .login-wrap{
  /* 浅色版「桌面感」：奶白底 + 两团极淡的系统蓝/紫光晕（对应深色版的同款构图）。
     亮度刻意压在很小范围（#F4F3F0 → #ECEBE8）—— 登录页要的是"干净的桌面"，
     而不是又一层彩色。 */
  background:
    radial-gradient(1100px 620px at 18% 8%,rgba(0,122,255,.07) 0%,transparent 60%),
    radial-gradient(900px 560px at 88% 92%,rgba(175,82,222,.055) 0%,transparent 62%),
    linear-gradient(180deg,#F4F3F0 0%,#ECEBE8 100%);
}
body.admin .login-card{
  /* ⚠️ 这里**刻意不用 backdrop-filter**：登录卡背后只有渐变、没有内容，玻璃效果本就不体现。
     （改造前还有第二个理由：backdrop-filter 会让子元素的 mix-blend-mode 失效，而当时的 logo
       正是靠 mix-blend-mode 滤白底。V1.10.47 换成 SVG 后该顾虑已消失，但这条仍然成立。） */
  background:rgba(253,253,251,.96);
  border:1px solid var(--line-strong);
  border-radius:14px;
  padding:30px 28px;
  box-shadow:var(--shadow-pop);
}
/* V1.10.47 品牌改造 —— **删除了原先的 `body.admin .login-card .logo{filter:invert(1) contrast(1.7); mix-blend-mode:screen}`**。
   旧 logo 是「白底 + 深色字」的 JPEG，所以要靠「反色 + screen 混色」把它变成「白字 + 透明底」。
   但 `invert(1)` 会把**品牌红一起反成青色**，对彩色标识是错的；而新方案已直接提供两版矢量标识。
   V1.10.52 后台转浅色后，后台登录页与门户一样用 `logo.svg`（深色字标 + 品牌红标记）——
   深色底专用的 `logo-dark.svg` 已不再被后台引用（由 admin.js 统一切换，见其 logo 常量）。 */
body.admin .login-card h1{font-size:19px;font-weight:650;letter-spacing:-.2px}
body.admin .login-card .sub{color:var(--gray)}
/* 品牌字样保留品牌红：登录页是品牌锚点，不随界面强调色一起改 */
body.admin .login-card .demo-tip{background:rgba(120,120,128,.09);color:var(--ink-2);border-radius:var(--radius-sm)}
body.admin .login-card .demo-tip b{color:var(--red-600)}
body.admin .login-links{color:var(--ink-2)}

body.admin .lg-tab{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:rgba(120,120,128,.07);
  color:var(--ink-2);
  transition:background-color .16s var(--ease-fast),border-color .16s var(--ease-fast),color .16s var(--ease-fast);
}
body.admin .lg-tab:hover{border-color:var(--line-strong);background:rgba(120,120,128,.13);color:var(--ink)}
body.admin .lg-tab.on{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent);
}
body.admin .lg-tab-hint{color:var(--gray)}

/* ==========================================================================
   15. 材质强度调节（macOS 27 新特性 · 通透 ↔ 饱满色调）
   ========================================================================== */

body.admin .lg-pop{
  position:absolute;top:calc(100% + 8px);right:0;z-index:130;
  width:238px;padding:12px 13px;
  background:rgba(var(--glass-rgb),var(--glass-hi));
  backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur-heavy)) saturate(180%);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow-pop);
  animation:lgPopIn .16s var(--ease);
}
@keyframes lgPopIn{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
body.admin .lg-pop-h{
  display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:650;margin-bottom:3px;
}
body.admin .lg-pop-h .material-icons{color:var(--accent)}
body.admin .lg-pop-d{font-size:11.5px;color:var(--gray);line-height:1.6;margin-bottom:10px}
body.admin .lg-pop-l{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11.5px;color:var(--gray);margin-top:7px;
}
body.admin .lg-pop-l span:nth-child(2){font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}

/* macOS 滑块：细轨道 + 圆钮 */
body.admin .lg-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:20px;background:transparent;cursor:pointer;display:block;margin:0;padding:0;border:0;
}
body.admin .lg-range::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--lg-fill,55%),rgba(120,120,128,.34) var(--lg-fill,55%),rgba(120,120,128,.34) 100%);
}
body.admin .lg-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;background:#fff;margin-top:-6px;
  box-shadow:0 1px 3px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.14);
  transition:transform .14s var(--ease);
}
body.admin .lg-range:hover::-webkit-slider-thumb{transform:scale(1.08)}
body.admin .lg-range:active::-webkit-slider-thumb{transform:scale(1.16)}
body.admin .lg-range:focus-visible::-webkit-slider-thumb{
  box-shadow:0 1px 3px rgba(0,0,0,.22),0 0 0 3.5px var(--accent-ring);
}
/* Firefox 兜底 */
body.admin .lg-range::-moz-range-track{height:4px;border-radius:2px;background:rgba(120,120,128,.28)}
body.admin .lg-range::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
body.admin .lg-range::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}

/* ==========================================================================
   16. 窄屏兜底（与 theme.css 的断点对齐，避免新圆角/内距引入横向溢出）
   ========================================================================== */

@media (max-width:820px){
  body.admin .topbar{padding:0 10px;gap:8px}
  body.admin .content{padding:14px 12px 52px}
  body.admin .card{padding:14px}
  body.admin .icon-btn{width:36px;height:36px}
}
@media (max-width:640px){
  body.admin .lg-pop{width:min(238px,88vw);right:0}
}