/* ============================================================================
   v4.css · 仓掌柜 前端重做设计系统 v4.5（主题配色体系：主色/副色/底色/选中色/系统色）
   ----------------------------------------------------------------------------
   本文件在 ui-redesign.css 之后加载，为最终视觉层（最高优先级）。

   本版配色体系：
   ① 主色（--brand/--accent）与副色（--brand-2/--accent-2）不再锁死：
      「系统设置 → 界面外观 → 主题配色」切换后随 data-bg 实时生效（经典蓝/海洋青/
      晚霞橙/森林绿/葡萄紫/鎏金琥珀/极简灰蓝，日夜两套各 7 组）。
   ② 底色（--bg-page/--surface）、选中色（--active/--accent-soft 由主色调浅而来）、
      系统色（--success/--warning/--danger/--info 固定语义）分层定义，
      全站不再“一个颜色用到底”。
   ③ 区域管理豁免：本文件【不】为 .zone-* / .zb-* / .zp-* / #zoneCanvas /
      .zone-viewport / .zone-world / .zone-box / .zoom-ctl / .slot-chip /
      .mslot / .zone-edge 等编写任何规则，区域画布与交互保持原样；
      网格线颜色由 --zone-grid 令牌随浅色/暗色自动适配（app.js 已同步使用）。
   兼容：body[data-perf="1"]（普通流畅模式），功能与 DOM 均不变。
============================================================================ */

/* ----------------------------- 0. 设计令牌（主色/副色/底色/选中色/系统色） ----------------------------- */
/*
  配色体系（v4.5.1 重建）：
  · 主色   --brand / --accent          → 主按钮、导航激活、链接、焦点环、选中态
  · 副色   --brand-2 / --accent-2      → 与主色搭配的渐变伙伴色（按钮/Logo/水波条渐变）
  · 底色   --bg-page / --surface       → 页面背景与卡片表面
  · 选中色 --active / --accent-soft    → 激活/选中项的浅色底（由主色调浅而来）
  · 系统色 --success/--warning/--danger/--info（及 --green/--orange/--red/--blue）
            → 成功/警告/危险/信息语义，固定不随主题变化
  主题联动：在「系统设置 → 界面外观 → 主题配色」选择后，body 的 data-bg 生效，
  v338.css 按主题覆盖 --brand/--brand-2/--brand-soft/--brand-line，
  下方派生规则通过 var() 引用自动跟随 —— 换主题 = 全局主色/副色/选中色一起换。
*/
body[data-perf="1"]{
  /* 主色（默认石青；选主题后自动跟随） */
  --brand:#0d9488; --brand-2:#0f766e;
  --brand-soft:rgba(13,148,136,.12); --brand-line:rgba(13,148,136,.34);
  --on-accent:#ffffff;
  /* 结构色（日间） */
  --bg-page:#f4f6f9;
  --surface:#ffffff;
  --surface-2:#f7f9fb;
  --surface-3:#eef2f6;
  --text:#17212e;
  --text-2:#4a5668;
  --text-3:#8b95a5;
  --line:#e4e8ee;
  --line-2:#d2d9e2;
  --hover:#f1f4f8;
  --active:var(--brand-soft);
  --input-border:#cbd5e0;
  /* 系统色（固定语义，不随主题变化） */
  --blue:#2563eb;
  --green:#16a34a;
  --orange:#d97706;
  --purple:#7c3aed;
  --red:#dc2626;
  --success:#16a34a; --success-soft:rgba(22,163,74,.12);
  --warning:#d97706; --warning-soft:rgba(217,119,6,.13);
  --danger:#dc2626;  --danger-soft:rgba(220,38,38,.11);
  --info:#2563eb;    --info-soft:rgba(37,99,235,.11);
  /* 旧玻璃变量（统一为干净实色，杜绝深浅混搭） */
  --bg:#f4f6f9;
  --glass-bg:#ffffff; --glass-border:var(--line);
  --glass-edge:none; --glass-shadow:var(--sh);
  --input-bg:#ffffff; --divider:var(--line); --track:#d8dee6;
  --radius:14px; --radius-sm:10px;
  /* 字体与阴影 */
  --font:'Inter','PingFang SC','HarmonyOS Sans SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sh-sm:0 1px 2px rgba(20,30,55,.05);
  --sh:0 1px 3px rgba(20,30,55,.06),0 6px 20px rgba(20,30,55,.05);
  --sh-lg:0 18px 44px rgba(20,30,55,.16),0 6px 16px rgba(20,30,55,.08);
  --r-card:16px; --r-ctl:11px; --r-sm:8px;
  /* 区域画布网格线（浅色） */
  --zone-grid:rgba(23,32,51,.14);
  color-scheme:light;
}
body[data-perf="1"][data-theme="dark"]{
  --brand:#2dd4bf; --brand-2:#5eead4;
  --brand-soft:rgba(45,212,191,.16); --brand-line:rgba(45,212,191,.38);
  --on-accent:#0b1526;
  --bg-page:#0c1118;
  --surface:#131a24;
  --surface-2:#1a2330;
  --surface-3:#212c3c;
  --text:#e8edf4;
  --text-2:#aab6c7;
  --text-3:#77839a;
  --line:#232e3c;
  --line-2:#33404f;
  --hover:#1c2534;
  --active:var(--brand-soft);
  --input-border:#33404f;
  /* 系统色（暗色固定语义） */
  --blue:#60a5fa;
  --green:#34d399;
  --orange:#fbbf24;
  --purple:#a78bfa;
  --red:#f87171;
  --success:#34d399; --success-soft:rgba(52,211,153,.14);
  --warning:#fbbf24; --warning-soft:rgba(251,191,36,.14);
  --danger:#f87171;  --danger-soft:rgba(248,113,113,.14);
  --info:#60a5fa;    --info-soft:rgba(96,165,250,.16);
  --bg:#0c1118;
  --glass-bg:#131a24; --glass-border:var(--line);
  --glass-edge:none; --glass-shadow:var(--sh);
  --input-bg:#1a2330; --divider:var(--line); --track:#2a3648;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh:0 1px 3px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.35);
  --sh-lg:0 18px 44px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.4);
  --zone-grid:rgba(255,255,255,.10);
  color-scheme:dark;
}
/* 主题派生：主色/副色/选中色统一由 --brand 家族派生。
   选择「主题配色」（data-bg）后，v338.css 按主题覆盖 --brand/--brand-2/--brand-soft/--brand-line，
   这里通过 var() 引用自动跟随 —— 换主题 = 全局主色/副色/选中色一起生效。 */
