/* =============================================================================
   答题领奖系统 · 设计令牌与基础组件层（theme.css）
   -----------------------------------------------------------------------------
   前后台共用。结构：
     1. 设计令牌（原始色板 + 语义映射）      —— 改主题只改这里
     2. 重置与排版基线                       —— 字体层级 / 间距节奏
     3. 通用组件（按钮/卡片/表单/表格/标签/提示/弹窗/骨架屏）
     4. 暗色模式（html[data-theme="dark"]）
     5. 响应式断点 1440 / 1024 / 768 / 375

   约定：
     · 所有颜色一律走 var(--xxx)，组件里禁止出现裸色值
     · 状态统一：hover / active / focus-visible / disabled / loading / error
     · 主题由 <html data-theme> 驱动，head 内联脚本在首屏渲染前写入，避免闪白
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 设计令牌
   ------------------------------------------------------------------------ */

/* 1.1 原始色板：亮色为 -l-，暗色为 -d-（只在这里出现真实色值） */
:root {
  /* 中性色（蓝灰基调，略带冷色，和橙色品牌色互补） */
  --l-bg:            #f2f5f9;
  --l-surface:       #ffffff;
  --l-surface-2:     #f7f9fc;
  --l-surface-3:     #eef2f7;
  --l-border:        #e2e8f0;
  --l-border-strong: #cbd5e1;
  --l-text:          #1e293b;
  --l-text-2:        #475569;
  --l-text-3:        #7c8798;   /* 次要文字，对 --l-bg 对比度 ≥ 4.5:1 */
  --l-text-4:        #9aa5b4;   /* 极次要（仅装饰性），≥ 3:1 */

  --d-bg:            #0c111c;
  --d-surface:       #151d2d;
  --d-surface-2:     #1c2637;
  --d-surface-3:     #243048;
  --d-border:        #2b3850;
  --d-border-strong: #3b4a66;
  --d-text:          #e8edf6;   /* 对 --d-bg 对比度 ≈ 14:1 */
  --d-text-2:        #c2ccdd;
  --d-text-3:        #97a3b8;
  --d-text-4:        #77839a;

  /* 品牌色（橙红，继承原有视觉识别） */
  --l-brand:         #f5455c;
  --l-brand-strong:  #e0304a;
  --l-brand-soft:    #fff1f3;
  --l-accent:        #ff6b2c;
  --l-accent-soft:   #fff4ec;
  --d-brand:         #ff8a5c;
  --d-brand-strong:  #ffa478;
  --d-brand-soft:    #38251c;
  --d-accent:        #ff9152;
  --d-accent-soft:   #35231a;

  /* 语义色 */
  --l-success:       #16a34a;  --l-success-soft: #ecfdf3;
  --l-warning:       #b45309;  --l-warning-soft: #fff8eb;
  --l-danger:        #dc2626;  --l-danger-soft:  #fef2f2;
  --l-info:          #2563eb;  --l-info-soft:    #eff5ff;
  --d-success:       #4ade80;  --d-success-soft: #14301f;
  --d-warning:       #fbbf24;  --d-warning-soft: #33270c;
  --d-danger:        #f87171;  --d-danger-soft:  #341a1c;
  --d-info:          #7aa5ff;  --d-info-soft:    #17243f;

  /* 品牌渐变（顶栏 / Hero / 题目头） */
  --grad-brand: linear-gradient(135deg, #ff6b2c 0%, #f5455c 100%);
  --grad-brand-soft: linear-gradient(135deg, var(--l-accent-soft) 0%, var(--l-brand-soft) 100%);

  /* 1.2 字体层级 —— 移动优先，字号随断点微调 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, Menlo, monospace;

  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;
  --fs-15: 15px;  --fs-16: 16px;  --fs-17: 17px;  --fs-18: 18px;
  --fs-20: 20px;  --fs-24: 24px;  --fs-26: 26px;  --fs-28: 28px;
  --fs-34: 34px;
  --lh-tight: 1.3;  --lh-snug: 1.5;  --lh-base: 1.65;

  --fw-normal: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;

  /* 1.3 间距（4 的倍数）与圆角 */
  --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;

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* 1.4 阴影（暗色下用边框替代阴影，避免"糊成一片"） */
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 2px 10px rgba(16, 24, 40, .07);
  --sh-3: 0 10px 30px rgba(16, 24, 40, .12);
  --sh-brand: 0 6px 18px rgba(245, 69, 92, .28);

  /* 1.5 层级 */
  --z-sticky: 20; --z-drawer: 60; --z-modal: 200; --z-toast: 300;

  /* 1.6 动效 */
  --dur-fast: .14s; --dur-base: .22s;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* 1.7 布局 */
  --wrap-max: 680px;      /* 前台内容宽度 */
  --sidebar-w: 208px;
  --focus-ring: 0 0 0 3px rgba(245, 69, 92, .28);

  /* 1.8 语义映射（默认 = 亮色；暗色在第 4 节整体切换） */
  --bg:            var(--l-bg);
  --surface:       var(--l-surface);
  --surface-2:     var(--l-surface-2);
  --surface-3:     var(--l-surface-3);
  --border:        var(--l-border);
  --border-strong: var(--l-border-strong);
  --text:          var(--l-text);
  --text-2:        var(--l-text-2);
  --text-3:        var(--l-text-3);
  --text-4:        var(--l-text-4);
  --brand:         var(--l-brand);
  --brand-strong:  var(--l-brand-strong);
  --brand-soft:    var(--l-brand-soft);
  --accent:        var(--l-accent);
  --accent-soft:   var(--l-accent-soft);
  --success:       var(--l-success);  --success-soft: var(--l-success-soft);
  --warning:       var(--l-warning);  --warning-soft: var(--l-warning-soft);
  --danger:        var(--l-danger);   --danger-soft:  var(--l-danger-soft);
  --info:          var(--l-info);     --info-soft:    var(--l-info-soft);
  --on-brand:      #fff;
  --overlay:       rgba(15, 23, 42, .5);
  --code-bg:       var(--l-surface-2);
}

/* ---------------------------------------------------------------------------
   2. 重置与排版基线
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-strong); }

code, .mono, kbd { font-family: var(--font-mono); font-size: .92em; }

/* 统一焦点环：仅键盘可见，鼠标点击不出现 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 滚动条（桌面端，Chromium） */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: content-box; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* 排版工具类 */
.muted  { color: var(--text-3); font-size: var(--fs-13); }
.small  { font-size: var(--fs-12); }
.nowrap { white-space: nowrap; }
.tnum   { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.hidden { display: none !important; }
/* HTML hidden 属性必须能压过组件自身的 display（如 .btn-main{display:inline-flex}），
   否则 JS 里 el.hidden = true 失效、按钮该藏不藏 */
[hidden] { display: none !important; }

/* 无障碍：仅供读屏 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   3. 通用组件
   ------------------------------------------------------------------------ */

/* 3.1 按钮 ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  padding: 9px 16px;
  font-family: inherit; font-size: var(--fs-13); font-weight: var(--fw-medium);
  line-height: 1.2; white-space: nowrap; vertical-align: middle;
  color: var(--on-brand); background: var(--brand);
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover  { background: var(--brand-strong); color: var(--on-brand); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.btn.gray   { background: var(--surface-3); color: var(--text-2); border-color: var(--border); }
.btn.gray:hover { background: var(--border); color: var(--text); }
.btn.red    { background: var(--danger); }
.btn.red:hover { background: var(--danger); filter: brightness(.92); }
.btn.orange { background: var(--accent); }
.btn.orange:hover { background: var(--accent); filter: brightness(.92); }
.btn.ghost  { background: transparent; color: var(--text-2); border-color: var(--border-strong); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-4); }
.btn.link   { background: none; border: 0; color: var(--brand); padding: 4px 6px; }
.btn.link:hover { background: var(--brand-soft); }

.btn.small { padding: 5px 10px; font-size: var(--fs-12); border-radius: var(--r-xs); }
.btn.large { padding: 12px 24px; font-size: var(--fs-15); }
.btn.block { display: flex; width: 100%; }

/* 禁用 / 加载态 */
.btn[disabled], .btn.disabled {
  opacity: .55; cursor: not-allowed; transform: none !important;
  box-shadow: none; filter: none;
}
.btn[disabled]:hover { background: var(--brand); }
.btn.gray[disabled]:hover { background: var(--surface-3); }

.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: aps-spin .7s linear infinite;
}
.btn.gray.is-loading::after, .btn.ghost.is-loading::after {
  border-color: var(--border-strong); border-top-color: var(--text-2);
}
@keyframes aps-spin { to { transform: rotate(360deg); } }

/* 前台主按钮（白底橙字，Hero / 领奖表单用） */
.btn-main {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  padding: 12px 30px;
  font-family: inherit; font-size: var(--fs-15); font-weight: var(--fw-semibold);
  line-height: 1.2; white-space: nowrap;
  color: var(--brand); background: var(--surface);
  border: 1px solid transparent; border-radius: var(--r-full);
  cursor: pointer; box-shadow: var(--sh-brand);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.btn-main:hover  { color: var(--brand-strong); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(245, 69, 92, .34); }
.btn-main:active { transform: translateY(0); }
.btn-main.small { padding: 7px 18px; font-size: var(--fs-13); }
.btn-main.big   { padding: 14px 46px; font-size: var(--fs-16); }
.btn-main.block { display: flex; width: 100%; }
.btn-main[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* 3.2 卡片 ---------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--sh-2);
}
.card + .card { margin-top: var(--sp-3); }

/* 3.3 表单 ---------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="number"], input[type="url"],
input[type="tel"], input[type="email"], input[type="date"], input[type="search"],
input[type="datetime-local"], select, textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit; font-size: var(--fs-14); line-height: 1.5;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
  appearance: none;
}
textarea { min-height: 84px; resize: vertical; line-height: var(--lh-base); }

select {
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--text-4);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-3); color: var(--text-3); cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--text-4); }

/* 错误态：配合 .has-error 包裹或 aria-invalid */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .22); }

