/* =========================================================
   导游学霸 · Learning Terminal v2
   Typography: native modern Chinese sans for reliable offline rendering.
   UI: PingFang SC / Hiragino Sans GB. Metrics: DIN Alternate / SF Mono.
   ========================================================= */
:root{
  --font-ui:"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --font-display:"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI",sans-serif;
  --font-metric:"DIN Alternate","SF Mono","Roboto Mono",ui-monospace,monospace;
  --lt-bg:#07111a;
  --lt-surface:#0d1a24;
  --lt-surface-2:#12232e;
  --lt-surface-3:#172a35;
  --lt-line:rgba(147,177,190,.18);
  --lt-line-strong:rgba(72,199,191,.42);
  --lt-text:#eef4f2;
  --lt-text-2:#aab9bd;
  --lt-text-3:#71858d;
  --lt-accent:#38c4b8;
  --lt-accent-2:#66d5c5;
  --lt-amber:#dca14b;
  --lt-danger:#df6a60;
}
html,body,button,input,textarea,select{font-family:var(--font-ui)}
body:not([data-view="redmap"]) :is(h1,h2,h3,h4){font-family:var(--font-display)}
:is(.practice-score b,.practice-meta,.practice-progress,.qs-count,.person-specialty-filters button>b){font-family:var(--font-metric)}

/* Teaching and drilling stay distinct, but switching between them stays immediate. */
.study-mode-switch{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  margin:0 0 22px;padding:6px;background:rgba(7,17,26,.72);
  border:1px solid var(--lt-line);border-radius:15px
}
.study-mode-switch button{
  min-width:0;padding:13px 15px;display:grid;grid-template-columns:32px 1fr;gap:10px;
  align-items:center;text-align:left;color:var(--lt-text-2);border:1px solid transparent;
  border-radius:10px;background:transparent
}
.study-mode-switch button:hover{background:rgba(255,255,255,.035);color:var(--lt-text)}
.study-mode-switch button.on{
  color:var(--lt-text);background:var(--lt-surface-2);border-color:var(--lt-line-strong);
  box-shadow:inset 3px 0 var(--lt-accent)
}
.study-mode-switch i{font:700 12px var(--font-metric);font-style:normal;color:var(--lt-accent)}
.study-mode-switch span{display:grid;gap:3px}.study-mode-switch b{font-size:14px}
.study-mode-switch em{font-size:11px;font-style:normal;color:var(--lt-text-3)}
.learn-home>.study-mode-switch{margin-top:28px}