body[data-perf="1"],body[data-perf="1"][data-theme="dark"]{
  --accent:var(--brand);
  --accent-2:var(--brand-2);
  --accent-soft:var(--brand-soft);
  --accent-soft-2:color-mix(in srgb,var(--brand) 18%,var(--surface));
  --accent-line:var(--brand-line);
  --active:var(--brand-soft);
}
/* 选中文字高亮（选中色） */
body[data-perf="1"] ::selection{ background:var(--accent); color:var(--on-accent); }

/* ----------------------------- 1. 全局主体 ----------------------------- */
body[data-perf="1"]{ font-family:var(--font); letter-spacing:.01em; }
body[data-perf="1"],body[data-perf="1"][data-theme="dark"],
body[data-perf="1"][data-theme="light"][data-bg],
body[data-perf="1"][data-theme="dark"][data-bg]{
  background-color:var(--bg-page) !important;
  background-image:none !important;
}
body[data-perf="1"] .app{ background:var(--bg-page) !important; background-image:none !important; }
body[data-perf="1"] .main{ background:transparent; }
/* 光球背景静默（普通流畅模式不渲染折射） */
body[data-perf="1"] .bg-orbs{ display:none; }
/* 滚动条 */
body[data-perf="1"] *::-webkit-scrollbar{ width:9px; height:9px; }
body[data-perf="1"] *::-webkit-scrollbar-thumb{ background:var(--track); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
body[data-perf="1"] *::-webkit-scrollbar-thumb:hover{ background:var(--line-2); border:2px solid transparent; background-clip:content-box; }
body[data-perf="1"] *::-webkit-scrollbar-track{ background:transparent; }

/* 侧栏 */
body[data-perf="1"] .sidebar,
body[data-perf="1"][data-theme="dark"] .sidebar{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm) !important;
  margin:14px 0 14px 14px;
}
body[data-perf="1"] .brand{ padding:6px 8px 16px; }
body[data-perf="1"] .brand-logo{
  background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
  color:var(--on-accent) !important; border-radius:12px;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 36%,transparent);
}
body[data-perf="1"] .brand-txt b{ color:var(--text); font-weight:800; letter-spacing:.02em; }
body[data-perf="1"] .brand-txt small{ color:var(--text-3); letter-spacing:.05em; }