label.f { display: block; margin-bottom: var(--sp-3); font-size: var(--fs-13); }
label.f > span { display: block; margin-bottom: 5px; font-weight: var(--fw-medium); color: var(--text-2); }
label.f > span em { color: var(--danger); font-style: normal; margin-left: 2px; }
label.f .hint { display: block; margin-top: 5px; font-size: var(--fs-12); color: var(--text-3); line-height: var(--lh-snug); }
.f-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.f-row > label.f { flex: 1 1 220px; }

.chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--text-2); cursor: pointer; }
.chk input[type="checkbox"], .chk input[type="radio"] { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.chk.inline { margin: var(--sp-1) 0 var(--sp-2); }

input[type="file"] {
  padding: 7px 10px; font-size: var(--fs-13);
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  width: 100%; cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 5px 12px;
  font: inherit; font-size: var(--fs-12); font-weight: var(--fw-medium);
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-xs); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { color: var(--brand); border-color: var(--brand); }

/* 3.4 提示条（tip / inline message）--------------------------------- */
.tip {
  /* 用 block 而非 flex：提示内常含 <b>/<br> 等富文本，flex 会把它们拆成独立项导致错位 */
  display: block;
  padding: 11px 14px 11px 30px; margin-bottom: var(--sp-3); position: relative;
  font-size: var(--fs-13); line-height: var(--lh-snug);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 26%, transparent);
}
.tip::before {
  content: "ℹ"; position: absolute; left: 12px; top: 11px;
  font-weight: var(--fw-bold); line-height: 1.5;
}
.tip.ok   { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 26%, transparent); }
.tip.ok::before   { content: "✓"; }
.tip.err  { background: var(--danger-soft);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 26%, transparent); }
.tip.err::before  { content: "!"; }
.tip.warn { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 26%, transparent); }
.tip.warn::before { content: "!"; }