/* The practice area is one coherent learning instrument, not stacked generic cards. */
body[data-view="quiz"] main{
  background:
    linear-gradient(rgba(57,116,123,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(57,116,123,.035) 1px,transparent 1px),
    radial-gradient(circle at 72% -8%,rgba(56,196,184,.1),transparent 34%),
    var(--lt-bg);
  background-size:36px 36px,36px 36px,auto,auto;
}
body[data-view="quiz"] .view-head h1,
body[data-view="quiz"] .practice-top h2{font-family:var(--font-display);letter-spacing:-.035em}
body[data-view="quiz"] .view-head h1{color:var(--lt-text)}
body[data-view="quiz"] .view-head p,
body[data-view="quiz"] .practice-score,
body[data-view="quiz"] .practice-meta{color:var(--lt-text-3)}
body[data-view="quiz"] .practice-score b{color:var(--lt-text);font-variant-numeric:tabular-nums}
body[data-view="quiz"] .practice-mode{color:var(--lt-accent)}
body[data-view="quiz"] .quiz-context-bar{border-left-color:var(--lt-accent)}
body[data-view="quiz"] .quiz-context-bar button{color:var(--lt-accent)}
body[data-view="quiz"] .person-specialty-entry{border-color:var(--lt-line-strong)!important;background:linear-gradient(105deg,rgba(56,196,184,.09),transparent)!important}
body[data-view="quiz"] .person-specialty-entry .qs-count{color:var(--lt-accent)!important}
body[data-view="quiz"] .person-specialty-filters button.on{border-color:var(--lt-accent);background:rgba(56,196,184,.09);box-shadow:inset 3px 0 var(--lt-accent)}
body[data-view="quiz"] .person-specialty-filters button.on b{color:var(--lt-accent)}
body[data-view="quiz"] .practice-progress{height:5px;background:rgba(139,167,177,.12)}
body[data-view="quiz"] .practice-progress i{background:linear-gradient(90deg,var(--lt-accent),#77d8cf);box-shadow:0 0 12px rgba(56,196,184,.25)}
body[data-view="quiz"] .practice-card{
  color:var(--lt-text);background:linear-gradient(145deg,rgba(17,34,45,.98),rgba(10,23,33,.98));
  border:1px solid var(--lt-line);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.22)
}
body[data-view="quiz"] .practice-stage.is-review .practice-card{border-color:rgba(220,161,75,.72)}
body[data-view="quiz"] .practice-stage .quiz-q{
  color:var(--lt-text);font-family:var(--font-ui);font-size:22px;font-weight:650;line-height:1.72;letter-spacing:.005em
}
body[data-view="quiz"] .practice-stage .opt{
  color:var(--lt-text);background:rgba(255,255,255,.025);border-color:var(--lt-line);
  border-radius:10px;padding:15px 16px
}
body[data-view="quiz"] .practice-stage .opt:hover{border-color:var(--lt-line-strong);background:rgba(56,196,184,.055)}
body[data-view="quiz"] .practice-stage .opt.selected{border-color:var(--lt-accent);background:rgba(56,196,184,.09);box-shadow:0 0 0 2px rgba(56,196,184,.08)}
body[data-view="quiz"] .practice-stage .opt .k{color:var(--lt-text-2);background:rgba(255,255,255,.055)}
body[data-view="quiz"] .btn-p,
body[data-view="quiz"] .multi-submit,
body[data-view="quiz"] .talk-send{background:var(--lt-accent);color:#071a1b;border:0;font-weight:750;box-shadow:none}
body[data-view="quiz"] .btn-p:hover,
body[data-view="quiz"] .multi-submit:hover,
body[data-view="quiz"] .talk-send:hover{background:var(--lt-accent-2);transform:translateY(-1px)}
body[data-view="quiz"] .btn-g{color:var(--lt-text-2);background:rgba(255,255,255,.035);border-color:var(--lt-line)}
body[data-view="quiz"] .tag{background:rgba(255,255,255,.055);color:var(--lt-text-2);border:1px solid transparent}
body[data-view="quiz"] .tag.b{background:rgba(56,196,184,.11);color:var(--lt-accent-2)}
body[data-view="quiz"] .quiz-exp{color:var(--lt-text-2);background:rgba(56,196,184,.055);border-left-color:var(--lt-accent)}

/* Context is a low-profile instrument rail. */
body[data-view="quiz"] .question-context{
  color:var(--lt-text);background:linear-gradient(90deg,rgba(12,31,42,.98),rgba(9,24,34,.98));
  border:1px solid var(--lt-line);border-radius:14px
}
body[data-view="quiz"] .question-context>span,
body[data-view="quiz"] .person-question-context>span{color:var(--lt-accent);font-family:var(--font-metric)}
body[data-view="quiz"] .question-context p{color:var(--lt-text-3)}
body[data-view="quiz"] .person-relation-tags b{color:var(--lt-accent-2);background:rgba(56,196,184,.1)}
body[data-view="quiz"] .person-question-context i{color:var(--lt-text-2);background:rgba(255,255,255,.035);border-color:var(--lt-line)}

/* Community uses the same elevation and palette as the question surface. */
body[data-view="quiz"] .question-talk{
  color:var(--lt-text);background:linear-gradient(145deg,rgba(15,31,42,.98),rgba(10,23,33,.98));
  border-color:var(--lt-line);border-radius:18px;box-shadow:0 20px 55px rgba(0,0,0,.18)
}
body[data-view="quiz"] .talk-head{background:rgba(255,255,255,.025);border-color:var(--lt-line)}
body[data-view="quiz"] .talk-head span,
body[data-view="quiz"] .talk-list-head button{color:var(--lt-accent)}
body[data-view="quiz"] .talk-head b,
body[data-view="quiz"] .talk-list-head b,
body[data-view="quiz"] .talk-author b{color:var(--lt-text)}
body[data-view="quiz"] .talk-question-like{color:var(--lt-text-2);background:rgba(255,255,255,.035);border-color:var(--lt-line)}
body[data-view="quiz"] .talk-question-like.on{color:var(--lt-accent);background:rgba(56,196,184,.09);border-color:var(--lt-line-strong)}
body[data-view="quiz"] .talk-compose textarea,
body[data-view="quiz"] .talk-reply-box textarea{
  color:var(--lt-text);background:rgba(3,12,19,.52);border-color:var(--lt-line);caret-color:var(--lt-accent)
}
body[data-view="quiz"] :is(.talk-compose textarea,.talk-reply-box textarea)::placeholder{color:var(--lt-text-3)}
body[data-view="quiz"] :is(.talk-compose textarea,.talk-reply-box textarea):focus{border-color:var(--lt-accent);box-shadow:0 0 0 3px rgba(56,196,184,.09)}
body[data-view="quiz"] .talk-avatar{color:var(--lt-accent-2);background:rgba(56,196,184,.11);font-family:var(--font-display)}
body[data-view="quiz"] .talk-name,
body[data-view="quiz"] .talk-compose-foot span,
body[data-view="quiz"] .talk-empty,
body[data-view="quiz"] .talk-author time,
body[data-view="quiz"] .talk-actions button{color:var(--lt-text-3)}
body[data-view="quiz"] .talk-comment p{color:var(--lt-text-2)}
body[data-view="quiz"] .talk-list-head,
body[data-view="quiz"] .talk-comment{border-color:var(--lt-line)}
body[data-view="quiz"] .talk-replies,
body[data-view="quiz"] .talk-reply-box{background:rgba(255,255,255,.025);border-color:var(--lt-line)}
body[data-view="quiz"] .theme-switch button.on{background:var(--lt-accent);color:#071a1b;box-shadow:0 5px 16px rgba(56,196,184,.2)}
body[data-view="quiz"] .sb-nav-item.on{border-color:rgba(56,196,184,.34);background:rgba(56,196,184,.1);color:var(--lt-text)}
body[data-view="quiz"] .sb-nav-item.on::before{background:var(--lt-accent)}

/* Day theme is explicit: no inherited white text on light surfaces. */
html[data-theme="day"]{
  --lt-bg:#edf2f1;--lt-surface:#ffffff;--lt-surface-2:#f5f8f7;--lt-surface-3:#e8efed;
  --lt-line:rgba(31,75,82,.16);--lt-line-strong:rgba(24,132,129,.42);
  --lt-text:#11272c;--lt-text-2:#52676b;--lt-text-3:#7b8d91;
  --lt-accent:#177f7d;--lt-accent-2:#126a69;--lt-amber:#a96d1c;--lt-danger:#b94e45
}
html[data-theme="day"] body[data-view="quiz"] main{
  color:var(--lt-text);
  background:
    linear-gradient(rgba(37,105,107,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,105,107,.035) 1px,transparent 1px),
    radial-gradient(circle at 72% -8%,rgba(23,127,125,.09),transparent 34%),
    var(--lt-bg);
  background-size:36px 36px,36px 36px,auto,auto
}
html[data-theme="day"] .study-mode-switch{background:rgba(255,255,255,.58)}
html[data-theme="day"] body[data-view="quiz"] :is(.view-head h1,.practice-top h2,.practice-score b,.practice-stage .quiz-q){color:var(--lt-text)!important}
html[data-theme="day"] body[data-view="quiz"] .practice-card{color:var(--lt-text);background:rgba(255,255,255,.94);border-color:var(--lt-line);box-shadow:0 22px 55px rgba(25,58,61,.08)}
html[data-theme="day"] body[data-view="quiz"] .practice-stage .opt{color:var(--lt-text);background:#f8faf9;border-color:var(--lt-line)}
html[data-theme="day"] body[data-view="quiz"] .practice-stage .opt:hover{background:#eef7f5}
html[data-theme="day"] body[data-view="quiz"] .practice-stage .opt .k{color:var(--lt-text-2);background:#e9efed}
html[data-theme="day"] body[data-view="quiz"] .question-context{color:var(--lt-text);background:#e3eeec;border-color:rgba(23,127,125,.19)}
html[data-theme="day"] body[data-view="quiz"] .question-context p{color:var(--lt-text-2)}
html[data-theme="day"] body[data-view="quiz"] .person-question-context i{color:var(--lt-text-2);background:rgba(255,255,255,.65)}
html[data-theme="day"] body[data-view="quiz"] .question-talk{color:var(--lt-text);background:rgba(255,255,255,.94);border-color:var(--lt-line);box-shadow:0 20px 55px rgba(25,58,61,.07)}
html[data-theme="day"] body[data-view="quiz"] .talk-head{background:#eff4f2}
html[data-theme="day"] body[data-view="quiz"] .talk-head b,
html[data-theme="day"] body[data-view="quiz"] .talk-list-head b,
html[data-theme="day"] body[data-view="quiz"] .talk-author b{color:var(--lt-text)}
html[data-theme="day"] body[data-view="quiz"] .talk-question-like{color:var(--lt-text-2);background:#fff}
html[data-theme="day"] body[data-view="quiz"] .talk-compose textarea,
html[data-theme="day"] body[data-view="quiz"] .talk-reply-box textarea{color:var(--lt-text);background:#f8faf9;border-color:var(--lt-line)}
html[data-theme="day"] body[data-view="quiz"] .talk-replies,
html[data-theme="day"] body[data-view="quiz"] .talk-reply-box{background:#f0f5f3}

@media(max-width:620px){
  .study-mode-switch{grid-template-columns:1fr;margin-bottom:16px}
  .learn-home>.study-mode-switch{margin-top:70px}
  body[data-view="quiz"] .practice-stage .quiz-q{font-size:19px;line-height:1.68}
  body[data-view="quiz"] .practice-card{padding:20px 16px}
  body[data-view="quiz"] .talk-head,body[data-view="quiz"] .talk-compose{padding-left:15px;padding-right:15px}
}

/* Map detail: fixed reference-sheet layout with opaque reading surfaces. */
.spot-modal-backdrop{background:rgba(2,8,14,.86);backdrop-filter:blur(14px) saturate(.75)}
.spot-modal{
  width:min(1080px,calc(100vw - 48px));max-height:min(88vh,860px);color:#eaf2f1;
  background:#0d1921;border:1px solid rgba(111,189,183,.28);border-radius:18px;
  box-shadow:0 32px 100px rgba(0,0,0,.72)
}
.spot-modal-scroll{max-height:min(88vh,860px)}
.spot-modal .sd-card{
  display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start;min-height:0;
  color:#eaf2f1;background:#0d1921;border:0;border-radius:0
}
.spot-modal .sd-hero{
  position:sticky;top:0;width:calc(100% - 32px);height:240px;min-height:0;margin:32px 16px;
  background-color:#081219!important;background-size:contain;background-repeat:no-repeat;background-position:center;
  border:1px solid rgba(111,189,183,.2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.32)
}
.spot-modal .sd-hero::after{background:linear-gradient(180deg,transparent 68%,rgba(3,10,15,.38));border-radius:12px}
.spot-modal .sd-body{min-width:0;padding:34px 42px 38px;border-left:1px solid rgba(111,189,183,.14)}
.spot-modal .sd-title{
  margin:0 0 14px;padding-right:40px;color:#f4f8f7;font-family:var(--font-display);
  font-size:clamp(28px,3vw,38px);font-weight:760;line-height:1.25;letter-spacing:-.025em
}
.spot-modal .sd-tags{margin-bottom:16px}
.spot-modal .sd-tags .tag{color:#b9cbc9;background:#14252e;border-color:rgba(131,172,176,.24)}
.spot-modal .sd-tagline{color:#a9bfbd;font-family:var(--font-ui);font-size:15px;font-style:normal}
.spot-modal .sd-addr{color:#b8c9c8;background:#12222b;border-left-color:var(--lt-accent)}
.spot-modal .sd-section{border-top:1px solid rgba(131,172,176,.17)}
.spot-modal .sd-section-h{color:#66d1c5;font-family:var(--font-ui);font-size:14px;font-weight:750}
.spot-modal .sd-overview,
.spot-modal .sd-must,
.spot-modal .sd-guide-body,
.spot-modal .sd-quiz-q{
  color:#dce8e6;font-family:var(--font-ui);font-size:16px;line-height:1.85
}
.spot-modal .sd-must-section{
  margin-inline:0;padding:18px 20px;background:rgba(220,161,75,.08);
  border:1px solid rgba(220,161,75,.3)
}
.spot-modal .sd-must-h{color:#e2b66f}
.spot-modal .sd-guide-body,
.spot-modal .sd-quiz-item{background:#12222b;border-color:rgba(131,172,176,.2)}
.spot-modal .sd-guide-body{max-height:340px;padding:18px 20px;border-left-color:var(--lt-accent)}
.spot-modal .sd-actions{background:linear-gradient(transparent,#0d1921 20%)}
.spot-modal-close{
  top:18px;right:18px;width:42px;height:42px;color:#eaf2f1;
  background:#14242d;border-color:rgba(131,172,176,.28)
}

html[data-theme="day"] .spot-modal-backdrop{background:rgba(19,34,38,.66)}
html[data-theme="day"] .spot-modal,
html[data-theme="day"] .spot-modal .sd-card{color:#14282d;background:#f7faf9}
html[data-theme="day"] .spot-modal{border-color:rgba(29,107,108,.24);box-shadow:0 30px 90px rgba(13,35,40,.26)}
html[data-theme="day"] .spot-modal .sd-body{border-left-color:rgba(29,107,108,.14)}
html[data-theme="day"] .spot-modal .sd-title{color:#10262b}
html[data-theme="day"] .spot-modal .sd-tags .tag{color:#315459;background:#e7efed;border-color:rgba(29,107,108,.18)}
html[data-theme="day"] .spot-modal .sd-tagline,
html[data-theme="day"] .spot-modal .sd-addr{color:#48666a}
html[data-theme="day"] .spot-modal .sd-addr,
html[data-theme="day"] .spot-modal .sd-guide-body,
html[data-theme="day"] .spot-modal .sd-quiz-item{background:#edf3f1}
html[data-theme="day"] .spot-modal .sd-section{border-top-color:rgba(29,107,108,.14)}
html[data-theme="day"] .spot-modal .sd-section-h{color:#177f7d}
html[data-theme="day"] .spot-modal .sd-overview,
html[data-theme="day"] .spot-modal .sd-must,
html[data-theme="day"] .spot-modal .sd-guide-body,
html[data-theme="day"] .spot-modal .sd-quiz-q{color:#183237}
html[data-theme="day"] .spot-modal .sd-must-section{background:#fff8e9;border-color:rgba(172,112,29,.28)}
html[data-theme="day"] .spot-modal .sd-actions{background:linear-gradient(transparent,#f7faf9 20%)}
html[data-theme="day"] .spot-modal-close{color:#173036;background:#e4ecea;border-color:rgba(29,107,108,.22)}

@media(max-width:760px){
  .spot-modal{width:100%;max-height:none;border-radius:0}
  .spot-modal-scroll{max-height:100vh}
  .spot-modal .sd-card{display:block}
  .spot-modal .sd-hero{position:relative;width:calc(100% - 36px);height:210px;margin:18px}
  .spot-modal .sd-body{padding:22px 18px 30px;border-left:0}
  .spot-modal .sd-title{font-size:28px}
}

.spot-inline-intro,
.spot-inline-loading,
.spot-inline-empty,
.spot-inline-summary{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:20px;
  color:#dce8e6;background:#12222b;border:1px solid rgba(131,172,176,.2);border-radius:12px
}
.spot-inline-intro b{font-size:17px}.spot-inline-intro span{color:#9fb6b5;font-size:13px}
.spot-inline-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-bottom:18px;color:#9fb6b5;font:650 12px var(--font-metric)}
.spot-inline-head i{height:4px;background:linear-gradient(90deg,var(--lt-accent) var(--spot-progress,100%),rgba(131,172,176,.16) 0);border-radius:4px}
.spot-inline-head em{font-style:normal}
.spot-inline-stem{margin-bottom:16px;color:#edf5f3;font-size:18px;font-weight:680;line-height:1.65}
.spot-inline-options{display:grid;gap:10px}
.spot-inline-options button{
  display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;width:100%;padding:12px 14px;
  color:#dce8e6;text-align:left;background:#12222b;border:1px solid rgba(131,172,176,.2);border-radius:9px
}
.spot-inline-options button:hover,.spot-inline-options button.selected{background:rgba(56,196,184,.1);border-color:var(--lt-accent)}
.spot-inline-options button i{display:grid;place-items:center;width:30px;height:30px;color:#9fb6b5;font:700 13px var(--font-metric);font-style:normal;background:#1a3039;border-radius:7px}
.spot-inline-options button.ok{color:#c9f1dc;background:rgba(49,178,121,.13);border-color:#45bd87}
.spot-inline-options button.no{color:#ffd0ca;background:rgba(210,83,70,.12);border-color:#d26a5f}
.spot-inline-submit{margin-top:14px;background:var(--lt-accent)!important;color:#071a1b!important}
.spot-inline-result>div{display:grid;gap:9px;margin-top:14px;padding:15px 16px;border-radius:10px}
.spot-inline-result .correct{color:#c9f1dc;background:rgba(49,178,121,.12)}
.spot-inline-result .wrong{color:#ffd0ca;background:rgba(210,83,70,.12)}
.spot-inline-result p{margin:0;color:inherit;line-height:1.7}.spot-inline-result .btn{justify-self:start}
.spot-inline-summary b{color:var(--lt-accent);font:750 34px var(--font-metric)}
.spot-inline-summary p{margin:0;color:#b8c9c8}

html[data-theme="day"] .spot-inline-intro,
html[data-theme="day"] .spot-inline-loading,
html[data-theme="day"] .spot-inline-empty,
html[data-theme="day"] .spot-inline-summary{color:#183237;background:#edf3f1;border-color:rgba(29,107,108,.17)}
html[data-theme="day"] .spot-inline-intro span,
html[data-theme="day"] .spot-inline-head{color:#547176}
html[data-theme="day"] .spot-inline-stem{color:#10262b}
html[data-theme="day"] .spot-inline-options button{color:#183237;background:#f7faf9;border-color:rgba(29,107,108,.18)}
html[data-theme="day"] .spot-inline-options button i{color:#45666a;background:#e5eeec}
html[data-theme="day"] .spot-inline-summary p{color:#48666a}