:root{
  --bg:#07111f;--card:#0e1b2e;--text:#f7fbff;--muted:#8fa4bc;
  --line:rgba(255,255,255,.08);--green:#35e58a;--blue:#59a8ff;
  --yellow:#ffc857;--red:#ff6b7a
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top left,rgba(53,229,138,.09),transparent 30%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
.page{max-width:1500px;margin:auto;padding:32px 28px 48px}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}
h1{font-size:42px;line-height:1;margin:7px 0 8px;letter-spacing:-.04em}
h2{margin:5px 0 0;font-size:22px}.topbar p{margin:0;color:var(--muted)}
.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--green)}
.top-actions{display:flex;gap:10px;align-items:center}
.status{font-size:13px;font-weight:750;padding:9px 12px;border:1px solid var(--line);border-radius:999px}.warn{color:var(--yellow)}.ok{color:var(--green)}.error{color:var(--red)}
button{border:1px solid var(--line);background:#162840;color:#fff;border-radius:11px;padding:10px 14px;font-weight:750;cursor:pointer}
.card{background:linear-gradient(180deg,#101f34,#0c1a2c);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 55px rgba(0,0,0,.2)}
.toolbar{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.periods{display:flex;gap:6px}.period{background:transparent;color:var(--muted)}.period.active{background:#1b304c;color:#fff}
.updated{color:var(--muted);font-size:12px}.updated strong{color:#fff}
.section-head{margin:0 2px 14px}.grid{display:grid;gap:14px}.kpis{grid-template-columns:repeat(4,1fr)}
.metric{padding:19px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between}
.metric span{color:var(--muted);font-size:13px;font-weight:700}.metric strong{font-size:30px;letter-spacing:-.04em}.metric small{color:#6f859d}.metric.compact{min-height:96px}.metric.compact strong{font-size:25px}
.metric.featured{border-color:rgba(53,229,138,.25);background:linear-gradient(180deg,#123039,#0d1d2d)}
.content{grid-template-columns:1.6fr .8fr;margin-top:14px}.chart-card,.funnel-card{padding:20px;min-height:390px}
.card-head h3,.funnel-card h3{margin:5px 0 0}.empty{height:280px;display:grid;place-items:center;color:#667d95}
#trendChart{display:none;width:100%;height:285px;margin-top:20px}
.funnel{display:grid;gap:24px;margin-top:32px}.funnel label{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:8px}.funnel b{color:#fff}
.funnel i{display:block;height:10px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}.funnel em{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:99px;width:0}
.campaigns{margin-top:28px}.table-card{overflow:hidden}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;min-width:760px}th,td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:right;font-size:13px}th:first-child,td:first-child{text-align:left}th{color:#7890aa;font-size:11px;text-transform:uppercase}.placeholder{text-align:center!important;color:#637991}
footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#60758d;font-size:11px;margin:22px 4px 0}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.content{grid-template-columns:1fr}}
@media(max-width:650px){.page{padding:20px 14px}.topbar{align-items:flex-start;flex-direction:column}h1{font-size:33px}.toolbar{align-items:stretch;flex-direction:column;gap:12px}.kpis{grid-template-columns:1fr 1fr}.metric{padding:15px}.metric strong{font-size:24px}}
@media(max-width:420px){.kpis{grid-template-columns:1fr}}