/* MugShotter — professional auth experience (login / signup / reset / request).
   Loaded ONLY by _auth.ejs, so the rest of the app is unaffected.
   Palette mirrors the signed-in "pro" theme: navy panels, blue + teal accent, Inter. */
.auth-body{
  --a-void:#0a0f1a; --a-panel:#111827; --a-surface:#1a2435; --a-surface-2:#21304a;
  --a-blue:#3b82f6; --a-blue-2:#60a5fa; --a-teal:#36c5b0; --a-cyan:#00e5ff;
  --a-fg:#f1f5fb; --a-muted:#9fb0c4; --a-dim:#6b7a8f;
  --a-border:rgba(255,255,255,.08); --a-border-2:rgba(255,255,255,.14);
  margin:0; min-height:100vh; color:var(--a-fg); background:#0a0f1a;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.auth-shell{ display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh; }

/* ---- Brand panel ---- */
.auth-brand{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(2rem,4vw,4rem); overflow:hidden; border-right:1px solid var(--a-border);
  background:
    radial-gradient(1200px 600px at 18% 8%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 520px at 92% 100%, rgba(0,229,255,.10), transparent 55%),
    linear-gradient(155deg,#0d1626 0%, #0a111e 55%, #070b14 100%);
}
.auth-brand::before{ /* faint tactical grid, fading out toward edges */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(85% 80% at 45% 28%,#000,transparent 92%);
          mask-image:radial-gradient(85% 80% at 45% 28%,#000,transparent 92%);
}
.auth-brand>*{ position:relative; z-index:1; }
.auth-logo{ display:inline-flex; align-items:center; gap:.85rem; text-decoration:none; }
.auth-logo img{ border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.5); }
.auth-wordmark{ font-weight:800; letter-spacing:.16em; font-size:1.15rem; color:#fff; }
.auth-tagline{
  font-size:clamp(2rem,3.4vw,3.15rem); line-height:1.04; font-weight:800;
  letter-spacing:-.02em; margin:0 0 1.1rem; color:#fff;
}
.auth-sub{ color:var(--a-muted); max-width:44ch; font-size:1.02rem; line-height:1.6; margin:0 0 1.9rem; }
.auth-points{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.auth-points li{ display:flex; align-items:center; gap:.75rem; color:#cdd9e7; font-size:.96rem; }
.auth-points .ck{ flex:0 0 auto; width:20px; height:20px; border-radius:6px; position:relative;
  background:linear-gradient(135deg,var(--a-blue),var(--a-cyan)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.auth-points .ck::after{ content:""; position:absolute; left:6px; top:3px; width:5px; height:9px;
  border:2px solid #06101f; border-top:0; border-left:0; transform:rotate(40deg); }
.auth-brand-foot{ color:var(--a-dim); font-size:.82rem; display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.auth-brand-foot a{ color:var(--a-muted); }
.auth-brand-foot .dot{ width:8px; height:8px; border-radius:50%; background:var(--a-teal);
  animation:auth-pulse 2.4s infinite; }
@keyframes auth-pulse{
  0%{box-shadow:0 0 0 0 rgba(54,197,176,.5)} 70%{box-shadow:0 0 0 7px rgba(54,197,176,0)}
  100%{box-shadow:0 0 0 0 rgba(54,197,176,0)}
}

/* ---- Form side ---- */
.auth-main{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(1.5rem,4vw,3rem); background:linear-gradient(180deg,#0c1320,#0a0f1a); }
.auth-card{ width:100%; max-width:420px;
  background:linear-gradient(180deg,var(--a-surface),var(--a-panel));
  border:1px solid var(--a-border-2); border-radius:16px;
  padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.04); }
.auth-head h1{ margin:0 0 .35rem; font-size:1.55rem; font-weight:700; color:#fff; letter-spacing:-.01em; }
.auth-head-sub{ margin:0 0 1.5rem; color:var(--a-muted); font-size:.95rem; }
.auth-flash{ border-radius:10px; padding:.7rem .9rem; font-size:.9rem; margin-bottom:1rem; border:1px solid transparent; }
.auth-flash.ok{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:#9be7b4; }
.auth-flash.err{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:#fca5a5; }
.auth-form{ display:grid; gap:1.05rem; }
.auth-field{ display:grid; gap:.4rem; }
.auth-field>span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--a-muted); font-weight:600; }
.auth-field input,.auth-field select{ width:100%; box-sizing:border-box; padding:.78rem .9rem; border-radius:10px;
  background:#0b1220; border:1px solid var(--a-border-2); color:var(--a-fg); font-size:.98rem;
  font-family:inherit; transition:border-color .15s, box-shadow .15s, background .15s; }
.auth-field input::placeholder{ color:#5b6b80; }
.auth-field input:focus,.auth-field select:focus{ outline:none; border-color:var(--a-blue);
  background:#0c1426; box-shadow:0 0 0 3px rgba(59,130,246,.25); }
.auth-btn{ margin-top:.4rem; width:100%; cursor:pointer; border:0; border-radius:11px; padding:.85rem 1rem;
  font-size:1rem; font-weight:700; letter-spacing:.01em; color:#06101f;
  background:linear-gradient(135deg,var(--a-blue-2),var(--a-blue));
  box-shadow:0 10px 24px -8px rgba(59,130,246,.55); transition:transform .08s, box-shadow .15s, filter .15s; }
.auth-btn:hover{ filter:brightness(1.07); box-shadow:0 14px 30px -8px rgba(59,130,246,.75); }
.auth-btn:active{ transform:translateY(1px); }
.auth-links{ display:flex; justify-content:flex-end; margin-top:.9rem; }
.auth-links a{ color:var(--a-blue-2); font-size:.9rem; text-decoration:none; }
.auth-links a:hover{ text-decoration:underline; }
.auth-alt{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--a-border);
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1rem; font-size:.9rem; color:var(--a-muted); }
.auth-alt a{ color:#dbe6f3; text-decoration:none; }
.auth-alt a strong{ color:var(--a-cyan); font-weight:700; }
.auth-alt a:hover{ text-decoration:underline; }
.auth-legal{ margin:1.4rem 0 0; color:var(--a-dim); font-size:.78rem; text-align:center; }
.auth-legal a{ color:var(--a-muted); text-decoration:none; }

/* ---- Responsive ---- */
@media (max-width:860px){
  .auth-shell{ grid-template-columns:1fr; }
  .auth-brand{ padding:1.6rem 1.4rem; border-right:0; border-bottom:1px solid var(--a-border); }
  .auth-sub,.auth-points,.auth-brand-foot{ display:none; }
  .auth-tagline{ font-size:1.8rem; margin-bottom:0; }
  .auth-brand-top{ margin-bottom:.5rem; }
}
@media (max-width:480px){ .auth-main{ padding:1.2rem; } .auth-card{ border-radius:14px; } }

/* ---- Generic in-card form styling: lets pages that keep their original
        markup (signup, request_access, reset, cpf_signup, legal_accept) look
        professional with only a layout swap. Scoped to .auth-card. ---- */
.auth-card:has(fieldset){ max-width:600px; }
.auth-card:has(article.legal){ max-width:740px; }
.auth-card article.legal{ max-width:none !important; }
.auth-card article.legal ul{ margin:.6rem 0 1rem; padding-left:1.2rem; display:grid; gap:.5rem; color:#cdd9e7; font-size:.92rem; line-height:1.5; }
.auth-card article.legal li b{ color:#fff; }
.auth-card h1{ margin:0 0 .45rem; font-size:1.5rem; font-weight:700; color:#fff; letter-spacing:-.01em; }
.auth-card > p:first-of-type, .auth-card p.muted{ color:var(--a-muted); font-size:.92rem; line-height:1.55; margin-top:0; }
.auth-card p a{ color:var(--a-blue-2); text-decoration:none; }
.auth-card p a:hover{ text-decoration:underline; }
.auth-card form.form{ display:grid; gap:1.1rem; margin-top:1.15rem; }
.auth-card fieldset{ border:1px solid var(--a-border); border-radius:12px; margin:0;
  padding:1.1rem 1.1rem 1.2rem; display:grid; gap:.95rem; background:rgba(255,255,255,.015); }
.auth-card legend{ padding:0 .55rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--a-blue-2); font-weight:700; }
.auth-card label{ display:grid; gap:.42rem; font-size:.9rem; color:#dfe8f2; }
.auth-card label .muted{ font-weight:400; color:var(--a-dim); }
.auth-card input:not([type=checkbox]):not([type=radio]),
.auth-card select, .auth-card textarea{
  width:100%; box-sizing:border-box; padding:.72rem .85rem; border-radius:10px; background:#0b1220;
  border:1px solid var(--a-border-2); color:var(--a-fg); font:inherit; font-size:.95rem;
  transition:border-color .15s, box-shadow .15s, background .15s; }
.auth-card input::placeholder{ color:#5b6b80; }
.auth-card input:focus, .auth-card select:focus, .auth-card textarea:focus{ outline:none;
  border-color:var(--a-blue); background:#0c1426; box-shadow:0 0 0 3px rgba(59,130,246,.25); }
.auth-card label.checkbox{ display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem;
  color:var(--a-muted); line-height:1.5; }
.auth-card input[type=checkbox]{ width:18px; height:18px; flex:0 0 auto; margin-top:.1rem; accent-color:var(--a-blue); }
.auth-card button[type=submit]{ width:100%; cursor:pointer; border:0; border-radius:11px; padding:.82rem 1rem;
  font-size:1rem; font-weight:700; color:#06101f; background:linear-gradient(135deg,var(--a-blue-2),var(--a-blue));
  box-shadow:0 10px 24px -8px rgba(59,130,246,.55); transition:filter .15s, box-shadow .15s, transform .08s; margin-top:.2rem; }
.auth-card button[type=submit]:hover{ filter:brightness(1.07); box-shadow:0 14px 30px -8px rgba(59,130,246,.75); }
.auth-card button[type=submit]:active{ transform:translateY(1px); }
.auth-card .ok, .auth-card .err{ border-radius:10px; padding:.7rem .9rem; font-size:.9rem; margin:.2rem 0 1rem;
  border:1px solid transparent; }
.auth-card .ok{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:#9be7b4; }
.auth-card .err{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:#fca5a5; }

/* ===== AUTH ELEVATION LAYER (appended 2026-06-26) =====
   Unifies the auth experience to the teal/cyan brand (was blue-led) and adds
   depth polish. Scoped to .auth-body — only affects login/signup/reset/request. */
.auth-body{ --a-blue:#3ad0c8; --a-blue-2:#28e0ff; --a-teal:#3ad0c8; --a-cyan:#28e0ff; }
.auth-field input:focus,.auth-field select:focus,
.auth-card input:focus,.auth-card select:focus,.auth-card textarea:focus{
  border-color:#3ad0c8!important; box-shadow:0 0 0 3px rgba(58,208,200,.26)!important; background:#0c1426!important; }
.auth-btn,.auth-card button[type=submit]{
  background:linear-gradient(135deg,#3ad0c8,#28e0ff)!important; color:#042321!important;
  box-shadow:0 12px 26px -10px rgba(40,224,255,.5)!important; }
.auth-btn:hover,.auth-card button[type=submit]:hover{
  box-shadow:0 16px 34px -10px rgba(40,224,255,.72)!important; filter:brightness(1.04); }
.auth-brand{ background:
  radial-gradient(1200px 600px at 18% 8%, rgba(58,208,200,.17), transparent 60%),
  radial-gradient(900px 520px at 92% 100%, rgba(40,224,255,.11), transparent 55%),
  linear-gradient(155deg,#0d1626 0%, #0a111e 55%, #070b14 100%)!important; }
.auth-points .ck{ background:linear-gradient(135deg,#3ad0c8,#28e0ff)!important; }
.auth-brand-foot .dot{ background:#3ad0c8!important; }
.auth-card{ border-radius:18px!important;
  box-shadow:0 28px 70px -26px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05)!important; }
.auth-tagline{ letter-spacing:-.025em; }
.auth-links a,.auth-card p a{ color:#5fe0d8!important; }
.auth-alt a strong{ color:#28e0ff!important; }


/* ===== SELF-HOSTED FONT — Inter Variable (appended 2026-06-26) ===== */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/InterVariable.woff2?v=1") format("woff2"); }