/* ================================================================
   JD Funnel Sales Intelligence — Shared auth-page styles
   Used by login / register / forgot-password / reset-password.
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#F9FAFB; --surface:#FFFFFF; --border:#E4E7EC; --border-md:#D0D5DD;
  --accent:#1570EF; --accent-dim:rgba(21,112,239,.08); --accent-glow:rgba(21,112,239,.2);
  --green:#067647; --green-dim:#ECFDF3; --red:#B42318; --red-dim:#FEF3F2; --red-mid:#FEE4E2;
  --orange:#B54708; --orange-dim:#FFFAEB; --text:#101828; --muted:#667085; --dim:#98A2B3;
  --fb:'Inter',sans-serif; --r:8px; --r-lg:12px; --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 4px 12px rgba(16,24,40,.08),0 1px 3px rgba(16,24,40,.04);
}
body{ font-family:var(--fb); background:
  radial-gradient(1200px 600px at 50% -10%, rgba(21,112,239,.10), transparent 60%), var(--bg);
  color:var(--text); min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 18px; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-md); width:100%; max-width:420px; padding:32px 30px; }
.auth-wide{ max-width:480px; }
.brand{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.brand .mark{ width:36px; height:36px; border-radius:9px; background:var(--accent-dim);
  border:1px solid var(--accent-glow); display:flex; align-items:center; justify-content:center; }
.brand .mark svg{ width:18px; height:18px; }
.brand .name{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.brand .name span{ color:var(--accent); }
h1{ font-size:21px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; }
.subtitle{ font-size:13.5px; color:var(--muted); margin-bottom:22px; line-height:1.6; }
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:12.5px; font-weight:500; color:var(--text); margin-bottom:6px; }
.field input, .field select{
  width:100%; font-family:var(--fb); font-size:14px; color:var(--text);
  background:var(--surface); border:1px solid var(--border-md); border-radius:var(--r);
  padding:11px 13px; outline:none; transition:border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.field .hint{ font-size:11.5px; color:var(--dim); margin-top:5px; }
.btn{ width:100%; font-family:var(--fb); font-size:14px; font-weight:600; padding:11px 16px;
  border-radius:var(--r); cursor:pointer; border:1px solid transparent; transition:all .15s; }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:#1366d6; }
.btn-primary:disabled{ opacity:.6; cursor:default; }
.btn-ghost{ background:var(--surface); color:var(--muted); border-color:var(--border-md); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.row-links{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; font-size:13px; }
.row-links a, .link{ color:var(--accent); text-decoration:none; font-weight:500; }
.row-links a:hover, .link:hover{ text-decoration:underline; }
.divider{ text-align:center; color:var(--dim); font-size:12px; margin:18px 0; position:relative; }
.divider::before, .divider::after{ content:""; position:absolute; top:50%; width:42%; height:1px; background:var(--border); }
.divider::before{ left:0; } .divider::after{ right:0; }
.alert{ display:none; border-radius:var(--r); padding:11px 14px; font-size:13px; line-height:1.55; margin-bottom:16px; }
.alert.show{ display:block; }
.alert.err{ background:var(--red-dim); border:1px solid #FDA29B; color:var(--red); }
.alert.ok{ background:var(--green-dim); border:1px solid #ABEFC6; color:var(--green); }
.alert.info{ background:var(--orange-dim); border:1px solid #FEC84B; color:var(--orange); }
.alert code{ font-size:11.5px; word-break:break-all; }
.seg{ display:flex; gap:8px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:4px; margin-bottom:18px; }
.seg button{ flex:1; font-family:var(--fb); font-size:13px; font-weight:600; padding:8px; border:none; border-radius:7px;
  background:transparent; color:var(--muted); cursor:pointer; transition:all .15s; }
.seg button.active{ background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm); }
.foot-note{ text-align:center; font-size:11px; color:var(--dim); margin-top:22px; }
.pw-wrap{ position:relative; }
.pw-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none;
  color:var(--dim); cursor:pointer; font-size:11px; font-weight:600; padding:4px 6px; }
.pw-toggle:hover{ color:var(--accent); }
/* Dev-only quick login panel */
.dev-panel{ display:none; margin-top:20px; border:1px dashed var(--border-md); border-radius:var(--r-lg); padding:14px; background:var(--bg); }
.dev-panel.show{ display:block; }
.dev-head{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--orange); margin-bottom:10px; }
.dev-head .pill{ background:var(--orange-dim); border:1px solid #FEC84B; color:var(--orange); padding:1px 7px; border-radius:20px; font-size:10px; }
.dev-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dev-btn{ text-align:left; font-family:var(--fb); background:var(--surface); border:1px solid var(--border-md); border-radius:var(--r); padding:9px 11px; cursor:pointer; transition:all .15s; }
.dev-btn:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); }
.dev-btn b{ display:block; font-size:12.5px; color:var(--text); }
.dev-btn span{ font-size:11px; color:var(--muted); }
.dev-note{ font-size:11px; color:var(--dim); margin-top:9px; }