/* ============================================================
   Qidalabs 设计系统 · Alpine（2026-10-01 重建）
   “瑞士温泉”视觉世界：极简、克制、留白、发丝线、单一强调色。
   本文件是视觉的唯一权威：接管颜色/字体/间距/圆角/阴影/图标，
   页面内联样式仍负责布局（flex/grid/宽度），两者互不越界。
   为压过历史内联样式，关键属性使用 !important（与旧 themes.css 同机制）。
   ============================================================ */

/* ---------- 1. 令牌：Alpine（默认，冷石白 + 高山松绿） ---------- */
:root, [data-theme="alpine"] {
  --bg:            #F5F5F7;
  --bg-tint:       #EAEAEE;
  --surface:       #FFFFFF;
  --surface-2:     #F5F5F7;
  --surface-3:     #E5E5EA;
  --ink:           #1D1D1F;
  --ink-2:         #424245;
  --ink-3:         #86868B;
  --ink-4:         #A1A1A6;
  --hair:          #D2D2D7;
  --hair-2:        #E5E5EA;

  --accent:        #0071E3;   /* 系统蓝：主要操作色 */
  --accent-hover:  #0077ED;
  --accent-soft:   rgba(0,113,227,.10);
  --accent-line:   rgba(0,113,227,.28);
  --on-accent:     #FFFFFF;

  --ok:   #248A3D;  --ok-bg:   #E9F6EC;
  --warn: #A35D00;  --warn-bg: #FFF1E5;
  --err:  #D43B30;  --err-bg:  #FFEBE9;
  --info: #0071E3;  --info-bg: #E8F2FC;
  --gold: #A35D00;  --gold-bg: #FFF1E5;

  --r-lg: 18px; --r-md: 12px; --r-sm: 9px; --r-pill: 999px;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.04);
  --shadow-2: 0 2px 8px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.04);
  --shadow-3: 0 8px 30px rgba(0,0,0,.16), 0 24px 70px rgba(0,0,0,.10);

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
          'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.68,.24,1);
}

/* ---------- 2. 令牌：夜泉（低刺激暗色） ---------- */
[data-theme="alpine-night"] {
  --bg: #17181A; --bg-tint: #111214;
  --surface: #1F1F22; --surface-2: #28282C; --surface-3: #343438;
  --ink: #F5F5F7; --ink-2: #D1D1D6; --ink-3: #98989D; --ink-4: #6E6E73;
  --hair: #3A3A3E; --hair-2: #2D2D31;
  --accent: #7EB4FF; --accent-hover: #91C0FF; --accent-soft: rgba(126,180,255,.14);
  --accent-line: rgba(126,180,255,.38); --on-accent: #071A35;
  --ok: #70D58C; --ok-bg: rgba(112,213,140,.14);
  --warn: #F2B866; --warn-bg: rgba(242,184,102,.14);
  --err: #FF8F87; --err-bg: rgba(255,143,135,.14);
  --info: #8FB2CC; --info-bg: rgba(143,178,204,.12);
  --gold: #C8A468; --gold-bg: rgba(200,164,104,.12);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
  --shadow-3: 0 2px 4px rgba(0,0,0,.35), 0 28px 64px -24px rgba(0,0,0,.7);
}

/* ---------- 3. 令牌：纸感（暖白，长时间阅读） ---------- */
[data-theme="paper"] {
  --bg: #F4F2ED; --bg-tint: #EDEAE3;
  --surface: #FFFDF9; --surface-2: #F8F5EF; --surface-3: #F0ECE3;
  --ink: #22201C; --ink-2: #4F4A42; --ink-3: #767066; --ink-4: #9E978B;
  --hair: #E2DED4; --hair-2: #EDEAE3;
  --accent: #7A5C34; --accent-hover: #63492A; --accent-soft: rgba(122,92,52,.09);
  --accent-line: rgba(122,92,52,.3); --on-accent: #FFFDF9;
  --ok: #57734F; --ok-bg: #EFF3EA;
  --warn: #8A6327; --warn-bg: #F7F2E8;
  --err: #9E4C44; --err-bg: #F8EDEB;
  --info: #4C6A80; --info-bg: #EDF1F4;
  --gold: #8A6327; --gold-bg: #F7F2E8;
}

