:root{
  --bg:#0b0f1c; --bg2:#121a2e; --card:#151d33; --line:#243052;
  --txt:#e9eefc; --dim:#8b9cc0; --cyan:#5fe3ff; --pink:#ff7ac6;
  --ok:#5ee6a8; --bad:#ff6b81; --warn:#ffd166;
}
*{box-sizing:border-box}
body{
  margin:0;color:var(--txt);background:var(--bg);
  font-family:system-ui,"Microsoft YaHei","PingFang SC",sans-serif;
  background-image:
    radial-gradient(900px 480px at 10% -12%, rgba(95,227,255,.12), transparent 62%),
    radial-gradient(820px 460px at 92% -6%, rgba(255,122,198,.11), transparent 62%);
  background-repeat:no-repeat;
}
.wrap{max-width:880px;margin:0 auto;padding:20px 16px 90px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.top img{width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:#0d1322}
.top h1{font-size:17px;margin:0}
.top .sub{color:var(--dim);font-size:12px;margin:2px 0 0}
nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;background:#0f1526;border:1px solid var(--line);border-radius:14px;padding:6px}
nav button{
  flex:1 1 auto;padding:9px 12px;border-radius:10px;border:0;background:transparent;color:var(--dim);
  cursor:pointer;font-size:14px
}
nav button:hover{color:var(--txt)}
nav button.on{background:linear-gradient(90deg,rgba(95,227,255,.18),rgba(255,122,198,.18));color:var(--txt)}
.page{display:none}
.page.on{display:block}
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:15px;padding:16px;margin-bottom:14px}
.card h2{font-size:14px;margin:0 0 12px;color:var(--cyan);font-weight:600;letter-spacing:.4px}
.hint{color:var(--dim);font-size:12.5px;line-height:1.7;margin:10px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:#0f1730;color:var(--txt);cursor:pointer;font-size:13.5px}
.chip:hover{border-color:var(--cyan)}
.chip.on{background:linear-gradient(90deg,rgba(95,227,255,.2),rgba(255,122,198,.2));border-color:var(--cyan)}
.btn{padding:10px 16px;border-radius:11px;border:1px solid var(--line);background:#101830;color:var(--txt);cursor:pointer;font-size:14px}
.btn:hover{border-color:var(--cyan)}
.btn.primary{background:linear-gradient(90deg,var(--cyan),var(--pink));color:#08101f;font-weight:700;border:0}
.btn.primary:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.mini{padding:5px 11px;font-size:12.5px;border-radius:9px}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.chap{border:1px solid var(--line);border-radius:13px;padding:14px;background:#101830;margin-bottom:11px}
.chap .h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.chap .name{font-size:15px;font-weight:600}
.chap .nums{color:var(--dim);font-size:12.5px}
.chap .bar{margin-top:11px}
.chap .sub{font-size:12px;color:var(--dim);margin:13px 0 7px;letter-spacing:.4px}
.chap .chips{margin-bottom:1px}
.chip.sm{padding:5px 11px;font-size:12.5px}
.bar{height:8px;border-radius:99px;background:#0a1020;border:1px solid var(--line);overflow:hidden;margin:11px 0 9px}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:.3s}
.bar.done>i{background:linear-gradient(90deg,#3ad29f,#5ee6a8)}
.tag{font-size:11.5px;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:2px 9px;white-space:nowrap}
.tag.ok{color:var(--ok);border-color:rgba(94,230,168,.45)}
.tag.bad{color:var(--bad);border-color:rgba(255,107,129,.45)}
.stem{font-size:16.5px;line-height:1.8;margin:14px 0 16px;white-space:pre-wrap}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;padding:11px 13px;border-radius:12px;
     border:1px solid var(--line);background:#101830;color:var(--txt);cursor:pointer;font-size:14.5px;line-height:1.6}
.opt:hover{border-color:var(--cyan)}
.opt .k{font-weight:700;color:var(--cyan);min-width:16px}
.opt.sel{border-color:var(--cyan);background:rgba(95,227,255,.12)}
.opt.ok{border-color:var(--ok);background:rgba(94,230,168,.13)}
.opt.bad{border-color:var(--bad);background:rgba(255,107,129,.13)}
.opt:disabled{cursor:default}
.msg{margin-top:13px;font-size:13.5px;padding:11px 13px;border-radius:12px;border:1px dashed var(--line);background:#0e1526;line-height:1.75}
.msg.ok{border-color:rgba(94,230,168,.5)}
.msg.bad{border-color:rgba(255,107,129,.5)}
.score{font-size:42px;font-weight:800;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.rev{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:9px;background:#0f1729}
.rev.wrong{border-left:4px solid var(--bad)}
.rev.right{border-left:4px solid var(--ok)}
.rev .q{font-size:13.5px;line-height:1.65;margin-bottom:6px}
.rev .a{font-size:12.5px;color:var(--dim)}
.rev .a b{color:var(--txt)}
.witem{border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:9px;background:#0f1729}
.witem.mastered{opacity:.62}
.witem .q{font-size:13.5px;line-height:1.65;margin:6px 0 7px}
.witem .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.dots{display:inline-flex;gap:3px}
.dots i{width:9px;height:9px;border-radius:99px;background:#26304d;display:block}
.dots i.on{background:var(--ok)}
.kitem{border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:10px;background:#0f1729;border-left-width:4px}
.kitem.lv-must{border-left-color:var(--bad)}
.kitem.lv-key{border-left-color:var(--warn)}
.kitem.lv-info{border-left-color:var(--dim)}
.kitem .lv{font-size:11.5px;font-weight:700;letter-spacing:.5px}
.kitem.lv-must .lv{color:var(--bad)}
.kitem.lv-key .lv{color:var(--warn)}
.kitem.lv-info .lv{color:var(--dim)}
.kitem .ch{display:inline-block;font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:1px 8px;margin-bottom:6px}
.kitem .txt{font-size:14px;line-height:1.85;margin-top:5px;color:#cfd9f2}
.kitem strong{font-weight:700}
.kitem.lv-must strong{color:var(--pink)}
.kitem.lv-key strong{color:var(--cyan)}
.kitem.lv-info strong{color:#b9c6e6}
.stepper{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:5px 8px;background:#0f1730}
.stepper button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#131c33;color:var(--txt);cursor:pointer;font-size:15px;line-height:1}
.stepper .v{min-width:22px;text-align:center;font-weight:700}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--txt);font-size:14px}
.switch input{width:16px;height:16px;accent-color:#5fe3ff}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:#141d33;
  border:1px solid var(--line);color:var(--txt);padding:11px 16px;border-radius:12px;font-size:13.5px;opacity:0;transition:.22s;z-index:20;max-width:88vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.kbd{color:var(--dim);font-size:11.5px}
.stat{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:4px}
.stat b{font-size:20px}
.stat span{color:var(--dim);font-size:12.5px}

/* 关键：.hide 原来根本没定义，导致答题区/成绩区一直摊在页面上 */
.hide{display:none!important}

/* ===================================================================
   皮肤 v2 · 插画背景版
   =================================================================== */
html{background:#080b14}
body{background:transparent;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:-2;
  background:url(bg/page.jpg) center center / cover no-repeat}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(95,227,255,.14), transparent 60%),
    radial-gradient(820px 480px at 94% -4%, rgba(255,122,198,.12), transparent 60%),
    linear-gradient(180deg, rgba(8,11,20,.40) 0%, rgba(8,11,20,.70) 40%, rgba(8,11,20,.90) 100%)}
.wrap{position:relative;z-index:1}

/* 顶部大图 */
.top{position:relative;overflow:hidden;gap:14px;margin-bottom:16px;padding:22px 18px;border-radius:18px;
  border:1px solid var(--stroke);
  background:linear-gradient(90deg, rgba(9,14,26,.94) 0%, rgba(9,14,26,.62) 58%, rgba(9,14,26,.34) 100%),
             url(bg/hero.jpg) center 34% / cover no-repeat;
  box-shadow:0 16px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06)}
.top img{width:56px;height:56px;border-radius:16px;border:1px solid rgba(95,227,255,.42);
  box-shadow:0 8px 22px rgba(0,0,0,.55)}
.top h1{font-size:18px;letter-spacing:.4px;text-shadow:0 2px 14px rgba(0,0,0,.95)}
.top .sub{color:#bfcdea;font-size:12.5px;margin-top:5px;text-shadow:0 2px 10px rgba(0,0,0,.9)}

/* 页签：吸顶毛玻璃 */
nav{position:sticky;top:10px;z-index:9;background:rgba(12,18,32,.82);
  border-color:var(--stroke);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 26px rgba(0,0,0,.38)}
nav button{transition:color .18s,background .18s}
nav button.on{color:#fff;box-shadow:inset 0 0 0 1px rgba(95,227,255,.38)}

/* 页签横幅 */
.banner{position:relative;overflow:hidden;height:118px;border-radius:16px;margin-bottom:14px;
  border:1px solid var(--stroke);background-size:cover;background-position:center 34%;
  box-shadow:0 12px 30px rgba(0,0,0,.42)}
.banner::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(9,14,26,.30) 0%, rgba(9,14,26,.52) 45%, rgba(9,14,26,.95) 100%)}
.banner .bt{position:absolute;left:16px;bottom:27px;z-index:1;font-size:19px;font-weight:800;
  letter-spacing:.6px;text-shadow:0 3px 14px rgba(0,0,0,.95)}
.banner .bs{position:absolute;left:16px;bottom:10px;z-index:1;font-size:12px;color:#c6d4ef;
  text-shadow:0 2px 10px rgba(0,0,0,.9)}

/* 卡片：毛玻璃 */
.card{background:linear-gradient(180deg,var(--glass),var(--glass2));border-color:var(--stroke);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05)}

/* 章节卡 */
.chap{position:relative;overflow:hidden;padding:14px 14px 15px;transition:transform .2s ease,box-shadow .2s ease;border-radius:16px;border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(17,25,44,.80), rgba(10,16,30,.90));
  box-shadow:0 12px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05)}
.chap:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.chap .cover{position:relative;overflow:hidden;height:122px;margin:-14px -14px 13px;
  background-size:cover;background-position:center 30%;transition:transform .4s ease}
.chap:hover .cover{transform:scale(1.045)}
.chap .cover::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,15,28,0) 0%, rgba(10,15,28,.18) 45%, rgba(10,15,28,.72) 78%, rgba(10,16,30,.99) 100%)}
.chap .cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;
  background:var(--ac);box-shadow:0 0 14px var(--ac)}
.chap .cover .no{position:absolute;right:12px;bottom:2px;z-index:1;font-weight:800;font-size:42px;
  line-height:1;letter-spacing:2px;color:rgba(255,255,255,.15)}
.chap .cover .cap{position:absolute;left:14px;bottom:8px;z-index:1;font-size:11.5px;letter-spacing:2.5px;
  color:#e2eaff;text-shadow:0 2px 10px rgba(0,0,0,.95)}
.chap .name::before{content:'';display:inline-block;width:7px;height:7px;border-radius:99px;
  background:var(--ac);margin-right:8px;vertical-align:middle;box-shadow:0 0 10px var(--ac)}
.chap .bar>i{background:linear-gradient(90deg,var(--ac),rgba(255,255,255,.7))}
.chap .bar.done>i{background:linear-gradient(90deg,#3ad29f,#5ee6a8)}
.chap .chip.on{border-color:var(--ac);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--ac)}
.chap .btn.primary{background:var(--ac);border-color:transparent;color:#0a1020;font-weight:700}
.chap .btn.primary:hover{filter:brightness(1.1)}

/* 答题 / 成绩：进度条跟着本章色 */
#view-quiz .bar>i{background:linear-gradient(90deg,var(--ac,var(--cyan)),var(--pink))}
#view-quiz .card,#view-result .card{border-color:var(--stroke)}

/* 选项 */
.opt{background:rgba(12,19,34,.86);border-color:var(--stroke);transition:border-color .16s,background .16s,transform .16s}
.opt:hover{background:rgba(17,27,47,.94);transform:translateY(-1px)}

/* 错题 / 知识点 / 成绩条目 */
.witem,.kitem,.rev{background:rgba(11,18,32,.74);border-color:var(--stroke)}
.msg{background:rgba(10,16,29,.86);border-color:var(--stroke)}
.tag{background:rgba(9,14,26,.5)}

/* 小屏 */
@media (max-width:560px){
  .top{padding:18px 14px}
  .top h1{font-size:16.5px}
  .banner{height:96px}
  .chap .cover{height:92px}
  .chap .cover .no{font-size:34px}
}


/* ===================================================================
   皮肤 v3 · 章节卡片墙 + 章内页
   =================================================================== */
.chgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:720px){.chgrid{grid-template-columns:repeat(2,1fr);gap:11px}}
@media (max-width:430px){.chgrid{grid-template-columns:1fr}}

.chcard{--ac:var(--cyan);position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:18px;
  border:1px solid var(--stroke);background:#0d1424;cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .22s ease,box-shadow .22s ease}
.chcard:hover{transform:translateY(-3px);box-shadow:0 24px 48px rgba(0,0,0,.58)}
.chcard:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.chcard .cover{position:absolute;inset:0;background-size:cover;background-position:center 12%;
  transition:transform .6s ease}
.chcard:hover .cover{transform:scale(1.05)}
.chcard .shade{position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,12,22,.06) 0%, rgba(8,12,22,.20) 36%, rgba(8,12,22,.84) 72%, rgba(8,12,22,.975) 100%)}
.chcard .badge{position:absolute;top:11px;left:12px;z-index:2;font-size:11px;letter-spacing:1.5px;
  padding:3px 10px;border-radius:99px;background:rgba(8,12,22,.62);
  border:1px solid rgba(255,255,255,.2);color:#e2ebff;backdrop-filter:blur(4px)}
.chcard .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 14px 14px}
.chcard .cn{font-size:11.5px;letter-spacing:3px;font-weight:700;color:var(--ac);
  text-shadow:0 2px 9px rgba(0,0,0,.95)}
.chcard .nm{font-size:16.5px;font-weight:700;line-height:1.35;margin:5px 0 11px;
  text-shadow:0 2px 12px rgba(0,0,0,.95)}
.chcard .bar{height:5px;margin:0;border:0;background:rgba(6,10,20,.8)}
.chcard .bar>i{background:var(--ac);box-shadow:0 0 10px var(--ac)}
.chcard.full .bar>i{background:linear-gradient(90deg,#3ad29f,#5ee6a8)}
.chcard .mt{font-size:11.5px;color:#bac9e7;margin-top:9px;text-shadow:0 2px 8px rgba(0,0,0,.9)}

.chero{--img:none;position:relative;overflow:hidden;border-radius:18px;margin-bottom:14px;padding:20px 18px 18px;
  border:1px solid var(--stroke);background:rgba(10,16,29,.75);
  box-shadow:0 14px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06)}
.chero::before{content:'';position:absolute;inset:0;background-image:var(--img);
  background-size:cover;background-position:center 20%;filter:blur(9px) saturate(1.08);
  transform:scale(1.14);opacity:.8}
.chero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(8,12,22,.86) 0%, rgba(8,12,22,.52) 55%, rgba(8,12,22,.36) 100%)}
.chero>*{position:relative;z-index:1}
.chero .ct{font-size:21px;font-weight:800;margin:12px 0 5px;letter-spacing:.4px;
  text-shadow:0 3px 14px rgba(0,0,0,.95)}
.chero .cm{font-size:12.5px;color:#c6d4ef;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.chero .bar{margin-top:15px}
.chero .bar>i{background:linear-gradient(90deg,var(--ac,var(--cyan)),rgba(255,255,255,.75))}

.ansline{font-size:12.5px;color:#dae4fa;line-height:1.75;margin-top:6px}
.ansline.dim{color:var(--dim)}
.ansline b{color:var(--cyan);font-weight:700}
.opts-d{margin-top:10px;border:1px dashed var(--stroke);border-radius:11px;padding:8px 12px;
  background:rgba(8,13,24,.55)}
.opts-d summary{cursor:pointer;font-size:12.5px;color:var(--dim);outline:none}
.opts-d summary:hover{color:var(--txt)}
.opts-d .oline{display:flex;gap:9px;font-size:13px;line-height:1.75;padding:3px 0;color:#c9d5ef}
.opts-d .oline .k{color:var(--cyan);font-weight:700;min-width:14px}
.opts-d .oline.hit{color:var(--ok)}
.opts-d .oline.hit .k{color:var(--ok)}
.rev .a b{color:var(--cyan)}

/* ===================================================================
   触摸修 · 2026-09-29（题库 / 思修题库 两份要一样，别只改一处）
   手机上「选项点不上」的几个来源都在这里堵住
   =================================================================== */
/* 1) 手指的点按别被「双击缩放 / 长按选字」抢走 */
.opt,.chip,.btn,nav button,.chcard,.stepper button{touch-action:manipulation}
.opt{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(95,227,255,.16);
  min-height:52px;align-items:center}
.opt>span:not(.k){flex:1 1 auto;min-width:0}
/* 2) 按下去立刻有反应 —— 手机上 hover 是粘的，指望它没用 */
.opt:active{background:rgba(26,41,68,.96);border-color:var(--cyan)}
/* 3) 选中做显眼：右边挂个勾，免得人以为没点上、又补一下反而取消 */
.opt.sel::after{content:'✓';margin-left:8px;color:var(--cyan);font-weight:700}
.opt.ok::after{content:'✓';margin-left:8px;color:var(--ok);font-weight:700}
.opt.bad::after{content:'✕';margin-left:8px;color:var(--bad);font-weight:700}
/* 4) 触摸设备上不要「悬停顶起 1px」——手指底下元素一动，点击就落空 */
@media (hover:none){
  .opt:hover{transform:none}
  .chcard:hover{transform:none;box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06)}
  .chcard:hover .cover{transform:none}
}
/* 5) 答题时收掉 sticky 的页签条 —— 它压在题目上，点它那一块等于没点 */
body.in-quiz nav{display:none}

/* ===================================================================
   2026-10-11 · ① 解析块 ② 做题页换亮色 ③ 横屏
   =================================================================== */

/* ---- ① 解析（深色页面上的样子） ---- */
.exp{margin-top:10px;padding:10px 12px;border-radius:11px;display:flex;gap:9px;
  border:1px solid rgba(95,227,255,.30);background:rgba(95,227,255,.07);
  font-size:13.5px;line-height:1.8;color:#dbe5fb}
.exp .eh{flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.5px;color:var(--cyan);
  border:1px solid rgba(95,227,255,.42);border-radius:99px;padding:0 8px;height:20px;line-height:18px}
.exp .et{flex:1 1 auto;min-width:0}
.exp strong{color:var(--cyan)}
.rev .exp,.witem .exp{font-size:12.5px;margin-top:8px;padding:8px 11px}

/* ---- ② 做题（含成绩页）整屏换亮色：首页、章内页、错题本、知识点、设置都不动 ---- */
body.in-quiz.qb-light{
  --txt:#1b2437; --dim:#6b7a96; --line:#d5dfef; --stroke:#d3ddee;
  --card:#ffffff; --bg2:#f1f5fc; --glass:#ffffff; --glass2:#f3f7fe;
  --cyan:var(--acl,#0b7fa8); --pink:#c2447f;
  --ok:#0f8a5c; --bad:#c3384f; --warn:#a8700a;
}
/* 背景分四路：亮色（默认）／深色／自定义颜色／自定义图片。
   注意：body 自己画的底色会盖在 ::before／::after 上面（负 z-index 的子元素先画），
   所以「用图」这一路 body 必须是透明的，底图交给 ::before、压暗交给 ::after */
body.in-quiz::before{background-image:none}
body.in-quiz::after{background:none}
body.in-quiz{background:linear-gradient(180deg,#f3f6fb 0%,#eaeff7 55%,#e2e8f3 100%)}
body.in-quiz.qb-dark{background:#0b0f1c}
body.in-quiz.qbg-color{background:var(--qbg,#eef3fa)}
body.in-quiz.qbg-img{background:transparent}
body.in-quiz.qbg-img::before{background-image:var(--qbg-img);background-position:center center;background-size:cover;background-repeat:no-repeat}
body.in-quiz.qbg-img::after{background:rgba(0,0,0,var(--qdim,.3))}
body.in-quiz.qb-light .top{background:linear-gradient(115deg,#ffffff 0%,#eef4fd 62%,#e3ecfa 100%);
  border-color:#d8e1f0;box-shadow:0 8px 22px rgba(35,60,110,.10)}
body.in-quiz.qb-light .top h1{color:#16203a;text-shadow:none}
body.in-quiz.qb-light .top .sub{color:#6b7a96;text-shadow:none}
body.in-quiz.qb-light .card{background:#fff;border-color:#d3ddee;box-shadow:0 8px 22px rgba(35,60,110,.10),inset 0 1px 0 #fff}
body.in-quiz.qb-light .card h2{color:var(--acl,#0b7fa8)}
body.in-quiz.qb-light .stem{color:#16203a}
body.in-quiz.qb-light #view-quiz .bar>i,body.in-quiz.qb-light #view-result .bar>i{background:linear-gradient(90deg,var(--acl,#0b7fa8),#c2447f)}
body.in-quiz.qb-light .bar{background:#e6ecf7;border-color:#d8e1f0}
body.in-quiz.qb-light .opt{background:#fff;border-color:#d8e1f0;color:#1b2437}
body.in-quiz.qb-light .opt:hover{background:#f4f8ff;border-color:var(--acl,#0b7fa8)}
body.in-quiz.qb-light .opt:active{background:#e9f1fd;border-color:var(--acl,#0b7fa8)}
body.in-quiz.qb-light .opt .k{color:var(--acl,#0b7fa8)}
body.in-quiz.qb-light .opt.sel{border-color:var(--acl,#0b7fa8);background:#e8f3fc}
body.in-quiz.qb-light .opt.sel::after{color:var(--acl,#0b7fa8)}
body.in-quiz.qb-light .opt.ok{border-color:#0f8a5c;background:#e6f7ef}
body.in-quiz.qb-light .opt.bad{border-color:#c3384f;background:#fdecef}
body.in-quiz.qb-light .msg{background:#f7fafe;border-color:#d8e1f0;color:#1b2437}
body.in-quiz.qb-light .msg.ok{border-color:rgba(15,138,92,.45)}
body.in-quiz.qb-light .msg.bad{border-color:rgba(195,56,79,.45)}
body.in-quiz.qb-light .msg b{color:#0f2a4d}
body.in-quiz.qb-light .tag{background:#f0f4fb;border-color:#d8e1f0;color:#5b6b88}
body.in-quiz.qb-light .rev{background:#fff;border-color:#dce4f1}
body.in-quiz.qb-light .rev .a{color:#5b6b88}
body.in-quiz.qb-light .rev .a b{color:#12386b}
body.in-quiz.qb-light .btn{background:#fff;border-color:#d8e1f0;color:#1b2437}
body.in-quiz.qb-light .btn:hover{border-color:var(--acl,#0b7fa8)}
body.in-quiz.qb-light .btn.primary{background:linear-gradient(90deg,#1f8fbe,#c2447f);color:#fff;border:0}
body.in-quiz.qb-light .btn.ghost{background:#f4f8ff;border-color:#dbe4f2}
body.in-quiz.qb-light .kbd{color:#8794ad}
body.in-quiz.qb-light .score{background:linear-gradient(90deg,#1f8fbe,#c2447f);-webkit-background-clip:text;background-clip:text;color:transparent}
body.in-quiz.qb-light .exp{background:#eef6fd;border-color:#c9e2f2;color:#22304a}
body.in-quiz.qb-light .exp .eh{color:var(--acl,#0b7fa8);border-color:rgba(11,127,168,.38)}
body.in-quiz.qb-light .exp strong{color:#0b5f80}
body.in-quiz.qb-light .rotbtn{color:#34456a}

/* ---- 界面底色（首页／章内页／错题本／知识点／设置）：只换窗外那层底，板子不变 ----
   用 :not(.in-quiz) 保证做题那两屏还是听上面那张卡的；
   自定义时给 header 垫一层暗纱，不然浅底上的白标题看不清 */
body:not(.in-quiz).ubg-color{background-color:var(--ubg,#0b0f1c)}
body:not(.in-quiz).ubg-color::before{background-image:none}
body:not(.in-quiz).ubg-img{background-color:transparent}
body:not(.in-quiz).ubg-img::before{background-image:var(--ubg-img);background-position:center center;background-size:cover;background-repeat:no-repeat}
body:not(.in-quiz).ubg-img::after{background:rgba(0,0,0,var(--udim,.25))}
body:not(.in-quiz).ubg-color .top,body:not(.in-quiz).ubg-img .top{
  background:rgba(9,13,24,.72);border:1px solid var(--line);border-radius:14px;padding:11px 13px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body:not(.in-quiz).ubg-light .top{background:rgba(7,10,18,.87)}

/* ---- 设置页：背景调节的控件 ---- */
.hidefile{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
input[type=color]{width:46px;height:30px;padding:0;border:1px solid var(--line);border-radius:9px;background:#0f1730;cursor:pointer}
input[type=range]{height:24px;accent-color:#5fe3ff;background:transparent}
.chip.swatch{display:inline-flex;align-items:center;gap:7px}
.chip.swatch::before{content:'';width:13px;height:13px;border-radius:4px;background:var(--sw,#888);border:1px solid rgba(255,255,255,.22)}
.qbg-prev,.ubg-prev{margin-top:12px;border-radius:12px;border:1px solid var(--line);min-height:78px;
  display:flex;align-items:center;justify-content:center;padding:12px;
  background:#eaeff7;background-size:cover;background-position:center center}
.qbg-prev .chipdemo{border-radius:9px;padding:7px 11px;font-size:12.5px}
.qbg-prev.light .chipdemo{background:#fff;color:#1b2437;box-shadow:0 1px 5px rgba(20,40,80,.16)}
.qbg-prev.dark .chipdemo{background:rgba(12,18,32,.9);color:#e9eefc;border:1px solid rgba(255,255,255,.12)}
.ubg-prev{background:linear-gradient(180deg,#121a2e,#0b0f1c)}
.ubg-prev .demo{background:linear-gradient(180deg,#151d33,#121a2e);border:1px solid var(--line);border-radius:10px;
  padding:8px 11px;color:var(--txt);font-size:12.5px;line-height:1.5}
.ubg-prev .demo i{color:var(--dim);font-style:normal;font-size:11.5px}

/* ---- ③ 横屏：内容放宽、选项排两列 ---- */
.top .rotbtn{margin-left:auto;flex:0 0 auto;align-self:flex-start}
.switch.wide{display:flex;margin-top:11px;line-height:1.5}
@media (orientation:landscape) and (min-width:700px){
  .wrap{max-width:1080px;padding:16px 20px 60px}
  .chgrid{grid-template-columns:repeat(3,1fr)}
  .top{padding:18px 20px}
  #view-quiz .card,#view-result .card{padding:18px 20px}
  #view-quiz .stem{font-size:18.5px;margin:12px 0 14px}
  #view-quiz .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .banner{height:104px}
}
/* 方向锁不住时的兜底：整页转 90°，把人手上的竖屏当横屏用。
   这里不能再写死底色（写死了会盖住自定义图，也会把首页的插图挡掉）——底色交给 .in-quiz 那几条 */
body.force-land{position:fixed;top:0;left:0;width:100vh;height:100vw;min-height:0;
  transform:rotate(90deg) translateY(-100%);transform-origin:top left;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
body.force-land .wrap{max-width:1080px;padding:14px 20px 40px}
body.force-land #view-quiz .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
body.force-land .chgrid{grid-template-columns:repeat(3,1fr)}
body.force-land .top{padding:16px 20px}
html.force-land-on{overflow:hidden}