/* Shared tokens (--bg, --panel, --violet, --red, --font-display, etc.) now
   live in tokens.css, linked before this file — see that file's header
   comment. Every var() reference below uses the shared canonical names
   directly. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
.auth-body{font-family:'Inter','Inter Fallback',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex-shrink:0}

/* Explicit, unambiguous way back to the landing page — the brand wordmark
   in .auth-brand-panel already links to "/", but a logo isn't a recognizable
   "back" affordance on its own; this is a plain labelled link, always
   visible (fixed, top-left), including after sign-out redirects here. */
.auth-back-link{position:fixed;top:20px;left:20px;z-index:5;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:var(--radius-full);border:1px solid transparent;transition:border-color .15s ease,color .15s ease}
.auth-back-link:hover{color:var(--violet2);border-color:var(--line2)}
.auth-back-link svg{width:15px;height:15px}

.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--text) !important;text-decoration:none}
/* Same favicon.svg as the browser tab icon and the React dashboard
   sidebar (Sidebar.tsx) — one logo asset everywhere. */
.brand-mark-icon{width:28px;height:28px;border-radius:7px;flex:none}

/* ===== Split layout: a brand/value panel + the form, side by side — a
   plain centered card (the old design) reads as generic on its own; giving
   the sign-in moment a real second half makes it feel like part of the
   product, not a bolted-on utility screen. ===== */
.auth-shell{min-height:100vh;display:flex}

.auth-brand-panel{
  position:relative;overflow:hidden;flex:0 0 42%;max-width:560px;min-width:0;
  background:var(--bg2);border-right:1px solid var(--line);
  padding:48px 56px;display:flex;flex-direction:column;justify-content:center;
}
/* Faint grid texture layered with the radial glow on one pseudo-element,
   masked to fade toward the form — echoes the landing page hero's grid
   without needing any new markup in the 4 auth pages that share this panel. */
.auth-brand-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(closest-side at 20% 15%,rgba(79,70,229,.28),transparent 65%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:auto,56px 56px,56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 25% 25%, #000 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 85% 75% at 25% 25%, #000 0%, transparent 78%);
  opacity:.6;
}
.auth-brand-panel::after{
  content:"";position:absolute;bottom:-25%;right:-15%;width:70%;height:60%;
  background:radial-gradient(closest-side,var(--violet-soft),transparent 70%);
  filter:blur(14px);pointer-events:none;
}
.auth-brand-panel > *{position:relative;z-index:1}

.auth-pitch{margin-top:64px}
.auth-pitch h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.18;letter-spacing:-0.01em;margin:0 0 14px;max-width:22ch}
.auth-pitch h2 em{font-style:normal;background:linear-gradient(100deg,var(--violet-light),var(--violet2) 60%);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-pitch-list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.auth-pitch-list li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5;color:var(--muted)}
.auth-pitch-list .check{flex:none;width:22px;height:22px;border-radius:50%;background:var(--violet-soft);color:var(--violet2);display:flex;align-items:center;justify-content:center;margin-top:1px}
.auth-pitch-list .check svg{width:12px;height:12px}

.auth-content{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 32px}
.auth-form-wrap{width:100%;max-width:380px}
.auth-form-wrap h1{font-family:var(--font-display);font-size:28px;font-weight:700;margin:0 0 8px;letter-spacing:-0.01em}
.auth-sub{margin:0 0 28px;font-size:14.5px;color:var(--muted)}

@media (max-width:900px){
  .auth-shell{flex-direction:column}
  /* .auth-theme-btn/.auth-back-link stay position:fixed at every width
     (top:20px, z-index:5) — at this width the brand panel's logo sits right
     at the top of the panel with less clearance than at desktop width,
     where the panel is beside the form instead of above it. 72px keeps the
     fixed controls (~38-40px tall from their own top:20px) clear of the
     logo instead of overlapping it. */
  .auth-brand-panel{flex:none;max-width:none;min-height:auto;padding:72px 28px 32px;border-right:none;border-bottom:1px solid var(--line)}
  .auth-pitch{margin-top:22px;padding-top:0}
  .auth-pitch-list{display:none}
  .auth-content{padding:36px 24px 56px}
}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 18px;border-radius:var(--radius-full);font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s var(--ease),border-color .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--violet2) 0%,var(--violet-dark) 100%);color:#fff !important;box-shadow:0 8px 24px rgba(79,70,229,.35)}
.btn-primary:hover{box-shadow:0 10px 28px rgba(79,70,229,.45)}
.btn-primary:disabled{opacity:.65;cursor:not-allowed;transform:none}
.btn-ms{background:var(--panel2);color:var(--text) !important;border-color:var(--line2)}
.btn-ms:hover{border-color:var(--violet2)}
.btn-ms + .btn-ms{margin-top:10px}

.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0;font-size:12px;color:var(--muted)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line2)}

.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.auth-form input{font:inherit;font-size:14.5px;color:var(--text);background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.auth-form input:focus{border-color:var(--violet2);box-shadow:0 0 0 3px var(--violet-soft)}

/* Show/hide password toggle — the eye button sits inside the input's own
   box (absolute, right-aligned) rather than beside it, so the field keeps
   its full width and the label/input structure above needs no change. */
.auth-password-wrap{position:relative;display:flex}
.auth-password-wrap input{flex:1;padding-right:42px}
.auth-password-toggle{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;padding:0}
.auth-password-toggle:hover{color:var(--violet2)}
.auth-password-toggle svg{width:18px;height:18px}
.auth-submit{margin-top:4px}
/* Pulled up against the password field above it (negative margin cancels
   most of .auth-form's own 16px gap) rather than reading as a fully
   separate row — the conventional placement right under the password input. */
.auth-forgot-link{align-self:flex-end;margin-top:-10px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none}
/* Phones: a 44px-tall tap area for the small text link (it measured 15px). */
@media (max-width:600px){.auth-forgot-link{display:inline-flex;align-items:center;min-height:44px;margin-top:-14px}}
.auth-forgot-link:hover{color:var(--violet2);text-decoration:underline}

.auth-error{background:var(--red-soft);border:1px solid rgba(251,68,89,.3);color:var(--red);font-size:13.5px;padding:11px 14px;border-radius:10px;margin-bottom:18px}
.auth-notice{background:var(--violet-soft);border:1px solid var(--line2);color:var(--text);font-size:13.5px;padding:11px 14px;border-radius:10px;margin-bottom:18px}

.auth-switch{margin:26px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.auth-switch a{color:var(--violet2);font-weight:600;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}

/* Responsive polish (measured at 320-1920px): fields and the submit button are at least 44px tall
   at every width; on phones the back link and the show-password button get a 44px tap area. */
.auth-form input{min-height:44px}
.auth-submit{min-height:44px}
@media (max-width:600px){
  .auth-back-link{min-height:44px}
  .brand{min-height:44px}
  .auth-password-toggle{width:44px;height:44px;right:0}
  .auth-password-wrap input{padding-right:48px}
}