:root{
  color-scheme:light;
  --ink:#1d1b2e;--muted:#6c687d;--brand:#5b5bd6;--brand-dark:#4747b8;
  --soft:#eeebff;--paper:#fff;--page:#f6f3ff;--line:rgba(38,31,76,.12);--danger:#a9364f;
  --shadow:0 24px 70px rgba(53,43,111,.14);--focus:0 0 0 4px rgba(91,91,214,.22);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  background:
    radial-gradient(circle at 8% 2%,rgba(187,178,255,.42),transparent 34rem),
    radial-gradient(circle at 96% 94%,rgba(249,198,219,.32),transparent 28rem),var(--page);
  color:var(--ink);font-size:16px;line-height:1.5
}
button,input{font:inherit}
button,a,input{outline:none}
button:focus-visible,a:focus-visible,input:focus-visible{box-shadow:var(--focus)}
a{color:var(--brand-dark)}
[hidden]{display:none!important}
.shell{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
.topbar{display:flex;align-items:center;gap:16px;padding:18px clamp(18px,4vw,44px)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800}
.mark{width:34px;height:34px;border-radius:12px;background:var(--brand);display:grid;place-items:center;box-shadow:0 10px 22px rgba(91,91,214,.25)}
.mark:after{content:"";width:10px;height:10px;border-radius:50%;background:#fff}
.spacer{flex:1}
.quiet-link{border:0;background:transparent;color:var(--muted);font-weight:750;cursor:pointer;padding:8px}
.main{display:grid;place-items:center;padding:18px clamp(16px,4vw,44px) 30px}
.card{
  width:min(100%,690px);min-height:min(650px,calc(100svh - 150px));display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.8);border-radius:36px;background:rgba(255,255,255,.93);
  box-shadow:var(--shadow);overflow:hidden;position:relative;backdrop-filter:blur(18px)
}
.glow{position:absolute;width:270px;height:270px;border-radius:50%;pointer-events:none;opacity:.45}
.glow.one{top:-150px;right:-90px;background:#cbc4ff}.glow.two{bottom:-190px;left:-120px;background:#f7cadb}
.card>.sera-mascot--account{z-index:1;flex:none;margin:28px auto 0}
.screen{position:relative;z-index:1;flex:1;padding:clamp(30px,7vw,64px);display:flex;flex-direction:column;justify-content:center}
.card.account-entry>.sera-mascot--account{display:none}
.card.account-entry .screen{padding:clamp(24px,4vw,40px);justify-content:flex-start}
.card.account-entry .mode-tabs{margin-top:18px}
.card.account-entry .form{gap:10px;margin-top:20px}
.card.account-entry .mini{margin-top:4px}
.eyebrow{margin:0 0 12px;color:var(--brand-dark);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:850}
h1,h2{font-size:clamp(1.9rem,5vw,3rem);line-height:1.08;letter-spacing:-.04em;margin:0 0 14px;max-width:16ch}
.lead{font-size:clamp(1.03rem,2.4vw,1.22rem);line-height:1.58;color:var(--muted);max-width:35rem;margin:0}
.mini{color:var(--muted);font-size:.88rem;margin:13px 0 0}
.notice{padding:14px 16px;margin-top:20px;border:1px solid rgba(91,91,214,.16);border-radius:16px;background:#f5f3ff;color:var(--muted)}
.choice-stack,.form{display:grid;gap:14px;margin-top:27px}
.choice{
  width:100%;display:flex;align-items:center;gap:14px;padding:17px 18px;border:1px solid var(--line);
  border-radius:20px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;text-decoration:none
}
.choice:hover{border-color:rgba(91,91,214,.45)}
.choice-icon{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:14px;background:var(--soft)}
.choice-copy{display:block}.choice-copy b,.choice-copy small{display:block}.choice-copy small{color:var(--muted);margin-top:2px}
.mode-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;margin-top:24px;border-radius:14px;background:#efedf7}
.mode-tab{padding:10px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:800;cursor:pointer}
.mode-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 3px 12px rgba(43,34,90,.08)}
.mode-tab:disabled{opacity:.48;cursor:not-allowed}
.field label{display:block;margin:0 0 7px;font-size:.84rem;font-weight:800}
.field input{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--ink)}
.password-wrap{position:relative}.password-wrap input{padding-right:78px}
.password-toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);padding:8px;border:0;background:transparent;color:var(--brand-dark);font-size:.78rem;font-weight:850;cursor:pointer}
.strength{display:flex;align-items:center;gap:9px;min-height:26px;margin:8px 0 0;color:var(--muted);font-size:.84rem;font-weight:750}
.strength-light{width:12px;height:12px;border-radius:50%;background:#bc334f;box-shadow:0 0 0 3px rgba(188,51,79,.13)}
.strength[data-strength="fair"] .strength-light{background:#a66a00;box-shadow:0 0 0 3px rgba(166,106,0,.14)}
.strength[data-strength="strong"] .strength-light{background:#248153;box-shadow:0 0 0 3px rgba(36,129,83,.14)}
.strength[data-strength="fair"] strong{color:#805200}.strength[data-strength="strong"] strong{color:#17613d}.strength[data-strength="weak"] strong{color:var(--danger)}
.check{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer}
.check input{width:21px;height:21px;flex:none;margin:1px 0 0;accent-color:var(--brand)}
.check span{font-size:.86rem;line-height:1.45;color:var(--muted)}.check strong{color:var(--ink)}
.btn{
  min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 23px;
  border:0;border-radius:999px;font-weight:850;cursor:pointer;text-decoration:none
}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 12px 28px rgba(91,91,214,.24)}
.btn.secondary{background:#efedf7;color:var(--ink)}
.btn.text{min-height:42px;background:transparent;color:var(--brand-dark);padding-inline:10px}
.btn:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}
.form .btn.primary{width:100%}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.otp-fields{display:flex;gap:clamp(6px,2vw,12px);margin-top:28px;justify-content:center}
.otp-fields input{width:clamp(43px,13vw,62px);height:68px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);font-size:1.8rem;font-weight:850;text-align:center}
.err{min-height:1.35em;margin:12px 0 0;color:var(--danger);font-size:.9rem}
.privacy-note{padding:0 clamp(18px,4vw,44px) 18px;color:var(--muted);font-size:.78rem;text-align:center}
@media(max-width:640px){
  .topbar{padding:13px 16px}.main{padding:5px 10px 20px;align-items:stretch}.card{min-height:calc(100svh - 90px);border-radius:28px}
  .card>.sera-mascot--account{margin-top:20px}.screen{padding:24px}.form-actions{align-items:stretch;flex-direction:column}.form-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}