/* ============================= QMP AUTH PAGES =============================
   Scoped under .qmp-auth so it never touches the dashboard's blue/teal design
   system (see templates/accounts/login.html etc. and partials/auth_visual.html).
   Mirrors the tokens in static/css/home.css so the pre-login experience reads
   as one brand. */

.qmp-auth{
  /* Mapped onto the brand tokens (qmp_project/brand.py); only the shadows are local. */
  --ink:var(--text-primary); --ink-soft:var(--text-secondary); --ink-mute:var(--text-muted);
  --paper:var(--bg); --surface:var(--bg-card); --surface-sunk:var(--bg-subtle);
  --line:var(--border); --line-strong:var(--border-strong);
  --signal:var(--primary); --signal-2:var(--primary-light); --signal-soft:var(--primary-100); --signal-ink:var(--primary-dark);
  --live:var(--secondary);
  --shadow-sm:0 1px 2px rgba(20,22,26,.06);
  --shadow-md:0 8px 24px -8px rgba(20,22,26,.16);
  --shadow-lg:0 24px 60px -20px rgba(20,22,26,.28);
  --font-display:var(--font); --font-body:var(--font); --font-mono:var(--font);

  background:var(--paper); color:var(--ink); color-scheme:light; font-family:var(--font-body);
  min-height:100vh;
}
.qmp-auth, .qmp-auth *{box-sizing:border-box}
.qmp-auth .mono{font-family:var(--font-mono)}
.qmp-auth img,.qmp-auth svg{display:block;max-width:100%}
.qmp-auth a{color:var(--signal);text-decoration:none}
.qmp-auth a:hover{text-decoration:underline}
.qmp-auth p{margin:0}
.qmp-auth :focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .qmp-auth *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- layout ---------- */
.qmp-auth .auth-page{min-height:100vh;display:flex}
.qmp-auth .auth-visual{
  flex:1 1 52%;position:relative;display:none;flex-direction:column;
  min-height:100vh;overflow:hidden;background:#F8FAFC;color:#0F172A;
}
@media(min-width:900px){.qmp-auth .auth-visual{display:flex}}
@keyframes qmpAuthPulse{0%,100%{opacity:1}50%{opacity:.4}}

