:root {
  --ink:#17223b; --muted:#6a7589; --navy:#173b66; --navy-deep:#0e2949;
  --teal:#147f79; --teal-soft:#e3f4f0; --paper:#f5f4ef; --line:#dfe4e3;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box; }
html,body { min-width:320px; min-height:100%; margin:0; }
body { background:var(--paper); }
button,input,select { font:inherit; }
a { color:inherit; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(440px,.9fr) minmax(520px,1.1fr); }
.auth-story { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:clamp(28px,4vw,58px); overflow:hidden; background:var(--navy-deep); color:white; }
.auth-story::before { content:""; position:absolute; width:520px; height:520px; right:-300px; top:-240px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.018); }
.auth-brand { position:relative; z-index:2; display:flex; align-items:center; gap:12px; width:max-content; text-decoration:none; }
.auth-brand > span:last-child { display:grid; line-height:1.05; }
.auth-brand strong { font:27px Georgia,serif; letter-spacing:-.03em; }
.auth-brand small { margin-top:5px; color:#9db3cb; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.auth-brand-mark { position:relative; width:42px; height:42px; border-radius:14px; background:#fff; transform:rotate(-3deg); overflow:hidden; box-shadow:0 11px 24px rgba(0,0,0,.2); }
.auth-brand-mark i { position:absolute; top:9px; width:16px; height:24px; border-radius:2px 9px 6px 2px; background:var(--navy); }
.auth-brand-mark i:first-child { left:5px; transform:skewY(12deg); }
.auth-brand-mark i:last-child { right:5px; transform:scaleX(-1) skewY(12deg); }
.story-copy { position:relative; z-index:2; max-width:590px; margin:auto 0 0; }
.story-kicker { color:#79d8cb; font-size:11px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.story-copy h1 { max-width:560px; margin:17px 0 18px; font:clamp(44px,5vw,76px)/.97 Georgia,serif; letter-spacing:-.045em; }
.story-copy > p { max-width:530px; margin:0; color:#c3d2e1; font-size:15px; line-height:1.7; }
.story-path { display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:14px; max-width:560px; margin-top:42px; }
.story-path > div { display:grid; gap:3px; }
.story-path span { color:#70cfc4; font-size:9px; font-weight:900; letter-spacing:.12em; }
.story-path strong { font-size:13px; }
.story-path small { color:#8fa8c0; font-size:9px; white-space:nowrap; }
.story-path > i { height:1px; background:linear-gradient(90deg,rgba(112,207,196,.55),rgba(255,255,255,.1)); }
.story-art { position:relative; z-index:1; min-height:190px; margin-top:25px; }
.book { position:absolute; left:18%; bottom:7px; width:190px; height:120px; padding:14px; display:flex; gap:4px; border-radius:16px 16px 24px 24px; background:#f7f1e7; transform:rotate(-5deg); box-shadow:0 22px 40px rgba(0,0,0,.28); }
.book span { flex:1; position:relative; border-radius:4px 16px 11px 4px; background:linear-gradient(100deg,#fff 0,#f3eadc 90%); box-shadow:inset -8px 0 12px rgba(31,54,75,.05); }
.book span:last-of-type { transform:scaleX(-1); }
.book span::after { content:""; position:absolute; left:14px; right:14px; top:28px; height:2px; background:#abc7c1; box-shadow:0 13px #d0d6d2,0 26px #d0d6d2,0 39px #d0d6d2; }
.book b { position:absolute; left:50%; top:13px; bottom:12px; width:1px; background:#d5cabb; }
.insight-card,.score-card { position:absolute; display:flex; align-items:center; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.11); box-shadow:0 15px 35px rgba(0,0,0,.16); backdrop-filter:blur(8px); }
.insight-card { left:43%; bottom:83px; gap:9px; padding:10px 13px; border-radius:13px; transform:rotate(3deg); }
.insight-card i { width:28px; height:28px; border-radius:9px; background:#6fd1c4; }
.insight-card span { display:grid; }
.insight-card b { font-size:10px; }.insight-card small { color:#afc3d5; font-size:8px; }
.score-card { left:7%; bottom:99px; display:grid; padding:10px 14px; border-radius:12px; transform:rotate(-7deg); }
.score-card small { color:#afc3d5; font-size:8px; }.score-card strong { color:#78d7ca; font-size:20px; }
.orbit { position:absolute; border:1px solid rgba(112,207,196,.18); border-radius:50%; }
.orbit.one { width:260px;height:100px;left:7%;bottom:28px;transform:rotate(-9deg); }
.orbit.two { width:320px;height:130px;left:3%;bottom:10px;transform:rotate(14deg); }
.story-foot { position:relative; z-index:2; margin:25px 0 0; color:#829cb6; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.auth-panel { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:54px clamp(28px,6vw,90px) 34px; background:radial-gradient(circle at 90% 5%,#e5f3ef 0,transparent 24%),var(--paper); }
.auth-card { width:min(100%,500px); }
.auth-card header { margin-bottom:26px; }
.mobile-brand { display:none; color:var(--teal); font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.auth-card h2 { margin:0 0 8px; font:clamp(34px,4vw,48px)/1.02 Georgia,serif; letter-spacing:-.04em; }
.auth-card header p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.form-notice,.form-error { display:flex; align-items:flex-start; gap:10px; margin-bottom:20px; padding:12px 14px; border:1px solid; border-radius:12px; font-size:11px; line-height:1.45; }
.form-notice { border-color:#b8ddd5; background:#edf8f5; color:#23635e; }
.form-error { border-color:#f0c3b7; background:#fff0ec; color:#9d4434; }
.form-notice span,.form-error span { display:grid; place-items:center; flex:0 0 auto; width:20px; height:20px; border-radius:7px; background:currentColor; color:white; font-weight:900; }
.google-button { min-height:50px; display:flex; align-items:center; justify-content:center; gap:11px; padding:11px 16px; border:1px solid #d6dbdf; border-radius:13px; background:#fff; text-decoration:none; font-size:12px; font-weight:800; box-shadow:0 5px 14px rgba(25,45,65,.04); transition:.16s ease; }
.google-button:hover { border-color:#aeb8c0; transform:translateY(-1px); box-shadow:0 8px 22px rgba(25,45,65,.08); }
.google-button svg { width:19px; height:19px; }
.oauth-note { display:block; margin:7px 0 0; color:var(--muted); font-size:9px; text-align:center; }
.form-divider { display:flex; align-items:center; gap:12px; margin:21px 0; color:#9aa3ae; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.form-divider::before,.form-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-form { display:grid; gap:16px; }
.auth-form label { display:grid; gap:7px; color:#344056; font-size:10px; font-weight:850; }
.auth-form label > small { margin-left:4px; color:#9aa3ae; font-size:8px; font-weight:700; }
.auth-form input,.auth-form select { width:100%; min-height:48px; padding:11px 13px; border:1px solid #d6dcde; border-radius:12px; outline:none; background:#fff; color:var(--ink); font-size:12px; transition:.15s ease; }
.auth-form input::placeholder { color:#a3abb5; }
.auth-form input:focus,.auth-form select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,127,121,.1); }
.password-wrap { position:relative; display:block; }
.password-wrap input { padding-right:65px; }
.password-wrap button { position:absolute; top:6px; right:6px; height:36px; padding:0 10px; border:0; border-radius:8px; background:#f0f3f2; color:var(--teal); cursor:pointer; font-size:9px; font-weight:850; }
.form-row { display:grid; grid-template-columns:.65fr 1.35fr; gap:12px; }
.primary-button { min-height:50px; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:2px; padding:11px 16px; border:0; border-radius:13px; background:var(--navy); color:white; cursor:pointer; font-size:12px; font-weight:850; box-shadow:0 9px 22px rgba(23,59,102,.18); transition:.16s ease; }
.primary-button:hover { background:#102f55; transform:translateY(-1px); box-shadow:0 12px 26px rgba(23,59,102,.24); }
.primary-button span { font-size:18px; font-weight:400; }
.auth-switch { margin:22px 0 0; color:var(--muted); font-size:11px; text-align:center; }
.auth-switch a { color:var(--teal); font-weight:850; text-decoration:none; }
.role-switch { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0 0 19px; padding:5px; border:1px solid var(--line); border-radius:15px; background:#eceeea; }
.role-switch a { display:flex; align-items:center; gap:9px; padding:9px; border:1px solid transparent; border-radius:11px; color:var(--muted); text-decoration:none; }
.role-switch a.active { border-color:#dbe1df; background:white; color:var(--ink); box-shadow:0 5px 16px rgba(28,50,70,.07); }
.role-switch a > span:last-child { display:grid; }.role-switch strong { font-size:11px; }.role-switch small { margin-top:2px; font-size:8px; }
.role-icon { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:10px; }
.role-icon.parent { background:#eeeaf9; color:#705aaa; }.role-icon.student { background:var(--teal-soft); color:var(--teal); }
.role-icon svg,.family-note svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.family-note { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; margin-top:18px; padding:12px; border:1px dashed #cbd8d5; border-radius:12px; background:rgba(255,255,255,.55); }
.family-note > svg { padding:7px; width:34px; height:34px; border-radius:10px; background:var(--teal-soft); color:var(--teal); }
.family-note span { display:grid; gap:3px; }.family-note strong { font-size:10px; }.family-note small { color:var(--muted); font-size:9px; line-height:1.45; }
.dev-access { width:min(100%,570px); margin-top:45px; padding-top:22px; border-top:1px solid #d7dddb; }
.dev-access > header { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.dev-access > header > span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#fff0d4; color:#966615; }
.dev-access > header b { font-size:8px; letter-spacing:.06em; }
.dev-access > header div { display:grid; gap:2px; }.dev-access > header strong { font-size:11px; }.dev-access > header small { color:var(--muted); font-size:9px; }
.dev-users { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.dev-users button { width:100%; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:9px; padding:9px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.75); cursor:pointer; text-align:left; transition:.15s ease; }
.dev-users button:hover { border-color:#a8c9c2; background:white; transform:translateY(-1px); }
.dev-users button > span:nth-child(2) { display:grid; min-width:0; }.dev-users strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.dev-users small { color:var(--muted); font-size:8px; }
.dev-users i { color:var(--teal); font-style:normal; }
.dev-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--teal-soft); color:var(--teal); font-size:9px; font-weight:900; }
.dev-avatar.parent { background:#eeeaf9; color:#705aaa; }
.dev-empty { margin:0; padding:13px; border:1px dashed #cdd5d3; border-radius:11px; color:var(--muted); font-size:9px; text-align:center; }
.privacy-line { margin:22px 0 0; color:#949ca4; font-size:8px; text-align:center; }
@media (max-width:940px) {
  .auth-shell { grid-template-columns:minmax(320px,.7fr) minmax(480px,1.3fr); }
  .auth-story { padding:32px; }.story-copy h1 { font-size:49px; }.story-art { transform:scale(.88); transform-origin:left bottom; }
}
@media (max-width:760px) {
  .auth-shell { display:block; }.auth-story { display:none; }
  .auth-panel { min-height:100svh; justify-content:flex-start; padding:35px 20px 28px; }
  .mobile-brand { display:block; margin-bottom:15px; }.auth-card h2 { font-size:39px; }
  .dev-access { margin-top:36px; }.privacy-line { margin-bottom:6px; }
}
@media (max-width:460px) {
  .auth-panel { padding-inline:16px; }.auth-card h2 { font-size:35px; }
  .form-row { grid-template-columns:1fr; }.dev-users { grid-template-columns:1fr; }
  .role-switch a { padding:8px 6px; gap:7px; }.role-icon { width:31px; height:31px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }