/* ============================================================
   DealersThink — SaaS login styles (from the v5 design handoff).
   Framework-free. Token-driven (light/dark x green/duo/pink).
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}

/* ---------- TOKENS: LIGHT (base / accent=green) ---------- */
:root{
  --bg:#f4f6f3; --surface:#ffffff; --surface-2:#f7faf8; --bg-alt:#fbfdfb;
  --border:#e7eae5; --border-soft:#eef1ee; --ink:#0b0f0c; --ink-soft:#525c55; --ink-faint:#8a948c;
  --neon:#39ff14; --neon-ink:#1f7a36; --on-neon:#08220c; --neon-rgb:57,255,20;
  --pop:#39ff14; --pop-rgb:57,255,20; --pop-ink:#1f7a36;
  --danger:#d6453d;
  --shadow:0 1px 2px rgba(11,15,12,.05), 0 18px 40px -22px rgba(11,15,12,.28);
  --show-bg:#05100a; --show-ink:#eafff0; --show-soft:#9fc8a8; --show-faint:#5f7a66;
  --show-border:rgba(255,255,255,.10); --show-surface:rgba(255,255,255,.04);
}

/* ---------- TOKENS: DARK (accent=green) ---------- */
:root[data-theme="dark"]{
  --bg:#04100a; --surface:#0a1a12; --surface-2:#08160f; --bg-alt:#071711;
  --border:rgba(255,255,255,.10); --border-soft:rgba(255,255,255,.06); --ink:#ffffff; --ink-soft:#a9cdb1; --ink-faint:#7e9d86;
  --neon:#39ff14; --neon-ink:#7fe08f; --on-neon:#06210a; --neon-rgb:57,255,20;
  --pop:#39ff14; --pop-rgb:57,255,20; --pop-ink:#7fe08f;
  --danger:#ff6a60;
  --shadow:0 0 0 1px rgba(255,255,255,.02), 0 22px 46px -24px rgba(0,0,0,.75);
  --show-bg:#02100a; --show-ink:#eafff0; --show-soft:#9fc8a8; --show-faint:#5f7a66;
  --show-border:rgba(255,255,255,.09); --show-surface:rgba(255,255,255,.04);
}

/* ---------- ACCENT = DUO (default: pink "pop") ---------- */
:root[data-accent="duo"]{ --pop:#ff2e9a; --pop-rgb:255,46,154; --pop-ink:#b8005f; }
:root[data-theme="dark"][data-accent="duo"]{ --pop:#ff2e9a; --pop-rgb:255,46,154; --pop-ink:#ff9ecb; }

/* ---------- ACCENT = PINK (neon hue itself becomes pink) ---------- */
:root[data-theme="light"][data-accent="pink"], :root:not([data-theme="dark"])[data-accent="pink"]{
  --neon:#ff2e9a; --neon-rgb:255,46,154; --neon-ink:#c4006a; --on-neon:#2b0014; --pop:#ff2e9a; --pop-rgb:255,46,154; --pop-ink:#c4006a;
}
:root[data-theme="dark"][data-accent="pink"]{
  --neon:#ff2e9a; --neon-rgb:255,46,154; --neon-ink:#ff9ecb; --on-neon:#2b0014; --pop:#ff2e9a; --pop-rgb:255,46,154; --pop-ink:#ff9ecb;
}

/* default-OS dark when no explicit data-theme set */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#04100a; --surface:#0a1a12; --surface-2:#08160f; --bg-alt:#071711;
    --border:rgba(255,255,255,.10); --border-soft:rgba(255,255,255,.06); --ink:#ffffff; --ink-soft:#a9cdb1; --ink-faint:#7e9d86;
    --neon-ink:#7fe08f; --on-neon:#06210a; --danger:#ff6a60;
    --shadow:0 0 0 1px rgba(255,255,255,.02), 0 22px 46px -24px rgba(0,0,0,.75);
    --show-bg:#02100a;
  }
}

/* ---------- BASE ---------- */
body{ background:var(--bg); color:var(--ink); font-family:'Sora',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.mono{font-family:'Space Mono',monospace;}
.script{font-family:'Allura',cursive;}

/* ---------- LAYOUT ---------- */
.auth{display:flex;min-height:100vh;width:100%;}
.showcase{flex:1.05;min-width:0;position:relative;overflow:hidden;background:var(--show-bg);color:var(--show-ink);
  display:flex;flex-direction:column;justify-content:space-between;padding:46px 52px;}
.formside{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);}

