/* ============================================================
   天贵学院 · 全站统一设计系统（base.css）
   ------------------------------------------------------------
   所有页面在 <head> 最先引入：
     <link rel="stylesheet" href="/css/base.css">
   页面自己的 <style> 只保留「页面专属布局」，颜色/间距/圆角/
   阴影一律引用这里定义的 CSS 变量，不要再自己定义 :root。
   页面如需不同主题色，只允许覆盖主色族（--accent / --brand），
   写在自己 <style> 的 :root 里（后加载自动覆盖本文件）。
   移动端优先；≥768px 为平板/PC 增强断点。

   【2026-10-08 设计系统升级】见第 7 节：
     · 新增间距刻度 --s-1..--s-8、字号刻度 --fs-*
     · 圆角统一到一套刻度（旧变量保留为别名，页面不用改）
     · 主色加深，��按钮白字达 WCAG AA 4.5:1
     · 正文/次要文字加深，浅灰不再"看不清"
     · 点选框升级：20px 视觉 + 描边内高光 + 勾形打勾
   ============================================================ */

/* ========== 1. 设计 tokens（全站唯一真源） ========== */
:root{
  /* ---- 中性色：背景 ---- */
  --bg:#f4f6fa;             /* 页面底色 */
  --bg-2:#eef1f6;           /* 次级底色 / hover */
  --bg-1:#faf7ff;           /* 渐变底色（陪练页用） */
  --bg-grad-1:#e9f0ff;      /* 门户径向渐变 1 */
  --bg-grad-2:#f4f1ff;      /* 门户径向渐变 2 */
  --card:#ffffff;           /* 卡片面 */
  --card-2:#fbfbfd;         /* 次级卡片面 */

  /* ---- 中性色：描边 ---- */
  --line:#e7eaf0;           /* 常规描边 */
  --line-2:#d8dde7;         /* 强调描边 / 分隔 */

  /* ---- 中性色：文字（2026-10-08 加深）----
     旧值 #7a8194=3.89:1、#9aa1b2=2.59:1 均不达 WCAG AA 4.5:1，
     小字在手机上尤其发虚。新值白底全部 ≥4.8:1。 */
  --text:#16181f;           /* 正文 16.0:1 */
  --ink:#0f172a;
  --ink-2:#475569;
  --ink-3:#6b7280;          /* 6b7280 白底 4.83:1 */
  --ink-4:#cbd5e1;
  --sub:#5b6472;            /* 次要 5.98:1（浅于正文但可读） */
  --sub-2:#6b7280;          /* 弱化文字 4.83:1 */

  /* ---- 主色族 A（后台/考试）：天贵红（2026-10-08 加深至 AA 达标）----
     品牌原色 #F3686D 白字仅 2.99:1，不达标。改为：
       --accent      品牌识别色（logo、浅底、强调环，不做大面积实心）
       --accent-solid 实心按钮/选中态（白字 5.29:1，达标） */
  --accent:#F3686D;         /* 品牌识别色 */
  --accent-d:#C9303C;       /* 实心面：白字 5.29:1 ✅ */
  --accent-d2:#A82730;      /* 更深一档：按下态 / 白字 6.8:1 */
  --accent-solid:#C9303C;   /* 别名：凡是需要"红底白字"都用它 */
  --accent-soft:#FDEBEC;    /* 浅底 */
  --accent-soft-2:#FCE9EA;  /* 浅底（选中） */

  /* ---- 主色族 B（陪练）：默认紫；门户页覆盖为蓝 ---- */
  --brand:#6d28d9;
  --brand-2:#7c3aed;
  --brand-3:#ede9fe;

  /* ---- 扩展色 ---- */
  --purple:#6944DE; --purple-soft:#EFEAFB;
  --amber:#F5C23E; --green:#2CCD7F; --link:#3E9AFE;
  --ok:#128a4a;      --ok-soft:#e7f6ec;      /* 4.5:1 白字 */
  --warn:#a45c06;    --warn-soft:#fef3e2;    /* 白字 4.6:1 */
  --bad:#c62828;     --bad-soft:#fdecec;     /* 白字 5.1:1 */
  --cust:#e11d48;    --agent:#2563eb;   --danger:#c62828;

  /* ---- 阴影（2026-10-12 大改：卡片一律「无阴影 + 1px 实边框」）----
     为什么把柔和阴影全撤掉：满屏 4px/14px 的模糊投影是「AI 生成界面」最强的辨识特征 ——
     同一套模糊影 + 同一个 14px 圆角，看哪页都像同一个模板套出来的。
     改成「1px 实线分隔」之后，区块靠线条而不是光晕区分，页面立刻变得像人画的。
     ⚠️ 唯一保留真阴影的是弹窗（--shadow-modal）：浮在内容上方的层需要真的「浮起来」，
        纯边框会和背景混在一起。 */
  --shadow-sm:none;
  --shadow-md:none;
  --shadow-lg:var(--shadow-modal);
  --shadow-card:none;
  --shadow-modal:0 20px 56px rgba(16,24,40,.20);
  --shadow:none;
  /* 分隔线：取代阴影承担「区块分层」的职责，卡片/列表统一用它描边 */
  --hairline:1px solid var(--line);

  /* ---- 圆角（2026-10-12 下调）----
     14/20px 这种大圆角 + 柔和阴影组合 = 典型的「圆润模板感」。
     收到 6/8px 后，界面会偏向工业/印刷品的硬朗，但仍保留一点圆角 ——
     完全直角（0px）在手机上按压硌手，门店员工又是戴手套单手操作，不合适。 */
  --r-xs:4px;    /* 小徽标、圆点 */
  --r-sm:6px;    /* 输入框、小按钮 */
  --r-md:6px;    /* 卡片、弹窗 —— 主圆角 */
  --r-lg:8px;    /* 大面板、抽屉 */
  --r-pill:999px;/* 胶囊：标签、分段控件 */
  --r-full:50%;  /* 圆形：头像 */
  /* 兼容别名（旧页面沿用） */
  --radius-card:var(--r-md); --radius-input:var(--r-sm); --radius-btn:var(--r-sm);
  --radius:var(--r-lg); --r:var(--r-md); --r-lg:var(--r-lg); --r-sm:var(--r-sm);

  /* ---- 间距刻度（2026-10-08 新增，此前全站靠散写 px） ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;

  /* ---- 字号刻度（2026-10-08 新增，此前散落 12.5/13.5/11.5 等半像素） ---- */
  --fs-xs:11px;  --fs-sm:12px; --fs-md:13px; --fs-base:14px;
  --fs-lg:16px;  --fs-xl:18px; --fs-2xl:22px; --fs-3xl:28px;

  /* ---- 触控区（2026-10-08 新增）：手机端最小可点尺寸 ---- */
  --tap:44px;

  /* ---- 动效（统一曲线与时长，避免各处随手写） ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.15s; --dur:.22s; --dur-slow:.34s;

  /* ---- 布局 / 安全区 ---- */
  --header-h:56px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
  --safe-b:var(--sab);

  /* 勾选控件主题色：默认跟随 --accent-solid；ai/门户页在页内 :root 覆盖为各自品牌色 */
  --check:var(--accent-solid);
}

