/* ═══════════════════════════════════════════════════════════════════
   Docurensic auth pages (login / signup / reset-password)
   Brand guide V1.0 · Violet — matches the marketing site (app/static/site/*).
   Self-contained: these pages load THIS file + fonts, not style.css/tokens.css.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#07070F; --bg-2:#0A0B14; --panel:#12102A; --panel-2:#171436; --panel-3:#1C1640;
  --ink:#F5F4FB; --ink-2:#B7B0D6; --ink-3:#9E96C2; --ink-4:#837BA8;
  --line:#241E48; --line-2:#191536; --line-hi:#342C60;
  --uv:#7C6FF0; --uv-2:#A99BF7; --uv-soft:#1C1640; --uv-glow:rgba(124,111,240,.32);
  --uv-btn:#6E60E8; --uv-btn-h:#5D4FD6;
  --red:#F0656B; --red-soft:#2A1526;
  --teal:#34C79B; --teal-soft:#0E2A26;
  --sans:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp:'Oswald','Arial Narrow',system-ui,sans-serif;
  --grid:rgba(139,128,196,.05);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink);
  background:var(--bg-2);-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(720px 420px at 50% -80px,var(--uv-glow),transparent 62%),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:auto,56px 56px,56px 56px;
  display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.auth-gated{visibility:hidden}

/* ── top nav ── */
.anav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 26px;border-bottom:1px solid var(--line-2);
  background:rgba(8,12,18,.6);backdrop-filter:saturate(160%) blur(12px)}
.alogo{display:flex;align-items:center;gap:11px}
.amark{width:32px;height:32px;flex:none;border-radius:9px;display:block;box-shadow:0 4px 16px var(--uv-glow)}
.aword{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:19px;color:var(--ink);line-height:1}
.adot{color:var(--uv)}
.anav-right{display:flex;align-items:center;gap:12px}
.anav-hint{font-size:13.5px;color:var(--ink-3)}
.abtn-ghost{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;
  padding:9px 15px;border-radius:10px;border:1px solid var(--line-hi);
  background:rgba(255,255,255,.02);color:var(--ink);transition:.16s;white-space:nowrap}
.abtn-ghost:hover{border-color:var(--uv);background:var(--uv-soft)}
@media (max-width:480px){
  .anav-hint{display:none}
  .anav{padding:12px 16px}
  .amark{width:28px;height:28px}
  .aword{font-size:17px}
  .abtn-ghost{padding:8px 11px;font-size:12.5px}
}

/* ── stage ── */
.astage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:44px 20px 56px}

/* decode lockup above the card (see auth-decode.js) */
.adecode{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px}
.icon-wrap{position:relative;width:64px;height:64px;border-radius:16px;background:var(--panel);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 0 0 1px rgba(155,140,255,.08),0 12px 30px -12px rgba(80,60,200,.55)}
.icon-svg{position:relative;z-index:2;width:40px;height:40px}
.bracket{fill:none;stroke:var(--uv);stroke-width:5;stroke-linecap:round}
.doc-line{fill:var(--line-hi)} .doc-line.accent{fill:var(--uv)}
.scan-line{position:absolute;left:6px;right:6px;height:2px;
  background:linear-gradient(90deg,transparent,var(--uv-2),transparent);
  filter:drop-shadow(0 0 6px var(--uv));z-index:3;
  animation:scan 2.6s linear .6s 3}
@keyframes scan{0%{top:6px;opacity:0}8%{opacity:1}50%{top:58px;opacity:1}58%{opacity:0}100%{top:58px;opacity:0}}
.wordmark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:57px}
.flap-row{display:flex;justify-content:center}
.cell{margin:0 1.5px;width:20px;height:26px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  position:relative;transition:border-color .2s,box-shadow .2s}
.cell.empty{background:var(--panel);border-color:rgba(54,49,84,.5)}
.cell.lock{border-color:var(--uv);box-shadow:0 0 10px -1px rgba(155,140,255,.6)}
.flap-inner{font-family:var(--mono);font-weight:700;color:var(--ink);line-height:1;font-size:13.5px}
.flap-row.forensic .flap-inner{color:var(--uv-2)}
@media (prefers-reduced-motion:reduce){.scan-line{animation:none;opacity:1;top:50%}}

/* ── card ── */
.acard{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line-hi);
  border-radius:18px;padding:30px 30px 26px;
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.45)}
.aeyebrow{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--uv-2);display:inline-flex;align-items:center;gap:9px;margin-bottom:10px}
.aeyebrow::before{content:"";width:16px;height:1px;background:var(--uv);opacity:.7}
.atitle{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.01em;
  font-size:30px;line-height:1.05;margin-bottom:8px}
.asub{font-size:14px;color:var(--ink-2);line-height:1.55;margin-bottom:20px}

.aerror,.asuccess{display:none;font-size:13.5px;line-height:1.5;border-radius:10px;
  padding:10px 13px;margin-bottom:14px}
.aerror{background:var(--red-soft);color:var(--red);border:1px solid rgba(240,101,107,.32)}
.asuccess{background:var(--teal-soft);color:var(--teal);border:1px solid rgba(52,199,155,.32)}
.aerror.show,.asuccess.show{display:block}

.aform{display:flex;flex-direction:column;gap:15px}
.agroup{display:flex;flex-direction:column;gap:6px}
.alabel{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.alabel-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.aforgot{font-size:12.5px;color:var(--uv-2)}
.aforgot:hover{text-decoration:underline}
.ainput{font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--line-hi);border-radius:10px;
  padding:11px 13px;width:100%;transition:border-color .16s,box-shadow .16s;outline:none}
