:root {
  --ink: #ecf4ff;
  --muted: #8190a5;
  --muted-2: #56657a;
  --line: rgba(156, 180, 211, .13);
  --panel: rgba(16, 29, 48, .78);
  --panel-strong: #111f33;
  --bg: #07111f;
  --cyan: #54d8e5;
  --cyan-2: #98f0ed;
  --violet: #a78bfa;
  --orange: #f6a86b;
  --green: #85e0b5;
  --shadow: 0 24px 60px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 72% -10%, rgba(63, 128, 164, .16), transparent 34rem), var(--bg); font-family: "Manrope", "Noto Sans SC", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; padding: 28px 18px 18px; border-right: 1px solid var(--line); background: rgba(5, 14, 27, .72); }
.brand-row { display: flex; gap: 12px; align-items: center; padding: 0 11px 34px; }
.brand-mark { position: relative; width: 28px; height: 28px; border: 1px solid rgba(84, 216, 229, .5); border-radius: 50%; transform: rotate(-23deg); }
.brand-mark span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.brand-mark span:nth-child(1) { left: 4px; top: 12px; }.brand-mark span:nth-child(2) { right: 4px; top: 5px; background: var(--violet); box-shadow: 0 0 14px var(--violet); }.brand-mark span:nth-child(3) { right: 6px; bottom: 4px; background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.brand-name { letter-spacing: -.07em; font-size: 22px; line-height: 20px; font-weight: 800; }.brand-caption { margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .05em; }.brand-caption span { margin-left: 3px; color: var(--cyan); font-family: "DM Mono", monospace; font-size: 9px; }
.primary-nav { display: grid; gap: 4px; margin-bottom: 34px; }.nav-item, .topic-item, .profile-row { border: 0; color: var(--muted); background: transparent; text-align: left; }.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; }.nav-item:hover, .nav-item.active { color: var(--ink); background: rgba(115, 145, 182, .11); }.nav-icon { width: 17px; color: var(--cyan); font-size: 17px; text-align: center; }.nav-count { margin-left: auto; padding: 2px 7px; border: 1px solid rgba(84, 216, 229, .2); border-radius: 20px; color: var(--cyan); font-family: "DM Mono", monospace; font-size: 10px; font-weight: 400; }
.sidebar-label, .section-kicker { color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }.sidebar-label { padding: 0 12px 11px; }.topic-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 10px; border-radius: 10px; }.topic-item:hover, .topic-item.active { background: rgba(115, 145, 182, .09); }.topic-copy { display: grid; gap: 3px; min-width: 0; }.topic-copy strong { overflow: hidden; color: #cbd7e7; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.topic-copy small { color: var(--muted-2); font-size: 9px; }.topic-dot, .mini-dot, .status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }.topic-dot { width: 8px; height: 8px; }.cyan, .status-dot { background: var(--cyan); box-shadow: 0 0 10px rgba(84, 216, 229, .65); }.violet { background: var(--violet); box-shadow: 0 0 10px rgba(167, 139, 250, .55); }.topic-arrow { margin-left: auto; color: var(--muted-2); font-size: 13px; }.sidebar-bottom { margin-top: auto; }.streak-card { display: flex; align-items: center; gap: 10px; margin: 0 4px 16px; padding: 12px; border: 1px solid rgba(246, 168, 107, .16); border-radius: 12px; background: linear-gradient(130deg, rgba(246, 168, 107, .1), rgba(16, 29, 48, .4)); }.streak-icon { color: var(--orange); font-size: 19px; }.streak-card strong, .streak-card small { display: block; }.streak-card strong { color: #eadfd3; font-size: 10px; }.streak-card small { margin-top: 3px; color: var(--muted-2); font-size: 9px; }.streak-flame { margin-left: auto; color: var(--orange); font-family: "DM Mono", monospace; font-size: 16px; }.profile-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 8px; border-top: 1px solid var(--line); }.avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #07111f; background: linear-gradient(135deg, var(--cyan-2), var(--cyan)); font-size: 11px; font-weight: 800; }.avatar.small { width: 30px; height: 30px; border: 0; }.profile-row strong, .profile-row small { display: block; }.profile-row strong { color: #cbd7e7; font-size: 10px; }.profile-row small { margin-top: 3px; color: var(--muted-2); font-size: 9px; }.more { margin-left: auto; color: var(--muted-2); letter-spacing: 2px; }
.topic-select { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.topic-delete { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; padding: 0; border: 1px solid transparent; border-radius: 6px; color: var(--muted-2); background: transparent; font-size: 17px; line-height: 1; opacity: 0; cursor: pointer; transition: .18s ease; }
.topic-item:hover .topic-delete, .topic-item.active .topic-delete, .topic-delete:focus-visible { opacity: 1; }
.topic-delete:hover { color: #ff9c9c; border-color: rgba(255,119,119,.25); background: rgba(255,119,119,.1); }
.main-content { min-width: 0; flex: 1; }.topbar { display: flex; align-items: center; justify-content: space-between; height: 78px; padding: 0 48px; border-bottom: 1px solid var(--line); }.breadcrumb { color: var(--muted); font-size: 11px; }.breadcrumb i { margin: 0 10px; color: var(--muted-2); font-style: normal; }.breadcrumb strong { color: #d7e2ef; font-weight: 600; }.topbar-actions { display: flex; align-items: center; gap: 15px; }.provider-pill { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(84, 216, 229, .14); border-radius: 30px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 9px; }.icon-button { position: relative; border: 0; color: var(--muted); background: transparent; font-size: 20px; }.notification-dot { position: absolute; top: 2px; right: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
.content-wrap { max-width: 1220px; margin: 0 auto; padding: 52px 48px 70px; }.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .08em; }.eyebrow-line { width: 22px; height: 1px; background: var(--cyan); }.welcome-row h1 { margin: 17px 0 13px; letter-spacing: -.065em; font-size: clamp(34px, 4vw, 50px); line-height: 1.08; font-weight: 600; }.welcome-row h1 em { color: var(--cyan-2); font-style: normal; }.welcome-copy { max-width: 410px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.focus-card { width: 230px; flex: 0 0 230px; padding: 16px 17px; border: 1px solid rgba(84, 216, 229, .15); border-radius: 13px; background: linear-gradient(145deg, rgba(84, 216, 229, .08), rgba(16, 29, 48, .68)); }.focus-top, .focus-bottom { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }.focus-time { color: #d9f7f7; font-family: "DM Mono", monospace; font-size: 17px; }.focus-time span { color: var(--cyan); }.focus-bar { height: 4px; margin: 16px 0 13px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.08); }.focus-bar span { display: block; height: 100%; border-radius: inherit; background: var(--cyan); box-shadow: 0 0 12px rgba(84,216,229,.65); }.focus-bottom button { padding: 0; border: 0; color: var(--cyan); background: transparent; font-size: 10px; }.focus-bottom button span { margin-left: 4px; }
.focus-actions { display: inline-flex; align-items: center; gap: 10px; }
.focus-reset-button { padding: 4px 7px !important; border: 1px solid rgba(145,178,213,.22) !important; border-radius: 5px; color: var(--muted-2) !important; font-size: 9px !important; }
.focus-reset-button:hover { border-color: rgba(84,216,229,.38) !important; color: var(--cyan) !important; background: rgba(84,216,229,.07) !important; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 43px; }.stat-card { min-height: 130px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 12px; background: rgba(15, 29, 48, .53); }.stat-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }.stat-icon { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 7px; font-size: 11px; }.cyan-bg { color: var(--cyan); background: rgba(84,216,229,.12); }.violet-bg { color: var(--violet); background: rgba(167,139,250,.12); }.orange-bg { color: var(--orange); background: rgba(246,168,107,.12); }.green-bg { color: var(--green); background: rgba(133,224,181,.12); }.stat-value { margin-top: 16px; color: #f0f7ff; letter-spacing: -.05em; font-family: "DM Mono", monospace; font-size: 30px; }.stat-value span { color: var(--muted-2); font-size: 12px; letter-spacing: 0; }.stat-meta { margin-top: 5px; color: var(--muted-2); font-size: 9px; }.trend-up { color: var(--green); }
.create-card { display: flex; justify-content: space-between; gap: 35px; margin-top: 46px; padding: 25px 27px; border: 1px solid rgba(84, 216, 229, .16); border-radius: 16px; background: radial-gradient(circle at 82% 0%, rgba(84,216,229,.1), transparent 45%), rgba(14, 29, 48, .62); box-shadow: var(--shadow); }.create-copy { min-width: 260px; }.create-copy .section-kicker { color: var(--cyan); }.create-copy h2 { margin: 9px 0 6px; font-size: 18px; letter-spacing: -.04em; }.create-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }.create-form { flex: 1; max-width: 590px; }.topic-input-wrap { display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid rgba(145, 178, 213, .2); border-radius: 9px; background: rgba(6, 16, 29, .6); }.search-symbol { color: var(--cyan); font-size: 22px; transform: rotate(-18deg); }.topic-input-wrap input { width: 100%; padding: 13px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.topic-input-wrap input::placeholder { color: var(--muted-2); }.form-row { display: flex; align-items: flex-end; gap: 9px; margin-top: 10px; }.form-row label { flex: 1; }.form-row label span { display: block; margin: 0 0 5px 2px; color: var(--muted-2); font-size: 9px; }.form-row select { width: 100%; padding: 10px; border: 1px solid rgba(145, 178, 213, .16); border-radius: 8px; outline: 0; color: var(--muted); background: rgba(6, 16, 29, .7); font-size: 10px; }.primary-button { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border: 0; border-radius: 8px; color: #06121f; background: var(--cyan); box-shadow: 0 7px 24px rgba(84,216,229,.18); font-size: 10px; font-weight: 800; white-space: nowrap; }.primary-button:hover { filter: brightness(1.07); transform: translateY(-1px); }.button-spark { font-size: 12px; }
.path-section { margin-top: 54px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.section-heading h2 { margin: 8px 0 0; letter-spacing: -.045em; font-size: 22px; }.heading-tag { display: inline-block; margin-left: 7px; padding: 4px 7px; border-radius: 5px; color: var(--cyan); background: rgba(84,216,229,.1); vertical-align: middle; font-family: "DM Mono", monospace; font-size: 8px; font-weight: 400; letter-spacing: .02em; }.section-actions { display: flex; gap: 8px; }.ghost-button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: rgba(11, 23, 39, .55); font-size: 9px; }.ghost-button:hover { color: var(--ink); border-color: rgba(84,216,229,.3); }.path-meta { display: flex; align-items: center; gap: 19px; margin-top: 13px; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 9px; }.path-meta .mini-dot { margin-right: 4px; }.green { background: var(--green); box-shadow: 0 0 8px rgba(133,224,181,.55); }.path-date { margin-left: auto; }.filter-row { display: flex; gap: 6px; margin-top: 25px; }.filter { padding: 6px 9px; border: 0; border-radius: 6px; color: var(--muted-2); background: transparent; font-family: "DM Mono", monospace; font-size: 9px; }.filter span { margin-left: 4px; color: var(--muted-2); }.filter.active, .filter:hover { color: var(--cyan); background: rgba(84,216,229,.09); }.filter.active span { color: var(--cyan); }
.tree-board { position: relative; min-height: 417px; margin-top: 14px; padding: 24px 24px 32px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(130deg, rgba(13, 29, 47, .85), rgba(9, 20, 35, .8)); }.tree-board::before { position: absolute; inset: 0; opacity: .33; background-image: linear-gradient(rgba(126,166,205,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(126,166,205,.08) 1px, transparent 1px); background-size: 28px 28px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 88%); }.tree-board::after { position: absolute; right: 15%; bottom: -35%; width: 480px; height: 340px; border-radius: 50%; background: rgba(84,216,229,.04); filter: blur(40px); content: ""; }.tree-content { position: relative; z-index: 1; }.phase-row { display: flex; align-items: stretch; gap: 12px; min-height: 112px; }.phase-label { display: flex; width: 88px; flex: 0 0 88px; flex-direction: column; align-items: flex-start; padding-top: 8px; }.phase-number { color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 9px; }.phase-name { margin-top: 5px; color: #c9d5e4; font-size: 10px; font-weight: 700; }.phase-line { position: relative; width: 1px; flex: 1; margin: 13px 0 0 4px; background: linear-gradient(var(--cyan), rgba(84,216,229,0)); }.phase-line::after { position: absolute; top: -2px; left: -3px; width: 7px; height: 7px; border: 1px solid var(--cyan); border-radius: 50%; background: var(--panel-strong); content: ""; }.phase-row:last-child .phase-line { display: none; }.nodes-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding-top: 2px; }.skill-node { position: relative; width: 180px; min-height: 94px; padding: 13px 13px 12px; border: 1px solid rgba(139, 168, 202, .16); border-radius: 10px; color: var(--ink); background: rgba(17, 33, 54, .88); text-align: left; transition: .2s ease; }.skill-node:hover { border-color: rgba(84,216,229,.55); background: rgba(23, 48, 71, .95); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }.skill-node.done { border-color: rgba(133,224,181,.28); }.skill-node.doing { border-color: rgba(84,216,229,.45); }.node-status { display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; }.node-status .check { color: var(--green); font-size: 12px; }.node-title { display: block; margin-top: 11px; color: #dce8f7; font-size: 11px; font-weight: 700; line-height: 1.45; }.node-description { display: block; display: -webkit-box; max-height: 29px; margin-top: 7px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.node-progress { height: 3px; margin-top: 11px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.08); }.node-progress span { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }.node-progress.done span { background: var(--green); }.node-meta { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; }.node-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
.empty-tree { position: relative; z-index: 1; display: grid; place-items: center; min-height: 250px; color: var(--muted); text-align: center; }.empty-tree div { color: var(--cyan); font-size: 28px; }.empty-tree p { margin: 8px 0 14px; font-size: 11px; }
.hidden { display: none !important; }.feynman-view { min-height: calc(100vh - 78px); padding: 48px max(24px, 8vw) 70px; }.feynman-shell { max-width: 880px; margin: 0 auto; }.feynman-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 38px; }.back-button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 11px; }.back-button:hover { color: var(--ink); }.session-label { color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .1em; }.session-progress { width: 190px; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.08); }.session-progress span { display: block; height: 100%; border-radius: inherit; background: var(--cyan); transition: width .3s ease; }.feynman-intro { margin-bottom: 34px; }.feynman-intro .section-kicker { color: var(--cyan); }.feynman-intro h2 { max-width: 650px; margin: 10px 0 11px; letter-spacing: -.055em; font-size: clamp(25px, 4vw, 42px); line-height: 1.14; }.feynman-intro p { max-width: 590px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.question-card { padding: 28px 31px 25px; border: 1px solid rgba(84,216,229,.18); border-radius: 15px; background: linear-gradient(145deg, rgba(18, 40, 59, .94), rgba(11, 25, 42, .9)); box-shadow: var(--shadow); }.question-index { color: var(--cyan); font-family: "DM Mono", monospace; font-size: 10px; }.question-text { margin: 15px 0 22px; color: #f0f7ff; font-size: 20px; font-weight: 700; line-height: 1.45; }.answer-box { width: 100%; min-height: 145px; resize: vertical; padding: 14px; border: 1px solid rgba(145,178,213,.18); border-radius: 9px; outline: 0; color: var(--ink); background: rgba(4, 14, 27, .63); font-size: 12px; line-height: 1.7; }.answer-box:focus { border-color: rgba(84,216,229,.55); box-shadow: 0 0 0 3px rgba(84,216,229,.08); }.question-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }.autosave { color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 9px; }.question-actions { display: flex; gap: 8px; }.result-card { padding: 30px; border: 1px solid rgba(133,224,181,.25); border-radius: 16px; background: radial-gradient(circle at 80% 0%, rgba(133,224,181,.1), transparent 44%), rgba(13, 31, 46, .84); }.result-score { display: flex; align-items: center; gap: 18px; }.score-ring { display: grid; place-items: center; width: 90px; height: 90px; border: 8px solid var(--green); border-left-color: rgba(133,224,181,.22); border-radius: 50%; color: var(--green); font-family: "DM Mono", monospace; font-size: 23px; }.result-score h2 { margin: 0 0 6px; font-size: 24px; }.result-score p { margin: 0; color: var(--muted); font-size: 11px; }.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 28px; }.feedback-block { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7, 17, 31, .42); }.feedback-block h3 { margin: 0 0 10px; font-size: 11px; }.feedback-block p, .feedback-block li { color: var(--muted); font-size: 10px; line-height: 1.65; }.feedback-block ul { margin: 0; padding-left: 17px; }.review-history { margin-top: 25px; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 9px; }
.drawer-overlay { position: fixed; z-index: 10; inset: 0; display: flex; justify-content: flex-end; background: rgba(1, 8, 16, .63); backdrop-filter: blur(4px); }.skill-drawer { width: min(420px, 100%); height: 100%; overflow: auto; padding: 28px; border-left: 1px solid var(--line); background: #0c1b2d; box-shadow: -20px 0 50px rgba(0,0,0,.25); animation: slide-in .22s ease; }.drawer-close { float: right; border: 0; color: var(--muted); background: transparent; font-size: 20px; }.drawer-kicker { margin-top: 30px; color: var(--cyan); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .12em; }.skill-drawer h2 { max-width: 300px; margin: 9px 0 9px; letter-spacing: -.05em; font-size: 26px; }.drawer-summary { color: var(--muted); font-size: 11px; line-height: 1.7; }.drawer-stats { display: flex; gap: 8px; margin: 20px 0; }.drawer-stat { flex: 1; padding: 11px; border: 1px solid var(--line); border-radius: 8px; }.drawer-stat span, .drawer-stat strong { display: block; }.drawer-stat span { color: var(--muted-2); font-size: 9px; }.drawer-stat strong { margin-top: 5px; color: #dbe8f6; font-family: "DM Mono", monospace; font-size: 12px; }.drawer-section { margin-top: 23px; }.drawer-section h3 { margin: 0 0 11px; font-size: 11px; }.resource-list { display: grid; gap: 8px; }.resource-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8, 18, 31, .45); }.resource-icon { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 6px; color: var(--cyan); background: rgba(84,216,229,.1); font-size: 11px; }.resource-item strong { display: block; color: #d2deec; font-size: 10px; line-height: 1.4; }.resource-item small { display: block; margin-top: 4px; color: var(--muted-2); font-size: 9px; line-height: 1.5; }.practice-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.practice-list li { position: relative; padding-left: 18px; color: var(--muted); font-size: 10px; line-height: 1.6; }.practice-list li::before { position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border: 1px solid var(--cyan); border-radius: 50%; content: ""; }.drawer-actions { display: flex; gap: 8px; margin-top: 28px; }.drawer-actions .primary-button { flex: 1; justify-content: center; }.drawer-complete { display: flex; align-items: center; gap: 6px; color: var(--green); font-family: "DM Mono", monospace; font-size: 9px; }
.toast { position: fixed; z-index: 30; right: 28px; bottom: 24px; max-width: 320px; padding: 12px 15px; border: 1px solid rgba(84,216,229,.25); border-radius: 9px; opacity: 0; color: var(--ink); background: #12263d; box-shadow: var(--shadow); font-size: 11px; pointer-events: none; transform: translateY(10px); transition: .25s ease; }.toast.show { opacity: 1; transform: translateY(0); }
@keyframes slide-in { from { transform: translateX(20px); opacity: .3; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 1000px) { .sidebar { width: 210px; flex-basis: 210px; }.topbar { padding: 0 28px; }.content-wrap { padding-right: 28px; padding-left: 28px; }.create-card { flex-direction: column; }.create-form { max-width: none; }.skill-node { width: 162px; } }
@media (max-width: 760px) { .sidebar { display: none; }.topbar { height: 66px; padding: 0 18px; }.provider-pill { display: none; }.content-wrap { padding: 34px 18px 55px; }.welcome-row { display: block; }.welcome-row h1 { font-size: 37px; }.focus-card { width: 100%; margin-top: 25px; }.stats-grid { grid-template-columns: repeat(2, 1fr); margin-top: 27px; }.stat-card { min-height: 112px; }.stat-value { margin-top: 12px; font-size: 25px; }.create-card { margin-top: 28px; padding: 20px; }.form-row { flex-wrap: wrap; }.form-row label { min-width: calc(50% - 5px); }.primary-button { width: 100%; justify-content: center; }.section-heading { display: block; }.section-actions { margin-top: 14px; }.path-meta { flex-wrap: wrap; gap: 9px 14px; }.path-date { width: 100%; margin-left: 0; }.tree-board { padding: 20px 13px; overflow-x: auto; }.tree-content { min-width: 620px; }.feynman-view { padding: 30px 18px 55px; }.feynman-top { margin-bottom: 28px; }.session-progress { width: 100px; }.question-card, .result-card { padding: 22px 18px; }.question-text { font-size: 17px; }.question-foot { align-items: flex-end; flex-direction: column; gap: 12px; }.result-grid { grid-template-columns: 1fr; }.skill-drawer { padding: 23px 20px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Authentication surface */
.auth-screen { position: relative; display: grid; place-items: center; min-height: 100vh; overflow: hidden; padding: 30px 18px 60px; background: radial-gradient(circle at 50% 0%, rgba(84, 216, 229, .11), transparent 34rem), #07111f; }
.auth-glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(70px); pointer-events: none; }.auth-glow-one { top: -250px; left: -100px; background: rgba(84, 216, 229, .12); }.auth-glow-two { right: -150px; bottom: -220px; background: rgba(167, 139, 250, .12); }
.auth-card { position: relative; z-index: 1; width: min(430px, 100%); padding: 31px 32px 27px; border: 1px solid rgba(145, 178, 213, .18); border-radius: 19px; background: rgba(12, 29, 48, .84); box-shadow: 0 30px 90px rgba(0, 0, 0, .35); backdrop-filter: blur(16px); }.auth-brand { padding: 0 0 27px; }.auth-heading .section-kicker { color: var(--cyan); }.auth-heading h1 { margin: 11px 0 9px; color: #f0f7ff; letter-spacing: -.055em; font-size: 27px; line-height: 1.2; }.auth-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 28px 0 20px; padding: 3px; border-radius: 9px; background: rgba(4, 14, 27, .6); }.auth-tab { padding: 9px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 10px; }.auth-tab:hover, .auth-tab.active { color: var(--ink); background: rgba(84, 216, 229, .12); }.auth-form { display: grid; gap: 12px; }.auth-form label { color: var(--muted); font-size: 10px; }.auth-form input { width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid rgba(145, 178, 213, .18); border-radius: 8px; outline: 0; color: var(--ink); background: rgba(4, 14, 27, .64); font-size: 11px; }.auth-form input:focus { border-color: rgba(84, 216, 229, .65); box-shadow: 0 0 0 3px rgba(84, 216, 229, .08); }.auth-form input::placeholder { color: var(--muted-2); }.password-wrap { position: relative; }.password-wrap input { padding-right: 50px; }.password-toggle { position: absolute; top: 6px; right: 7px; padding: 6px; border: 0; color: var(--muted-2); background: transparent; font-size: 9px; }.password-toggle:hover { color: var(--cyan); }.auth-submit { width: 100%; justify-content: center; margin-top: 3px; }.auth-error { min-height: 14px; color: #f3a58e; font-size: 10px; line-height: 1.45; }.auth-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 0; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; }.auth-note .status-dot { width: 5px; height: 5px; }.auth-foot { position: absolute; bottom: 20px; z-index: 1; margin: 0; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .04em; }
@media (max-width: 500px) { .auth-card { padding: 26px 21px 23px; }.auth-heading h1 { font-size: 24px; } }

/* Light theme */
body.light-mode {
  --ink: #172b42;
  --muted: #607287;
  --muted-2: #8b9bad;
  --line: rgba(76, 111, 143, .16);
  --panel: rgba(255, 255, 255, .82);
  --panel-strong: #ffffff;
  --bg: #eef4f8;
  --cyan: #078f9e;
  --cyan-2: #087887;
  --violet: #7656d6;
  --orange: #c77735;
  --green: #228a61;
  background: radial-gradient(circle at 72% -10%, rgba(84, 216, 229, .18), transparent 34rem), var(--bg);
}
body.light-mode .app-shell { background: transparent; }
body.light-mode .sidebar { border-color: var(--line); background: rgba(249, 252, 254, .88); }
body.light-mode .topbar { border-color: var(--line); background: rgba(247, 251, 253, .78); }
body.light-mode .nav-item:hover, body.light-mode .nav-item.active, body.light-mode .topic-item:hover, body.light-mode .topic-item.active { background: rgba(40, 111, 139, .08); }
body.light-mode .nav-item, body.light-mode .topic-copy strong, body.light-mode .profile-row strong { color: #29405b; }
body.light-mode .topic-delete { color: #6c8294; }
body.light-mode .topic-delete:hover { color: #b12e48; border-color: rgba(178,42,62,.25); background: rgba(178,42,62,.08); }
body.light-mode .brand-name, body.light-mode .welcome-row h1, body.light-mode .section-heading h2, body.light-mode .create-copy h2, body.light-mode .stat-value, body.light-mode .node-title { color: #152b43; }
body.light-mode .welcome-row h1 em { color: #078f9e; }
body.light-mode .stat-card, body.light-mode .create-card { border-color: var(--line); background: rgba(255, 255, 255, .72); box-shadow: 0 18px 45px rgba(55, 91, 118, .08); }
body.light-mode .focus-card { border-color: rgba(8, 143, 158, .22); background: linear-gradient(145deg, rgba(84, 216, 229, .12), rgba(255, 255, 255, .78)); }
body.light-mode .topic-input-wrap, body.light-mode .form-row select, body.light-mode .auth-form input { border-color: rgba(76, 111, 143, .24); color: #203953; background: rgba(255, 255, 255, .82); }
body.light-mode .tree-board { border-color: var(--line); background: linear-gradient(130deg, rgba(255, 255, 255, .9), rgba(242, 248, 251, .9)); }
body.light-mode .tree-board::before { opacity: .48; background-image: linear-gradient(rgba(82, 127, 157, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 127, 157, .1) 1px, transparent 1px); }
body.light-mode .skill-node { border-color: rgba(76, 111, 143, .2); color: #172b42; background: rgba(255, 255, 255, .9); box-shadow: 0 8px 18px rgba(55, 91, 118, .05); }
body.light-mode .skill-node:hover { border-color: rgba(8, 143, 158, .5); background: #ffffff; box-shadow: 0 12px 28px rgba(55, 91, 118, .11); }
body.light-mode .skill-node.done { border-color: rgba(34, 138, 97, .3); }
body.light-mode .skill-node.doing { border-color: rgba(8, 143, 158, .4); }
body.light-mode .drawer-overlay { background: rgba(18, 39, 58, .28); }
body.light-mode .skill-drawer { border-color: var(--line); background: #f7fbfd; box-shadow: -20px 0 50px rgba(55, 91, 118, .16); }
body.light-mode .drawer-stat, body.light-mode .resource-item, body.light-mode .feedback-block { border-color: var(--line); background: rgba(255, 255, 255, .74); }
body.light-mode .drawer-stat strong, body.light-mode .resource-item strong, body.light-mode .question-text, body.light-mode .result-score h2 { color: #172b42; }
body.light-mode .feynman-view { background: transparent; }
body.light-mode .question-card, body.light-mode .result-card { border-color: rgba(8, 143, 158, .22); background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(238, 248, 250, .92)); box-shadow: 0 24px 60px rgba(55, 91, 118, .1); }
body.light-mode .answer-box { border-color: rgba(76, 111, 143, .24); color: #172b42; background: rgba(255, 255, 255, .86); }
body.light-mode .auth-screen { background: radial-gradient(circle at 50% 0%, rgba(84, 216, 229, .2), transparent 34rem), #eef4f8; }
body.light-mode .auth-card { border-color: rgba(76, 111, 143, .2); background: rgba(255, 255, 255, .84); box-shadow: 0 30px 90px rgba(55, 91, 118, .17); }
body.light-mode .auth-form input { background: rgba(247, 251, 253, .95); }
body.light-mode .auth-tabs { background: rgba(223, 236, 242, .8); }
body.light-mode .auth-tab:hover, body.light-mode .auth-tab.active { background: rgba(8, 143, 158, .12); }
body.light-mode .theme-toggle { color: var(--orange); }
body.light-mode .focus-time { color: #0f4353; }
body.light-mode .focus-bar { background: rgba(31, 91, 112, .14); }
body.light-mode .focus-bottom button { color: #087887; }
body.light-mode .toast { border-color: rgba(8, 143, 158, .35); color: #ecfbff; background: #0b4d5c; }
.theme-toggle { width: 25px; height: 25px; padding: 0; border: 1px solid transparent; border-radius: 7px; font-size: 17px; line-height: 1; }.theme-toggle:hover { border-color: var(--line); background: rgba(115, 145, 182, .1); }

/* Keep secondary actions legible in both themes. */
.ghost-button { border-color: rgba(145,178,213,.3); color: #c8d8e8; background: rgba(26,48,72,.92); }.ghost-button:hover { border-color: rgba(84,216,229,.58); color: #f0f8ff; background: rgba(32,62,87,.98); }
body.light-mode .ghost-button { border-color: #aec3d1; color: #294760; background: #e2edf3; box-shadow: 0 2px 7px rgba(55,91,118,.08); }.light-mode .ghost-button:hover { border-color: #078f9e; color: #12374d; background: #d4e8ee; }

/* AI-generated multi-level skill tree */
.tree-board { overflow-x: auto; overflow-y: hidden; }
.hierarchy-board { position: relative; min-width: 1080px; padding: 3px 0 16px; }
.tree-root-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }.tree-root-node { position: relative; z-index: 2; display: grid; min-width: 245px; padding: 16px 23px; border: 1px solid rgba(84, 216, 229, .48); border-radius: 13px; color: var(--ink); background: linear-gradient(140deg, rgba(84,216,229,.17), rgba(19, 43, 66, .94)); box-shadow: 0 0 0 5px rgba(84,216,229,.045), 0 16px 32px rgba(0,0,0,.17); text-align: left; }.root-kicker { color: var(--cyan-2); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .12em; }.tree-root-node strong { margin-top: 6px; color: #edfaff; font-size: 18px; letter-spacing: -.04em; }.tree-root-node small { margin-top: 5px; color: rgba(220, 244, 251, .68); font-size: 9px; }.root-stem { width: 1px; height: 22px; background: linear-gradient(var(--cyan), rgba(84,216,229,.2)); }.tree-branches { position: relative; display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 12px; }.tree-branches::before { position: absolute; top: 0; right: 10%; left: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(84,216,229,.58), transparent); content: ""; }.tree-branch { position: relative; padding-top: 16px; }.tree-branch::before { position: absolute; top: 0; left: 50%; width: 1px; height: 16px; background: rgba(84,216,229,.55); content: ""; }.branch-index { margin: 0 0 7px 4px; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .12em; }.branch-header { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 56px; padding: 11px 10px; border: 1px solid rgba(84,216,229,.24); border-radius: 10px; color: var(--ink); background: rgba(17, 37, 58, .92); text-align: left; }.branch-header:hover, .branch-header.doing { border-color: rgba(84,216,229,.65); background: rgba(23, 55, 76, .96); }.branch-orbit { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border: 1px solid rgba(84,216,229,.38); border-radius: 50%; color: var(--cyan); font-size: 11px; }.branch-header strong, .branch-header small { display: block; }.branch-header strong { color: #e2f5fa; font-size: 11px; }.branch-header small { margin-top: 4px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 8px; }.branch-chevron { margin-left: auto; color: var(--cyan); font-size: 15px; }.branch-stem { width: 1px; height: 13px; margin: 0 auto; background: rgba(84,216,229,.45); }.branch-children { display: grid; gap: 7px; }.nested-skill { position: relative; padding-left: 11px; }.nested-skill::before { position: absolute; top: -7px; bottom: 0; left: 3px; width: 1px; background: rgba(126, 166, 205, .24); content: ""; }.nested-skill:first-child::before { top: 0; }.nested-skill:last-child::before { bottom: 50%; }.nested-skill::after { position: absolute; top: 50%; left: 3px; width: 8px; height: 1px; background: rgba(126, 166, 205, .3); content: ""; }.nested-skill > .nested-children { display: grid; gap: 7px; margin-top: 7px; }.tree-node { width: 100%; min-height: 82px; padding: 10px 10px 9px; }.tree-node .node-title { margin-top: 7px; font-size: 10px; }.tree-node .node-description { margin-top: 4px; font-size: 8px; }.tree-node .node-meta { margin-top: 7px; font-size: 7px; }.branch-empty { padding: 14px 10px; border: 1px dashed rgba(126,166,205,.2); border-radius: 8px; color: var(--muted-2); font-size: 9px; text-align: center; }
body.light-mode .tree-root-node { border-color: rgba(8,143,158,.42); background: linear-gradient(140deg, rgba(84,216,229,.15), rgba(255,255,255,.95)); box-shadow: 0 0 0 5px rgba(8,143,158,.05), 0 16px 32px rgba(55,91,118,.1); }.light-mode .tree-root-node strong { color: #17354b; }.light-mode .tree-root-node small { color: #607287; }.light-mode .branch-header { border-color: rgba(76,111,143,.22); background: rgba(255,255,255,.9); }.light-mode .branch-header:hover, .light-mode .branch-header.doing { border-color: rgba(8,143,158,.5); background: #ffffff; }.light-mode .branch-header strong { color: #203953; }
@media (max-width: 760px) { .hierarchy-board { min-width: 1080px; } }

/* Centered skill detail modal: keeps the full learning checklist readable. */
.drawer-overlay {
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 48px);
  overflow: auto;
}
.skill-drawer {
  position: relative;
  width: min(820px, 100%);
  max-height: min(88vh, 920px);
  height: auto;
  overflow: auto;
  padding: 32px 34px 36px;
  border: 1px solid rgba(84, 216, 229, .25);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42), 0 0 0 1px rgba(84, 216, 229, .05);
  animation: modal-in .22s ease;
}
.drawer-close {
  position: absolute;
  top: 17px;
  right: 19px;
  float: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(115, 145, 182, .08);
  font-size: 20px;
  line-height: 1;
}
.drawer-close:hover { color: var(--ink); border-color: rgba(84, 216, 229, .48); background: rgba(84, 216, 229, .12); }
.drawer-kicker { margin-top: 0; padding-right: 42px; }
.skill-drawer h2 { max-width: none; padding-right: 42px; }
@keyframes modal-in { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
body.light-mode .skill-drawer { border-color: rgba(8, 143, 158, .28); box-shadow: 0 30px 90px rgba(55, 91, 118, .22), 0 0 0 1px rgba(8, 143, 158, .04); }
@media (max-width: 760px) {
  .drawer-overlay { padding: 12px; }
  .skill-drawer { width: 100%; max-height: 92vh; padding: 27px 20px 28px; border-radius: 16px; }
  .drawer-close { top: 12px; right: 12px; }
}

/* Skill learning checklist */
.learning-drawer { padding-bottom: 40px; }.materials-progress-card { margin-top: 20px; padding: 13px; border: 1px solid rgba(84,216,229,.2); border-radius: 10px; background: rgba(84,216,229,.06); }.materials-progress-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }.materials-progress-top strong { color: var(--cyan); font-family: "DM Mono", monospace; font-size: 10px; }.materials-progress { height: 4px; margin-top: 10px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.09); }.materials-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--cyan); box-shadow: 0 0 10px rgba(84,216,229,.55); transition: width .25s ease; }.materials-gate { margin: 9px 0 0; color: var(--orange); font-family: "DM Mono", monospace; font-size: 8px; line-height: 1.5; }.materials-gate.ready { color: var(--green); }.material-section { margin-top: 23px; }.material-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }.material-type { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; font-size: 11px; }.book-type { color: var(--violet); background: rgba(167,139,250,.12); }.web-type { color: var(--cyan); background: rgba(84,216,229,.12); }.practice-type { color: var(--orange); background: rgba(246,168,107,.12); }.material-section-heading h3 { margin: 0; color: #dce8f7; font-size: 11px; }.material-section-heading small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 8px; }.material-section-heading b { margin-left: auto; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 9px; font-weight: 400; }.material-list { display: grid; gap: 7px; }.material-row { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8,18,31,.34); cursor: pointer; transition: .18s ease; }.material-row:hover { border-color: rgba(84,216,229,.35); background: rgba(84,216,229,.06); }.material-row.complete { border-color: rgba(133,224,181,.3); background: rgba(133,224,181,.06); }.material-row > input { position: absolute; width: 1px; height: 1px; opacity: 0; }.material-checkbox { display: grid; place-items: center; width: 17px; height: 17px; flex: 0 0 auto; border: 1px solid rgba(145,178,213,.38); border-radius: 5px; color: transparent; font-size: 11px; }.material-row.complete .material-checkbox { border-color: var(--green); color: var(--green); background: rgba(133,224,181,.12); }.material-content { min-width: 0; }.material-content strong, .material-content small { display: block; }.material-content strong { color: #d2deec; font-size: 10px; line-height: 1.45; }.material-row.complete .material-content strong { color: var(--green); }.material-content small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }.material-url { display: block; overflow: hidden; color: var(--cyan); font-family: "DM Mono", monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.material-link { display: inline-block; margin-top: 6px; color: var(--cyan); font-size: 9px; text-decoration: none; }.material-link:hover { text-decoration: underline; }.drawer-actions .primary-button:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(.2); box-shadow: none; }
body.light-mode .materials-progress-card { border-color: rgba(8,143,158,.22); background: rgba(84,216,229,.08); }.light-mode .material-row { border-color: var(--line); background: rgba(255,255,255,.74); }.light-mode .material-row:hover { background: rgba(84,216,229,.1); }.light-mode .material-section-heading h3, .light-mode .material-content strong { color: #203953; }.light-mode .material-row.complete .material-content strong { color: var(--green); }.light-mode .material-checkbox { border-color: rgba(76,111,143,.38); }
.material-reading-focus { display: block; margin-top: 5px; color: var(--muted); line-height: 1.55; }
.material-reading-warning { display: block; margin-top: 5px; color: var(--orange); font-size: 9px; line-height: 1.55; }
body.light-mode .material-reading-warning { color: #a14f16; }

/* List view */
.skill-list-view { position: relative; z-index: 1; padding: 2px; }.list-view-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 17px; padding: 0 2px 12px; border-bottom: 1px solid var(--line); }.list-view-intro h3 { margin: 7px 0 5px; color: #e5f1fc; letter-spacing: -.04em; font-size: 17px; }.list-view-intro p { margin: 0; color: var(--muted); font-size: 10px; }.list-view-count { color: var(--cyan); font-family: "DM Mono", monospace; font-size: 10px; }.list-group { margin-top: 13px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: rgba(10,22,37,.45); }.list-group-heading { display: flex; align-items: center; gap: 9px; padding: 12px 13px; border-bottom: 1px solid var(--line); background: rgba(84,216,229,.055); }.list-group-heading .branch-orbit { width: 22px; height: 22px; }.list-group-heading strong, .list-group-heading small { display: block; }.list-group-heading strong { color: #dcebf7; font-size: 11px; }.list-group-heading small { margin-top: 3px; color: var(--muted); font-size: 8px; }.list-group-index { margin-left: auto; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 9px; }.list-skill-items { display: grid; }.list-skill-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto 18px; align-items: center; gap: 9px; width: 100%; padding: 10px 13px 10px calc(13px + var(--row-indent, 0px)); border: 0; border-bottom: 1px solid rgba(145,178,213,.08); color: var(--ink); background: transparent; text-align: left; }.list-skill-row:last-child { border-bottom: 0; }.list-skill-row:hover { background: rgba(84,216,229,.08); }.list-status { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(145,178,213,.3); border-radius: 5px; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; }.list-skill-row.doing .list-status { color: var(--cyan); border-color: rgba(84,216,229,.45); }.list-skill-row.done .list-status { color: var(--green); border-color: rgba(133,224,181,.42); }.list-skill-copy { min-width: 0; }.list-skill-copy strong, .list-skill-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.list-skill-copy strong { color: #dce8f7; font-size: 10px; }.list-skill-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }.list-skill-meta { color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; white-space: nowrap; }.list-arrow { color: var(--muted-2); font-size: 13px; }.list-skill-row:hover .list-arrow { color: var(--cyan); }
body.light-mode .list-view-intro h3, body.light-mode .list-group-heading strong, body.light-mode .list-skill-copy strong { color: #203953; }.light-mode .list-group { background: rgba(255,255,255,.62); }.light-mode .list-group-heading { background: rgba(84,216,229,.1); }.light-mode .list-skill-row:hover { background: rgba(84,216,229,.12); }.light-mode .list-skill-row { border-bottom-color: rgba(76,111,143,.12); }

/* Review queue and learning log views */
.aux-view { min-height: calc(100vh - 78px); }
.aux-wrap { max-width: 1220px; margin: 0 auto; padding: 52px 48px 70px; }
.aux-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.aux-heading h1 { margin: 8px 0 9px; color: var(--ink); letter-spacing: -.055em; font-size: 34px; }
.aux-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.aux-count { color: var(--cyan); font-family: "DM Mono", monospace; font-size: 10px; }
.review-queue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.review-card { display: block; width: 100%; min-height: 160px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(15, 29, 48, .53); text-align: left; transition: .18s ease; }
.review-card:hover { border-color: rgba(84, 216, 229, .5); background: rgba(23, 48, 71, .85); transform: translateY(-2px); }
.review-card-top, .review-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-order, .review-due { font-family: "DM Mono", monospace; font-size: 8px; }
.review-order { color: var(--cyan); }.review-due { color: var(--orange); }
.review-card strong { display: block; margin-top: 18px; color: #e5f1fc; font-size: 14px; }
.review-card p { min-height: 33px; margin: 7px 0 20px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.review-card-bottom { padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; }
.review-card-bottom span:last-child { color: var(--cyan); }
.review-card-actions { display: flex; gap: 7px; margin-top: 15px; }.review-card-actions button { min-height: 30px; }.review-card-open { flex: 0 0 auto; padding: 0 10px; font-size: 9px; }.review-card-feynman { flex: 1; justify-content: center; height: 30px; padding: 0 10px; font-size: 9px; }.review-card.upcoming { opacity: .82; }.review-card.upcoming:hover { opacity: 1; }.review-section + .review-section { margin-top: 32px; }.aux-subheading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 13px; }.aux-subheading h2 { margin: 0 0 5px; color: var(--ink); letter-spacing: -.04em; font-size: 17px; }.aux-subheading p { margin: 0; color: var(--muted); font-size: 10px; }.aux-subheading > span { color: var(--cyan); font-family: "DM Mono", monospace; font-size: 9px; }.review-empty { min-height: 245px; margin-top: 8px; }.review-empty p { max-width: 390px; line-height: 1.6; }
.log-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 25px; }
.log-summary > div { padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: rgba(15, 29, 48, .53); }
.log-summary span, .log-summary strong { display: block; }.log-summary span { color: var(--muted); font-size: 10px; }.log-summary strong { margin-top: 12px; color: #e5f1fc; font-family: "DM Mono", monospace; font-size: 23px; }
.log-timeline { display: grid; gap: 8px; }.log-entry { display: grid; grid-template-columns: 12px 105px minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: rgba(15, 29, 48, .53); text-align: left; transition: .18s ease; }.log-entry:hover { border-color: rgba(84, 216, 229, .5); background: rgba(23, 48, 71, .68); }.log-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(133, 224, 181, .55); }.log-date { color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 9px; }.log-copy strong, .log-copy small { display: block; }.log-copy strong { color: #e1edf9; font-size: 11px; }.log-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; }.log-arrow { color: var(--muted-2); }
.aux-empty { display: grid; place-items: center; min-height: 300px; padding: 30px; border: 1px dashed var(--line); border-radius: 13px; text-align: center; }.aux-empty > div { color: var(--cyan); font-size: 28px; }.aux-empty h3 { margin: 9px 0 5px; color: var(--ink); font-size: 16px; }.aux-empty p { margin: 0; color: var(--muted); font-size: 10px; }
body.light-mode .review-card, body.light-mode .log-summary > div, body.light-mode .log-entry { border-color: var(--line); background: rgba(255, 255, 255, .75); box-shadow: 0 8px 22px rgba(55, 91, 118, .05); }
body.light-mode .review-card:hover, body.light-mode .log-entry:hover { border-color: rgba(8, 143, 158, .45); background: #fff; }
body.light-mode .review-card strong, body.light-mode .log-summary strong, body.light-mode .log-copy strong, body.light-mode .aux-subheading h2 { color: #203953; }
body.light-mode .review-card-open { border-color: #aec3d1; color: #294760; background: #e2edf3; }
@media (max-width: 760px) { .aux-wrap { padding: 34px 18px 55px; }.aux-heading { display: block; }.aux-count { display: block; margin-top: 14px; }.review-queue-grid { grid-template-columns: 1fr; }.log-summary { grid-template-columns: 1fr; }.log-entry { grid-template-columns: 12px 78px minmax(0, 1fr) 18px; }.log-date { font-size: 8px; } }

/* Reverse-goal learning and AI assessment insights */
.goal-field input { transition: border-color .18s ease, box-shadow .18s ease; }
.root-goal { display: block; overflow: hidden; color: rgba(220,244,251,.78) !important; font-size: 9px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.root-subtopics { display: block; margin-top: 6px; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; }
.node-prerequisite { display: -webkit-box; max-height: 23px; margin-top: 5px; overflow: hidden; color: var(--cyan); font-family: "DM Mono", monospace; font-size: 7px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-word; }
.skill-guidance { display: grid; gap: 8px; margin: 17px 0 19px; }.skill-insight-card { padding: 11px; border: 1px solid rgba(84,216,229,.15); border-radius: 9px; background: rgba(84,216,229,.045); }.skill-insight-card .insight-label { display: block; color: var(--cyan); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .06em; }.skill-insight-card strong { display: block; margin-top: 6px; color: #dcebf7; font-size: 10px; line-height: 1.5; }.skill-insight-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }.skill-insight-card ul { display: grid; gap: 4px; margin: 7px 0 0; padding-left: 16px; }.skill-insight-card li { color: var(--muted); font-size: 9px; line-height: 1.5; }.skill-insight-card.gap-card { border-color: rgba(246,168,107,.24); background: rgba(246,168,107,.06); }.skill-insight-card.gap-card .insight-label { color: var(--orange); }
.resource-verification { display: inline-block; margin-top: 6px; padding: 4px 8px; border-radius: 6px; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 10px; line-height: 1.35; letter-spacing: .01em; }.resource-verification.verified { color: var(--green); background: rgba(133,224,181,.1); }.resource-verification.unverified { color: var(--orange); background: rgba(246,168,107,.1); }.resource-verification.unavailable { color: #efb16f; background: rgba(239,177,111,.11); }.resource-verification.blocked { color: #ff8e8e; background: rgba(255,93,93,.12); }
.followup-card { border-color: rgba(167,139,250,.38); background: linear-gradient(145deg, rgba(46,35,73,.74), rgba(11,25,42,.92)); }.result-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }.result-meta span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 8px; }.result-meta strong { margin-left: 4px; color: var(--cyan); font-weight: 500; }.gap-feedback { border-color: rgba(246,168,107,.25); }.gap-feedback h3 { color: var(--orange); }
body.light-mode .goal-field input { border-color: rgba(76,111,143,.24); color: #203953; background: rgba(255,255,255,.82); }.light-mode .root-goal { color: #607287 !important; }.light-mode .skill-insight-card { border-color: rgba(8,143,158,.18); background: rgba(84,216,229,.07); }.light-mode .skill-insight-card strong { color: #203953; }.light-mode .followup-card { border-color: rgba(118,86,214,.3); background: linear-gradient(145deg, rgba(242,237,255,.9), rgba(255,255,255,.94)); }.light-mode .result-meta span { border-color: var(--line); background: rgba(255,255,255,.7); }
@media (max-width: 760px) { .root-goal { max-width: 250px; }.result-meta { gap: 5px; }.skill-guidance { margin-top: 15px; } }

/* Softer, more editorial statistics */
.goal-field { display: block; margin-top: 10px; }.goal-field > span { display: block; margin: 0 0 5px 2px; color: var(--muted-2); font-size: 9px; }.goal-field input { display: block; box-sizing: border-box; width: 100%; padding: 11px 13px; border: 1px solid rgba(145,178,213,.18); border-radius: 9px; outline: 0; color: var(--ink); background: rgba(6,16,29,.6); font-size: 11px; }
.stat-value { display: flex; align-items: baseline; gap: 3px; color: #e9f5fb; font-family: "Manrope", "Noto Sans SC", sans-serif; font-size: 31px; font-variant-numeric: tabular-nums lining-nums; font-weight: 600; letter-spacing: -.075em; line-height: 1; }
.stat-value span { color: var(--muted-2); font-family: "Manrope", "Noto Sans SC", sans-serif; font-size: 12px; font-variant-numeric: normal; font-weight: 500; letter-spacing: -.02em; opacity: .82; }
body.light-mode .stat-value { color: #183a55; }
body.light-mode .stat-value span { color: #7890a4; }
@media (max-width: 760px) { .stat-value { font-size: 27px; } }

/* Improve form readability */
.create-form .topic-input-wrap input { font-size: 14px; }
.create-form .goal-field input { font-size: 14px; }
.create-form input::placeholder { color: #8fa9c0; opacity: 1; }
body.light-mode .create-form input::placeholder { color: #71879a; opacity: 1; }
.create-form .goal-field > span,
.create-form .form-row label > span { font-size: 10px; }
.create-form .form-row select { font-size: 12px; }
.create-form .primary-button { font-size: 11px; }

/* Make the streak summary readable in both themes */
.streak-card strong { color: #f3e7d9; font-size: 11px; font-weight: 700; }
.streak-card small { color: #91a6ba; font-size: 10px; }
.streak-flame { font-weight: 700; }
body.light-mode .streak-card { border-color: rgba(199,119,53,.28); background: linear-gradient(130deg, rgba(246,168,107,.18), rgba(205,214,222,.92)); }
body.light-mode .streak-card strong { color: #29405b; }
body.light-mode .streak-card small { color: #607287; }
body.light-mode .streak-flame { color: #b85c1f; }

/* Clarify learning order and branch ownership */
.hierarchy-board::before { display: block; margin: 0 auto 14px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-align: center; content: "学习顺序  主题  ↓  次主题  ↓  技能分支  ↓  实践节点"; }
.root-stem, .branch-stem { position: relative; }
.root-stem::after, .branch-stem::after { position: absolute; left: 50%; color: var(--cyan); font-size: 11px; line-height: 1; content: "↓"; transform: translateX(-50%); }
.root-stem::after { bottom: -10px; }
.branch-stem::after { bottom: -11px; }
.tree-branches { gap: 14px; align-items: start; }
.tree-branch { padding: 14px 10px 12px; border: 1px solid rgba(126,166,205,.16); border-radius: 12px; background: linear-gradient(155deg, rgba(17,37,58,.58), rgba(10,23,39,.38)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.tree-branch::before { top: -1px; height: 15px; }
.branch-index { display: flex; align-items: center; gap: 5px; margin: 0 0 8px 2px; color: var(--cyan); font-size: 8px; }
.branch-index::before { color: var(--muted-2); font-family: "Noto Sans SC", sans-serif; font-size: 8px; letter-spacing: 0; content: "次主题"; }
.branch-header { min-height: 64px; }
.branch-children { margin-top: 1px; padding: 10px 1px 0; border-top: 1px dashed rgba(126,166,205,.22); }
.nested-skill.depth-2 { margin-left: 9px; }
.nested-skill.depth-3 { margin-left: 18px; }
.nested-skill.depth-4 { margin-left: 27px; }
body.light-mode .hierarchy-board::before { color: #607287; }
body.light-mode .tree-branch { border-color: rgba(76,111,143,.2); background: linear-gradient(155deg, rgba(255,255,255,.82), rgba(239,246,249,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 18px rgba(55,91,118,.04); }
body.light-mode .branch-index { color: #078f9e; }
body.light-mode .branch-index::before { color: #6e8498; }
body.light-mode .branch-children { border-color: rgba(76,111,143,.22); }
.material-empty { padding: 11px 10px; border: 1px dashed rgba(126,166,205,.2); border-radius: 8px; color: var(--muted-2); font-size: 9px; line-height: 1.5; }
body.light-mode .material-empty { border-color: rgba(76,111,143,.22); color: #6e8498; }

/* Collapsible navigation drawer */
.sidebar { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; display: flex; transform: translateX(-105%); transition: transform .24s ease, box-shadow .24s ease; box-shadow: none; }
.sidebar.is-open { transform: translateX(0); box-shadow: 22px 0 55px rgba(0,0,0,.22); }
.sidebar-backdrop { position: fixed; z-index: 20; inset: 0; display: none; border: 0; background: rgba(1,8,16,.52); backdrop-filter: blur(3px); }
.sidebar-backdrop.show { display: block; }
.topbar-leading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sidebar-toggle { display: grid; place-items: center; gap: 4px; width: 32px; height: 32px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(11,23,39,.55); transition: .18s ease; }
.sidebar-toggle span { display: block; width: 15px; height: 1px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.sidebar-toggle:hover { color: var(--cyan); border-color: rgba(84,216,229,.42); background: rgba(84,216,229,.08); }
.sidebar-toggle.active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sidebar-toggle.active span:nth-child(2) { opacity: 0; }
.sidebar-toggle.active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.main-content { width: 100%; }
body.sidebar-open { overflow: hidden; }
body.light-mode .sidebar { background: rgba(249,252,254,.98); box-shadow: none; }
body.light-mode .sidebar.is-open { box-shadow: 22px 0 55px rgba(55,91,118,.18); }
body.light-mode .sidebar-backdrop { background: rgba(36,61,79,.22); }
body.light-mode .sidebar-toggle { border-color: rgba(76,111,143,.2); color: #607287; background: rgba(255,255,255,.78); }
body.light-mode .sidebar-toggle:hover { color: #078f9e; border-color: rgba(8,143,158,.4); background: rgba(8,143,158,.07); }
@media (max-width: 760px) { .topbar { padding: 0 18px; }.topbar-leading { gap: 10px; }.breadcrumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.sidebar { width: min(286px, 88vw); } }

/* Clearer Chinese typography for the learning tree */
.hierarchy-board,
.tree-root-node,
.tree-branch,
.branch-header,
.nested-skill,
.skill-node,
.branch-empty {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  letter-spacing: 0;
}
.hierarchy-board::before { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 11px; letter-spacing: .03em; }
.tree-root-node strong { font-size: 22px; line-height: 1.35; letter-spacing: 0; }
.tree-root-node small { font-size: 11px; line-height: 1.6; }
.root-subtopics { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 10px; letter-spacing: 0; }
.branch-index { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 10px; letter-spacing: .03em; }
.branch-index::before { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 10px; }
.branch-header strong { font-size: 14px; line-height: 1.45; }
.branch-header small { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 10px; line-height: 1.5; }
.tree-node .node-title { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.tree-node .node-description { margin-top: 6px; max-height: 34px; font-size: 10px; line-height: 1.65; }
.tree-node .node-prerequisite { max-height: 32px; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 9px; line-height: 1.55; }
.tree-node .node-meta { margin-top: 8px; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 9px; }
.branch-empty { font-size: 10px; line-height: 1.6; }
@media (max-width: 760px) {
  .tree-root-node strong { font-size: 20px; }
  .branch-header strong { font-size: 13px; }
  .tree-node .node-title { font-size: 12px; }
  .tree-node .node-description { font-size: 9.5px; }
}

/* Give the main workspace more breathing room on larger screens */
.topbar { padding-left: 64px; padding-right: 64px; }
.content-wrap { max-width: 1540px; padding: 64px 64px 92px; }
.welcome-row { gap: 60px; }
.focus-card { width: 260px; flex-basis: 260px; padding: 19px 20px; }
.stats-grid { gap: 16px; margin-top: 56px; }
.stat-card { min-height: 148px; padding: 20px 22px; }
.create-card { gap: 60px; margin-top: 56px; padding: 32px 34px; }
.create-form { max-width: 760px; }
.path-section { margin-top: 70px; }
.path-meta { margin-top: 16px; }
.filter-row { margin-top: 30px; }
.tree-board { min-height: 500px; margin-top: 18px; padding: 32px 30px 42px; }
@media (max-width: 1200px) {
  .topbar { padding-left: 36px; padding-right: 36px; }
  .content-wrap { max-width: 1280px; padding: 52px 36px 76px; }
  .welcome-row { gap: 36px; }
  .create-card { gap: 36px; padding: 28px; }
  .tree-board { padding: 28px 24px 36px; }
}
@media (max-width: 760px) {
  .topbar { padding-left: 18px; padding-right: 18px; }
  .content-wrap { padding: 36px 18px 60px; }
  .welcome-row { gap: 25px; }
  .focus-card { width: 100%; flex-basis: auto; padding: 16px 17px; }
  .stats-grid { gap: 11px; margin-top: 31px; }
  .stat-card { min-height: 120px; padding: 16px 17px; }
  .create-card { gap: 25px; margin-top: 34px; padding: 22px 20px; }
  .path-section { margin-top: 48px; }
  .tree-board { min-height: 430px; margin-top: 14px; padding: 22px 14px 30px; }
}

/* 2026 visual system — minimal, luminous, technical */
:root {
  --ink: #f1f7fb;
  --muted: #8295a8;
  --muted-2: #536779;
  --line: rgba(133, 177, 202, .14);
  --panel: rgba(12, 25, 37, .72);
  --panel-strong: #0e1c29;
  --bg: #050b13;
  --cyan: #45e5d4;
  --cyan-2: #a5fff3;
  --violet: #a795ff;
  --orange: #ffad6b;
  --green: #68e7aa;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

html { background: var(--bg); }
body {
  background:
    linear-gradient(rgba(114, 164, 190, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 164, 190, .025) 1px, transparent 1px),
    radial-gradient(circle at 78% 3%, rgba(69, 229, 212, .09), transparent 27rem),
    radial-gradient(circle at 18% 45%, rgba(167, 149, 255, .055), transparent 32rem),
    var(--bg);
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
}

body::before {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 9%;
  width: min(42vw, 620px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(69,229,212,.68), transparent);
  box-shadow: 0 0 32px rgba(69,229,212,.32);
  content: "";
}

.topbar {
  position: sticky;
  z-index: 15;
  top: 0;
  height: 72px;
  border-color: rgba(133,177,202,.11);
  background: rgba(5,11,19,.72);
  backdrop-filter: blur(22px) saturate(130%);
}
.breadcrumb { font-size: 12px; }
.breadcrumb strong { color: var(--ink); }
.provider-pill { padding: 7px 11px; border-color: rgba(69,229,212,.18); background: rgba(69,229,212,.045); }
.sidebar-toggle { width: 36px; height: 36px; border-radius: 10px; background: rgba(13,27,40,.72); }
.icon-button { transition: color .18s ease, transform .18s ease; }
.icon-button:hover { color: var(--cyan); transform: translateY(-1px); }

.content-wrap { max-width: 1600px; }
.welcome-row { position: relative; align-items: center; padding: 18px 0 8px; }
.eyebrow, .section-kicker { color: var(--cyan); }
.eyebrow-line { width: 34px; box-shadow: 0 0 12px rgba(69,229,212,.55); }
.welcome-row h1 {
  max-width: 760px;
  margin: 20px 0 16px;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 600;
  letter-spacing: -.075em;
  line-height: 1.02;
}
.welcome-row h1 em {
  color: transparent;
  background: linear-gradient(100deg, var(--cyan-2), var(--cyan) 58%, #79bfff);
  background-clip: text;
  -webkit-background-clip: text;
}
.welcome-copy { max-width: 520px; color: #91a5b7; font-size: 14px; }

.focus-card,
.stat-card,
.create-card,
.tree-board {
  border-color: rgba(133,177,202,.14);
  background-color: rgba(10,22,33,.68);
  backdrop-filter: blur(14px);
}
.focus-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(69,229,212,.09), rgba(10,22,33,.78));
}
.focus-card::before, .create-card::before {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(69,229,212,.68), transparent);
  content: "";
}
.focus-time { color: var(--cyan-2); font-size: 19px; }
.focus-bar { background: rgba(133,177,202,.12); }

.stats-grid { gap: 18px; }
.stat-card {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.stat-card::after {
  position: absolute;
  right: -20px;
  bottom: -54px;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(69,229,212,.1);
  border-radius: 50%;
  box-shadow: 0 0 45px rgba(69,229,212,.045);
  content: "";
}
.stat-card:hover { border-color: rgba(69,229,212,.3); background: rgba(13,29,42,.8); transform: translateY(-3px); }
.stat-label { color: #9aabba; font-size: 11px; }
.stat-icon { width: 26px; height: 26px; border-radius: 8px; }
.stat-value { margin-top: 22px; font-size: 34px; }
.stat-meta { margin-top: 9px; font-size: 10px; }

.create-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: radial-gradient(circle at 100% 0%, rgba(69,229,212,.095), transparent 36%), rgba(10,22,33,.72);
  box-shadow: 0 28px 80px rgba(0,0,0,.18);
}
.create-copy h2 { margin-top: 12px; font-size: 24px; }
.create-copy p { max-width: 340px; color: #8fa2b3; font-size: 12px; }
.topic-input-wrap, .goal-field input, .form-row select {
  min-height: 48px;
  border-color: rgba(133,177,202,.18);
  border-radius: 12px;
  background: rgba(4,11,18,.52);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.topic-input-wrap:focus-within, .goal-field input:focus, .form-row select:focus {
  border-color: rgba(69,229,212,.58);
  background: rgba(5,15,23,.78);
  box-shadow: 0 0 0 4px rgba(69,229,212,.07), 0 0 24px rgba(69,229,212,.05);
}
.goal-field { margin-top: 14px; }
.form-row { gap: 12px; margin-top: 14px; }
.primary-button {
  height: 44px;
  padding: 0 20px;
  border-radius: 11px;
  background: linear-gradient(110deg, #35cfca, #65efd7);
  box-shadow: 0 10px 28px rgba(69,229,212,.15);
  letter-spacing: .02em;
}
.primary-button:hover { box-shadow: 0 14px 34px rgba(69,229,212,.24); }
.ghost-button { padding: 9px 13px; border-radius: 9px; background: rgba(10,22,33,.62); }

.path-section { position: relative; }
.section-heading h2 { font-size: 28px; }
.heading-tag { padding: 5px 9px; border: 1px solid rgba(69,229,212,.14); border-radius: 20px; }
.filter-row { padding-bottom: 10px; border-bottom: 1px solid rgba(133,177,202,.1); }
.filter { padding: 8px 12px; border-radius: 8px; }

.tree-board {
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(11,25,37,.9), rgba(6,15,24,.84));
  box-shadow: 0 28px 90px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025);
}
.tree-board::before { opacity: .42; background-size: 38px 38px; }
.hierarchy-board::before { color: #71889a; letter-spacing: .08em; }
.tree-root-node { border-radius: 16px; background: linear-gradient(140deg, rgba(69,229,212,.16), rgba(13,34,48,.94)); }
.tree-root-node strong { font-size: 20px; }
.tree-branch { border-radius: 16px; background: linear-gradient(160deg, rgba(15,35,49,.7), rgba(8,19,30,.5)); }
.branch-header { border-radius: 12px; background: rgba(13,31,44,.88); }
.skill-node { border-radius: 12px; background: rgba(12,27,40,.84); }
.skill-node:hover { border-color: rgba(69,229,212,.5); background: rgba(17,41,55,.94); box-shadow: 0 14px 34px rgba(0,0,0,.2); }

.skill-drawer { border-color: rgba(133,177,202,.14); background: rgba(7,17,27,.97); backdrop-filter: blur(22px); }
.material-row, .skill-insight-card, .materials-progress-card { border-radius: 11px; background: rgba(11,27,40,.58); }
.question-card, .result-card, .review-card, .log-entry, .log-summary > div { border-radius: 16px; }
.auth-card { border-radius: 24px; background: rgba(9,22,34,.82); backdrop-filter: blur(24px); }

body.light-mode {
  --ink: #142a3b;
  --muted: #5f7586;
  --muted-2: #8193a1;
  --line: rgba(52,91,113,.14);
  --panel: rgba(255,255,255,.78);
  --panel-strong: #fff;
  --bg: #f0f5f7;
  --cyan: #008f91;
  --cyan-2: #087f84;
  background:
    linear-gradient(rgba(52,91,113,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,91,113,.035) 1px, transparent 1px),
    radial-gradient(circle at 78% 3%, rgba(69,229,212,.16), transparent 27rem),
    #f0f5f7;
  background-size: 44px 44px, 44px 44px, auto, auto;
}
body.light-mode .topbar { background: rgba(244,248,249,.78); }
body.light-mode .focus-card,
body.light-mode .stat-card,
body.light-mode .create-card { border-color: rgba(52,91,113,.14); background-color: rgba(255,255,255,.74); }
body.light-mode .stat-card:hover { border-color: rgba(0,143,145,.3); background: rgba(255,255,255,.94); }
body.light-mode .create-card { background: radial-gradient(circle at 100% 0%, rgba(69,229,212,.18), transparent 38%), rgba(255,255,255,.78); }
body.light-mode .topic-input-wrap,
body.light-mode .goal-field input,
body.light-mode .form-row select { border-color: rgba(52,91,113,.18); background: rgba(255,255,255,.74); }
body.light-mode .tree-board { background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(237,245,247,.86)); }
body.light-mode .tree-branch { background: linear-gradient(160deg, rgba(255,255,255,.86), rgba(235,244,247,.7)); }
body.light-mode .skill-drawer { background: rgba(247,251,252,.98); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 760px) {
  .welcome-row { padding-top: 4px; }
  .welcome-row h1 { font-size: 40px; }
  .create-copy h2 { font-size: 21px; }
  .section-heading h2 { font-size: 24px; }
  .topbar-actions { gap: 8px; }
}

/* Radical command-console layout */
.content-wrap { padding-top: 36px; }
.command-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .72fr);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(133,177,202,.15);
  background: rgba(5,13,21,.72);
  box-shadow: 0 32px 100px rgba(0,0,0,.24);
}
.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 56px clamp(36px, 6vw, 92px);
  border-right: 1px solid rgba(133,177,202,.13);
}
.hero-copy::after {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 62px;
  height: 62px;
  border-right: 1px solid rgba(69,229,212,.35);
  border-bottom: 1px solid rgba(69,229,212,.35);
  content: "";
}
.hero-copy .eyebrow { font-size: 9px; }
.hero-copy h1 { margin: 27px 0 22px; font-size: clamp(54px, 7vw, 94px); font-weight: 500; letter-spacing: -.085em; line-height: .92; }
.hero-copy .welcome-copy { max-width: 580px; font-size: 14px; line-height: 1.9; }
.hero-signals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.hero-signals span { padding: 7px 10px; border: 1px solid rgba(133,177,202,.13); color: #73899a; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .06em; }
.hero-signals span:first-child { color: var(--cyan); border-color: rgba(69,229,212,.25); }
.hero-signals i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.hero-control { display: grid; grid-template-rows: auto 1fr auto; background: linear-gradient(160deg, rgba(12,30,42,.9), rgba(6,17,26,.88)); }
.control-label, .control-foot { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(133,177,202,.12); color: #617789; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .09em; }
.control-label b { color: var(--cyan); font-size: 15px; font-weight: 400; }
.control-foot { align-items: flex-start; flex-direction: column; gap: 7px; border-top: 1px solid rgba(133,177,202,.12); border-bottom: 0; }
.control-foot strong { color: #b9c9d3; font-size: 10px; font-weight: 500; letter-spacing: .02em; }
.hero-control .focus-card { align-self: center; width: auto; margin: 32px 24px; padding: 28px 25px; border: 0; border-left: 2px solid var(--cyan); border-radius: 0; background: rgba(69,229,212,.055); box-shadow: none; }
.hero-control .focus-card::before { display: none; }
.hero-control .focus-top { align-items: flex-start; flex-direction: column; gap: 14px; }
.hero-control .focus-time { font-size: clamp(36px, 5vw, 58px); letter-spacing: -.07em; }
.hero-control .focus-bar { margin: 24px 0 20px; }
.hero-control .focus-bottom { align-items: flex-start; flex-direction: column; gap: 16px; }
.hero-control .focus-bottom button { width: 100%; padding: 11px 0; border-top: 1px solid rgba(69,229,212,.18); text-align: left; }

.data-rail { grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 18px; border: 1px solid rgba(133,177,202,.13); background: rgba(5,13,21,.58); }
.data-rail .stat-card { min-height: 126px; padding: 19px 22px; border: 0; border-right: 1px solid rgba(133,177,202,.12); border-radius: 0; background: transparent; backdrop-filter: none; }
.data-rail .stat-card:last-child { border-right: 0; }
.data-rail .stat-card::after { display: none; }
.data-rail .stat-card:hover { background: rgba(69,229,212,.04); transform: none; }
.data-rail .stat-value { margin-top: 19px; font-size: 30px; }
.data-rail .stat-icon { width: auto; height: auto; background: transparent; }

.mission-builder { display: grid; grid-template-columns: minmax(240px,.65fr) minmax(0,1.35fr); gap: 0; margin-top: 68px; padding: 0; overflow: visible; border: 0; border-top: 1px solid rgba(133,177,202,.17); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.mission-builder::before { top: -1px; right: auto; left: 0; width: 150px; background: var(--cyan); box-shadow: 0 0 20px rgba(69,229,212,.35); }
.mission-builder .create-copy { padding: 36px 44px 36px 0; border-right: 1px solid rgba(133,177,202,.13); }
.mission-builder .create-copy h2 { max-width: 260px; margin-top: 18px; font-size: 34px; line-height: 1.08; }
.mission-builder .create-copy p { margin-top: 16px; font-size: 11px; line-height: 1.8; }
.mission-builder .create-form { max-width: none; padding: 36px 0 36px 44px; }
.mission-builder .topic-input-wrap, .mission-builder .goal-field input, .mission-builder .form-row select { border-width: 0 0 1px; border-radius: 0; background: transparent; }
.mission-builder .topic-input-wrap { padding-left: 0; }
.mission-builder .topic-input-wrap:focus-within, .mission-builder .goal-field input:focus, .mission-builder .form-row select:focus { background: rgba(69,229,212,.025); box-shadow: 0 1px 0 var(--cyan); }
.mission-builder .primary-button { border-radius: 0; }
.generation-error { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(255,119,119,.34); color: #ffb7b7; background: rgba(131,35,50,.14); font-size: 12px; line-height: 1.55; }
body.light-mode .generation-error { border-color: rgba(178,42,62,.28); color: #9d2037; background: rgba(178,42,62,.07); }
.generation-job-panel { margin-top: 15px; padding: 16px 17px; border: 1px solid rgba(198,255,74,.25); border-radius: 10px; background: linear-gradient(110deg, rgba(198,255,74,.055), rgba(255,255,255,.025)); }
.generation-job-head, .generation-job-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.generation-job-head span { display: block; color: var(--cyan); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.generation-job-head strong { display: block; margin-top: 5px; color: var(--ink); font-size: 12px; font-weight: 600; }
.generation-job-head b { color: var(--cyan); font-family: "DM Mono", monospace; font-size: 18px; font-weight: 500; }
.generation-job-track { height: 5px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.generation-job-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #ecff9c); box-shadow: 0 0 14px rgba(198,255,74,.3); transition: width .45s ease; }
.generation-job-foot { margin-top: 11px; }
.generation-job-foot small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.generation-cancel { width: auto; min-width: 88px; padding: 7px 10px; color: var(--muted); font-size: 9px; }
.generation-cancel:hover { color: #ffb7b7; border-color: rgba(255,119,119,.35); }
.generation-job-panel.cancelling { border-color: rgba(255,176,96,.3); }
body.light-mode .generation-job-panel { border-color: rgba(83,112,0,.24); background: linear-gradient(110deg, rgba(111,145,0,.07), rgba(255,255,255,.72)); }
body.light-mode .generation-job-track { background: rgba(24,31,24,.1); }
@media (max-width: 760px) { .generation-job-foot { align-items: flex-start; flex-direction: column; }.generation-cancel { width: 100%; } }

.mission-map { margin-top: 80px; }
.mission-map .section-heading { padding-bottom: 26px; border-bottom: 1px solid rgba(133,177,202,.14); }
.mission-map .section-heading h2 { margin-top: 15px; font-size: 38px; font-weight: 500; }
.mission-map .path-meta { margin-top: 18px; }
.mission-map .filter-row { justify-content: flex-end; margin-top: -30px; padding-bottom: 20px; border-bottom: 0; }
.mission-map .tree-board { min-height: 620px; margin-top: 0; border-radius: 0; border-right: 0; border-left: 0; background: rgba(4,12,20,.62); box-shadow: none; }
.mission-map .tree-root-node, .mission-map .tree-branch, .mission-map .branch-header, .mission-map .skill-node { border-radius: 2px; }

body.light-mode .command-hero { border-color: rgba(52,91,113,.16); background: rgba(255,255,255,.65); box-shadow: 0 32px 90px rgba(52,91,113,.1); }
body.light-mode .hero-copy { border-color: rgba(52,91,113,.14); }
body.light-mode .hero-control { background: linear-gradient(160deg, rgba(225,242,243,.92), rgba(246,250,251,.9)); }
body.light-mode .hero-signals span { color: #6d8291; border-color: rgba(52,91,113,.15); }
body.light-mode .control-label, body.light-mode .control-foot { border-color: rgba(52,91,113,.13); color: #748896; }
body.light-mode .control-foot strong { color: #385366; }
body.light-mode .hero-control .focus-card { background: rgba(0,143,145,.055); }
body.light-mode .data-rail { border-color: rgba(52,91,113,.14); background: rgba(255,255,255,.58); }
body.light-mode .data-rail .stat-card { border-color: rgba(52,91,113,.13); background: transparent; }
body.light-mode .data-rail .stat-card:hover { background: rgba(0,143,145,.04); }
body.light-mode .mission-builder { border-color: rgba(52,91,113,.16); background: transparent; }
body.light-mode .mission-builder .create-copy { border-color: rgba(52,91,113,.14); }
body.light-mode .mission-builder .topic-input-wrap, body.light-mode .mission-builder .goal-field input, body.light-mode .mission-builder .form-row select { background: transparent; }
body.light-mode .mission-map .tree-board { background: rgba(255,255,255,.56); }

@media (max-width: 900px) {
  .command-hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 390px; border-right: 0; border-bottom: 1px solid rgba(133,177,202,.13); }
  .hero-control { grid-template-columns: 1fr 1.5fr; grid-template-rows: auto auto; }
  .hero-control .control-label { grid-column: 1 / -1; }
  .hero-control .focus-card { margin: 22px; }
  .control-foot { justify-content: center; }
  .mission-builder { grid-template-columns: 1fr; }
  .mission-builder .create-copy { padding-right: 0; border-right: 0; border-bottom: 1px solid rgba(133,177,202,.13); }
  .mission-builder .create-form { padding-left: 0; }
}
@media (max-width: 760px) {
  .content-wrap { padding-top: 18px; }
  .command-hero { min-height: 0; }
  .hero-copy { min-height: 350px; padding: 40px 26px; }
  .hero-copy h1 { font-size: 54px; }
  .hero-control { display: block; }
  .control-foot { display: none; }
  .data-rail { grid-template-columns: 1fr 1fr; }
  .data-rail .stat-card:nth-child(2) { border-right: 0; }
  .data-rail .stat-card:nth-child(-n+2) { border-bottom: 1px solid rgba(133,177,202,.12); }
  .mission-builder { margin-top: 52px; }
  .mission-builder .create-copy { padding: 28px 0; }
  .mission-builder .create-form { padding: 28px 0; }
  .mission-map { margin-top: 58px; }
  .mission-map .section-heading h2 { font-size: 30px; }
  .mission-map .filter-row { justify-content: flex-start; margin-top: 20px; }
}
/* Multi-topic workspace */
.topic-list { display: grid; gap: 3px; }
.topic-empty { padding: 10px 12px; color: var(--muted-2); font-size: 10px; line-height: 1.5; }

/* Final tree typography overrides: readable Chinese on both themes */
.mission-map .hierarchy-board,
.mission-map .tree-root-node,
.mission-map .tree-branch,
.mission-map .branch-header,
.mission-map .nested-skill,
.mission-map .skill-node,
.mission-map .branch-empty {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  letter-spacing: 0;
}
.mission-map .hierarchy-board::before { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 11px; letter-spacing: .03em; }
.mission-map .tree-root-node strong { font-size: 22px; line-height: 1.35; letter-spacing: 0; }
.mission-map .tree-root-node small { font-size: 11px; line-height: 1.6; }
.mission-map .root-subtopics { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 10px; letter-spacing: 0; }
.mission-map .branch-index, .mission-map .branch-index::before { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 10px; letter-spacing: .03em; }
.mission-map .branch-header strong { font-size: 14px; line-height: 1.45; }
.mission-map .branch-header small { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 10px; line-height: 1.5; }
.mission-map .tree-node .node-title { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.mission-map .tree-node .node-description { margin-top: 6px; max-height: 34px; font-size: 10px; line-height: 1.65; }
.mission-map .tree-node .node-prerequisite { max-height: 32px; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 9px; line-height: 1.55; }
.mission-map .tree-node .node-meta { margin-top: 8px; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 9px; }
.mission-map .branch-empty { font-size: 10px; line-height: 1.6; }
@media (max-width: 760px) {
  .mission-map .tree-root-node strong { font-size: 20px; }
  .mission-map .branch-header strong { font-size: 13px; }
  .mission-map .tree-node .node-title { font-size: 12px; }
  .mission-map .tree-node .node-description { font-size: 9.5px; }
}

/*
 * ATRIA / SYSTEM 03
 * A clean future-workspace visual language: Vercel-like structure,
 * Linear-like product density and a small Nothing-inspired signal system.
 */
:root {
  --ink: #f7f8f2;
  --muted: #9a9f98;
  --muted-2: #626862;
  --line: rgba(235, 241, 226, .12);
  --panel: rgba(18, 20, 19, .82);
  --panel-strong: #121413;
  --bg: #090a0a;
  --cyan: #c6ff4a;
  --cyan-2: #e4ff9f;
  --violet: #a89cff;
  --orange: #ff9c64;
  --green: #7bf0aa;
  --shadow: 0 28px 80px rgba(0, 0, 0, .32);
}

html { scroll-behavior: smooth; background: var(--bg); }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 9%, rgba(198,255,74,.075), transparent 24rem),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 64px 64px, 64px 64px, auto;
  font-family: "Noto Sans SC", "Microsoft YaHei UI", "PingFang SC", sans-serif;
}
body::before {
  top: 71px;
  right: 0;
  width: 38vw;
  background: linear-gradient(90deg, transparent, var(--cyan));
  box-shadow: 0 0 36px rgba(198,255,74,.25);
}
button, input, select, textarea { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* Header / global navigation */
.topbar {
  height: 72px;
  padding: 0 clamp(20px, 4vw, 72px);
  border-bottom: 1px solid var(--line);
  background: rgba(9,10,10,.82);
  backdrop-filter: blur(24px) saturate(125%);
}
.topbar-leading { gap: 18px; }
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 19px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.topbar-brand-signal { width: 8px; height: 8px; border: 2px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 14px rgba(198,255,74,.55); }
.topbar-brand strong { font-family: "DM Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: .12em; }
.topbar-brand small { color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 7px; letter-spacing: .11em; }
.sidebar-toggle { width: 38px; height: 38px; border-radius: 50%; background: #121413; }
.sidebar-toggle:hover { border-color: rgba(198,255,74,.48); color: var(--cyan); background: rgba(198,255,74,.06); }
.breadcrumb { font-size: 11px; }
.provider-pill { border-radius: 4px; color: #b9beb6; background: #121413; }
.provider-pill .status-dot { background: var(--green); box-shadow: 0 0 10px rgba(123,240,170,.62); }
.theme-toggle { width: 36px; height: 36px; border-color: var(--line); border-radius: 50%; color: var(--ink); background: #121413; }
.avatar, .avatar.small { border-radius: 50%; color: #090a0a; background: var(--cyan); }

/* Navigation drawer */
.sidebar { width: 292px; padding: 30px 22px 22px; border-right: 1px solid var(--line); background: rgba(12,13,13,.98); }
.sidebar.is-open { box-shadow: 36px 0 100px rgba(0,0,0,.55); }
.sidebar .brand-row { padding-bottom: 40px; }
.brand-mark { border-radius: 3px; border-color: rgba(198,255,74,.5); }
.brand-mark span { background: var(--cyan); box-shadow: none; }
.brand-name { font-family: "DM Mono", monospace; font-size: 20px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.nav-item, .topic-item { border-radius: 5px; }
.nav-item.active, .nav-item:hover, .topic-item.active, .topic-item:hover { background: rgba(198,255,74,.07); }
.nav-count { border-radius: 4px; }
.streak-card { border-radius: 5px; background: rgba(255,156,100,.07); }

/* Main canvas */
.content-wrap { max-width: 1760px; padding: clamp(22px,4vw,60px) clamp(20px,4vw,72px) 120px; }
.command-hero {
  position: relative;
  grid-template-columns: minmax(0, 1.62fr) minmax(350px, .68fr);
  min-height: min(620px, calc(100vh - 118px));
  border-color: var(--line);
  border-radius: 28px;
  background: rgba(14,15,15,.74);
  box-shadow: 0 42px 120px rgba(0,0,0,.28);
}
.command-hero::before {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(198,255,74,.65);
  content: "";
}
.hero-copy { padding: clamp(48px,7vw,112px); overflow: hidden; border-right-color: var(--line); }
.hero-coordinate { position: absolute; top: 28px; left: clamp(48px,7vw,112px); color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .08em; }
.hero-copy::after { right: 30px; bottom: 30px; width: 88px; height: 88px; border-color: rgba(198,255,74,.38); }
.hero-copy .eyebrow { position: relative; z-index: 2; color: var(--cyan); font-size: 9px; }
.hero-copy h1 {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 36px 0 28px;
  font-size: clamp(58px, 7.5vw, 118px);
  font-weight: 600;
  letter-spacing: -.09em;
  line-height: .88;
}
.hero-copy h1 em { color: var(--cyan); background: none; -webkit-text-fill-color: currentColor; }
.hero-copy .welcome-copy { position: relative; z-index: 2; max-width: 560px; color: #aeb3ac; font-size: 15px; line-height: 1.9; }
.hero-signals { position: relative; z-index: 2; }
.hero-signals span { border-radius: 99px; color: #8d938c; }
.hero-signals span:first-child { color: var(--cyan); border-color: rgba(198,255,74,.24); }
.hero-signals i { background: var(--cyan); box-shadow: 0 0 10px rgba(198,255,74,.7); }
.hero-orbit { position: absolute; right: clamp(-120px,-5vw,-40px); bottom: -160px; width: 460px; height: 460px; border: 1px solid rgba(255,255,255,.065); border-radius: 50%; }
.hero-orbit::before, .hero-orbit::after { position: absolute; inset: 17%; border: 1px solid rgba(255,255,255,.055); border-radius: inherit; content: ""; }
.hero-orbit::after { inset: 38%; border-color: rgba(198,255,74,.16); }
.hero-orbit span { position: absolute; top: 48%; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.hero-orbit i { position: absolute; top: 20%; right: 11%; width: 4px; height: 4px; border-radius: 50%; background: var(--violet); }
.hero-orbit b { position: absolute; inset: 49.8% 0 auto; height: 1px; background: rgba(255,255,255,.055); transform: rotate(-23deg); }
.hero-control { background: linear-gradient(160deg, #151716, #0e100f); }
.control-label, .control-foot { border-color: var(--line); padding: 23px 26px; }
.control-label b { color: var(--cyan); font-size: 20px; }
.hero-control .focus-card { margin: 38px 28px; padding: 34px 28px; border-left-color: var(--cyan); background: rgba(198,255,74,.045); }
.hero-control .focus-time { color: var(--ink); font-size: clamp(46px,5vw,72px); font-weight: 500; }
.hero-control .focus-time span { color: var(--cyan); }
.hero-control .focus-bar { height: 2px; }
.hero-control .focus-bar span { background: var(--cyan); box-shadow: 0 0 16px rgba(198,255,74,.48); }
.hero-control .focus-bottom button { color: var(--cyan); border-color: rgba(198,255,74,.18); }
.hero-control .focus-reset-button { width: auto !important; padding: 8px 10px !important; }
.hero-control .focus-actions { width: 100%; justify-content: space-between; }

/* Metrics become one precise system rail */
.data-rail { margin-top: 14px; border-radius: 16px; border-color: var(--line); background: rgba(14,15,15,.72); overflow: hidden; }
.data-rail .stat-card { min-height: 144px; padding: 24px 26px; border-color: var(--line); }
.data-rail .stat-card:hover { background: rgba(198,255,74,.035); }
.data-rail .stat-label { color: #aeb3ac; font-size: 11px; }
.data-rail .stat-value { color: var(--ink); font-family: "Manrope", "Noto Sans SC", sans-serif; font-size: 40px; font-weight: 550; letter-spacing: -.07em; }
.data-rail .stat-value span { color: var(--muted-2); }
.data-rail .stat-meta { color: #686e68; font-size: 10px; }

/* Mission builder */
.mission-builder { grid-template-columns: minmax(290px,.65fr) minmax(0,1.35fr); margin-top: 104px; border-top-color: var(--line); }
.mission-builder::before { width: 112px; height: 3px; background: var(--cyan); box-shadow: none; }
.mission-builder .create-copy { padding: 48px 58px 48px 0; border-right-color: var(--line); }
.mission-builder .create-copy h2 { max-width: 360px; margin-top: 22px; font-size: clamp(34px,3vw,52px); font-weight: 550; letter-spacing: -.065em; }
.mission-builder .create-copy p { max-width: 390px; color: var(--muted); font-size: 12px; }
.mission-builder .create-form { padding: 48px 0 48px 58px; }
.mission-builder .topic-input-wrap, .mission-builder .goal-field input, .mission-builder .form-row select { min-height: 58px; border-color: rgba(255,255,255,.16); color: var(--ink); }
.mission-builder .topic-input-wrap input, .mission-builder .goal-field input { font-size: 15px; }
.mission-builder .topic-input-wrap:focus-within, .mission-builder .goal-field input:focus, .mission-builder .form-row select:focus { border-color: var(--cyan); background: rgba(198,255,74,.025); box-shadow: 0 1px 0 var(--cyan); }
.mission-builder .primary-button { height: 58px; padding: 0 24px; border-radius: 6px; color: #090a0a; background: var(--cyan); box-shadow: none; }
.mission-builder .primary-button:hover { background: var(--cyan-2); box-shadow: 0 0 28px rgba(198,255,74,.16); }

/* Mission map / variable-width AI graph */
.mission-map { margin-top: 112px; }
.mission-map .section-heading { padding-bottom: 30px; border-bottom-color: var(--line); }
.mission-map .section-heading h2 { margin-top: 18px; font-size: clamp(38px,4vw,64px); font-weight: 550; letter-spacing: -.07em; }
.heading-tag { margin-left: 14px; border-radius: 99px; color: var(--cyan); background: rgba(198,255,74,.07); }
.ghost-button { min-height: 38px; border-radius: 6px; color: #c6cbc4; background: #151716; }
.ghost-button:hover { color: var(--cyan); border-color: rgba(198,255,74,.4); background: rgba(198,255,74,.05); }
.path-meta { gap: 24px; color: #737973; }
.filter-row .filter { border-radius: 99px; }
.filter.active, .filter:hover { color: #090a0a; background: var(--cyan); }
.filter.active span, .filter:hover span { color: #30372b; }
.mission-map .tree-board { min-height: 700px; padding: 46px 38px 56px; border-top-color: var(--line); border-bottom-color: var(--line); background: rgba(12,13,13,.7); }
.mission-map .tree-board::before { opacity: .56; background-image: radial-gradient(circle, rgba(230,236,225,.17) 1px, transparent 1.2px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, black, transparent 95%); }
.mission-map .tree-board::after { background: rgba(198,255,74,.035); }
.mission-map .hierarchy-board { min-width: max(1220px, 100%); padding-top: 4px; }
.mission-map .hierarchy-board::before { margin-bottom: 26px; color: #696f69; font-size: 9px; letter-spacing: .12em; }
.mission-map .tree-root-node { min-width: 360px; max-width: 560px; padding: 22px 28px; border-radius: 12px; border-color: rgba(198,255,74,.55); background: #171a16; box-shadow: 0 0 0 6px rgba(198,255,74,.035), 0 18px 48px rgba(0,0,0,.26); }
.mission-map .root-kicker { color: var(--cyan); }
.mission-map .tree-root-node strong { color: var(--ink); font-size: 24px; }
.mission-map .tree-root-node small { color: #a5aaa3; }
.mission-map .root-stem { height: 40px; background: linear-gradient(var(--cyan), rgba(198,255,74,.12)); }
.mission-map .tree-branches { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(238px, 1fr); gap: 18px; align-items: start; }
.mission-map .tree-branches::before { right: 5%; left: 5%; background: linear-gradient(90deg, transparent, rgba(198,255,74,.6), transparent); }
.mission-map .tree-branch { min-width: 238px; padding: 18px 12px 14px; border-radius: 12px; border-color: rgba(255,255,255,.10); background: rgba(18,20,19,.78); }
.mission-map .tree-branch::before { background: rgba(198,255,74,.55); }
.mission-map .branch-index { color: var(--cyan); }
.mission-map .branch-index::before { color: #6f756e; }
.mission-map .branch-header { min-height: 76px; padding: 14px; border-radius: 8px; border-color: rgba(255,255,255,.13); background: #171918; }
.mission-map .branch-header:hover, .mission-map .branch-header.doing { border-color: rgba(198,255,74,.5); background: #1d211b; }
.mission-map .branch-orbit { width: 30px; height: 30px; border-color: rgba(198,255,74,.34); color: var(--cyan); }
.mission-map .branch-header strong { color: #f1f4ec; font-size: 14px; }
.mission-map .branch-header small { color: #818780; }
.mission-map .branch-children { gap: 10px; padding-top: 14px; border-color: rgba(255,255,255,.09); }
.mission-map .nested-skill::before, .mission-map .nested-skill::after { background: rgba(198,255,74,.18); }
.mission-map .skill-node { min-height: 116px; padding: 14px; border-radius: 8px; border-color: rgba(255,255,255,.11); background: #141615; }
.mission-map .skill-node:hover { border-color: rgba(198,255,74,.5); background: #1b1f18; box-shadow: 0 18px 42px rgba(0,0,0,.25); transform: translateY(-3px); }
.mission-map .skill-node.doing { border-color: rgba(198,255,74,.55); box-shadow: inset 3px 0 var(--cyan); }
.mission-map .skill-node.done { border-color: rgba(123,240,170,.38); background: rgba(123,240,170,.035); }
.mission-map .tree-node .node-title { color: #eef1ea; font-size: 13px; }
.mission-map .tree-node .node-description { max-height: 40px; color: #929891; font-size: 10px; }
.mission-map .tree-node .node-meta { color: #676d67; }
.mission-map .tree-branch, .mission-map .branch-children, .mission-map .nested-skill, .mission-map .nested-skill > .nested-children, .mission-map .skill-node, .mission-map .tree-node { min-width: 0; }
.mission-map .skill-node .node-title, .mission-map .skill-node .node-description, .mission-map .skill-node .node-prerequisite { overflow-wrap: anywhere; }

/* Centered skill dossier */
.drawer-overlay { z-index: 60; padding: clamp(14px,3vw,42px); background: rgba(0,0,0,.72); backdrop-filter: blur(16px); }
.skill-drawer { width: min(980px,100%); max-height: 92vh; padding: clamp(25px,4vw,48px); border-radius: 18px; border-color: rgba(255,255,255,.15); background: #101211; box-shadow: 0 40px 140px rgba(0,0,0,.65); }
.drawer-close { top: 22px; right: 22px; border-radius: 50%; background: #191b1a; }
.skill-drawer h2 { color: var(--ink); font-size: clamp(30px,4vw,52px); font-weight: 550; letter-spacing: -.065em; }
.drawer-summary { color: #9fa49d; font-size: 13px; line-height: 1.8; }
.drawer-stats { gap: 10px; }
.drawer-stat, .materials-progress-card, .skill-insight-card, .material-row { border-radius: 8px; border-color: rgba(255,255,255,.11); background: #151716; }
.materials-progress-card { border-left: 3px solid var(--cyan); background: rgba(198,255,74,.035); }
.materials-progress span { background: var(--cyan); }
.material-row:hover { border-color: rgba(198,255,74,.36); background: rgba(198,255,74,.04); }
.material-section-heading h3, .material-content strong { color: #eef1ea; font-size: 12px; }
.material-section-heading small, .material-content small { color: #858b84; }
.material-link, .material-url { color: var(--cyan); }

/* Feynman, queue and log share the same product language */
.feynman-view { padding-top: 64px; }
.feynman-shell { max-width: 1040px; }
.feynman-intro h2 { max-width: 780px; font-size: clamp(34px,5vw,62px); font-weight: 550; }
.question-card, .result-card { padding: clamp(24px,4vw,48px); border-radius: 18px; border-color: rgba(255,255,255,.12); background: #121413; box-shadow: var(--shadow); }
.question-card { border-top: 3px solid var(--cyan); }
.question-text { max-width: 840px; color: var(--ink); font-size: clamp(21px,2.4vw,30px); }
.answer-box { min-height: 220px; border-radius: 10px; background: #0c0d0d; font-size: 14px; }
.answer-box:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(198,255,74,.06); }
.aux-wrap { max-width: 1500px; padding: 64px clamp(20px,4vw,72px) 90px; }
.aux-heading h1 { font-size: clamp(38px,5vw,68px); }
.review-queue-grid { gap: 16px; }
.review-card, .log-entry, .log-summary > div { border-radius: 10px; border-color: rgba(255,255,255,.11); background: #121413; }
.review-card:hover, .log-entry:hover { border-color: rgba(198,255,74,.35); background: #181b16; }

/* Authentication */
.auth-screen { background: radial-gradient(circle at 70% 12%, rgba(198,255,74,.09), transparent 26rem), #090a0a; }
.auth-screen::before { background-size: 64px 64px; opacity: .32; }
.auth-card { width: min(480px,calc(100% - 36px)); padding: 46px; border-radius: 20px; border-color: rgba(255,255,255,.13); background: rgba(16,18,17,.91); }
.auth-heading h1 { font-size: 34px; }
.auth-tabs, .auth-form input { border-radius: 8px; background: #0c0d0d; }

/* Light mode: warm paper and graphite rather than blue-grey */
body.light-mode {
  --ink: #171917;
  --muted: #626861;
  --muted-2: #969c94;
  --line: rgba(24,31,24,.13);
  --panel: rgba(255,255,251,.82);
  --panel-strong: #ffffff;
  --bg: #f4f5ef;
  --cyan: #557d00;
  --cyan-2: #385700;
  --green: #17784a;
  background:
    radial-gradient(circle at 82% 9%, rgba(171,224,50,.16), transparent 24rem),
    linear-gradient(rgba(27,34,26,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,34,26,.028) 1px, transparent 1px),
    #f4f5ef;
  background-size: auto, 64px 64px, 64px 64px, auto;
}
body.light-mode .topbar { background: rgba(247,248,242,.86); }
body.light-mode .topbar-brand { color: #171917; }
body.light-mode .sidebar { background: rgba(250,251,246,.99); }
body.light-mode .sidebar-toggle, body.light-mode .theme-toggle, body.light-mode .provider-pill { color: #343a33; background: #fff; }
body.light-mode .command-hero { border-color: var(--line); background: rgba(255,255,251,.78); box-shadow: 0 32px 90px rgba(41,50,39,.09); }
body.light-mode .hero-copy { border-color: var(--line); }
body.light-mode .hero-copy h1 { color: #171917; }
body.light-mode .hero-copy h1 em { color: #557d00; }
body.light-mode .hero-copy .welcome-copy { color: #626861; }
body.light-mode .hero-control { background: linear-gradient(160deg,#edf2df,#fbfcf6); }
body.light-mode .hero-control .focus-card { background: rgba(85,125,0,.055); }
body.light-mode .hero-control .focus-time { color: #171917; }
body.light-mode .hero-orbit, body.light-mode .hero-orbit::before { border-color: rgba(20,28,18,.08); }
body.light-mode .data-rail { border-color: var(--line); background: rgba(255,255,251,.68); }
body.light-mode .data-rail .stat-card { border-color: var(--line); background: transparent; box-shadow: none; }
body.light-mode .data-rail .stat-card:hover { background: rgba(85,125,0,.04); }
body.light-mode .data-rail .stat-value { color: #171917; }
body.light-mode .mission-builder .create-copy { border-color: var(--line); }
body.light-mode .mission-builder .topic-input-wrap, body.light-mode .mission-builder .goal-field input, body.light-mode .mission-builder .form-row select { color: #171917; border-color: rgba(24,31,24,.22); background: transparent; }
body.light-mode .mission-builder .primary-button { color: #fff; background: #557d00; }
body.light-mode .mission-map .tree-board { background: rgba(255,255,251,.62); }
body.light-mode .mission-map .tree-board::before { background-image: radial-gradient(circle, rgba(37,48,35,.18) 1px, transparent 1.2px); }
body.light-mode .mission-map .tree-root-node { border-color: rgba(85,125,0,.48); background: #f9fbed; }
body.light-mode .mission-map .tree-root-node strong { color: #171917; }
body.light-mode .mission-map .tree-branch { border-color: rgba(24,31,24,.12); background: rgba(252,253,248,.88); }
body.light-mode .mission-map .branch-header, body.light-mode .mission-map .skill-node { border-color: rgba(24,31,24,.13); background: #fff; box-shadow: 0 9px 24px rgba(35,45,32,.055); }
body.light-mode .mission-map .branch-header:hover, body.light-mode .mission-map .skill-node:hover { border-color: rgba(85,125,0,.45); background: #fbfdec; }
body.light-mode .mission-map .branch-header strong, body.light-mode .mission-map .tree-node .node-title { color: #212521; }
body.light-mode .mission-map .tree-node .node-description { color: #666d65; }
body.light-mode .ghost-button { border-color: rgba(24,31,24,.16); color: #343a33; background: #fff; }
body.light-mode .filter.active, body.light-mode .filter:hover { color: #fff; background: #557d00; }
body.light-mode .filter.active span, body.light-mode .filter:hover span { color: #dce9c2; }
body.light-mode .skill-drawer { border-color: rgba(24,31,24,.14); background: #f8f9f3; box-shadow: 0 40px 120px rgba(34,45,31,.23); }
body.light-mode .drawer-stat, body.light-mode .materials-progress-card, body.light-mode .skill-insight-card, body.light-mode .material-row { border-color: rgba(24,31,24,.12); background: #fff; }
body.light-mode .skill-drawer h2, body.light-mode .material-section-heading h3, body.light-mode .material-content strong { color: #171917; }
body.light-mode .question-card, body.light-mode .result-card, body.light-mode .review-card, body.light-mode .log-entry, body.light-mode .log-summary > div { border-color: rgba(24,31,24,.12); background: #fff; box-shadow: 0 24px 70px rgba(34,45,31,.09); }
body.light-mode .question-text { color: #171917; }
body.light-mode .answer-box { color: #171917; background: #f6f7f1; }
body.light-mode .auth-screen { background: radial-gradient(circle at 70% 12%, rgba(171,224,50,.16), transparent 26rem), #f4f5ef; }
body.light-mode .auth-card { background: rgba(255,255,251,.92); }

@media (max-width: 1100px) {
  .command-hero { grid-template-columns: minmax(0,1.35fr) minmax(320px,.75fr); }
  .hero-copy h1 { font-size: clamp(58px,8vw,84px); }
  .mission-builder { grid-template-columns: 1fr; }
  .mission-builder .create-copy { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .mission-builder .create-form { padding-left: 0; }
}

@media (max-width: 900px) {
  .command-hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 520px; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-control { grid-template-columns: 1fr 1.25fr; }
  .mission-map .filter-row { margin-top: 22px; }
  .path-date { display: none; }
}

@media (max-width: 760px) {
  .topbar { padding: 0 16px; }
  .topbar-brand small, .breadcrumb span, .breadcrumb i, .provider-pill { display: none; }
  .content-wrap { padding: 18px 14px 72px; }
  .command-hero { border-radius: 18px; }
  .hero-copy { min-height: 450px; padding: 66px 25px 42px; }
  .hero-coordinate { top: 24px; left: 25px; }
  .hero-copy h1 { margin-top: 30px; font-size: clamp(52px,16vw,72px); }
  .hero-copy .welcome-copy { font-size: 13px; }
  .hero-orbit { right: -210px; bottom: -210px; }
  .hero-control { display: block; }
  .hero-control .focus-card { margin: 24px 18px; }
  .data-rail { grid-template-columns: 1fr 1fr; }
  .data-rail .stat-card { min-height: 126px; padding: 19px; }
  .data-rail .stat-value { font-size: 32px; }
  .mission-builder { margin-top: 72px; }
  .mission-builder .create-copy { padding: 32px 0; }
  .mission-builder .create-form { padding: 32px 0; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; }
  .form-row .primary-button { grid-column: 1 / -1; justify-content: center; }
  .mission-map { margin-top: 78px; }
  .mission-map .section-heading { align-items: flex-start; flex-direction: column; }
  .mission-map .section-heading h2 { font-size: 38px; }
  .mission-map .path-meta { align-items: flex-start; flex-direction: column; gap: 9px; }
  .mission-map .tree-board { min-height: 620px; padding: 28px 14px 40px; }
  .mission-map .hierarchy-board { min-width: 1040px; }
  .skill-drawer { padding: 28px 20px; border-radius: 14px; }
  .skill-drawer h2 { font-size: 32px; }
  .auth-card { padding: 30px 22px; }
}

/* Prerequisite locking and lawful ebook access */
.mission-map .skill-node.locked,
.mission-map .branch-header.locked {
  border-color: rgba(255,255,255,.08);
  background: #111312;
  box-shadow: none;
}
.mission-map .skill-node.locked:hover,
.mission-map .branch-header.locked:hover {
  border-color: rgba(246,168,107,.28);
  background: #151715;
  box-shadow: none;
  transform: none;
}
.mission-map .skill-node.locked .node-title,
.mission-map .branch-header.locked strong { color: #858b84; }
.mission-map .skill-node.locked .node-description,
.mission-map .skill-node.locked .node-meta,
.mission-map .branch-header.locked small { color: #5f655f; }
.mission-map .skill-node.locked .node-status,
.mission-map .skill-node.locked .node-prerequisite,
.mission-map .branch-header.locked .branch-orbit { color: var(--orange); }
.lock-mark { font-family: "Microsoft YaHei UI", sans-serif; font-size: 9px; }

.list-skill-row.locked { background: rgba(246,168,107,.025); }
.list-skill-row.locked:hover { background: rgba(246,168,107,.055); }
.list-skill-row.locked .list-status { color: var(--orange); border-color: rgba(246,168,107,.3); }
.list-skill-row.locked .list-skill-copy strong { color: var(--muted); }
.list-skill-row.locked .list-skill-meta { color: var(--orange); }

.skill-lock-banner {
  display: grid;
  gap: 6px;
  margin: 18px 0 8px;
  padding: 14px 16px;
  border: 1px solid rgba(246,168,107,.28);
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  background: rgba(246,168,107,.055);
}
.skill-lock-banner span { color: var(--orange); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .1em; }
.skill-lock-banner strong { color: #f2d2b4; font-size: 11px; line-height: 1.55; }
.skill-lock-banner small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.skill-insight-card.locked-card { border-color: rgba(246,168,107,.24); background: rgba(246,168,107,.05); }
.skill-insight-card.locked-card .insight-label { color: var(--orange); }
.materials-gate.locked { color: var(--orange); }

.material-row.locked {
  cursor: default;
  opacity: .58;
  border-style: dashed;
}
.material-row.locked:hover { border-color: rgba(255,255,255,.11); background: #151716; }
.material-row.locked .material-checkbox { color: transparent; background: transparent; }
.material-link-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; }
.material-link-group .material-link { margin-top: 0; }
.ebook-link { padding: 5px 7px; border: 1px solid rgba(198,255,74,.22); border-radius: 5px; background: rgba(198,255,74,.05); }
.secondary-link { color: var(--muted); }
.ebook-unavailable,
.disabled-link { display: inline-block; margin-top: 7px; color: var(--muted-2); font-size: 9px; }
.material-link-group .ebook-unavailable { margin-top: 0; }

body.light-mode .mission-map .skill-node.locked,
body.light-mode .mission-map .branch-header.locked {
  border-color: rgba(24,31,24,.11);
  background: #f0f1ec;
  box-shadow: none;
}
body.light-mode .mission-map .skill-node.locked:hover,
body.light-mode .mission-map .branch-header.locked:hover { border-color: rgba(184,103,40,.35); background: #f3f1e9; }
body.light-mode .mission-map .skill-node.locked .node-title,
body.light-mode .mission-map .branch-header.locked strong { color: #777d76; }
body.light-mode .skill-lock-banner { border-color: rgba(184,103,40,.28); background: rgba(246,168,107,.1); }
body.light-mode .skill-lock-banner strong { color: #75451f; }
body.light-mode .skill-insight-card.locked-card { border-color: rgba(184,103,40,.25); background: rgba(246,168,107,.1); }
body.light-mode .material-row.locked:hover { border-color: rgba(24,31,24,.12); background: #fff; }
body.light-mode .ebook-link { border-color: rgba(85,125,0,.25); background: rgba(198,255,74,.16); }

/* Evidence-first mastery framework */
.mission-context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: 22px; }
.mission-context-field { display: grid; gap: 8px; }
.mission-context-field.mission-context-wide { grid-column: 1 / -1; }
.mission-context-field > span { color: var(--muted-2); font-size: 11px; }
.mission-context-field > span i { margin-left: 6px; color: var(--cyan); font-family: "DM Mono", monospace; font-size: 8px; font-style: normal; letter-spacing: .04em; }
.mission-context-field input { box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.16); outline: 0; color: var(--ink); background: transparent; font: 14px/1.5 "Manrope", "Noto Sans SC", sans-serif; }
.mission-context-field input:focus { border-color: var(--cyan); background: rgba(198,255,74,.025); box-shadow: 0 1px 0 var(--cyan); }
.mission-context-field input::placeholder { color: #777f78; opacity: 1; }
body.light-mode .mission-context-field input { border-color: rgba(24,31,24,.22); color: #171917; }
body.light-mode .mission-context-field input::placeholder { color: #7a8178; }

.goal-contract-strip { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1px; overflow: hidden; margin-bottom: 34px; border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 9px; background: var(--line); }
.goal-contract-strip > div { min-width: 0; padding: 15px 17px; background: #121413; }
.goal-contract-strip > div > span { display: block; margin-bottom: 7px; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.goal-contract-strip strong { display: block; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 550; line-height: 1.55; text-overflow: ellipsis; }
.goal-contract-strip .goal-metrics { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 7px; padding: 11px 17px; }
.goal-contract-strip .goal-metrics > b { display: flex; align-items: center; margin-right: 4px; color: var(--muted-2); font: 8px/1.3 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.goal-contract-strip .goal-metrics > span { margin: 0; padding: 5px 8px; border: 1px solid rgba(198,255,74,.18); border-radius: 999px; color: var(--cyan); background: rgba(198,255,74,.045); font: 8px/1.3 "DM Mono", monospace; letter-spacing: 0; text-transform: none; }
.goal-contract-strip .goal-boundary { grid-column: 1 / -1; border-top: 1px solid var(--line); background: rgba(91,116,255,.045); }
.goal-contract-strip .goal-boundary > strong { color: var(--muted); }
.goal-contract-strip .indicator-metrics > span { border-color: rgba(91,116,255,.2); color: #9fafff; background: rgba(91,116,255,.055); }
.goal-contract-strip .dependency-metrics > span { border-color: rgba(255,166,74,.22); color: #ffb76e; background: rgba(255,166,74,.055); }
.goal-contract-strip .study-plan-notice { display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; padding: 10px 17px; border-top: 1px solid var(--line); background: rgba(198,255,74,.035); }
.goal-contract-strip .study-plan-notice > span { margin: 0; color: var(--cyan); }
.goal-contract-strip .study-plan-notice > strong { font-size: 10px; }
.goal-contract-strip .study-plan-notice.warning { background: rgba(255,166,74,.06); }
.goal-contract-strip .study-plan-notice.warning > span { color: #ffad5c; }
.goal-contract-strip .goal-coverage-matrix { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(170px,.8fr) 1.4fr auto; gap: 0; padding: 0; }
.coverage-title { grid-column: 1 / -1; padding: 10px 17px 8px; border-top: 1px solid var(--line); color: var(--muted-2); font: 8px/1.3 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.coverage-row { display: contents; }
.coverage-row > * { min-width: 0; padding: 9px 17px; border-top: 1px solid var(--line); }
.coverage-row b { color: var(--ink); font-size: 9px; font-weight: 600; line-height: 1.5; }
.coverage-row span { overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.coverage-row em { color: var(--cyan); font: 8px/1.5 "DM Mono", monospace; font-style: normal; white-space: nowrap; }
body.light-mode .goal-contract-strip { background: rgba(24,31,24,.12); }
body.light-mode .goal-contract-strip > div { background: #fff; }
body.light-mode .goal-contract-strip strong { color: #171917; }
body.light-mode .goal-contract-strip .goal-boundary { background: #f7f8ff; }
body.light-mode .goal-contract-strip .indicator-metrics > span { color: #4259c8; background: #f2f4ff; }
body.light-mode .goal-contract-strip .dependency-metrics > span { color: #9b5716; background: #fff7ed; }
body.light-mode .coverage-row b { color: #171917; }

.skill-guidance { grid-template-columns: repeat(2,minmax(0,1fr)); }
.skill-insight-card { min-height: 112px; padding: 16px; }
.skill-insight-card strong { font-size: 12px; }
.skill-insight-card small, .skill-insight-card li { font-size: 10px; }
.assessment-card { border-top: 2px solid var(--cyan); }
.metric-card { border-color: rgba(198,255,74,.23); background: rgba(198,255,74,.035); }
.metric-card small { display: block; margin-top: 9px; }
.rubric-card { grid-column: 1 / -1; }
.rubric-card ul { padding-left: 0; list-style: none; }
.rubric-card li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rubric-card li:last-child { border-bottom: 0; }
.rubric-card li b { color: var(--ink); font-weight: 600; }
.rubric-card li em { color: var(--cyan); font-family: "DM Mono", monospace; font-style: normal; }
.rubric-card li small { grid-column: 1 / -1; margin-top: 0; }
.critical-card, .critical-feedback { border-color: rgba(255,107,107,.28) !important; background: rgba(255,107,107,.055) !important; }
.critical-card .insight-label, .critical-feedback h3 { color: #ff8f8f; }

.practice-evidence-card { overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: #151716; transition: border-color .2s, background .2s; }
.practice-evidence-card.complete { border-color: rgba(198,255,74,.32); background: rgba(198,255,74,.035); }
.practice-evidence-card.locked { opacity: .58; }
.practice-evidence-card .material-row { border: 0; border-radius: 0; background: transparent; }
.practice-evidence-card .material-row:hover { background: rgba(198,255,74,.025); }
.practice-training-type { display: inline-flex; width: fit-content; margin-bottom: 7px; padding: 3px 7px; border: 1px solid rgba(198,255,74,.24); border-radius: 999px; color: var(--cyan); background: rgba(198,255,74,.055); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .08em; }
.evidence-workbench { padding: 0 16px 16px 50px; }
.evidence-label { display: inline-flex; margin-bottom: 7px; color: var(--cyan); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.evidence-workbench p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.evidence-workbench ul { display: grid; gap: 4px; margin: 10px 0 0; padding-left: 17px; color: var(--muted-2); font-size: 10px; line-height: 1.5; }
.evidence-workbench textarea, .evidence-workbench input { box-sizing: border-box; width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; outline: 0; color: var(--ink); background: #0c0d0d; font: 12px/1.65 "Manrope", "Noto Sans SC", sans-serif; }
.evidence-workbench textarea { min-height: 96px; margin-top: 14px; padding: 11px 12px; resize: vertical; }
.evidence-workbench input { min-height: 42px; padding: 9px 11px; }
.evidence-workbench textarea:focus, .evidence-workbench input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(198,255,74,.055); }
.evidence-link-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 9px; }
.evidence-save { min-height: 42px; }
.evidence-state { display: block; margin-top: 9px; color: var(--muted-2); font-size: 9px; }
.practice-evidence-card.complete .evidence-state { color: var(--cyan); }
.evidence-upload { position: relative; display: grid; gap: 3px; margin-top: 10px; padding: 12px 14px; border: 1px dashed rgba(198,255,74,.27); border-radius: 8px; color: var(--ink); background: rgba(198,255,74,.035); cursor: pointer; transition: border-color .2s, background .2s; }
.evidence-upload:hover { border-color: rgba(198,255,74,.55); background: rgba(198,255,74,.065); }
.evidence-upload > span { color: var(--cyan); font-size: 11px; font-weight: 650; }
.evidence-upload > small, .evidence-upload-unavailable { color: var(--muted-2); font-size: 9px; line-height: 1.5; }
.evidence-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.evidence-upload.disabled { cursor: default; opacity: .55; }
.uploaded-evidence { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(198,255,74,.22); border-radius: 8px; background: rgba(198,255,74,.045); }
.uploaded-evidence > span { display: grid; min-width: 0; gap: 3px; }
.uploaded-evidence b { overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.uploaded-evidence small { color: var(--muted-2); font: 8px/1.4 "DM Mono", monospace; }
.uploaded-evidence button { width: 26px; height: 26px; border: 1px solid rgba(255,107,107,.2); border-radius: 50%; color: #ff8f8f; background: transparent; cursor: pointer; }
.uploaded-evidence button:hover { border-color: rgba(255,107,107,.55); background: rgba(255,107,107,.08); }

.assessment-contract { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 26px 0; padding: 13px 16px; border: 1px solid rgba(198,255,74,.2); border-left: 3px solid var(--cyan); border-radius: 8px; background: rgba(198,255,74,.035); }
.assessment-contract span { color: var(--cyan); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .08em; }
.assessment-contract strong { color: var(--muted); font-size: 11px; font-weight: 500; }
.rubric-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 22px 0; }
.rubric-results > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); }
.rubric-results span { color: var(--ink); font-size: 11px; }
.rubric-results strong { color: var(--cyan); font: 18px/1 "DM Mono", monospace; }
.rubric-results small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.5; }
.remediation-feedback { margin-top: 13px; border-color: rgba(167,139,250,.26); }
.remediation-feedback ol { display: grid; gap: 8px; padding-left: 20px; }

body.light-mode .practice-evidence-card { border-color: rgba(24,31,24,.12); background: #fff; }
body.light-mode .practice-evidence-card.complete { border-color: rgba(85,125,0,.28); background: rgba(198,255,74,.1); }
body.light-mode .practice-training-type { border-color: rgba(85,125,0,.24); color: #517900; background: rgba(198,255,74,.16); }
body.light-mode .evidence-workbench textarea, body.light-mode .evidence-workbench input { border-color: rgba(24,31,24,.15); color: #171917; background: #f6f7f1; }
body.light-mode .evidence-upload, body.light-mode .uploaded-evidence { border-color: rgba(85,125,0,.25); background: rgba(198,255,74,.1); }
body.light-mode .uploaded-evidence b { color: #171917; }
body.light-mode .assessment-contract { border-color: rgba(85,125,0,.24); background: rgba(198,255,74,.1); }
body.light-mode .rubric-results > div { border-color: rgba(24,31,24,.12); background: #f8f9f3; }
body.light-mode .rubric-card li b, body.light-mode .rubric-results span { color: #171917; }

.augment-skill-card { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px,.8fr) minmax(420px,1.2fr); align-items: center; gap: 24px; margin-top: 30px; padding: 20px 22px; border: 1px solid rgba(198,255,74,.18); border-left: 3px solid var(--cyan); border-radius: 10px; background: linear-gradient(105deg, rgba(198,255,74,.045), rgba(255,255,255,.018)); }
.augment-skill-copy { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.augment-index { display: grid; place-items: center; min-width: 58px; min-height: 32px; border: 1px solid rgba(198,255,74,.24); border-radius: 999px; color: var(--cyan); background: rgba(198,255,74,.055); font: 9px/1 "DM Mono", monospace; letter-spacing: .08em; }
.augment-skill-copy strong, .augment-skill-copy small { display: block; }
.augment-skill-copy strong { color: var(--ink); font-size: 14px; font-weight: 650; }
.augment-skill-copy small { max-width: 520px; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.augment-skill-control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
.augment-skill-control input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; outline: 0; color: var(--ink); background: #111312; font: 12px/1.5 "Noto Sans SC", "Microsoft YaHei", sans-serif; }
.augment-skill-control input::placeholder { color: #6f756e; }
.augment-skill-control input:focus { border-color: rgba(198,255,74,.58); box-shadow: 0 0 0 3px rgba(198,255,74,.055); }
.augment-skill-control .primary-button { min-height: 48px; padding-right: 18px; padding-left: 18px; white-space: nowrap; }
.augment-progress { position: relative; grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); }
.augment-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 10px; }
.augment-progress b { color: var(--cyan); font: 12px/1 "DM Mono", monospace; }
.augment-progress-track { height: 4px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.augment-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #ecff9c); transition: width .35s ease; }
.augment-cancel { margin-top: 10px; padding: 0; border: 0; color: var(--muted-2); background: transparent; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.augment-cancel:hover { color: #ffb372; }
body.light-mode .augment-skill-card { border-color: rgba(85,125,0,.22); border-left-color: #557d00; background: linear-gradient(105deg, rgba(198,255,74,.11), rgba(255,255,255,.76)); }
body.light-mode .augment-index { border-color: rgba(85,125,0,.25); color: #557d00; background: rgba(198,255,74,.18); }
body.light-mode .augment-skill-copy strong { color: #171917; }
body.light-mode .augment-skill-control input { border-color: rgba(24,31,24,.18); color: #171917; background: #fff; }
body.light-mode .augment-skill-control input::placeholder { color: #7b8378; }
body.light-mode .augment-progress-track { background: rgba(24,31,24,.1); }

/* Increase the readability of generated goals and acceptance criteria. */
.mission-map .goal-contract-strip,
.mission-map .goal-contract-strip strong,
.mission-map .goal-contract-strip .goal-metrics,
.mission-map .goal-contract-strip .goal-coverage-matrix,
.mission-map .coverage-row {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
}
.mission-map .goal-contract-strip > div { padding: 18px 20px; }
.mission-map .goal-contract-strip > div > span { margin-bottom: 9px; font-size: 10px; letter-spacing: .04em; }
.mission-map .goal-contract-strip strong { overflow: visible; color: var(--ink); font-size: 14px; line-height: 1.7; text-overflow: clip; word-break: break-word; }
.mission-map .goal-contract-strip .goal-metrics { gap: 9px; padding: 14px 20px; }
.mission-map .goal-contract-strip .goal-metrics > span { padding: 7px 11px; font: 10px/1.55 "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; }
.mission-map .goal-contract-strip .goal-metrics > b { font: 10px/1.55 "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; }
.mission-map .goal-contract-strip .study-plan-notice { padding: 12px 20px; }
.mission-map .goal-contract-strip .study-plan-notice > span { font: 10px/1.5 "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; }
.mission-map .goal-contract-strip .study-plan-notice > strong { font-size: 12px; }
.mission-map .coverage-title { padding: 13px 20px 10px; font: 10px/1.5 "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; letter-spacing: .04em; }
.mission-map .coverage-row > * { padding: 12px 20px; }
.mission-map .coverage-row b { font-size: 12px; line-height: 1.65; }
.mission-map .coverage-row span { overflow: visible; font-size: 12px; line-height: 1.65; text-overflow: clip; white-space: normal; }
.mission-map .coverage-row em { font: 10px/1.65 "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; }
body.light-mode .mission-map .goal-contract-strip strong { color: #171917; }

/* Keep route filters in their own row after the optional skill form. */
.mission-map .augment-skill-card + .filter-row {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-height: 34px;
  margin-top: 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 1100px) {
  .augment-skill-card { grid-template-columns: 1fr; gap: 18px; }
  .augment-skill-copy small { max-width: none; }
  .mission-map .augment-skill-card + .filter-row { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .mission-context-grid, .skill-guidance, .rubric-results, .goal-contract-strip { grid-template-columns: 1fr; }
  .goal-contract-strip .goal-metrics { grid-column: auto; }
  .goal-contract-strip .goal-coverage-matrix { grid-column: auto; grid-template-columns: 1fr; }
  .coverage-title, .coverage-row > * { grid-column: 1; }
  .coverage-row span, .coverage-row em { padding-top: 0; border-top: 0; white-space: normal; }
  .coverage-row em { padding-bottom: 12px; }
  .mission-context-field.mission-context-wide, .rubric-card { grid-column: auto; }
  .evidence-workbench { padding-left: 16px; }
  .evidence-link-row { grid-template-columns: 1fr; }
  .assessment-contract { align-items: flex-start; flex-direction: column; }
  .augment-skill-card { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; padding: 18px 16px; }
  .augment-skill-control { grid-template-columns: 1fr; }
  .augment-skill-control .primary-button { width: 100%; }
  .mission-map .augment-skill-card + .filter-row {
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 14px;
    padding-bottom: 13px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mission-map .augment-skill-card + .filter-row::-webkit-scrollbar { display: none; }
  .mission-map .augment-skill-card + .filter-row .filter { flex: 0 0 auto; }
}