:root { color-scheme: light; --bg:#f8fafc; --surface:#ffffff; --text:#0f172a; --muted:#64748b; --border:#dbe2eb; --primary:#2563eb; --primary-hover:#1d4ed8; --focus:#93c5fd; --danger:#b91c1c; --danger-bg:#fef2f2; --shadow:0 1px 2px rgba(15,23,42,.035); }
    html[data-theme="dark"] { color-scheme:dark; --bg:#0b1220; --surface:#111c2e; --text:#f1f5f9; --muted:#a4b2c7; --border:#34435a; --primary:#60a5fa; --primary-hover:#93c5fd; --focus:#60a5fa; --danger:#fca5a5; --danger-bg:#3c1d26; --shadow:none; }
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
    body{min-height:100vh;background:var(--bg);color:var(--text);transition:background-color .15s,color .15s}
    button,input{font:inherit}
    button{cursor:pointer}
    .page{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
    .header{display:flex;align-items:center;justify-content:space-between;padding:25px clamp(24px,5vw,84px)}
    .brand{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:750;letter-spacing:-.02em;color:var(--text);text-decoration:none}
    .brand-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--primary);color:var(--surface);font-size:17px;font-weight:800}
    html[data-theme="dark"] .brand-mark{color:#081426}
    .theme-button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:9px;padding:9px 12px;font-size:13px;min-height:38px}
    .theme-button:hover{border-color:var(--primary)}
    .main{display:flex;justify-content:center;align-items:center;padding:48px 24px 90px}
    .auth{width:min(100%,410px)}
    h1{font-size:30px;letter-spacing:-.045em;line-height:1.2;margin:0 0 9px;font-weight:750}
    .subtitle{font-size:14px;color:var(--muted);margin:0 0 34px;line-height:1.6}
    .field{margin-bottom:20px}
    .field-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
    label{font-size:13px;font-weight:650}
    .text-input{display:block;width:100%;height:46px;padding:0 14px;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--text);outline:none;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
    .text-input::placeholder{color:var(--muted);opacity:.8}
    .text-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}
    .password-wrap{position:relative}
    .password-wrap .text-input{padding-right:66px}
    .show-password{position:absolute;right:8px;top:6px;height:34px;border:0;background:transparent;color:var(--muted);font-size:12px;padding:0 8px;border-radius:6px}
    .show-password:hover{color:var(--text);background:color-mix(in srgb,var(--muted) 10%,transparent)}
    a{color:var(--primary);text-decoration:none;font-weight:650}
    a:hover{text-decoration:underline}
    .small-link{font-size:12px;white-space:nowrap}
    .submit{width:100%;height:46px;background:var(--primary);color:#fff;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:700;margin-top:4px;transition:background-color .15s}
    .submit:hover{background:var(--primary-hover)}
    html[data-theme="dark"] .submit{color:#081426}
    .submit:disabled{opacity:.7;cursor:wait}
    .signup{text-align:center;color:var(--muted);font-size:13px;margin:25px 0 0}
    .footer{text-align:center;color:var(--muted);font-size:12px;padding:18px 24px 24px}
    .message{display:none;border-radius:8px;padding:11px 12px;margin:0 0 15px;font-size:13px;line-height:1.5}
    .message.show{display:block}
    .message.error{color:var(--danger);background:var(--danger-bg)}
    .message.info{color:var(--text);background:var(--surface);border:1px solid var(--border)}
    .field-error{font-size:12px;color:var(--danger);margin:6px 0 0;min-height:0}
    .text-input[aria-invalid="true"]{border-color:var(--danger)}
    :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
    @media(max-width:600px){.header{padding:20px 22px}.main{align-items:flex-start;padding:76px 24px 50px}h1{font-size:27px}.footer{padding-bottom:22px}}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
  
    .checkbox-line{display:flex;align-items:flex-start;gap:9px;margin:0 0 20px;font-size:13px;line-height:1.5;color:var(--muted)}
    .checkbox-line input{margin-top:3px;accent-color:var(--primary)}
    .hint{font-size:12px;color:var(--muted);line-height:1.55;margin:7px 0 0}
    .secondary{display:block;text-align:center;font-size:13px;margin:22px 0 0;color:var(--muted)}
    .status-mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:24px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font-size:24px;font-weight:700}
    .otp{font-size:24px;letter-spacing:.42em;text-align:center;font-variant-numeric:tabular-nums;padding-left:calc(14px + .42em)}
    .small-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;margin-top:20px}
    .link-button{padding:0;background:none;border:0;color:var(--primary);font-weight:650;font-size:13px}
    .link-button:disabled{color:var(--muted);cursor:not-allowed}
    .submit-link{display:flex;align-items:center;justify-content:center;text-decoration:none}
    .submit-link:hover{text-decoration:none}
    .progress-note{font-size:12px;color:var(--muted);margin-top:9px}
    .dev-note{margin-top:15px;font-size:12px;color:var(--muted);line-height:1.5}
    .screen-index{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px auto 0;max-width:780px;padding:0 16px 12px}
    .screen-index a{font-size:11px;color:var(--muted);font-weight:500;text-decoration:none}
    .screen-index a:hover{color:var(--primary)}