.ainput::placeholder{color:var(--ink-4)}
.ainput:focus{border-color:var(--uv);box-shadow:0 0 0 3px rgba(124,111,240,.22)}
.ahint{font-size:12px;color:var(--ink-4);line-height:1.45}

.abtn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:15px;color:#fff;cursor:pointer;
  background:var(--uv-btn);border:1px solid transparent;border-radius:11px;
  padding:12px 18px;width:100%;transition:.16s;box-shadow:0 4px 20px var(--uv-glow);margin-top:2px}
.abtn-primary:hover{background:var(--uv-btn-h);transform:translateY(-1px);box-shadow:0 8px 28px var(--uv-glow)}
.abtn-primary:disabled{opacity:.65;cursor:default;transform:none}
.abtn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;
  background:rgba(255,255,255,.02);border:1px solid var(--line-hi);border-radius:11px;
  padding:11px 18px;width:100%;transition:.16s}
.abtn-secondary:hover{border-color:var(--uv);background:var(--uv-soft)}
.abtn-secondary:disabled{opacity:.65;cursor:default}

.aalt{font-size:13.5px;color:var(--ink-3);text-align:center;margin-top:18px}
.aalt a{color:var(--uv-2);font-weight:600}
.aalt a:hover{text-decoration:underline}
.aterms{font-size:12px;color:var(--ink-4);line-height:1.5;text-align:center;margin-top:14px}
.aterms a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}

.atrust{display:flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--mono);
  font-size:11px;letter-spacing:.04em;color:var(--ink-4);text-align:center;flex-wrap:wrap;justify-content:center}
.atrust svg{color:var(--teal);flex:none}

/* ── password field with show/hide toggle (masked by default) ── */
.apass{position:relative}
.apass .ainput{padding-right:46px}
.apass-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:none;border-radius:8px;background:transparent;color:var(--ink-4);cursor:pointer;
  transition:color .14s,background .14s}
.apass-toggle:hover{color:var(--ink-2);background:rgba(255,255,255,.05)}
.apass-toggle:focus-visible{outline:2px solid var(--uv);outline-offset:1px}
.apass-toggle .i-eye-off{display:none}
.apass-toggle[aria-pressed="true"] .i-eye{display:none}
.apass-toggle[aria-pressed="true"] .i-eye-off{display:block}

/* ── live password strength meter ── */
.astrength{display:flex;align-items:center;gap:10px;margin-top:2px}
.astrength-bars{display:flex;gap:4px;flex:1}
.astrength-bars i{height:3px;flex:1;border-radius:2px;background:var(--line-hi);transition:background .25s}
.astrength[data-level="1"] .astrength-bars i:nth-child(-n+1){background:var(--red)}
.astrength[data-level="2"] .astrength-bars i:nth-child(-n+2){background:#E4B647}
.astrength[data-level="3"] .astrength-bars i:nth-child(-n+3){background:var(--teal)}
.astrength-label{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);min-width:56px;text-align:right}
.astrength[data-level="1"] .astrength-label{color:var(--red)}
.astrength[data-level="2"] .astrength-label{color:#E4B647}
.astrength[data-level="3"] .astrength-label{color:var(--teal)}

/* ── two-step signup: progress + panels ── */
.asteps{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.asteps-label{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--uv-2);white-space:nowrap}
.asteps .abar{flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.asteps .abar i{display:block;height:100%;border-radius:2px;width:100%;
  background:linear-gradient(90deg,var(--uv),var(--uv-2));
  transform:scaleX(.5);transform-origin:left;transition:transform .4s cubic-bezier(.2,.6,.2,1)}
.asteps[data-step="2"] .abar i{transform:scaleX(1)}
.astep{display:none}
.astep.active{display:flex;flex-direction:column;gap:15px;animation:stepin .32s cubic-bezier(.2,.6,.2,1)}
@keyframes stepin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.astep.active{animation:none}}
.aback{display:inline-flex;align-items:center;gap:6px;align-self:center;margin-top:2px;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-3);
  background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:8px;transition:.14s}
.aback:hover{color:var(--ink)}

/* two-up field grid (first/last name) */
.agrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.agrid2{grid-template-columns:1fr}}
.aopt{font-weight:500;letter-spacing:.06em;color:var(--ink-4);text-transform:none}

/* ── consent checkboxes ── */
.achecks{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.acheck{position:relative;display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.acheck input{position:absolute;opacity:0;pointer-events:none}
.acheck .abox{flex:none;width:18px;height:18px;border-radius:5px;border:1px solid var(--line-hi);
  background:var(--bg-2);margin-top:2px;display:flex;align-items:center;justify-content:center;transition:.15s}
.acheck .abox svg{opacity:0;transform:scale(.5);transition:.15s}
.acheck:hover .abox{border-color:var(--uv)}
.acheck input:checked + .abox{background:var(--uv-btn);border-color:var(--uv-btn)}
.acheck input:checked + .abox svg{opacity:1;transform:none}
.acheck input:focus-visible + .abox{outline:2px solid var(--uv);outline-offset:2px}
.acheck .atext{font-size:13px;color:var(--ink-2);line-height:1.5}
.acheck .atext a{color:var(--uv-2);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.acheck .atext a:hover{color:var(--ink)}

@media (max-width:480px){
  .astage{padding:30px 14px 40px}
  .acard{padding:24px 20px 22px;border-radius:15px}
  .atitle{font-size:26px}
}