/* 3.5 徽章 / 标签 ---------------------------------------------------- */
.badge, .tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: var(--fs-12); line-height: 1.7; white-space: nowrap;
  color: var(--text-2); background: var(--surface-3);
}
.tag  { border-radius: var(--r-xs); }
.badge.green, .tag.green   { color: var(--success); background: var(--success-soft); }
.badge.red,   .tag.red     { color: var(--danger);  background: var(--danger-soft); }
.badge.orange,.tag.orange  { color: var(--warning); background: var(--warning-soft); }
.badge.blue,  .tag.blue,
.badge.info,  .tag.info    { color: var(--info);    background: var(--info-soft); }
.badge.purple,.tag.purple  { color: #7c5cf0; background: #f2edff; }
.badge.gray,  .tag.gray,
.badge.default,.tag.default{ color: var(--text-2); background: var(--surface-3); }
:root[data-theme="dark"] .badge.purple,
:root[data-theme="dark"] .tag.purple { color: #b6a2ff; background: #241d3d; }

/* 3.6 表格 ---------------------------------------------------------- */
.tb-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tb {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-13); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
}
table.tb th, table.tb td {
  padding: 10px 12px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
table.tb thead th {
  position: sticky; top: 0; z-index: 2;
  font-weight: var(--fw-semibold); font-size: var(--fs-12);
  color: var(--text-2); background: var(--surface-2);
  white-space: nowrap;
}
table.tb tbody tr { transition: background-color var(--dur-fast) var(--ease); }
table.tb tbody tr:hover td { background: var(--surface-2); }
table.tb tbody tr:last-child td { border-bottom: 0; }
table.tb td.act, table.tb th.act { white-space: nowrap; }
table.tb td.num { font-variant-numeric: tabular-nums; }

/* 3.7 分页 ---------------------------------------------------------- */
.pager { margin-top: var(--sp-4); }
.pager ul { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px;
  font-size: var(--fs-13); color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: all var(--dur-fast) var(--ease);
}
.pager a:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.pager li.active a { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.pager li.disabled a, .pager li.disabled span { color: var(--text-4); cursor: not-allowed; background: var(--surface-2); }

/* 3.8 空状态 -------------------------------------------------------- */
.empty {
  padding: var(--sp-7) var(--sp-4);
  text-align: center; color: var(--text-3); font-size: var(--fs-13);
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
}
.empty.big { padding: 60px var(--sp-4); font-size: var(--fs-15); }

/* 3.9 弹窗（Modal）------------------------------------------------- */
.modal-mask {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  background: var(--overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: aps-fade var(--dur-base) var(--ease);
}
.modal-mask[hidden] { display: none; }
.modal {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  animation: aps-pop var(--dur-base) var(--ease);
}
.modal-head { padding: var(--sp-4) var(--sp-5) 0; }
.modal-head h3 { font-size: var(--fs-16); }
.modal-body { padding: var(--sp-3) var(--sp-5); color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-base); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-5); }
@keyframes aps-fade { from { opacity: 0; } }
@keyframes aps-pop  { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* 3.10 Toast -------------------------------------------------------- */
#toast, .aps-toast {
  position: fixed; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: var(--z-toast);
  max-width: min(84vw, 380px);
  padding: 11px 20px;
  font-size: var(--fs-14); line-height: var(--lh-snug); text-align: center;
  color: #fff; background: rgba(17, 24, 39, .93);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
#toast.show, .aps-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
#toast.err,  .aps-toast.err  { background: var(--danger); }
#toast.ok,   .aps-toast.ok   { background: var(--success); }

/* 3.11 骨架屏 / 加载 ------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: aps-shine 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes aps-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 3.11.5 图片灯箱（后台查看用户上传图片） */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: rgba(2, 6, 16, .88);
  cursor: zoom-out;
  animation: aps-fade var(--dur-base) var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.lightbox-cap {
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center; font-size: var(--fs-12); color: rgba(255, 255, 255, .78);
}
.lightbox-cap a { color: #fff; text-decoration: underline; }

/* 3.12 主题切换按钮 -------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  font-size: 15px; line-height: 1;
  color: inherit; background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.theme-toggle:hover { background: rgba(255, 255, 255, .3); transform: scale(1.06); }
.theme-toggle:active { transform: scale(.96); }
.theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 深色下按钮在浅色底上时用描边色 */
:root[data-theme="dark"] .theme-toggle { background: var(--surface-3); border-color: var(--border-strong); }
:root[data-theme="dark"] .theme-toggle:hover { background: var(--surface-2); }

/* 无 JS 时不显示切换按钮（避免点了没反应） */
.no-js .theme-toggle { display: none; }

/* ---------------------------------------------------------------------------
   4. 暗色模式
   ------------------------------------------------------------------------ */
:root[data-theme="dark"] {
  --bg:            var(--d-bg);
  --surface:       var(--d-surface);
  --surface-2:     var(--d-surface-2);
  --surface-3:     var(--d-surface-3);
  --border:        var(--d-border);
  --border-strong: var(--d-border-strong);
  --text:          var(--d-text);
  --text-2:        var(--d-text-2);
  --text-3:        var(--d-text-3);
  --text-4:        var(--d-text-4);
  --brand:         var(--d-brand);
  --brand-strong:  var(--d-brand-strong);
  --brand-soft:    var(--d-brand-soft);
  --accent:        var(--d-accent);
  --accent-soft:   var(--d-accent-soft);
  --success:       var(--d-success);  --success-soft: var(--d-success-soft);
  --warning:       var(--d-warning);  --warning-soft: var(--d-warning-soft);
  --danger:        var(--d-danger);   --danger-soft:  var(--d-danger-soft);
  --info:          var(--d-info);     --info-soft:    var(--d-info-soft);
  --on-brand:      #16121a;
  --overlay:       rgba(2, 6, 16, .66);
  --code-bg:       var(--d-surface-2);

  /* 暗色下阴影过重，改用"发光边"表达层级 */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 2px 12px rgba(0, 0, 0, .35);
  --sh-3: 0 14px 40px rgba(0, 0, 0, .55);
  --sh-brand: 0 6px 20px rgba(255, 112, 128, .3);
  --grad-brand-soft: linear-gradient(135deg, var(--d-accent-soft) 0%, var(--d-brand-soft) 100%);
  --focus-ring: 0 0 0 3px rgba(255, 112, 128, .35);
}

/* 系统偏好：未手动指定主题时跟随（内联脚本会写 data-theme，此处为禁用 JS 的兜底） */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2);
    --surface-3: var(--d-surface-3); --border: var(--d-border); --border-strong: var(--d-border-strong);
    --text: var(--d-text); --text-2: var(--d-text-2); --text-3: var(--d-text-3); --text-4: var(--d-text-4);
    --brand: var(--d-brand); --brand-strong: var(--d-brand-strong); --brand-soft: var(--d-brand-soft);
    --accent: var(--d-accent); --accent-soft: var(--d-accent-soft);
    --success: var(--d-success); --success-soft: var(--d-success-soft);
    --warning: var(--d-warning); --warning-soft: var(--d-warning-soft);
    --danger: var(--d-danger);  --danger-soft: var(--d-danger-soft);
    --info: var(--d-info);      --info-soft: var(--d-info-soft);
    --on-brand: #16121a; --overlay: rgba(2, 6, 16, .66); --code-bg: var(--d-surface-2);
    --grad-brand-soft: linear-gradient(135deg, var(--d-accent-soft) 0%, var(--d-brand-soft) 100%);
    --focus-ring: 0 0 0 3px rgba(255, 112, 128, .35);
  }
  /* 让浏览器原生 UI（滚动条、表单控件）也进入暗色 */
  html:not([data-theme]) { color-scheme: dark; }
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* 暗色下的两处专项修正：
   1) 前台主按钮保持"白底深红字"，否则深色卡片上会变成深底深字、完全不可读；
   2) 品牌色在暗色下偏橙（--d-brand:#ff8a5c），与危险按钮的红（--d-danger:#f87171）拉开距离。 */
