.learning-hub{--lh-primary:#4f46e5;--lh-primary-dark:#4338ca;--lh-soft:#e0e7ff;--lh-white:#fff;--lh-text:#17172f;--lh-muted:#676a83;--lh-border:#dfe2f1;position:relative;min-height:calc(100vh - 90px);margin:-32px calc(50% - 50vw) 0;padding:28px max(24px,calc((100vw - 1320px)/2)) 96px;background:linear-gradient(180deg,var(--lh-soft) 0,rgba(224,231,255,.55) 170px,var(--lh-white) 440px);color:var(--lh-text);font-family:var(--font-ui)}
.learning-hub button,.learning-hub input,.learning-hub select,.learning-hub textarea{font:inherit}.lh-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px}.lh-head>div>span,.lh-intro>span,.lh-section-title span,.lh-drawer-title span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lh-primary)}.lh-head h1{font-size:clamp(30px,4vw,44px);line-height:1;margin:6px 0 0;letter-spacing:-.04em}.lh-stats{display:flex;align-items:center;gap:14px}.lh-stats>b{padding:9px 13px;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;border-radius:999px;font-size:13px}.lh-stats label{display:flex;flex-direction:column;gap:3px;font-size:10px;text-transform:uppercase;font-weight:800;color:var(--lh-muted)}.lh-stats select{min-width:126px;padding:8px 10px;border:1px solid var(--lh-border);border-radius:10px;background:var(--lh-white);color:var(--lh-text);font-weight:700}.lh-goal{width:120px;font-size:11px}.lh-goal>span{display:flex;justify-content:space-between}.lh-goal>i{display:block;height:6px;margin-top:5px;background:#cbd5e1;border-radius:9px;overflow:hidden}.lh-goal>i>i{display:block;width:70%;height:100%;background:var(--lh-primary)}
.lh-main-tabs{display:inline-flex;padding:5px;margin-bottom:24px;border-radius:12px}.lh-main-tabs button,.lh-skills button,.lh-teach-tabs button,.lh-segment button,.lh-filters button{border:0;background:transparent;color:var(--lh-muted);font-weight:700;cursor:pointer}.lh-main-tabs button{padding:9px 20px;border-radius:9px}.lh-main-tabs button.active{background:var(--lh-primary);color:#fff;box-shadow:0 5px 14px rgba(79,70,229,.25)}.lh-panel{display:none}.lh-panel.active{display:block}.lh-learn{display:block}.lh-source,.lh-listen,.lh-dict>aside,.lh-dict>main,.lh-games article,.lh-teach>section{background:var(--lh-white);border:1px solid var(--lh-border);border-radius:16px;box-shadow:0 10px 28px rgba(41,39,99,.06)}.lh-drawer-title{display:flex;align-items:center;justify-content:space-between;gap:16px}.lh-drawer-title button{width:32px;height:32px;border:0;border-radius:9px;background:var(--lh-soft);color:var(--lh-primary);cursor:pointer;font-size:22px}.lh-content{min-width:0}.lh-skills{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--lh-border)}.lh-skills button{padding:10px 14px;border-bottom:3px solid transparent}.lh-skills button.active{color:var(--lh-primary);border-bottom-color:var(--lh-primary)}
.lh-source{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;margin-bottom:16px;border-left:5px solid var(--lh-primary)}.lh-source span{color:var(--lh-primary);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.lh-source h2{font-size:18px;margin:5px 0}.lh-source p,.lh-card-title p,.lh-intro p,.lh-teach>section>p{margin:0;color:var(--lh-muted);font-size:13px}.lh-listen{padding:22px;margin-bottom:24px}.lh-card-title,.lh-card-title>div{display:flex;align-items:center;justify-content:space-between;gap:13px}.lh-card-title>div>strong{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--lh-soft);color:var(--lh-primary);font-size:23px}.lh-card-title h2{font-size:18px;margin:0 0 4px}.lh-card-title em{font-style:normal;padding:6px 10px;border-radius:999px;background:var(--lh-soft);color:var(--lh-primary);font-size:11px;font-weight:800}.lh-audio{display:grid;grid-template-columns:auto minmax(120px,1fr) auto auto;align-items:center;gap:14px;margin:20px 0;padding:15px;background:#f7f8ff;border:1px solid var(--lh-border);border-radius:14px}.lh-audio>button{width:42px;height:42px;border:0;border-radius:50%;background:var(--lh-primary);color:#fff;cursor:pointer}.lh-audio>div{display:flex;flex-direction:column;gap:7px}.lh-audio>div>span{height:5px;background:#d9dceb;border-radius:8px;overflow:hidden}.lh-audio>div>span i{display:block;height:100%;width:0;background:var(--lh-primary);transition:.2s}.lh-audio time{font-size:12px;color:var(--lh-muted)}.lh-audio select{padding:7px;border:1px solid var(--lh-border);border-radius:8px;background:#fff}.lh-range label{display:flex;justify-content:space-between;font-weight:750;font-size:13px}.lh-range output{color:var(--lh-primary)}.lh-range input{width:100%;accent-color:var(--lh-primary);margin:12px 0 4px}.lh-range>div{display:flex;justify-content:space-between;color:var(--lh-muted);font-size:11px}.lh-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:17px;border-top:1px solid var(--lh-border)}.lh-words>div{width:100%;display:flex;justify-content:space-between;font-size:12px;color:var(--lh-muted)}.lh-words>div b{color:var(--lh-text)}.lh-words>button{display:flex;flex-direction:column;align-items:flex-start;min-width:150px;padding:10px 12px;border:1px solid #c9cffd;border-radius:10px;background:#f7f8ff;cursor:pointer}.lh-words>button b{color:var(--lh-primary)}.lh-words>button span,.lh-words>button small{font-size:11px;color:var(--lh-muted)}.lh-section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}.lh-section-title h2{margin:3px 0 0;font-size:22px}.lh-section-title>b{font-size:12px;color:var(--lh-muted)}.lh-lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lh-lessons>button{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:16px;border:1px solid var(--lh-border);border-radius:14px;background:#fff;text-align:left;cursor:pointer;transition:.18s}.lh-lessons>button:hover{transform:translateY(-2px);border-color:var(--lh-primary);box-shadow:0 9px 22px rgba(79,70,229,.09)}.lh-lessons>button>em{font-style:normal;font-weight:900;color:var(--lh-primary)}.lh-lessons>button>span{display:flex;flex-direction:column}.lh-lessons small{color:var(--lh-muted);margin:3px 0}.lh-lessons>button i{font-size:10px;color:var(--lh-primary);font-style:normal}.lh-lessons>button>strong{text-align:right;font-size:11px;color:var(--lh-muted)}.lh-lessons>button>strong i{display:block;margin-top:8px}.lh-lessons>button.done{border-color:#10b981}.lh-lessons>button.done>em:after{content:' ✓';color:#10b981}
.lh-intro{margin:4px 0 20px}.lh-intro h2{font-size:30px;margin:5px 0}.lh-dict{display:grid;grid-template-columns:250px 1fr;gap:18px}.lh-dict>aside,.lh-dict>main{padding:20px}.lh-dict>aside h3{font-size:14px;margin:0 0 10px}.lh-dict>aside>button{display:flex;justify-content:space-between;width:100%;padding:12px 4px;border:0;border-bottom:1px solid var(--lh-border);background:transparent;cursor:pointer}.lh-dict>aside span{font-size:11px;color:var(--lh-primary)}.lh-dict-langs{display:flex;align-items:end;justify-content:center;gap:13px;padding:14px;background:#f7f8ff;border-radius:13px}.lh-dict-langs label{display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--lh-muted);font-weight:800;text-transform:uppercase}.lh-dict-langs select{padding:8px 12px;border:1px solid var(--lh-border);border-radius:8px;background:#fff}.lh-dict-langs button{width:38px;height:38px;border:1px solid var(--lh-border);border-radius:50%;background:#fff;color:var(--lh-primary);cursor:pointer}.lh-chat+form{display:flex;gap:8px;margin:18px 0}.lh-chat+form input{flex:1;padding:11px 13px;border:1px solid var(--lh-border);border-radius:10px}
#lh-dict-form{position:relative;margin:18px 0}
.lh-dict-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--lh-muted);pointer-events:none}
#lh-dict-input{width:100%;padding:12px 16px 12px 38px;border:1px solid var(--lh-border);border-radius:999px;background:#f7f8ff}
#lh-dict-input:focus{outline:2px solid var(--lh-primary);outline-offset:1px;background:#fff}.lh-filters{display:flex;gap:6px}.lh-filters button{padding:7px 11px;border-radius:999px;border:1px solid var(--lh-border)}.lh-filters button.active{background:var(--lh-soft);border-color:var(--lh-primary);color:var(--lh-primary)}.lh-result{margin-top:16px;padding:20px;border-radius:13px;background:#f7f8ff}.lh-result>div{display:flex;align-items:center;gap:8px}.lh-result strong{font-size:30px;color:var(--lh-primary);margin-right:auto}.lh-result button{padding:7px;border:0;border-radius:8px;background:var(--lh-soft);color:var(--lh-primary);cursor:pointer}.lh-result>span{font-size:13px;color:var(--lh-muted)}.lh-result blockquote{margin:12px 0 0;padding:12px;border-left:3px solid var(--lh-primary);background:#fff}.lh-result small{display:block;margin-top:6px;color:var(--lh-muted)}
.lh-dict-badges{display:flex;align-items:center;gap:8px;margin-top:14px}
.lh-dict-level{padding:4px 9px;border-radius:7px;background:var(--lh-soft);color:var(--lh-primary);font-size:11px;font-weight:800;letter-spacing:.04em}
.lh-dict-badges>span{font-size:12px;color:var(--lh-muted)}
.lh-dict-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--lh-border)}
.lh-dict-section h4{margin:0 0 6px;font-size:13px;color:var(--lh-text)}
.lh-dict-sense{margin-bottom:10px}.lh-dict-sense:last-child{margin-bottom:0}.lh-dict-sense>p{margin:0}.lh-dict-sense i{color:var(--lh-muted);font-style:italic;font-size:12px}.lh-dict-secondary{color:var(--lh-muted);font-weight:400}.lh-dict-sense blockquote{margin:8px 0 0;padding:10px;border-left:3px solid var(--lh-primary);background:#fff;font-size:13px}.lh-dict-sense blockquote small{display:block;margin-top:4px;color:var(--lh-muted)}
.lh-dict-related-list{margin:0;padding-left:18px}.lh-dict-related-list li{margin-bottom:4px}.lh-dict-relation{padding:2px 7px;border-radius:6px;background:var(--lh-soft);color:var(--lh-primary);font-size:11px;font-weight:700;margin:0 4px}
.lh-dict-chars{display:flex;flex-wrap:wrap;gap:8px}.lh-dict-char{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:10px;background:#fff;border:1px solid var(--lh-border);min-width:64px;text-align:center}.lh-dict-char strong{font-size:22px;font-family:var(--font-cjk)}.lh-dict-char span{font-size:11px;color:var(--lh-muted)}.lh-dict-char em{font-style:normal;font-size:11px;color:var(--lh-primary);font-weight:700}.lh-dict-char small{font-size:11px;color:var(--lh-text)}
.lh-dict-ai-badge{padding:2px 7px;border-radius:6px;background:#fff3cd;color:#8a6116;font-size:10px;font-weight:800;letter-spacing:.04em}
.lh-dict-section p{margin:0}.lh-games{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.lh-games article{display:flex;flex-direction:column;align-items:center;padding:28px;text-align:center}.lh-games article>i{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--lh-soft);color:var(--lh-primary);font-size:34px;font-style:normal}.lh-games h3{font-size:19px;margin:15px 0 4px}.lh-games p{color:var(--lh-muted);margin:0 0 15px}.lh-games article>b{padding:6px 9px;margin-bottom:16px;background:#f7f8ff;color:var(--lh-primary);border-radius:8px;font-size:12px}.lh-games .btn{width:100%}.lh-teach{display:grid;grid-template-columns:1fr 1fr;gap:16px}.lh-teach>section{display:flex;flex-direction:column;padding:20px;min-height:480px}.lh-teach textarea{flex:1;min-height:300px;margin:16px 0;padding:14px;border:1px solid var(--lh-border);border-radius:12px;resize:vertical}.lh-segment{display:flex;padding:3px;background:#f2f3fa;border-radius:8px}.lh-segment button{padding:6px 8px;border-radius:6px}.lh-segment button.active{background:#fff;color:var(--lh-primary)}.lh-diff{margin:18px 0;padding:14px;border:1px solid var(--lh-border);border-radius:11px;background:#f7f8ff;line-height:1.6}.lh-diff del{background:#fee2e2;color:#991b1b}.lh-diff ins{background:#d1fae5;color:#065f46;text-decoration:none}.lh-diff.clean del{display:none}.lh-chat{flex:1;overflow:auto;max-height:190px}.lh-chat p{width:max-content;max-width:84%;padding:10px 12px;border-radius:11px;background:#f2f3fa}.lh-chat p.user{margin-left:auto;background:var(--lh-primary);color:#fff}.lh-teach-tabs{display:none}
.lh-modal-bg{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:20px;background:rgba(20,19,48,.55)}.lh-modal-bg[hidden]{display:none}.lh-modal{width:min(680px,95vw);max-height:86vh;padding:24px;border-radius:18px;background:#fff;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.22)}.lh-modal-note{color:var(--lh-muted)}.lh-source-text,.lh-text{font:18px/1.9 var(--font-cjk);padding:18px;border-radius:12px;background:#f7f8ff}.lh-word{border:0;border-radius:6px;background:transparent;cursor:pointer;font:inherit}.lh-word:hover{background:var(--lh-soft);color:var(--lh-primary)}.lh-popover{position:fixed;z-index:1200;width:260px;padding:14px;border:1px solid var(--lh-border);border-radius:12px;background:#fff;box-shadow:0 14px 35px rgba(30,27,75,.2)}.lh-popover>div{display:flex;justify-content:space-between}.lh-popover>div b{font-size:19px;color:var(--lh-primary)}.lh-popover span{font-size:12px;color:var(--lh-muted)}.lh-popover p{margin:7px 0 12px}.lh-popover .btn{width:100%}.lh-toast{position:fixed;z-index:1300;top:82px;right:24px;padding:12px 16px;border-left:4px solid var(--lh-primary);border-radius:9px;background:#fff;box-shadow:0 10px 30px rgba(30,27,75,.2);opacity:0;transform:translateX(20px);pointer-events:none;transition:.2s}.lh-toast.show{opacity:1;transform:none}.lh-empty{padding:14px;border-radius:10px;background:#f7f8ff;color:var(--lh-muted)}
@media(max-width:900px){.learning-hub{margin-top:-24px;padding-inline:18px}.lh-head{align-items:flex-start}.lh-stats{flex-wrap:wrap;justify-content:flex-end}.lh-goal{display:none}.lh-lessons{grid-template-columns:1fr}.lh-games{grid-template-columns:1fr}.lh-teach{grid-template-columns:1fr}.lh-teach-tabs{display:flex;gap:5px;margin-bottom:10px}.lh-teach-tabs button{flex:1;padding:10px;border:1px solid var(--lh-border);border-radius:9px;background:#fff}.lh-teach-tabs button.active{background:var(--lh-primary);color:#fff}.lh-teach>section{display:none;min-height:420px}.lh-teach>section.mobile-active{display:flex}}
@media(max-width:640px){.learning-hub{padding:18px 12px 100px}.lh-head{display:block}.lh-head>div:first-child{margin-bottom:14px}.lh-stats{justify-content:flex-start}.lh-stats>b{display:none}.lh-main-tabs{position:fixed;z-index:90;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:7px;border-radius:0;background:#fff}.lh-main-tabs button{padding:9px 3px;font-size:12px;min-height:44px}.lh-source{align-items:flex-start}.lh-source .btn{white-space:nowrap}.lh-audio{grid-template-columns:auto 1fr auto}.lh-audio time{display:none}.lh-range label{display:block}.lh-range output{display:block;margin-top:5px}.lh-dict{grid-template-columns:1fr}.lh-dict>aside{display:none}.lh-dict-langs{gap:6px}.lh-dict-langs select{max-width:120px}.lh-games{grid-template-columns:1fr}.lh-lessons>button{grid-template-columns:auto 1fr}.lh-lessons>button>strong{display:none}}


.lh-toast[data-kind="error"] { border-left-color: #dc2626; }
.lh-toast[data-kind="info"] { border-left-color: #4f46e5; }
.lh-games article.is-unavailable { opacity: .66; }
.lh-games article.is-unavailable .btn { cursor: not-allowed; }
.lh-flashcard { display: grid; place-items: center; min-height: 220px; padding: 24px; border: 2px solid var(--lh-soft); border-radius: 16px; background: #f7f8ff; cursor: pointer; text-align: center; }
.lh-flashcard b { display: block; color: var(--lh-primary); font-size: clamp(28px, 6vw, 48px); }
.lh-flashcard span { margin-top: 12px; color: var(--lh-muted); }
.lh-flash-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.learning-hub :focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }

/* User follow-up (2026-08-01): .btn-primary is the main app's shared button
   component, colored with its own red --brand — Learning Hub has its own
   purple identity (--lh-primary) and never overrode it, so "Evaluate my
   work", "Play now" etc. rendered red instead of matching the rest of the
   page. Scoped to .learning-hub so the shared component stays red
   everywhere else (Library, novel actions, ...). */
.learning-hub .btn-primary { background: var(--lh-primary); }
.learning-hub .btn-primary:hover { background: var(--lh-primary-dark); }

/* Learning Hub nav restructure (2026-08-01): Main Nav as cards, Learn gated
   behind a language-card picker before the skill buttons show. #lh-lang stays
   in the DOM (hidden) purely so the existing change-event-driven wiring in
   learning-hub-runtime.js (source/audio/focus-words/lessons) keeps working
   unmodified — language cards just drive that same select programmatically. */
.learning-hub[data-learn-stage="lang"] .lh-learn-back,
.learning-hub[data-learn-stage="lang"] .lh-content { display: none; }
.learning-hub[data-learn-stage="skill"] .lh-lang-picker { display: none; }

/* tworks-review 2026-08-01 P2: the bare `hidden` attribute on this label was
   silently overridden by the pre-existing `.lh-stats label{display:flex}`
   rule (an author rule always beats the UA [hidden] default, regardless of
   specificity), so the old Language dropdown stayed visible and focusable
   right next to the new language cards. This class selector outranks
   `.lh-stats label` (two classes vs. one class+type) and actually hides it. */
.lh-stats .lh-lang-native { display: none; }

.lh-learn-back { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.lh-learn-back button { border: 1px solid var(--lh-border); background: var(--lh-white); color: var(--lh-primary); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.lh-learn-back b { font-size: 12px; color: var(--lh-muted); }

.lh-intro-mini { margin: 4px 0 18px; }
.lh-intro-mini h2 { font-size: 26px; margin: 5px 0; }
.lh-intro-mini p { margin: 0; color: var(--lh-muted); font-size: 13px; max-width: 56ch; }

.lh-lang-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.lh-lang-card { display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 22px 20px; background: var(--lh-white); border: 1px solid var(--lh-border); border-radius: 16px; box-shadow: 0 10px 28px rgba(41,39,99,.06); cursor: pointer; transition: .18s; }
.lh-lang-card:hover { transform: translateY(-2px); border-color: var(--lh-primary); box-shadow: 0 12px 30px rgba(79,70,229,.12); }
.lh-lang-top { display: flex; align-items: center; justify-content: space-between; }
.lh-lang-top > span { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--lh-primary); background: var(--lh-soft); padding: 4px 8px; border-radius: 7px; }
.lh-lang-top > b { font-family: var(--font-cjk); font-size: 24px; font-weight: 400; }
.lh-lang-card h3 { margin: 0; font-size: 18px; }
.lh-lang-card small { color: var(--lh-muted); font-size: 12px; }

/* Skill buttons: not covered by any existing max-width rule, so this can be
   restyled directly without fighting the 640px/900px breakpoints below. */
.lh-skills { display: grid; grid-template-columns: 1fr; gap: 8px; border-bottom: 0; margin-bottom: 20px; }
.lh-skills button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border: 1px solid var(--lh-border); border-bottom: 1px solid var(--lh-border); border-radius: 14px; background: var(--lh-white); }
.lh-skills button.active { background: var(--lh-white); border-color: var(--lh-primary); box-shadow: 0 8px 20px rgba(79,70,229,.1); }
.lh-skills button > i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--lh-soft); color: var(--lh-primary); font-size: 18px; font-style: normal; }
.lh-skills button > span { display: flex; flex-direction: column; gap: 2px; }
.lh-skills button > span > b { color: var(--lh-text); }
.lh-skills button > span > small { color: var(--lh-muted); font-size: 11.5px; }

@media (min-width: 641px) {
  .lh-lang-grid { grid-template-columns: repeat(3, 1fr); }
  .lh-skills { grid-template-columns: repeat(4, 1fr); }
  /* User follow-up (2026-08-01): 2 columns of larger, squarer cards rather
     than 4 narrow ones in a single row — icon stacked ABOVE the title/
     description (matching the original mockup's column-flex .nav-card),
     not sitting beside them. */
  .lh-main-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0; }
  /* tworks-review follow-up (2026-08-01): each card needs its OWN background/
     border/shadow — without one, only the shared .lh-main-tabs container had
     a visible boundary, so the 3 non-active cards had nothing separating them
     and read as one continuous strip ("dính nhau") instead of 4 distinct
     cards like the approved mockup. */
  .lh-main-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; padding: 28px; min-height: 168px; border-radius: 18px; background: var(--lh-white); border: 1px solid var(--lh-border); box-shadow: 0 10px 28px rgba(41,39,99,.06); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .lh-main-tabs button:not(.active):hover { transform: translateY(-3px); border-color: var(--lh-primary); box-shadow: 0 14px 32px rgba(79,70,229,.14); }
  .lh-main-tabs button.active { border-color: var(--lh-primary); }
  .lh-main-tabs button > i { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--lh-soft); color: var(--lh-primary); font-size: 24px; font-style: normal; }
  .lh-main-tabs button.active > i { background: rgba(255,255,255,.2); color: #fff; }
  .lh-main-tabs button > span { display: flex; flex-direction: column; gap: 6px; }
  .lh-main-tabs button > span > b { font-size: 17px; }
  .lh-main-tabs button > span > small { font-weight: 500; font-size: 11.5px; opacity: .85; }
}
@media (max-width: 640px) {
  .lh-main-tabs button > i, .lh-main-tabs button > span > small { display: none; }
}

/* tworks-review follow-up (2026-08-01): the approved mockup is a true
   drill-down — Main Nav cards fully replace with the section you open, not
   a persistent bar sitting above it. data-home-stage is the layer switch:
   "home" shows only the 4 Main Nav cards, "section" swaps to the crumb +
   whichever panel is active. */
.learning-hub[data-home-stage="home"] .lh-crumbs,
.learning-hub[data-home-stage="home"] .lh-panels { display: none; }
.learning-hub[data-home-stage="section"] .lh-main-tabs,
.learning-hub[data-home-stage="section"] .lh-head { display: none; }

.lh-crumbs { display: flex; align-items: center; gap: 8px; margin: -6px 0 18px; font-size: 12.5px; font-weight: 700; color: var(--lh-muted); }
.lh-crumbs button { font: inherit; font-weight: 700; color: var(--lh-primary); background: none; border: 0; padding: 0; cursor: pointer; }
.lh-crumbs button:hover { text-decoration: underline; }
.lh-crumbs .sep { opacity: .55; }
.lh-crumbs .here { color: var(--lh-text); }

/* tworks-review follow-up (2026-08-01): .learning-hub's base min-height:
   calc(100vh - 90px) made sense when every stage showed a full screen of
   content — but the Home layer now shows only the 4 Main Nav cards, so that
   same forced height left a large, unbalanced empty gap below them. Home
   hugs its own content instead; "section" stage keeps the original
   viewport-filling height unchanged. */
.learning-hub[data-home-stage="home"] { min-height: 0; padding-bottom: 48px; }

/* User follow-up (2026-08-01): Learning Hub opens as its own standalone tab
   (see app.js's navButtons click wiring) and never shows the shared
   site-header (Home/Library/Learning Hub/Search/Account) — set on <body> by
   render() whenever state.view === 'learning'. .learning-hub's -32px top
   margin exists to pull it up flush under that header; with the header
   gone entirely it would instead clip against the viewport top, so reset
   it to a normal positive margin in this mode. */
body.learning-hub-standalone .site-header { display: none; }
body.learning-hub-standalone .learning-hub { margin-top: 0; }