/* PulsePilot — palette: Deep Navy #0B132B, Facebook Blue #1877F2, Electric Blue #00B2FF,
   Orange #FF8A00, White, Light Gray #E6EDF5. Dark by default; light via [data-theme=light]. */
:root {
  --navy:#0B132B; --surface:#121c33; --surface2:#18233f; --line:#243150;
  --fb:#1877F2; --electric:#00B2FF; --orange:#FF8A00;
  --fg:#eaf1fb; --muted:#8ea0bf; --good:#31c48d; --bad:#f0616d;
}
:root[data-theme="light"] {
  --navy:#eef2f8; --surface:#ffffff; --surface2:#f5f8fc; --line:#dbe3ef;
  --fb:#1877F2; --electric:#0093d6; --orange:#e07a00;
  --fg:#0B132B; --muted:#5c6d88; --good:#1f9d63; --bad:#d64550;
}
* { box-sizing:border-box; }
html, body { overflow-x:hidden; }
body { margin:0; background:var(--navy); color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
h2 { font-size:.95rem; font-weight:600; margin:0; color:var(--fg); letter-spacing:.02em; }
.muted { color:var(--muted); font-weight:400; }
.btn { cursor:pointer; border:0; border-radius:8px; padding:.45rem .8rem; font-weight:600; background:var(--fb); color:#fff; font-size:.85rem; }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--muted); }
.btn:hover { filter:brightness(1.08); }

/* ---- Login ---- */
.login-body { display:grid; place-items:center; min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(0,178,255,.14), transparent 60%), var(--navy); }
.login-card { background:var(--surface); padding:2rem 2.25rem 2rem; border:1px solid var(--line);
  border-radius:16px; width:min(94vw,520px); box-shadow:0 20px 60px rgba(0,0,0,.35); border-top:3px solid var(--fb); text-align:center; }
.login-logo { display:block; width:auto; height:250px; max-width:100%; margin:0 auto 1.5rem; }
.login-card label { display:block; margin-bottom:.85rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-align:left; }
.login-card input { width:100%; margin-top:.3rem; padding:.62rem .7rem; background:var(--navy); border:1px solid var(--line); border-radius:9px; color:var(--fg); font-size:1rem; }
.login-card input:focus { outline:none; border-color:var(--electric); box-shadow:0 0 0 3px rgba(0,178,255,.18); }
.login-card button { width:100%; margin-top:.5rem; padding:.7rem; background:var(--fb); color:#fff; border:0; border-radius:9px; font-weight:600; font-size:.95rem; cursor:pointer; }
.error { color:var(--bad); font-size:.85rem; margin:0 0 1rem; text-align:center; }
.ok-msg { color:var(--good); font-size:.85rem; margin:0 0 1rem; text-align:center; }
.alert-chip { background:var(--orange); color:#2a1400; }
.mini-btn { padding:.25rem .55rem; font-size:.72rem; }

/* ---- Top bar ---- */
.topbar { display:flex; align-items:center; gap:1rem; padding:.5rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.topbar .logo { height:150px; width:auto; max-width:100%; }
.topbar .spacer { flex:1; }
.topbar .refreshed, .topbar .whoami { color:var(--muted); font-size:.8rem; }

/* ---- Filters ---- */
.filters { display:flex; flex-wrap:wrap; gap:.9rem; align-items:end; padding:.8rem 1.25rem; background:var(--surface2); border-bottom:1px solid var(--line); }
.filters label { display:flex; flex-direction:column; gap:.25rem; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.filters select, .filters input, .mini, .prod-search { padding:.45rem .6rem; background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:8px; font-size:.85rem; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; align-self:end; }
.seg button { background:var(--surface); color:var(--muted); border:0; padding:.45rem .8rem; cursor:pointer; font-size:.82rem; }
.seg button.active { background:var(--fb); color:#fff; }
.seg.small button { padding:.3rem .6rem; font-size:.75rem; }

/* ---- Layout ---- */
.wrap { padding:1.1rem 1.25rem; max-width:1440px; margin:0 auto; display:flex; flex-direction:column; gap:1.1rem; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; min-width:0; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.6rem; }
.cols { display:grid; grid-template-columns:1.6fr 1fr; gap:1.1rem; min-width:0; }
@media (max-width:960px){ .cols { grid-template-columns:1fr; } }

/* ---- KPI bar ---- */
.kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; }
@media (max-width:1100px){ .kpis { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .kpis { grid-template-columns:repeat(2,1fr); } }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.7rem .85rem; }
.kpi-label { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.kpi-today { font-size:1.3rem; font-weight:700; margin:.1rem 0; font-variant-numeric:tabular-nums; }
.delta { font-size:.74rem; font-weight:600; color:var(--muted); }
.delta.up { color:var(--good); } .delta.down { color:var(--bad); }
.kpi-sub { margin-top:.3rem; font-size:.68rem; color:var(--muted); }

/* ---- Brand cards ---- */
.brand-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-top:.75rem; }
@media (max-width:1100px){ .brand-cards { grid-template-columns:1fr; } }
.card { background:var(--surface2); border:1px solid var(--line); border-radius:12px; padding:.9rem; min-width:0; }
.card-head { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:1.1rem; margin-bottom:.8rem; }
.card-title { display:flex; align-items:center; gap:.55rem; min-width:0; }
.card-title span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-logo { height:36px; width:36px; object-fit:contain; border-radius:8px; background:#fff; padding:2px; flex:0 0 auto; }
.card-head .mer { font-size:.85rem; color:var(--electric); font-weight:600; flex:0 0 auto; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem .7rem; }
.card-grid .cell { display:flex; flex-direction:column; min-width:0; }
.card-grid .k { font-size:.66rem; text-transform:uppercase; color:var(--muted); letter-spacing:.02em; }
.card-grid .v { font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; }
.card-pm, .top { margin-top:.75rem; border-top:1px solid var(--line); padding-top:.6rem; }
.top-h { font-size:.64rem; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }
.pm-inline { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.pm-inline .pmi { display:flex; gap:.35rem; font-size:.9rem; font-weight:600; }
.pm-inline .pmi .k { color:var(--muted); font-weight:400; }
.top-row { display:flex; justify-content:space-between; gap:.5rem; font-size:.82rem; padding:.12rem 0; min-width:0; }
.top-row .tp-name { color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; }
.top-row .tp-val { color:var(--muted); white-space:nowrap; flex:0 0 auto; }

/* ---- Paid media ---- */
.paid-media { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.7rem; }
.pm-cell { display:flex; flex-direction:column; padding:.4rem .55rem; background:var(--surface2); border:1px solid var(--line); border-radius:9px; }
.pm-cell .k { color:var(--muted); font-size:.66rem; text-transform:uppercase; } .pm-cell .v { font-weight:700; font-variant-numeric:tabular-nums; }

/* ---- Tables ---- */
.tablewrap { overflow-x:auto; }
table.products, table.ads-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.products th, .products td, .ads-table th, .ads-table td { padding:.42rem .55rem; text-align:left; white-space:nowrap; }
.products thead th, .ads-table thead th { color:var(--muted); font-weight:600; font-size:.66rem; text-transform:uppercase; border-bottom:1px solid var(--line); }
.products td.num, .products th.num, .ads-table td.num, .ads-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.products tbody tr:nth-child(odd), .ads-table tbody tr:nth-child(odd) { background:var(--surface2); }
.products td:first-child { max-width:230px; overflow:hidden; text-overflow:ellipsis; }
.ad-cell { max-width:300px; }
.ad-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:300px; font-weight:600; }
.ad-id { font-size:.66rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:300px; }
.prod-search { width:100%; margin:.5rem 0; }
.seg.small { margin-bottom:.2rem; }
.mini { max-width:150px; }
.spark { display:block; }

/* ---- Alerts ---- */
.alerts-panel { border-left:3px solid var(--orange); }
.alerts-panel h2 { margin-bottom:.6rem; }
.alerts { display:flex; flex-direction:column; gap:.5rem; }
.alert { display:flex; align-items:center; gap:.7rem; padding:.5rem .7rem; border-radius:9px; background:var(--surface2); border:1px solid var(--line); }
.alert .sev { font-size:.58rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:.15rem .45rem; border-radius:6px; white-space:nowrap; }
.alert.critical { border-color:rgba(240,97,109,.5); } .alert.critical .sev { background:var(--bad); color:#fff; }
.alert.warning .sev { background:var(--orange); color:#2a1400; }
.alert.info .sev { background:var(--electric); color:#012235; }
.alert-body { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; }
.alert-msg { font-size:.84rem; } .alert-tag { font-size:.66rem; color:var(--muted); background:var(--navy); padding:.1rem .4rem; border-radius:5px; }

/* ---- Trends ---- */
.trend-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:.6rem; }
@media (max-width:700px){ .trend-grid { grid-template-columns:1fr; } }
.trend-grid figure { margin:0; background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:.6rem .7rem; }
.trend-grid figcaption { font-size:.75rem; color:var(--muted); margin-bottom:.35rem; font-weight:600; }
.trend-grid canvas { width:100% !important; height:160px !important; }
.empty { color:var(--muted); padding:2rem; text-align:center; }