/* 顶栏 */
body[data-perf="1"] .topbar,
body[data-perf="1"][data-theme="dark"] .topbar{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm) !important;
}
body[data-perf="1"] #pageTitle{ color:var(--text); font-weight:800; letter-spacing:.01em; }
body[data-perf="1"] .glass-btn:not(.zoom-ctl){
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  color:var(--text-2) !important;
  border-radius:var(--r-ctl);
  box-shadow:none !important;
  transition:all .16s;
}
body[data-perf="1"] .glass-btn:not(.zoom-ctl):hover{
  border-color:var(--accent); color:var(--accent) !important; background:var(--accent-soft) !important;
}
body[data-perf="1"] .notif-dot{ background:var(--red); color:#fff; }

/* ----------------------------- 2. 侧栏导航 ----------------------------- */
body[data-perf="1"] .nav-item{
  color:var(--text-2);
  border-radius:var(--r-ctl);
  margin:3px 10px;
  font-size:14.5px;
  font-weight:500;
  transition:background .16s,color .16s;
}
body[data-perf="1"] .nav-item .ni-ico{ opacity:.9; }
body[data-perf="1"] .nav-item:hover{ background:var(--surface-2); color:var(--text); }
body[data-perf="1"] .nav-item.active{
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  font-weight:700;
}
body[data-perf="1"] .nav-item.active .ni-ico{ color:var(--accent); opacity:1; }
body[data-perf="1"] .nav-item.active::before{ background:var(--accent); }
body[data-perf="1"] .nav-badge{ background:var(--accent); color:var(--on-accent); font-weight:700; border-radius:999px; }
body[data-perf="1"] .theme-toggle{ color:var(--text-2); border-radius:var(--r-ctl); }
body[data-perf="1"] .theme-toggle:hover{ background:var(--surface-2); color:var(--text); }

/* ----------------------------- 3. 内容区与卡片 ----------------------------- */
body[data-perf="1"] #content{ padding:22px 26px; }
body[data-perf="1"] .section-title{
  color:var(--text); font-weight:700; font-size:15px;
  margin:20px 0 10px; letter-spacing:.01em;
}
body[data-perf="1"] .glass:not(.zone-viewport):not(.zone-world):not(input):not(select):not(textarea),
body[data-perf="1"] .card,
body[data-perf="1"] .set-card,
body[data-perf="1"] .task-item,
body[data-perf="1"] .member-card,
body[data-perf="1"] .task-mini,
body[data-perf="1"] .cap-overview{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-card);
  box-shadow:var(--sh) !important;
  padding:18px;
}
body[data-perf="1"] .chat-layout.glass{ padding:0; }
body[data-perf="1"] .card-title,body[data-perf="1"] .set-card-title,body[data-perf="1"] .panel-title{
  color:var(--text); font-weight:700;
}
body[data-perf="1"] .cap-ov-title span{ color:var(--text); font-weight:700; }
body[data-perf="1"] .cap-ov-title small{ color:var(--text-3); }
body[data-perf="1"] .set-hint{ color:var(--text-3); font-size:12px; }

/* 仪表盘统计卡 */
body[data-perf="1"] .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
body[data-perf="1"] .stat-card{
  border-top:none;
  display:flex; flex-direction:column;
  padding:20px 18px;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
body[data-perf="1"] .stat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-lg) !important;
  border-color:var(--accent-line) !important;
}
body[data-perf="1"] .stat-ico{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; font-size:20px; margin-bottom:14px;
}
body[data-perf="1"] .stat-num{ font-size:30px; font-weight:800; color:var(--text); line-height:1.1; font-variant-numeric:tabular-nums; }
body[data-perf="1"] .stat-label{ color:var(--text-2); font-size:13.5px; margin-top:4px; display:flex; align-items:center; gap:6px; }
body[data-perf="1"] .stat-go{ margin-left:auto; color:var(--text-3); }
body[data-perf="1"] .stat-card.clickable:hover .stat-go{ color:var(--accent); }

