.feature-nav{
  display:flex; gap:5px; overflow:auto; margin:4px 0 26px; padding:5px;
  background:#121211; border:1px solid var(--line); border-radius:13px;
  scrollbar-width:none;
}
.feature-nav button{
  border:0; border-radius:9px; padding:9px 14px; white-space:nowrap;
  background:transparent; color:var(--muted); font-size:12.5px; font-weight:650; cursor:pointer;
}
.feature-nav button:hover{color:var(--ink)}
.feature-nav button.active{background:var(--surface-3); color:var(--ink); box-shadow:0 1px rgba(255,255,255,.04)}
.nav-count{color:var(--warn)}
.feature-view{display:none}
.feature-view.active{display:block; animation:view-in .2s ease-out}
@keyframes view-in{from{opacity:0;transform:translateY(4px)}}
.attempt-link{
  border:0; background:none; color:var(--blue); font-size:11px; padding:2px 0 2px 10px;
  cursor:pointer; opacity:.8; white-space:nowrap;
}
.attempt-link:hover{opacity:1; text-decoration:underline}
.checks li{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.checks li label{flex:1}
.checks li.ck .attempt-link{text-decoration:none}

.feature-head{display:flex; justify-content:space-between; gap:18px; align-items:end; margin:4px 0 18px}
.feature-head h2{font-size:24px; letter-spacing:-.025em}
.feature-head p{font-size:13px; color:var(--muted); margin-top:3px}
.feature-kicker{color:var(--warn); font-size:10.5px; font-weight:800; letter-spacing:.14em}
.feature-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.enh-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-radius:var(--r); padding:17px;
}
.enh-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(285px,.8fr); gap:14px}
.enh-stack{display:grid; gap:14px}
.enh-title{font-size:17px; letter-spacing:-.015em}
.enh-meta{font-size:11.5px; color:var(--muted); margin-top:3px}
.enh-tag{font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--blue)}
.enh-tag.warn{color:var(--warn)} .enh-tag.good{color:var(--good)} .enh-tag.violet{color:var(--violet)}
.enh-empty{text-align:center; padding:44px 20px; color:var(--muted)}
.enh-empty strong{display:block; color:var(--ink-2); font-size:15px; margin-bottom:5px}
.enh-input,.enh-select,.enh-textarea{
  width:100%; color:var(--ink); background:#121211; border:1px solid var(--line);
  border-radius:9px; padding:9px 10px; outline:none;
}
.enh-input:focus,.enh-select:focus,.enh-textarea:focus{border-color:color-mix(in srgb,var(--blue) 60%,var(--line))}
.enh-textarea{min-height:84px; resize:vertical}
.enh-filters{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px}
.enh-filters .enh-input{flex:1; min-width:220px}
.filter-chip{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:9px; padding:8px 10px; font-size:11.5px; cursor:pointer}
.filter-chip.active{color:var(--blue); border-color:color-mix(in srgb,var(--blue) 55%,var(--line)); background:color-mix(in srgb,var(--blue) 8%,transparent)}

.roadmap-tools{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 15px}
.roadmap-tools .enh-input{flex:1; min-width:210px}
.roadmap-tools .enh-select{width:auto; min-width:135px}
.roadmap-empty{display:none; padding:25px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--r)}

.review-row{
  display:grid; grid-template-columns:70px 1fr auto; gap:14px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:14px; margin-bottom:9px;
}
.review-due{text-align:center; color:var(--warn); font-size:10px; font-weight:800; letter-spacing:.04em}
.review-due.overdue{color:var(--serious)}
.review-row h3{font-size:14px}.review-row p{font-size:11px; color:var(--muted); margin-top:3px}
.confidence-buttons{display:flex; gap:4px}
.confidence-buttons button{width:29px;height:29px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;cursor:pointer}
.confidence-buttons button:hover{border-color:var(--good);color:var(--good)}

