/* ============================================================
   初中挑战王 · ELEGANT DESIGN SYSTEM  (single source of truth)
   黑金·高雅·简约 —— betonanything-inspired.
   机制：全站模板皆以 var(--token) 取色，此处统一覆写设计令牌，
        一处修改、全站一致。链接于各模板 </head> 前、最后生效。
   ============================================================ */
:root, html, body {
  /* —— 底色：纯黑场 —— */
  --bg:        #0a0a0a !important;
  --bg2:       #0a0a0a !important;
  --page:      #0a0a0a !important;
  --surface:   #121211 !important;
  --tile:      #141413 !important;
  --glass:     #141413 !important;
  --card:      #121211 !important;

  /* —— 文字：暖白 / 灰阶 —— */
  --ink:       #f6f6f1 !important;
  --ink2:      #d6d6cf !important;
  --soft:      #8c8c83 !important;
  --faint:     #5c5c54 !important;
  --name:      #c6a96a !important;

  /* —— 描边：发丝线 —— */
  --line:      rgba(255,255,255,.08) !important;
  --line2:     rgba(255,255,255,.15) !important;
  --cardbd:    rgba(255,255,255,.10) !important;
  --tilebd:    rgba(255,255,255,.10) !important;
  --glassbd:   rgba(255,255,255,.10) !important;
  --faintbd:   rgba(255,255,255,.06) !important;

  /* —— 暖金主调 —— */
  --ac:        #c6a96a !important;
  --ac2:       #d8bd84 !important;
  --gold:      #c6a96a !important;
  --grad:      linear-gradient(135deg,#cdb074,#ad9156) !important;

  /* —— 功能色：克制低饱和 —— */
  --fire:      #c0925a !important;
  --hot:       #c0925a !important;
  --ok:        #8f9d6c !important;
  --bad:       #b06a60 !important;
  --no:        #b06a60 !important;
  --cyan:      #7d97a3 !important;

  /* —— 阴影 / toast —— */
  --sh:        0 1px 0 rgba(255,255,255,.03) !important;
  --toastbg:   #1b1b18 !important;
  --toastink:  #f6f6f1 !important;
}

/* 强制黑场，盖掉模板里的浅色 prefers-color-scheme 分支 */
html, body { background:var(--bg) !important; color:var(--ink) !important;
  color-scheme: dark; }

/* —— 排版微调：标题衬线、正文克制 —— */
h1, h2, .stem, .title, .hero, .big {
  font-family: Georgia, "Times New Roman", "Songti SC", serif !important;
  letter-spacing:.2px;
}

/* —— 按钮：金底深字 / 幽灵描边 —— */
/* 模板的终端皮肤把 .btn 改成「透明底 + 金边」，所以文字必须是金色才可读；
   之前误设成深色 #100d06 → 在深色页面上几乎不可见，只剩金色的 [ 和彩色 emoji。
   统一金色文字 + nowrap（防方括号折行）。 */
.btn { color:var(--ac) !important; font-weight:700 !important; letter-spacing:1px !important; white-space:nowrap !important; }
/* 方括号 [ ] 跟随文字色 → 左右都金色、对称且可读（修复"右括号消失"） */
.btn::before, .btn::after { color:inherit !important; }

/* 固定底部「提交作答」条：它是容器不是按钮，曾被误套上按钮样式（透明底 + 金边）。
   恢复成实底不透明（防止内容上下滚动时透出、浮在按钮上）、去掉外边框线、置于内容之上。 */
.cta {
  background:var(--bg) !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:50 !important;
}
.cta::before, .cta::after { content:none !important; }   /* 容器不应有 [ ] 方括号 */
.btn.ghost, .btn.outline { background:transparent !important; color:var(--ac) !important;
  border:1px solid var(--line2) !important; }

/* —— 主提交 CTA：金底深字、满宽、居中 —— */
button.go, .cta-in button {
  background:var(--grad) !important; color:var(--on-ac) !important;
  font-weight:700 !important; width:100% !important; letter-spacing:.5px !important; }
button.go:disabled { opacity:.45 !important; }
button.go.done { background:var(--ok) !important; color:var(--on-ac) !important; }
button.go::before { color:rgba(16,13,6,.6) !important; }

/* —— 选项编号 [A]/[B] 防竖排 —— */
/* .opt .k 若是 display:grid，::before"[" / 文本 / ::after"]" 会被当成三个独立网格项竖排成
   [ / A / ]。强制 inline-block + nowrap，让方括号与字母同处一行。 */
.opt .k { display:inline-block !important; white-space:nowrap !important; line-height:1.2 !important; }

/* —— 选项 hover / 选中：金线 —— */
.opt:hover { border-color:var(--line2) !important; }

/* —— 选中态：明显凸显块（挑战/测评/对决统一），盖掉各模板弱化的终端样式 —— */
.opt.sel {
  border:1px solid var(--ac) !important;
  border-bottom:1px solid var(--ac) !important;     /* 覆盖点状下划线 */
  background:color-mix(in srgb, var(--ac) 20%, var(--bg)) !important;
  box-shadow:inset 0 0 0 1px var(--ac) !important;  /* 加重边框，块感更强 */
}
.opt.sel, .opt.sel > div { color:var(--ink) !important; background:transparent !important; }
.opt.sel .k {                                       /* 选项字母做成金色实心小块 */
  background:var(--ac) !important; color:var(--on-ac) !important;
  padding:0 5px !important; font-weight:800 !important;
}

/* —— 进度条：发丝高度、金填充 —— */
.pbar { background:var(--line) !important; }
.pbar > i { background:var(--grad) !important; }

/* 语义令牌：强调底（金/等离子渐变）之上的文字色。深空主题另定义自身值，此为基础兜底。
   禁硬编码：色值仅存于令牌定义处，余皆 var()。（黑金/米白两主题已按需求移除，仅保留深空。）*/
:root, html, body { --on-ac: #14110a !important; }

/* 版本说明标签「初中版」——普通最小字号、弱化，附于主标题「初中挑战王」之后 */
.brandver { font-size:.5em !important; font-weight:400 !important; opacity:.6 !important;
  letter-spacing:.5px !important; margin-left:5px; vertical-align:2px; font-style:normal !important; }

/* ============================================================
   沉浸主题 · 「认知深空 Cognitive Deep-Space」（玻璃拟态 / 等离子辉光）
   综合三大顶尖工作室规格：换一套令牌即整站重塑；色值仅存于此令牌层，
   模板皆 var()。含玻璃材质、辉光、性能与无障碍降级。禁硬编码不破。
   ============================================================ */
html[data-theme="deepspace"], html[data-theme="deepspace"] body {
  /* —— 深空虚空底 —— */
  --bg:        #070b16 !important;
  --bg2:       #0b1120 !important;
  --page:      #070b16 !important;
  /* —— 磨砂玻璃面 —— */
  --surface:   rgba(150,185,255,.055) !important;
  --tile:      rgba(150,185,255,.055) !important;
  --glass:     rgba(150,185,255,.05) !important;
  --card:      rgba(150,185,255,.055) !important;
  /* —— 冷调星白文字 —— */
  --ink:       #eaf0ff !important;
  --ink2:      #c2cee8 !important;
  --soft:      #8492b4 !important;
  --faint:     #56618a !important;
  --name:      #8bd6ff !important;
  /* —— 辉光发丝描边 —— */
  --line:      rgba(150,185,255,.14) !important;
  --line2:     rgba(150,185,255,.26) !important;
  --cardbd:    rgba(150,185,255,.14) !important;
  --tilebd:    rgba(150,185,255,.14) !important;
  --glassbd:   rgba(150,185,255,.18) !important;
  --faintbd:   rgba(150,185,255,.10) !important;
  /* —— 等离子青紫主调 —— */
  --ac:        #5ee7ff !important;
  --ac2:       #a98cff !important;
  --gold:      #ffd071 !important;
  --grad:      linear-gradient(135deg,#5ee7ff,#a98cff) !important;
  /* —— 功能色：极光绿 / 琥珀(错误=盲点非惩罚) / 等离子 —— */
  --fire:      #ff9d5c !important;
  --hot:       #ff9d5c !important;
  --ok:        #56e39f !important;
  --bad:       #ff9d5c !important;
  --no:        #ff9d5c !important;
  --cyan:      #5ee7ff !important;
  /* —— 强调底上的文字：深空蓝黑（等离子偏亮，深字可读）—— */
  --on-ac:     #061019 !important;
  /* —— 辉光阴影 / toast —— */
  --sh:        0 0 0 1px rgba(150,185,255,.06) !important;
  --toastbg:   rgba(14,23,48,.92) !important;
  --toastink:  #eaf0ff !important;
}

/* 深空虚空背景：径向星云渐变 */
html[data-theme="deepspace"], html[data-theme="deepspace"] body {
  background:
    radial-gradient(1100px 720px at 50% -12%, #14203f 0%, #0a1122 52%, #05070f 100%) !important;
  color:var(--ink) !important; color-scheme: dark;
}

/* 玻璃材质：卡片/瓦片磨砂 + 辉光边 */
html[data-theme="deepspace"] .card, html[data-theme="deepspace"] .tile,
html[data-theme="deepspace"] .wmcard, html[data-theme="deepspace"] .quest,
html[data-theme="deepspace"] .mecard, html[data-theme="deepspace"] .ghcell {
  backdrop-filter: blur(13px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.25) !important;
  border: 1px solid var(--glassbd) !important;
  box-shadow: 0 10px 34px rgba(3,6,18,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
/* 等离子辉光：主色元素发光 */
html[data-theme="deepspace"] .btn.solid, html[data-theme="deepspace"] button.go,
html[data-theme="deepspace"] .cta-in button, html[data-theme="deepspace"] .opt.sel {
  box-shadow: 0 0 18px color-mix(in srgb, var(--ac) 45%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--ac) 50%, transparent) !important;
}
html[data-theme="deepspace"] .name, html[data-theme="deepspace"] .rank .ico,
html[data-theme="deepspace"] h1, html[data-theme="deepspace"] .hero b {
  text-shadow: 0 0 16px color-mix(in srgb, var(--ac) 40%, transparent);
}
/* 主题切换按钮在深空下也发光 */
html[data-theme="deepspace"] #noesisThemeToggle {
  box-shadow: 0 0 16px color-mix(in srgb, var(--ac) 40%, transparent) !important;
}

/* 性能/无障碍：降级动效，尊重用户偏好与弱机 */
@media (prefers-reduced-motion: reduce) {
  #noesisThemeToggle, .wmbar, .pbar > i { transition: none !important; animation: none !important; }
  .nz-fx, .nz-star { display: none !important; }
}

/* ============================================================
   Phase2 ③ 作答屏版式升级（5 个作答页共用 .stem/.opt/.cta —— 令牌层统一，一次全升）
   题干聚焦放大 · 大点击区卡片选项 · 圆形字母徽标 · 按压反馈 · 醒目提交。禁硬编码。
   ============================================================ */
/* 题干：占顶部视觉重心，行距充裕、高对比、单一焦点 */
.stem {
  font-size: 1.2em !important;
  line-height: 1.75 !important;
  font-weight: 760 !important;
  margin: 6px 0 20px !important;
  color: var(--ink) !important;
}
/* 选项：≥56px 大点击区、卡片化、间距充裕 */
.opt {
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  margin: 9px 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  cursor: pointer !important;
  transition: transform .12s ease, border-color .15s ease, background .15s ease !important;
}
.opt:hover { border-color: var(--line2) !important; }
.opt:active { transform: scale(.985) !important; }          /* 按压反馈 */
/* 字母编号：圆形徽标（去掉终端皮肤的方括号） */
.opt .k, .opt .key {
  flex: 0 0 30px !important;
  width: 30px !important; height: 30px !important; min-width: 30px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid var(--line2) !important;
  background: transparent !important;
  color: var(--ac) !important;
  font-weight: 800 !important; letter-spacing: 0 !important;
}
.opt .k::before, .opt .k::after,
.opt .key::before, .opt .key::after { content: none !important; }
/* 选中态圆标填充金（沿用既有强调，保持一致） */
.opt.sel .k, .opt.sel .key {
  background: var(--ac) !important; color: var(--on-ac) !important; border-color: var(--ac) !important;
}
/* 提交 CTA：满宽、大按压区、圆角、醒目 */
button.go, .cta-in button {
  min-height: 52px !important; font-size: 1.03em !important; border-radius: 12px !important;
}

/* 世界模型学科弹窗:① 浮层不透明化(深空下 --surface 为玻璃太透) ② 数据格微提亮
   ③ 5 项数据末格满宽,消除突兀空位(空位原露出弹窗底色,与数据格不同) */
.wmsheet { background: var(--bg2) !important; }
.wmsgrid .c { background: color-mix(in srgb, var(--ac) 9%, var(--bg2)) !important; }
.wmsgrid .c:last-child { grid-column: 1 / -1 !important; }

/* 挑战页「第N层」徽标:原白字(#fff)在浅琥珀 --fire 上对比极低看不清 → 改强调底深字 */
.tierbadge { color: var(--on-ac) !important; }

/* 只修用户明确指出的低对比处:当前段位徽标 .scur（--gold 黄底 + 白字，看不清）。
   不做广播式改动(上次广播波及被各页单独配色的元素,已回退),避免误伤。 */
.scur { color: var(--on-ac) !important; }

/* ============================================================
   响应式 · pad/PC 横竖屏(国际头部水准)
   机制:单一源 app.css;--maxw 覆写全站加宽;≥1024 横屏把注入的底部 tab 变左侧固定
   导航栏并让内容右移多列(:has(#nzTabs) 精准作用于有导航的页,登录/分享/家长页不误伤)。
   ============================================================ */
/* 平板竖屏 768–1023:加宽容器 + 网格增列 + 根字号上调(小字更清晰),仍用底部 tab */
@media (min-width: 768px) and (max-width: 1023px) {
  :root, html, body { --maxw: min(94vw, 1000px) !important; }
  html, body { font-size: 17px !important; }
  .nav { grid-template-columns: repeat(3, 1fr) !important; }
  .kpis { grid-template-columns: repeat(4, 1fr) !important; }
}

/* PC / 平板横屏 ≥1024:左侧固定导航栏 + 宽内容 + 并列多列 */
@media (min-width: 1024px) {
  /* 根字号上调:所有 em 相对字号(含 .62em 等最小标签)按比例放大,横屏更清晰 */
  html, body { font-size: 18.5px !important; }
  /* 底部 tab → 左侧竖向固定导航栏 */
  #nzTabs {
    top: 0 !important; bottom: 0 !important; right: auto !important; left: 0 !important;
    width: 212px !important; height: 100vh !important; flex-direction: column !important;
    justify-content: flex-start !important; gap: 4px !important; padding: 22px 10px !important;
    border-top: 0 !important; border-right: 1px solid var(--line) !important;
  }
  #nzTabs a {
    flex: 0 0 auto !important; flex-direction: row !important; justify-content: flex-start !important;
    gap: 14px !important; padding: 14px 18px !important; font-size: 1.1em !important;
    font-weight: 700 !important; border-radius: 12px !important;
  }
  #nzTabs a > span:first-child { font-size: 25px !important; }
  #nzTabs a > span:last-child { font-size: 1em !important; }   /* 文字标签放大(覆盖内联 .62em) */

  /* 有导航的页:整体让开侧栏 + 内容居中加宽(:has 只命中注入了 tab 的页) */
  body:has(#nzTabs) {
    padding-left: calc(212px + 3vw) !important; padding-right: 3vw !important;
    max-width: none !important; margin: 0 !important;
  }
  body:has(#nzTabs) .app, body:has(#nzTabs) main, body:has(#nzTabs) .wrap {
    max-width: min(100%, 1200px) !important; margin-left: auto !important; margin-right: auto !important;
  }
  /* 并列多列(区块瀑布感) */
  body:has(#nzTabs) .nav { grid-template-columns: repeat(4, 1fr) !important; }
  body:has(#nzTabs) .kpis { grid-template-columns: repeat(4, 1fr) !important; }
  body:has(#nzTabs) .badges { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
  /* 固定提交条/底栏避让左侧栏;横屏无底部 tab,提交条归位到底(消除 56px 悬空) */
  body:has(#nzTabs) .cta, body:has(#nzTabs) .cta-in,
  body:has(#nzTabs) .submitbar, body:has(#nzTabs) .go.fixed,
  body:has(#nzTabs) .tmuxbar { left: 212px !important; bottom: 0 !important; }
  /* 横屏底部 tab 已成侧栏,内容无需为底栏留白 */
  body:has(#nzTabs) { padding-bottom: 0 !important; }
  /* 主题切换钮移回右下(不被侧栏遮挡) */
  body:has(#nzTabs) #noesisThemeToggle { left: auto !important; right: 16px !important; }
  /* 家长/分享等无侧栏页:横屏也加宽居中,善用空间 */
  body:not(:has(#nzTabs)) { max-width: min(92vw, 1040px) !important; }
}

/* 无障碍:降级动效已在上文;此处保证左侧栏在深空玻璃下描边可见 */
@media (min-width: 1024px) {
  html[data-theme="deepspace"] #nzTabs { border-right-color: var(--glassbd) !important;
    background: color-mix(in srgb, var(--surface) 60%, var(--bg)) !important; backdrop-filter: blur(14px) !important; }
}
