:root{
  --bg:#000215;
  --sidebar-bg:#000536;
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.12);
  --orange:#ff3e00;
  --coral:#ed7c58;
  --blue:#0207de;
  --sky:#0089d1;
  --green:#0089d1;
  --white:#fff;
  --dim35:rgba(255,255,255,.35);
  --dim45:rgba(255,255,255,.45);
  --dim65:rgba(255,255,255,.65);
  --dim85:rgba(255,255,255,.85);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{color:#fff;font-family:'Montserrat',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--coral)}
::selection{background:var(--orange);color:#fff}
button{font-family:inherit}

@keyframes hgFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.app{display:flex;align-items:stretch;min-height:100vh;background:var(--bg);color:#fff}

/* ---------- Sidebar ---------- */
.sidebar{
  width:308px;flex:0 0 308px;background:var(--sidebar-bg);
  border-right:1px solid var(--border);height:100vh;position:sticky;top:0;
  display:flex;flex-direction:column;overflow:hidden;
}
.sidebar-header{padding:28px 28px 22px;border-bottom:1px solid var(--border)}
.sidebar-kicker{font-size:9px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--orange)}
.sidebar-title{margin-top:10px;font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.sidebar-sub{margin-top:6px;font-size:11px;font-weight:300;color:var(--dim45)}

.sidebar-progress{padding:24px 28px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--border)}
.ring-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:6}
.ring-value{fill:none;stroke:var(--orange);stroke-width:6;stroke-linecap:butt;stroke-dasharray:201.06;transition:stroke-dashoffset .3s ease-out}
.ring-pct{font-size:28px;font-weight:800;line-height:1;letter-spacing:-.02em}
.ring-pct span{font-size:15px;font-weight:600}
.ring-label{margin-top:7px;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim45)}

.sidebar-auth{padding:20px 28px;border-bottom:1px solid var(--border)}
.auth-account{display:flex;align-items:center;justify-content:space-between;gap:10px}
.auth-email{font-size:11.5px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-summary{
  display:none;cursor:pointer;list-style:none;padding:11px 16px;background:transparent;
  border:1px solid var(--border-strong);color:var(--dim65);font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;text-align:center;
}
.auth-summary::-webkit-details-marker{display:none}
.auth-summary:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.auth-details[open] .auth-summary{margin-bottom:12px}
.auth-form{display:flex;flex-direction:column;gap:8px}
.auth-tabs{display:flex;gap:8px;margin-bottom:2px}
.auth-tabs .pill{flex:1;text-align:center;padding:8px 10px}
.auth-input{
  width:100%;padding:11px 12px;background:rgba(255,255,255,.05);border:1px solid var(--border-strong);
  color:#fff;font-family:inherit;font-size:12.5px;border-radius:0;
}
.auth-input::placeholder{color:var(--dim35)}
.auth-input:focus{outline:none;border-color:var(--orange)}
.auth-error{font-size:11px;font-weight:500;line-height:1.5;color:var(--orange)}
.auth-note{margin-top:2px;font-size:10px;font-weight:300;line-height:1.5;color:var(--dim35)}

.sidebar-nav{flex:1;overflow-y:auto;padding:14px 0}
.sidebar-nav-heading{padding:0 28px 10px;font-size:9px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--dim35)}
.nav-item{
  width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;padding:12px 28px;
  background:transparent;border:0;border-left:3px solid transparent;color:#fff;cursor:pointer;
  transition:background .2s;
}
.nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item.is-active{background:rgba(255,255,255,.06);border-left-color:var(--orange)}
.nav-item-num{flex:0 0 24px;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--dim35);padding-top:2px}
.nav-item.is-active .nav-item-num{color:var(--orange)}
.nav-item-body{flex:1;min-width:0}
.nav-item-title{display:block;font-size:12.5px;font-weight:600;line-height:1.35}
.nav-item-status{display:block;margin-top:4px;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

.sidebar-footer{padding:18px 28px 22px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}

.btn{font-family:inherit;cursor:pointer;transition:opacity .2s,transform .2s,border-color .2s,color .2s;border:0}
.btn:active{transform:translateY(0) scale(.985)}
.btn-block{width:100%}
.btn-primary{padding:13px 16px;background:var(--orange);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.btn-primary:hover{opacity:.88;transform:translateY(-1px)}
.btn-primary.lg{padding:16px 30px;font-size:11px}
.btn-ghost{padding:11px 16px;background:transparent;border:1px solid var(--border-strong);color:var(--dim45);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.btn-outline{padding:16px 30px;background:transparent;border:1px solid var(--border-strong);color:#fff;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.btn-outline:hover{border-color:var(--orange)}
.btn-text{background:transparent;border:0;padding:0;color:var(--dim45);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.btn-text:hover{color:var(--orange)}
.btn-text.dim{color:var(--dim35)}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;overflow-x:hidden}
.view{animation:hgFade .3s ease-out}

/* ---------- Overview ---------- */
.view-overview{max-width:1000px;padding:88px 72px 96px}
.kicker{font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--orange)}
.hero-title{margin:22px 0 0;font-size:52px;font-weight:800;letter-spacing:-.02em;line-height:1.06;max-width:760px;text-wrap:pretty}
.hero-sub{margin:26px 0 0;max-width:620px;font-size:16px;font-weight:300;line-height:1.68;color:var(--dim65)}
.hero-actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:72px;padding-top:40px;border-top:1px solid var(--border)}
.stat-value{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--orange)}
.stat-label{margin-top:14px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim45)}

