:root{
  --bg:oklch(.975 .004 220);--surface:oklch(1 0 0);--surface-2:oklch(.95 .006 220);
  --ink:oklch(.27 .035 220);--muted:oklch(.47 .02 220);--line:oklch(.88 .01 220);--line-strong:oklch(.80 .012 220);
  --accent:oklch(.40 .075 220);--accent-hover:oklch(.345 .07 220);--accent-ink:oklch(.99 0 0);--accent-soft:oklch(.93 .02 220);
  --copper:oklch(.60 .12 48);--success-ink:oklch(.335 .075 155);--success-bg:oklch(.94 .03 155);
  --danger-ink:oklch(.44 .15 25);--danger-bg:oklch(.955 .03 25);
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent);--ease:cubic-bezier(.2,.7,.3,1);
}

[data-theme="dark"]{
  --bg:oklch(.185 .015 220);--surface:oklch(.235 .018 220);--surface-2:oklch(.28 .02 220);
  --ink:oklch(.955 .004 215);--muted:oklch(.71 .015 220);--line:oklch(.34 .02 220);--line-strong:oklch(.43 .02 220);
  --accent:oklch(.72 .08 215);--accent-hover:oklch(.785 .07 215);--accent-ink:oklch(.20 .02 215);--accent-soft:oklch(.30 .04 215);
  --copper:oklch(.74 .11 50);--success-ink:oklch(.87 .06 155);--success-bg:oklch(.28 .04 155);
  --danger-ink:oklch(.88 .08 25);--danger-bg:oklch(.33 .06 25);
}

*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-text-size-adjust:100%}
body{min-height:100dvh;margin:0;line-height:1.5}
button,input{font:inherit;color:inherit}
a{color:var(--accent);font-weight:700;text-underline-offset:3px}
h1,h2,p{margin:0;text-wrap:pretty}
h1,h2{text-wrap:balance}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.skip-link{position:fixed;left:-999px;top:8px;z-index:10;padding:10px 14px;border-radius:8px;background:var(--accent);color:var(--accent-ink)}
.skip-link:focus{left:8px}

.auth-shell{display:grid;grid-template-columns:minmax(300px,38%) minmax(0,1fr);min-height:100dvh}
.auth-context{display:flex;flex-direction:column;padding:clamp(28px,5vw,64px);background:oklch(.31 .065 220);color:oklch(.96 .005 215)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--copper);color:oklch(.18 .02 48)}
.brand-mark svg{width:24px;height:24px}
.brand strong{display:block;font-size:1.15rem;letter-spacing:-.01em}
.brand small{display:block;margin-top:1px;color:oklch(.82 .018 215);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.context-copy{max-width:31rem;margin:auto 0}
.context-label{margin-bottom:12px;color:oklch(.78 .07 50);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.context-copy h2{max-width:15ch;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.08;letter-spacing:-.03em}
.context-copy>p:last-child{max-width:38rem;margin-top:20px;color:oklch(.84 .012 215);font-size:1.05rem}
.access-note{max-width:42ch;color:oklch(.76 .015 215);font-size:.82rem}

.auth-panel{align-self:center;width:min(100%,480px);padding:48px clamp(24px,7vw,72px);justify-self:center}
.mobile-brand{display:none;align-items:center;gap:10px;margin-bottom:40px}
.mobile-brand .brand-mark{width:40px;height:40px}
.auth-heading{margin-bottom:28px}
.auth-heading h1{font-size:1.85rem;line-height:1.2;letter-spacing:-.025em}
.auth-heading p{margin-top:8px;color:var(--muted);max-width:42ch}
#auth-form{display:grid;gap:20px}
.field{display:grid;gap:7px}
.field[hidden],[hidden]{display:none!important}
label{font-size:.9rem;font-weight:750}
input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color 150ms var(--ease),box-shadow 150ms var(--ease)}
input:hover{border-color:var(--line-strong)}
input:focus-visible{border-color:var(--accent)}
.field-hint{color:var(--muted);font-size:.82rem}
.primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border:1px solid var(--accent);border-radius:12px;background:var(--accent);color:var(--accent-ink);font-weight:800;text-decoration:none;cursor:pointer;transition:background 150ms var(--ease),border-color 150ms var(--ease)}
.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.primary:active{transform:translateY(1px)}
.primary:disabled{border-color:var(--line);background:var(--surface-2);color:var(--muted);cursor:not-allowed;transform:none}
.auth-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;font-size:.9rem}
.auth-status{margin-bottom:20px;padding:12px 14px;border-radius:12px;font-size:.9rem}
.auth-status.error{background:var(--danger-bg);color:var(--danger-ink);font-weight:700}
.auth-status.success{background:var(--success-bg);color:var(--success-ink)}
.success-actions{margin-top:20px}
.success-actions .primary{width:100%}

@media(max-width:760px){
  .auth-shell{display:block}
  .auth-context{display:none}
  .auth-panel{min-height:100dvh;padding:max(32px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  .mobile-brand{display:flex}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}