@font-face{font-family:Baloo;src:url('/fonts/baloo-2-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Baloo;src:url('/fonts/baloo-2-vietnamese-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Baloo;src:url('/fonts/baloo-2-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Baloo;src:url('/fonts/baloo-2-vietnamese-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
:root{--ink:#241a4d;--violet:#6d4aff;--violet-d:#4a2fcf;--yellow:#ffd94a;--coral:#ff6b5b;--green:#35c27a;--line:#dcd6f5;font-family:Baloo,ui-rounded,system-ui,sans-serif;font-weight:500;color:var(--ink)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:20px 14px;background:radial-gradient(120% 90% at 20% 0,#7b5cff,#3b24b8 55%,#1a0e78)}
.card{width:100%;max-width:420px;background:#fff;border-radius:26px;padding:22px 20px 18px;box-shadow:0 8px 0 #cfc7f5,0 24px 40px #1a0e7855}
h1{margin:0 0 4px;font-size:26px;line-height:1.1}
.sub{margin:0 0 14px;opacity:.7;font-size:15px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:700;color:var(--violet-d)}
.brand i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--yellow),#ff9a3d);display:grid;place-items:center;font-style:normal;font-size:20px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#f0edff;border-radius:16px;padding:4px;margin-bottom:14px}
.tabs button{border:0;background:transparent;border-radius:12px;padding:8px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.tabs button[aria-selected="true"]{background:#fff;box-shadow:0 2px 6px #4a2fcf33;color:var(--violet-d)}
form{display:flex;flex-direction:column;gap:10px}
label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
label small{font-weight:500;opacity:.65}
input{border:2px solid var(--line);border-radius:14px;padding:10px 12px;font:inherit;font-size:18px;background:#fff;color:var(--ink);outline:none}
input:focus{border-color:var(--violet)}
.btn{border:0;border-radius:16px;padding:11px 18px;font:inherit;font-weight:700;font-size:18px;color:#fff;background:linear-gradient(180deg,#8a6dff,var(--violet));box-shadow:0 4px 0 var(--violet-d);cursor:pointer;text-align:center;text-decoration:none;display:block}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--violet-d)}
.btn:disabled{opacity:.6}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.btn.danger{background:linear-gradient(180deg,#ff9a8c,var(--coral));box-shadow:0 4px 0 #d94a3b}
.google{display:flex;align-items:center;justify-content:center;gap:10px}
.google svg{width:20px;height:20px}
.or{display:flex;align-items:center;gap:10px;margin:12px 0;opacity:.55;font-size:14px}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.msg{margin:0;padding:8px 12px;border-radius:12px;font-weight:700;font-size:14px}
.msg.err{background:#ffe3dd;color:#b3321f}.msg.ok{background:#d9f8e4;color:#0d6a35}
.who{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:#f0edff;margin-bottom:12px}
.who b{display:block;font-size:19px;line-height:1.15}.who span{font-size:14px;opacity:.7}
.who .face{width:48px;height:48px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-weight:700;font-size:24px;overflow:hidden;flex:none}
.who .face img{width:100%;height:100%;object-fit:cover}
.stack{display:flex;flex-direction:column;gap:10px}
.fine{margin:12px 0 0;font-size:13px;opacity:.6;text-align:center}
details{border:2px solid var(--line);border-radius:16px;padding:8px 12px}summary{font-weight:700;cursor:pointer}
details[open] summary{margin-bottom:8px}