/* ============================================================================
   auth.css — sign-in modal (js/auth.js). Fixed chrome outside #app, so real
   glass is allowed. Atlas dark theme, blue accent. UI-only (unwired).
============================================================================ */
#auth-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  padding:24px;pointer-events:none;opacity:0;transition:opacity .3s var(--ease)}
#auth-modal.show{opacity:1;pointer-events:auto}
.auth-scrim{position:absolute;inset:0;background:rgba(6,7,11,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.auth-card{position:relative;width:380px;max-width:100%;max-height:92vh;overflow:auto;
  padding:30px 30px 24px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,rgba(24,26,34,.9),rgba(11,12,17,.96));
  -webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(14px) scale(.96);transition:transform .42s var(--ease)}
#auth-modal.show .auth-card{transform:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .auth-card{background:linear-gradient(180deg,#181a22,#0b0c11)}}

.auth-x{position:absolute;top:12px;right:14px;width:30px;height:30px;border:0;background:none;
  color:rgba(255,255,255,.5);font-size:22px;line-height:1;cursor:pointer;border-radius:9px;
  transition:color .25s var(--ease),background .25s var(--ease),transform .34s var(--ease)}
.auth-x:hover{color:#fff;background:rgba(255,255,255,.08);transform:rotate(90deg)}

.auth-mark{width:56px;height:56px;margin:0 auto 14px;border-radius:15px;display:grid;place-items:center;
  background:rgba(91,124,250,.12);border:1px solid rgba(91,124,250,.28);overflow:hidden}
.auth-mark img{width:44px;height:44px;border-radius:11px}
.auth-h{font-size:22px;font-weight:500;letter-spacing:-.01em;color:#fff;margin-bottom:6px}
.auth-sub{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.55);margin:0 auto 20px;max-width:30ch}

.auth-form{display:flex;flex-direction:column;gap:11px;text-align:left}
.auth-field{display:flex;flex-direction:column;gap:5px}
.auth-field span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.auth-field input{height:42px;padding:0 13px;border-radius:11px;color:#fff;font-size:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.auth-field input::placeholder{color:rgba(255,255,255,.32)}
.auth-field input:focus{outline:none;border-color:var(--blue);background:rgba(26,47,251,.08)}
.auth-row{display:flex;align-items:center;justify-content:space-between;margin-top:1px}
.auth-check{display:flex;align-items:center;gap:7px;font-size:11.5px;color:rgba(255,255,255,.6);cursor:pointer}
.auth-check input{accent-color:var(--blue);width:14px;height:14px}
.auth-link{font-size:11.5px;color:#8f9aff;cursor:pointer}
.auth-link:hover{color:#b9c1ff;text-decoration:underline}
.auth-go{margin-top:6px;height:44px;border:0;border-radius:11px;cursor:pointer;color:#fff;font-size:14px;font-weight:500;
  background:linear-gradient(180deg,#2a3bff,var(--blue));box-shadow:0 8px 22px rgba(26,47,251,.35);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease)}
.auth-go:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(26,47,251,.5);filter:brightness(1.06)}
.auth-go:active{transform:translateY(0) scale(.99)}

.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:rgba(255,255,255,.35);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.auth-sso{display:flex;flex-direction:column;gap:9px}
.auth-sso-btn{display:flex;align-items:center;justify-content:center;gap:9px;height:42px;border-radius:11px;cursor:pointer;
  color:#eef0f8;font-size:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}
.auth-sso-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.auth-g{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;
  background:rgba(255,255,255,.1);font-weight:700;font-size:11px}

.auth-note{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(120,200,150,.75)}
.auth-note.warn{color:#ffb454;text-transform:none;letter-spacing:.01em;font-size:11px}
.auth-foot{margin-top:9px;font-size:11.5px;color:rgba(255,255,255,.5)}

@media (prefers-reduced-motion:reduce){
  #auth-modal,.auth-card,.auth-x,.auth-go,.auth-sso-btn{transition:none!important}
  .auth-card{transform:none!important}
}

/* ============================================================================
   PAGE additions (js/authpages.js) — the modal rules above stay for the
   unwired preview. These promote the same .auth-* language to full pages
   (login/signup/account/forgot/reset/verify) authored like contact.html, and
   add the signed-in dashboard + verify status block.

   PERF LAW: the page card SCROLLS inside #app, so it is a .glass-faux slab
   (css/glass.css) — NO backdrop-filter here (real glass is fixed chrome only).
   It deliberately does NOT reuse .auth-card / .lg-surface (both carry
   backdrop-filter); it reuses the standalone .auth-* interior classes instead.
============================================================================ */

/* full-height centering wrapper — one #app section per page */
.auth-page{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--pad) + 54px) var(--pad) calc(var(--pad) + 30px);position:relative;overflow:hidden}
.auth-page::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 50% -12%,rgba(26,47,251,.18),transparent 60%),
    radial-gradient(80% 60% at 50% 120%,rgba(136,50,247,.09),transparent 60%)}

/* the promoted card */
.auth-card-page{position:relative;z-index:1;width:420px;max-width:100%;margin:0 auto;
  padding:clamp(28px,3vw,40px) clamp(24px,3vw,38px) clamp(24px,3vw,32px);text-align:center;
  max-height:none;overflow:visible}
.auth-card-page.auth-wide{width:480px}
.auth-card-page.auth-dash{width:560px;text-align:left}
/* higher specificity than [data-glass] .glass-faux so the card owns its radius/shadow */
[data-glass] .auth-card-page.glass-faux{border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 80px rgba(0,0,0,.5),0 6px 20px rgba(2,6,14,.42)}
.auth-card-page .auth-mark{margin-top:2px}
.auth-card-page .auth-form{margin-top:2px}

/* inline field error (mirrors contact's ct2 treatment) */
.auth-field input[aria-invalid="true"]{border-color:rgba(255,76,65,.7);background:rgba(255,76,65,.07)}
.auth-field input[disabled]{opacity:.5;cursor:not-allowed}

/* note states: reuse .warn (orange); add .ok (green). Left-align inside the dash. */
.auth-note.ok{color:#8fe6a4;text-transform:none;letter-spacing:.01em;font-size:11.5px}
.auth-dash .auth-note{margin-top:14px;text-align:left}

/* SSO promoted from <button> to <a> (data-no-loader hard-nav) — keep the look */
a.auth-sso-btn{text-decoration:none}

/* submit busy state + spinner (reuses .auth-go) */
.auth-go[disabled]{opacity:.7;cursor:default;transform:none}
.auth-go .ap-spin,.ap-btn .ap-spin{display:none}
.auth-go.busy .ap-spin,.ap-btn.busy .ap-spin{display:inline-block;width:14px;height:14px;margin-left:2px;
  vertical-align:-2px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:ap-spin .7s linear infinite}
.ap-btn.busy{opacity:.72;cursor:default}
@keyframes ap-spin{to{transform:rotate(1turn)}}

/* injected content entrance — independent of site.js's .reveal IntersectionObserver */
.ap-in{animation:ap-rise .5s var(--ease) both}
@keyframes ap-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ap-left{text-align:left;margin:0 0 18px;max-width:none}

/* --------------------------------------------------------- signed-in dashboard */
.ap-dash-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.ap-ava{width:56px;height:56px;flex:0 0 auto;border-radius:16px;overflow:hidden;position:relative;
  display:grid;place-items:center;font-weight:600;font-size:20px;color:#fff;
  background:linear-gradient(150deg,#2a3bff,#5b32c7);border:1px solid rgba(255,255,255,.16)}
.ap-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ap-dash-id{min-width:0}
.ap-dash-name{font-size:20px;font-weight:500;color:#fff;letter-spacing:-.01em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-dash-email{font-size:13px;color:rgba(255,255,255,.6);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-badge{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:4px 10px;border-radius:100px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.ap-badge.ok{background:rgba(120,220,150,.14);color:#8fe6a4;border:1px solid rgba(120,220,150,.28)}
.ap-badge.no{background:rgba(255,180,84,.13);color:#ffc46b;border:1px solid rgba(255,180,84,.3)}
.ap-badge .d{width:6px;height:6px;border-radius:50%;background:currentColor}

.ap-rows{border-top:1px solid rgba(255,255,255,.1);margin-top:4px}
.ap-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.ap-row .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ap-row .v{font-size:14px;color:rgba(255,255,255,.9);text-align:right;word-break:break-word}

.ap-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.ap-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;border-radius:12px;
  font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;
  transition:transform .2s var(--ease),background .25s var(--ease),border-color .25s var(--ease),filter .2s var(--ease)}
.ap-btn-primary{color:#fff;background:linear-gradient(180deg,#2a3bff,var(--blue));box-shadow:0 8px 22px rgba(26,47,251,.32)}
.ap-btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.ap-btn-primary:active{transform:translateY(0) scale(.99)}
.ap-btn-ghost{color:#eef0f8;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.ap-btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}

/* loading skeleton (account) */
.ap-skel{display:flex;align-items:center;gap:16px;padding:4px 0 16px}
.ap-skel .b{border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.14),rgba(255,255,255,.06));
  background-size:200% 100%;animation:ap-sheen 1.3s linear infinite}
.ap-skel .b1{width:56px;height:56px;border-radius:16px;flex:0 0 auto}
.ap-skel .b2{height:16px;flex:1;max-width:190px}
@keyframes ap-sheen{to{background-position:-200% 0}}

/* -------------------------------------------------------- verify / status block */
.ap-status{text-align:center}
.ap-status .ap-ic{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center}
.ap-status .ap-ic svg{width:30px;height:30px}
.ap-status.is-ok .ap-ic{background:rgba(120,220,150,.14);color:#8fe6a4;border:1px solid rgba(120,220,150,.3)}
.ap-status.is-bad .ap-ic{background:rgba(255,120,110,.12);color:#ff8f86;border:1px solid rgba(255,120,110,.3)}
.ap-status.is-wait .ap-ic{background:rgba(91,124,250,.14);color:#9fb0ff;border:1px solid rgba(91,124,250,.3)}
.ap-status h2{font-size:22px;font-weight:500;color:#fff;margin-bottom:8px}
.ap-status p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.62);margin:0 auto 20px;max-width:34ch}
.ap-status .ap-actions{max-width:320px;margin:0 auto}
.ap-spin2{width:26px;height:26px;border:2.5px solid rgba(159,176,255,.3);border-top-color:#9fb0ff;border-radius:50%;
  animation:ap-spin .7s linear infinite}
.ap-spin2.ap-still{animation:none}

/* reset-success block sits inside the reset card */
#ap-reset-done{margin-top:6px}

@media (max-width:520px){
  .auth-card-page,.auth-card-page.auth-wide,.auth-card-page.auth-dash{width:100%}
}

/* perf tier 3 / reduced motion: no decorative animation */
@media (prefers-reduced-motion:reduce){
  .ap-in{animation:none}
  .ap-skel .b,.ap-spin2,.auth-go.busy .ap-spin,.ap-btn.busy .ap-spin{animation:none}
}
html[data-perf="3"] .ap-in,html[data-perf="3"] .ap-skel .b,html[data-perf="3"] .ap-spin2{animation:none!important}

/* ============================================================================
   AUTH REDESIGN (2026-07-12) — a premium, on-brand sign-in surface. The card
   still obeys the PERF LAW (glass-faux, no backdrop-filter); the richness comes
   from a layered, perf-gated AURORA backdrop behind it plus refined interior
   styling. Everything is scoped under .auth-page / .auth-card-page so the dead
   modal styles above are untouched, and it propagates to ALL six auth pages
   (login/signup/account/forgot/reset/verify) which share this skeleton.
============================================================================ */
.auth-page{background:radial-gradient(140% 120% at 50% 0%,#141a2e 0%,#0b0d16 46%,#070810 100%)}

/* drifting aurora field (behind the card) */
.auth-page::before{
  content:"";position:absolute;inset:-22% -12%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 44% at 22% 26%,rgba(42,59,255,.30),transparent 62%),
    radial-gradient(34% 40% at 82% 30%,rgba(136,50,247,.22),transparent 60%),
    radial-gradient(52% 52% at 60% 96%,rgba(26,47,251,.18),transparent 64%);
  filter:blur(10px);
  animation:auroraDrift 24s ease-in-out infinite alternate;
}
/* fine dot-grid + top glow + vignette (static), softly masked toward the edges */
.auth-page::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(120,150,255,.10),transparent 55%),
    radial-gradient(100% 100% at 50% 50%,transparent 58%,rgba(3,5,12,.55) 100%),
    radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px);
  background-size:auto,auto,22px 22px;
  -webkit-mask-image:radial-gradient(95% 85% at 50% 42%,#000 28%,transparent 82%);
  mask-image:radial-gradient(95% 85% at 50% 42%,#000 28%,transparent 82%);
}
@keyframes auroraDrift{
  0%{transform:translate3d(-3%,-2%,0) scale(1.04) rotate(0deg);opacity:.92}
  50%{opacity:1}
  100%{transform:translate3d(4%,3%,0) scale(1.13) rotate(6deg);opacity:.85}
}
/* perf: freeze + de-blur the aurora on weak tiers / reduced motion (it stays, just static) */
html[data-anim="off"] .auth-page::before{animation:none}
html[data-perf="2"] .auth-page::before,html[data-perf="3"] .auth-page::before{animation:none;filter:none}
@media (prefers-reduced-motion:reduce){.auth-page::before{animation:none}}

/* ---- card: deeper shadow, brighter rim, a top hairline accent ---- */
[data-glass] .auth-card-page.glass-faux{
  border-radius:24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 40px 100px rgba(0,0,0,.6),
    0 10px 30px rgba(6,10,28,.5);
}
.auth-card-page{padding-top:clamp(34px,3.4vw,46px)}
.auth-card-page::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(130,158,255,.6),transparent)}

/* ---- brand mark: larger, glowing ring ---- */
.auth-card-page .auth-mark{width:64px;height:64px;border-radius:18px;margin:0 auto 18px;
  background:radial-gradient(120% 120% at 50% 0%,rgba(91,124,250,.30),rgba(91,124,250,.08));
  border:1px solid rgba(130,158,255,.36);
  box-shadow:0 10px 30px rgba(26,47,251,.30),inset 0 1px 0 rgba(255,255,255,.22)}
.auth-card-page .auth-mark img{width:40px;height:40px}

/* ---- heading hierarchy ---- */
.auth-card-page .auth-h{font-size:clamp(23px,2.4vw,27px);letter-spacing:-.02em}
.auth-card-page .auth-sub{font-size:13px;color:rgba(255,255,255,.62);max-width:33ch;margin-bottom:22px}

/* ---- fields: taller, softer, blue focus glow ---- */
.auth-card-page .auth-field input{height:47px;border-radius:13px;font-size:14.5px;
  background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.auth-card-page .auth-field input:focus{border-color:rgba(90,124,250,.9);
  background:rgba(26,47,251,.10);box-shadow:0 0 0 3px rgba(42,59,255,.16)}
.auth-card-page .auth-field span{font-size:10px;color:rgba(255,255,255,.55)}

/* ---- submit: brighter gradient + one-shot sheen on hover ---- */
.auth-card-page .auth-go{height:47px;border-radius:13px;font-size:14.5px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#3550ff,#1a2ffb)}
.auth-card-page .auth-go::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s var(--ease)}
.auth-card-page .auth-go:hover::after{transform:translateX(120%)}

/* ---- SSO: proper brand-tinted glyphs ---- */
.auth-card-page .auth-sso-btn{height:46px;border-radius:13px;font-size:13.5px}
.auth-card-page .auth-sso-btn .auth-g{width:20px;height:20px;border-radius:6px;background:#fff;font-size:12px;font-weight:700}
.auth-card-page .auth-sso-btn[href*="google"] .auth-g{color:#4285F4}
.auth-card-page .auth-sso-btn[href*="github"] .auth-g{color:#fff;background:#24292f}

/* ---- footer / divider polish ---- */
.auth-card-page .auth-or{margin:18px 0}
.auth-card-page .auth-foot{margin-top:14px;font-size:12px}

/* keep the aurora blur off entirely where filters are globally killed */
html[data-perf="3"] .auth-page::before,html[data-perf="3"] .auth-page::after{filter:none!important}

/* ---- staged entrance (matches the site's .reveal cascade) -------------------
   Other pages stage several .reveal / .reveal-2 / .reveal-3 elements in sequence;
   the auth card used to reveal as ONE block, which read as "not like the rest of
   the site." Here the card fades up and its contents cascade in behind it — the
   same motion vocabulary, scaled down for card internals. Plays on every mount
   (hard load AND soft-nav, since #app is fresh DOM each time). */
.auth-card-page.reveal{opacity:1;transform:none;filter:none;animation:authCardIn .5s var(--ease) both}
@keyframes authCardIn{from{opacity:0;transform:translateY(18px) scale(.986)}to{opacity:1;transform:none}}
.auth-card-page > *{animation:authStageIn .6s var(--ease) both}
.auth-card-page > *:nth-child(1){animation-delay:.12s}
.auth-card-page > *:nth-child(2){animation-delay:.18s}
.auth-card-page > *:nth-child(3){animation-delay:.24s}
.auth-card-page > *:nth-child(4){animation-delay:.30s}
.auth-card-page > *:nth-child(5){animation-delay:.36s}
.auth-card-page > *:nth-child(6){animation-delay:.42s}
.auth-card-page > *:nth-child(7){animation-delay:.48s}
.auth-card-page > *:nth-child(n+8){animation-delay:.54s}
@keyframes authStageIn{from{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
/* injected account/verify content keeps its own .ap-in entrance — don't double it */
.auth-card-page.auth-dash > *,.auth-card-page > .ap-status{animation:authCardIn .5s var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .auth-card-page.reveal,.auth-card-page > *{animation:none!important}
}
html[data-perf="3"] .auth-card-page.reveal,html[data-perf="3"] .auth-card-page > *{animation:none!important}