.modules-heading{margin-top:76px;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px}
.modules-heading h2{margin:0;font-size:26px;font-weight:700;letter-spacing:-.01em}
.pass-mark{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dim35)}

.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
.module-card{
  text-align:left;padding:26px 26px 24px;background:rgba(255,255,255,.04);border:0;
  border-top:2px solid var(--orange);color:#fff;cursor:pointer;transition:background .2s;width:100%;
}
.module-card:hover{background:rgba(255,255,255,.07)}
.module-card-head{display:flex;align-items:baseline;gap:14px}
.module-card-num{font-size:11px;font-weight:800;letter-spacing:.1em}
.module-card-title{flex:1;font-size:16px;font-weight:600;line-height:1.3}
.module-card-summary{margin:14px 0 0;font-size:12.5px;font-weight:300;line-height:1.6;color:var(--dim65)}
.module-card-foot{margin-top:18px;display:flex;align-items:center;gap:14px}
.module-card-status{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.module-card-bar{flex:1;height:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.module-card-bar-fill{position:absolute;left:0;top:0;bottom:0;background:var(--orange)}
.module-card-qcount{font-size:9.5px;font-weight:600;letter-spacing:.1em;color:var(--dim35)}

.footnote{margin:44px 0 0;max-width:620px;font-size:11.5px;font-weight:300;line-height:1.7;color:var(--dim35)}

/* ---------- Lesson ---------- */
.view-lesson{max-width:800px;padding:64px 72px 96px}
.lesson-eyebrow{margin-top:34px;font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--orange)}
.lesson-title{margin:20px 0 0;font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:pretty}
.rule{width:44px;height:2px;background:var(--orange);margin-top:26px}
.lesson-summary{margin:26px 0 0;font-size:16px;font-weight:300;line-height:1.68;color:var(--dim65)}

.stub-note{margin-top:36px;padding:22px 26px;background:rgba(2,7,222,.12);border:1px solid rgba(2,7,222,.25)}
.stub-note-label{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.stub-note p{margin:12px 0 0;font-size:13px;font-weight:300;line-height:1.65;color:var(--dim85)}

.lesson-blocks{margin-top:46px;display:flex;flex-direction:column;gap:26px}
.block-h{margin:14px 0 0;font-size:20px;font-weight:700;letter-spacing:-.005em}
.block-p{margin:0;font-size:15px;font-weight:300;line-height:1.72;color:var(--dim85)}
.block-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.block-list li{padding:2px 0 2px 18px;border-left:3px solid var(--orange);font-size:14px;font-weight:300;line-height:1.65;color:var(--dim85)}
.block-rows{border-top:1px solid var(--border-strong)}
.block-row{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:15px 0;border-bottom:1px solid var(--border)}
.block-row-a{font-size:12px;font-weight:700;letter-spacing:.06em;color:#fff}
.block-row-b{font-size:13.5px;font-weight:300;line-height:1.6;color:var(--dim65)}
.block-key{border-left:5px solid var(--orange);padding:4px 0 4px 24px}
.block-key-label{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.block-key-text{margin-top:12px;font-size:17px;font-weight:400;line-height:1.55}

.lesson-quiz-cta{margin-top:60px;padding-top:36px;border-top:1px solid var(--border)}
.lesson-quiz-kicker{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--orange)}
.lesson-quiz-count{margin-top:16px;font-size:24px;font-weight:700;letter-spacing:-.01em}
.feedback-row{margin-top:24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.feedback-label{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dim45)}
.pill{padding:9px 18px;background:transparent;border:1px solid var(--border-strong);color:var(--dim65);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:border-color .2s}
.pill.is-on{background:var(--orange);border-color:var(--orange);color:#fff}

/* ---------- Quiz ---------- */
.view-quiz{max-width:800px;padding:52px 72px 96px}
.quiz-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.quiz-progress-track{margin-top:22px;height:2px;background:rgba(255,255,255,.1)}
.quiz-progress-fill{height:2px;background:var(--orange);transition:width .25s ease-out}
.quiz-meta{margin-top:16px;display:flex;justify-content:space-between;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim45)}
.quiz-question{margin:40px 0 0;font-size:28px;font-weight:600;line-height:1.35;letter-spacing:-.01em;text-wrap:pretty}
.quiz-options{margin-top:34px;display:flex;flex-direction:column;gap:10px}
.quiz-option{
  display:flex;align-items:center;gap:18px;width:100%;text-align:left;padding:18px 22px;
  background:rgba(255,255,255,.04);border:1px solid var(--border-strong);color:#fff;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.quiz-option[disabled]{cursor:default}
.quiz-option-letter{flex:0 0 22px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--dim35)}
.quiz-option-text{flex:1;font-size:15px;font-weight:400;line-height:1.5}
.quiz-option-mark{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:transparent}
.quiz-option.is-picked{background:rgba(2,7,222,.16);border-color:var(--sky)}
.quiz-option.is-picked .quiz-option-letter{color:var(--sky)}
.quiz-option.is-correct{background:rgba(0,137,209,.14);border-color:var(--green)}
.quiz-option.is-correct .quiz-option-letter{color:var(--green)}
.quiz-option.is-correct .quiz-option-mark{color:var(--green)}
.quiz-option.is-wrong{background:rgba(255,62,0,.12);border-color:var(--orange)}
.quiz-option.is-wrong .quiz-option-letter{color:var(--orange)}
.quiz-option.is-wrong .quiz-option-mark{color:var(--orange)}
.quiz-why{margin-top:26px;padding:22px 26px;background:rgba(255,255,255,.04);border-left:5px solid var(--orange)}
.quiz-why.is-correct{border-left-color:var(--green)}
.quiz-why-label{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.quiz-why.is-correct .quiz-why-label{color:var(--green)}
.quiz-why p{margin:12px 0 0;font-size:14px;font-weight:300;line-height:1.68;color:var(--dim85)}
.quiz-actions{margin-top:36px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn-next{padding:15px 30px;background:rgba(255,255,255,.07);border:0;color:var(--dim35);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:not-allowed;transition:opacity .2s}
.btn-next.is-enabled{background:var(--orange);color:#fff;cursor:pointer}
.btn-back{padding:15px 24px;background:transparent;border:1px solid var(--border-strong);color:var(--dim65);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.btn-back:hover{border-color:rgba(255,255,255,.35);color:#fff}

/* ---------- Results ---------- */
.view-results{max-width:820px;padding:72px 72px 96px}
.result-eyebrow{font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase}
.result-score-row{margin-top:26px;display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.result-score{font-size:104px;font-weight:800;line-height:.9;letter-spacing:-.04em}
.result-score span{font-size:40px}
.result-side{padding-bottom:12px}
.result-line{font-size:22px;font-weight:700;letter-spacing:-.01em}
.result-sub{margin-top:8px;font-size:12px;font-weight:300;color:var(--dim65)}
.result-rule{width:44px;height:2px;margin-top:32px}
.signup-nudge{
  margin-top:36px;padding:20px 24px;background:rgba(255,62,0,.08);border:1px solid rgba(255,62,0,.25);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.signup-nudge-text{flex:1;min-width:220px;font-size:13px;font-weight:300;line-height:1.6;color:var(--dim85)}
.signup-nudge-text strong{font-weight:700;color:#fff}
.signup-nudge-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.result-actions{margin-top:44px;display:flex;gap:12px;flex-wrap:wrap}

.review-heading{margin:72px 0 0;font-size:22px;font-weight:700;letter-spacing:-.01em}
.review-list{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.review-item{padding:22px 24px;background:rgba(255,255,255,.04);border-left:5px solid var(--orange)}
.review-item.is-correct{border-left-color:var(--green)}
.review-item-row{display:flex;align-items:baseline;gap:14px}
.review-tag{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;flex:0 0 60px;color:var(--orange)}
.review-item.is-correct .review-tag{color:var(--green)}
.review-body{flex:1;min-width:0}
.review-q{font-size:15px;font-weight:500;line-height:1.5}
.review-given,.review-correct{margin-top:12px;font-size:12.5px;font-weight:300;line-height:1.6;color:var(--dim45)}
.review-correct{margin-top:6px}
.review-given b,.review-correct b{font-weight:500;color:#fff}
.review-why{margin:14px 0 0;font-size:12.5px;font-weight:300;line-height:1.68;color:var(--dim65)}

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  .app{flex-direction:column}
  .main{order:1}
  .sidebar{width:100%;flex:none;position:relative;height:auto;border-right:0;border-bottom:1px solid var(--border);order:2}
  .sidebar-nav{max-height:280px}
  .auth-summary{display:block}
  .view-overview,.view-lesson,.view-quiz,.view-results{padding-left:28px!important;padding-right:28px!important}
  .stats-row{grid-template-columns:repeat(2,1fr);gap:24px}
  .module-grid{grid-template-columns:1fr}
  .hero-title{font-size:36px!important}
  .result-score{font-size:64px!important}
}