/* ========== 2. 基础 reset（移动端优先） ========== */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:var(--fs-base);line-height:1.55;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;}
/* 关掉浏览器自带的「左边缘右滑 = 历史后退」：
   学员端自己实现了「左边缘右滑返回上一层」，两者同时生效会一次退两屏（页内返回 + 浏览器后退），
   甚至直接把整个页面退出去。overscroll-behavior-x 只影响「翻到边界之后」的连锁行为，
   不影响页面内任何正常的横向滚动（如 .tbl-wrap 宽表格）。 */
html,body{overscroll-behavior-x:none;}
button{font-family:inherit;touch-action:manipulation;}
a{color:var(--accent-d);text-decoration:none;}
img,video{max-width:100%;}

/* ========== 3. 响应式安全层 ========== */
/* iOS：输入框字号 <16px 聚焦会自动放大页面，这里在手机端统一拉到 16px 防缩放抖动 */
@media (max-width:767px){
  input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]),
  select,textarea{font-size:16px;}
}
/* 表格横向滚动容器：窄屏放不下时横滑而不是撑破布局（新页面/改造时套用） */
.tbl-wrap{overflow:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.tbl-wrap table{min-width:100%;}

/* ========== 4. 通用工具类（与各页现有同名类保持一致语义） ========== */
.hidden{display:none !important;}
.muted{color:var(--sub-2);}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--tap);padding:0 var(--s-5);border-radius:var(--r-sm);
  border:1px solid transparent;font-weight:700;font-size:var(--fs-base);
  cursor:pointer;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  -webkit-appearance:none;appearance:none;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent-solid);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--accent-d2);}
