/* ============================================================
   峰仔表单系统 · 设计令牌（唯一来源 / single source of truth）
   ------------------------------------------------------------
   【谁在用】
     后台（theme.css）      : <link tokens.css> → <link theme.css>
     前台 fill/login/s/setup : <link tokens.css> → 内联 <style>（页面专属样式）
   共 5 个页面、2 套设计体系（后台 / 前台），但**令牌只有这一份**。
   改一个色值只需动这里，全站生效；不会再出现"改了一处、漏了四处"。

   【命名约定】
     --xx        填充色（色块、图标、边框、渐变端点）
     --xx-soft   同色系极浅底（提示条、标签底）
     --xx-fg     该浅底上的**文字色**（≥4.5:1，与 --xx 分开的原因见下）
     --xx-bd     描边色
     --xx-solid  可承载文字的大色块底色
     --on-xx     压在 --xx-solid 上的文字色
   为什么 -fg 要单独一套：--primary(#4f7cff) 当填充好看，
   但承白字只有 3.71:1；当浅底上的文字也只有 3.71:1。拆开后全部达标。
   全部组合由 tests/contrast-check.php 持续校验（75 项 × 亮/暗）。

   【暗色机制】
   由 <html data-theme="light|dark"> 驱动，不用媒体查询 ——
   主题在首屏前由 JS 解析写进属性，若同时保留 @media 会出现
   "属性=light 但系统=暗色" 的两套规则打架，优先级不可预测。
   前台用 assets/js/theme.js，后台用 assets/js/fzui.js，
   两者共用同一个存储键 fz_theme，因此在后台切换，填报页也跟着变。
   ============================================================ */