/* ---------- 3.5 旧变量名别名 ----------
   历史页面里有数千处 var(--line) / var(--bg-card) / var(--ink-soft) 之类引用。
   这里用 var() 间接指向新令牌，既让存量 CSS 立刻进入新视觉世界，
   又能在切换主题（夜泉/纸感）时自动跟随，无需逐个改动。 */
:root {
  --bg-page: var(--bg);
  --bg-card: var(--surface);
  --bg-raised: var(--surface-2);
  --bg-hover: var(--surface-3);
  --bg-input: var(--surface);
  --ink-soft: var(--ink-2);
  --ink-mute: var(--ink-3);
  --ink-faint: var(--ink-4);
  --line: var(--hair);
  --line-soft: var(--hair-2);
  --green: var(--ok);      --green-bg: var(--ok-bg);
  --red: var(--err);       --red-bg: var(--err-bg);
  --blue: var(--info);     --blue-bg: var(--info-bg);
  --shadow: rgba(20,24,26,.08);
  --shadow-strong: rgba(20,24,26,.16);
  --radius: 10px;
}

/* ---------- 4. 基础层 ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

body {
  margin: 0;   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  padding: var(--sp-7) var(--sp-4) var(--sp-9);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  transition: background .35s var(--ease), color .35s var(--ease);
}

/* 浏览器表面：选中 / 光标 / 焦点 / 滚动条 —— 页面是否被“设计过”的最廉价信号 */
::selection { background: var(--accent-line); color: var(--ink); }
input, textarea { caret-color: var(--accent); }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--hair); border-radius: 999px; border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ---------- 5. 版心 ---------- */
/* 2026-10-05 视觉回滚：这里原先是 `max-width:760px!important`，把三张页面各自写在
   行内样式里的 9 月版心宽度（打卡 680 / 词典 750 / 后台 1080）统一压成了 760。
   删掉后各页面自己的宽度声明重新生效，与 9 月一致；其余外壳属性仍由本条提供。 */
.container {
  width: 100% !important;
  background: var(--surface) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-lg) ;
  box-shadow: var(--shadow-2) ;
  padding: var(--sp-7) var(--sp-6) var(--sp-8);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  animation: rise .5s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 2026-10-05 视觉回滚：教师后台的 1120px 一并撤掉，回到 9 月后台自己写的 1080px。 */