/* 仪表盘下区 */
body[data-perf="1"] .dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
body[data-perf="1"] .dash-full{ grid-column:1 / -1; }
body[data-perf="1"] .task-mini-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 4px; border-bottom:1px solid var(--line);
}
body[data-perf="1"] .task-mini-item:last-child{ border-bottom:none; }
body[data-perf="1"] .task-mini-title{ color:var(--text); flex:1; font-size:14px; }
body[data-perf="1"] .cap-ov-body{ display:flex; gap:20px; align-items:center; }
body[data-perf="1"] .cap-ring{ flex-shrink:0; }
body[data-perf="1"] .cap-ring .cr-bg{ stroke:var(--surface-3); }
body[data-perf="1"] .cap-ring .cr-fg{ stroke:var(--accent); }
body[data-perf="1"] .cap-ring-txt b{ color:var(--text); }
body[data-perf="1"] .cap-line label{ color:var(--text-2); }
body[data-perf="1"] .hwater{ background:var(--surface-3); }
body[data-perf="1"] .hwater i{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
body[data-perf="1"] .hwater.hw-green i{ background:linear-gradient(90deg,#10b981,#34d399); }

/* 公告条 */
body[data-perf="1"] .ann-bar{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm);
}
body[data-perf="1"] .ann-title{ color:var(--text); font-weight:700; }
body[data-perf="1"] .ann-text{ color:var(--text-2); }
body[data-perf="1"] .ann-meta{ color:var(--text-3); }

/* ----------------------------- 4. 工具条 / 筛选条 ----------------------------- */
body[data-perf="1"] .toolbar{ gap:10px; align-items:center; }
body[data-perf="1"] .toolbar,
body[data-perf="1"] .arr-filter{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm);
  padding:12px;
}
body[data-perf="1"] .search-box::before{ opacity:.45; }

/* ----------------------------- 5. 按钮 ----------------------------- */
body[data-perf="1"] .btn{
  border-radius:var(--r-ctl);
  font-weight:600;
  border:1px solid var(--line-2);
  background:var(--surface);
  color:var(--text);
  transition:transform .06s,background .16s,border-color .16s,box-shadow .16s,color .16s;
}
body[data-perf="1"] .btn:hover{ border-color:var(--accent-line); }
body[data-perf="1"] .btn:active{ transform:translateY(1px); }
body[data-perf="1"] .btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
  background-image:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
  color:var(--on-accent) !important;
  border:1px solid transparent !important;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent) !important;
}
body[data-perf="1"] .btn-primary:hover{ filter:brightness(1.06); box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 34%,transparent) !important; }
body[data-perf="1"] .btn-ghost{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  color:var(--text-2) !important;
}
body[data-perf="1"] .btn-ghost:hover{ background:var(--surface-2) !important; border-color:var(--accent) !important; color:var(--accent) !important; }
body[data-perf="1"] .btn-danger{ background:var(--danger-soft) !important; color:var(--danger) !important; border:1px solid color-mix(in srgb,var(--danger) 30%,transparent) !important; }
body[data-perf="1"] .btn-danger:hover{ background:color-mix(in srgb,var(--danger) 16%,var(--surface)) !important; }
body[data-perf="1"] .icon-btn{ border-radius:var(--r-sm); color:var(--text-2); background:transparent; transition:all .16s; }
body[data-perf="1"] .icon-btn:hover{ background:var(--accent-soft); color:var(--accent); }

/* 分段控件 / 标签页 */
body[data-perf="1"] .seg,body[data-perf="1"] .perf-seg{ gap:4px; }
body[data-perf="1"] .seg button,body[data-perf="1"] .perf-seg button{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-2); border-radius:var(--r-ctl);
}
body[data-perf="1"] .seg button.on,body[data-perf="1"] .perf-seg button.on,
body[data-perf="1"] .tab.active{
  background:var(--accent-soft) !important; color:var(--accent) !important;
  border-color:var(--accent-line) !important; font-weight:600;
}
body[data-perf="1"] .tab{ color:var(--text-2); border-bottom:2px solid transparent; }
body[data-perf="1"] .tab:hover{ color:var(--accent); }

/* ----------------------------- 6. 表单控件 ----------------------------- */
body[data-perf="1"] input,
body[data-perf="1"] select,
body[data-perf="1"] textarea{
  background:var(--surface);
  border:1px solid var(--input-border);
  border-radius:var(--r-ctl);
  color:var(--text);
  padding-top:9px; padding-bottom:9px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
body[data-perf="1"] input::placeholder,body[data-perf="1"] textarea::placeholder{ color:var(--text-3); }
body[data-perf="1"] input:focus,body[data-perf="1"] select:focus,body[data-perf="1"] textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-soft);
}
body[data-perf="1"] .fld span{ color:var(--text-2); font-weight:600; }
body[data-perf="1"] .fld{ margin-bottom:12px; }
body[data-perf="1"] input[type=checkbox],body[data-perf="1"] input[type=radio]{ accent-color:var(--accent); }