:root{
  /* ---------- 主色 ---------- */
  --primary:#4f7cff;--primary-d:#3a63e0;--primary-soft:#eef4ff;--primary-bd:#d6e4ff;
  --primary-2:#7c5cff;--primary-3:#22d3ee;   /* 渐变副色（品牌区/大标题用） */

  /* ---------- 渐变浅色端点 / 扩展色 ----------
     用于快捷入口图标底、图表序列色等装饰性渐变。此前这些色值硬编码在
     admin/index.php 里（暗色主题下不会跟随），统一提到令牌层后一处改全站生效。
     装饰性渐变在暗色下保持同值即可（承载的是白色图标，对比度不受影响）。 */
  --purple-2:#9a5cff;--teal:#14b8a6;--teal-2:#2dd4bf;--info:#0ea5e9;--info-2:#38bdf8;
  --ok-2:#43c99a;--warn-2:#f7b955;--err-2:#f07a6a;

  /* ---------- 背景层 ---------- */
  --bg:#f4f6fb;--bg-2:#fafbfe;--bg-3:#f6f8fa;--bg-hover:#e8edf5;--card:#ffffff;

  /* ---------- 文字 ---------- */
  --text:#1f2937;--text-2:#374151;--muted:#6b7280;--muted-2:#68717f;

  /* ---------- 线 ---------- */
  --border:#e3e8f0;--border-2:#eef1f6;--line:var(--border);   /* --line 为历史别名，form_engine 生成的 HTML 仍在用 */

  /* ---------- 语义色（填充） ---------- */
  --ok:#2bb673;--ok-soft:#e8f8f0;--ok-bd:#a7f3d0;
  --warn:#f0a020;--warn-soft:#fff8e8;--warn-bd:#f5d9a0;
  --err:#e0524b;--err-soft:#fdecea;--err-bd:#f3c6c2;

  /* ---------- 语义色（浅底上的文字色，WCAG AA） ---------- */
  --primary-fg:#2f52c8;--ok-fg:#127a4a;--warn-fg:#8a5a00;--err-fg:#b3382f;

  /* ---------- 大色块：底 + 其上文字 ---------- */
  --primary-solid:#3a63e0;--on-primary:#ffffff;--primary-grad:linear-gradient(135deg,#3a63e0,#6d3fd4);
  --ok-solid:#127a4a;--on-ok:#ffffff;
  --err-solid:#b3382f;--on-err:#ffffff;

  /* ---------- 圆角 ---------- */
  --r-xs:5px;--r-sm:7px;--r-md:9px;--r-lg:14px;--r-xl:16px;--r-2xl:18px;--r-pill:999px;

  /* ---------- 阴影 ---------- */
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 4px 12px -6px rgba(16,24,40,.14);
  --sh-3:0 10px 24px -12px rgba(79,124,255,.30);
  --sh-4:0 20px 60px -16px rgba(16,24,40,.25);

  /* ---------- 间距 ---------- */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:22px;--sp-6:30px;

  /* ---------- 字号 / 控件尺寸 ---------- */
  --fs-xs:11.5px;--fs-sm:12.5px;--fs-base:13.5px;--fs-md:14px;--fs-lg:16px;--fs-xl:19px;
  --h-ctl:38px;--h-btn-sm:30px;

  /* ---------- 移动端专属 ---------- */
  --tap-min:44px;            /* 最小触控目标尺寸 */
  --actionbar-h:56px;        /* 底部固定动作条高度 */

  /* ---------- 布局尺寸（后台用） ---------- */
  --tb-h:58px;--sb-w:200px;

  color-scheme:light;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ============================================================
   暗色：底变亮，文字应变深 —— 所以 --xx-solid 在暗色下是亮色，
   --on-xx 相应变成深色。这是与亮色相反的一套映射。
   ============================================================ */
html[data-theme="dark"]{
  --primary:#6b8cff;--primary-d:#5a7bf0;--primary-soft:#1c2540;--primary-bd:#2c3a5c;
  --primary-2:#8b7bff;--primary-3:#22d3ee;
  --bg:#0e1320;--bg-2:#151b2a;--bg-3:#1b2233;--bg-hover:#232c40;--card:#161d2c;
  --text:#e6eaf2;--text-2:#cbd3e1;--muted:#94a3b8;--muted-2:#8593a6;
  --border:#2a3346;--border-2:#222a3a;
  --ok:#34c88a;--ok-soft:#12291f;--ok-bd:#14603f;
  --warn:#f5b544;--warn-soft:#2c2413;--warn-bd:#7c5a12;
  --err:#f07068;--err-soft:#2e1a1a;--err-bd:#7f2a2a;
  --primary-fg:var(--primary);--ok-fg:var(--ok);--warn-fg:var(--warn);--err-fg:var(--err);
  --primary-solid:#6b8cff;--on-primary:#0b1020;--primary-grad:linear-gradient(135deg,#7b9bff,#9b7bff);
  --ok-solid:#34c88a;--on-ok:#0a2016;
  --err-solid:#f07068;--on-err:#2a0d08;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 12px -6px rgba(0,0,0,.55);
  --sh-3:0 10px 24px -12px rgba(0,0,0,.6);
  --sh-4:0 20px 60px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ============================================================
   表单级主题（一期）：覆盖色相相关令牌，作用于填报页顶部 Banner 与按钮。
   选择器用 body[data-form-theme=...]，直接写在本元素上，优先级高于
   html[data-theme=dark] 的继承值（变量在 body 自身声明即覆盖继承），
   因此明/暗模式下主题色都生效。键空（默认）时回填为 teal（见下），蓝紫需显式选择。
   ============================================================ */
body[data-form-theme="blue"]{
  --primary:#4f7cff;--primary-d:#3a63e0;--primary-soft:#eef4ff;--primary-bd:#d6e4ff;
  --primary-2:#7c5cff;--primary-3:#22d3ee;--primary-solid:#3a63e0;--on-primary:#ffffff;
  --primary-grad:linear-gradient(135deg,#3a63e0,#6d3fd4);--primary-fg:#2f52c8;
}
body[data-form-theme="teal"]{
  --primary:#0ea5e9;--primary-d:#0284c7;--primary-soft:#e0f5fd;--primary-bd:#bae6fd;
  --primary-2:#22d3ee;--primary-3:#38bdf8;--primary-solid:#0284c7;--on-primary:#ffffff;
  --primary-grad:linear-gradient(135deg,#0ea5e9,#14b8a6);--primary-fg:#0369a1;
}
body[data-form-theme="green"]{
  --primary:#16a34a;--primary-d:#15803d;--primary-soft:#e7f6ec;--primary-bd:#bbf0cb;
  --primary-2:#22c55e;--primary-3:#10b981;--primary-solid:#15803d;--on-primary:#ffffff;
  --primary-grad:linear-gradient(135deg,#16a34a,#0d9488);--primary-fg:#166534;
}
body[data-form-theme="orange"]{
  --primary:#f97316;--primary-d:#ea580c;--primary-soft:#fff1e6;--primary-bd:#fed7aa;
  --primary-2:#f59e0b;--primary-3:#fb923c;--primary-solid:#ea580c;--on-primary:#ffffff;
  --primary-grad:linear-gradient(135deg,#f97316,#ef4444);--primary-fg:#9a3412;
}
body[data-form-theme="rose"]{
  --primary:#ec4899;--primary-d:#db2777;--primary-soft:#fce7f3;--primary-bd:#fbcfe8;
  --primary-2:#d946ef;--primary-3:#f472b6;--primary-solid:#db2777;--on-primary:#ffffff;
  --primary-grad:linear-gradient(135deg,#ec4899,#8b5cf6);--primary-fg:#9d174d;
}
body[data-form-theme="slate"]{
  --primary:#475569;--primary-d:#334155;--primary-soft:#eef1f5;--primary-bd:#cbd5e1;
  --primary-2:#64748b;--primary-3:#475569;--primary-solid:#334155;--on-primary:#ffffff;
  --primary-grad:linear-gradient(135deg,#334155,#0f172a);--primary-fg:#334155;
}

/* ============================================================
   通用组件：验证码输入（doc.php 文档传阅 / s.php 外链分享 共用）
   ------------------------------------------------------------
   两页此前各自内联、样式不一致（doc.php 的输入框甚至没命中任何
   .field 规则 → 退化为浏览器默认外观）。此处统一为一套居中卡片：
   图标 + 标题 + 副标题 + 6 位数字输入 + 全宽主按钮。
   选择器统一以 .verify 作前缀提权，确保覆盖各页内联的 .field input 规则。
   ============================================================ */
.verify{max-width:360px;margin:0 auto;text-align:center}
.verify .v-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 10px 22px -10px rgba(79,124,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.verify .v-ic svg{width:24px;height:24px;display:block}
.verify>h3{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--text)}
.verify .v-sub{margin:0 0 18px;font-size:13px;color:var(--muted);line-height:1.7}
.verify .v-sub b{color:var(--text-2);font-weight:600;word-break:break-word}
.verify form{text-align:left}
.verify .alert{text-align:left}
.verify .field{margin-bottom:14px}
.verify .field>label{display:block;font-size:13px;color:var(--text-2);margin-bottom:7px;font-weight:500;text-align:center}
/* 6 位数字输入：等宽字体 + 均匀字距，text-indent 抵消末位字距使数字视觉居中 */
.verify .code-input{width:100%;height:56px;padding:0 14px;text-align:center;text-indent:.4em;
  font-size:22px;font-weight:600;letter-spacing:.4em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  color:var(--text);background:var(--bg-2);border:1.5px solid var(--border);border-radius:12px;
  transition:border-color .16s,box-shadow .16s,background .16s}
.verify .code-input::placeholder{font-family:inherit;font-weight:400;font-size:14px;letter-spacing:normal;text-indent:0;color:var(--muted)}
.verify .code-input:focus{outline:none;border-color:var(--primary);background:var(--card);box-shadow:0 0 0 4px rgba(79,124,255,.14)}
.verify .btn.primary{width:100%;padding:13px;margin-top:2px}
/* 卡片底部点缀：名言（每 10 分钟轮换，文本由 fz_quote_html() 输出） */
.verify .v-quote{margin:16px 0 0;padding-top:13px;border-top:1px dashed var(--border);
  font-size:12.5px;line-height:1.7;color:var(--muted);text-align:center}
@media(max-width:480px){.verify .code-input{height:52px;font-size:20px}}