:root{--bg-hero: #0C0F14;--bg-hero-soft: #151A22;--surface: #FFFFFF;--surface-sunk: #F1F3F6;--surface-raised: #FFFFFF;--line: #E2E6EC;--line-hero: rgba(255, 255, 255, .12);--ink: #12151B;--ink-soft: #5B6472;--ink-muted: #8C96A5;--ink-on-hero: #F5F6F8;--ink-on-hero-soft: rgba(245, 246, 248, .65);--red: #D81F2C;--red-deep: #8F1219;--red-wash: rgba(216, 31, 44, .1);--gold: #D9A441;--gold-wash: rgba(217, 164, 65, .12);--listening: #2E4F9E;--reading: #1E86A8;--writing: #B9862E;--speaking: #6C55A3;--homework: #0F766E;--classwork: #475569;--shadow-hero: 0 24px 60px rgba(0, 0, 0, .35);--shadow-card: 0 3px 0 rgba(18, 21, 27, .08);--radius: 6px;color-scheme:light}[data-theme=dark]{--bg-hero: #070A0F;--bg-hero-soft: #0F141E;--surface: #111622;--surface-sunk: #171E2D;--surface-raised: #1C2436;--line: #252F42;--line-hero: rgba(255, 255, 255, .1);--ink: #F1F5F9;--ink-soft: #94A3B8;--ink-muted: #64748B;--ink-on-hero: #F8FAFC;--ink-on-hero-soft: rgba(241, 245, 249, .68);--red: #EF4444;--red-deep: #B91C1C;--red-wash: rgba(239, 68, 68, .15);--gold: #F59E0B;--gold-wash: rgba(245, 158, 11, .15);--listening: #60A5FA;--reading: #38BDF8;--writing: #FBBF24;--speaking: #C084FC;--homework: #34D399;--classwork: #CBD5E1;--shadow-hero: 0 24px 60px rgba(0, 0, 0, .6);--shadow-card: 0 3px 0 rgba(0, 0, 0, .3);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--surface);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;transition:background-color .15s ease,color .15s ease}a{color:inherit;text-decoration:none}::selection{background:var(--red);color:#fff}.top-navbar{background:#0c0f14d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-hero);position:sticky;top:0;z-index:1000;box-shadow:0 4px 24px #00000040;transition:background-color .15s ease,border-color .15s ease}[data-theme=dark] .top-navbar{background:#070a0fd9}.nav-container{max-width:1060px;margin:0 auto;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.nav-brand{display:flex;align-items:center;gap:10px;font-family:Archivo Black,sans-serif;font-weight:400;font-size:17px;color:var(--ink-on-hero);text-transform:uppercase;letter-spacing:-.01em}.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--red)}.nav-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.nav-link{font-family:Inter,sans-serif;font-size:13px;font-weight:600;color:var(--ink-on-hero-soft);transition:color .12s ease;padding:6px 10px;border-radius:4px}.nav-link:hover,.nav-link.active{color:var(--ink-on-hero);background:#ffffff0f}.nav-btn-outline{font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:600;background:transparent;color:var(--ink-on-hero-soft);border:1px solid var(--line-hero);border-radius:4px;padding:5px 12px;cursor:pointer;transition:all .12s ease}.nav-btn-outline:hover{color:var(--ink-on-hero);border-color:var(--ink-on-hero);background:#ffffff0d}.theme-toggle-btn{font-family:IBM Plex Mono,monospace;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--gold);background:#ffffff0f;border:1px solid var(--line-hero);border-radius:20px;padding:5px 12px;cursor:pointer;transition:all .12s ease}.theme-toggle-btn:hover{background:#ffffff1f;color:#fff;transform:translateY(-1px)}.theme-toggle-btn svg{width:13px;height:13px}.branch-badge{display:inline-flex;align-items:center;gap:6px;background:#ffffff0f;border:1px solid var(--line-hero);border-radius:4px;padding:4px 10px;font-family:IBM Plex Mono,monospace;font-size:11.5px;color:var(--ink-on-hero)}.hero{background:radial-gradient(circle at 85% -10%,rgba(216,31,44,.18),transparent 55%),var(--bg-hero);color:var(--ink-on-hero);padding:48px 24px 56px;position:relative;overflow:hidden;box-shadow:var(--shadow-hero)}.hero:after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--red),var(--gold))}.hero-inner{max-width:1040px;margin:0 auto}.hero-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:IBM Plex Mono,monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-on-hero-soft);background:#ffffff0d;border:1px solid var(--line-hero);border-radius:4px;padding:6px 12px;line-height:1}.hero-eyebrow .n{color:var(--red);font-size:8px;line-height:1}.dot-headline{font-family:Archivo Black,Inter,sans-serif;font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:-.01em;font-size:clamp(32px,5.5vw,60px);margin:0;color:var(--ink-on-hero)}.dot-headline .seg{display:inline}.dot-headline .dot{color:var(--red);background:transparent;width:auto;height:auto;border-radius:0;display:inline}.hero p.hero-sub{color:var(--ink-on-hero-soft);font-size:15.5px;max-width:56ch;margin:16px 0 28px;line-height:1.5}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:30px}.hero-stats{display:flex;gap:14px;flex-wrap:wrap}.hero-stat{font-family:IBM Plex Mono,monospace;border:1px solid var(--line-hero);border-radius:4px;padding:10px 18px;min-width:110px;background:#ffffff0a}.hero-stat .n{display:block;font-size:24px;font-weight:700;color:var(--red)}.hero-stat .label{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-on-hero-soft);margin-top:3px}.btn{font-family:Inter,sans-serif;font-weight:600;font-size:14px;padding:10px 20px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .12s ease,box-shadow .12s ease;display:inline-flex;align-items:center;gap:8px}.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}.btn-primary:hover:not(:disabled){background:var(--red-deep);transform:translateY(-1px);box-shadow:0 4px 12px #d81f2c59}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:6px 12px;font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s ease}.btn-ghost:hover{border-color:var(--ink);background:var(--surface-sunk)}.hero .btn-ghost,.hero-actions .btn-ghost{color:var(--ink-on-hero);border-color:var(--line-hero);background:transparent}.hero .btn-ghost:hover,.hero-actions .btn-ghost:hover{border-color:var(--ink-on-hero);background:#ffffff14}.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:6px 12px;font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .12s ease;display:inline-flex;align-items:center;gap:4px}.btn-secondary:hover{border-color:var(--red);color:var(--red);background:var(--surface-sunk)}.btn-edit{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:4px 10px;font-family:Inter,sans-serif;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .12s ease}.btn-edit:hover{border-color:var(--gold);color:var(--gold);background:var(--surface-sunk)}.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red);border-radius:4px;padding:6px 12px;font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .12s ease}.btn-danger:hover{background:var(--red);color:#fff}.back-btn{display:inline-flex;align-items:center;gap:6px;font-family:IBM Plex Mono,monospace;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-on-hero-soft);background:#ffffff0d;border:1px solid var(--line-hero);border-radius:4px;padding:6px 12px;cursor:pointer;line-height:1;transition:all .12s ease}.back-btn:hover{color:var(--ink-on-hero);border-color:var(--ink-on-hero);background:#ffffff1f}.back-btn svg{width:13px;height:13px}.section{max-width:1040px;margin:0 auto;padding:40px 24px}.section-eyebrow{font-family:IBM Plex Mono,monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:8px}.section h2,.section-title{font-family:Archivo Black,sans-serif;font-weight:400;font-size:clamp(22px,3vw,32px);text-transform:uppercase;margin:0 0 8px;letter-spacing:-.01em;color:var(--ink)}.section .lede{color:var(--ink-soft);font-size:15px;max-width:56ch;margin:0 0 24px;line-height:1.5}.spotlight{background:linear-gradient(160deg,var(--gold-wash),var(--surface) 65%);border:2px solid var(--gold);border-radius:var(--radius);padding:24px 28px;display:flex;align-items:center;gap:20px;box-shadow:0 6px #12151b0f;margin-bottom:24px;transition:transform .12s ease,box-shadow .12s ease}.spotlight:hover{transform:translateY(-2px);box-shadow:0 8px 20px #d9a44133}.spotlight-badge{flex:none;width:64px;height:64px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-family:IBM Plex Mono,monospace;font-weight:700;font-size:22px;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--gold)}.spotlight-eyebrow{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:4px}.spotlight-name{font-family:Archivo Black,sans-serif;font-weight:400;font-size:22px;text-transform:uppercase;color:var(--ink)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:32px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;display:flex;flex-direction:column;justify-content:space-between}.card:hover{transform:translateY(-3px);box-shadow:0 8px 18px #12151b1a;border-color:var(--red)}.card-badge{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:IBM Plex Mono,monospace;font-weight:700;font-size:14px;margin-bottom:12px;color:var(--ink);transition:background .12s ease,color .12s ease,border-color .12s ease}.card:hover .card-badge{background:var(--red);border-color:var(--red);color:#fff}.card-title{font-family:Archivo Black,sans-serif;font-weight:400;font-size:16px;text-transform:uppercase;margin-bottom:8px;color:var(--ink)}.row-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:32px}.row{background:var(--surface-sunk);display:flex;align-items:center;gap:16px;padding:14px 20px;transition:background .12s ease}.row:hover{background:var(--surface-raised)}.row-badge{flex:none;width:32px;height:32px;border-radius:50%;border:2px solid var(--ink-soft);display:flex;align-items:center;justify-content:center;font-family:IBM Plex Mono,monospace;font-weight:700;font-size:12.5px;color:var(--ink)}.row-name{font-weight:600;font-size:15px;flex:1;min-width:140px;color:var(--ink)}.row-meta{font-family:IBM Plex Mono,monospace;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}.pills{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.pill{font-family:IBM Plex Mono,monospace;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;border:1px solid transparent;letter-spacing:.01em;display:inline-flex;align-items:center;gap:4px}.pill.listening{background:#2e4f9e1f;color:var(--listening);border-color:#2e4f9e59}.pill.reading{background:#1e86a81f;color:var(--reading);border-color:#1e86a859}.pill.writing{background:#b9862e1f;color:var(--writing);border-color:#b9862e59}.pill.speaking{background:#6c55a31f;color:var(--speaking);border-color:#6c55a359}.pill.homework{background:#0f766e1f;color:var(--homework);border-color:#0f766e59}.pill.classwork{background:#4755691f;color:var(--classwork);border-color:#47556959}.pill.disabled{background:transparent;color:var(--ink-muted);border-color:var(--line)}.key-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:28px}.key-item{background:var(--surface);padding:18px}.key-num{font-family:IBM Plex Mono,monospace;font-size:12px;color:var(--red);font-weight:700;margin-bottom:8px}.key-title{font-weight:700;font-size:14.5px;margin-bottom:4px;color:var(--ink)}.key-body{font-size:12.5px;color:var(--ink-soft);line-height:1.45}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:24px}.toolbar input,.search-input{flex:1;min-width:220px;font-family:Inter,sans-serif;font-size:14.5px;padding:11px 16px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);outline:none;transition:border-color .12s ease,box-shadow .12s ease}.toolbar input:focus,.search-input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}.status{font-family:IBM Plex Mono,monospace;font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:7px;white-space:nowrap}.status .dot,.status-dot{width:7px;height:7px;border-radius:50%;background:#10b981;display:inline-block;flex-shrink:0}.status .dot.err,.status-dot.err{background:var(--red)}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.form-label{font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}.form-input,.form-select{font-family:Inter,sans-serif;font-size:14px;padding:10px 14px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);outline:none;transition:border-color .12s ease,box-shadow .12s ease}.form-input:focus,.form-select:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}.mode-switch{display:inline-flex;background:var(--surface-sunk);padding:4px;border-radius:6px;border:1px solid var(--line);gap:4px;margin-bottom:20px}.mode-switch button{border:none;background:none;padding:7px 16px;font-family:Inter,sans-serif;font-size:13px;font-weight:600;color:var(--ink-soft);border-radius:4px;cursor:pointer;transition:all .12s ease}.mode-switch button.active{background:var(--surface);color:var(--ink);box-shadow:0 2px 4px #00000014}.multi-score-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:24px}.score-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px;transition:border-color .12s ease,box-shadow .12s ease}.score-card:hover{border-color:var(--ink-soft)}.score-card.filled{border-color:var(--gold);background:linear-gradient(180deg,var(--gold-wash),var(--surface))}.score-card-head{display:flex;justify-content:space-between;align-items:center}.score-card-title{font-family:Archivo Black,sans-serif;font-size:15px;color:var(--ink);text-transform:uppercase}.score-card-pill{font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:700;padding:2px 8px;border-radius:12px;text-transform:uppercase}.score-input-row{display:flex;align-items:center;gap:8px}.score-divider{font-family:IBM Plex Mono,monospace;font-weight:700;color:var(--ink-soft);font-size:16px}.preview-calc{font-family:IBM Plex Mono,monospace;font-size:11.5px;color:var(--ink-soft);background:var(--surface-sunk);padding:6px 10px;border-radius:4px;border:1px dashed var(--line);display:flex;justify-content:space-between}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0c0f14bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.modal-content{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:500px;box-shadow:0 20px 40px #0006;overflow:hidden}.modal-head{padding:18px 24px;background:var(--bg-hero);color:var(--ink-on-hero);display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--red)}.modal-title{font-family:Archivo Black,sans-serif;font-size:17px;text-transform:uppercase;margin:0}.modal-body{padding:24px}.state-loading,.empty-state{font-family:IBM Plex Mono,monospace;color:var(--ink-soft);text-align:center;padding:48px 20px;font-size:13.5px}.state-error{color:var(--red)}.footer{background:var(--bg-hero);color:var(--ink-on-hero-soft);padding:40px 24px;text-align:center;font-size:13px;border-top:1px solid var(--line-hero);margin-top:40px}.footer .brand{font-family:Archivo Black,sans-serif;font-size:16px;color:var(--ink-on-hero);text-transform:uppercase;margin-bottom:6px}@media (max-width: 640px){.spotlight{flex-direction:column;align-items:flex-start}.row{flex-wrap:wrap}.row-meta{width:100%;margin-top:6px}}