:root[data-theme="dark"] .btn-main {
  background: #fff;
  color: #d92c47;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] .btn-main:hover { background: #fff; color: #b31f38; }
:root[data-theme="dark"] .btn-main.big,
:root[data-theme="dark"] .btn-main { border-color: transparent; }

/* ---------------------------------------------------------------------------
   5. 响应式断点
   ------------------------------------------------------------------------ */

/* ≥1440：大屏收窄内容行长，提升舒适度 */
@media (min-width: 1440px) {
  :root { --wrap-max: 720px; }
}

/* ≤1024：平板 —— 后台侧栏收窄，前台 Hero 内边距放大 */
@media (max-width: 1024px) {
  :root { --sidebar-w: 180px; }
}

/* ≤768：平板竖屏 / 小笔记本 —— 密度下调，表格可横向滚动 */
@media (max-width: 768px) {
  :root { --fs-14: 14px; --sp-4: 14px; }
  .f-row > label.f { flex: 1 1 100%; }
  .tb-scroll { border-radius: var(--r-md); }
  table.tb { min-width: 640px; }
  table.tb thead th { position: static; }
}

/* ≤375：小屏手机 —— 进一步压缩留白，Hero 字号降级 */
@media (max-width: 375px) {
  :root { --fs-28: 24px; --fs-24: 20px; --fs-20: 18px; --sp-6: 18px; --sp-7: 24px; }
  .btn-main { padding: 11px 22px; }
  .btn-main.big { padding: 13px 26px; font-size: var(--fs-15); }
}

/* 尊重"减少动效"偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 高对比度偏好：加粗边框与焦点环 */
@media (prefers-contrast: more) {
  :root { --border: var(--border-strong); --border-strong: var(--text-3); }
  .card, table.tb, .btn { border-width: 1px; }
  :focus-visible { outline-width: 3px; }
}

/* 打印 */
@media print {
  .topbar, .sidebar, .foot, .btn, .theme-toggle, .sb-foot, #toast { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}