/* ---------- 6. 排版：层级 + “上方留白多于下方” ---------- */
h1, h2, h3, h4 { color: var(--ink) !important; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
h2 {
  text-align: center ;
  font-size: 22px ;
  margin: 0 0 var(--sp-1);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  padding: 0;   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  letter-spacing: .02em ;
}
h2::after { display: none !important; }          /* 去掉旧的下划线装饰 */
h3 { font-size: 16px ; margin: var(--sp-6) 0 var(--sp-3); }
h4 { font-size: 14px ; margin: 0 0 var(--sp-3); }
.subtitle, .sub, .footer {
  color: var(--ink-3) !important;
  text-align: center ;
  font-size: 13px ;
  margin: 0 0 var(--sp-6);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  letter-spacing: .02em;
}
.footer { margin: var(--sp-7) 0 0; font-size: 11.5px ; color: var(--ink-4) !important; }
.section-title {
  font-size: 12px ;
  font-weight: 700 ;
  letter-spacing: .1em ;
  color: var(--ink-3) !important;
  text-transform: none;
  margin: var(--sp-7) 0 var(--sp-3);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  padding: 0 0 var(--sp-2);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  border-bottom: 1px solid var(--hair) ;
  display: flex; align-items: center; gap: var(--sp-2);
}
.section-title::before { display: none !important; }   /* 去掉彩色小方块 */
p { margin: 0 0 var(--sp-3); }
small, .tip, .hint { color: var(--ink-3) !important; font-size: 12.5px; line-height: 1.65; }

/* ---------- 7. 图标系统（手绘 SVG，统一描边与重量，取代 emoji） ---------- */
.ico-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -.14em;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-lg { width: 1.35em; height: 1.35em; }
.ico-sm { width: .85em; height: .85em; stroke-width: 2; }
.ico-fill { fill: currentColor; stroke: none; }

/* ---------- 8. 按钮 ---------- */
button, .btn {
  /* 2026-10-05 回滚：这里的 `font-family:var(--font)!important` 整条删掉了。
     真页面差分：9 月 index 的标签钮 / 搜索钮算出来是 UA 的 Arial（45.2px 高），
     加了这条后被换成雅黑（43.6px），每个按钮矮 1.6px，一屏下来容器矮 4~5px。
     9 月没有给按钮声明字体，就让按钮回到浏览器的默认字体；
     页面自己在 style 里写过字体的（打卡/后台多数按钮）仍按页面走。 */
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-md) ;
  /* 2026-10-05 视觉回滚：字号/内边距改为「无 !important」的兜底值，
     让 9 月页面里各自写在 style 上的按钮字号与内边距重新生效
     （Alpine 当年用 !important 把它们全部压成 14px / 10px 18px）。 */
  font-size: 14px;
  font-weight: 600 ;
  letter-spacing: .02em;
  padding: 10px 18px;
  /* 10-05 回滚：这里原本有 min-height:40px，会把 9 月的小按钮撑高，撤掉 */
  box-shadow: var(--shadow-1) ;
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease) !important;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
button:hover, .btn:hover { background: var(--accent-hover) !important; transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0) scale(.99) !important; }
button:disabled, .btn:disabled {
  background: var(--surface-3) !important; color: var(--ink-4) !important;
  box-shadow: none ; cursor: not-allowed; transform: none;
}
.btn.sec, button.sec {
  background: var(--surface) !important; color: var(--ink-2) !important;
  border: 1px solid var(--hair) !important; box-shadow: none ;
}
.btn.sec:hover, button.sec:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.btn.sm, button.sm { padding: 7px 14px; font-size: 13px; width: auto; }          /* 10-05 回滚：!important 与 min-height 撤掉，页面自写的 9 月尺寸赢 */
.btn.tiny, button.tiny {
  padding: 5px 11px; font-size: 12px;   /* 10-05 回滚：同上 */
  background: var(--surface-2) !important; color: var(--ink-2) !important;
  border: 1px solid var(--hair) !important; box-shadow: none ; width: auto;
}
.btn.tiny:hover, button.tiny:hover { background: var(--surface-3) !important; }
.btn.full { width: 100%; }
.btn.warn { background: var(--err-bg) !important; color: var(--err) !important; border: 1px solid var(--err) !important; }
.btn.warn:hover { background: var(--err) !important; color: #fff !important; }

/* ---------- 9. 输入 ---------- */
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="email"], input[type="search"], input[type="time"], textarea, select {
  font-family: var(--font) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) ;
  font-size: 15px;          /* 同上：10-05 回滚后不再压死页面自写的输入框字号 */
  padding: 10px 14px;       /* 同上 */
  /* 10-05 回滚：同上，输入框也不再有 42px 下限 */
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease) !important;
}
/* 弹层与表单内的输入保持通栏；其余场景由页面自身布局决定宽度 */
.box input, .modal input, .box textarea, .modal textarea, .box select { width: 100% !important; }
.search-box input { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) ;
}
input::placeholder, textarea::placeholder { color: var(--ink-4) !important; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; accent-color: var(--accent); }
select option { background: var(--surface); color: var(--ink); }
textarea { min-height: 88px; line-height: 1.65; resize: vertical; }

/* ---------- 10. 卡片 / 列表：发丝线取代彩色粗边框 ---------- */
.card, .qbox, .pk-card, .err-item, .daily-row, .g-chapter, .pk-hist-card, .quote-card,
.dmc-card, .qa-item, .fbrow, .chatrow, .ann-item, .poll-item, .weak-item {
  background: var(--surface) !important;
  border: 1px solid var(--hair) !important;
  border-left: 1px solid var(--hair) ;
  border-radius: var(--r-md) ;
  box-shadow: var(--shadow-1) ;
  padding: var(--sp-4) var(--sp-4);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  margin-bottom: var(--sp-3);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
}
.card::before, .card::after { display: none !important; }   /* 去掉左侧 5px 色条 */
.card .w, .card .word-header { font-size: 26px ; font-weight: 700 ; color: var(--ink) !important; letter-spacing: -.01em; }
.card .ph { color: var(--ink-3) !important; font-size: 13px; }
.card .m { color: var(--ink) !important; font-size: 15px; font-weight: 500; }
.root, .ai-out, .pos-list, .ex-list, .g-intro, .conf-item, .query-zh {
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-left: 1px solid var(--hair) ;
  border-radius: var(--r-sm) ;
  padding: var(--sp-3) var(--sp-4);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  margin-top: var(--sp-3);
}
.example-item, .translation-text, .g-ex, .ann-item, .poll-item, .res-item {
  border-left: 1px solid var(--hair) ;
  border-radius: var(--r-sm) ;
}
.res-item { border-left-width: 3px ; }
.res-item.ok { background: var(--ok-bg) !important; border-left-color: var(--ok) ; }
.res-item.no { background: var(--err-bg) !important; border-left-color: var(--err) ; }

