* , *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; --login-bg:#f5f5f7; --login-card:#fff; --login-text:#1c1c1e; --login-muted:#636369; --login-border:rgba(0,0,0,.1); --login-fill:#f5f5f7; }
html[data-theme="dark"] { color-scheme:dark; --login-bg:#000; --login-card:#1c1c1e; --login-text:#fff; --login-muted:#b4b4b4; --login-border:rgba(255,255,255,.12); --login-fill:#2c2c2e; }
html, body { margin:0; min-height:100%; background:var(--login-bg); }
body { min-height:100dvh; display:flex; flex-direction:column; color:var(--login-text); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; }
button:focus-visible, a:focus-visible { outline:3px solid #007aff; outline-offset:4px; }
[hidden] { display:none !important; }
.wrap { flex:1; width:min(100%,1060px); margin:auto; display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:88px; padding:80px 32px; }
.welcome { padding-bottom:36px; }
.welcome-logo { display:block; width:120px; height:120px; object-fit:contain; margin:0 0 16px; }
.welcome-logo-dark { display:none; }
html[data-theme="dark"] .welcome-logo-light { display:none; }
html[data-theme="dark"] .welcome-logo-dark { display:block; }
.welcome-heading { font-size:32px; line-height:1.3; letter-spacing:-1px; font-weight:500; margin:0; }
.welcome-copy { color:var(--login-muted); font-size:17px; line-height:1.5; margin:16px 0 0; }
.form { width:100%; max-width:420px; padding:30px; background:var(--login-card); border:1px solid var(--login-border); border-radius:24px; box-shadow:0 12px 40px rgba(0,0,0,.05); }
h1 { font-size:23px; font-weight:600; letter-spacing:-.6px; line-height:1.25; margin:0 0 10px; text-align:center; }
.sub { color:var(--login-muted); font-size:14px; line-height:21px; margin:0 0 26px; text-align:center; }
.stack { display:grid; gap:12px; }
.btn { display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; width:100%; padding:14px 16px; border:1px solid var(--login-border); border-radius:14px; background:var(--login-card); color:var(--login-text); font-size:15px; line-height:22px; font-weight:600; letter-spacing:-.2px; transition:background .15s,transform .08s; }
.btn:hover { background:var(--login-fill); }
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.55; cursor:wait; }
.btn svg { width:19px; height:19px; flex-shrink:0; }
.btn-apple svg { fill:currentColor; }
.google-signin { position:relative; min-height:52px; width:100%; border-radius:14px; overflow:hidden; }
.google-button-face { pointer-events:none; }
.google-signin:hover .google-button-face { background:var(--login-fill); }
.google-signin:focus-within { outline:3px solid #007aff; outline-offset:4px; }
/* The real Google-rendered control receives the user's click and keyboard
   input. Our matching surface beneath it changes presentation only. */
#googleButton { position:absolute; inset:0; width:100%; min-width:0; display:flex; align-items:center; justify-content:center; opacity:0; }
#googleButton iframe { transform:scaleY(1.3); transform-origin:center; }
.google-status { color:var(--login-muted); font-size:14px; padding:14px 0; }
.google-signin[data-busy="true"] { pointer-events:none; opacity:.55; }
.google-signin[aria-busy="true"] { pointer-events:none; opacity:.55; }
#retryGoogle { width:100%; margin-top:-10px; }
.btn-phone, .step-email .btn-student, .step-code #btnVerify { color:#fff; background:#007aff; border-color:transparent; }
.btn-phone:hover, .step-email .btn-student:hover, .step-code #btnVerify:hover { background:#0069db; }
.btn-phone svg { stroke:currentColor; fill:none; stroke-width:2; }
.signin-divider { display:flex; align-items:center; gap:14px; color:var(--login-muted); font-size:12px; margin:2px 0; }
.signin-divider::before, .signin-divider::after { content:''; height:1px; background:var(--login-border); flex:1; }
.student-option { margin-top:18px; padding-top:18px; border-top:1px solid var(--login-border); }
.student-option .btn { border:0; background:var(--login-fill); font-size:14px; min-height:46px; }
.btn-student svg { fill:currentColor; }
.legal { color:var(--login-muted); font-size:11px; line-height:17px; text-align:center; margin:22px 0 0; }
.legal a { color:var(--login-text); }
.field { width:100%; min-height:54px; border-radius:14px; border:1px solid var(--login-border); padding:14px 16px; font-size:16px; color:var(--login-text); background:var(--login-fill); outline:none; }
.field:focus { border-color:#007aff; box-shadow:0 0 0 3px rgba(0,122,255,.15); }
.field.code { text-align:center; letter-spacing:8px; font-size:24px; font-weight:600; }
.error { color:#bd2920; background:rgba(255,59,48,.07); border-radius:12px; padding:12px; font-size:13px; line-height:19px; margin:0 0 12px; }
html[data-theme="dark"] .error { color:#ff8a83; }
.back-step { background:none; border:0; min-height:44px; color:var(--login-muted); font-size:14px; padding:10px; align-self:center; }
.step { display:none; }
main[data-step="idle"] .step-idle, main[data-step="loading"] .step-loading { display:flex; flex-direction:column; }
main[data-step="email"] .step-email, main[data-step="phone"] .step-phone, main[data-step="code"] .step-code { display:flex; flex-direction:column; gap:12px; }
.spinner { width:20px; height:20px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.signin-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; color:var(--login-muted); font-size:12px; line-height:18px; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); }
#recaptcha-container { position:fixed; right:12px; bottom:12px; max-width:calc(100vw - 24px); z-index:10; }
@media(max-width:760px) {
  .wrap { max-width:440px; grid-template-columns:1fr; gap:28px; padding:36px 20px 20px; align-content:center; }
  .welcome { text-align:center; padding:0; }
  .welcome-logo { width:100px; height:100px; margin:0 auto 12px; }
  .welcome-heading { font-size:24px; letter-spacing:-.6px; }
  .desktop-break { display:none; }
  .welcome-copy { font-size:15px; margin-top:10px; }
  .form { max-width:none; padding:24px; border-radius:22px; }
  h1 { font-size:21px; }
  .signin-footer { gap:16px; padding-top:20px; }
}
@media(prefers-reduced-motion:reduce) { .btn { transition:none; } .spinner { animation-duration:1.5s; } }