/* 导游证备考台 · iOS-style theme (Human Interface Guidelines colors, inset grouped lists, bottom tab bar on phones) */
:root{
  --bg:#f2f2f7;--card:#fff;--card2:#f2f2f7;--ink:#000;--ink2:#3c3c43;--muted:#8e8e93;--sep:rgba(60,60,67,.18);
  --blue:#007aff;--blue-tint:#e8f1ff;--green:#34c759;--green-tint:#e9f8ee;--red:#ff3b30;--red-tint:#ffecea;--orange:#ff9500;--orange-tint:#fff3e0;--yellow:#ffcc00;--mark:#ff3b30;
  --fill:#e9e9eb;--fill2:#d1d1d6;--bar:rgba(249,249,249,.92);--seg-on:#fff;--r:14px;--rs:10px
}
/* 夜间护眼：暖色深底、降低纯白与高饱和蓝。手动选择 data-theme=night，或跟随系统深色（未手动选浅色时） */
:root[data-theme=night]{
  --bg:#141311;--card:#1f1d1a;--card2:#2a2823;--ink:#ece5d8;--ink2:#d9d1c3;--muted:#9c9488;--sep:rgba(236,229,216,.14);
  --blue:#5aa9ff;--blue-tint:#1b2b3d;--green:#3fc46b;--green-tint:#15301e;--red:#ff6b61;--red-tint:#3a201c;--orange:#ffb340;--orange-tint:#3a2d14;--yellow:#ffd60a;--mark:#ff8a7a;
  --fill:#2b2924;--fill2:#3b3832;--bar:rgba(22,21,18,.88);--seg-on:#4a463f
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#141311;--card:#1f1d1a;--card2:#2a2823;--ink:#ece5d8;--ink2:#d9d1c3;--muted:#9c9488;--sep:rgba(236,229,216,.14);
  --blue:#5aa9ff;--blue-tint:#1b2b3d;--green:#3fc46b;--green-tint:#15301e;--red:#ff6b61;--red-tint:#3a201c;--orange:#ffb340;--orange-tint:#3a2d14;--yellow:#ffd60a;--mark:#ff8a7a;
  --fill:#2b2924;--fill2:#3b3832;--bar:rgba(22,21,18,.88);--seg-on:#4a463f
}}
:root[data-theme=night] img.qimg{filter:brightness(.85) contrast(.95)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) img.qimg{filter:brightness(.85) contrast(.95)}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue","Microsoft YaHei","Noto Sans CJK SC",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
/* top bar */
.top{position:sticky;top:0;z-index:20;height:52px;padding:0 16px;display:flex;align-items:center;gap:12px;border-bottom:.5px solid var(--sep)}
/* blur lives on a pseudo-element: backdrop-filter on .top itself would turn it into the containing block of the fixed tab bar */
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.brand{color:var(--ink);font-weight:600;font-size:17px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(145deg,#4da3ff,#007aff);color:#fff;font-weight:700;font-size:15px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{display:flex;align-items:center;gap:6px;color:var(--muted);padding:6px 10px;border-radius:9px;font-size:15px;white-space:nowrap}
.nav a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a.on{color:var(--blue);background:var(--blue-tint)}
.nav a.more{display:none}
#app{max-width:860px;margin:0 auto;padding:14px 16px 100px}
.loading{text-align:center;color:var(--muted);padding:80px 0}
h1{font-size:30px;letter-spacing:-.4px;margin:6px 0 12px;font-weight:700}
h2{font-size:13px;font-weight:500;color:var(--muted);text-transform:none;margin:22px 0 6px 16px;letter-spacing:.2px}
h3{font-size:17px;font-weight:600;margin:0 0 6px}
.sub{color:var(--muted);font-size:15px}
/* inset grouped cards */
.card{background:var(--card);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.card.tight{padding:12px 16px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-bottom:12px}
.grid4{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:12px}
.grid>.card,.grid>.stat,.grid4>.card,.grid4>.stat{margin:0}
.stat{background:var(--card);border-radius:var(--r);padding:12px 14px}
.stat b{display:block;font-size:26px;font-weight:700;letter-spacing:-.5px;color:var(--ink)}
.stat span{font-size:13px;color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
/* buttons: filled / tinted / plain */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:var(--fill);color:var(--blue);border-radius:11px;padding:9px 14px;font-size:15px;font-weight:500;line-height:1.2;transition:filter .12s,transform .08s}
.btn:active{transform:scale(.97);filter:brightness(.92)}
.btn.p{background:var(--blue);color:#fff}
.btn.s{font-size:14px;padding:7px 12px;border-radius:10px}
.btn.danger{color:var(--red);background:var(--red-tint)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
/* segmented control */
.tabs{display:flex;gap:2px;background:var(--fill);border-radius:10px;padding:2px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1;border:0;background:transparent;border-radius:8px;padding:7px 10px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.tabs button.on{background:var(--seg-on);box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* progress */
.bar{height:5px;background:var(--fill);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:999px}
.bar i.bad{background:var(--red)}
.pill{display:inline-block;font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--blue-tint);color:var(--blue);margin-right:4px;vertical-align:middle}
.pill.g{background:var(--fill);color:var(--muted)}
.pill.w{background:var(--orange-tint);color:var(--orange)}
.pill.b{background:var(--red-tint);color:var(--red)}
.pill.ok{background:var(--green-tint);color:var(--green)}
.note{background:var(--orange-tint);color:var(--ink2);padding:9px 12px;border-radius:var(--rs);font-size:14px;margin:8px 0;display:flex;gap:8px}
.note::before{content:"";flex:0 0 3px;border-radius:2px;background:var(--orange)}
/* plan */
.day{margin-bottom:12px}
.day.today{box-shadow:inset 0 0 0 2px var(--blue)}
.day.past{opacity:.78}
.task{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:.5px solid var(--sep);flex-wrap:wrap}
.task:first-of-type{border-top:0}
.task .lab{flex:1;min-width:180px;font-size:16px}
.task .mini{width:130px}
.task.done .lab{color:var(--muted);text-decoration:line-through}
.task input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue);vertical-align:middle}
mark{background:transparent;color:var(--mark);font-weight:600}
/* question */
.q{font-size:18px;line-height:1.55;margin-top:6px}
.q .no{color:var(--muted);font-size:14px;margin-right:6px}
.opts{display:flex;flex-direction:column;margin:14px 0 4px;background:var(--card2);border-radius:var(--r);overflow:hidden}
.opt{display:flex;gap:12px;align-items:center;border:0;border-top:.5px solid var(--sep);padding:12px 14px;background:var(--card2);text-align:left;width:100%;line-height:1.45;font-size:16px;color:var(--ink);position:relative}
.opt:first-child{border-top:0}
.opt .k{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--fill2);color:var(--ink);font-weight:600;font-size:14px}
.opt span:last-child{flex:1}
.opt:not(:disabled):active{background:var(--fill)}
.opt.sel{background:var(--blue-tint)}
.opt.sel .k{background:var(--blue);color:#fff}
.opt.sel::after{content:"✓";color:var(--blue);font-weight:700;font-size:18px}
.opt.right{background:var(--green-tint)}
.opt.right .k{background:var(--green);color:#fff}
.opt.right::after{content:"✓";color:var(--green);font-weight:700;font-size:18px}
.opt.wrong{background:var(--red-tint)}
.opt.wrong .k{background:var(--red);color:#fff}
.opt.wrong::after{content:"✕";color:var(--red);font-weight:700;font-size:16px}
.opt.miss .k{background:var(--green);color:#fff}
.opt.miss::after{content:"应选";color:var(--green);font-size:13px;font-weight:600}
.opt:disabled{cursor:default}
.fb{border-radius:var(--r);padding:12px 14px;margin-top:12px;background:var(--card2)}
.fb.ok{background:var(--green-tint)}.fb.bad{background:var(--red-tint)}
.fb h4{margin:0 0 6px;font-size:16px;font-weight:600}
.exp p{margin:5px 0;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.tips{background:var(--orange-tint);border-radius:var(--rs);padding:10px 12px;margin-top:10px}
.tips h4{margin:0 0 4px;font-size:14px;color:var(--orange)}
.tips p{margin:4px 0;font-size:15px;line-height:1.6}
.src{color:var(--muted);font-size:13px;margin-top:12px}
.qimg{max-width:100%;border-radius:var(--rs);margin:8px 0;display:block}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.qhead .t{font-weight:600;font-size:16px}
.timer{font-variant-numeric:tabular-nums;font-weight:600;color:var(--blue);background:var(--blue-tint);padding:4px 10px;border-radius:999px;font-size:15px}
.timer.low{color:var(--red);background:var(--red-tint)}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;margin-top:4px}
.palette button{border:0;background:var(--fill);border-radius:9px;height:36px;font-size:13px;font-weight:500;color:var(--ink)}
.palette button.ans{background:var(--blue-tint);color:var(--blue)}
.palette button.cur{outline:2px solid var(--blue);outline-offset:1px}
.palette button.r{background:var(--green-tint);color:var(--green)}
.palette button.w{background:var(--red-tint);color:var(--red)}
.palette button.star::after{content:"★";color:var(--yellow);font-size:9px;position:relative;top:-8px}
.qnav{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap}
.qnav .btn{min-width:120px;padding:11px 16px;font-size:16px;border-radius:12px}
.star{border:0;background:transparent;font-size:24px;color:var(--fill2);padding:0 4px;line-height:1}
.star.on{color:var(--yellow)}
/* lists */
.list .item{padding:11px 0;border-top:.5px solid var(--sep);cursor:pointer;font-size:15.5px}
.list .item:first-child{border-top:0}
.item .meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.topic{cursor:default}
.topic .row{margin-top:10px}
input[type=text],input[type=search],input[type=date],select{font:inherit;font-size:16px;padding:9px 12px;border:0;border-radius:var(--rs);background:var(--card);color:var(--ink);width:100%;max-width:420px;outline:none}
input[type=search]{background:var(--fill)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:rgba(40,40,42,.92);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kbd{font-size:12px;color:var(--muted);margin:10px 0 0}
.kbd kbd{border:.5px solid var(--sep);border-radius:5px;padding:0 5px;background:var(--card);font-family:inherit}
table.t{width:100%;border-collapse:collapse;font-size:14.5px}
table.t th,table.t td{text-align:left;padding:8px 6px;border-bottom:.5px solid var(--sep)}
table.t tr:last-child td{border-bottom:0}
table.t th{color:var(--muted);font-weight:500;font-size:13px}
details summary{cursor:pointer;color:var(--blue)}
.score{font-size:46px;font-weight:800;letter-spacing:-1px;color:var(--blue)}
.score.fail{color:var(--red)}
.hl{background:rgba(255,204,0,.45);border-radius:3px}
ul{padding-left:18px}li{margin:4px 0}
code{font-size:.9em;background:var(--fill);border-radius:5px;padding:1px 5px}
/* more page rows */
.rows a{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:.5px solid var(--sep);color:var(--ink);font-size:16.5px}
.rows a:first-child{border-top:0}
.rows a::after{content:"›";margin-left:auto;color:var(--fill2);font-size:22px;line-height:1}
.rows svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* phone: bottom tab bar */
@media (max-width:700px){
  .top{height:48px;justify-content:center}
  .brand{font-size:17px}
  .nav{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:20;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--sep);padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
  .nav a{flex-direction:column;gap:2px;font-size:10px;padding:2px 6px;background:none;flex:1;max-width:80px}
  .nav a svg{width:25px;height:25px;stroke-width:1.6}
  .nav a.on{background:none}
  .nav a.hide-m{display:none}
  .nav a.more{display:flex}
  #app{padding:10px 14px 96px}
  h1{font-size:28px}
  .card{padding:13px 14px}
  .q{font-size:17px}
  .kbd{display:none}
  .qnav .btn{flex:1}
}
@media (max-width:700px){
  .task .lab{flex:1 1 100%;min-width:0}
  .task .mini{flex:1;width:auto}
  .task .row{margin-left:auto}
}
.fb.bad mark{color:#c0281d}
:root[data-theme=night] .fb.bad mark{color:#ffb3ab}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .fb.bad mark{color:#ffb3ab}}
/* appearance toggle */
.theme{border:0;background:var(--fill);color:var(--blue);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.theme svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){.theme{position:absolute;right:12px;top:7px}}
/* defensive: long tokens never push boxes apart */
.card,.task,.opt,.fb,.tips,.note{overflow-wrap:anywhere}
table.t td{word-break:break-word}
.row>*{min-width:0}
.rrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:.5px solid var(--sep);font-size:15.5px}
.rrow:first-child{border-top:0}
.rrow>span:first-child{flex:1;min-width:0}
.rrow .pill{flex:0 0 auto;white-space:nowrap}
.rrow>.sub{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}