/* 横幅 */
.banner {
  text-align: center; padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-md) ; margin-bottom: var(--sp-5);
  border: 1px solid var(--hair) !important;
}
.banner.pass { background: var(--ok-bg) !important; border-color: var(--ok) !important; }
.banner.fail { background: var(--err-bg) !important; border-color: var(--err) !important; }
.banner .big { font-size: 22px ; font-weight: 700; margin-bottom: var(--sp-2); }
.banner.pass .big { color: var(--ok) !important; }
.banner.fail .big { color: var(--err) !important; }
.banner .sm2 { color: var(--ink-2) !important; font-size: 14px; }

/* 公告条：改为淡底 + 发丝线 */
.announce-bar {
  background: var(--gold-bg) !important;
  border: 1px solid var(--hair) !important;
  border-left: 1px solid var(--hair) ;
  border-radius: var(--r-md) ;
  padding: var(--sp-3) var(--sp-4);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  margin: 0 0 var(--sp-5);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
}
.announce-bar .ab-head { color: var(--gold) !important; font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: var(--sp-2); }
.announce-bar .ab-item { border-top: 1px solid var(--hair-2) ; padding: var(--sp-2) 0; font-size: 14px; color: var(--ink-2) !important; }
.announce-bar .ab-time { color: var(--ink-4) !important; font-size: 11.5px; margin-left: var(--sp-2); }

/* 胶囊 / 标签：统一为小圆角 + 淡底 */
.pill, .tag, .chip, .badge, .spk, .pk-badge, .g-lv {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px ; font-weight: 600 ;
  padding: 2px 8px;   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */ border-radius: 6px ;
  background: var(--surface-2) !important; color: var(--ink-2) !important;
  border: 1px solid var(--hair) !important;
  letter-spacing: .01em;
}
.pill.yes, .tag.new { background: var(--ok-bg) !important; color: var(--ok) !important; border-color: transparent !important; }
.pill.no, .tag.pk { background: var(--err-bg) !important; color: var(--err) !important; border-color: transparent !important; }
.pill.gray { background: var(--surface-3) !important; color: var(--ink-3) !important; }
.tag.rev { background: var(--gold-bg) !important; color: var(--gold) !important; }
.chip { background: var(--info-bg) !important; color: var(--ink) !important; padding: 4px 10px; border-radius: var(--r-pill) ; }
.chip b { color: var(--info) !important; }
.rate-hi { color: var(--ok) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-lo { color: var(--warn) !important; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 11. 统计格：不用“大数字 + 小标签”模板，改为安静的读数 ---------- */
.stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  gap: var(--sp-3) ;
  margin: 0 0 var(--sp-6);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
}
.stat {
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) ;
  padding: var(--sp-4) var(--sp-3);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  text-align: left ;
  position: relative;
}
.stat + .stat::before { display: none !important; }
.stat .n { font-size: 22px ; font-weight: 650 ; color: var(--ink) !important; font-variant-numeric: tabular-nums; letter-spacing: -.02em; display: block; }
.stat .l { font-size: 11.5px ; color: var(--ink-3) !important; margin-top: 2px; display: block; letter-spacing: .04em; }

/* ---------- 12. 导航磁贴 ---------- */
.topnav {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
  gap: var(--sp-2) ;
  margin: 0 0 var(--sp-6);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
}
.navtile {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 66px; padding: var(--sp-3) var(--sp-2);
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) ;
  box-shadow: none ;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  cursor: pointer;
}
.navtile:hover { background: var(--surface-3) !important; transform: translateY(-1px); }
.navtile.on { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; }
.navtile.on::after { display: none !important; }
.navtile .ni { font-size: 20px; line-height: 1; color: var(--accent); display: flex; }
.navtile .nt { font-size: 12px ; font-weight: 600 ; color: var(--ink-2) !important; }
.navtile.on .nt { color: var(--ink) !important; }

