/* ComplyRUO operator admin console (admin.complyruo.com)
 * Same design system as the marketing site + merchant portal (tokens, Poppins ExtraLight, glass,
 * accent #1EC8A2). Data-dense recipes for the merchant table, flag chips, detail view, audit feed.
 * No inline styles anywhere → CSP style-src stays tight (see _headers).
 */
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:200; font-display:swap;
  src:url("../fonts/poppins-extralight.ttf") format("truetype"); }

:root{
  --bg:#000; --text:#F4F6F7; --muted:#A6B0B6; --faint:#727C83;
  --accent:#1EC8A2; --on-accent:#03130F;
  --line:rgba(255,255,255,0.12); --line-2:rgba(255,255,255,0.18);
  --warn:#E8B339; --danger:#E5644D;
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); }
body{ font-family:var(--font); color:var(--text); -webkit-font-smoothing:antialiased; min-height:100vh;
  background:radial-gradient(120% 55% at 50% -10%, rgba(30,200,162,0.06), transparent 60%), #000; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ letter-spacing:-0.02em; font-weight:600; margin:0; }

/* ── App bar ─────────────────────────────────────────────────────────────────────────── */
.app-nav{ position:sticky; top:0; z-index:70; height:60px; display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; background:rgba(10,13,14,0.78); backdrop-filter:blur(14px) saturate(115%); -webkit-backdrop-filter:blur(14px) saturate(115%);
  border-bottom:1px solid var(--line); }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:18px; }
.brand .ruo{ color:var(--accent); } .brand .tag{ color:var(--faint); font-weight:400; font-size:13px; margin-left:6px; }
.brand svg{ width:24px; height:24px; }
.nav-actions{ display:flex; align-items:center; gap:8px; }
.tabs{ display:flex; gap:4px; }
.tab{ padding:8px 14px; border-radius:999px; border:1px solid transparent; background:none; color:var(--muted); font:inherit; font-size:14px; cursor:pointer; }
.tab:hover{ color:var(--text); } .tab.on{ background:rgba(255,255,255,0.08); border-color:var(--line-2); color:var(--text); }

.main{ max-width:1280px; margin:0 auto; padding:28px 24px 80px; }
.page-title{ font-size:24px; } .sub{ color:var(--muted); font-size:14px; margin-top:6px; }
.spacer{ height:22px; } .right{ margin-left:auto; }

/* ── Buttons ─────────────────────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-weight:600; font-size:14px; line-height:1;
  padding:10px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:background .2s,border-color .2s,opacity .2s; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-accent{ background:var(--accent); color:var(--on-accent); } .btn-accent:hover:not([disabled]){ filter:brightness(1.07); }
.btn-ghost{ background:rgba(255,255,255,0.06); color:var(--text); border-color:var(--line-2); } .btn-ghost:hover:not([disabled]){ border-color:rgba(255,255,255,0.4); }
.btn-danger{ background:rgba(229,100,77,0.14); color:var(--danger); border-color:rgba(229,100,77,0.4); } .btn-danger:hover:not([disabled]){ background:rgba(229,100,77,0.22); }
.btn-sm{ padding:7px 12px; font-size:13px; border-radius:8px; }
.btn-link{ background:none; border:0; color:var(--accent); font:inherit; font-size:14px; cursor:pointer; padding:0; }

/* ── Stat cards ──────────────────────────────────────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.stat{ background:rgba(18,21,22,0.6); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.stat .n{ font-size:30px; font-weight:200; line-height:1; }
.stat .l{ color:var(--muted); font-size:12.5px; margin-top:8px; }
.stat.alert .n{ color:var(--danger); } .stat.warn .n{ color:var(--warn); } .stat.good .n{ color:var(--accent); }
.stat-link{ appearance:none; -webkit-appearance:none; font:inherit; text-align:left; width:100%; color:inherit; cursor:pointer; transition:border-color .12s, transform .12s; }
.stat-link:hover{ border-color:var(--accent); transform:translateY(-1px); }
.stat-link .l{ color:var(--accent); }

/* ── Controls (search + filter chips) ────────────────────────────────────────────────── */
.controls{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:22px 0 14px; }
.search{ flex:1; min-width:220px; }
.search input{ width:100%; font-family:inherit; font-size:14px; color:var(--text); padding:11px 14px; border-radius:10px;
  background:rgba(255,255,255,0.04); border:1px solid var(--line-2); }
