: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); }
[data-theme="dark"] { --ink:#d9eee9; --ink-2:#b7d6d0; --teal:#62d6bd; --mint:#173d3b; --paper:#101d23; --line:#2f4850; --warm:#f0b36e; --muted:#a7bbbf; color:#e5f1ef; }
[data-theme="contrast"] { --ink:#000; --ink-2:#000; --teal:#005a4d; --mint:#d8ffe9; --paper:#fff; --line:#000; --warm:#7a3500; --muted:#202020; color:#000; }
* { box-sizing:border-box } body { margin:0; background:linear-gradient(135deg,#fbfaf6 0%,#f0f6f2 100%); } button,input { font:inherit } button { cursor:pointer }
[data-theme="dark"] body { background:linear-gradient(135deg,#101d23 0%,#172b31 100%); } [data-theme="dark"] .card,[data-theme="dark"] .lesson,[data-theme="dark"] .search,[data-theme="dark"] .option,[data-theme="dark"] .auth-card,[data-theme="dark"] .onboarding-card { background:#162930; color:#e5f1ef; } [data-theme="dark"] .stat,[data-theme="dark"] .question { background:#19383a; } [data-theme="dark"] .auth-shell,[data-theme="dark"] .onboarding-shell { background:linear-gradient(135deg,#101d23,#173b3b); } [data-theme="dark"] .choice { background:#193035; color:var(--ink); }
[data-theme="contrast"] body { background:#fff; } [data-theme="contrast"] * { box-shadow:none !important; } [data-theme="contrast"] .hero,[data-theme="contrast"] .sidebar { background:#000; } [data-theme="contrast"] .secondary,[data-theme="contrast"] .option { border-width:2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
.global-search-panel { position:fixed; inset:0; z-index:20; display:grid; place-items:start center; padding:8vh 16px; background:rgba(12,30,35,.62); overflow:auto; }.global-search-card { width:min(760px,100%); background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:0 24px 80px rgba(0,0,0,.25); }.global-search-card form { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; margin-top:16px; }.global-search-card form label { grid-column:1/-1; font-weight:700; font-size:13px; }.global-search-card .lesson-list { max-height:55vh; overflow:auto; }.search-history { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:14px; }.search-history-item { padding:7px 10px; font-size:12px; }.theme-toggle { white-space:nowrap; }
.public-nav,.topbar { flex-wrap:wrap; } .public-nav > button,.topbar > button { flex:none; padding:9px 11px; font-size:12px; }
.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} }
.mobile-nav,.mobile-more-panel{display:none}
@media (max-width:820px) { .sidebar{display:none}.main{padding-bottom:92px}.mobile-nav{position:fixed;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;left:0;right:0;bottom:0;padding:8px max(10px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right));background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(33,70,72,.12);backdrop-filter:blur(14px)}.mobile-nav button{border:0;background:transparent;color:var(--muted);padding:9px 4px;border-radius:10px;font-size:11px;font-weight:800}.mobile-nav button:focus-visible,.mobile-nav button:hover{background:var(--mint);color:var(--ink)}.mobile-more-panel{position:fixed;z-index:30;display:block;inset:0;background:rgba(20,43,49,.38);padding:18px}.mobile-more-panel[hidden]{display:none}.mobile-more-card{position:absolute;left:15px;right:15px;bottom:82px;max-height:calc(100vh - 120px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 20px 50px rgba(20,43,49,.25)}.mobile-more-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mobile-more-list button{text-align:left} }
.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}}
.search-ai-box { margin-top:16px; }.search-result-select { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }.search-result-select input { margin-top:5px; }