:root{
  --bg:#0f1420; --panel:#161d2c; --panel2:#1d2637; --line:#28324a;
  --txt:#e8edf6; --muted:#8b97ad; --accent:#4a6cf7;
  --pos:#2fbf87; --neg:#e06666;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--txt);font-size:14px}

.topbar{display:flex;align-items:baseline;gap:16px;padding:18px 24px;background:linear-gradient(90deg,#141b2b,#1a2540);border-bottom:1px solid var(--line)}
.brand{font-size:19px;font-weight:700}
.brand span{color:var(--accent)}
.src{color:var(--muted);font-size:12px}
.admin-link{margin-left:auto;color:var(--accent);text-decoration:none;font-size:13px;font-weight:600;border:1px solid var(--line);padding:7px 13px;border-radius:8px;white-space:nowrap}
.admin-link:hover{border-color:var(--accent)}

.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;padding:18px 24px}
.controls label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
.controls input,.controls select{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:8px 10px;font-size:14px;min-width:150px}
.quick{display:flex;gap:6px}
.quick button{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:8px 12px;cursor:pointer}
.quick button:hover{color:var(--txt);border-color:var(--accent)}
.quick button.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary{background:var(--accent);border:none;color:#fff;border-radius:8px;padding:10px 20px;font-weight:600;cursor:pointer}
button.primary:disabled{opacity:.6;cursor:default}
.viewtoggle{display:flex;gap:0;margin-left:auto;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.viewtoggle button{background:var(--panel2);border:none;color:var(--muted);padding:9px 16px;cursor:pointer;font-size:13px}
.viewtoggle button.active{background:var(--accent);color:#fff;font-weight:600}

.notice{margin:0 24px 8px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.5}
.notice.warn{background:#2a2513;border:1px solid #6b5a1e;color:#f0d38a}
.notice.error{background:#2c1719;border:1px solid #7a2c30;color:#f0a0a4}
.hidden{display:none}

.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding:8px 24px 4px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.kpi.profit{border-color:var(--accent)}
.k-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.k-val{font-size:22px;font-weight:700}
.k-val.pos{color:var(--pos)} .k-val.neg{color:var(--neg)}

.chartwrap{padding:16px 24px}
.chartwrap canvas{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}

.tablewrap{padding:8px 24px 32px}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--panel2);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;user-select:none;white-space:nowrap}
th:hover{color:var(--txt)}
th.sorted{color:var(--accent)}
th.sorted::after{content:" ▼";font-size:10px} th.sorted.asc::after{content:" ▲"}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel2)}
tfoot tr.totrow td{background:var(--panel2);border-top:2px solid var(--accent);font-weight:700;font-size:13px;padding:12px 14px}
tfoot tr.totrow td.pos,tfoot tr.totrow td .pos{color:var(--pos)} tfoot tr.totrow td .neg{color:var(--neg)}

/* ROI colour bands (row background) */
/* row bands use the SAME hues as the legend chips (r-red…r-dgreen below) */
#tbl tbody tr.r-red{background:rgba(224,102,102,.22);box-shadow:inset 3px 0 0 #e06666}
#tbl tbody tr.r-yellow{background:rgba(232,195,74,.20);box-shadow:inset 3px 0 0 #e8c34a}
#tbl tbody tr.r-lgreen{background:rgba(138,212,184,.18);box-shadow:inset 3px 0 0 #8ad4b8}
#tbl tbody tr.r-mgreen{background:rgba(47,191,135,.22);box-shadow:inset 3px 0 0 #2fbf87}
#tbl tbody tr.r-dgreen{background:rgba(20,140,100,.30);box-shadow:inset 3px 0 0 #148c64}
#tbl tbody tr[class^="r-"]:hover,#tbl tbody tr[class*=" r-"]:hover{filter:brightness(1.18)}

.roi-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 24px 10px;color:var(--muted);font-size:12px}
.roi-legend .lg{padding:3px 10px;border-radius:6px;color:#0f1420;font-weight:600;cursor:pointer;user-select:none;transition:transform .06s,box-shadow .06s}
.roi-legend .lg:hover{transform:translateY(-1px)}
.roi-legend .lg.sel{outline:2px solid var(--txt);outline-offset:1px;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.roi-legend .lg-clear{cursor:pointer;color:var(--muted);font-size:12px;border:1px solid var(--line);border-radius:6px;padding:2px 9px}
.roi-legend .lg-clear:hover{color:var(--txt);border-color:var(--accent)}
.lg.r-red{background:#e06666;color:#fff}.lg.r-yellow{background:#e8c34a}
.lg.r-lgreen{background:#8ad4b8}.lg.r-mgreen{background:#2fbf87}.lg.r-dgreen{background:#148c64;color:#fff}
.cname{font-weight:600}
.cid{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
td.sites{color:var(--muted);font-size:12px}
.num.pos{color:var(--pos)} .num.neg{color:var(--neg)}
.muted{color:var(--muted)}
.empty{padding:28px;text-align:center;color:var(--muted)}

.foot{padding:0 24px 30px;color:var(--muted);font-size:12px}

/* winning creatives */
.admin-link.activetab{background:var(--accent);border-color:var(--accent);color:#fff}
button.winbtn{background:var(--panel2);border:1px solid #2f7a5a;color:#8ad4b8;border-radius:7px;padding:4px 10px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}
button.winbtn:hover{background:rgba(47,191,135,.15)}
button.winbtn.saved{background:rgba(47,191,135,.22);cursor:default}
#winners-view{padding:18px 24px 40px}
.win-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.win-head h2{margin:0;font-size:18px}
.win-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.win-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.win-card[class*="r-"]{box-shadow:inset 4px 0 0 var(--accent)}
.win-thumb{background:var(--panel2);aspect-ratio:1.91/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.win-thumb img{width:100%;height:100%;object-fit:cover}
.win-thumb .noimg{color:var(--muted);font-size:12px}
.win-thumb{position:relative}
.dlbtn{position:absolute;bottom:8px;right:8px;background:rgba(15,20,32,.82);border:1px solid var(--line);color:#fff;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:600;text-decoration:none}
.dlbtn:hover{background:var(--accent);border-color:var(--accent)}
.win-body{padding:12px 14px;display:flex;flex-direction:column;gap:5px}
.win-name{font-weight:700;font-size:14px;line-height:1.3}
.win-metrics{font-size:13px;font-weight:600}
.win-metrics .pos{color:var(--pos)} .win-metrics .neg{color:var(--neg)}
.win-url{font-size:12px;color:var(--accent);text-decoration:none;word-break:break-all}
.win-copy{font-size:12px;color:var(--muted);line-height:1.4}
.win-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:11px}
.btn.danger.mini{background:transparent;border:1px solid #7a2c30;color:#f0a0a4;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px}

@media(max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}}

/* campaign editor */
button.mng{background:var(--panel2);border:1px solid var(--line);color:var(--accent);border-radius:7px;padding:5px 11px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}
button.mng:hover{border-color:var(--accent)}
button.expbtn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:5px 11px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}
button.expbtn:hover{border-color:var(--accent)}
td.acts{white-space:nowrap;text-align:right}
tr.detail>td{background:var(--bg);padding:10px 14px}
.subtbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.subtbl th,.subtbl td{padding:7px 12px;border-bottom:1px solid var(--line);font-size:12px}
.subtbl th{background:var(--panel2);color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-size:11px}
.subtbl tr.as td{font-weight:600}
.subtbl tr.adr td{color:var(--muted)}
.subtbl td.ind{padding-left:26px}
.subtbl td.num.pos{color:var(--pos)} .subtbl td.num.neg{color:var(--neg)}
.edit-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.edit-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:100%;max-width:520px}
.edit-hd{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);font-size:15px}
.edit-hd .ex{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer}
.edit-bd{padding:16px 18px}
.esec{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px;background:var(--panel2)}
.esec .eh{font-weight:700;font-size:13px;margin-bottom:8px}
.er{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0}
.er span{color:var(--muted);font-size:13px}
.er input,.er select{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:7px 10px;font-size:14px;width:150px;text-align:right}
.er select{text-align:left}
.note{color:var(--muted);font-size:12px;margin-top:6px}
.ea{display:flex;align-items:center;gap:14px;margin-top:6px}
.ea .btn.primary{background:var(--accent);border:none;color:#fff;border-radius:8px;padding:10px 20px;font-weight:600;cursor:pointer}
.ea .btn.primary:disabled{opacity:.6}
.ea .btn.del{background:transparent;border:1px solid #7a2c30;color:#f0a0a4;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer}
.ea .btn.del:hover{background:rgba(224,102,102,.12)}
.ea .btn.del:disabled{opacity:.6}
.ok-t{color:var(--pos);font-weight:600;font-size:13px}
.msg.err{background:#2c1719;border:1px solid #7a2c30;color:#f0a0a4;padding:8px 12px;border-radius:8px;font-size:13px}