/* ---------- 13. 标签页：分段控件 ---------- */
.tabs {
  display: flex !important; flex-wrap: wrap; gap: 4px ;
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) ;
  padding: 4px;   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  margin: 0 0 var(--sp-6);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  justify-content: flex-start !important;
}
.tab {
  flex: 0 1 auto !important;
  padding: 8px 14px;   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  border-radius: 7px ;
  font-size: 13px ; font-weight: 600 ;
  box-shadow: none ;
  /* 2026-10-05 回滚：min-height:36px 与 white-space:nowrap 都撤了 —— 9 月没有这两条，
     词典页的页内 button{white-space:nowrap} 自己会生效，后台页的标签照 9 月那样折行。 */
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.tab:hover { background: var(--surface-3) !important; color: var(--ink) !important; }
.tab.active {
  background: var(--surface) !important; color: var(--ink) !important;
  box-shadow: var(--shadow-1) ;
}
.tab .badge {
  background: var(--accent) !important; color: #fff !important;
  border: none !important; border-radius: var(--r-pill) ;
  min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 14. 工具栏 ---------- */
.toolbar {
  display: flex !important; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) ; margin: 0 0 var(--sp-4);
}
.toolbar input[type="text"] { flex: 1 1 200px !important; min-width: 160px !important; width: auto !important; }

/* ---------- 15. 表格 ---------- */
.tablewrap {
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) ;
  box-shadow: none ;
  overflow-x: auto;
  background: var(--surface) !important;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  background: var(--surface-2) !important;
  color: var(--ink-3) !important;
  font-size: 12px ; font-weight: 700 ;
  letter-spacing: .04em;
  padding: var(--sp-3) var(--sp-4);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  text-align: left ;
  border-bottom: 1px solid var(--hair) ;
  white-space: nowrap;
}
thead th:hover { background: var(--surface-3) !important; }
tbody td {
  padding: var(--sp-3) var(--sp-4);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  border-bottom: 1px solid var(--hair-2) ;
  color: var(--ink-2) !important;
  text-align: left ;
  font-variant-numeric: tabular-nums;
}
tbody tr:hover { background: var(--surface-2) !important; }
tbody tr:last-child td { border-bottom: none ; }
td.name { font-weight: 600 ; color: var(--ink) !important; }
td.key { font-family: var(--mono) !important; color: var(--ink-3) !important; font-size: 12.5px; }
/* 10-06 「看不清字」：.empty / .footer / 公告时间 / 消息名 这四处原来都吃 --ink-4(#A1A1A6)，
   而且带 !important —— themes.css 里同名的 .empty 是普通声明，被这条按下去了（实测 1.82:1）。
   统一改走 --ink-soft：暖纸主题下是 #6b5d48（≈5.2:1），夜读主题下 themes.css 会自动换成浅墨。
   禁用态按钮和输入框占位符仍留 --ink-4，那是「不可用」的视觉语义，不是正文。 */
.empty { text-align: center; color: var(--ink-soft) !important; padding: var(--sp-8) 0; font-size: 13.5px; }
table.mini th, table.mini td { padding: var(--sp-2) var(--sp-3); }

/* ---------- 16. 弹层 / 模态 ---------- */
.mask, .modal-mask, #keyMask, #infoMask, #fbMask, #pkMask, #chatMask {
  background: rgba(16,20,22,.42) !important;
  backdrop-filter: blur(6px);
  padding: var(--sp-5);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
}
.box, .modal {
  background: var(--surface) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-lg) ;
  box-shadow: var(--shadow-3) ;
  padding: var(--sp-6);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  width: 100%;
  animation: rise .28s var(--ease) both;
}
.box h3, .modal-h {
  font-size: 16px ; font-weight: 650 ; color: var(--ink) !important;
  margin: 0 0 var(--sp-1);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */ display: flex; align-items: center; gap: var(--sp-2); justify-content: center;
}
.box .sub, .modal-tip { color: var(--ink-3) !important; font-size: 13px ; margin: 0 0 var(--sp-5); text-align: center; }
.modal-btns { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); flex-wrap: wrap; }
.err { color: var(--err) !important; font-size: 13px; margin-top: var(--sp-2); min-height: 16px; }
.loading { text-align: center; padding: var(--sp-8) 0; color: var(--ink-3) !important; font-weight: 500;
  /* 2026-10-05 回滚：删掉 font-size:13.5px —— 9 月的 .loading 没写字号，跟着正文走 16px；
     这条把加载态压小，导致打卡页/后台的 #app 首屏矮 3.2px（真页面差分实测）。 */ }
