/* 导游学霸 Design System v2
   Modern Chinese atlas × professional study terminal */
:root{
  --ds-ink:#17343a;
  --ds-muted:#657a7d;
  --ds-teal:#137f91;
  --ds-jade:#268b79;
  --ds-paper:#faf8f2;
  --ds-line:rgba(40,76,82,.14);
  --ds-focus:#2b93a3;
  --ds-serif:"Songti SC","STSong","Noto Serif CJK SC",serif;
  --ds-sans:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;
}

/* Navigation: one calm, platform-independent icon language. */
.sidebar{width:214px}
.sb-brand{height:72px}
.sb-brand-mark{border-radius:10px;background:linear-gradient(145deg,#258e9d,#126477);box-shadow:0 8px 22px rgba(25,113,130,.22)}
.sb-progress{margin:14px 13px 10px;padding:13px 14px;border-radius:12px}
.sb-progress-status{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--t2);font-size:12px}
.sb-progress-status i{width:7px;height:7px;border-radius:50%;background:#43b99c;box-shadow:0 0 0 4px rgba(67,185,156,.12)}
.sb-progress-num{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 8px;text-align:left}
.sb-progress-num b{font:700 26px/1 Georgia,serif}
.sb-progress-num span{color:var(--t3);font-size:12px}
.sb-progress-label{text-align:left;font-size:12px;margin-top:8px}
.sb-nav{padding:7px 12px 12px;gap:3px}
.sb-nav-group{padding:15px 10px 5px;color:rgba(111,130,132,.8);font-size:11px;font-weight:700;letter-spacing:.12em}
.sb-nav-item{min-height:48px;padding:11px 12px;gap:11px;border:1px solid transparent}
.sb-nav-item .sb-nav-ic{display:grid;place-items:center;width:22px;height:22px;font-size:0}
.sb-nav-item .sb-nav-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sb-nav-item.on{font-weight:700}
.sb-toggle{min-height:40px}
.sb-toggle span{font-size:23px;line-height:1;transition:transform .25s}
.sidebar:not(.expanded) .sb-toggle span{transform:rotate(180deg)}
.sidebar.expanded .sb-toggle::after{content:"收起导航"}
.workspace-bar{left:214px}
main,main.map-full{margin-left:214px}

/* Every interactive control needs a visible keyboard contract. */
button:focus-visible,[role="button"]:focus-visible,a:focus-visible{
  outline:3px solid color-mix(in srgb,var(--ds-focus) 55%,transparent);
  outline-offset:3px;
}

/* Theme control was visually neat but too small to touch. */
.theme-switch{min-height:40px;padding:4px}
.theme-switch button{min-width:40px!important;height:32px!important;font-size:11px!important}

/* Map loading is now useful content, not a blank dark panel. */
.map-loading{
  gap:0;background:
    radial-gradient(circle at 50% 45%,rgba(36,139,151,.12),transparent 27%),
    linear-gradient(rgba(88,131,139,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(88,131,139,.045) 1px,transparent 1px),
    #081019;
  background-size:auto,34px 34px,34px 34px,auto;color:#dbe9e9
}
.ml-map-shell{position:relative;width:180px;height:118px;margin-bottom:22px}
.ml-map-shell svg{width:100%;height:100%;overflow:visible;fill:rgba(36,139,151,.07);stroke:#4db3be;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 14px rgba(77,179,190,.2))}
.ml-map-shell>span{position:absolute;width:7px;height:7px;border:2px solid #e0b664;border-radius:50%;background:#081019;box-shadow:0 0 0 5px rgba(224,182,100,.1);animation:mapPulse 1.8s infinite}
.ml-map-shell>span:nth-of-type(1){left:48px;top:48px}
.ml-map-shell>span:nth-of-type(2){left:103px;top:65px;animation-delay:.45s}
.ml-map-shell>span:nth-of-type(3){left:135px;top:49px;animation-delay:.9s}
.ml-text{display:grid;gap:3px;text-align:center;letter-spacing:0}
.ml-text b{color:#eef7f6;font-size:16px}
.ml-text span{color:#789295;font-size:12px}
.ml-progress{width:min(310px,72vw);height:6px;margin-top:24px;overflow:hidden;border-radius:99px;background:rgba(135,176,181,.13);box-shadow:inset 0 0 0 1px rgba(135,176,181,.08)}
.ml-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#267f91,#50b7ae,#e2b664);box-shadow:0 0 18px rgba(80,183,174,.38);transition:width .22s ease-out}
.ml-progress-meta{display:flex;justify-content:space-between;width:min(310px,72vw);margin-top:9px;color:#789295;font-size:11px}
.ml-progress-meta b{color:#a8c5c7;font:600 11px Georgia,serif}
.map-loading.is-complete{opacity:0;transition:opacity .25s ease}
@keyframes mapPulse{50%{transform:scale(1.45);box-shadow:0 0 0 9px rgba(224,182,100,0)}}
@media(prefers-reduced-motion:reduce){.ml-map-shell>span{animation:none}}

/* Raise the most problematic microcopy without flattening dense learning screens. */
.workspace-bar p,.command-actions em,.subject-meta,.course-heading p{font-size:12px}

/* Quiz hub: three jobs, one vocabulary, no decorative icon noise. */
.quiz-page>.view-head h1{font-family:var(--ds-serif)}
.quiz-entry-section{margin-top:28px}
.quiz-entry-section>header{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;margin-bottom:12px}
.quiz-entry-section>header>span{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(72,145,153,.25);border-radius:8px;color:#5fa1aa;font:700 11px Georgia,serif}
.quiz-entry-section>header div{display:grid;gap:2px}
.quiz-entry-section>header b{font-size:17px;color:var(--t)}
.quiz-entry-section>header p{margin:0;color:var(--t3);font-size:12px}
.quiz-entry-section .quiz-subjects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0}
.quiz-entry-section .qs-item{width:100%;min-height:82px;display:grid;grid-template-columns:44px 1fr auto;gap:12px;text-align:left;transform:none}
.quiz-entry-section .qs-item:hover{transform:translateY(-2px)}
.qs-code{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(87,154,163,.22);border-radius:9px;background:rgba(37,128,143,.07);color:#4d99a4;font-size:11px;font-weight:800}
.quiz-entry-section .qs-count{min-width:58px;text-align:center;font:700 14px Georgia,serif}
.quiz-review-entry{width:100%;min-height:82px;padding:17px 19px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid rgba(63,150,140,.22);border-radius:10px;background:linear-gradient(105deg,rgba(38,139,121,.1),rgba(38,139,121,.025));text-align:left}
.quiz-review-entry>div{display:grid;gap:4px}.quiz-review-entry b{font-size:15px}.quiz-review-entry span{color:var(--t3);font-size:12px}.quiz-review-entry em{color:#4fa398;font-size:12px;font-style:normal;font-weight:700}
.quiz-specialty-entries{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.quiz-specialty-entries button{min-height:94px;padding:17px 18px;display:grid;grid-template-columns:1fr auto;gap:5px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);text-align:left}
.quiz-specialty-entries button:hover{border-color:#5c9ea7;transform:translateY(-2px)}
.quiz-specialty-entries span{grid-column:1/-1;color:#5c9ea7;font-size:11px;font-weight:800;letter-spacing:.08em}
.quiz-specialty-entries b{font-size:14px}.quiz-specialty-entries em{color:var(--t3);font-size:12px;font-style:normal}
.topic-specialty-hub .ts-icon{font:700 11px Georgia,serif;letter-spacing:.05em;color:var(--gc,#5c9ea7);background:color-mix(in srgb,var(--gc,#5c9ea7) 9%,transparent)}

@media(max-width:768px){
  .sidebar{width:min(86vw,300px)}
  .workspace-bar{left:0;height:64px;padding:0 16px 0 72px}
  .workspace-bar>div{gap:0}
  .workspace-bar>div>span{display:none}
  .workspace-bar b{font-size:15px}
  main,main.map-full{margin-left:0}
  .mobile-menu-btn{display:grid;align-content:center;justify-content:center;gap:4px;width:46px;height:46px;border-radius:12px}
  .mobile-menu-btn span{display:block;width:19px;height:2px;border-radius:2px;background:currentColor}
  .theme-switch{min-height:42px}
  .theme-switch button{min-width:42px!important;height:34px!important}
  .map-loading{padding:76px 24px 36px}
  .ml-map-shell{width:150px;height:98px}
  .layer-nav-fab{min-height:46px}
  .quiz-entry-section .quiz-subjects,.quiz-specialty-entries{grid-template-columns:1fr}
  .quiz-entry-section .qs-item{grid-template-columns:40px 1fr auto;padding:13px}
  .qs-code{width:38px;height:38px}
  .quiz-review-entry{align-items:flex-start;flex-direction:column;gap:10px}
}