.mock-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);gap:14px}
.mock-timer{text-align:center;padding:32px}
.mock-clock{font:650 64px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:-.07em}
.mock-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px 0}
.mock-prompt{text-align:left;background:#121211;border:1px solid var(--line);border-radius:12px;padding:15px}
.rubric-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.rubric-row:first-of-type{border-top:0}
.rubric-row span{font-size:12px}
.score-buttons{display:flex;gap:3px}.score-buttons button{width:27px;height:27px;border:1px solid var(--line);background:var(--surface-2);border-radius:7px;font-size:11px;cursor:pointer}
.score-buttons button.active{background:var(--good);border-color:var(--good);color:#07130c}

.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px}
.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px}
.metric-card span{font-size:10px;color:var(--muted);letter-spacing:.08em}.metric-card b{display:block;font-size:25px;margin-top:2px}
.analytics-grid{display:grid;grid-template-columns:1.45fr .75fr;gap:14px}
.topic-row{display:grid;grid-template-columns:110px 1fr 38px;gap:9px;align-items:center;margin-top:11px;font-size:11.5px}
.topic-bar{height:7px;background:var(--surface-3);border-radius:99px;overflow:hidden}.topic-bar i{display:block;height:100%;background:var(--blue);border-radius:inherit}
.heatmap{display:grid;grid-template-columns:repeat(14,1fr);gap:5px;margin-top:14px}.heatmap i{aspect-ratio:1;border-radius:4px;background:color-mix(in srgb,var(--good) var(--level),var(--surface-3))}

.practice-tabs{display:flex;gap:15px;border-bottom:1px solid var(--line);margin-bottom:15px}
.practice-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:9px 1px;cursor:pointer}
.practice-tabs button.active{color:var(--ink);border-color:var(--violet)}
.practice-panel{display:none}.practice-panel.active{display:block}
.worksheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.worksheet-field{background:#121211;border:1px solid var(--line);border-radius:11px;padding:11px}
.worksheet-field.full{grid-column:1/-1}.worksheet-field label,.form-field label{display:block;font-size:9.5px;letter-spacing:.1em;color:var(--violet);font-weight:800;margin-bottom:6px}
.worksheet-field textarea{border:0;background:none;padding:0;min-height:72px}
.story-row{display:grid;grid-template-columns:1fr auto;gap:13px;padding:13px 0;border-top:1px solid var(--line)}
.story-row:first-child{border-top:0}.story-row h3{font-size:14px}.story-row p{font-size:11px;color:var(--muted);margin-top:3px}.story-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.mini-pill{font-size:10px;border:1px solid var(--line);border-radius:99px;padding:3px 7px;color:var(--ink-2)}

.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.7);display:flex;justify-content:flex-end}
.modal-sheet{width:min(480px,100%);height:100%;overflow:auto;background:#121312;border-left:1px solid var(--line);padding:23px;box-shadow:-25px 0 70px rgba(0,0,0,.35)}
.modal-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:18px}
.modal-head h2{font-size:20px}.modal-close{width:34px;height:34px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;cursor:pointer}
.form-field{margin-top:13px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.modal-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.modal-metric{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px}.modal-metric b{display:block;font-size:18px}.modal-metric span{font-size:9px;color:var(--muted)}
.offline-badge{font-size:11px;color:var(--good)}
.concept-lesson{margin-bottom:16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.concept-lesson ol,.historical-lessons ul{padding-left:20px;margin:8px 0}
.concept-lesson li,.historical-lessons li{font-size:12px;line-height:1.6;margin:6px 0}
.anchor-note{font-size:12px;line-height:1.6;margin:6px 0 12px;color:var(--ink-2)}
.historical-lessons{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.historical-lessons summary{cursor:pointer;color:var(--violet);font-size:12px;line-height:1.5;font-weight:700}
.historical-lessons article{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.historical-lessons h4{font-size:12px;margin-bottom:6px}.historical-lessons p{font-size:12px;line-height:1.6}

@media(max-width:780px){
  .feature-head{align-items:flex-start;flex-direction:column}
  .enh-grid,.mock-layout,.analytics-grid{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:1fr 1fr}
  .review-row{grid-template-columns:54px 1fr}.confidence-buttons{grid-column:2}
  .worksheet-grid{grid-template-columns:1fr}.worksheet-field.full{grid-column:auto}
  .form-row{grid-template-columns:1fr}.mock-clock{font-size:52px}
  .topic-row{grid-template-columns:82px 1fr 32px}
}