@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2'); }
:root { color-scheme:light; --bg:#F3F6FC; --surface:#FFFFFF; --ink:#142039; --muted:#64748B; --line:#DFE7F3; --blue:#2563EB; --soft:#EAF1FF; --on-blue:#FFFFFF; --story:#EEF3FF; --preview:#FFFFFF; --error:#C62828; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:32px; color:var(--ink); background:var(--bg); font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; }
a { color:var(--blue); text-underline-offset:3px; }
svg { display:block; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.login-layout { width:100%; max-width:1080px; display:grid; grid-template-columns:1fr 1fr; min-height:700px; border:1px solid var(--line); border-radius:28px; background:var(--surface); box-shadow:0 24px 80px #14203909; overflow:hidden; }
.auth-story { display:flex; flex-direction:column; align-items:flex-start; padding:40px; background:radial-gradient(ellipse at 5% 75%,color-mix(in srgb,var(--blue) 9%,transparent),transparent 65%),var(--story); }
.login-brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; font-size:24px; letter-spacing:-1px; }
.login-brand img { width:36px; height:36px; border-radius:11px; box-shadow:0 4px 12px #2563eb18; }
.auth-story-copy { margin-top:58px; max-width:360px; }
.auth-story h2 { margin:0; font-size:clamp(36px,4.1vw,48px); font-weight:800; line-height:1.13; letter-spacing:-2.4px; }
.auth-story h2 span { color:var(--blue); }
.auth-story-copy > p { margin:20px 0 0; max-width:325px; color:var(--muted); font-size:14px; line-height:1.8; }
.auth-preview { width:100%; margin:32px 0; padding:18px; border:1px solid var(--line); border-radius:20px; background:var(--preview); box-shadow:0 12px 32px #14203906; transform:rotate(-2deg); }
.preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.preview-head strong { font-size:14px; letter-spacing:-.3px; }
.preview-head > span { padding:4px 8px; border-radius:99px; background:var(--soft); color:var(--blue); font-size:10px; font-weight:700; }
.preview-class { padding:14px; border:1px solid color-mix(in srgb,var(--blue) 22%,var(--line)); border-left:3px solid var(--blue); border-radius:12px; background:var(--soft); }
.preview-class > small { display:block; color:var(--blue); font-size:9px; font-weight:800; letter-spacing:1px; }
.preview-class > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:7px; }
.preview-class strong { font-size:18px; letter-spacing:-.6px; }
.preview-class time { color:var(--muted); font-size:10px; white-space:nowrap; }
.preview-task { display:flex; align-items:center; gap:10px; padding:14px 2px 0; }
.preview-check { flex-shrink:0; width:17px; height:17px; border:1.5px solid var(--line); border-radius:5px; }
.preview-task > div { display:flex; flex:1; flex-direction:column; gap:3px; }
.preview-task strong { font-size:12px; font-weight:600; }
.preview-task small { color:var(--muted); font-size:10px; }
.preview-task > span:last-child { width:7px; height:7px; border-radius:50%; background:#A78BFA; }
.auth-features { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-top:auto; color:var(--muted); font-size:11px; font-weight:600; }
.auth-features span { display:inline-flex; align-items:center; gap:6px; }
.login-card { align-self:center; min-width:0; padding:40px 44px; }
.auth-mobile-brand { display:none; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:30px; border-radius:12px; background:var(--bg); }
.auth-tabs a { display:grid; place-items:center; min-height:36px; border-radius:9px; color:var(--muted); text-decoration:none; font-size:12px; font-weight:650; }
.auth-tabs a[aria-current='page'] { color:var(--ink); background:var(--surface); box-shadow:0 1px 5px #1420390A; }
.auth-tabs a:hover { color:var(--blue); }
.auth-kicker { margin:0 0 10px; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:1.5px; }
h1 { margin:0; font-size:31px; line-height:1.2; letter-spacing:-1.3px; font-weight:800; }
.login-intro { color:var(--muted); margin:12px 0 26px; font-size:13px; line-height:1.7; }
.login-field { margin-top:16px; min-width:0; }
#loginForm > .login-field:first-child { margin-top:0; }
.login-field label { display:block; margin-bottom:7px; color:var(--ink); font-size:12px; font-weight:650; }
.login-field input { width:100%; min-width:0; height:48px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:10px; padding:0 13px; font-size:16px; outline:none; transition:border-color .15s,box-shadow .15s; }
.login-field input:hover { border-color:color-mix(in srgb,var(--muted) 45%,var(--line)); }
.login-field input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent); }
.login-field input::placeholder { color:var(--muted); opacity:.75; font-size:13px; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:48px; }
.show-password { position:absolute; right:2px; top:2px; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--muted); }
.show-password svg { width:19px; height:19px; }
.show-password:hover,.show-password[aria-pressed='true'] { color:var(--blue); background:var(--soft); }
.login-submit { margin-top:24px; display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:48px; padding:12px; border:0; border-radius:10px; background:var(--blue); color:var(--on-blue); font-size:13px; font-weight:700; box-shadow:0 4px 10px color-mix(in srgb,var(--blue) 14%,transparent); transition:filter .15s,transform .15s; }
.login-submit svg { width:17px; height:17px; }
.login-submit:hover { filter:brightness(.94); }
.login-submit:active { transform:translateY(1px); }
.login-submit:disabled { cursor:wait; opacity:.65; }
.login-error { color:var(--error); background:color-mix(in srgb,var(--error) 7%,var(--surface)); border:1px solid color-mix(in srgb,var(--error) 18%,var(--line)); border-radius:9px; padding:10px 12px; font-size:12px; line-height:1.6; margin:16px 0 0; }
.auth-switch { text-align:center; color:var(--muted); font-size:12px; margin:24px 0 0; line-height:1.6; }
.auth-switch a { font-weight:700; text-decoration:none; }
.auth-switch a:hover { text-decoration:underline; }
.login-help { color:var(--muted); font-size:10px; line-height:1.6; margin:7px 0 0; }
.legal-link { color:var(--muted); font-size:10px; line-height:1.8; text-align:center; margin:18px 0 0; }
.legal-link a { color:var(--muted); }
.legal-link a:hover { color:var(--blue); }
#inviteLinkStatus { padding:10px 12px; margin:0 0 20px; border:1px solid var(--line); border-radius:10px; background:var(--bg); font-size:12px; }
#inviteLinkStatus.invite-link-valid { background:var(--soft); color:var(--blue); }
@media(max-width:800px) {
  body { padding:24px; }
  .auth-story { padding:30px; }
  .login-card { padding:36px 28px; }
  .auth-story-copy { margin-top:48px; }
  .auth-story h2 { font-size:36px; letter-spacing:-1.7px; }
  .preview-class > div { flex-wrap:wrap; gap:6px; }
}
@media(max-width:640px) {
  body { display:block; padding:calc(24px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .login-layout { display:block; min-height:0; max-width:440px; margin:auto; border-radius:22px; }
  .auth-story { display:none; }
  .login-card { padding:26px 24px; }
  .auth-mobile-brand { display:inline-flex; margin-bottom:24px; font-size:21px; }
  .auth-mobile-brand img { width:30px; height:30px; border-radius:9px; }
  .auth-tabs { margin-bottom:26px; }
  h1 { font-size:29px; }
  .login-intro { margin-bottom:24px; }
}
@media(max-width:360px) {
  body { padding-inline:12px; }
  .login-card { padding:24px 20px; }
  h1 { font-size:27px; }
}
@media(prefers-color-scheme:dark) {
  :root { color-scheme:dark; --bg:#0B1220; --surface:#131C2F; --ink:#E8EEF8; --muted:#A0ADC3; --line:#2A3650; --blue:#80ACFF; --soft:#203455; --on-blue:#0B1220; --story:#16223A; --preview:#17243B; --error:#FCA5A5; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }