/* Adrecon design system — lifted from adrecon-prototype.html (Phase 1a) */

:root{
  color-scheme: light;
  --surface-1:#ffffff;
  --page:#eef1f2;
  --header:#0d1117;
  --ink:#0b0b0b;
  --ink-2:#52514e;
  --muted:#898781;
  --grid:#e1e0d9;
  --line:#e6e8ea;
  --border:rgba(11,11,11,0.10);
  --blue:#2a78d6;
  --blue-dark:#184f95;
  --blue-100:#cde2fb;
  --blue-150:#e6f0fd;
  --amber:#eda100;
  --amber-soft:#fbeecb;
  --good:#0ca30c;
  --good-ink:#006300;
  --good-bg:#e6f6e6;
  --warn:#fab219;
  --serious:#ec835a;
  --critical:#d03b3b;
  --crit-bg:#fbe9e9;
  --absent:#e9ebee;
  --radius:14px;
  --shadow:0 1px 2px rgba(11,11,11,.04), 0 1px 3px rgba(11,11,11,.06);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
a{color:var(--blue);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}
.tabular{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- Top bar ---------- */
header.topbar{
  background:var(--header);color:#e8eaed;
  display:flex;align-items:center;gap:28px;
  padding:0 24px;height:56px;position:sticky;top:0;z-index:50;
}
.wordmark{font-weight:800;font-size:19px;letter-spacing:-.4px;color:#fff;cursor:pointer}
.wordmark span{font-weight:400;color:#aeb4bd}
.ctx{display:flex;align-items:center;gap:7px;background:#1b222c;border:1px solid #2a2f37;color:#e8eaed;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:inherit;max-width:260px}
.ctx:hover{background:#222a35}
.ctx .caretdown{color:#8b929c;font-size:10px;flex-shrink:0}
.ctx-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-wrap{position:relative}
.ctx-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;max-width:340px;max-height:420px;overflow-y:auto;
  background:#161b22;border:1px solid #2a2f37;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.45);z-index:80;padding:6px}
.ctx-menu[hidden]{display:none !important}
.ctx-pane{display:flex;flex-direction:column;gap:2px}
.ctx-pane[hidden]{display:none !important}
.ctx-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#e8eaed;font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;text-decoration:none}
.ctx-item:hover{background:#1f2630;color:#fff;text-decoration:none}
.ctx-item.on{background:#243044;color:#fff}
.ctx-meta{font-size:11.5px;font-weight:500;color:#8b929c;white-space:nowrap}
.ctx-sep{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8b929c;padding:10px 12px 4px}
.ctx-empty{padding:14px 12px;color:#8b929c;font-size:13px}
.ctx-back{color:#aeb4bd !important}
.meter{display:flex;align-items:center;gap:10px;color:#aeb4bd;font-size:12px}
.meter.hidden{display:none}
.meter .lbl{letter-spacing:.14em;font-size:10.5px;color:#8b929c}
.meter-bar{width:150px;height:5px;border-radius:99px;background:#2a2f37;overflow:hidden}
.meter-bar > i{display:block;height:100%;width:11%;background:var(--blue);border-radius:99px}
.meter b{color:#fff;font-weight:600}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:13px;color:#aeb4bd}
.topbar .right .who{color:#e8eaed}
.topbar .right a{color:#aeb4bd}

/* ---------- Layout ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:26px 24px 80px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;gap:7px}
.crumbs a{color:var(--ink-2)}
.crumbs .sep{color:#c7c9cd}

h1.page{font-size:30px;font-weight:800;letter-spacing:-.6px;margin-bottom:5px}
.sub{color:var(--ink-2);font-size:14.5px}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* chips / pills */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:99px;background:#f1f3f5;color:var(--ink-2);white-space:nowrap}
.chip.green{background:var(--good-bg);color:var(--good-ink)}
.chip.blue{background:var(--blue-150);color:var(--blue-dark)}
.chip.amber{background:var(--amber-soft);color:#8a6100}
.chip.red{background:var(--crit-bg);color:#a52a2a}
.chip.ghost{background:#fff;border:1px solid var(--border)}
.dot{width:7px;height:7px;border-radius:99px;display:inline-block}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
a.wordmark{text-decoration:none;color:inherit}
a.wordmark:hover{text-decoration:none;color:inherit}
.wordmark span{font-weight:400;color:#aeb4bd}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:8px 14px;border-radius:9px;border:1px solid var(--border);background:#fff;color:var(--ink);cursor:pointer;transition:.12s;text-decoration:none;font-family:inherit}
.btn:hover,.btn:focus,.btn:active{background:#f6f7f8;text-decoration:none;outline:none}
a.btn,a.btn:hover,a.btn:focus,a.btn:active{text-decoration:none}
.btn.dark{background:var(--header);color:#fff;border-color:var(--header)}
.btn.dark:hover,.btn.dark:focus{background:#1b222c;color:#fff;text-decoration:none;outline:none}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover,.btn.primary:focus{background:#2266bd;color:#fff;text-decoration:none;outline:none}
.btn.sm{padding:6px 11px;font-size:12.5px}
button:focus:not(:focus-visible),.btn:focus:not(:focus-visible),.btn-primary:focus:not(:focus-visible){outline:none}
button:focus-visible,.btn:focus-visible,.btn-primary:focus-visible{outline:2px solid var(--blue-100);outline-offset:2px}

/* cards */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:20px}
.grid{display:grid;gap:16px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .k{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.stat .v{font-size:30px;font-weight:800;letter-spacing:-1px;margin-top:6px}
.stat .v.blue{color:var(--blue)}
.stat .v.amber{color:#b97e00}
.stat .v.green{color:var(--good-ink)}
.stat .foot{font-size:11.5px;color:var(--muted);margin-top:3px}

.section-t{font-size:15px;font-weight:700;margin:0 0 2px}
.section-d{font-size:12.5px;color:var(--muted);margin-bottom:14px}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:22px 0 22px;overflow-x:auto}
.tab{padding:11px 15px;font-size:13.5px;font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:7px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab .badge{background:#eef1f3;color:var(--ink-2);font-size:11px;padding:1px 7px;border-radius:99px;font-weight:700}
.tab.active .badge{background:var(--blue-150);color:var(--blue-dark)}

.hidden{display:none !important}

/* client cards (landing) */
.client-card{padding:20px 22px;cursor:pointer;transition:.12s;position:relative}
.client-card:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(42,120,214,.10)}
.client-card .name{font-size:18px;font-weight:700}
.client-card .url{font-size:13px;color:var(--blue);margin-top:1px}
.mini-stats{display:flex;gap:26px;margin-top:16px;flex-wrap:wrap}
.mini{}
.mini .mk{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.mini .mv{font-size:20px;font-weight:800;margin-top:2px}
.cc-foot{display:flex;align-items:center;gap:8px;margin-top:16px}

/* leaderboard */
.lb{width:100%;border-collapse:collapse;font-size:13.5px}
.lb th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 10px 10px}
.lb td{padding:11px 10px;border-top:1px solid var(--line);vertical-align:middle}
.lb tr:hover td{background:#fafbfc}
.lb .domain{font-weight:600}
.lb .you{background:var(--blue-150);color:var(--blue-dark);font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px;margin-left:7px}
.bar{position:relative;height:8px;border-radius:99px;background:var(--absent);overflow:hidden;min-width:120px}
.bar > i{position:absolute;left:0;top:0;height:100%;border-radius:99px}
.bar > i.top{background:var(--blue)}
.bar > i.bot{background:var(--amber)}

/* heatmap */
.heat{overflow-x:auto}
.heat table{border-collapse:separate;border-spacing:3px;font-size:12px}
.heat .adv{text-align:left;color:var(--ink-2);padding-right:12px;white-space:nowrap;font-weight:500}
.heat .time{color:var(--muted);font-size:10.5px;text-align:center;padding-bottom:2px;font-variant-numeric:tabular-nums}
.cell{width:30px;height:22px;border-radius:5px;background:var(--absent)}
.cell.top{background:var(--blue)}
.cell.bot{background:var(--amber)}
.cov{font-weight:700;padding-left:10px;font-variant-numeric:tabular-nums}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);align-items:center}

/* ad list */
.adcard{padding:0}
.adcard .h{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}
.adrow{display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.adrow:last-child{border-bottom:0}
.adrow .rank{width:22px;height:22px;border-radius:6px;background:#eef1f3;color:var(--ink-2);font-size:12px;font-weight:700;display:grid;place-items:center;flex:none}
.adrow .dom{font-weight:600;color:var(--blue)}
.adrow .desc{color:var(--ink-2);font-size:12.5px}

/* cluster accordion */
.cluster{margin-bottom:14px}
.cluster .ch{display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer}
.cluster .ch:hover{background:#fafbfc}
.cluster .caret{transition:.15s;color:var(--muted);font-size:12px}
.cluster.open .caret{transform:rotate(90deg)}
.cluster .cname{font-weight:700;font-size:15px}
.cluster .cmeta{color:var(--muted);font-size:12.5px}
.cluster .cbody{display:none;border-top:1px solid var(--line)}
.cluster.open .cbody{display:block}
.kw{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 40px;border-bottom:1px solid var(--line);font-size:13px}
.kw:last-child{border-bottom:0}
.kw:hover{background:#fafbfc}
.kw .kwn{font-weight:600;min-width:190px}
.kw .locs{color:var(--muted);font-size:12px}
.kw .spacer{margin-left:auto}

/* gaps */
.gap-item{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.gap-item:last-child{border-bottom:0}
.gap-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:16px}
.gap-ico.red{background:var(--crit-bg)}
.gap-ico.amber{background:var(--amber-soft)}
.gap-ico.blue{background:var(--blue-150)}

/* alerts */
.alert{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.alert:last-child{border-bottom:0}
.alert .tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;height:fit-content;white-space:nowrap}
.alert .tag.in{background:var(--crit-bg);color:#a52a2a}
.alert .tag.out{background:var(--good-bg);color:var(--good-ink)}
.alert .tag.mv{background:var(--amber-soft);color:#8a6100}
.alert .when{color:var(--muted);font-size:12px;margin-top:2px}

/* coverage map */
.mapwrap{position:relative;background:linear-gradient(180deg,#f4f7fa,#eef2f6);border-radius:12px;height:420px;overflow:hidden;border:1px solid var(--line)}
.pin{position:absolute;transform:translate(-50%,-50%);text-align:center}
.pin .ring{width:var(--r,40px);height:var(--r,40px);border-radius:99px;border:2px solid;display:grid;place-items:center;margin:0 auto}
.pin .lbl{font-size:10.5px;margin-top:3px;color:var(--ink-2);font-weight:600;white-space:nowrap;text-shadow:0 1px 2px #fff}
.pin .cd{width:9px;height:9px;border-radius:99px}

/* form */
.field{margin-bottom:18px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.field .hint{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:5px}
.input,textarea,select{width:100%;border:1px solid var(--border);border-radius:9px;padding:9px 11px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink)}
textarea{min-height:96px;resize:vertical}
.input:focus,textarea:focus,select:focus{outline:2px solid var(--blue-100);border-color:var(--blue)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.usage-note{display:flex;align-items:center;gap:10px;background:var(--blue-150);border:1px solid #cfe0f6;border-radius:10px;padding:12px 15px;font-size:13px;color:var(--blue-dark);margin-top:6px}

/* cluster pick */
.cluster-pick{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.cpick{border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;font-size:13px;font-weight:600;background:#fff;transition:.12s}
.cpick:hover{border-color:var(--blue)}
.cpick.sel{border-color:var(--blue);background:var(--blue-150);color:var(--blue-dark)}
.cpick small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:2px}
.cpick.sel small{color:var(--blue-dark)}

.callout{background:#fbfaf7;border:1px dashed var(--border);border-radius:10px;padding:13px 15px;font-size:12.5px;color:var(--ink-2)}
.note-new{background:var(--good-bg);border:1px solid #bfe6bf;border-radius:8px;padding:2px 8px;font-size:10.5px;font-weight:700;color:var(--good-ink);display:inline-block}

/* competitive matrix */
.matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.matrix th{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:8px 8px;text-align:center;white-space:nowrap}
.matrix th.adv,.matrix td.adv{text-align:left;white-space:nowrap;font-weight:600}
.matrix td{padding:6px 8px;border-top:1px solid var(--line);text-align:center}
.matrix tr.you td{background:var(--blue-150)}
.matrix tr.you td.adv{color:var(--blue-dark)}
.mcell{display:inline-block;min-width:46px;border-radius:6px;padding:5px 0;font-weight:700;font-variant-numeric:tabular-nums}
.lead{position:relative}
.lead::after{content:"★";color:var(--amber);font-size:11px;margin-left:3px;vertical-align:top}
.vd{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap}
.vd.ahead{background:var(--crit-bg);color:#a52a2a}
.vd.even{background:var(--amber-soft);color:#8a6100}
.vd.behind{background:var(--good-bg);color:var(--good-ink)}
.vd.low{background:#f1f3f5;color:var(--muted)}
.h2h{display:flex;gap:22px;flex-wrap:wrap;margin:4px 0 18px}
.h2h .u{font-size:12px;color:var(--muted)}
.h2h .u b{display:block;font-size:22px;color:var(--ink);font-weight:800;margin-top:2px}
.h2h .u b.win{color:var(--good-ink)}
.h2h .u b.lose{color:var(--critical)}

/* agencies */
.agency-row{display:flex;align-items:center;gap:18px;padding:18px 22px;cursor:pointer;border-bottom:1px solid var(--line)}
.agency-row:last-child{border-bottom:0}
.agency-row:hover{background:#fafbfc}
.agency-ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:18px;font-weight:800;color:#fff;flex:none}
.agency-name{font-size:16px;font-weight:700}
.agency-sub{font-size:12.5px;color:var(--muted)}
.agency-metric{text-align:right;min-width:96px}
.agency-metric .m{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.agency-metric .n{font-size:17px;font-weight:800;margin-top:1px}
.qbar{width:150px;height:6px;border-radius:99px;background:var(--absent);overflow:hidden;margin-top:6px}
.qbar > i{display:block;height:100%;border-radius:99px;background:var(--blue)}
.qbar > i.warn{background:var(--warn)}
.qbar > i.over{background:var(--critical)}

/* search + client table */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.search{flex:1;min-width:220px;position:relative}
.search input{width:100%;border:1px solid var(--border);border-radius:9px;padding:9px 12px 9px 34px;font-size:13.5px;background:#fff;font-family:inherit}
.search input:focus{outline:2px solid var(--blue-100);border-color:var(--blue)}
.search .mag{position:absolute;left:11px;top:9px;color:var(--muted)}
.ctable{width:100%;border-collapse:collapse;font-size:13.5px}
.ctable thead th{background:var(--surface-1);text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.ctable thead th:hover{color:var(--ink)}
.ctable td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.ctable tbody tr{cursor:pointer}
.ctable tbody tr:hover td{background:#fafbfc}
.ctable .cname{font-weight:600}
.ctable .curl{font-size:11.5px;color:var(--muted)}

/* Dealers list (same access as dropdown) */
.dealer-list{overflow:hidden}
.dealer-list-head,.dealer-row{display:grid;grid-template-columns:minmax(180px,2fr) minmax(110px,1fr) 90px 90px 90px 110px;gap:12px;align-items:center;padding:12px 16px}
.dealer-list-head{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);background:#fafbfc}
.dealer-row{border-bottom:1px solid var(--line);color:inherit;text-decoration:none;cursor:pointer}
.dealer-row:last-child{border-bottom:0}
.dealer-row:hover{background:#fafbfc;text-decoration:none}
.dealer-main .cname{font-weight:700;color:var(--ink);font-size:14px}
.dealer-main .curl{font-size:12px;color:var(--muted);margin-top:2px}
.dealer-num,.dealer-when,.dealer-status{font-size:13.5px;color:var(--ink-2)}
.dealer-num{font-variant-numeric:tabular-nums}
@media (max-width:800px){
  .dealer-list-head{display:none}
  .dealer-row{grid-template-columns:1fr 1fr;gap:8px 14px}
  .dealer-main{grid-column:1 / -1}
}
.usebar{width:96px;height:6px;border-radius:99px;background:var(--absent);overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px}
.usebar > i{display:block;height:100%;border-radius:99px;background:var(--blue)}
.usebar > i.warn{background:var(--warn)}
.usebar > i.over{background:var(--critical)}
.st-dot{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}

@media(max-width:820px){.stat-row{grid-template-columns:repeat(2,1fr)}.two-col,.row3{grid-template-columns:1fr}}

/* --- add-keywords builder --- */
.step-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step-n{width:26px;height:26px;border-radius:99px;background:var(--blue);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;flex:none}
.seg{display:inline-flex;background:#eef1f3;border-radius:10px;padding:3px;gap:3px;margin-bottom:16px}
.seg-btn{border:0;background:transparent;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit}
.seg-btn.active{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.lib-clusters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.lib-cl{padding:6px 13px;border:1px solid var(--border);border-radius:99px;font-size:12.5px;font-weight:600;cursor:pointer;background:#fff}
.lib-cl:hover{border-color:var(--blue)}
.lib-cl.active{background:var(--blue-150);border-color:var(--blue);color:var(--blue-dark)}
.libitem{display:flex;align-items:center;gap:11px;padding:10px 6px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13.5px}
.libitem:last-child{border-bottom:0}
.libitem:hover{background:#fafbfc}
.libitem input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
.libitem .added{margin-left:auto;font-size:11px;color:var(--good-ink);font-weight:600}
.chipwrap{display:flex;gap:8px;flex-wrap:wrap}
.kwchip{display:inline-flex;align-items:center;gap:8px;background:var(--blue-150);color:var(--blue-dark);border-radius:99px;padding:6px 11px;font-size:12.5px;font-weight:600}
.kwchip small{font-weight:400;opacity:.7}
.kwchip b,.locchip b{cursor:pointer;opacity:.55;font-weight:700}
.kwchip b:hover,.locchip b:hover{opacity:1}
.locchip{display:inline-flex;align-items:center;gap:8px;background:#eef1f3;color:var(--ink-2);border-radius:99px;padding:6px 11px;font-size:12.5px;font-weight:600}
.muted-note{color:var(--muted);font-size:12.5px}
.sum-big{font-size:34px;font-weight:800;letter-spacing:-1px;margin-top:8px;color:var(--blue);line-height:1}
.sum-eq{font-size:12.5px;color:var(--muted);margin:4px 0 16px}
.sum-rows>div{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.sum-rows>div span{color:var(--ink-2)}

/* ===== PHP app extras (login, admin, bulk, autocomplete, live) ===== */
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--blue-100);outline-offset:2px}
.btn-primary,.btn.primary{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:9px;border:1px solid var(--blue);background:var(--blue);color:#fff;
  cursor:pointer;transition:.12s;text-decoration:none;font-family:inherit}
.btn-primary:hover,.btn-primary:focus,.btn.primary:hover,.btn.primary:focus{
  background:#2266bd;border-color:#2266bd;color:#fff;text-decoration:none;outline:none}
.btn-go{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:9px;border:1px solid #bfe4bf;background:var(--good-bg);color:var(--good-ink);
  cursor:pointer;transition:.12s;font-family:inherit}
.btn-go:hover{background:#d7efd7}
.btn-stop{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:9px;border:1px solid var(--border);background:#fff;color:var(--ink-2);
  cursor:pointer;transition:.12s;font-family:inherit}
.btn-stop:hover{background:#f6f7f8}
.btn-danger{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:9px;border:1px solid var(--border);background:#fff;color:var(--critical);
  cursor:pointer;transition:.12s;font-family:inherit}
.btn-danger:hover,.btn-danger:focus{background:var(--crit-bg);border-color:var(--critical);color:var(--critical);outline:none}
button.btn,button.btn-primary,button.btn-danger,button.btn-go,button.btn-stop{appearance:none;-webkit-appearance:none}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acts form{display:inline}
.tabs a.tab,.tabs a{padding:11px 15px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:7px;text-decoration:none}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on,.tabs a.active,.tab.on,.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.tabs a.on .badge,.tabs a.active .badge,.tab.active .badge{background:var(--blue-150);color:var(--blue-dark)}
.badge{background:#eef1f3;color:var(--ink-2);font-size:11px;padding:1px 7px;border-radius:99px;font-weight:700}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:99px;background:#f1f3f5;color:var(--ink-2);white-space:nowrap}
.pill-run{background:var(--good-bg);color:var(--good-ink)}
.pill-idle{background:#f1f3f5;color:var(--ink-2)}
.pill-err{background:var(--crit-bg);color:#a52a2a}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:99px;background:#f1f3f5;color:var(--ink-2)}
.flash{padding:13px 17px;border-radius:9px;margin-bottom:18px;font-size:13.5px}
.flash-ok{background:var(--good-bg);color:var(--good-ink)}
.flash-err{background:var(--crit-bg);color:#a52a2a}
.warn{background:var(--amber-soft);color:#8a6100;padding:13px 17px;border-radius:9px;font-size:13px;margin-bottom:18px;line-height:1.6}
.notice{background:var(--blue-150);color:var(--blue-dark);padding:15px 18px;border-radius:var(--radius);margin-bottom:18px;font-size:13.5px;line-height:1.6}
.notice strong{display:block;font-size:14.5px;margin-bottom:2px}
label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;border:1px solid var(--border);border-radius:9px;padding:9px 11px;font-size:13.5px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue-100);border-color:var(--blue)}
textarea{font-family:var(--mono,ui-monospace,monospace);font-size:13px;line-height:1.7;resize:vertical;min-height:96px}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer;margin:0;flex-shrink:0}
.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;align-items:end}
.withsuffix{display:flex;align-items:center;gap:9px}
.withsuffix input{width:80px}
.withsuffix span{font-size:13px;color:var(--muted);white-space:nowrap}
.formfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;margin-top:18px;border-top:1px solid var(--line)}
.advanced{border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.advanced summary{cursor:pointer;font-size:13px;color:var(--blue);font-weight:600;list-style:none}
.advanced summary::-webkit-details-marker{display:none}
.hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.55}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:26px 0 12px;flex-wrap:wrap}
.panel{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-pad{padding:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat-label{font-size:12px;color:var(--muted);margin:0}
.stat-value{font-size:30px;font-weight:800;letter-spacing:-1px;margin:6px 0 0;line-height:1.1}
.stat-note{font-size:11.5px;color:var(--muted);margin:3px 0 0}
.stat-ok{color:var(--good-ink)}.stat-warn{color:#b97e00}.stat-mute{color:var(--muted)}
.empty{color:var(--muted);font-size:13px;padding:16px 0}
.topnav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:8px}
.topnav a{color:#aeb4bd;font-size:13px;padding:6px 10px;border-radius:8px}
.topnav a:hover{color:#fff;background:#1b222c;text-decoration:none}
.topnav a.on{color:#fff;background:#1b222c}
.agency-band{padding:10px 14px;background:#f6f7f8;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-2)}
.sitebar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.site-tab{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;border:1px solid var(--border);background:#fff;font-size:13px;color:var(--ink-2)}
.site-tab:hover{text-decoration:none;border-color:var(--blue);color:var(--ink)}
.site-tab.on{background:var(--header);border-color:var(--header);color:#fff}
.site-n{background:#eef1f3;color:var(--ink-2);padding:1px 7px;border-radius:99px;font-size:11px}
.site-tab.on .site-n{background:#2a3240;color:#cfd6de}
.bulkbar[hidden]{display:none}
.bulkbar{position:sticky;top:66px;z-index:20;display:flex;align-items:center;gap:9px;background:var(--header);color:#fff;border-radius:var(--radius);padding:11px 15px;margin-bottom:12px;flex-wrap:wrap;box-shadow:0 6px 20px rgba(11,11,11,.18)}
.bulkcount{font-size:13px;font-weight:600;margin-right:4px}
.bulkbar button,.bulkbar select{background:transparent;border:1px solid #2a3240;color:#fff;padding:6px 12px;font-size:12.5px;border-radius:8px;width:auto}
.bulkbar button:hover{background:#1b222c}
.bulkbar .btn-go{background:var(--good-bg);border-color:var(--good-bg);color:var(--good-ink)}
.bulkbar .btn-danger{color:#ffb4aa;border-color:#5a2a26}
.group{margin-bottom:0}
.group-head{display:flex;align-items:center;gap:12px;padding:12px 18px 8px 40px}
.group-title{font-size:14px;font-weight:700}
.group-count{font-size:12px;color:var(--muted)}
.listhead,.row-sel{display:grid;grid-template-columns:20px minmax(0,1fr) 70px 140px 82px 70px 20px;gap:12px;align-items:center}
.listhead{padding:8px 18px 8px 40px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.row-sel{padding:10px 18px 10px 40px;border-top:1px solid var(--line)}
.row-sel:hover{background:#fafbfc}
.loc{font-size:13.5px;font-weight:600;color:var(--blue)}
.loc-meta{color:var(--muted);font-size:12px;display:block;margin-top:1px}
.cell-num{font-size:12.5px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.row-go{text-align:center;font-size:19px;color:var(--muted)}
.row-go:hover{color:var(--blue);text-decoration:none}
.ends{font-size:11.5px;color:var(--muted)}
.ends-soon{font-size:11.5px;color:#8a6100;font-weight:600}
.kw .spacer{margin-left:auto}
.cluster .cmeta.spacer{margin-left:auto}
.range,.dev{display:inline-flex;background:#fff;border:1px solid var(--border);border-radius:9px;overflow:hidden;box-shadow:var(--shadow)}
.range a,.dev a{padding:7px 14px;font-size:13px;color:var(--ink-2);border-right:1px solid var(--border);font-weight:600}
.range a:last-child,.dev a:last-child{border-right:0}
.range a.on,.dev a.on{background:var(--header);color:#fff}
.range a:hover,.dev a:hover{text-decoration:none;background:#f6f7f8}
.range a.on:hover,.dev a.on:hover{background:#1b222c}
.dev a.off{color:var(--muted)}
.ac-list{display:none;position:absolute;z-index:40;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:9px;max-height:290px;overflow-y:auto;box-shadow:0 8px 24px rgba(11,11,11,.12)}
.ac-item{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 12px;cursor:pointer;font-size:13.5px;border-bottom:1px solid var(--line)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.is-active{background:var(--blue-150)}
.ac-type{font-size:11px;color:var(--muted);white-space:nowrap}
.is-live{position:relative;padding-left:22px}
.is-live::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--blue);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.login{max-width:420px;margin:0 auto;padding:0 24px;width:100%}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(42,120,214,.10), transparent 55%),
    var(--page)}
.login-card{padding:36px 32px 32px;box-shadow:0 8px 28px rgba(11,11,11,.08), var(--shadow);border-radius:var(--radius)}
.login-logo{display:block;text-align:center;font-size:34px;font-weight:800;letter-spacing:-.8px;
  color:var(--ink);margin:0 0 22px;line-height:1;text-decoration:none}
.login-logo span{font-weight:400;color:var(--muted)}
.login-logo:hover{text-decoration:none;color:var(--ink)}
.login-title{margin:0 0 8px;font-size:26px;font-weight:800;letter-spacing:-.6px;text-align:center;color:var(--ink)}
.login-sub{margin:0 0 22px;font-size:13.5px;line-height:1.45;color:var(--muted);text-align:center}
.login-form{display:grid;gap:14px}
.login-form .field{display:grid;gap:6px;margin-bottom:0}
.login-form .field label{margin-bottom:0;font-size:12.5px;font-weight:600;color:var(--ink)}
.login-form .input,
.login-form select.input{padding:10px 12px;border-radius:9px;border:1px solid var(--border);background:#fff;font-size:13.5px}
.login-form .input:focus,
.login-form select.input:focus{outline:2px solid var(--blue-100);border-color:var(--blue)}
.login-actions{display:flex;justify-content:center;padding-top:6px}
.login-actions .btn.primary{min-width:160px;justify-content:center;padding:11px 22px;font-size:14px;border-radius:9px}
.login .flash{margin-bottom:14px}
.login-foot{margin:20px 0 0;text-align:center;font-size:13.5px;color:var(--ink-2)}
.login-foot a{color:var(--blue);font-weight:600;text-decoration:none}
.login-foot a:hover{text-decoration:underline}

/* Sign up page (signup.php) — own card */
.signup-card{padding:36px 32px 32px;box-shadow:0 8px 28px rgba(11,11,11,.08), var(--shadow);border-radius:var(--radius)}
.signup-title{margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ink);text-align:left}
.signup-title-center{text-align:center;font-size:26px;letter-spacing:-.6px;margin-bottom:8px}
.signup-sub{margin:0 0 18px;font-size:13px;line-height:1.45;color:var(--muted);text-align:left}
.signup-sub-center{text-align:center;font-size:13.5px;margin-bottom:22px}
.signup-form{display:grid;gap:16px}
.signup-form .field{display:grid;gap:6px;margin-bottom:0}
.signup-form .field label{margin-bottom:0;font-size:12.5px;font-weight:600;color:var(--ink)}
.signup-form .opt{font-weight:500;color:var(--muted);font-size:12px}
.signup-form .hint{margin:0;font-size:11.5px;color:var(--muted);line-height:1.4}
.signup-form .input,
.signup-form select.input{padding:10px 12px;border-radius:9px;border:1px solid var(--border);background:#fff;font-size:13.5px;width:100%}
.signup-form .input:focus,
.signup-form select.input:focus{outline:2px solid var(--blue-100);border-color:var(--blue)}
.signup-clients{min-height:120px;padding:8px 10px}
.signup-actions{display:flex;justify-content:flex-start;padding-top:4px}
.signup-actions-center{justify-content:center}
.signup-actions .btn.primary{min-width:160px;justify-content:center;padding:11px 22px;font-size:14px;border-radius:9px}
.signup-foot{margin:22px 0 0;text-align:center;font-size:13.5px;color:var(--ink-2)}
.signup-foot a{color:var(--blue);font-weight:600;text-decoration:none}
.signup-foot a:hover{text-decoration:underline}
.builder-grid{display:grid;grid-template-columns:1fr 340px;align-items:start;gap:20px}
.builder-stack{display:flex;flex-direction:column;gap:18px}
.builder-summary{position:sticky;top:76px}
.spy-banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0 22px;background:linear-gradient(90deg,#eef4fd,#fbfcfe);border:1px solid #d8e4f7;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.spy-card{margin:16px 0 22px;padding:18px 20px;background:linear-gradient(90deg,#eef4fd,#fbfcfe);border-color:#d8e4f7}
.spy-card-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.spy-ico{font-size:22px;line-height:1;flex:none;margin-top:2px}
.spy-card-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spy-card-row .input{flex:1;min-width:220px}
.spy-card-row .btn.primary{flex:none;white-space:nowrap}
.spy-note{margin:12px 0 0;padding:10px 12px;border-radius:9px;background:#fff;border:1px solid #d8e4f7;color:var(--ink-2);font-size:13px;line-height:1.45}
.spy-note.is-ok{border-color:#b7e0b7;background:var(--good-bg);color:var(--good-ink)}
.spy-note.is-err{border-color:#f0c0c0;background:var(--crit-bg);color:#a52a2a}
.matrix-wrap{overflow-x:auto}
table.access-matrix{border-collapse:collapse;font-size:13.5px;min-width:400px}
table.access-matrix th,table.access-matrix td{border-bottom:1px solid var(--line)}
.mx-corner{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:0 16px 12px 0}
.mx-person{padding:0 6px 12px;vertical-align:bottom;height:104px;width:44px}
.mx-person span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;font-weight:600;white-space:nowrap}
.mx-client{padding:12px 16px 12px 0;min-width:200px}
.mx-client a{color:var(--ink);font-weight:600}
.mx-meta{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.mx-cell{text-align:center;padding:12px 6px}
.mx-cell label{display:flex;align-items:center;justify-content:center;margin:0;padding:6px;border-radius:6px;cursor:pointer}
.mx-cell label:hover{background:var(--blue-150)}

/* Admin client access — aligned header + row grids */
.access-list{font-size:13.5px;overflow:visible !important;position:relative;z-index:1}
.access-list-head,.access-row{
  display:grid;
  grid-template-columns:minmax(140px,1.1fr) minmax(200px,1.8fr) minmax(160px,1.3fr) 80px 84px;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  box-sizing:border-box;
  width:100%;
}
.access-list-head{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;background:#fafbfc;border-bottom:1px solid var(--line);position:relative;z-index:0}
.access-list-head > span:nth-child(4),
.access-list-head > span:nth-child(5){text-align:center}
.access-row{border-bottom:1px solid var(--line);position:relative;overflow:visible;z-index:1;background:var(--surface-1)}
.access-row.is-ms-open{z-index:200}
.access-save-fields{display:none !important}
.access-col-user{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.access-user{font-weight:700;color:var(--ink);display:inline}
.access-meta{font-size:12px;color:var(--muted);display:inline;margin-left:6px}
.access-meta::before{content:"· ";color:var(--muted)}
.access-clients{min-width:0;position:relative}
.ms-dropdown{position:relative;width:100%}
.ms-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;background:#fff;position:relative;z-index:1}
.ms-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--ink)}
.ms-caret{color:var(--muted);flex:none;font-size:11px}
.ms-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:300;max-height:220px;overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(11,11,11,.18);padding:6px}
.ms-panel[hidden]{display:none !important}
.ms-option{display:flex;align-items:center;gap:8px;margin:0;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink);background:#fff;border:0;width:100%;text-align:left;font-family:inherit}
.ms-option:hover{background:#f3f5f7}
.ms-option.is-on{background:var(--blue-150);color:var(--blue-dark)}
.ms-option input{margin:0;flex:none}
.ms-dropdown.is-open{z-index:300}
.access-agency-cell{min-width:0;position:relative}
.access-col-btn{width:100%;justify-content:center;padding-left:6px;padding-right:6px;box-sizing:border-box;white-space:nowrap;min-width:0}
.access-del-form{margin:0;display:block;min-width:0}
.access-del-form .access-col-btn{width:100%}
.access-edit-row{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:nowrap}
.access-edit-form{display:flex;gap:10px;align-items:center;flex:1;flex-wrap:nowrap;min-width:0}
.access-edit-form .access-edit-name{flex:1;min-width:160px;max-width:none}
.access-edit-actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex:none}
.access-edit-del{margin:0;flex:none}
.agency-add-form{display:flex;gap:12px;align-items:end}
.agency-add-field{flex:1;min-width:0}
.agency-add-field label{display:block;margin-bottom:6px}
.agency-add-form .btn{flex:none;margin-left:auto}
.add-user-form,.add-client-form{display:flex;gap:12px;align-items:end;flex-wrap:nowrap}
.add-user-form .field,.add-client-form .field{flex:1;min-width:0;margin:0}
.add-user-form .field label,.add-client-form .field label{display:block;margin-bottom:6px}
.add-user-form .add-user-submit,.add-client-form .add-client-submit{flex:none;white-space:nowrap;align-self:end}
@media (max-width:900px){
  .add-user-form,.add-client-form{flex-wrap:wrap}
  .add-user-form .field,.add-client-form .field{min-width:calc(50% - 12px)}
}

/* Clients edit list — same aligned grid */
.client-edit-list{font-size:13.5px;overflow:visible !important;position:relative;z-index:1}
.client-edit-head,.client-edit-row{
  display:grid;
  grid-template-columns:minmax(140px,1.4fr) minmax(150px,1.3fr) minmax(140px,1.2fr) 100px 88px 88px 92px;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  box-sizing:border-box;
  width:100%;
}
.client-edit-head{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;background:#fafbfc;border-bottom:1px solid var(--line)}
.client-edit-head > span:nth-child(n+4){text-align:center}
.client-edit-row{border-bottom:1px solid var(--line);position:relative;overflow:visible;z-index:1;background:var(--surface-1)}
.client-edit-row.is-ms-open{z-index:200}
.client-edit-row > .input{width:100%;min-width:0;max-width:none}
.client-edit-kw{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:center}
@media (max-width:900px){
  .access-list-head,.client-edit-head{display:none}
  .access-row,.client-edit-row{display:flex;flex-wrap:wrap}
  .access-col-btn{width:auto}
  .access-edit-row,.access-edit-form{flex-wrap:wrap}
}
.assign-list{display:flex;flex-wrap:wrap;gap:8px}
.assign-item{display:flex;align-items:center;gap:8px;margin:0;padding:6px 12px;border:1px solid var(--border);border-radius:99px;font-size:13px;cursor:pointer;background:#fff;font-weight:400}
.row{padding:12px 18px;border-top:1px solid var(--line)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.num,.tabular{font-variant-numeric:tabular-nums}
.nil-box{display:flex;align-items:flex-start;gap:14px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:17px 19px;margin-bottom:18px;box-shadow:var(--shadow)}
.meter-track{position:relative;display:block;width:150px;height:5px;border-radius:99px;background:#2a2f37;overflow:hidden}
.meter-track i,.meter-bar > i{position:absolute;left:0;top:0;height:100%;background:var(--blue);border-radius:99px}
.meter-bar{position:relative}
.meter-track u{position:absolute;top:0;height:100%;border-radius:99px;background:repeating-linear-gradient(45deg,#d03b3b,#d03b3b 3px,#7d2626 3px,#7d2626 6px)}
.meter-num,.meter b{color:#fff;font-weight:600}
.meter-proj{color:#8b929c}
.meter-warn{color:#fab219;font-weight:600}
.meter-alert{background:#5a2a26;color:#ffb4aa;padding:4px 11px;border-radius:99px;font-weight:600;font-size:12px}
.meter-label{letter-spacing:.14em;font-size:10.5px;color:#8b929c}
@media(max-width:980px){.builder-grid{grid-template-columns:1fr}.builder-summary{position:static}.stats,.stat-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.stats,.stat-row{grid-template-columns:1fr}.listhead{display:none}.row-sel{grid-template-columns:20px 1fr;gap:8px}}