:root { --bg:#f6f7f9; --card:#fff; --ink:#1c2128; --muted:#6b7280; --line:#e5e7eb; --brand:#1f4e79;
        --ctv:#2f80ed; --broadcast:#eb5757; --cable:#f2994a; --youtube:#c0392b; }
* { 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.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% }