/* ─────────────────────────────────────────────────────────────────────────────
   CFM Scrub Center · shared UI system — one file for /admin, / (agent) and /buyer.
   Structure adopted from getlayers.ai (operator reference, 2026-08-26): near-black
   ground, layered surfaces, soft white hairlines, glass blur headers, General Sans,
   radii 8 / 9 / 12 / 24 px, inset-highlight shadows. Colour is the Callflow
   Marketing brand (callflowmarketingllc.com): steel blue #2a6e9e, sky #3e8fc4,
   the logo-ring cyan→teal gradient (#2b9fe0 → #1fbfae) as the signature accent,
   coral #d9694a for the vendor / "saved" tint.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg: #060507; --surface-1: #0c0b10; --surface-2: #131218; --surface-3: #1b1b22;
  --text: #f5f4f7; --text-2: #a3a1ad; --muted: #a3a1ad; --faint: #6a6873;
  --border: #ffffff14; --border-strong: #ffffff29; --glass: #ffffff0b; --glass-strong: #ffffff12;
  --accent-1: #3e8fc4; --accent-2: #2b9fe0; --accent: #3e8fc4; --accent-soft: #3e8fc41f;
  --premium: linear-gradient(125deg, #2a6e9e 0%, #3e8fc4 60%, #35a8bd 100%);   /* brand gradient — primary buttons */
  --warm: #2b9fe0; --warm-glow: #2b9fe073; --warm-grad: linear-gradient(90deg, #2b9fe0, #1fbfae);   /* logo-ring gradient — signature accent */
  --cool-glow: #1fbfae66;
  --good: #7fdba6; --good-soft: #7fdba61f; --bad: #ff7676; --bad-soft: #ff76761f; --warn: #ffc07a; --warn-soft: #ffc07a1f;
  --purple: #f0937a; --purple-soft: #d9694a24;   /* coral — vendor / "saved" tint */
  --card: var(--surface-1); --card2: var(--surface-2); --line: var(--border);
  --r-control: 8px; --r-panel: 9px; --r-card: 12px; --r-stage: 24px; --r-pill: 999px;
  --font: 'General Sans', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font);
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --shadow: inset 0 1px #ffffff0f, 0 12px 28px -14px #000000a6;
  --shadow-lift: inset 0 1px #ffffff14, 0 18px 40px -18px #000000d9;
  --shadow-stage: 0 30px 80px -30px #000000e6;
  --premium-shadow: inset 0 1px #ffffff40, inset 0 -1px #00000033, 0 6px 18px -6px #3e8fc480;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  color: var(--text); font: 15px/1.55 var(--font); min-height: 100vh; background: var(--bg);
  background-image:
    radial-gradient(900px 420px at 15% -10%, #3e8fc424, transparent 70%),
    radial-gradient(800px 420px at 90% -20%, #1fbfae1c, transparent 70%);
  background-attachment: fixed;
}
::selection { background: #3e8fc459; }
a { color: var(--text); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 1.2rem 1.1rem 4rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ── type helpers ── */
.eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm); }
.lede { color: var(--text-2); font-size: 1.05rem; line-height: 1.6; }
.muted { color: var(--text-2); }
.mono, td.mono { font-family: var(--mono); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.hint { color: var(--text-2); font-size: 0.82rem; margin-top: 0.65rem; }
.grouplabel { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin: 0.9rem 0 0.5rem; }

/* ── admin brand bar ── */
header {
  display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; position: sticky; top: 0.6rem; z-index: 30;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  background: #121114b3; border: 1px solid var(--border); border-radius: var(--r-card); padding: 0.8rem 1.1rem;
  box-shadow: var(--shadow); margin-bottom: 0.9rem; animation: fadeUp 0.35s ease both; overflow: hidden;
}
header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--warm-grad); }
/* logo.webp is a black-on-transparent wordmark: invert it to white on the dark UI */
.brandlogo { height: 54px; width: auto; display: block; }
.brandtitle { display: flex; flex-direction: column; gap: 0.1rem; border-left: 1px solid var(--border); padding-left: 1rem; }
header h1 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; line-height: 1.15; color: var(--text); }
header .sub { color: var(--text-2); font-size: 0.8rem; font-weight: 400; }