.search input:focus{ outline:none; border-color:var(--accent); }
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{ padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:none; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; }
.chip:hover{ color:var(--text); } .chip.on{ background:rgba(30,200,162,0.12); border-color:rgba(30,200,162,0.4); color:var(--accent); }

/* ── Data table ──────────────────────────────────────────────────────────────────────── */
.tablewrap{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(18,21,22,0.5); }
table{ width:100%; border-collapse:collapse; font-size:14px; }
thead th{ text-align:left; padding:13px 16px; color:var(--faint); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); }
tbody td{ padding:13px 16px; border-top:1px solid var(--line); vertical-align:middle; }
tbody tr{ cursor:pointer; transition:background .15s; } tbody tr:hover{ background:rgba(255,255,255,0.03); }
.email{ font-weight:500; } .dim{ color:var(--muted); } .mono{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted); }
.score{ font-weight:600; } .empty{ padding:40px; text-align:center; color:var(--muted); }

/* ── Status + band + flag pills ──────────────────────────────────────────────────────── */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; }
.pill .dot{ width:6px; height:6px; border-radius:50%; }
.st-active{ background:rgba(30,200,162,0.12); color:var(--accent); } .st-active .dot{ background:var(--accent); }
.st-pending{ background:rgba(166,176,182,0.12); color:var(--muted); } .st-pending .dot{ background:var(--muted); }
.st-suspended{ background:rgba(232,179,57,0.14); color:var(--warn); } .st-suspended .dot{ background:var(--warn); }
.st-revoked{ background:rgba(229,100,77,0.16); color:var(--danger); } .st-revoked .dot{ background:var(--danger); }
.st-paused{ background:rgba(232,179,57,0.14); color:var(--warn); } .st-paused .dot{ background:var(--warn); }
.st-banned{ background:rgba(229,100,77,0.16); color:var(--danger); } .st-banned .dot{ background:var(--danger); }
.fz-12{ font-size:12px; }
/* payout operations action queue */
.acts{ display:flex; flex-direction:column; gap:10px; }
.act{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--text); line-height:1.55; padding:13px 15px; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid var(--line); }
.act b{ font-weight:600; } .act .btn{ margin-left:8px; }
.act-dot{ width:9px; height:9px; border-radius:50%; flex:none; margin-top:6px; background:var(--muted); }
.act-dot.good{ background:var(--accent); } .act-dot.warn{ background:#E8B04B; } .act-dot.alert{ background:var(--danger); }
.band-low_risk{ color:var(--accent); } .band-at_risk{ color:var(--warn); } .band-action_needed{ color:var(--danger); }
.flags{ display:flex; gap:5px; flex-wrap:wrap; }
.flag{ padding:3px 8px; border-radius:6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.flag-action_needed,.flag-revoked{ background:rgba(229,100,77,0.14); color:var(--danger); }
.flag-at_risk,.flag-stale,.flag-suspended,.flag-failed_logins{ background:rgba(232,179,57,0.14); color:var(--warn); }
.flag-pending,.flag-never_scanned{ background:rgba(166,176,182,0.12); color:var(--muted); }
.flag-disputes{ background:rgba(229,100,77,0.14); color:var(--danger); }
/* Bypass watch */
.pct{ font-weight:700; } .pct.alert{ color:var(--danger); } .pct.warn{ color:var(--warn); } .pct.good{ color:var(--accent); }
tbody tr.row-flag{ background:rgba(229,100,77,0.07); }

/* ── New signups buckets ─────────────────────────────────────────────────────────────── */
.signup-bucket{ margin-top:24px; } .signup-bucket:first-child{ margin-top:0; }
.bucket-count{ color:var(--muted); font-size:12px; white-space:nowrap; }
.vol-badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.vol-hi{ background:rgba(30,200,162,0.14); color:var(--accent); }
.vol-mid{ background:rgba(232,179,57,0.14); color:var(--warn); }
.vol-lo{ background:rgba(166,176,182,0.12); color:var(--muted); }

/* ── Cards / detail ──────────────────────────────────────────────────────────────────── */
.card{ background:rgba(18,21,22,0.6); border:1px solid var(--line); border-radius:16px; padding:22px 24px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.card + .card{ margin-top:16px; }
.card h2{ font-size:18px; } .card h3{ font-size:15px; color:var(--muted); font-weight:500; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media(max-width:820px){ .grid2{ grid-template-columns:1fr; } }
.kv{ display:grid; grid-template-columns:160px 1fr; gap:8px 14px; font-size:14px; margin-top:6px; }
.kv dt{ color:var(--faint); } .kv dd{ margin:0; }
.rowflex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }

.scorebig{ display:flex; align-items:baseline; gap:14px; }
.scorebig .n{ font-size:56px; font-weight:200; line-height:1; }
.findings{ list-style:none; margin:14px 0 0; padding:0; }
.findings li{ padding:12px 0; border-top:1px solid var(--line); display:flex; gap:12px; align-items:flex-start; font-size:14px; }
.findings li:first-child{ border-top:0; }
.sev{ flex:none; font-size:11px; font-weight:600; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.sev-high{ background:rgba(229,100,77,0.14); color:var(--danger); } .sev-medium{ background:rgba(232,179,57,0.14); color:var(--warn); } .sev-low{ background:rgba(255,255,255,0.08); color:var(--muted); }
.fmeta{ color:var(--faint); font-size:12px; margin-top:3px; } .fquote{ color:var(--muted); font-size:12.5px; margin-top:3px; font-style:italic; }
.count-pill{ display:inline-block; font-size:11px; font-weight:600; color:var(--muted); background:rgba(255,255,255,0.06); border-radius:10px; padding:1px 8px; margin-left:6px; vertical-align:middle; }
.ffix{ margin-top:6px; padding:8px 11px; border-left:3px solid var(--accent); background:rgba(30,200,162,0.07); border-radius:4px; font-size:13px; color:var(--text); }
.ffix strong{ color:var(--accent); }
.finding-urls{ margin-top:6px; }
.finding-urls summary{ cursor:pointer; color:var(--faint); font-size:12px; }
.finding-urls ul{ list-style:none; margin:6px 0 0; padding:0 0 0 2px; }
.finding-urls li{ font-size:12px; color:var(--muted); padding:2px 0; border:0; display:block; word-break:break-word; }

/* ── Payments interpretation: verdicts, gateway tags, proportion bars, legends, "how to read" ── */
.verdict{ display:inline-block; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:6px; white-space:nowrap; }
.v-good{ background:rgba(30,200,162,0.14); color:var(--accent); }
.v-warn{ background:rgba(232,179,57,0.16); color:var(--warn); }
.v-alert{ background:rgba(229,100,77,0.16); color:var(--danger); }
.v-dim{ background:rgba(255,255,255,0.06); color:var(--muted); }
.verdict-note{ color:var(--faint); font-size:11.5px; margin-top:4px; }
.gw{ display:inline-block; font-size:11px; padding:2px 7px; border-radius:5px; margin:1px 3px 1px 0; border:1px solid transparent; }
.gw-ours{ background:rgba(30,200,162,0.12); color:var(--accent); border-color:rgba(30,200,162,0.3); }
.gw-card{ background:rgba(229,100,77,0.10); color:var(--danger); border-color:rgba(229,100,77,0.22); }
.gw-offcard{ background:rgba(232,179,57,0.10); color:var(--warn); border-color:rgba(232,179,57,0.22); }
.propwrap{ display:flex; align-items:center; gap:8px; }
.propbar{ position:relative; flex:none; width:84px; height:7px; border-radius:4px; background:rgba(255,255,255,0.07); overflow:hidden; }
.propbar.pb-alert{ background:rgba(229,100,77,0.24); }
.propbar.pb-warn{ background:rgba(232,179,57,0.16); }
.propbar.pb-good{ background:rgba(30,200,162,0.18); }
.propbar-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:4px; }
.propbar-lbl{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.readbox{ background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:8px 0 0; font-size:12.5px; color:var(--muted); line-height:1.75; }
.readbox b{ color:var(--text); }
.chart-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:10px; }
.chart-legend .key{ display:inline-flex; align-items:center; gap:6px; }
.chart-legend .sw{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.rail-block{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:6px; }
.flag-bypass{ background:rgba(229,100,77,0.16); color:var(--danger); }
/* Stripe-style chart: crosshair + floating tooltip card */
.chartwrap{ position:relative; }
.chart-hit{ cursor:crosshair; }
.chart-tip{ position:absolute; z-index:6; background:#0e1a29; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:12px; color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,0.45); pointer-events:none; min-width:150px; }
.chart-tip .ct-date{ color:var(--faint); font-size:11px; margin-bottom:6px; }
.chart-tip .ct-row{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.chart-tip .ct-sw{ width:9px; height:9px; border-radius:2px; flex:none; }
.chart-tip .ct-lbl{ color:var(--muted); }
.chart-tip .ct-val{ margin-left:auto; font-weight:600; color:var(--text); white-space:nowrap; }

/* ── Audit / activity feed ───────────────────────────────────────────────────────────── */
.feed{ list-style:none; margin:0; padding:0; }
.feed li{ display:flex; gap:14px; padding:11px 0; border-top:1px solid var(--line); font-size:14px; align-items:baseline; }
.feed li:first-child{ border-top:0; }
.feed .ev{ font-weight:500; min-width:150px; } .feed .who{ color:var(--muted); flex:1; } .feed .when{ color:var(--faint); font-size:12.5px; white-space:nowrap; }
.feed .det{ color:var(--faint); font-family:var(--font-mono); font-size:12px; }

/* ── Token gate ──────────────────────────────────────────────────────────────────────── */
.gate{ max-width:460px; margin:9vh auto 0; }
.gate .field input{ width:100%; font-family:var(--font-mono); font-size:14px; color:var(--text); padding:13px 15px; border-radius:11px; background:rgba(255,255,255,0.04); border:1px solid var(--line-2); margin-top:12px; }
.gate .field input:focus{ outline:none; border-color:var(--accent); }
.err{ color:var(--danger); font-size:13.5px; margin-top:12px; min-height:18px; } .err:empty{ min-height:0; }
.note{ color:var(--faint); font-size:12.5px; margin-top:14px; line-height:1.55; }

/* ── Utility / state ─────────────────────────────────────────────────────────────────── */
.muted{ color:var(--muted); } .center{ text-align:center; } .mt{ margin-top:14px; } .mt-lg{ margin-top:24px; } .pad{ padding:60px 0; }
.loading{ display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,0.25); border-top-color:var(--text); border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(18px); opacity:0; background:rgba(18,21,22,0.94); border:1px solid var(--line-2); padding:11px 18px; border-radius:999px; font-size:14px; z-index:90; pointer-events:none; transition:opacity .3s,transform .3s; backdrop-filter:blur(12px); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion:reduce){ .loading{ animation:none; } .toast{ transition:none; } }

/* Per-merchant payments view (transactions + daily graph) */
.sub-h{ font-size:14px; font-weight:600; color:var(--muted); margin:0; }
.txntbl{ width:100%; border-collapse:collapse; font-size:13px; }
.txntbl th{ text-align:left; color:var(--muted); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--line); }
.txntbl td{ padding:8px 10px; border-bottom:1px solid var(--line); }
.txn-charge{ color:var(--accent); } .txn-refund{ color:var(--warn); } .txn-dispute{ color:var(--danger); }
