:root { --ink:#173b4d; --ink-2:#31566a; --teal:#169b8a; --mint:#dff4ed; --paper:#fbfaf6; --line:#d9e3e1; --warm:#e9a35b; --muted:#6d7d84; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color:#18333e; background:var(--paper); }
* { box-sizing:border-box } body { margin:0; background:linear-gradient(135deg,#fbfaf6 0%,#f0f6f2 100%); } button,input { font:inherit } button { cursor:pointer }
.shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; } .sidebar { background:var(--ink); color:#eaf5f1; padding:28px 18px; display:flex; flex-direction:column; gap:28px; } .brand { display:flex; gap:10px; align-items:center; font-weight:800; font-size:20px; letter-spacing:-.03em }.mark { width:34px;height:34px;border-radius:12px 12px 12px 4px;background:var(--teal);display:grid;place-items:center;color:white; }.nav { display:grid; gap:7px }.nav button { border:0; text-align:left; color:#c7dbd8; background:transparent; padding:12px 14px; border-radius:12px; }.nav button:hover,.nav button.active { background:#28546a; color:white }.side-note { margin-top:auto; color:#abc7c1; font-size:12px; line-height:1.5; border-top:1px solid #366175; padding-top:18px }
.main { padding:28px clamp(20px,4vw,58px); max-width:1400px; width:100%; }.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:30px; }.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800; color:var(--teal) }.hello { font-size:32px; line-height:1.1; margin:6px 0; color:var(--ink) }.muted { color:var(--muted) }.avatar { width:42px;height:42px;border-radius:50%;background:#f4c992;color:#70451e;display:grid;place-items:center;font-weight:800 }
.grid { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; }.card { background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:0 10px 30px rgba(33,70,72,.06); }.hero { background:var(--ink); color:white; min-height:240px; position:relative; overflow:hidden; }.hero:after { content:""; position:absolute; width:260px;height:260px;border:1px solid rgba(255,255,255,.15);border-radius:50%;right:-60px;top:-100px;box-shadow:0 0 0 36px rgba(255,255,255,.04),0 0 0 72px rgba(255,255,255,.03) }.hero h2 { font-size:32px; max-width:540px; margin:8px 0 12px; letter-spacing:-.04em }.hero p { color:#c2d8d4; max-width:520px }.progress { height:9px;background:#d6e5e2;border-radius:99px;overflow:hidden }.progress span { display:block;height:100%;background:var(--teal);border-radius:99px }.hero .progress { background:#3b6070; max-width:430px; margin-top:24px }.hero .progress span { background:#86e2c8 }.hero .small { color:#a9c5c1;font-size:13px;margin-top:8px }
.row { display:flex; justify-content:space-between; align-items:center; gap:14px }.section-title { margin:0;color:var(--ink);font-size:18px }.actions { display:flex; gap:10px; flex-wrap:wrap }.primary,.secondary { border-radius:12px;padding:11px 15px;border:1px solid transparent;font-weight:700 }.primary { background:var(--teal); color:white }.secondary { background:transparent;border-color:var(--line);color:var(--ink) }.primary:hover { background:#10806f }.stats { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px }.stat { background:#f2f8f5;border-radius:14px;padding:14px }.stat strong { font-size:25px;color:var(--ink);display:block }.stat small { color:var(--muted) }
.task { display:flex; gap:12px; align-items:flex-start;padding:15px 0;border-bottom:1px solid #e7eeeb }.task:last-child { border-bottom:0 }.dot { width:10px;height:10px;border-radius:50%;background:var(--teal);margin-top:6px;flex:none }.task h4 { margin:0 0 4px;color:var(--ink) }.task p { margin:0;font-size:13px;color:var(--muted) }.tag { display:inline-block;background:var(--mint);color:#187264;border-radius:99px;padding:4px 8px;font-size:11px;font-weight:800 }
.view { display:none }.view.active { display:block }.full { grid-column:1/-1 }.search { width:min(400px,100%); background:white;border:1px solid var(--line);padding:12px 15px;border-radius:12px }.lesson-list { display:grid; gap:11px;margin-top:16px }.lesson { display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--line);padding:16px;border-radius:14px;background:white }.lesson strong { color:var(--ink) }.question { background:#f2f8f5;border-radius:14px;padding:18px;margin-top:16px }.option { display:block;width:100%;text-align:left;background:white;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:9px }.option.correct { border-color:var(--teal);background:var(--mint) }.notice { background:#fff4df;border:1px solid #f1d6a6;border-radius:14px;padding:14px;color:#765126;font-size:13px }.footer { margin-top:28px;color:var(--muted);font-size:12px;line-height:1.5 }
@media (max-width:820px) { .shell{grid-template-columns:1fr}.sidebar{padding:16px;gap:15px}.nav{display:flex;overflow:auto}.nav button{white-space:nowrap}.side-note{display:none}.main{padding:20px 15px}.topbar{align-items:flex-start}.grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr 1fr}.hero h2{font-size:27px} }
.public-shell{min-height:100vh;color:var(--ink)}.public-nav{max-width:1180px;margin:auto;padding:24px 22px;display:flex;justify-content:space-between;align-items:center}.public-main{max-width:1180px;margin:auto;padding:40px 22px 70px}.public-hero{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:50px;min-height:500px}.public-hero h1{font-size:clamp(44px,7vw,82px);line-height:.98;letter-spacing:-.07em;margin:18px 0;color:var(--ink)}.public-hero h1 em{font-style:normal;color:var(--teal)}.public-hero p{font-size:19px;line-height:1.55;color:var(--muted);max-width:580px}.hero-orbit{width:min(380px,80vw);height:min(380px,80vw);border-radius:50%;border:1px solid #b8d9d0;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#e5f4ef 0 32%,transparent 33%),linear-gradient(135deg,#f4f9f3,#e3f2ee)}.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border:1px solid #a6d0c5;border-radius:50%;inset:12%;transform:rotate(28deg)}.hero-orbit:after{inset:25%;transform:rotate(-32deg)}.hero-orbit strong{font-size:32px;z-index:1}.hero-orbit span{position:absolute;background:white;border:1px solid var(--line);padding:8px 12px;border-radius:99px;font-size:12px;box-shadow:0 5px 15px #37695c18}.hero-orbit span:nth-child(1){top:12%;right:4%}.hero-orbit span:nth-child(2){bottom:15%;right:-5%}.hero-orbit span:nth-child(3){bottom:5%;left:8%}.public-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.public-grid h2{font-size:25px;color:var(--ink)}.price-card{background:var(--ink);color:white}.price-card h2{color:white}.price-card .muted{color:#bfd5d1}.price-card small{font-size:14px;font-weight:400}.public-footer{max-width:1180px;margin:auto;padding:25px 22px 45px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}.auth-shell,.onboarding-shell{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#fbfaf6,#e7f3ee)}.auth-card,.onboarding-card{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:24px;padding:32px;max-width:470px;width:100%;box-shadow:0 20px 50px #21464812;display:grid;gap:14px}.auth-card h1,.onboarding-card h1{font-size:38px;letter-spacing:-.05em;color:var(--ink);margin:0}.auth-card label{display:grid;gap:7px;color:var(--ink);font-weight:700;font-size:13px}.onboarding-card{max-width:650px;min-height:420px}.onboarding-card h2{font-size:32px;letter-spacing:-.05em;color:var(--ink);margin:20px 0}.onboarding-progress{display:flex;justify-content:space-between;gap:8px;color:#a3b2b1;font-size:11px;font-weight:800}.onboarding-progress span.done{color:var(--teal)}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.choice{background:#f7fbf8;border:1px solid var(--line);border-radius:14px;padding:18px 10px;color:var(--ink);font-weight:800}.choice:hover{border-color:var(--teal);background:var(--mint)}
@media (max-width:820px){.public-hero{grid-template-columns:1fr;min-height:auto;padding:45px 0}.hero-orbit{margin:auto}.public-grid{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr}.public-hero p{font-size:17px}}