/* ── nav ── */
nav { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 1rem; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-card); padding: 0.35rem; animation: fadeUp 0.4s ease both; }
nav button { flex: 1; min-width: 110px; background: transparent; color: var(--text-2); border: 0; border-radius: var(--r-pill); padding: 0.55rem 0.7rem; font-weight: 500; font-size: 0.9rem; cursor: pointer; font-family: var(--font); letter-spacing: -0.01em; transition: 0.18s; }
nav button:hover { color: var(--text); background: var(--glass); }
nav button.active { background: var(--premium); color: #fff; box-shadow: var(--premium-shadow); }

/* ── cards ── */
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.25rem 1.35rem; margin-bottom: 0.95rem; box-shadow: var(--shadow); animation: fadeUp 0.35s ease both; }
.card h2 { display: flex; align-items: center; gap: 0.6rem; font-size: 0.74rem; margin-bottom: 0.9rem; color: var(--text-2); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.card h2::before { content: ''; width: 1.3rem; height: 0.3rem; border-radius: 999px; background: var(--warm-grad); box-shadow: 0 0 8px var(--warm-glow); flex: none; }
.types { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.types label { display: flex; align-items: center; gap: 0.5rem; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.5rem 0.95rem; cursor: pointer; user-select: none; font-size: 0.88rem; font-weight: 500; color: var(--text-2); transition: 0.18s; }
.types label:hover { border-color: var(--border-strong); color: var(--text); }
.types label:has(input:checked) { background: var(--accent-soft); border-color: #3e8fc466; color: var(--text); box-shadow: inset 0 1px #ffffff1a; }
.types input { accent-color: var(--accent-1); width: 1rem; height: 1rem; }

/* ── toggle switch + vendor panel ── */
.switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 500; font-size: 0.9rem; user-select: none; color: var(--text); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 42px; height: 23px; background: var(--glass-strong); border: 1px solid var(--border-strong); border-radius: var(--r-pill); transition: 0.2s; position: relative; flex: none; }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--text-2); transition: 0.2s; }
.switch input:checked + .track { background: var(--warm-grad); border-color: transparent; box-shadow: 0 0 14px var(--warm-glow); }
.switch input:checked + .track::after { transform: translateX(19px); background: #fff; }
.vpanel { display: none; margin-top: 0.75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: 0.95rem 1.05rem; }
.vpanel.show { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-end; animation: fadeUp 0.25s ease both; }
.vfield { display: flex; flex-direction: column; gap: 0.3rem; }
.vfield > span { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.vfield select { min-width: 170px; }
.vfield .chk { display: flex; align-items: center; gap: 0.45rem; }
.vfield .chk input { accent-color: var(--accent-1); width: 1.05rem; height: 1.05rem; flex: none; }

/* ── drop zone ── */
#drop { border: 1px dashed var(--border-strong); border-radius: var(--r-card); padding: 2.3rem 1rem; text-align: center; cursor: pointer; transition: 0.2s; background: var(--glass); }
#drop:hover, #drop.over { border-color: var(--accent-2); background: var(--glass-strong); box-shadow: inset 0 -40px 80px -50px var(--warm-glow); }
#drop .big { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.15rem; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border: 1px solid transparent; border-radius: var(--r-pill); padding: 0.62rem 1.15rem; font-weight: 600; cursor: pointer; font-size: 0.9rem; font-family: var(--font); letter-spacing: -0.01em; transition: 0.18s; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-accent { background: var(--premium); color: #fff; box-shadow: var(--premium-shadow); }
.btn-accent:hover { filter: brightness(1.08); box-shadow: inset 0 1px #ffffff40, inset 0 -1px #00000033, 0 10px 24px -8px #3e8fc4a6; }
.btn-ghost { background: var(--glass-strong); color: var(--text); border-color: var(--border); box-shadow: inset 0 1px #ffffff1a; }
.btn-ghost:hover { background: #ffffff1c; border-color: var(--border-strong); }
.btn-good { background: var(--good-soft); color: var(--good); border-color: #7fdba64d; box-shadow: inset 0 1px #ffffff14; }
.btn-good:hover { background: #7fdba633; }
.btn-warn { background: var(--warn-soft); color: var(--warn); border-color: #ffc07a4d; box-shadow: inset 0 1px #ffffff14; }
.btn-warn:hover { background: #ffc07a33; }
.btn-bad  { background: var(--bad-soft); color: var(--bad); border-color: #ff76764d; box-shadow: inset 0 1px #ffffff14; }
.btn-bad:hover { background: #ff767633; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.filemeta { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: 0.9rem 1.05rem; margin-top: 0.95rem; font-size: 0.88rem; color: var(--text-2); }
.filemeta b { color: var(--text); font-weight: 600; }
.lastrun { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; margin: 0.6rem 0 0.9rem; }
.lastrun .lbl { font-weight: 600; color: var(--faint); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; }
.lastrun b { color: var(--text); }
.leadform { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.5rem; margin-top: 0.7rem; }
.leadform textarea, .leadform .row { grid-column: 1 / -1; }

/* ── inputs ── */
select, textarea, input[type=text], input[type=search], input[type=date], input[type=password], input[type=tel], input[type=email], input[type=number] {
  background: var(--glass); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-control); padding: 0.55rem 0.8rem; font-size: 0.9rem; font-family: inherit; transition: 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
select:focus, textarea:focus, input:focus { outline: none; border-color: var(--accent-2); background: var(--glass-strong); }
select option { background: var(--surface-2); color: var(--text); }
textarea { width: 100%; min-height: 120px; font-family: var(--mono); font-size: 0.85rem; }
input[type=file] { color: var(--text-2); font-size: 0.85rem; }
input[type=file]::file-selector-button { background: var(--glass-strong); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.4rem 0.9rem; font-family: inherit; font-weight: 600; cursor: pointer; margin-right: 0.6rem; }

/* ── progress ── */
.progress { height: 0.55rem; background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; margin: 0.9rem 0 0.45rem; }
.progress > div { height: 100%; width: 0%; background: var(--warm-grad); box-shadow: 0 0 14px var(--warm-glow); transition: width 0.25s; position: relative; overflow: hidden; }
.progress > div::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff59, transparent); animation: shimmer 1.6s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── tiles ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; margin: 0.95rem 0; }
.tile { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-card); padding: 0.8rem 0.95rem; transition: 0.18s; box-shadow: inset 0 1px #ffffff0a; }
.tile:hover { background: var(--glass-strong); transform: translateY(-2px); }
.tile .n { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.tile .l { color: var(--faint); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.15rem; }
.tile.good .n { color: var(--good); } .tile.bad .n { color: var(--bad); } .tile.warn .n { color: var(--warn); } .tile.purple .n { color: var(--purple); } .tile.accent .n { color: var(--warm); }
.breakdown span { display: inline-block; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.2rem 0.75rem; margin: 0.15rem 0.28rem 0.15rem 0; font-size: 0.82rem; color: var(--text-2); font-weight: 400; }
.breakdown b { color: var(--text); font-weight: 600; }

/* ── tables ── */
table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); }
th { color: var(--faint); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: var(--glass); }
.tablewrap { overflow-x: auto; }
.pill { display: inline-block; border-radius: var(--r-pill); padding: 0.1rem 0.65rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; }
.pill.bad { background: var(--bad-soft); color: var(--bad); border-color: #ff76763d; }
.pill.good { background: var(--good-soft); color: var(--good); border-color: #7fdba63d; }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: #ffc07a3d; }
.pill.muted { background: var(--glass); color: var(--text-2); border-color: var(--border); }

/* ── toast & misc ── */
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(20px); background: #101015f5; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); color: var(--text); border: 1px solid var(--border-strong); padding: 0.8rem 1.2rem; border-radius: var(--r-card); box-shadow: var(--shadow-stage); opacity: 0; pointer-events: none; transition: 0.25s; max-width: 92vw; z-index: 50; font-size: 0.9rem; font-weight: 500; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: #ff76766b; box-shadow: var(--shadow-stage), inset 0 -20px 40px -30px #ff767680; }
.statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); gap: 0.6rem; margin-bottom: 0.95rem; }
.statstrip .tile { animation: fadeUp 0.35s ease both; }
.empty { text-align: center; color: var(--faint); padding: 1.9rem 0; }
.pager { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-2); }
details summary::-webkit-details-marker { display: none; }
details summary { font-family: var(--font); color: var(--text) !important; font-weight: 600; }

/* ── login screen (admin + buyer) ── */
#loginOverlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; background: radial-gradient(900px 460px at 50% -15%, #3e8fc42e, transparent 70%), var(--bg); }
#loginOverlay.show { display: flex; }
.logincard { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-stage); box-shadow: var(--shadow-stage), inset 0 1px #ffffff14; padding: 2.2rem 2.2rem 1.9rem; width: 100%; max-width: 400px; text-align: center; position: relative; overflow: hidden; animation: fadeUp 0.35s ease both; }
.logincard::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--warm-grad); }
.logincard img { height: 72px; margin-bottom: 0.9rem; }
.logincard h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin-bottom: 1.2rem; }
.logincard input { width: 100%; margin-bottom: 0.7rem; padding: 0.72rem 0.95rem; font-size: 0.95rem; }
.logincard .btn { width: 100%; padding: 0.8rem; font-size: 0.95rem; margin-top: 0.2rem; }
.loginerr { color: var(--bad); font-size: 0.84rem; font-weight: 500; min-height: 1.2rem; margin: 0.3rem 0 0.4rem; }

/* ═══════════════════════════ agent page (/) ═══════════════════════════ */
.agent { font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.agent .card { width: 100%; max-width: 480px; border-radius: var(--r-stage); padding: 2.1rem 2.2rem 1.7rem; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-stage), inset 0 1px #ffffff14; margin: 0; }
.agent .card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--warm-grad); }
.agent h1 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.03em; margin: 0.4rem 0 0.15rem; color: var(--text); }
.agent .sub { color: var(--text-2); font-size: 0.82rem; margin-bottom: 1.3rem; }
.agent img.logo { height: 56px; }
.agent .step { text-align: left; margin-bottom: 0.9rem; }
.agent .steplbl { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.4rem; }
.agent .chip { border-radius: var(--r-pill); padding: 0.05rem 0.6rem; font-size: 0.7rem; letter-spacing: 0.02em; border: 1px solid var(--border); background: var(--glass); color: var(--text-2); text-transform: none; }
.agent .chip.ok { background: var(--good-soft); color: var(--good); border-color: #7fdba63d; }
.agent .chip.bad { background: var(--bad-soft); color: var(--bad); border-color: #ff76763d; }
.agent .chip.spell { background: var(--warn-soft); color: var(--warn); border-color: #ffc07a3d; }
.agent .inrow { display: flex; gap: 0.55rem; }
.agent .inrow input { flex: 1; min-width: 0; font: 500 1.15rem/1 var(--mono); letter-spacing: 0.04em; padding: 0.78rem 0.9rem; border: 1px solid var(--border); border-radius: var(--r-control); color: var(--text); background: var(--glass); transition: 0.15s; }
.agent .inrow input#name { font-family: var(--font); letter-spacing: 0; }
.agent .inrow input:focus { outline: none; border-color: var(--accent-2); background: var(--glass-strong); }
.agent .inrow button { border: 0; border-radius: var(--r-pill); padding: 0 1.2rem; cursor: pointer; white-space: nowrap; font: 600 0.92rem var(--font); color: #fff; background: var(--premium); box-shadow: var(--premium-shadow); transition: 0.15s; }
.agent .inrow button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.agent .inrow button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.agent .err { display: none; margin-top: 0.6rem; color: var(--bad); font-weight: 500; font-size: 0.86rem; }
.agent .foot { margin-top: 1.2rem; color: var(--faint); font-size: 0.73rem; }

/* verdict modal — semantic gradients kept (green / amber / red), stage radius */
#modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 1rem; background: #06050799; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade 0.2s ease both; }
#modal.show { display: flex; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.mcard { position: relative; overflow: hidden; width: 100%; max-width: 430px; border-radius: var(--r-stage); padding: 2.6rem 2rem 2rem; text-align: center; color: #fff; animation: pop 0.5s cubic-bezier(0.18, 1.25, 0.4, 1) both; box-shadow: var(--shadow-stage), inset 0 1px 0 #ffffff40; }
@keyframes pop { 0% { opacity: 0; transform: scale(0.7) translateY(30px); } 100% { opacity: 1; transform: none; } }
#modal.safe .mcard { background: linear-gradient(150deg, #0b8043 0%, #12a35e 45%, #0ea5a4 100%); }
#modal.warn .mcard { background: linear-gradient(150deg, #b45309 0%, #e08c0b 55%, #f2b135 100%); }
#modal.bad  .mcard { background: linear-gradient(150deg, #7f1d1d 0%, #b91c1c 50%, #dc3535 100%); animation: pop 0.5s cubic-bezier(0.18,1.25,0.4,1) both, shake 0.5s ease 0.35s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.mglow { position: absolute; inset: -40%; background: radial-gradient(circle at 50% 30%, #ffffff47, transparent 55%); animation: glow 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes glow { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.micon { font-size: 3.6rem; line-height: 1; display: inline-block; animation: iconpop 0.55s cubic-bezier(0.18, 1.6, 0.4, 1) 0.15s both; filter: drop-shadow(0 6px 16px #0000004d); }
@keyframes iconpop { 0% { opacity: 0; transform: scale(0.2) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
.mring { position: absolute; left: 50%; top: 84px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ffffffcc; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
#modal.safe .mring { animation: ring 0.9s ease-out 0.25s; }
@keyframes ring { 0% { opacity: 0.9; width: 10px; height: 10px; } 100% { opacity: 0; width: 220px; height: 220px; } }
.mtitle { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.7rem; text-shadow: 0 2px 12px #00000040; }
.msub { margin-top: 0.4rem; font-size: 0.95rem; font-weight: 400; opacity: 0.95; }
.msub b { font-family: var(--mono); font-weight: 600; }
.mflags { margin-top: 0.7rem; }
.mflags span { display: inline-block; background: #00000038; border: 1px solid #ffffff59; border-radius: var(--r-pill); padding: 0.2rem 0.75rem; font-size: 0.8rem; font-weight: 600; margin: 0.15rem; }
.mbtn { margin-top: 1.4rem; border: 0; border-radius: var(--r-pill); padding: 0.8rem 2rem; cursor: pointer; font: 700 1rem var(--font); color: #14303f; background: #fff; box-shadow: 0 6px 18px #00000047; transition: 0.15s; }
.mbtn:hover { transform: translateY(-1px) scale(1.02); }
.mbtn2 { margin-top: 0.6rem; display: none; border: 1px solid #ffffff8c; border-radius: var(--r-pill); padding: 0.62rem 1.4rem; cursor: pointer; font: 600 0.86rem var(--font); color: #fff; background: #0000002e; transition: 0.15s; width: auto; }
.mbtn2:hover { background: #0000004d; }
.mbar { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: #ffffffd9; transform-origin: left; }
.mbar.run { animation: bar linear both; }
@keyframes bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* lingering result card */
.result { display: none; position: relative; overflow: hidden; margin-top: 1rem; border-radius: var(--r-card); padding: 1rem 1.15rem 1.05rem; text-align: left; color: #fff; box-shadow: var(--shadow-stage), inset 0 1px #ffffff40; }
.result.show { display: block; animation: fadeUp 0.35s ease both; }
.result.safe { background: linear-gradient(150deg, #0b8043 0%, #12a35e 45%, #0ea5a4 100%); }
.result.bad  { background: linear-gradient(150deg, #7f1d1d 0%, #b91c1c 50%, #dc3535 100%); }
.rtitle { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 2px 10px #00000033; }
.rrows { margin-top: 0.45rem; font-size: 0.9rem; }
.rrows div { display: flex; gap: 0.6rem; align-items: baseline; }
.rrows span { opacity: 0.85; min-width: 3.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.rrows b { font-family: var(--mono); font-weight: 600; font-size: 0.98rem; }
.rwhy { margin-top: 0.45rem; font-size: 0.88rem; opacity: 0.95; }
.rwhy b { font-family: var(--mono); font-weight: 600; }
.rflags { margin-top: 0.45rem; }
.rflags span { display: inline-block; background: #00000038; border: 1px solid #ffffff59; border-radius: var(--r-pill); padding: 0.15rem 0.7rem; font-size: 0.76rem; font-weight: 600; margin: 0.12rem 0.2rem 0.12rem 0; }
.rfoot { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-top: 0.75rem; font-size: 0.76rem; opacity: 0.95; }
.rnew { border: 1px solid #ffffff99; background: #0000002e; color: #fff; border-radius: var(--r-pill); padding: 0.45rem 0.9rem; cursor: pointer; font: 600 0.82rem var(--font); white-space: nowrap; transition: 0.15s; }
.rnew:hover { background: #00000052; }
.rbar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #ffffff38; }
.rbar div { height: 100%; background: #ffffffe6; transform-origin: left; }

/* ═══════════════════════════ buyer portal (/buyer) ═══════════════════════════ */
.buyer { font-size: 16px; }
.buyer .bview { min-height: 100vh; }
.buyer #login { display: flex; align-items: center; justify-content: center; padding: 1rem; background: radial-gradient(900px 460px at 50% -15%, #3e8fc42e, transparent 70%), var(--bg); }
.buyer .blogo { height: 66px; margin-bottom: 0.5rem; }
.buyer .blogo-sm { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.buyer .logincard { max-width: 420px; }
.buyer .logincard h2 { margin: 1rem 0 0.35rem; }
.buyer .logincard p { color: var(--text-2); font-size: 0.9rem; margin-bottom: 1.3rem; }
.buyer .logincard form { text-align: left; }
.buyer .logincard .foot { margin-top: 1.2rem; color: var(--faint); font-size: 0.75rem; font-family: var(--mono); }
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.wordmark .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--warm); box-shadow: 0 0 10px var(--warm-glow); flex: none; }
.wordmark .wm1 { font-size: 1.15rem; }
.wordmark .wm2 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.bhead { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.5rem; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); background: #121114b3; border-bottom: 1px solid var(--border); }
.bhead::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--warm-grad); }
.bnav { display: flex; gap: 0.25rem; }
.nav-link { border-radius: var(--r-pill); color: var(--text-2); padding: 0.42rem 0.85rem; font-size: 0.95rem; }
.nav-link.active { color: var(--text); background: var(--glass-strong); }
.bwho { display: flex; align-items: center; gap: 0.8rem; color: var(--text-2); font-size: 0.88rem; }
.bwho b { color: var(--text); font-weight: 600; }
.bmain { max-width: 880px; margin: 0 auto; padding: 3.2rem 1.25rem 4rem; }
.bhero { text-align: center; margin-bottom: 2.4rem; }
.bhero h1 { font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; margin: 0.5rem 0 0.7rem; color: var(--text); text-wrap: balance; }
.bhero .lede { max-width: 56ch; margin: 0 auto 1.6rem; }
.search { display: flex; gap: 0.5rem; max-width: 560px; margin: 0 auto; padding: 0.4rem; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: inset 0 1px #ffffff0f, 0 30px 60px -40px var(--warm-glow); }
.search input { flex: 1; min-width: 0; background: transparent; border: 0; border-radius: var(--r-pill); padding: 0.7rem 1.1rem; font: 500 1.15rem/1.2 var(--mono); letter-spacing: 0.03em; color: var(--text); }
.search input:focus { outline: none; background: transparent; }
.search .btn { padding: 0.7rem 1.4rem; font-size: 0.95rem; }
.recent { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; margin-top: 0.9rem; min-height: 1.6rem; }
.recent button { border-radius: var(--r-pill); color: var(--text-2); border: 1px solid var(--border); background: #ffffff0a; padding: 0.25rem 0.7rem; font: 500 0.8rem var(--mono); cursor: pointer; transition: 0.15s; }
.recent button:hover { color: var(--text); border-color: var(--border-strong); }
.lead { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-stage); box-shadow: var(--shadow-stage), inset 0 1px #ffffff14; padding: 1.6rem 1.7rem 1.5rem; margin-bottom: 1.2rem; animation: fadeUp 0.35s ease both; }
.lead-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; }
.lead-name { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.lead-meta { color: var(--text-2); font-size: 0.85rem; margin-top: 0.35rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.lead-phone { font: 500 1.25rem/1 var(--mono); letter-spacing: 0.03em; color: var(--text); background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.55rem 1rem; }
.lead-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); gap: 1.4rem; }
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.2rem; margin: 0; }
.dl div.wide { grid-column: 1 / -1; }
.dl dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.15rem; }
.dl dd { margin: 0; font-size: 0.95rem; color: var(--text); overflow-wrap: anywhere; }
.dl dd.mono { font-size: 0.92rem; }
.player { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.1rem 1.15rem; box-shadow: inset 0 1px #ffffff0a, inset 0 -40px 80px -60px var(--warm-glow); display: flex; flex-direction: column; gap: 0.75rem; align-self: start; }
.player .plabel { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); display: flex; justify-content: space-between; }
.player .prow { display: flex; align-items: center; gap: 0.8rem; }
.pbtn { width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: var(--premium); color: #fff; box-shadow: var(--premium-shadow); cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: 0.15s; }
.pbtn:hover { transform: scale(1.04); }
.pbar { flex: 1; height: 0.45rem; background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; cursor: pointer; position: relative; }
.pbar .pfill { height: 100%; width: 0%; background: var(--warm-grad); box-shadow: 0 0 12px var(--warm-glow); }
.ptime { font: 500 0.8rem var(--mono); color: var(--text-2); min-width: 6.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.player .none { color: var(--faint); font-size: 0.88rem; }
.lead-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.buyer .empty { padding: 2.6rem 1rem; border: 1px dashed var(--border-strong); border-radius: var(--r-card); }
.bfoot { text-align: center; color: var(--faint); font-size: 0.75rem; padding: 0 1rem 2.5rem; }
@media (max-width: 720px) {
  .lead-body { grid-template-columns: 1fr; }
  .bhead { padding: 0.8rem 1rem; }
  .bnav { display: none; }
}
.demos { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 1.1rem; }
.demos .lbl { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-right: 0.2rem; }
.demos button { border-radius: var(--r-pill); color: var(--text-2); border: 1px solid var(--border); background: #ffffff0a; padding: 0.3rem 0.8rem; font: 500 0.82rem var(--font); cursor: pointer; transition: 0.15s; }
.demos button:hover { color: var(--text); border-color: var(--border-strong); background: var(--glass-strong); }

/* agent page · buyer states step */
.agent .seg { display: inline-flex; gap: 0.2rem; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.2rem; margin-bottom: 0.5rem; }
.agent .seg button { border: 0; background: transparent; color: var(--text-2); border-radius: var(--r-pill); padding: 0.35rem 0.85rem; font: 600 0.8rem var(--font); cursor: pointer; transition: 0.15s; }
.agent .seg button.on { background: var(--premium); color: #fff; box-shadow: var(--premium-shadow); }
.agent .inrow input#state { font-family: var(--font); letter-spacing: 0; text-transform: uppercase; }
.agent .states { margin-top: 0.6rem; text-align: left; display: grid; gap: 0.4rem; }
.agent .shead { font-size: 0.8rem; color: var(--text-2); }
.agent .shead b, .agent .snone b { color: var(--text); }
.agent .sbuyer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-card); padding: 0.55rem 0.8rem; font-size: 0.8rem; color: var(--text-2); }
.agent .sbuyer b { color: var(--text); font-size: 0.9rem; background: var(--accent-soft); border: 1px solid #3e8fc466; border-radius: var(--r-pill); padding: 0.1rem 0.6rem; }
.agent .sbuyer em { width: 100%; font-style: normal; color: var(--warn); font-size: 0.74rem; }
.agent .snone { font-size: 0.84rem; color: var(--bad); background: var(--bad-soft); border: 1px solid #ff76763d; border-radius: var(--r-card); padding: 0.55rem 0.8rem; }
.agent .spaused { font-size: 0.72rem; color: var(--faint); }
.agent .ttype { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; border-radius: var(--r-pill); padding: 0.12rem 0.6rem; border: 1px solid transparent; }
.agent .ttype.blind { background: var(--accent-soft); color: #8ac6ec; border-color: #3e8fc466; }
.agent .ttype.warm { background: var(--warn-soft); color: var(--warn); border-color: #ffc07a4d; }
.agent .sbuyer.warm { border-left: 3px solid var(--warn); }
.agent .sbuyer.blind { border-left: 3px solid var(--accent-2); }
.agent .foot a { color: var(--text-2); }
.agent .foot a:hover { color: var(--text); }

/* agent page · buyer pings step */
.agent .pfields { display: flex; gap: 0.7rem; align-items: flex-end; flex-wrap: wrap; }
.agent .pfields label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); width: 8rem; }
.agent .pfields input, .agent .pmore input, .agent .pmore select { font: 500 0.95rem/1.2 var(--font); padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--r-control); color: var(--text); background: var(--glass); }
.agent .pfields input#zip, .agent .pfields input#age { font-family: var(--mono); letter-spacing: 0.04em; }
.agent .pfields input:focus, .agent .pmore input:focus, .agent .pmore select:focus { outline: none; border-color: var(--accent-2); background: var(--glass-strong); }
.agent .pmeta { font-size: 0.82rem; color: var(--text-2); padding-bottom: 0.55rem; }
.agent .pmeta b { font-family: var(--mono); color: var(--text); }
.agent .pbtns { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; align-items: center; }
.agent .pbtns button { flex: 1 1 76px; border: 0; border-radius: var(--r-pill); padding: 0.62rem 0.5rem; cursor: pointer; white-space: nowrap; font: 600 0.88rem var(--font); color: #fff; background: var(--premium); box-shadow: var(--premium-shadow); transition: 0.15s; }
.agent .pbtns button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.agent .pbtns button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.agent .pbtns.fe11 button { flex: 0 0 auto; padding: 0.62rem 1.3rem; }
.agent .pnote { font-size: 0.74rem; color: var(--text-2); }
.agent .pdivider { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.5rem; color: var(--faint); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.agent .pdivider::before, .agent .pdivider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.agent .pmore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.agent .pmore label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.agent .pmore label.wide { grid-column: 1 / -1; }
.agent .presults { margin-top: 0.7rem; display: grid; gap: 0.4rem; }
.agent .pres { display: grid; grid-template-columns: auto 1fr auto; gap: 0.3rem 0.7rem; align-items: center; background: var(--glass); border: 1px solid var(--border); border-left: 4px solid var(--faint); border-radius: var(--r-card); padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--text-2); animation: fadeUp 0.25s ease both; }
.agent .pres.open { border-left-color: var(--good); background: var(--good-soft); }
.agent .pres.closed { border-left-color: var(--bad); }
.agent .pres.err { border-left-color: var(--warn); }
.agent .pres b.k { color: var(--text); font-size: 0.9rem; }
.agent .pres .v { font-weight: 600; color: var(--text); }
.agent .pres.open .v { color: var(--good); }
.agent .pres.closed .v { color: var(--bad); }
.agent .pres .t { font-family: var(--mono); font-size: 0.68rem; color: var(--faint); white-space: nowrap; }
.agent .pres .d { grid-column: 1 / -1; font-size: 0.76rem; }
.agent .pres .d b { font-family: var(--mono); color: var(--text); }