:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --text:#172033;
  --muted:#697386;
  --line:#e6eaf0;
  --primary:#6d4aff;
  --primary-dark:#5635de;
  --soft:#f0edff;
  --success:#1f9d68;
  --danger:#d94747;
  --shadow:0 12px 35px rgba(24,34,56,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{background:#101528;color:#fff;padding:24px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.brand-mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#8a70ff,#4d2ee8);display:grid;place-items:center;font-weight:800}
.brand strong{display:block;font-size:15px}.brand span{display:block;color:#9da8c0;font-size:12px;margin-top:3px}
.progress-card{background:#171d33;border:1px solid #252c47;padding:14px;border-radius:14px;margin-bottom:18px}
.progress-head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px}
.progress-track{height:8px;background:#2a324f;border-radius:999px;overflow:hidden}
.progress-track div{height:100%;width:0;background:linear-gradient(90deg,#8e75ff,#c3b6ff);transition:.3s}
.progress-card small{color:#99a4bc;display:block;margin-top:9px;line-height:1.4}
nav{display:flex;flex-direction:column;gap:6px}
.nav-item{background:transparent;border:none;color:#aeb8cd;text-align:left;padding:12px 13px;border-radius:10px}
.nav-item:hover,.nav-item.active{background:#202843;color:#fff}
.sidebar-footer{margin-top:auto}
main{padding:0 32px 50px;min-width:0}
.topbar{height:92px;display:flex;align-items:center;justify-content:space-between}
.topbar h1{font-size:23px;margin:0}.topbar p{margin:6px 0 0;color:var(--muted);font-size:14px}
.primary,.secondary,.ghost{border:none;border-radius:10px;padding:11px 16px;font-weight:700}
.primary{background:var(--primary);color:#fff}.primary:hover{background:var(--primary-dark)}
.secondary{background:var(--soft);color:var(--primary)}
.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.sidebar .ghost{color:#b7c0d4;border-color:#303956;width:100%}
.danger{color:#ff9a9a!important}.large{padding:14px 20px}
.screen{display:none}.screen.active{display:block}
.hero{background:linear-gradient(135deg,#fff,#f2efff);border:1px solid #e4ddff;border-radius:22px;padding:38px;display:grid;grid-template-columns:1.5fr .8fr;gap:32px;box-shadow:var(--shadow)}
.hero h2{font-size:38px;line-height:1.12;margin:12px 0 14px;max-width:760px}.hero p{color:var(--muted);font-size:17px;line-height:1.6;max-width:700px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--primary)}
.hero-panel{background:#151b31;border-radius:18px;padding:20px;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:14px}
.metric{background:#1f2742;border:1px solid #303958;padding:15px;border-radius:13px}.metric strong{font-size:24px;display:block}.metric span{font-size:12px;color:#aeb7ca}
.grid{display:grid;gap:18px}.grid.three{grid-template-columns:repeat(3,1fr);margin-top:20px}.grid.two{grid-template-columns:1fr 1fr}.grid.compact{gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 6px 20px rgba(22,32,51,.04)}
.card h3{margin:0 0 10px}.card p{color:var(--muted);line-height:1.55}.icon{font-size:26px}
.checklist-card{margin-top:20px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.section-title h3{margin:0}.section-title p{margin:4px 0 0}
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.roadmap-item{border:1px solid var(--line);border-radius:13px;padding:14px}.roadmap-item.done{border-color:#bde9d7;background:#f3fff9}.roadmap-item strong{display:block;font-size:13px}.roadmap-item span{font-size:12px;color:var(--muted)}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.section-head h2{margin:8px 0 0;font-size:30px}.score-badge{background:var(--soft);color:var(--primary);padding:11px 15px;border-radius:12px}
.form-card label{display:block;font-size:13px;font-weight:700;margin-bottom:14px}
input,textarea,select{width:100%;margin-top:7px;border:1px solid #dce1e9;border-radius:10px;padding:12px;background:#fff;color:var(--text);outline:none}
input:focus,textarea:focus,select:focus{border-color:#9b86ff;box-shadow:0 0 0 3px #eeeaff}
textarea{min-height:95px;resize:vertical}
.generated{white-space:pre-wrap;background:#f8f9fc;border:1px dashed #d8dce6;border-radius:13px;padding:18px;line-height:1.65;min-height:220px;font-size:14px}
.generated.empty{color:#8b94a7;display:grid;place-items:center;text-align:center}
.output-card{min-height:100%}
.quiz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.quiz-grid label{font-size:13px;font-weight:700}
.platform-area{margin-top:18px}
.check-list{display:flex;flex-direction:column;gap:11px;margin:16px 0}.check-list label{display:flex;gap:10px;align-items:center;color:#485269}.check-list input{width:auto;margin:0}
.timeline{display:grid;gap:12px}
.day{display:grid;grid-template-columns:90px 1fr;gap:15px;padding:16px;border:1px solid var(--line);border-radius:13px}
.day strong{color:var(--primary)}.day p{margin:0;color:var(--muted)}
.warning{background:#fff7df;border:1px solid #f1df9a;padding:13px 16px;border-radius:12px;margin-bottom:15px;color:#7a6218}
.toast{position:fixed;right:24px;bottom:24px;background:#172033;color:#fff;padding:13px 18px;border-radius:10px;opacity:0;transform:translateY(15px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1000px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.sidebar nav{display:grid;grid-template-columns:repeat(2,1fr)}main{padding:0 18px 40px}.hero,.grid.two,.grid.three,.quiz-grid{grid-template-columns:1fr}.roadmap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.topbar{height:auto;padding:18px 0;gap:12px;align-items:flex-start}.topbar .primary{padding:9px 11px}.hero{padding:23px}.hero h2{font-size:29px}.sidebar nav{grid-template-columns:1fr}.roadmap{grid-template-columns:1fr}.section-head{align-items:flex-start;gap:12px}.section-head h2{font-size:25px}.score-badge{font-size:12px}}