/* =====================================================================
 * theme-v4.css —— 和安筑 V9「Precision SaaS」精密工作台风（纯 CSS，功能零改动）
 * ---------------------------------------------------------------------
 * 设计语言（Linear / Vercel / Apple 级）：
 *   · 中性石墨面板 + 极淡冷调底色，去糖果化；信息密度优先
 *   · 主按钮：蓝→粉极光渐变胶囊（品牌记忆点），hover 弹性微放大
 *   · 文本高对比（--text #0f172a 起步），辅助文本恒 ≥ 4.5:1
 *   · 收紧圆角（卡 14px）、双层精密阴影、1px 中性描边
 *   · 标题负字距、数字等宽（tabular-nums）、克制的 hover 位移
 * 兼容：浅色 + [data-theme="dark"]；PC + 移动端（毛玻璃仅 ≥821px 启用）
 * 回退：注释 index.html 中本文件 <link> 即还原 theme-v3（旧版完整保留）
 * ===================================================================== */

/* ---------- ① 设计令牌（精密中性 + 蓝粉品牌渐变） ---------- */
:root{
  --brand:var(--hz-brand); --brand-d:#3a63d8; --brand-2:var(--hz-brand-3);
  --blue:var(--hz-brand); --blue-d:#3a63d8; --blue-700:#2f4fc0;
  --blue-50:var(--hz-brand-soft); --blue-100:#dfe9ff;
  --cyan:#0ea5b7; --cyan-600:#0e7f8d;
  --mint:var(--hz-st-ok); --coral:#e11d48; --amber:#d97706; --violet:#7c3aed;
  --bg:var(--hz-bg); --card:#ffffff;
  --text:var(--hz-ink-1); --ink-2:var(--hz-ink-2); --muted:var(--hz-ink-3); --muted-2:#8a93a3;
  --danger:var(--hz-st-danger); --danger-soft:#fef2f2; --ok:var(--hz-st-ok); --ok-soft:#ecfdf5;
  --warn:var(--hz-st-warn); --warn-soft:#fffbeb;
  --line:var(--hz-line); --line-soft:#eceef2;
  --chip:#f1f4f9; --chip-b:#d8dfec;
  --radius:var(--hz-r-md); --radius-sm:var(--hz-r-sm); --radius-lg:var(--hz-r-lg);
  --shadow:0 1px 2px rgba(15,23,42,.05),0 4px 12px -4px rgba(15,23,42,.07);
  --shadow-lg:0 2px 4px rgba(15,23,42,.05),0 12px 32px -8px rgba(15,23,42,.14);
  --shadow-xl:0 4px 8px rgba(15,23,42,.06),0 24px 56px -16px rgba(15,23,42,.22);
  --ring:0 0 0 3px rgba(76,125,255,.22);
  --spring:cubic-bezier(.22,1.28,.42,1);
  --sidebar-w:256px;
  --grad-brand:var(--hz-brand-grad);
  --grad-brand-soft:linear-gradient(135deg,rgba(76,125,255,.10),rgba(236,72,153,.08));
}

/* ---------- ② 全局：极淡冷调底 + 精密文字 ---------- */
html{background:var(--bg);}
body{
  background:
    radial-gradient(1200px 500px at 85% -12%, rgba(76,125,255,.05), transparent 60%),
    radial-gradient(900px 420px at -6% -4%, rgba(236,72,153,.035), transparent 55%),
    var(--bg);
  color:var(--text); letter-spacing:.1px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
::selection{background:rgba(76,125,255,.20);}
*::-webkit-scrollbar-thumb{background:rgba(100,116,139,.28);background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.5);background-clip:content-box;}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px;}
h1,h2,h3,h4,.panel-h,.ar-title,.h-title,.kb-page-h{letter-spacing:-.015em;}
.stat-card .v,.dash-num,.usr-table,.hz-table,td,th{font-variant-numeric:tabular-nums;}

/* ---------- ③ 侧边导航：白面精密风 ---------- */
.sidebar{background:#ffffff;border-right:1px solid var(--line);}
.side-logo{border-bottom:1px solid var(--line-soft);}
.side-logo .logo-tx{font-weight:700;letter-spacing:-.01em;}
.side-logo .logo-ver{font-variant-numeric:tabular-nums;}
.nav-item{border-radius:9px;font-weight:550;color:var(--ink-2);transition:background .15s,color .15s;}
.nav-item:hover{background:#f1f3f7;color:var(--text);}
.nav-item.active{
  background:var(--blue-50);color:var(--blue-700);
  box-shadow:inset 3px 0 0 var(--blue);font-weight:650;
}
.nav-group{color:var(--muted-2);text-transform:none;font-weight:650;}
.side-foot{color:var(--muted-2);border-top:1px solid var(--line-soft);}

/* ---------- ④ 顶栏：≥821px 毛玻璃吸顶 ---------- */
header{background:rgba(255,255,255,.86);border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.03);}
@media(min-width:821px){
  header{backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);}
  .sidebar{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);}
}
header .h-title{font-weight:750;}
header .h-sub{color:var(--muted);}