.loading::before {
  content: ""; display: block; width: 26px; height: 26px; margin: 0 auto var(--sp-3);
  border-radius: 50%; border: 2px solid var(--hair); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 17. 测验 / 虚拟键盘 ---------- */
.qwrap { margin-top: var(--sp-2); }
.qbox { margin-bottom: var(--sp-4); padding: var(--sp-5); }
.qhead { font-size: 12px ; font-weight: 700 ; color: var(--accent) !important; letter-spacing: .06em; margin-bottom: var(--sp-3); }
.qprompt { font-size: 19px ; font-weight: 650; color: var(--ink) !important; margin-bottom: var(--sp-3); line-height: 1.45; }
.qph, .qhint { font-size: 13px ; color: var(--ink-3) !important; margin-bottom: var(--sp-3); }
.ans-box {
  min-height: 54px ; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--accent-line) !important;
  background: var(--accent-soft) !important;
  border-radius: var(--r-md) ;
  font-size: 18px ; letter-spacing: .06em;
  box-shadow: none ;
}
.ans-box.active { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) ; }
.ans-box .ans-text { color: var(--accent) !important; }
.opt, .pk-opt {
  display: block; border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) ; padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */ font-size: 15px ;
  color: var(--ink-2) !important; background: var(--surface) !important;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.opt:last-child, .pk-opt:last-child { margin-bottom: 0; }
.opt:hover, .pk-opt:hover { border-color: var(--accent-line) !important; background: var(--accent-soft) !important; }
.opt.sel, .pk-opt.sel {
  background: var(--accent) !important; border-color: var(--accent) !important;
  color: var(--on-accent) !important; box-shadow: var(--shadow-1) ;
}
.vkeyboard {
  max-width: 760px ;
  background: var(--surface) !important;
  border-top: 1px solid var(--hair) ;
  box-shadow: var(--shadow-3) ;
  border-radius: var(--r-lg) var(--r-lg) 0 0 ;
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
}
.vk-row { gap: 6px ; margin-bottom: 6px; }
.vk-key {
  height: 52px !important; max-width: 52px ;
  background: var(--surface-2) !important; border: 1px solid var(--hair) !important;
  border-radius: var(--r-sm) ; font-size: 19px ; font-weight: 600 ;
  color: var(--ink) !important; box-shadow: none ;
}
.vk-key:active { background: var(--accent) !important; color: var(--on-accent) !important; }
.vk-key.wide { max-width: 92px ; font-size: 13px ; }
.vk-key.space { max-width: 200px ; font-size: 13px ; color: var(--ink-3) !important; }

/* ---------- 18. PK 表面（2026-10-06 二次回滚：英雄卡与奖牌回到 9 月的深色渐变） ----------
   原来这两条是 `background:var(--surface-2)!important` / `background:var(--accent-soft)!important`，
   把 9 月的深紫英雄卡刷成了浅米色面板，可卡里的字是页内写死的白字（.pk-hero-name{color:#fff}、
   .pk-hero-pts .n{color:#ffd75e}），浅底 + 白字 = 亓老师截图里那片完全看不清的字。
   10-05 回滚时只撤了同块里 padding/margin/gap 的 !important，漏了背景这条，本次补上：
   背景与尺寸交还给页面（9 月 #3b3260→#5d3f7e 渐变、56px 金牌），白字重新站得住。 */