/* ---------- LOGO LOCKUP ---------- */
.logo{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:.78;text-decoration:none;}
.logo .d{font-family:'Allura',cursive;font-size:34px;line-height:.7;color:#fff;margin-left:-3px;}
.logo .t-row{display:inline-flex;align-items:flex-end;gap:3px;}
.logo .t{font-weight:700;font-size:19px;letter-spacing:5px;text-transform:uppercase;color:#fff;}
.logo .dot{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 14px var(--neon);margin-bottom:1px;}

/* ---------- SHOWCASE DECOR ---------- */
.showcase .glow-blob{position:absolute;border-radius:50%;pointer-events:none;}
.blob-a{top:-140px;right:-90px;width:520px;height:520px;background:radial-gradient(circle,rgba(var(--neon-rgb),.28),transparent 62%);animation:dt-blob 14s ease-in-out infinite;}
.blob-b{bottom:-170px;left:-110px;width:440px;height:440px;background:radial-gradient(circle,rgba(var(--pop-rgb),.20),transparent 64%);animation:dt-blob 18s ease-in-out infinite reverse;}
.showcase .grid-overlay{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(var(--neon-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--neon-rgb),.05) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 60% 40%,#000,transparent 72%);mask-image:radial-gradient(circle at 60% 40%,#000,transparent 72%);}
.showcase > *{position:relative;}
.eyebrow{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:2px;color:var(--neon);margin-bottom:16px;}
.showcase h1{font-size:38px;font-weight:800;letter-spacing:-1.4px;line-height:1.08;margin:0;max-width:460px;}
.showcase .lede{font-size:16px;line-height:1.6;color:var(--show-soft);max-width:410px;margin:18px 0 0;}
.foot-status{display:flex;align-items:center;gap:18px;font-size:12.5px;color:var(--show-faint);}
.dot-neon{width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon);}

/* product suite list */
.suite{margin-top:32px;max-width:392px;display:flex;flex-direction:column;gap:10px;animation:dt-floatY 7s ease-in-out infinite;}
.prod{display:flex;align-items:center;gap:13px;background:var(--show-surface);backdrop-filter:blur(8px);
  border:1px solid var(--show-border);border-radius:14px;padding:13px 15px;}
.prod.soon{background:transparent;border-style:dashed;}
.prod .pic{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-size:17px;}
.pic-live{background:var(--neon);color:var(--on-neon);}
.pic-dim{background:rgba(var(--neon-rgb),.16);color:var(--neon);}
.pic-soon{background:rgba(var(--pop-rgb),.14);color:var(--pop);}
.prod .nm{font-size:14px;font-weight:600;color:#fff;}
.prod .ds{font-size:12px;color:var(--show-soft);}
.tag{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.5px;padding:3px 7px;border-radius:999px;}
.tag-live{color:var(--on-neon);background:var(--neon);animation:dt-pulse 2.4s ease-in-out infinite;}
.tag-live-o{color:var(--show-soft);border:1px solid var(--show-border);}
.tag-soon{color:var(--pop);border:1px solid rgba(var(--pop-rgb),.4);}

/* ---------- FORM ---------- */
.form-top{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:22px 26px;}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;}
.icon-btn:hover{border-color:var(--ink);}
.form-body{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 26px 60px;}
.form-card{width:100%;max-width:392px;}
.form-card h2{font-size:28px;font-weight:800;letter-spacing:-1px;margin:0;}
.form-card .sub{font-size:15px;color:var(--ink-soft);margin:9px 0 0;}

.divider{display:flex;align-items:center;gap:14px;margin:22px 0;}
.divider span.line{flex:1;height:1px;background:var(--border);}
.divider span.lbl{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.5px;color:var(--ink-faint);}

label.fl{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px;}
.fld{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 15px;
  font-family:'Sora',sans-serif;font-size:15px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;}
.fld:focus{border-color:var(--neon);box-shadow:0 0 0 4px rgba(var(--neon-rgb),.16);}
.fld::placeholder{color:var(--ink-faint);}
.pw-wrap{position:relative;}
.pw-wrap .eye{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--ink-faint);font-size:15px;cursor:pointer;background:none;border:none;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 7px;}
.link{color:var(--neon-ink);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;}
.remember{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:13.5px;color:var(--ink-soft);cursor:pointer;}
.remember input{width:17px;height:17px;accent-color:var(--neon);cursor:pointer;flex:none;}

.btn-primary{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:var(--neon);color:var(--on-neon);
  font-weight:700;font-size:16px;padding:15px;border:none;border-radius:13px;margin-top:22px;cursor:pointer;
  box-shadow:0 12px 30px rgba(var(--neon-rgb),.42);transition:transform .15s,box-shadow .15s;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(var(--neon-rgb),.6);}
.btn-primary:disabled{opacity:.7;cursor:default;transform:none;}
.signup{text-align:center;margin-top:22px;font-size:13.5px;color:var(--ink-soft);}
.legal{text-align:center;margin-top:28px;font-size:12px;color:var(--ink-faint);line-height:1.6;}
.legal a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

/* auth error / forgot-password message */
.form-err{display:none;margin-top:16px;font-size:13px;color:var(--danger);text-align:center;}

/* inline SVG icons (crisp, cross-platform) */
.ic{stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;}
.pic .ic{width:18px;height:18px;}
.icon-btn .ic,.eye .ic{width:17px;height:17px;}

/* ---------- KEYFRAMES ---------- */
@keyframes dt-blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.1)}66%{transform:translate(-20px,16px) scale(.95)}}
@keyframes dt-floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes dt-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important;}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .auth{flex-direction:column;}
  .showcase{padding:32px 28px;gap:28px;}
  .showcase h1{font-size:30px;}
  .suite{max-width:none;}
  .form-top{position:absolute;top:0;right:0;}
}