/* ---------- ⑤ 卡片 / 面板：白面 1px 描边 + 双层精密阴影 ---------- */
.card,.panel,.stat-card,.proj-card,.item-card,.arena-card,.kb-card,.profile-card,
.admin-card,.dash-act,.cat-card,.session-item,.record-item{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel,.arena-card{border:1px solid var(--line);}
.panel:hover,.arena-card:hover{box-shadow:var(--shadow-lg);}
.panel-h{font-weight:750;color:var(--text);letter-spacing:-.01em;}
.panel-h::before{
  width:3px;border-radius:3px;top:3px;bottom:3px;
  background:var(--grad-brand);
}
/* 仪表大数字：等宽 + 紧排 */
.stat-card .v{letter-spacing:-.03em;font-weight:800;}
.stat-card .l{color:var(--muted);font-weight:600;letter-spacing:.01em;}
/* v3 的彩糖角标/顶部描边 → 换成单色细渐变顶线（保持层级提示但去糖果感） */
.stat-card::before{background:transparent !important;}
.stat-card::after{opacity:.85;}
.stat-card.blue::after,.stat-card.red::after,.stat-card.green::after,.stat-card.orange::after{height:2px;}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.stat-card.blue .v{color:var(--blue-700);}
.dash-act{transition:transform .15s var(--spring),box-shadow .2s,border-color .2s;}
.dash-act:hover{transform:translateY(-2px);}

/* ---------- ⑥ 按钮：蓝粉渐变胶囊（品牌主按钮） ---------- */
.btn{
  background:var(--grad-brand);
  border-radius:999px;
  box-shadow:0 1px 2px rgba(15,23,42,.18),0 6px 16px -6px rgba(96,80,220,.55),inset 0 1px 0 rgba(255,255,255,.22);
  font-weight:650;
  transition:transform .16s var(--spring),box-shadow .2s,filter .18s;
}
.btn:hover{filter:saturate(1.08) brightness(1.04);box-shadow:0 2px 4px rgba(15,23,42,.16),0 10px 24px -8px rgba(96,80,220,.62);transform:translateY(-1px) scale(1.015);}
.btn:active{transform:scale(.965);filter:brightness(.97);}
.btn.ghost{background:#ffffff;color:var(--ink-2);border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.05);}
.btn.ghost:hover{background:#f6f8fb;border-color:#cfd6e2;box-shadow:var(--shadow);}
.btn.danger{background:linear-gradient(135deg,#f43f5e,#dc2626);box-shadow:0 6px 16px -6px rgba(220,38,38,.5);}
/* 检查页顶栏五按钮：统一进蓝粉品牌渐变 */
.fab-rec,.insp-ai-btn,.fab-share{
  background:var(--grad-brand) !important;color:#fff !important;border:none !important;
  box-shadow:0 1px 2px rgba(15,23,42,.18),0 6px 16px -6px rgba(96,80,220,.5) !important;
}
.fab-rec:hover,.insp-ai-btn:hover,.fab-share:hover{transform:translateY(-1px) scale(1.015);filter:saturate(1.08) brightness(1.04);}
.insp-top-right .fab-rec,.insp-top-right .insp-ai-btn,.insp-top-right .fab-share{background:var(--grad-brand) !important;box-shadow:0 4px 12px -6px rgba(96,80,220,.5) !important;}
.insp-top-right .btn.sm.ghost{background:#fff;color:var(--ink-2);border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.05);}
.insp-top-right .btn.sm.ghost:hover{background:#f6f8fb;border-color:#cfd6e2;}
/* ar-btn（评分/题库小按钮）：view 中性、ok 品牌 */
.ar-btn.ok{background:var(--grad-brand);border:none;box-shadow:0 4px 12px -5px rgba(96,80,220,.5);}
.ar-btn.ok:hover{filter:saturate(1.08) brightness(1.04);}
.ar-btn.view{background:#fff;border:1px solid var(--line);color:var(--ink-2);box-shadow:0 1px 2px rgba(15,23,42,.05);}
.ar-btn.view:hover{background:#f6f8fb;}
/* 管理员卡片网格：白面 + 描边 + hover 上浮 */
.admin-card{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .15s var(--spring),box-shadow .2s,border-color .2s;}
.admin-card:hover{transform:translateY(-2px);border-color:#c9d4f5;box-shadow:var(--shadow-lg);}
.admin-card .ac-t{font-weight:700;letter-spacing:-.01em;}
/* 页面返回条 */
.page-back-btn{border-radius:999px;}

/* ---------- ⑦ 输入 / 选择 ---------- */
input[type=text],input[type=password],input[type=number],input[type=search],input[type=date],
select,textarea{
  border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,input[type=search]:focus,
select:focus,textarea:focus{border-color:var(--blue);box-shadow:var(--ring);outline:none;}
.usr-form input,.usr-form select,.form-row input,.form-row select,.form-row textarea{border-radius:10px;}

/* ---------- ⑧ 弹窗 / 抽屉 / 遮罩 ---------- */
.modal-mask{background:rgba(15,23,42,.42);}
@media(min-width:821px){.modal-mask{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}}
.modal-box,.mbox,.cf-modal,.sheet{
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--line);
}
.j59-mg-head b,.mb-head b{letter-spacing:-.01em;}
.drawer{border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);}

/* ---------- ⑨ 手机端 tabbar ---------- */
.tabbar{background:rgba(255,255,255,.94);border-top:1px solid var(--line);box-shadow:0 -1px 2px rgba(15,23,42,.04);}
.tabbar button{font-weight:550;color:var(--muted);border-radius:10px;transition:color .15s;}
.tabbar button.active{color:var(--blue-700);font-weight:700;}
.tabbar button.active .ic{transform:translateY(-1px);}
.tabbar .ic{transition:transform .16s var(--spring);}

/* ---------- ⑩ 登录页 ---------- */
.login-card{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-xl);}
.login-card .btn{border-radius:999px;letter-spacing:.14em;font-weight:700;}
.login-tip{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:10px;color:var(--ink-2);}

/* ---------- ⑪ 表格 / 徽章 / chip ---------- */
.usr-table th,.hz-table th,table th{
  color:var(--muted);font-weight:650;font-size:12px;letter-spacing:.02em;
  border-bottom:1px solid var(--line);
}
.usr-table td,.hz-table td,table td{border-bottom:1px solid var(--line-soft);}
.usr-table tr:hover td,.hz-table tr:hover td{background:#f7f9fc;}
.chip,.badge,[class*="chip-"]{border-radius:999px;}
.dir-hz-badge{border-radius:999px;font-weight:700;}
.empty{color:var(--muted);}

/* ---------- ⑫ 杂项精修 ---------- */
.toast{border-radius:12px;box-shadow:var(--shadow-lg);}
.src-item:hover,.sf-item:hover,.item-card:hover{box-shadow:var(--shadow);}
.fab-ico{box-shadow:0 2px 6px rgba(15,23,42,.16),0 10px 24px -8px rgba(96,80,220,.5);}
.wq-item,.qz-rule{border-radius:12px;}
.logo-ver{font-variant-numeric:tabular-nums;}
/* 滚动条更细 */
*::-webkit-scrollbar{width:8px;height:8px;}
/* 动效克制：系统减弱动态时关闭位移 */
@media (prefers-reduced-motion: reduce){
  .btn,.dash-act,.admin-card,.stat-card,.tabbar .ic{transition:none !important;}
  .btn:hover,.dash-act:hover,.admin-card:hover,.stat-card:hover{transform:none !important;}
}

/* ══════════════════════════════════════════════════════════════════════════
   ★ 层间关系说明（2026-09-30 M2 评估结论）
   本文件是**历史主题层**，与 theme-tokens.css（设计令牌单一来源）的关系如下：
     · 本层定义的变量，**没有任何一个被 theme-v5.css 引用**（实测 0 个）——
       它们只服务于本文件自己的类选择器。
     · 本层的变量值与 tokens **并不相同**（例：正文色这里是 #1f2937，tokens 是 #101828），
       所以**不能简单替换为 var(--hz-*)** —— 那会改变视觉。要统一，必须先确认可接受这点微调。
     · 真正的实装层是 theme-v5.css（它已 224 处引用 tokens）。
   ⇒ 新代码请一律**使用 tokens（var(--hz-*)）**，不要新增本层的变量，也不要照抄本层的值。
   ⇒ 本层保留是为了兼容既有类名；将来若整体下线，需先逐类核对是否已被 v5 覆盖。
      ★ 双线并行分工：本文件只动变量/颜色/断点行，不碰任何 outline / :focus-visible 行（归 F4 线）。
   ══════════════════════════════════════════════════════════════════════════ */