/* ----------------------------- 7. 表格 ----------------------------- */
body[data-perf="1"] .table-wrap{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
body[data-perf="1"] table{ border-color:var(--line); }
body[data-perf="1"] table th{
  background:var(--surface-2) !important;
  color:var(--text-2) !important;
  font-weight:700;
  letter-spacing:.02em;
  padding-top:12px; padding-bottom:12px;
  border-bottom:1px solid var(--line) !important;
}
body[data-perf="1"] table td{ border-bottom:1px solid var(--line); color:var(--text); padding-top:11px; padding-bottom:11px; }
body[data-perf="1"] table tbody tr{ transition:background .12s; }
body[data-perf="1"] table tbody tr:hover td{ background:var(--hover) !important; }
body[data-perf="1"] table b{ color:var(--text); font-variant-numeric:tabular-nums; }
body[data-perf="1"] .row-sel td{ background:var(--accent-soft) !important; }
body[data-perf="1"] .pager-info{ color:var(--text-3); font-size:13px; }
body[data-perf="1"] .pager-ps{ color:var(--text-3); font-size:13px; }
/* 旧组件中按“主色”语义使用 --blue 的位点，统一改随主题主色（--blue 现在保留为系统“信息”蓝） */
body[data-perf="1"] .upload-slot:hover{ border-color:var(--accent); color:var(--accent); }
body[data-perf="1"] #tblHead th.over-col{ box-shadow:inset 3px 0 0 var(--accent); color:var(--accent); }
body[data-perf="1"] .grp-cnt{ background:var(--accent); color:var(--on-accent); }
body[data-perf="1"] .notif-modal-list .notif-item:hover{ border-color:var(--accent); }
body[data-perf="1"] .perm-card:has(.pc-opt input[value="view"]:checked){ border-color:var(--accent); }
body[data-perf="1"] .perm-card:has(.pc-opt input[value="view"]:checked) .pc-opt:has(input[value="view"]:checked) i{ background:var(--accent); color:var(--on-accent); }

/* ----------------------------- 8. 弹窗 / 浮层 ----------------------------- */
body[data-perf="1"] .modal-mask,body[data-perf="1"] .pop-mask{ background:rgba(13,19,32,.55); }
body[data-perf="1"] .modal,body[data-perf="1"] .pop-sheet{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:20px;
  box-shadow:var(--sh-lg) !important;
}
body[data-perf="1"] .modal-head,body[data-perf="1"] .pop-head{ border-bottom:1px solid var(--line); padding:16px 20px; }
body[data-perf="1"] .modal-head h3,body[data-perf="1"] .pop-head h3{ color:var(--text); font-weight:800; }
body[data-perf="1"] .modal-body,body[data-perf="1"] .pop-body{ padding:20px; }
body[data-perf="1"] .modal-x,body[data-perf="1"] .pop-x{ background:var(--surface-2); border:1px solid var(--line); color:var(--text-2); border-radius:10px; }
body[data-perf="1"] .modal-x:hover,body[data-perf="1"] .pop-x:hover{ background:var(--accent-soft); color:var(--accent); }
body[data-perf="1"] .modal-foot,body[data-perf="1"] .pop-foot{ border-top:1px solid var(--line); padding:14px 20px; }
body[data-perf="1"] .modal-head.scrolled{ box-shadow:0 4px 12px rgba(20,30,55,.06); }

/* Toast */
body[data-perf="1"] .toast{
  background:linear-gradient(135deg,#1f2836,#141a24) !important; color:#fff !important;
  border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.28) !important;
}
body[data-perf="1"] .toast.ok{ background:linear-gradient(135deg,#0f9d6e,#0b7f57) !important; }
body[data-perf="1"] .toast.err{ background:linear-gradient(135deg,#e14b4b,#c43333) !important; }

/* 确认弹窗按钮 */
body[data-perf="1"] .dlg-foot{ display:flex; justify-content:flex-end; gap:8px; }

/* ----------------------------- 9. 标签 / 徽章 ----------------------------- */
body[data-perf="1"] .tag,body[data-perf="1"] .tags .tag{ border-radius:999px; font-weight:600; }
body[data-perf="1"] .tag-pending,body[data-perf="1"] .tags.tag-pending{ background:var(--warning-soft,#fef3c7) !important; color:#b45309 !important; }
body[data-perf="1"] .tag-confirmed,body[data-perf="1"] .tags.tag-confirmed{ background:var(--success-soft,#dcfce7) !important; color:#15803d !important; }
body[data-perf="1"] .tag-cancelled,body[data-perf="1"] .tags.tag-cancelled{ background:var(--danger-soft,#fee2e2) !important; color:#dc2626 !important; }
body[data-perf="1"] .tag-high{ background:var(--danger-soft) !important; color:var(--danger) !important; }
body[data-perf="1"] .tag-med{ background:var(--warning-soft) !important; color:var(--warning) !important; }
body[data-perf="1"] .tag-low{ background:var(--success-soft) !important; color:var(--success) !important; }
body[data-perf="1"] .tag-admin{ background:var(--accent-soft) !important; color:var(--accent) !important; }
body[data-perf="1"] .tag-super{ background:var(--purple) !important; color:#fff !important; }
body[data-perf="1"] .tag-user{ background:var(--surface-3) !important; color:var(--text-2) !important; }
body[data-perf="1"] .tag-info{ background:var(--info-soft) !important; color:var(--info) !important; }

/* ----------------------------- 10. 登录页 ----------------------------- */
body[data-perf="1"] .login-view{ background:linear-gradient(160deg,var(--bg-page),color-mix(in srgb,var(--accent) 10%,var(--bg-page))); }
body[data-perf="1"] .login-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--sh-lg);
  width:400px; padding:36px 32px;
}
body[data-perf="1"] .login-card h2{ color:var(--text); font-weight:800; letter-spacing:.02em; }
body[data-perf="1"] .login-sub{ color:var(--text-3); letter-spacing:.06em; }
body[data-perf="1"] .login-card .btn-primary{ width:100%; padding:12px; margin-top:8px; }

/* ----------------------------- 11. 到货明细展开 ----------------------------- */
body[data-perf="1"] .arr-detail{ background:var(--surface-2) !important; border-radius:var(--r-card); }
body[data-perf="1"] .arr-detail-head{ color:var(--text); }
body[data-perf="1"] .arr-head-tip{ color:var(--text-3); }
body[data-perf="1"] .arr-edit-table th{ background:var(--surface-3) !important; }
body[data-perf="1"] .arr-edit-row.changed td{ background:color-mix(in srgb,var(--accent) 7%,var(--surface)) !important; }
body[data-perf="1"] .arr-expand-btn{
  background:var(--surface-2); color:var(--text-2);
  border:1px solid var(--line); border-radius:8px;
}
body[data-perf="1"] .arr-expand-btn:hover{ background:var(--accent-soft); color:var(--accent); }
body[data-perf="1"] .arr-photo-add{
  background:var(--surface-2); border:1px dashed var(--line-2);
  color:var(--text-3); border-radius:9px;
}
body[data-perf="1"] .arr-photo-add:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
body[data-perf="1"] .arr-jump-hi td{ background:var(--accent-soft) !important; }

/* ----------------------------- 12. 任务 / 成员 / 会议 ----------------------------- */
body[data-perf="1"] .task-title{ color:var(--text); font-weight:700; }
body[data-perf="1"] .task-detail{ color:var(--text-2); }
body[data-perf="1"] .task-meta{ color:var(--text-3); font-size:12.5px; }
body[data-perf="1"] .task-overdue{ color:var(--red) !important; font-weight:600; }
body[data-perf="1"] .task-item.task-done{ opacity:.72; }
body[data-perf="1"] .task-item.task-done .task-title{ text-decoration:line-through; color:var(--text-3); }
body[data-perf="1"] .task-unread{ border-color:var(--accent-line) !important; }
body[data-perf="1"] .unread-dot{ background:var(--red); }
body[data-perf="1"] .tpt{ background:var(--surface-2); border:1px solid var(--line); border-radius:9px; color:var(--text-2); }
body[data-perf="1"] .member-name{ color:var(--text); font-weight:700; }
body[data-perf="1"] .member-sub{ color:var(--text-3); font-size:12px; }
body[data-perf="1"] .mtg-card{ transition:transform .16s,box-shadow .16s,border-color .16s; }
body[data-perf="1"] .mtg-card:hover{ transform:translateY(-2px); border-color:var(--accent-line) !important; }
body[data-perf="1"] .mtg-title{ color:var(--text); }
body[data-perf="1"] .mtg-content{ color:var(--text-2); }
body[data-perf="1"] .mtg-meta{ color:var(--text-3); font-size:12.5px; }
body[data-perf="1"] .mtg-tabs{ background:var(--surface) !important; border:1px solid var(--line) !important; box-shadow:var(--sh-sm) !important; }
body[data-perf="1"] .sp-card,.rpt-item{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-card); }
body[data-perf="1"] .sp-picked{ border-color:var(--accent) !important; }
body[data-perf="1"] .rpt-text{ color:var(--text-2); }
body[data-perf="1"] .rpt-head b{ color:var(--text); }
body[data-perf="1"] .rpt-head span{ color:var(--text-3); }

/* ----------------------------- 13. 聊天 / 消息 ----------------------------- */
body[data-perf="1"] .chat-layout{ background:var(--surface) !important; border:1px solid var(--line) !important; box-shadow:var(--sh) !important; }
body[data-perf="1"] .conv-col{ border-right:1px solid var(--line); }
body[data-perf="1"] .conv-head b{ color:var(--text); }
body[data-perf="1"] .conv-search{ color:var(--text-3); }
body[data-perf="1"] .conv-item{ border-radius:var(--r-ctl); transition:background .15s; }
body[data-perf="1"] .conv-item:hover{ background:var(--surface-2); }
body[data-perf="1"] .conv-item.active{ background:var(--accent-soft) !important; }
body[data-perf="1"] .conv-name{ color:var(--text); font-weight:600; }
body[data-perf="1"] .conv-last{ color:var(--text-3); font-size:12.5px; }
body[data-perf="1"] .conv-time{ color:var(--text-3); font-size:11.5px; }
body[data-perf="1"] .conv-unread{ background:var(--accent); color:var(--on-accent); border-radius:999px; }
body[data-perf="1"] .chat-top{ border-bottom:1px solid var(--line); }
body[data-perf="1"] .chat-top-info b{ color:var(--text); }
body[data-perf="1"] .chat-top-btn{ background:var(--surface-2); border:1px solid var(--line); color:var(--text-2); border-radius:10px; }
body[data-perf="1"] .chat-top-btn:hover{ color:var(--accent); border-color:var(--accent); }
body[data-perf="1"] .msg-bubble{ background:var(--surface-2); color:var(--text); border-radius:14px; }
body[data-perf="1"] .msg-row.mine .msg-bubble{ background:var(--accent); color:var(--on-accent); }
body[data-perf="1"] .msg-row.mine .msg-bubble a{ color:var(--on-accent); }
body[data-perf="1"] .msg-time{ color:var(--text-3); font-size:11px; }
body[data-perf="1"] .msg-sender{ color:var(--text-3); font-size:12px; }
body[data-perf="1"] .msg-read{ color:var(--text-3); }
body[data-perf="1"] .msg-read .rd-dot{ background:var(--text-3); }
body[data-perf="1"] .msg-read.read .rd-dot{ background:var(--accent); }
body[data-perf="1"] .chat-input-shell{ background:var(--surface) !important; border:1px solid var(--line) !important; }
body[data-perf="1"] .chat-input-editable{ color:var(--text); }
body[data-perf="1"] .chat-input-editable:empty::before{ color:var(--text-3); }
body[data-perf="1"] .chat-tool{ background:transparent; border:none; color:var(--text-3); }
body[data-perf="1"] .chat-tool:hover{ color:var(--accent); }
body[data-perf="1"] .emoji-panel{ background:var(--surface) !important; border:1px solid var(--line) !important; box-shadow:var(--sh-lg) !important; }
body[data-perf="1"] .emoji-mode.on,body[data-perf="1"] .emoji-tab.on{ color:var(--accent) !important; background:var(--accent-soft) !important; }
body[data-perf="1"] .emoji-item:hover,body[data-perf="1"] .qq-sticker:hover,body[data-perf="1"] .lot-sticker:hover{ background:var(--surface-2); }
body[data-perf="1"] .typing-hint{ color:var(--text-3); }
body[data-perf="1"] .kw-hl{ background:var(--warning-soft); color:var(--warning); }

/* ----------------------------- 14. 日历 / 日程 ----------------------------- */
body[data-perf="1"] .cal-wrap{ background:var(--surface) !important; border:1px solid var(--line) !important; box-shadow:var(--sh-sm) !important; }
body[data-perf="1"] .cal-title{ color:var(--text); }
body[data-perf="1"] .cal-wd{ color:var(--text-3); font-weight:600; }
body[data-perf="1"] .cal-cell{ border-color:var(--line); }
body[data-perf="1"] .cal-cell.cal-today{ background:var(--accent-soft); }
body[data-perf="1"] .cal-num{ color:var(--text-2); }
body[data-perf="1"] .cal-today .cal-num{ color:var(--accent); font-weight:800; }
body[data-perf="1"] .cal-chip{ background:var(--accent-soft); color:var(--accent); border-radius:7px; }
body[data-perf="1"] .cal-more{ color:var(--text-3); }
body[data-perf="1"] .cal-out .cal-num{ color:var(--text-3); opacity:.5; }
body[data-perf="1"] .sch-item{ border:1px solid var(--line); border-radius:var(--r-card); }
body[data-perf="1"] .sch-item.is-done{ opacity:.6; }
body[data-perf="1"] .sch-time{ color:var(--accent); font-weight:600; }
body[data-perf="1"] .sch-main b{ color:var(--text); }
body[data-perf="1"] .sch-main p{ color:var(--text-2); }
body[data-perf="1"] .sch-main small{ color:var(--text-3); }

/* ----------------------------- 15. 系统设置 ----------------------------- */
body[data-perf="1"] .set-tabs{ background:var(--surface) !important; border:1px solid var(--line) !important; box-shadow:var(--sh-sm) !important; border-radius:var(--r-card); }
body[data-perf="1"] .set-tab{ color:var(--text-2); border-radius:var(--r-ctl); transition:all .15s; }
body[data-perf="1"] .set-tab.on{ background:var(--accent-soft); color:var(--accent); font-weight:700; }
body[data-perf="1"] .set-row{ color:var(--text); }
body[data-perf="1"] .set-sub{ color:var(--text); font-weight:600; }
body[data-perf="1"] .bg-swatch{ border:2px solid transparent; border-radius:12px; transition:all .15s; }
body[data-perf="1"] .bg-swatch.active{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
body[data-perf="1"] .perm-matrix{ border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface-2); }
body[data-perf="1"] .perm-head b{ color:var(--text); }
body[data-perf="1"] .perm-head span{ color:var(--text-3); font-size:12px; }
body[data-perf="1"] .pm-head-row{ background:var(--surface-3); color:var(--text-2); }
body[data-perf="1"] .pm-mod{ color:var(--text); font-weight:600; }
body[data-perf="1"] .acct-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
body[data-perf="1"] .acct-who-txt b{ color:var(--text); }
body[data-perf="1"] .acct-who-txt p{ color:var(--text-3); }

/* ----------------------------- 16. 缩略图 / 文件 / 预览 ----------------------------- */
body[data-perf="1"] .p-thumb,body[data-perf="1"] .thumb{ border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
body[data-perf="1"] .p-noimg{ display:grid; place-items:center; background:var(--surface-2); color:var(--text-3); border:1px solid var(--line); border-radius:9px; }
body[data-perf="1"] .file-chip{ background:var(--surface-2); color:var(--accent); border:1px solid var(--line); border-radius:8px; }
body[data-perf="1"] .up-thumb{ border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
body[data-perf="1"] .up-x{ background:var(--danger); color:#fff; }
body[data-perf="1"] .img-viewer{ background:rgba(6,10,18,.86); }
body[data-perf="1"] .img-viewer img{ border-radius:12px; }
body[data-perf="1"] .paste-hint{ background:#141a24; color:#fff; border-radius:8px; box-shadow:var(--sh-lg); }
body[data-perf="1"] .paste-able.paste-hover{ outline:2px dashed var(--accent); outline-offset:2px; }

/* ----------------------------- 17. 全局加载 / 紧急弹窗 / 空状态 ----------------------------- */
body[data-perf="1"] .global-loader{ background:rgba(13,19,32,.35); }
body[data-perf="1"] .global-loader .gl-box,
body[data-perf="1"] .global-loading .gl-box{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:16px;
  box-shadow:var(--sh-lg) !important;
}
body[data-perf="1"] .gl-txt{ color:var(--text-2); }
body[data-perf="1"] .gl-spin{ border-color:var(--input-border); border-top-color:var(--accent); }
body[data-perf="1"] .urgent-mask{ background:rgba(6,10,18,.6); }
body[data-perf="1"] .urgent-box{ background:var(--surface) !important; border:1px solid var(--line) !important; box-shadow:var(--sh-lg) !important; }
body[data-perf="1"] .urgent-title{ color:var(--text); font-weight:800; }
body[data-perf="1"] .urgent-body{ color:var(--text-2); }
body[data-perf="1"] .empty{ color:var(--text-3); }
body[data-perf="1"] .empty-sm{ color:var(--text-3); }
body[data-perf="1"] .mut{ color:var(--text-3); }
/* 暗色：主色为亮色调时，主按钮/徽章/气泡用 --on-accent 深色文字保证对比度（已在各规则内生效） */

/* ----------------------------- 18. 响应式 ----------------------------- */
@media (max-width:1100px){
  body[data-perf="1"] .dash-grid{ grid-template-columns:1fr; }
  body[data-perf="1"] .acct-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  body[data-perf="1"] #content{ padding:14px 12px; }
  body[data-perf="1"] .login-card{ width:calc(100vw - 40px); }
}

/* ============================================================================
   【区域管理豁免】.zone-* / .zb-* / .zp-* / #zoneCanvas / .zone-viewport /
   .zone-world / .zone-box / .zoom-ctl / .zone-edge / .mslot / .slot-chip 等
   —— 本文件不为其编写任何覆盖规则，区域画布保持原样；
   —— 网格线由 app.js 内联绘制，颜色随 --zone-grid（第 0 节令牌）适配主题。
============================================================================ */