:root {
  --ink:#1d2433; --muted:#667085; --line:#e4e7ec; --soft:#f6f7f9;
  --blue:#2f6db5; --paprika:#e3262d; --meta:#2f6db5; --google:#e3a21a; --good:#127a46; --bad:#b42318;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:#fff; color:var(--ink); min-height:100vh; display:flex; flex-direction:column;
       font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height:1.45; }
a { color:var(--blue); }
.wrap { width:100%; max-width:1120px; margin:0 auto; padding:0 24px; }

/* Header: Paprika accent line */
header.top { border-top:4px solid var(--paprika); border-bottom:1px solid var(--line); background:#fff; }
.bar { display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand img.mf { height:30px; display:block; } .brand img.pp { height:19px; display:block; } .brand .x { color:var(--muted); line-height:1; }
.brand .t { margin-left:6px; padding-left:14px; border-left:1px solid var(--line); font-weight:600; font-size:15px; line-height:30px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; border-radius:8px; border:1px solid #cfd4dc;
       background:#fff; color:var(--ink); font:inherit; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap; line-height:1.2; }
.btn:hover { background:var(--soft); }
.btn.primary { background:var(--paprika); border-color:var(--paprika); color:#fff; }
.btn.primary:hover { filter:brightness(.94); }
.btn.sm { padding:5px 10px; font-size:13px; }

main { flex:1; }
main.wrap { padding-top:28px; padding-bottom:56px; }
h1 { font-size:24px; margin:0 0 4px; letter-spacing:-.01em; line-height:1.25; }
h2 { font-size:16px; margin:36px 0 12px; }
.sub { color:var(--muted); margin:0; }
.head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }

/* KPI tiles */
.kpis { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:24px; }
.kpis.k4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.kpi { border:1px solid var(--line); border-radius:10px; padding:16px 18px; display:flex; flex-direction:column; min-height:112px; }
.kpi .l { color:var(--muted); font-size:13px; }
.kpi .v { font-size:24px; font-weight:650; margin-top:6px; font-variant-numeric:tabular-nums; line-height:1.15; }
.kpi .d { font-size:12.5px; margin-top:auto; padding-top:8px; color:var(--muted); }
.kpi.hero { border:1.5px solid var(--good); background:#f3faf6; }
.kpi.hero .v { color:var(--good); font-size:28px; }
.disclaimer { margin:10px 0 0; padding:10px 14px; border-left:3px solid var(--paprika); background:#fdf3f3; color:#4a5263; font-size:12.5px; border-radius:0 8px 8px 0; }
.up, .good { color:var(--good); } .down { color:var(--bad); }

/* Platform cards */
.plats { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:12px; }
.plat { border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.plat h3 { margin:0 0 12px; font-size:15px; display:flex; align-items:center; gap:8px; }
.dot { width:10px; height:10px; border-radius:3px; display:inline-block; flex:none; }
.plat dl { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 12px; margin:0; }
.plat dt { color:var(--muted); font-size:12.5px; } .plat dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; }

/* Tables */
.tbl { border:1px solid var(--line); border-radius:10px; overflow:auto; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th, td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:right; vertical-align:middle; white-space:nowrap; }
td:first-child, th:first-child, td.l, th.l { text-align:left; white-space:normal; }
th { font-size:12.5px; color:var(--muted); font-weight:600; background:var(--soft); line-height:1.3; }
tr.total td { font-weight:650; border-top:2px solid var(--ink); background:#fff; }
.tbl table tr:last-child td { border-bottom:0; }
td .small { margin-top:2px; }

.muted { color:var(--muted); } .small { font-size:12.5px; }
.chart { border:1px solid var(--line); border-radius:10px; padding:16px 18px 8px; }
.legend { display:flex; gap:16px; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.notes { margin:0; padding-left:20px; } .notes li { margin:6px 0; }
.empty { border:1px dashed var(--line); border-radius:10px; padding:40px; text-align:center; color:var(--muted); }
.err { color:var(--bad); }
.tip { position:fixed; pointer-events:none; background:var(--ink); color:#fff; font-size:12px; padding:6px 8px; border-radius:6px; display:none; z-index:10; white-space:nowrap; }

/* Footer: Paprika */
footer.site { border-top:1px solid var(--line); background:var(--soft); }
.foot { display:flex; align-items:center; gap:18px; padding-top:18px; padding-bottom:22px; }
.pp-foot img { height:18px; display:block; }
.foot-text { color:var(--muted); font-size:12px; border-left:1px solid var(--line); padding-left:18px; }

/* Login / admin */
.center { flex:1; display:grid; place-items:center; padding:40px 16px; }
.card { width:min(420px, 100%); padding:32px; border:1px solid var(--line); border-radius:12px; background:#fff; }

@media (max-width: 1000px) { .kpis.k4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) {
  .kpis, .kpis.k4, .plats { grid-template-columns:1fr; }
  .brand .t { display:none; } .plat dl { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .foot { flex-direction:column; align-items:flex-start; } .foot-text { border-left:0; padding-left:0; }
  .wrap { padding-left:16px; padding-right:16px; } main.wrap { padding-top:20px; padding-bottom:40px; }
}