:root {
  --bg: #f6f7f9; --card: #fff; --ink: #16202b; --dim: #667585;
  --line: #e2e6ea; --warn: #b4471f; --ok: #1f7a4d; --accent: #1b3a5c;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { padding: 26px 24px 16px; border-bottom: 1px solid var(--line); background: #fff; }
h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.sub { margin: 2px 0 14px; color: #5b6976; font-size: 14px; }
.controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.controls label { display: flex; gap: 6px; align-items: center; }
button, select { font: inherit; padding: 5px 12px; border: 1px solid var(--line);
                 border-radius: 7px; background: #fff; cursor: pointer; }
button:hover { background: #f0f3f6; }
main { padding: 20px 24px 40px; display: grid; gap: 20px; max-width: 1100px; }
.note { margin: 14px 24px 0; padding: 9px 13px; border-radius: 8px; font-size: 13.5px;
        background: #fff6e6; border: 1px solid #f0dcb4; color: #6d4c15; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
        padding: 18px 20px; }
.card h2 { margin: 0 0 4px; font-size: 17px; }
.tag { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
       padding: 2px 7px; border-radius: 999px; background: #fff2d6; color: #7a5514;
       border: 1px solid #efdcb0; margin-left: 8px; vertical-align: 2px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px; margin: 16px 0 6px; }
.kpi { border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; }
.kpi .k { font-size: 12px; color: #5b6976; }
.kpi .v { font-size: 20px; font-weight: 600; margin-top: 2px; letter-spacing: -0.02em; }
.kpi .n { font-size: 11.5px; color: #7a8794; margin-top: 3px; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #67757f;
     font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.bottleneck { background: #fdf1ec; }
tr.bottleneck td:first-child::after { content: " bottleneck"; color: var(--warn);
     font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-left: 8px; }
.wait { color: #7a8794; font-size: 12px; }
.finding { margin-top: 14px; padding: 11px 14px; border-left: 3px solid var(--accent);
           background: #f3f6f9; border-radius: 0 8px 8px 0; font-size: 14px; }
.empty { color: #5b6976; }
footer { border-top: 1px solid var(--line); padding: 16px 24px 30px; color: #67757f;
         font-size: 13px; background: #fff; }
footer p { max-width: 70ch; margin: 0; }