:root{
  --bg:#05030a;
  --bg2:#0b0615;
  --panel:rgba(18,11,32,.82);
  --panel-solid:#120b20;
  --panel-2:#19102b;
  --ink:#f8f7ff;
  --muted:#aaa5bd;
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(190,146,255,.36);
  --accent:#a566ff;
  --accent-2:#6f7cff;
  --accent-3:#d86cff;
  --soft:rgba(165,102,255,.13);
  --success:#66e6a6;
  --warn:#ffc66d;
  --danger:#ff7f96;
  --shadow:0 26px 80px rgba(0,0,0,.42);
  --glow:0 0 0 1px rgba(165,102,255,.22),0 18px 60px rgba(92,45,180,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 12%,rgba(137,66,255,.22),transparent 27%),
    radial-gradient(circle at 86% 9%,rgba(82,96,255,.18),transparent 24%),
    radial-gradient(circle at 74% 72%,rgba(208,80,255,.10),transparent 26%),
    radial-gradient(circle,rgba(255,255,255,.22) 0 1px,transparent 1.2px) 0 0/46px 46px,
    radial-gradient(circle,rgba(179,140,255,.18) 0 1px,transparent 1.2px) 18px 24px/73px 73px,
    linear-gradient(180deg,#05030a 0%,#080411 50%,#05030a 100%);
  background-attachment:fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:-20vh -15vw auto auto;
  width:55vw;
  height:55vw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(141,76,255,.13),transparent 66%);
  filter:blur(14px);
  pointer-events:none;
  z-index:-1;
}
a{color:inherit}