.qmp-auth .board-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 26px;background:#fff;border-bottom:1px solid #E2E8F0;flex-wrap:wrap}
.qmp-auth .board-brand{display:flex;align-items:center;gap:10px}
.qmp-auth .board-brand .logo-icon{width:38px;height:38px;border-radius:10px;background:#2563EB;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.qmp-auth .board-brand-text{display:flex;flex-direction:column;line-height:1.25}
.qmp-auth .board-brand-text strong{font-family:var(--font-display);font-size:14.5px;color:#0F172A}
.qmp-auth .board-brand-text span{font-size:9px;letter-spacing:.06em;color:#94A3B8}

.qmp-auth .board-clock{display:flex;align-items:center;gap:8px;color:#2563EB}
.qmp-auth .board-clock i{font-size:17px}
.qmp-auth .board-clock div{display:flex;flex-direction:column;line-height:1.2}
.qmp-auth .board-clock strong{font-size:13.5px;color:#0F172A}
.qmp-auth .board-clock span{font-size:10px;color:#94A3B8}

.qmp-auth .board-biz{display:flex;align-items:center;gap:9px}
.qmp-auth .board-biz-avatar{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#A78BFA,#7C3AED);flex:none}
.qmp-auth .board-biz-text{display:flex;flex-direction:column;line-height:1.3}
.qmp-auth .board-biz-text strong{font-size:13px;color:#0F172A;display:flex;align-items:center;gap:5px}
.qmp-auth .board-biz-text strong i{color:#16A34A;font-size:11px}
.qmp-auth .board-biz-text span{font-size:10px;color:#94A3B8;max-width:240px}

.qmp-auth .board-actions{display:flex;align-items:center;gap:8px}
.qmp-auth .board-qr{display:flex;align-items:center;gap:7px;background:#F1F5F9;border-radius:10px;padding:6px 11px}
.qmp-auth .board-qr-icon{font-size:18px;color:#0F172A}
.qmp-auth .board-qr div{display:flex;flex-direction:column;line-height:1.2}
.qmp-auth .board-qr strong{font-size:11px;color:#0F172A}
.qmp-auth .board-qr span{font-size:9px;color:#94A3B8}
.qmp-auth .board-pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;padding:7px 12px;border-radius:100px;background:#F1F5F9;color:#334155}
.qmp-auth .board-pill-live{background:#DCFCE7;color:#15803D}
.qmp-auth .board-live-dot{width:6px;height:6px;border-radius:50%;background:#16A34A;animation:qmpAuthPulse 2.2s ease-in-out infinite}

.qmp-auth .board-body{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E2E8F0}
.qmp-auth .board-counter{background:#fff;padding:22px 22px 16px}
.qmp-auth .board-counter-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.qmp-auth .board-counter-head h4{font-family:var(--font-display);font-size:15.5px;font-weight:700;color:#0F172A}
.qmp-auth .board-status{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:#15803D;background:#DCFCE7;padding:4px 10px;border-radius:100px}
.qmp-auth .board-status-dot{width:5px;height:5px;border-radius:50%;background:#16A34A}
.qmp-auth .board-sub{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94A3B8;margin-bottom:8px}
.qmp-auth .board-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;margin-bottom:3px;transition:background .5s}
.qmp-auth .board-row-now{background:var(--signal-soft)}
.qmp-auth .board-row-now .board-token{color:var(--signal-ink)}
.qmp-auth .board-row-now .board-eta{color:var(--signal-ink);font-weight:600}
.qmp-auth .board-row.flash{animation:qmpBoardBlink 1s ease}
@keyframes qmpBoardBlink{
  0%,100%{background:var(--signal-soft)}
  15%,45%,75%{background:#fff}
  30%,60%,90%{background:var(--signal-soft)}
}
.qmp-auth .board-token{font-weight:700;font-size:13px;color:#0F172A}
.qmp-auth .board-pos{font-size:10px;color:#94A3B8}
.qmp-auth .board-eta{font-size:10px;color:#64748B;justify-self:end}
.qmp-auth .board-noshow{margin-top:8px;font-size:10.5px;color:#94A3B8}
.qmp-auth .board-noshow .mono{color:#94A3B8}

.qmp-auth .board-ticker{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:13px 26px;background:#0F172A;color:#fff}
.qmp-auth .board-ticker-brand{display:flex;align-items:center;gap:10px}
.qmp-auth .board-ticker-brand .logo-icon{width:30px;height:30px;border-radius:9px;background:#2563EB;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.qmp-auth .board-ticker-brand strong{display:block;font-family:var(--font-display);font-size:12.5px}
.qmp-auth .board-ticker-brand span{display:block;font-size:8.5px;letter-spacing:.06em;color:#94A3B8}
.qmp-auth .board-ticker-points{display:flex;gap:16px;flex-wrap:wrap}
.qmp-auth .board-ticker-points span{display:flex;align-items:center;gap:6px;font-size:11px;color:#CBD5E1}
.qmp-auth .board-ticker-points i{color:#4ADE80;font-size:11px}
.qmp-auth .board-ticker-industries{display:flex;align-items:center;gap:7px;font-size:11px;color:#94A3B8}

.qmp-auth .auth-form-pane{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--paper)}
.qmp-auth .auth-card{background:var(--surface);border-radius:24px;padding:40px;width:100%;max-width:460px;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.qmp-auth .auth-logo{text-align:center;margin-bottom:28px}
.qmp-auth .auth-logo-icon{width:52px;height:52px;background:var(--signal);border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;margin:0 auto 12px;box-shadow:0 8px 20px -6px color-mix(in srgb, var(--signal) 55%, transparent)}
.qmp-auth .auth-logo-name{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.qmp-auth .auth-logo-sub{font-size:12px;color:var(--ink-mute)}
.qmp-auth .auth-title{font-family:var(--font-display);font-size:21px;font-weight:800;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.qmp-auth .auth-subtitle{font-size:13.5px;color:var(--ink-soft);margin-bottom:24px;line-height:1.5}

@media(max-width:640px){.qmp-auth .auth-card{padding:28px 22px}}

/* ---------- form ---------- */
.qmp-auth .form-group{margin-bottom:18px}
.qmp-auth .form-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.qmp-auth .form-label.required::after{content:' *';color:var(--signal)}
.qmp-auth .form-control{display:block;width:100%;padding:11px 14px;font-size:14px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);transition:border-color .2s;font-family:var(--font-body)}
.qmp-auth .form-control:focus{outline:none;border-color:var(--signal)}
.qmp-auth .form-hint{font-size:11.5px;color:var(--ink-mute);margin-top:4px}
.qmp-auth .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.qmp-auth .form-row{grid-template-columns:1fr}}
.qmp-auth .password-field{position:relative}
.qmp-auth .password-field .form-control{padding-right:42px}
.qmp-auth .password-toggle{position:absolute;top:0;right:0;height:100%;width:42px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--ink-mute);cursor:pointer;font-size:15px}
.qmp-auth .password-toggle:hover{color:var(--ink-soft)}

/* ---------- buttons ---------- */
.qmp-auth .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:14.5px;padding:12px 22px;border-radius:100px;white-space:nowrap;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.qmp-auth .btn:active{transform:scale(.98)}
.qmp-auth .btn-primary{background:var(--signal);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -6px color-mix(in srgb, var(--signal) 55%, transparent)}
.qmp-auth .btn-primary:hover{background:var(--signal-2);transform:translateY(-1px)}
.qmp-auth .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.qmp-auth .btn-ghost:hover{border-color:var(--ink)}
.qmp-auth .btn-lg{padding:13px 24px;font-size:15px}
.qmp-auth .w-100{width:100%}
.qmp-auth .spin{animation:qmpAuthSpin 1s linear infinite;display:inline-block}
@keyframes qmpAuthSpin{to{transform:rotate(360deg)}}

/* ---------- alerts ---------- */
.qmp-auth .alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:14px}
.qmp-auth .alert-success{background:color-mix(in srgb, var(--live) 14%, transparent);color:var(--live);border:1px solid color-mix(in srgb, var(--live) 32%, transparent)}
.qmp-auth .alert-error{background:var(--signal-soft);color:var(--signal-ink);border:1px solid color-mix(in srgb, var(--signal) 35%, transparent)}
.qmp-auth .alert-info{background:var(--surface-sunk);color:var(--ink-soft);border:1px solid var(--line)}

/* ---------- oauth ---------- */
.qmp-auth .oauth-block{margin-bottom:18px}
.qmp-auth .oauth-divider{display:flex;align-items:center;gap:10px;margin:18px 0;font-size:11px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em}
.qmp-auth .oauth-divider::before,.qmp-auth .oauth-divider::after{content:'';flex:1;height:1px;background:var(--line)}