:root { --bg:#f6f7f9; --card:#fff; --ink:#1c2128; --muted:#6b7280; --line:#e5e7eb; --brand:#1f4e79;
        --ctv:#2f80ed; --broadcast:#eb5757; --cable:#f2994a; --youtube:#c0392b; --digital:#2f80ed; }
* { box-sizing:border-box }
body { margin:0; font:14px/1.45 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg) }
a { color:var(--brand); text-decoration:none } a:hover { text-decoration:underline }
.topbar { display:flex; align-items:center; gap:24px; padding:0 20px; height:52px; background:var(--brand); color:#fff }
.topbar .brand { color:#fff; font-weight:700; font-size:17px; letter-spacing:.3px }
.topbar nav a { color:#dbe6f2; margin-right:18px; padding:16px 0; display:inline-block; border-bottom:3px solid transparent }
.topbar nav a.active, .topbar nav a:hover { color:#fff; border-color:#fff; text-decoration:none }
main { max-width:1400px; margin:0 auto; padding:20px }
h1 { font-size:22px; margin:0 0 14px } h2 { font-size:15px; margin:0 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:14px } .flash.ok { background:#e6f4ea; color:#1e5631 } .flash.err { background:#fdecea; color:#8a1c1c }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:18px }
.grid { display:grid; gap:18px } .grid-2 { grid-template-columns:repeat(auto-fit, minmax(420px,1fr)) } .grid-3 { grid-template-columns:repeat(auto-fit, minmax(300px,1fr)) }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; margin-bottom:18px }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px }
.kpi .label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px } .kpi .value { font-size:22px; font-weight:600; margin-top:2px }
.kpi .sub { font-size:12px; color:var(--muted) }
table { border-collapse:collapse; width:100%; font-size:13px }
th, td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; white-space:nowrap }
th { font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.3px; background:#fafbfc; position:sticky; top:0 }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums }
tr:hover td { background:#f3f6fa }
.scroll { overflow-x:auto }
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:16px }
.filters label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:3px }
input, select { font:inherit; padding:6px 8px; border:1px solid #cfd4da; border-radius:5px; background:#fff; min-width:120px }
button, .btn { font:inherit; padding:7px 14px; border-radius:5px; border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer }
.btn.secondary, button.secondary { background:#fff; color:var(--brand) } .btn.danger, button.danger { background:#fff; color:#b42318; border-color:#b42318 }
.btn.small, button.small { padding:3px 8px; font-size:12px }
.chip { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; color:#fff; text-transform:uppercase }
.chip.digital{background:var(--digital)} .chip.ctv{background:var(--ctv)} .chip.broadcast{background:var(--broadcast)} .chip.cable{background:var(--cable)} .chip.youtube{background:var(--youtube)}
.checks { display:flex; gap:12px; padding:6px 0 } .checks label { flex-direction:row; align-items:center; gap:4px; font-size:13px; color:var(--ink) }
.pager { display:flex; gap:12px; align-items:center; margin:12px 0; color:var(--muted) }
.muted { color:var(--muted) } .right { text-align:right }
form.inline { display:inline }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px } .form-grid label { display:flex; flex-direction:column; font-size:12px; color:var(--muted) }
canvas { max-height:320px }
.userbox { margin-left:auto; display:flex; gap:10px; align-items:center; color:#dbe6f2; font-size:13px } .userbox em { opacity:.7; font-style:normal; margin-left:4px }
.login { max-width:420px; margin:60px auto } .login h1 { text-align:center } .login .card { padding:24px } .login input { width:100%; font-size:16px; margin-bottom:12px } .login button { width:100%; font-size:15px }
.login .code { letter-spacing:.4em; text-align:center; font-size:22px }
.subnav a { margin-right:4px } .subnav a.active { font-weight:600; text-decoration:underline }
textarea { font:inherit; padding:6px 8px; border:1px solid #cfd4da; border-radius:5px }
.gauge { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px }
.gauge .tile { border-radius:8px; padding:16px; color:#fff } .gauge .tile .big { font-size:34px; font-weight:700 } .gauge .tile .label { text-transform:uppercase; font-size:12px; letter-spacing:.5px; opacity:.85 }
.gauge .broadcast { background:#eb5757 } .gauge .cable { background:#f2994a } .gauge .digital { background:#2f80ed }
.bar { height:22px; display:flex; border-radius:6px; overflow:hidden; margin:8px 0 16px } .bar span { display:block; height:100% }
.maprow { display:flex; gap:6px; align-items:center; flex-wrap:nowrap } .maprow select { min-width:220px } .maprow input[name=new_name] { min-width:200px }
td.wide { white-space:normal; min-width:260px }
.treemap { position:relative; width:100%; height:520px; border:1px solid var(--line); border-radius:6px; background:#fff; overflow:hidden }
.tm-block { position:absolute; box-sizing:border-box; border:1px solid rgba(0,0,0,.35) }
.tm-leaf { position:absolute; box-sizing:border-box; border:1px solid rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; font-size:15px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35) }
.tm-leaf.tm-other { border:0; background:rgba(255,255,255,.18) }
.tm-label { padding:2px 4px; line-height:1.15; font-weight:600 } .tm-label small { font-size:11px; font-weight:normal; opacity:.9 }
@media (max-width:700px) { .treemap { height:380px } .tm-leaf { font-size:12px } }
.blocks-split { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start } @media (max-width:1000px) { .blocks-split { grid-template-columns:1fr } }
.gauge .tile { cursor:pointer; outline:3px solid transparent; transition:outline-color .15s } .gauge .tile.active { outline-color:#1c2128 } .gauge .tile:hover { filter:brightness(1.05) }
.tm-block, .tm-leaf { cursor:pointer }
.tabs { display:flex; gap:6px; margin-bottom:10px } #panel-table tr.hl td { background:#fff8c4 }
#pane-breakdown .scroll { max-height:640px; overflow:auto }
pre.synclog { background:#0f172a; color:#cbd5e1; padding:10px 12px; border-radius:6px; font-size:12px; line-height:1.45; overflow:auto; max-height:260px; margin:0 }
.ac-wrap { position:relative; display:inline-block }
.ac-wrap .ac-input { min-width:200px }
.ac-menu { position:absolute; z-index:40; top:100%; left:0; min-width:280px; max-height:260px; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.12) }
.ac-menu a { display:block; padding:6px 10px; color:var(--ink); font-size:13px; text-decoration:none }
.ac-menu a:hover { background:#eef4fb } .ac-menu .muted { display:block; padding:6px 10px }
.targetchips { margin:-8px 0 14px } .chip-t { display:inline-block; background:#eef4fb; border:1px solid #cfe0f3; border-radius:12px; padding:2px 8px; margin-right:6px; font-size:12px }
.chip-t a { color:#b42318; margin-left:6px; text-decoration:none; font-weight:700 }
.filters .field { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:3px }
.target-pills { display:flex; flex-wrap:wrap; gap:10px }
.target-pills .pill { display:block; padding:10px 14px; border:2px solid var(--line); border-radius:8px; background:#fff; text-decoration:none; color:var(--ink); min-width:180px }
.target-pills .pill:hover { border-color:#9db8d4; text-decoration:none }
.target-pills .pill.on { border-color:var(--brand); background:#eef4fb }
.target-pills .pill b { display:block; font-size:14px } .target-pills .pill span { display:block; font-size:11px; color:var(--muted); margin-top:2px }

.pane-tabs { margin:4px 0 12px } .pane-tabs button { padding:6px 16px; font-size:14px }
.blocks-split[hidden], #pane-breakdown[hidden] { display:none }
.map-controls { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px } .map-controls > span { display:inline-flex; gap:0 } .map-controls button { border-radius:0 } .map-controls button:first-child { border-radius:4px 0 0 4px } .map-controls button:last-child { border-radius:0 4px 4px 0 }
.mapbox { position:relative; width:100%; height:520px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#f4f4f2 }
.map-msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#666; z-index:2; pointer-events:none }
.map-legend { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; margin-top:8px } .map-legend i { display:inline-block; width:14px; height:12px; margin-right:4px; vertical-align:-1px; border:1px solid rgba(0,0,0,.15) }
.maplibregl-popup-content table.tip { margin-top:4px; font-size:12px } .maplibregl-popup-content table.tip td, .maplibregl-popup-content table.tip th { padding:2px 6px }
@media (max-width:700px) { .mapbox { height:380px } }
.map-msg[hidden] { display:none }
.mapbox canvas.maplibregl-canvas { max-height:none }
.card.share { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 14px } .card.share form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 } #share-url { min-width:300px; font-family:monospace }

.tactic-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px } .tactic-row { display:inline-flex; gap:4px; align-items:center; margin:0 } .tactic-row input { min-width:180px }
table.bought tr.sect td { background:#eef2f7; font-weight:600; padding-top:8px } table.bought tr.lvl1 td { font-weight:600 } table.bought tr.lvl2 td:first-child { padding-left:22px } table.bought tr.lvl3 td:first-child { padding-left:40px } table.bought tr.lvl4 td:first-child { padding-left:58px }
table.bought select { font-size:12px; padding:2px 4px; max-width:220px } table.bought select.set { font-weight:600 }

#app-table { width:100%; table-layout:auto } #app-table td.wrap { white-space:normal; max-width:230px } #app-table .maprow { white-space:nowrap } #app-table .maprow input[name=name] { min-width:0; width:130px }
#publishers table td { white-space:normal }
.gauge.one { grid-template-columns:1fr; max-width:520px }
#tm-sel { font-size:11px; margin-left:4px }

/* phones / narrow windows: the nav collapses behind a menu button */
.menu-toggle { display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.45); color:#fff; font-size:20px; line-height:1; padding:6px 10px; border-radius:6px; cursor:pointer }
@media (max-width:1280px) {
  .topbar { flex-wrap:wrap; height:auto; min-height:52px; gap:0 12px; padding:0 14px }
  .topbar .brand { padding:14px 0 }
  .menu-toggle { display:block }
  .topbar nav, .topbar .userbox { display:none; width:100%; flex-basis:100% }
  body.menu-open .topbar nav { display:flex; flex-direction:column; padding:4px 0 8px; border-top:1px solid rgba(255,255,255,.2) }
  body.menu-open .topbar nav a { margin:0; padding:12px 4px; border-bottom:0; border-left:3px solid transparent; font-size:16px }
  body.menu-open .topbar nav a.active { border-left-color:#fff; padding-left:10px }
  body.menu-open .topbar .userbox { display:flex; margin:0; padding:10px 4px 14px; border-top:1px solid rgba(255,255,255,.2); flex-wrap:wrap }
  main { padding-left:12px; padding-right:12px }
  .filters { flex-wrap:wrap } .filters label, .filters .field { min-width:0; flex:1 1 140px } .filters select, .filters input { max-width:100% }
  .gauge { grid-template-columns:1fr } .card { overflow-x:auto }
}

.topbar nav { white-space:nowrap }
@media (max-width:1280px) { body.menu-open .topbar nav { white-space:normal } }