.top{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line);
  background:rgba(5,3,10,.76);
  backdrop-filter:blur(18px) saturate(135%);
}
.topin{
  max-width:1180px;
  margin:auto;
  padding:15px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.logo{
  font-size:1.15rem;
  font-weight:950;
  letter-spacing:.11em;
  text-decoration:none;
  background:linear-gradient(90deg,#fff 0%,#d9c2ff 48%,#9f6cff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 32px rgba(170,100,255,.28);
}
.userbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  border-radius:999px;
  padding:8px 12px;
  font-size:.86rem;
  color:#d7d2e2;
}
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.055);
  color:var(--ink);
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(190,146,255,.45);background:rgba(255,255,255,.085)}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),#7e55ff 55%,var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 30px rgba(132,78,255,.28),inset 0 1px 0 rgba(255,255,255,.24);
}
.btn.primary:hover{box-shadow:0 14px 36px rgba(132,78,255,.36),inset 0 1px 0 rgba(255,255,255,.24)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.wrap{max-width:1180px;margin:auto;padding:58px 24px 84px}
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.72fr);gap:44px;align-items:center;min-height:510px}
.hero>div:first-child{position:relative;padding:18px 0}
.hero>div:first-child::after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  right:-70px;
  top:-80px;
  background:radial-gradient(circle,rgba(177,83,255,.16),transparent 65%);
  filter:blur(4px);
  pointer-events:none;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.72rem;
  font-weight:900;
  color:#c9a9ff;
}
h1{
  font-size:clamp(2.85rem,6vw,5.65rem);
  line-height:.93;
  margin:16px 0 22px;
  letter-spacing:-.055em;
  max-width:850px;
}
.hero h1{
  background:linear-gradient(180deg,#fff 4%,#efe9ff 48%,#ad95d8 115%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-wrap:balance;
}
.lead{font-size:1.12rem;line-height:1.72;color:#bbb5ca;max-width:760px}
.small{font-size:.82rem;color:var(--muted);line-height:1.55}
.hero .small{max-width:690px;color:#8f89a0}

.auth{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(27,17,47,.89),rgba(14,9,25,.91));
  border:1px solid rgba(196,151,255,.25);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow),var(--glow);
  backdrop-filter:blur(18px);
}
.auth::before{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-90px;
  top:-110px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(190,102,255,.27),transparent 67%);
  pointer-events:none;
}
.auth>*{position:relative}
.auth h2{margin:0 0 6px;font-size:1.35rem}
.tabs{display:flex;gap:6px;margin:16px 0;padding:4px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px}
.tab{flex:1;border-color:transparent;background:transparent}
.tab.active{background:rgba(159,101,255,.16);border-color:rgba(190,146,255,.25);color:#e4d4ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.pane[hidden]{display:none}
.field{margin:12px 0}
.field label{display:block;font-size:.8rem;font-weight:800;margin-bottom:6px;color:#d5d0df}
.field input{
  width:100%;
  font:inherit;
  color:var(--ink);
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px;
  outline:none;
  background:rgba(4,2,9,.54);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.field input:focus{border-color:rgba(178,125,255,.68);box-shadow:0 0 0 3px rgba(165,102,255,.12)}
.msg{min-height:22px;font-size:.86rem;margin-top:9px}.msg.error{color:var(--danger)}.msg.ok{color:var(--success)}

.subjects-title{margin:52px 0 18px;display:flex;justify-content:space-between;align-items:end;gap:18px}
.subjects-title h2{font-size:1.8rem;margin:2px 0 0;letter-spacing:-.03em}
.subjects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.subject{
  position:relative;
  overflow:hidden;
  min-height:200px;
  background:linear-gradient(155deg,rgba(30,19,49,.88),rgba(13,8,23,.93));
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  padding:23px;
  text-decoration:none;
  display:block;
  min-width:0;
  box-shadow:0 18px 52px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.subject::after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  border-radius:50%;
  right:-90px;
  bottom:-110px;
  background:radial-gradient(circle,rgba(123,83,255,.22),transparent 67%);
  pointer-events:none;
}
.subject[data-subject="social-studies"]{background:linear-gradient(145deg,rgba(72,36,120,.74),rgba(16,9,29,.95) 66%)}
.subject[data-subject="math"]::after{background:radial-gradient(circle,rgba(83,118,255,.18),transparent 67%)}
.subject[data-subject="english"]::after{background:radial-gradient(circle,rgba(219,78,255,.16),transparent 67%)}
.subject[data-subject="science"]::after{background:radial-gradient(circle,rgba(83,233,181,.13),transparent 67%)}
.subject.active:hover{transform:translateY(-5px);border-color:rgba(196,151,255,.46);box-shadow:0 24px 60px rgba(0,0,0,.33),0 0 38px rgba(128,73,242,.12)}
.subject-head{display:flex;justify-content:space-between;gap:10px;align-items:start;position:relative;z-index:1}
.subject h3{font-size:1.33rem;margin:0;display:flex;align-items:center;gap:11px}
.subject h3::before{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  color:#e9dcff;
  font-size:.72rem;
  letter-spacing:.04em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.18);
}
.subject[data-subject="social-studies"] h3::before{content:"SS"}
.subject[data-subject="math"] h3::before{content:"M"}
.subject[data-subject="english"] h3::before{content:"E"}
.subject[data-subject="science"] h3::before{content:"S"}
.state{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.075em;color:#858093;padding-top:4px}
.state.ready{color:var(--success)}
.pct{font-weight:950;font-size:1.65rem;margin-top:27px;position:relative;z-index:1}
.bar{height:10px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.04);border-radius:999px;overflow:hidden;margin:8px 0;position:relative;z-index:1}
.fill{height:100%;background:linear-gradient(90deg,#8e5cff,#c56bff 55%,#6f7cff);width:0;box-shadow:0 0 18px rgba(178,94,255,.55);transition:width .35s ease}
.meta{color:#928ca1;font-size:.83rem;display:flex;justify-content:space-between;gap:10px;position:relative;z-index:1}
.subject.active .meta span:last-child{color:#cdb6ff;font-weight:800}
.community{margin-top:28px;color:#7f798e;font-size:.88rem;text-align:center}

.coming{
  max-width:760px;
  margin:54px auto 0;
  text-align:center;
  background:linear-gradient(165deg,rgba(31,19,51,.9),rgba(13,8,23,.94));
  border:1px solid rgba(190,146,255,.2);
  border-radius:28px;
  padding:48px 30px;
  box-shadow:var(--shadow),var(--glow);
}
.coming h1{font-size:clamp(2.5rem,6vw,4.7rem);margin-bottom:18px}
.mini-progress{margin:28px auto;max-width:430px;text-align:left}
.account-box{max-width:620px;margin:30px auto 0;text-align:left}

@media(max-width:800px){
  .hero{grid-template-columns:1fr;min-height:auto;gap:24px}
  .subjects{grid-template-columns:1fr}
  .wrap{padding-top:36px}
  h1{font-size:clamp(2.75rem,12vw,4.2rem)}
}
@media(max-width:560px){
  .topin{padding:12px 16px;align-items:flex-start}
  .userbar{justify-content:flex-end}
  .wrap{padding:28px 16px 64px}
  .hero{gap:20px}
  .lead{font-size:1rem}
  .auth{padding:19px;border-radius:20px}
  .subject{border-radius:20px;padding:19px;min-height:185px}
  .subjects-title{align-items:flex-start;flex-direction:column;gap:5px}
}