:root{
  color-scheme:light;
  --bg:#FFF8F4;
  --surface:#FFFFFF;
  --surface-soft:#FFF1EA;
  --surface-strong:#F7E3E2;
  --text:#1A1836;
  --muted:#746B78;
  --line:#EADDE1;
  --primary:#A54055;
  --primary-strong:#622347;
  --secondary:#E99856;
  --accent:#E0B4B2;
  --accent-deep:#42164B;
  --nav:#FFFDFC;
  --nav-text:#3F3650;
  --hero-from:#42164B;
  --hero-to:#1A1836;
  --hero-text:#FFF8F4;
  --success:#4D7C68;
  --danger:#A54055;
  --shadow:0 18px 45px rgba(66,22,75,.08);
  --shadow-soft:0 8px 28px rgba(26,24,54,.06);
  --ring:0 0 0 3px rgba(233,152,86,.2);
  --radius:20px;
  --radius-lg:28px;
  --b:var(--text);
  --o:var(--bg);
  --g:var(--secondary);
  --n:var(--accent-deep);
  --m:var(--muted);
  --l:var(--line);
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#17162D;
  --surface:#211E3A;
  --surface-soft:#2A2544;
  --surface-strong:#352A4A;
  --text:#F9F2F0;
  --muted:#C8BBC6;
  --line:#3B3553;
  --primary:#E0B4B2;
  --primary-strong:#F0C8C6;
  --secondary:#F0A15E;
  --accent:#A54055;
  --accent-deep:#C586AF;
  --nav:#1D1A34;
  --nav-text:#F6ECEC;
  --hero-from:#622347;
  --hero-to:#211E3A;
  --hero-text:#FFF8F4;
  --success:#8CC0A5;
  --danger:#F19BAB;
  --shadow:0 18px 50px rgba(0,0,0,.24);
  --shadow-soft:0 8px 28px rgba(0,0,0,.17);
  --ring:0 0 0 3px rgba(240,161,94,.22);
  --b:var(--text);
  --o:var(--bg);
  --g:var(--secondary);
  --n:var(--primary);
  --m:var(--muted);
  --l:var(--line);
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  background:
    radial-gradient(circle at 88% -10%,rgba(224,180,178,.2),transparent 30rem),
    radial-gradient(circle at 18% 105%,rgba(233,152,86,.12),transparent 26rem),
    var(--bg);
  color:var(--text);
  font:14px Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh;
  transition:background .25s ease,color .25s ease;
}
button,input,textarea,select{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;box-shadow:var(--ring)}
.hide{display:none}

.side{
  position:fixed;inset:0 auto 0 0;width:228px;
  background:linear-gradient(180deg,var(--nav),color-mix(in srgb,var(--nav) 88%,var(--primary) 12%));
  color:var(--nav-text);padding:24px 16px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:70;
}
.logo{display:flex;gap:11px;align-items:center;padding:8px}
.logo i{
  width:40px;height:40px;border:0;border-radius:14px;display:grid;place-items:center;
  color:#fff;font-style:normal;font-size:15px;
  background:linear-gradient(135deg,var(--secondary),var(--primary));
  box-shadow:0 10px 24px rgba(165,64,85,.22);
}
.logo b{letter-spacing:.18em;color:var(--text)}
.logo small{display:block;color:var(--primary);letter-spacing:.16em;margin-top:3px;font-weight:800}
.nav{display:grid;gap:4px;margin-top:26px;overflow:auto;padding-bottom:8px}
.nav button,.add,.theme-toggle{
  border:0;background:transparent;color:var(--muted);padding:12px 13px;border-radius:13px;text-align:left;font-size:14px;line-height:1.35;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav button:hover,.add:hover,.theme-toggle:hover{background:var(--surface-soft);color:var(--text)}
.nav button.on{background:linear-gradient(135deg,var(--surface-strong),var(--surface-soft));color:var(--primary-strong);font-weight:800}
.add{width:100%;margin-top:12px;border:1px solid var(--line);color:var(--primary);font-weight:800;background:var(--surface)}
.side-tools{margin-top:auto;display:grid;gap:6px;padding-top:12px}
.theme-toggle{width:100%;border:1px solid var(--line);background:var(--surface);display:flex;justify-content:space-between;align-items:center}

main{margin-left:228px}
.page{max-width:1080px;margin:auto;padding:42px 46px 94px}
.ey{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--primary);font-weight:900}
h1{font-size:clamp(34px,4vw,44px);line-height:1.02;letter-spacing:-.045em;margin:8px 0}
h2,h3,p{margin:0}
h2{letter-spacing:-.025em}
.sub{color:var(--muted);line-height:1.72;margin-top:10px;max-width:720px}
.meta{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:20px 0}
.meta button{margin-left:auto}