.btn-ghost{background:var(--card);color:var(--text);border-color:var(--line-2);}
.btn-ghost:hover{background:var(--bg-2);}

/* ========== 5. 历史悬空变量兜底（2026-09-15 修复：以下变量曾被引用但从未定义） ========== */
:root{
  --muted:var(--sub-2);      /* admin.html 引用：次要文字灰 */
  --border:var(--line);      /* admin.html 引用：分隔线 */
  --brand-ink:var(--brand);  /* 陪练后台 .tag 文字色 */
}

/* ========== 6. 表单控件统一（2026-09-15 二期：全站勾选框 / 单选 / 下拉框） ==========
   需求：所有勾选框=方框内打勾、选中变色（跟随各页主题色 --check）；下拉框统一外观。
   用 !important 覆盖各页历史自定义样式；
   .vchk 这类「隐藏 input + 自绘 box」组件因自身 opacity:0 不受影响。

   【2026-10-08 升级】原先视觉 18px、选中态是纯色块且没有勾形，糊成一团看不出选中。
   现在：视觉 20px（接近 44px 触控标准的舒适区）、边框内高光让它在白底上有厚度、
   勾形打勾（对勾而非实心块）、hover/focus 过渡补齐。真正的 44px 命中区由外层
   label / .vchk 包裹提供（实测点击区 328×55px，达标）。 */
input[type=checkbox]{
  appearance:none!important; -webkit-appearance:none!important;
  width:20px!important; height:20px!important;
  border:1.5px solid var(--line-2)!important; border-radius:var(--r-xs)!important;
  background:var(--card)!important;
  margin:0; padding:0; vertical-align:middle;
  display:inline-block; position:relative; flex:0 0 auto;
  cursor:pointer;
  box-shadow:inset 0 1px 1px rgba(16,24,40,.04);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
input[type=checkbox]:hover{ border-color:var(--check)!important; }
input[type=checkbox]:checked{ background:var(--check)!important; border-color:var(--check)!important; }
input[type=checkbox]:checked::after{
  content:''; position:absolute; left:6.5px; top:2.5px;
  width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
input[type=checkbox]:indeterminate{ background:var(--check)!important; border-color:var(--check)!important; }
input[type=checkbox]:indeterminate::after{
  content:''; position:absolute; left:4px; top:8px;
  width:10px; height:2px; background:#fff; border-radius:1px;
}
input[type=checkbox]:disabled{ opacity:.45; cursor:not-allowed; }

input[type=radio]{
  appearance:none!important; -webkit-appearance:none!important;
  width:20px!important; height:20px!important;
  border:1.5px solid var(--line-2)!important; border-radius:var(--r-full)!important;
  background:var(--card)!important;
  margin:0; padding:0; vertical-align:middle;
  display:inline-block; position:relative; flex:0 0 auto;
  cursor:pointer;
  box-shadow:inset 0 1px 1px rgba(16,24,40,.04);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
input[type=radio]:hover{ border-color:var(--check)!important; }
input[type=radio]:checked{
  border-color:var(--check)!important;
  box-shadow:inset 0 0 0 5px var(--check)!important;
}
input[type=radio]:disabled{ opacity:.45; cursor:not-allowed; }

input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible{ outline:2px solid var(--check); outline-offset:2px; }

/* 触摸设备上把命中区撑到 44px：用伪元素扩边，不改变视觉尺寸与布局 */
@media (pointer:coarse){
  input[type=checkbox]::before,
  input[type=radio]::before{
    content:''; position:absolute; left:50%; top:50%;
    width:var(--tap); height:var(--tap); transform:translate(-50%,-50%);
  }
}

select{
  appearance:none!important; -webkit-appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 10px center!important;
  background-size:14px!important;
  padding-right:32px!important;
  cursor:pointer;
}
select[multiple]{ background-image:none!important; padding-right:8px!important; }

/* ========== 7. 减少动效偏好（2026-10-08）============
   全站过渡都不长，但系统级「减少动效」开启时一并关掉，
   避免学员在低配安卓机上看到残留动画。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}