#pkBody .pk-hero, .pk-hero {
  border-radius: var(--r-md) ;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  gap: var(--sp-4) ;
}
#pkBody .pk-hero-medal {
  border-radius: var(--r-md) ;
  display: flex; align-items: center; justify-content: center;
}
.pk-chip, .pk-tile, .pk-mycard, .pk-vs-card, .pk-decor-preview {
  background: var(--surface) !important; border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) ; box-shadow: none ;
}
.pk-tile:hover, .pk-chip:hover { background: var(--surface-2) !important; border-color: var(--accent-line) !important; }
.pk-prompt { font-size: 26px ; font-weight: 700; letter-spacing: -.01em; margin: var(--sp-3) 0 var(--sp-5); }
.pk-opts { gap: var(--sp-3) ; }
.pk-opt { box-shadow: none ; padding: var(--sp-4); }
.pk-opt.sel { transform: none !important; }
.pk-progress-bar { background: var(--surface-3) !important; border-radius: 999px ; height: 8px !important; }
.pk-progress-fill.me { background: var(--accent) !important; }
.pk-progress-fill.opp { background: var(--ink-4) !important; }
.pk-timerbar { background: var(--surface-3) !important; height: 6px !important; border-radius: 999px ; }
.pk-timerfill { background: var(--accent) !important; }
.pk-board { gap: 6px ; }
.pk-row {
  background: var(--surface) !important; border: 1px solid var(--hair) !important;
  border-left: 1px solid var(--hair) ;
  border-radius: var(--r-sm) ; padding: var(--sp-3) var(--sp-4);
  flex-wrap: wrap !important; gap: var(--sp-2) ;
}
.pk-row.pk-merow { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; }
.pk-vs-vs { color: var(--ink-4) !important; font-size: 18px ; font-weight: 600; }
.pk-versus-revenge .pk-vs-head,
.pk-versus-revenge .pk-vs-vs,
.pk-versus-revenge .pk-vs-count { color: var(--err) !important; text-shadow: none !important; animation: none !important; }
.pk-versus-revenge .pk-vs-card.me { border-color: var(--err) !important; box-shadow: none ; }
.pk-miss { background: var(--err-bg) !important; border: 1px solid var(--hair) !important; border-radius: var(--r-md) ; }
.pk-hist-card { box-shadow: var(--shadow-1) ; border-radius: var(--r-md) ; }
.deco-name.pk-ef-flame::before, .deco-name.pk-ef-flame::after,
.deco-name.pk-ef-star::before, .deco-name.pk-ef-star::after,
.deco-name.pk-ef-thunder::before, .deco-name.pk-ef-thunder::after,
.deco-name.pk-ef-frost::before, .deco-name.pk-ef-frost::after,
.deco-name.pk-ef-moss::before, .deco-name.pk-ef-moss::after { content: none !important; }
.pk-code {
  font-size: 30px ; letter-spacing: .18em ;
  background: var(--surface-2) !important; border: 1px solid var(--accent-line) !important;
  color: var(--accent) !important; border-radius: var(--r-md) ; padding: var(--sp-4);
}
#pkMask .box { max-width: 920px ; padding: var(--sp-5); }
#pkBody { padding: var(--sp-1); }

/* ---------- 19. 悬浮球：安静、对齐、互不挤压 ---------- */
#chatFab, #pkFab, #fbFab {
  width: 50px !important; height: 50px !important;
  background: var(--surface) !important;
  color: var(--accent) !important;
  border: 1px solid var(--hair) !important;
  box-shadow: var(--shadow-2) ;
  border-radius: var(--r-pill) ;
  font-size: 20px ;
  display: none; align-items: center; justify-content: center;
}
#chatFab { right: var(--sp-5) ; bottom: var(--sp-5) ; }
#pkFab   { right: var(--sp-5) ; bottom: calc(var(--sp-5) + 62px) ; }
#fbFab   { right: var(--sp-5) ; bottom: calc(var(--sp-5) + 124px) ; }
#chatFab:hover, #pkFab:hover, #fbFab:hover { background: var(--accent-soft) !important; transform: translateY(-1px); }
#chatBadge { background: var(--err) !important; border: 2px solid var(--surface) !important; box-shadow: none ; }

/* 主题切换器 */
.theme-fab {
  width: 34px !important; height: 34px !important;
  background: var(--surface) !important; border: 1px solid var(--hair) !important;
  box-shadow: var(--shadow-1) ; color: var(--ink-3) !important;
  top: var(--sp-4) ; right: var(--sp-4) ;
}
.theme-fab:hover { color: var(--accent) !important; transform: none !important; }
.theme-panel {
  display: none !important;
  background: var(--surface) !important; border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) ; box-shadow: var(--shadow-2) ;
  top: 58px ; right: var(--sp-4) ; padding: 6px;
}
.theme-panel.show { display: block !important; }
.theme-opt { font-size: 13px ; color: var(--ink-2) !important; border-radius: var(--r-sm) ; padding: 8px 10px; }
.theme-opt:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.theme-opt.active { background: var(--accent-soft) !important; color: var(--accent) !important; }
.theme-opt .check { color: var(--accent); }