.hero{
  margin-top:28px;
  background:
    radial-gradient(circle at 82% 18%,rgba(233,152,86,.25),transparent 15rem),
    linear-gradient(135deg,var(--hero-from),var(--hero-to));
  color:var(--hero-text);border-radius:var(--radius-lg);padding:34px;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;
  box-shadow:var(--shadow);
}
.hero .ey{color:#FFD0B0}
.hero h2{font-size:clamp(36px,4.2vw,48px);line-height:1.02;margin:12px 0}
.hero p{color:rgba(255,248,244,.76);line-height:1.72;max-width:650px}

.pri,.sec{border:0;border-radius:14px;padding:13px 18px;font-weight:850;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.pri{background:linear-gradient(135deg,var(--secondary),#F3B17C);color:#2A1732;box-shadow:0 10px 24px rgba(233,152,86,.18)}
.pri:hover,.sec:hover{transform:translateY(-1px)}
.sec{background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow-soft)}

.cards,.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px}
.card{
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow-soft);backdrop-filter:blur(8px);
}
.card h3{margin:10px 0 6px}
.sm{font-size:11px;color:var(--muted);line-height:1.62}
.section{margin-top:30px}
.row{display:flex;justify-content:space-between;gap:14px;align-items:center;border-top:1px solid var(--line);padding:16px 3px}
.link{border:0;background:transparent;color:var(--primary);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}

.modal{position:fixed;inset:0;background:rgba(20,15,35,.62);backdrop-filter:blur(8px);z-index:90;display:none;align-items:center;justify-content:center;padding:18px}
.modal.open{display:flex}
.sheet{width:min(620px,100%);max-height:90vh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow)}
.head{display:flex;justify-content:space-between;gap:12px}
.x{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:50%;width:38px;height:38px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.choice{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:15px;text-align:left}
.choice:hover{background:var(--surface-soft)}
.choice b{display:block}
.choice span{color:var(--muted);font-size:12px;line-height:1.45}
.field{margin-top:13px}
.field label{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}
.inp{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:14px;padding:12px}
.inp::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
.ta{min-height:110px;resize:vertical}
.list{display:grid;gap:8px;margin-top:15px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px;display:flex;justify-content:space-between;gap:12px}
.tag{font-size:9px;border-radius:999px;padding:6px 9px;background:color-mix(in srgb,var(--secondary) 16%,var(--surface));color:var(--primary-strong);border:1px solid color-mix(in srgb,var(--secondary) 30%,transparent);font-weight:800}

.study{min-height:100vh;background:linear-gradient(145deg,var(--hero-to),var(--hero-from));color:var(--hero-text)}
.studytop{padding:15px 22px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between}
.studygrid{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 330px}
.read{padding:28px 38px}
.obj{border:1px solid rgba(240,161,94,.28);background:rgba(233,152,86,.1);border-radius:16px;padding:15px;line-height:1.7}
.paper{max-width:760px;margin:20px auto;background:#FFFDFB;color:#2E2637;border-radius:22px;padding:30px;box-shadow:0 18px 46px rgba(0,0,0,.14)}
.paper p{line-height:1.9;color:#514858;margin-top:15px}
.tutor{border-left:1px solid rgba(255,255,255,.12);padding:24px}
.tutor button{width:100%;margin-top:7px;text-align:left;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#F6ECEC;border-radius:13px;padding:12px}
.tutor button:hover{background:rgba(255,255,255,.1)}

.review{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:25px;margin-top:24px;box-shadow:var(--shadow-soft)}
.art{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}
.brain{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.node{background:color-mix(in srgb,var(--primary) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));border-radius:999px;padding:8px 10px;font-size:11px}

.bottom{display:none}
.toast{position:fixed;right:18px;bottom:18px;background:var(--text);color:var(--bg);padding:12px 15px;border-radius:13px;opacity:0;transform:translateY(80px);transition:.2s;z-index:120;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:none}
.on{min-height:100vh;display:grid;place-items:center;padding:20px}
.onbox{width:min(650px,100%);background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:30px;box-shadow:var(--shadow)}
.onopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}

@media(max-width:760px){
  body{background:var(--bg)}
  .side{display:none}
  main{margin:0}
  .page{padding:26px 18px 104px}
  h1{font-size:34px}
  .hero{grid-template-columns:1fr;padding:24px}
  .hero h2{font-size:34px}
  .cards,.grid,.art,.choices,.onopts{grid-template-columns:1fr}
  .bottom{
    display:grid;position:fixed;left:10px;right:10px;bottom:10px;
    grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--nav) 94%,transparent);
    border:1px solid var(--line);border-radius:20px;padding:8px 4px;z-index:60;
    box-shadow:var(--shadow);backdrop-filter:blur(18px)
  }
  .bottom button{border:0;background:transparent;color:var(--muted);font-size:11px;line-height:1.25;border-radius:12px;padding:6px 2px;font-weight:700}
  .bottom button:hover{background:var(--surface-soft);color:var(--text)}
  .bottom .plus{
    width:48px;height:48px;border-radius:16px;
    background:linear-gradient(135deg,var(--secondary),var(--primary));color:#fff;
    margin:-24px auto 0;box-shadow:0 10px 22px rgba(165,64,85,.25);font-size:20px
  }
  .modal{align-items:flex-end;padding:0}
  .sheet{border-radius:24px 24px 0 0}
  .studygrid{display:block}
  .read{padding:20px 16px}
  .tutor{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding-bottom:92px}
}