/* Live password validation — registration only */
.password-rules{margin:10px 0 0;padding:11px 13px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.password-rules-title{font-size:12px;font-weight:650;margin:0 0 7px;color:var(--text)}
.password-rules ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.password-rules li{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5}
.rule-icon{width:15px;flex:none;text-align:center;font-weight:800}
.rule-pending{color:var(--muted)}
.rule-met{color:#15803d}
html[data-theme="dark"] .rule-met{color:#86efac}
.password-match{font-size:12px;margin:7px 0 0;color:var(--muted)}
.match-success{color:#15803d}
html[data-theme="dark"] .match-success{color:#86efac}
.match-error{color:var(--danger)}
.submit:disabled{opacity:.5;cursor:not-allowed}

/* 2026 refresh: calm desktop auth design, shared across every screen */
:root{--bg:#f7f9ff;--surface:#fff;--text:#101b36;--muted:#62728d;--border:#dce4f2;--primary:#175df4;--primary-hover:#0f4edc;--focus:#a3bbff;--shadow:0 16px 55px rgba(47,78,146,.075)}
html[data-theme="dark"]{--bg:#0a1020;--surface:#141d30;--text:#f2f6ff;--muted:#a2b0cb;--border:#35435f;--primary:#4d82ff;--primary-hover:#6795ff;--focus:#5987ff;--shadow:0 18px 50px rgba(0,0,0,.24)}
body{background:var(--bg)}
.page{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;grid-template-rows:auto 1fr auto}
.background-art{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 5% 82%,rgba(113,156,255,.15),transparent 32%),radial-gradient(ellipse at 96% 12%,rgba(119,148,255,.16),transparent 33%),var(--bg)}
.orb{position:absolute;border-radius:50%;border:1px solid rgba(84,135,246,.09);background:linear-gradient(140deg,rgba(116,164,255,.15),rgba(149,177,255,.035))}
.orb-one{width:570px;height:570px;left:-350px;bottom:-180px}
.orb-two{width:680px;height:680px;right:-390px;top:-390px}
.orb-three{width:420px;height:420px;right:7%;bottom:-320px;opacity:.4}
.dot-grid{position:absolute;width:140px;height:140px;background-image:radial-gradient(circle,rgba(77,126,244,.26) 2px,transparent 2.5px);background-size:27px 27px}
.dots-left{top:12%;left:3%}.dots-right{right:2%;bottom:15%}
.header{padding:24px clamp(24px,5vw,80px)}
.brand{font-weight:750;letter-spacing:-.025em}
.brand-mark{width:36px;height:36px;background:linear-gradient(140deg,#2563eb,#4f7dff);border-radius:11px;color:#fff;font-size:23px}
.theme-button{background:color-mix(in srgb,var(--surface) 85%,transparent);border-radius:10px}
.main{padding:44px 24px 60px;align-items:center}
.auth{width:min(100%,480px);background:var(--surface);border:1px solid color-mix(in srgb,var(--border) 75%,transparent);border-radius:16px;padding:clamp(26px,4vw,42px);box-shadow:var(--shadow)}
h1{font-size:30px;letter-spacing:-.045em}
.subtitle{margin-bottom:28px}
.field{margin-bottom:18px}
.text-input{height:48px;border-radius:9px;box-shadow:none;background:var(--surface)}
.submit{height:48px;border-radius:9px;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:10px}
html[data-theme="dark"] .submit{color:#fff}
.remember-row{margin:2px 0 14px;color:var(--text)}
.footer{padding:15px 24px 24px;font-size:11px;opacity:.75}
.screen-index{display:none!important}
@media(min-width:1200px){.main{padding:28px 24px 45px}.auth{width:480px}}
@media(max-width:600px){.header{padding:19px 20px}.main{padding:30px 18px 48px;align-items:center}.auth{padding:27px 22px}.dot-grid{opacity:.45}}


/* v4: Comfortable desktop layout, viewport-locked without squeezing typography */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
.page{height:100vh;height:100dvh;min-height:0;max-height:100dvh;overflow:hidden;display:grid;grid-template-rows:64px minmax(0,1fr) 34px}
.header{padding:12px clamp(24px,4vw,64px)}
.main{min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:10px 24px}
.auth{width:min(100%,510px);max-height:100%;overflow:hidden;padding:28px 32px;border-radius:17px}
h1{font-size:28px;line-height:1.22;margin-bottom:7px}
.subtitle{font-size:14px;line-height:1.5;margin-bottom:20px}
.field{margin-bottom:14px}
.field-top{margin-bottom:7px}
label{font-size:13px}
.text-input{height:44px;font-size:14px}
.show-password{top:5px}
.submit{height:44px}
.signup{margin-top:18px}
.footer{padding:7px 12px;font-size:11px}
.checkbox-line{margin-bottom:13px}
body[data-page="register"] .auth{width:min(100%,510px);padding:22px 30px}
body[data-page="register"] .subtitle{margin-bottom:16px}
body[data-page="register"] .field{margin-bottom:11px}
body[data-page="register"] .field-top{margin-bottom:6px}
body[data-page="register"] .text-input{height:42px}
body[data-page="register"] .show-password{top:4px}
body[data-page="register"] .signup{margin-top:13px}
body[data-page="register"] .checkbox-line{margin:8px 0 10px}
body[data-page="register"] .submit{height:43px}
body[data-page="register"] .password-match{margin-top:6px;min-height:16px}
/* Rule rows vanish individually as each condition becomes true. */
.password-rules{margin:9px 0 0;padding:12px 14px;overflow:hidden;transition:padding .3s ease,margin .3s ease,border-color .3s ease,background .3s ease}
.password-rules-title{font-size:12px;margin:0 0 8px;line-height:1.4}
.password-rules ul{gap:0}
.password-rules li{max-height:25px;min-height:21px;opacity:1;overflow:hidden;line-height:21px;font-size:12px;transform:translateY(0);transition:max-height .32s cubic-bezier(.22,1,.36,1),min-height .32s ease,opacity .2s ease,transform .32s ease,margin .32s ease}
.password-rules li.rule-met{max-height:0;min-height:0;opacity:0;transform:translateY(-7px);margin:0;pointer-events:none}
.password-rules.is-complete{padding:10px 14px;background:color-mix(in srgb,#16a34a 7%,var(--surface));border-color:color-mix(in srgb,#16a34a 35%,var(--border))}
.password-rules.is-complete .password-rules-title{margin:0;color:#15803d}
html[data-theme="dark"] .password-rules.is-complete .password-rules-title{color:#86efac}
.password-match{transition:color .2s ease}
/* Smooth, brief cross-page movement; animations are disabled for reduced motion. */
.auth{animation:auth-enter .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes auth-enter{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
.page.is-leaving .auth{animation:auth-exit .19s ease-in both}
@keyframes auth-exit{to{opacity:0;transform:translateY(-7px) scale(.995)}}
.page.is-leaving{pointer-events:none}
@media(max-height:760px){.page{grid-template-rows:54px minmax(0,1fr) 24px}.header{padding-top:7px;padding-bottom:7px}.main{padding:4px 20px}.footer{padding:3px 12px}body[data-page="register"] .auth{padding:17px 27px}body[data-page="register"] .field{margin-bottom:9px}body[data-page="register"] .subtitle{margin-bottom:11px}body[data-page="register"] .password-rules{padding:9px 12px}body[data-page="register"] .password-rules-title{margin-bottom:5px}}
@media(max-height:650px){.page{grid-template-rows:42px minmax(0,1fr) 18px}.header{padding-top:4px;padding-bottom:4px}.brand-mark{height:29px;width:29px}.theme-button{min-height:30px;padding:5px 10px}.footer{font-size:10px}body[data-page="register"] .auth{padding:12px 22px}body[data-page="register"] h1{font-size:24px}body[data-page="register"] .subtitle{margin-bottom:7px}body[data-page="register"] .field{margin-bottom:6px}body[data-page="register"] .field-top{margin-bottom:3px}body[data-page="register"] .text-input{height:36px}body[data-page="register"] .show-password{top:1px}body[data-page="register"] .password-rules{margin-top:5px;padding:6px 10px}body[data-page="register"] .password-rules li{font-size:11px;line-height:18px;min-height:18px;max-height:18px}body[data-page="register"] .checkbox-line{margin:4px 0}body[data-page="register"] .signup{margin-top:6px}}
@media(max-width:600px){.main{padding:8px 12px}.header{padding:10px 16px}.auth{padding:22px 20px}body[data-page="register"] .auth{padding:16px 18px}}
@media(prefers-reduced-motion:reduce){.auth,.page.is-leaving .auth{animation:none!important}.password-rules li{transition:none!important}}

/* v6 — natural registration spacing, with true collapsing password rules. */
body[data-page="register"] .page{grid-template-rows:64px minmax(0,1fr) 0px}
body[data-page="register"] .footer{display:none}
body[data-page="register"] .main{padding:18px 24px;overflow:hidden}
body[data-page="register"] .auth{width:min(100%,480px);padding:30px 34px}
body[data-page="register"] h1{font-size:29px;line-height:1.25}
body[data-page="register"] .subtitle{font-size:14px;line-height:1.55;margin:6px 0 23px}
body[data-page="register"] .field{margin-bottom:17px}
body[data-page="register"] .field-top{margin-bottom:8px}
body[data-page="register"] label{font-size:13px;line-height:1.45}
body[data-page="register"] .text-input{height:46px;font-size:14px}
body[data-page="register"] .show-password{top:6px}
body[data-page="register"] .checkbox-line{margin:14px 0 15px;font-size:13px;line-height:1.5}
body[data-page="register"] .submit{height:46px;margin-top:4px}
body[data-page="register"] .signup{margin-top:20px;font-size:13px}
body[data-page="register"] .password-match{margin:8px 0 0;min-height:0;font-size:12px;line-height:1.5}
body[data-page="register"] .password-rules{margin:11px 0 0;padding:12px 14px;border-width:1px;overflow:hidden;transition:padding .65s cubic-bezier(.2,.75,.2,1),margin .65s cubic-bezier(.2,.75,.2,1),border-width .65s ease,opacity .55s ease}
body[data-page="register"] .password-rules-title{font-size:12px;line-height:1.5;margin:0 0 8px}
body[data-page="register"] .password-rules ul{gap:0}
body[data-page="register"] .password-rules li{display:flex;align-items:center;box-sizing:border-box;max-height:28px;min-height:0;height:auto;line-height:21px;font-size:12px;padding:2px 0;margin:0;opacity:1;transform:translateY(0);overflow:hidden;transition:max-height .7s cubic-bezier(.2,.75,.2,1),padding .7s cubic-bezier(.2,.75,.2,1),opacity .55s ease,transform .7s cubic-bezier(.2,.75,.2,1)}
body[data-page="register"] .password-rules li.rule-met{max-height:0;min-height:0;padding-top:0;padding-bottom:0;margin:0;opacity:0;transform:translateY(-6px);pointer-events:none}
body[data-page="register"] .password-rules.is-complete{margin:0;padding:0;border-width:0;opacity:0}
body[data-page="register"] .password-rules.is-complete .password-rules-title{max-height:0;margin:0;overflow:hidden}
/* Do not squash typography on shorter windows; only modestly adjust outer spacing. */
@media(max-height:760px){body[data-page="register"] .auth{padding:24px 30px}body[data-page="register"] .main{padding:6px 20px}}
@media(max-height:650px){body[data-page="register"] .auth{padding:22px 28px}body[data-page="register"] h1{font-size:27px}body[data-page="register"] .subtitle{margin-bottom:18px}body[data-page="register"] .field{margin-bottom:14px}body[data-page="register"] .text-input{height:44px}body[data-page="register"] .show-password{top:5px}body[data-page="register"] .password-rules li{font-size:12px;line-height:21px;max-height:28px}body[data-page="register"] .password-rules li.rule-met{max-height:0}body[data-page="register"] .signup{margin-top:16px}}
@media(max-width:600px){body[data-page="register"] .auth{padding:22px 22px}body[data-page="register"] .main{padding:8px 14px}}
@media(prefers-reduced-motion:reduce){body[data-page="register"] .password-rules,body[data-page="register"] .password-rules li{transition:none!important}}

/* Registration refinement v4: natural spacing and genuinely collapsing rules.
   Keep this block last to supersede the earlier compact-height overrides. */
body[data-page="register"] .page { grid-template-rows: 60px minmax(0,1fr); }
body[data-page="register"] .header { padding: 12px clamp(24px,4vw,64px); }
body[data-page="register"] .main { padding: 18px 24px; overflow: hidden; align-items: center; }
body[data-page="register"] .auth { width: min(100%, 510px); padding: 30px 32px; max-height: none; overflow: visible; }
body[data-page="register"] h1 { font-size: 27px; line-height: 1.3; margin: 0 0 5px; }
body[data-page="register"] .subtitle { font-size: 14px; line-height: 1.55; margin: 0 0 20px; }
body[data-page="register"] .field { margin: 0 0 15px; }
body[data-page="register"] .field-top { margin: 0 0 7px; }
body[data-page="register"] label { font-size: 13px; line-height: 1.5; }
body[data-page="register"] .text-input { height: 46px; font-size: 14px; }
body[data-page="register"] .show-password { top: 6px; }
body[data-page="register"] .checkbox-line { margin: 13px 0 14px; font-size: 13px; line-height: 1.5; }
body[data-page="register"] .submit { height: 46px; margin-top: 4px; }
body[data-page="register"] .signup { margin: 18px 0 0; font-size: 13px; line-height: 1.5; }
body[data-page="register"] .password-match { font-size: 12px; line-height: 1.5; margin: 7px 0 0; min-height: 0; }
body[data-page="register"] .password-rules {
  margin: 12px 0 0; padding: 13px 15px; border: 1px solid var(--border);
  max-height: 260px; overflow: hidden;
  transition: max-height .8s cubic-bezier(.4,0,.2,1),
              padding .8s cubic-bezier(.4,0,.2,1),
              margin .8s cubic-bezier(.4,0,.2,1),
              border-width .8s ease, opacity .55s ease;
}
body[data-page="register"] .password-rules-title { font-size: 12px; line-height: 1.5; margin: 0 0 8px; }
/* A block list is essential: the old CSS grid was reserving row tracks. */
body[data-page="register"] .password-rules ul { display: block; list-style: none; padding: 0; margin: 0; }
body[data-page="register"] .password-rules li,
body[data-page="register"] .password-rules li.rule-pending {
  display: flex; align-items: center; box-sizing: border-box;
  height: 27px; max-height: 27px; min-height: 0;
  padding: 3px 0; margin: 0; gap: 9px;
  font-size: 12px; line-height: 21px; opacity: 1;
  overflow: hidden; transform: translateY(0);
  transition: height .8s cubic-bezier(.4,0,.2,1),
              max-height .8s cubic-bezier(.4,0,.2,1),
              padding .8s cubic-bezier(.4,0,.2,1),
              opacity .65s ease, transform .8s cubic-bezier(.4,0,.2,1);
}
body[data-page="register"] .password-rules li.rule-met {
  height: 0; max-height: 0; min-height: 0; padding: 0; margin: 0;
  opacity: 0; transform: translateY(-5px); pointer-events: none;
}
body[data-page="register"] .password-rules.is-complete {
  max-height: 0; padding-top: 0; padding-bottom: 0;
  margin-top: 0; margin-bottom: 0; border-width: 0; opacity: 0;
}
body[data-page="register"] .password-rules.is-complete .password-rules-title { margin-bottom: 0; }
/* Do not squeeze typography, fields, or the checklist on shorter windows. */
@media (max-height:760px) {
  body[data-page="register"] .auth { padding: 30px 32px; }
  body[data-page="register"] .main { padding: 18px 24px; }
  body[data-page="register"] .subtitle { margin-bottom: 20px; }
  body[data-page="register"] .field { margin-bottom: 15px; }
  body[data-page="register"] .password-rules { padding: 13px 15px; }
  body[data-page="register"] .password-rules.is-complete { padding: 0; }
}
@media (max-height:650px) {
  body[data-page="register"] h1 { font-size: 27px; }
  body[data-page="register"] .field-top { margin-bottom: 7px; }
  body[data-page="register"] .text-input { height: 46px; }
  body[data-page="register"] .show-password { top: 6px; }
  body[data-page="register"] .password-rules li,
  body[data-page="register"] .password-rules li.rule-pending { height: 27px; max-height: 27px; font-size: 12px; line-height: 21px; }
  body[data-page="register"] .password-rules li.rule-met { height: 0; max-height: 0; padding: 0; }
  body[data-page="register"] .checkbox-line { margin: 13px 0 14px; }
  body[data-page="register"] .signup { margin-top: 18px; }
}
@media (max-width:600px) {
  body[data-page="register"] .auth { padding: 24px 22px; }
  body[data-page="register"] .main { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="register"] .password-rules,
  body[data-page="register"] .password-rules li { transition: none !important; }
}

/* Registration v5: allow the form to scroll naturally instead of clipping it.
   The brand header remains visible and decorative shapes never create scrollbars. */
body[data-page="register"] .page {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: 60px minmax(0, 1fr);
}
body[data-page="register"] .main {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 24px 36px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
body[data-page="register"] .auth {
  flex: 0 1 510px;
  width: min(100%, 510px);
  margin-block: auto;
  max-height: none;
  overflow: visible;
}
@media (max-width: 600px) {
  body[data-page="register"] .main { padding: 18px 14px 28px; }
}


/* v7 — refined native HTML/CSS SaaS UI, no framework required */
:root{--bg:#f5f7ff;--surface:#fff;--text:#15213d;--muted:#64748b;--border:#dbe3f1;--primary:#2563eb;--primary-hover:#1d4ed8;--focus:#8fb0ff;--shadow:0 24px 70px rgba(27,57,119,.10);--success:#15803d}
html[data-theme="dark"]{--bg:#090f20;--surface:#151e31;--text:#f5f7ff;--muted:#a7b6d1;--border:#354560;--primary:#4c82ff;--primary-hover:#6897ff;--focus:#4c82ff;--shadow:0 25px 70px rgba(0,0,0,.24);--success:#86efac}
body{background:var(--bg)}
.page{grid-template-rows:68px minmax(0,1fr) 30px}
.header{padding:14px clamp(24px,4vw,64px)}
.main{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;padding:28px 20px 42px;align-items:flex-start;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.auth{flex:none;margin:auto;width:min(100%,490px);padding:36px 38px;border-radius:20px;border:1px solid var(--border);box-shadow:var(--shadow);overflow:visible}
h1{font-size:29px;line-height:1.25;letter-spacing:-.035em;margin-bottom:8px}
.subtitle{font-size:14px;line-height:1.65;margin-bottom:27px}
.field{margin-bottom:19px}.field-top{margin-bottom:9px}label{font-size:13.5px;line-height:1.5}
.text-input{height:49px;border-radius:11px;font-size:14px;padding-inline:15px;transition:border-color .2s,box-shadow .2s,background-color .2s}
.text-input:hover:not(:focus){border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.submit{height:49px;border-radius:11px;transition:transform .2s,box-shadow .2s,background-color .2s}
.submit:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(37,99,235,.18)}
.submit:not(:disabled):active{transform:translateY(0)}
.theme-button{border-radius:11px;transition:border-color .2s,background-color .2s}
.signup{line-height:1.7;margin-top:22px}
.footer{opacity:.65;padding:4px 16px 8px}
/* Registration uses the same spacing as the rest of the app. Never squeeze for viewport height. */
body[data-page="register"] .page{grid-template-rows:68px minmax(0,1fr) 30px}
body[data-page="register"] .header{padding:14px clamp(24px,4vw,64px)}
body[data-page="register"] .main{padding:28px 20px 42px;overflow-x:hidden;overflow-y:auto;align-items:flex-start}
body[data-page="register"] .auth{flex:none;width:min(100%,510px);padding:34px 38px;margin:auto}
body[data-page="register"] h1{font-size:29px;line-height:1.25}
body[data-page="register"] .subtitle{font-size:14px;line-height:1.65;margin-bottom:25px}
body[data-page="register"] .field{margin-bottom:19px}
body[data-page="register"] .field-top{margin-bottom:9px}
body[data-page="register"] label{font-size:13.5px;line-height:1.5}
body[data-page="register"] .text-input{height:49px;font-size:14px}
body[data-page="register"] .show-password{top:7px}
body[data-page="register"] .password-rules{margin-top:12px;padding:15px 16px;border-radius:12px;max-height:280px;transition:max-height .85s cubic-bezier(.22,1,.36,1),padding .85s cubic-bezier(.22,1,.36,1),margin .85s cubic-bezier(.22,1,.36,1),border-width .85s,opacity .6s}
body[data-page="register"] .password-rules-title{font-size:12.5px;margin-bottom:9px}
body[data-page="register"] .password-rules ul{display:block;margin:0;padding:0}
body[data-page="register"] .password-rules li,body[data-page="register"] .password-rules li.rule-pending{height:29px;max-height:29px;min-height:0;padding:3px 0;line-height:23px;font-size:12.5px;opacity:1;overflow:hidden;transition:height .85s cubic-bezier(.22,1,.36,1),max-height .85s cubic-bezier(.22,1,.36,1),padding .85s cubic-bezier(.22,1,.36,1),opacity .65s,transform .85s}
body[data-page="register"] .password-rules li.rule-met{height:0;max-height:0;min-height:0;padding:0;opacity:0;transform:translateY(-6px)}
body[data-page="register"] .password-rules.is-complete{max-height:0;margin:0;padding:0;border-width:0;opacity:0}
body[data-page="register"] .password-rules.is-complete .password-rules-title{margin:0}
body[data-page="register"] .password-match{font-size:12.5px;line-height:1.5;margin-top:8px}
body[data-page="register"] .checkbox-line{font-size:13px;line-height:1.6;margin:16px 0}
body[data-page="register"] .submit{height:49px}
body[data-page="register"] .signup{margin-top:22px;font-size:13px}
@media(max-width:600px){.page,body[data-page="register"] .page{grid-template-rows:60px minmax(0,1fr) 25px}.main,body[data-page="register"] .main{padding:20px 14px 30px}.auth,body[data-page="register"] .auth{padding:26px 23px;border-radius:16px}.header,body[data-page="register"] .header{padding:12px 18px}}
/* Toast stack */
.toast-stack{position:fixed;right:24px;top:80px;z-index:1500;display:grid;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:14px 14px 14px 15px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:13px;box-shadow:0 14px 40px rgba(0,0,0,.13);animation:toast-in .35s cubic-bezier(.2,.8,.2,1) both}
.toast[data-type="success"]{border-left-color:#22a06b}.toast[data-type="error"]{border-left-color:#ef4444}
.toast-symbol{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font-weight:800}
.toast[data-type="success"] .toast-symbol{color:#22a06b}.toast[data-type="error"] .toast-symbol{color:#ef4444}
.toast-copy{flex:1;min-width:0}.toast-title{font-weight:750;font-size:13px;margin:0 0 3px}.toast-description{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0}.toast-close{border:0;background:none;color:var(--muted);padding:1px 4px;font-size:19px;line-height:1;cursor:pointer}
.toast.is-closing{animation:toast-out .26s ease both}
@keyframes toast-in{from{opacity:0;transform:translateX(18px) translateY(-5px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(18px);max-height:0;padding-block:0;margin:0}}
/* Custom modal dialog */
.modal-backdrop{position:fixed;inset:0;z-index:1400;background:rgba(5,12,28,.6);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;animation:veil-in .2s ease both}
.modal-panel{width:min(100%,440px);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 100px rgba(0,0,0,.25);padding:26px;animation:modal-in .32s cubic-bezier(.2,.8,.2,1) both}
.modal-icon{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);display:grid;place-items:center;font-size:20px;margin-bottom:16px}
.modal-panel h2{font-size:21px;letter-spacing:-.025em;margin:0 0 9px}.modal-panel p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 24px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}.modal-actions button{padding:11px 16px;border-radius:10px;font-weight:650;font-size:13px;border:1px solid var(--border);background:var(--surface);color:var(--text)}.modal-actions .modal-primary{background:var(--primary);border-color:var(--primary);color:#fff}
@keyframes veil-in{from{opacity:0}to{opacity:1}}@keyframes modal-in{from{opacity:0;transform:translateY(13px) scale(.975)}to{opacity:1;transform:none}}
/* Improved page transitions */
.page{animation:page-enter .4s cubic-bezier(.2,.8,.2,1) both}.page.is-leaving{animation:page-leave .2s ease both}
@keyframes page-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes page-leave{to{opacity:0;transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.toast,.modal-backdrop,.modal-panel,.page,.page.is-leaving{animation:none!important}body[data-page="register"] .password-rules,body[data-page="register"] .password-rules li{transition:none!important}}

/* Direction-aware liquid page navigation: forward left->right, backward right->left.
   The cover accelerates; reveal decelerates, so there is no apparent mid-wave stop. */
.page,.page.is-leaving{animation:none!important}
.flow-transition{
 position:fixed;inset:-4px;z-index:9999;pointer-events:none;
 background:linear-gradient(105deg,#1e40af 0%,#2563eb 36%,#6285ff 72%,#a5c5ff 100%);
 transform:translate3d(-110%,0,0);border-radius:0 48% 48% 0 / 0 60% 60% 0;
 will-change:transform;backface-visibility:hidden;
}
.flow-transition::before{content:"";position:absolute;inset:0;
 background:radial-gradient(ellipse at 65% 35%,rgba(255,255,255,.16),transparent 55%);
 pointer-events:none}
/* At the navigation boundary, the wave is fully covering the page. */
html.flow-departing .flow-transition{animation:liquid-cover-forward 480ms cubic-bezier(.52,.02,.96,.68) both}
html.flow-arriving .flow-transition{animation:liquid-reveal-forward 560ms cubic-bezier(.12,.74,.24,1) both}
html[data-flow-direction="backward"].flow-departing .flow-transition{animation-name:liquid-cover-backward;border-radius:48% 0 0 48% / 60% 0 0 60%}
html[data-flow-direction="backward"].flow-arriving .flow-transition{animation-name:liquid-reveal-backward;border-radius:48% 0 0 48% / 60% 0 0 60%}
@keyframes liquid-cover-forward{from{transform:translate3d(-110%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes liquid-reveal-forward{from{transform:translate3d(0,0,0)}to{transform:translate3d(110%,0,0)}}
@keyframes liquid-cover-backward{from{transform:translate3d(110%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes liquid-reveal-backward{from{transform:translate3d(0,0,0)}to{transform:translate3d(-110%,0,0)}}
@media(prefers-reduced-motion:reduce){.flow-transition{display:none!important}}

/* v9: Curved agent glide instead of full-screen wave. The small orb carries
   a soft trailing highlight. No opaque wipe or stationary midpoint. */
.flow-transition{display:none!important}
.agent-glide{
 position:fixed;left:0;top:50vh;width:0;height:0;z-index:9999;
 pointer-events:none;opacity:0;isolation:isolate;
}
.agent-glide.is-active{opacity:1}
.agent-core{
 position:absolute;left:-19px;top:-19px;width:38px;height:38px;
 display:grid;place-items:center;border-radius:50%;font-size:19px;font-weight:700;
 color:white;background:linear-gradient(135deg,#68a5ff,#2458ec);
 box-shadow:0 0 0 6px rgba(80,130,255,.10),0 0 24px 9px rgba(72,126,255,.35);
}
.agent-trail{
 position:absolute;right:6px;top:-27px;width:180px;height:54px;
 border-radius:50%;background:linear-gradient(90deg,transparent,rgba(91,155,255,.04) 12%,rgba(91,155,255,.26) 85%,rgba(91,155,255,.55));
 filter:blur(11px);transform:rotate(-10deg);
}
/* Reverse the trail when travelling toward login. */
html.agent-departing:has(a[href="login.html"]) .agent-glide[data-direction="backward"] .agent-trail,
.agent-glide[data-direction="backward"] .agent-trail{
 right:auto;left:6px;transform:rotate(10deg) scaleX(-1);
}
/* The old page gently recedes; the new one gently settles. No blank screen. */
html.agent-departing .auth{transition:opacity .38s ease,transform .38s cubic-bezier(.2,.7,.2,1);opacity:.48;transform:translateY(5px)}
html.agent-arriving .auth{animation:agent-content-in .48s cubic-bezier(.2,.75,.2,1) both}
@keyframes agent-content-in{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.agent-glide{display:none!important}html.agent-arriving .auth{animation:none!important}html.agent-departing .auth{transition:none!important}}

/* Ported verbatim from frontend-prototype/auth.css so the React screens match
   the approved v0.1 design exactly. Loaded only on auth routes (see
   app/(pages)/(auth)/layout.tsx): it sets global html/body rules that must not
   reach the dashboard. Edit the prototype and re-copy rather than diverging. */

/* Port additions (not in the prototype).
   The prototype had no setup notice, so the card was the only child of .main.
   This stacks the notice above it without changing the card's own metrics. */
.auth-stack{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,510px);margin:auto}
.auth-stack>.message{width:100%;margin:0}
.auth-stack>.auth{margin:0;width:100%}
.auth-stack code{font-size:12px;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,var(--muted) 14%,transparent)}