/* 主题切换器：固定在视口右上角，不参与页面布局 */
.theme-fab {
  position: fixed !important;
  top: 14px ;
  right: 14px ;
  z-index: 2000 !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0;   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
  border-radius: 50% ;
}
.theme-panel {
  position: fixed !important;
  top: 60px ;
  right: 14px ;
  z-index: 2001 !important;
}

/* ---------- 20. 聊天气泡 ---------- */
.chat-msg, .cmsg { margin-bottom: var(--sp-3); max-width: 82%; }
.chat-msg .bub, .cmsg .cbub {
  padding: 9px 13px;   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */ border-radius: 14px ; font-size: 14.5px; line-height: 1.55;
}
.chat-msg.student .bub, .cmsg.teacher .cbub { background: var(--accent) !important; color: var(--on-accent) !important; }
.chat-msg.teacher .bub, .cmsg.student .cbub {
  background: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid var(--hair) !important;
}
.chat-msg .nm, .cmsg .cnm { font-size: 11px ; color: var(--ink-4) !important; margin-bottom: 4px; }

/* ---------- 21. 响应式 ---------- */
@media (max-width: 900px) {
  .container { padding: var(--sp-6) var(--sp-5) var(--sp-7); }
}
@media (max-width: 640px) {
  body { padding: var(--sp-5) var(--sp-3) var(--sp-8); }
  .container {
    padding: var(--sp-5) var(--sp-4) var(--sp-6);   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
    border-radius: var(--r-md) ;
    border-left: none ; border-right: none ;
  }
  h2 { font-size: 19px ; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .topnav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .tabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .card .w, .card .word-header { font-size: 22px ; }
  .pk-prompt { font-size: 22px ; }
  .pk-opts { grid-template-columns: 1fr !important; }
  .mask, .modal-mask, #keyMask, #pkMask { padding: var(--sp-3); }
  .box, .modal { padding: var(--sp-5) var(--sp-4); }
  .toolbar input[type="text"] { flex: 1 1 100% !important; }
  .vk-key { height: 46px !important; }
}
@media (max-width: 420px) {
  .navtile { min-height: 60px ; padding: var(--sp-2) 2px; }
  .navtile .nt { font-size: 11.5px ; }
  .stat { padding: var(--sp-3) var(--sp-3); }
  .stat .n { font-size: 19px ; }
  .btn, button { padding: 9px 14px; }   /* 10-05 回滚：手机端也不再压死，跟桌面一样听页面的 */
}

/* ---------- Quartz 页面外壳：典雅版 ---------- */
body.page-dict .container,
body.page-checkin .container,
body.page-card .container,
body.teacher .container {
  background: var(--surface) !important;
  border-color: var(--hair) !important;
  box-shadow: var(--shadow-2) ;
}
body.page-dict .container > h2,
body.page-checkin .container > h2,
body.page-card .container > h2,
body.teacher .container > h2 {
  font-size: 24px ;
  letter-spacing: -.04em ;
  font-weight: 700 ;
}
body.page-dict .tabs,
body.teacher .tabs {
  box-shadow: 0 1px 2px rgba(0,0,0,.03) ;
}
body.page-checkin .topnav {
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-lg) ;
  padding: 6px;   /* 10-05 回滚：!important 已撤，间距交还给页面(=9 月) */
}
body.page-card .hero,
body.page-card .resbar .res,
body.page-card .tile,
body.page-card .mission,
body.page-card .ccard,
body.page-card .pack,
body.page-card .passrow {
  box-shadow: var(--shadow-1) ;
}
body.page-card .hero .medal {
  border-radius: var(--r-md) ;
}
body.page-card .battle .prompt {
  letter-spacing: -.04em ;
}

/* ---------- 22. 动效：一次编排，不散落 ---------- */
#app > *, #resultArea > * { animation: rise .45s var(--ease) both !important; }
#app > *:nth-child(1) { animation-delay: .02s !important; }
#app > *:nth-child(2) { animation-delay: .05s !important; }
#app > *:nth-child(3) { animation-delay: .08s !important; }
#app > *:nth-child(4) { animation-delay: .11s !important; }
#app > *:nth-child(5) { animation-delay: .14s !important; }
#app > *:nth-child(n+6) { animation-delay: .16s !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}