/* ================================================================
   AUTH PAGES — layout layer for pre-login screens
   ----------------------------------------------------------------
   Sign in / sign up / forgot / reset / auth-complete. These pages
   render BEFORE the app shell (no <app-layout>, no sidebar), so this
   file owns the split-screen shell + a slightly larger form scale
   than bolt.css's dense in-app chrome.

   RULE: colors / radii / shadows / fonts come ONLY from the design-token
   semantic vars (--color-*, --radius-*, --shadow-*, --font-*). No hex
   literals — so every brand preset (data-brand) and dark theme
   (data-theme) that the server injects on <html> just works.

   Consumes: design-tokens.css (tokens) + bolt.css (.btn, .btn-primary).
   ================================================================ */

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font-sans);background:var(--color-bg-page);color:var(--color-text);-webkit-font-smoothing:antialiased}

/* ---- split-screen shell ---- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr}
@media(min-width:960px){ .auth{grid-template-columns:1.05fr .95fr} }

/* left: brand / value panel (accent gradient from brand tokens) */
.auth-aside{position:relative;display:none;flex-direction:column;justify-content:space-between;
  padding:56px 56px 48px;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--color-primary),var(--color-primary-strong))}
@media(min-width:960px){ .auth-aside{display:flex} }
.auth-aside::after{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);background-size:22px 22px}
.aside-brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px;letter-spacing:-.01em}
.aside-brand .logo{width:38px;height:38px;border-radius:var(--radius-lg);background:rgba(255,255,255,.16);
  display:grid;place-items:center;backdrop-filter:blur(4px)}
.aside-brand .logo svg{width:22px;height:22px}
.aside-mid{position:relative;z-index:1;max-width:440px}
.aside-mid h1{font-size:38px;line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
.aside-mid p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.86);margin:0 0 30px}
.aside-feats{display:flex;flex-direction:column;gap:14px}
.aside-feat{display:flex;align-items:center;gap:12px;font-size:14.5px;color:rgba(255,255,255,.94)}
.aside-feat .tick{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.aside-feat .tick svg{width:13px;height:13px}
.aside-foot{position:relative;z-index:1;display:flex;gap:40px}
.aside-stat .n{font-size:26px;font-weight:800;line-height:1} .aside-stat .l{font-size:12.5px;color:rgba(255,255,255,.78);margin-top:4px}

/* right: form column */
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-card{width:100%;max-width:404px}
.auth-logo-sm{display:none;align-items:center;gap:10px;justify-content:center;margin-bottom:22px;font-weight:800;font-size:16px;color:var(--color-text)}
.auth-logo-sm .logo{width:34px;height:34px;border-radius:var(--radius-lg);background:var(--color-primary);display:grid;place-items:center;color:#fff}
.auth-logo-sm .logo svg{width:20px;height:20px}
@media(max-width:959px){ .auth-logo-sm{display:flex} }

.auth-head{margin-bottom:26px}
.auth-head h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.auth-head p{font-size:14px;color:var(--color-text-muted);margin:0}

.auth-form{display:flex;flex-direction:column;gap:16px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld > label{font-size:13px;font-weight:600;color:var(--color-text)}
/* larger input than bolt's dense .inp, still token-driven */
.auth .inp,.auth input:not([type=checkbox]){width:100%;font:inherit;font-size:14.5px;padding:12px 14px;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-bg-surface);
  color:var(--color-text);transition:border-color .15s,box-shadow .15s}
.auth .inp::placeholder{color:var(--color-text-subtle)}
.auth .inp:focus,.auth input:focus{outline:0;border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 22%,transparent)}
.auth .inp:disabled{opacity:.6;cursor:not-allowed}
.fld-ico{position:relative}
.fld-ico .inp{padding-right:44px}
.fld-ico .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--color-text-subtle);cursor:pointer;padding:8px;border-radius:var(--radius-md);display:grid;place-items:center}
.fld-ico .eye:hover{color:var(--color-text);background:var(--color-bg-hover)}
.fld-ico .eye svg{width:18px;height:18px}

.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--color-text-muted);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer}
.link{color:var(--color-primary);font-weight:600;font-size:13px;text-decoration:none;background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
.link:hover{color:var(--color-primary-strong);text-decoration:underline}

/* full-width primary — reuse bolt .btn-primary but size up for auth */
.auth .btn.btn-block{width:100%;justify-content:center;font-size:15px;padding:13px 18px;border-radius:var(--radius-lg)}

.auth-alt{margin-top:22px;text-align:center;font-size:13.5px;color:var(--color-text-muted)}

.divider{display:flex;align-items:center;gap:12px;color:var(--color-text-subtle);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;margin:4px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--color-border)}
.btn-oauth{width:100%;justify-content:center;gap:10px}
.btn-oauth svg,.btn-oauth img{width:18px;height:18px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:420px){ .grid-2{grid-template-columns:1fr} }

/* inline alert (error / info / success) — status tokens */
.alert{display:flex;gap:10px;align-items:flex-start;font-size:13px;padding:11px 13px;border-radius:var(--radius-lg);border:1px solid}
.alert svg{flex:none;width:16px;height:16px;margin-top:1px}
.alert-danger{background:var(--color-danger-bg);border-color:color-mix(in srgb,var(--color-danger) 35%,transparent);color:var(--color-danger)}
.alert-info{background:var(--color-info-bg);border-color:color-mix(in srgb,var(--color-info) 35%,transparent);color:var(--color-info)}
.alert-success{background:var(--color-success-bg);border-color:color-mix(in srgb,var(--color-success) 35%,transparent);color:var(--color-success)}
.alert-note{display:block;margin-top:4px;font-size:12px;color:var(--color-text-muted)}

/* password strength meter */
.pw-meter{display:flex;gap:5px;margin-top:2px}
.pw-meter i{height:4px;flex:1;border-radius:var(--radius-pill);background:var(--color-border)}
.pw-meter[data-lvl="1"] i:nth-child(-n+1){background:var(--color-danger)}
.pw-meter[data-lvl="2"] i:nth-child(-n+2){background:var(--color-warning)}
.pw-meter[data-lvl="3"] i:nth-child(-n+3){background:var(--color-warning)}
.pw-meter[data-lvl="4"] i{background:var(--color-success)}
.pw-hint{font-size:12px;color:var(--color-text-subtle)}

/* success / auth-complete + error states */
.state-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.state-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px}
.state-icon svg{width:36px;height:36px}
.state-icon.ok{background:var(--color-success-bg);color:var(--color-success)}
.state-icon.mail{background:var(--color-primary-soft);color:var(--color-primary)}
.state-icon.err{background:var(--color-danger-bg);color:var(--color-danger)}
.state-center h2{font-size:24px;font-weight:800;margin:0}
.state-center p{font-size:14.5px;color:var(--color-text-muted);margin:0;max-width:340px;line-height:1.55}
.spin{animation:auth-spin 1s linear infinite}
@keyframes auth-spin{to{transform:rotate(360deg)}}

/* full-page centered loader (e.g. reset token validation) */
.auth-loading{min-height:100vh;display:grid;place-items:center;color:var(--color-text-muted)}

[hidden]{display:none!important}
[v-cloak]{display:none}