:root { --bg:#f6f7fb; --card:#fff; --ink:#1a1d29; --muted:#6b7280; --line:#e5e7eb;
  --green:#16794c; --green-bg:#e3f5ea; --amber:#9a6700; --amber-bg:#fff4d6; --red:#b3261e; --red-bg:#fde8e7; --grey:#6b7280; --grey-bg:#eceef2; --accent:#5b4bdb; }
* { box-sizing:border-box; } body { margin:0; font:14px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--ink); }
header { display:flex; align-items:center; justify-content:space-between; padding:18px 28px; }
h1 { font-size:22px; margin:0; } .sub { color:var(--muted); font-size:12px; margin-top:2px; }
button { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 12px; cursor:pointer; font:inherit; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
main { padding:0 28px 40px; max-width:1400px; margin:0 auto; }
.banner { background:var(--amber-bg); color:var(--amber); border:1px solid #f1d58a; border-radius:8px; padding:8px 12px; margin:0 0 16px; font-size:12px; }
.rollup { display:flex; gap:10px; margin:0 0 20px; flex-wrap:wrap; }
.pill { border-radius:999px; padding:4px 12px; font-weight:600; font-size:12px; }
.GREEN{color:var(--green);background:var(--green-bg)} .AMBER{color:var(--amber);background:var(--amber-bg)} .RED{color:var(--red);background:var(--red-bg)} .INFO,.NODATA{color:var(--grey);background:var(--grey-bg)}
section { margin-bottom:26px; } section h2 { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 10px; display:flex; align-items:center; gap:10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-height:120px; }
.tile.RED{border-left:4px solid var(--red)} .tile.AMBER{border-left:4px solid var(--amber)} .tile.GREEN{border-left:4px solid var(--green)} .tile.INFO,.tile.NODATA{border-left:4px solid var(--line)}
.tile .name { font-size:12px; color:var(--muted); display:flex; justify-content:space-between; gap:8px; }
.tile .value { font-size:26px; font-weight:700; color:var(--accent); letter-spacing:-.01em; }
.tile .detail { font-size:12px; color:var(--muted); white-space:pre-wrap; }
.tile .meta { font-size:11px; color:var(--muted); display:flex; justify-content:space-between; margin-top:auto; }
.spark { width:100%; height:28px; } .spark path { fill:none; stroke:var(--accent); stroke-width:1.5; opacity:.7; }
.empty { padding:40px; text-align:center; color:var(--muted); }
footer { color:var(--muted); font-size:11px; padding:12px 28px; }
@media (max-width:640px){ header,main,footer{padding-left:16px;padding-right:16px} .tile .value{font-size:22px} }