:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; --ink:#172033; --muted:#667085; --line:#dbe2ea; --brand:#3157d5; --surface:#fff; --bg:#f4f7fb; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--bg); }
a { color:var(--brand); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.25rem clamp(1rem,4vw,3rem); background:linear-gradient(120deg,#101828,#233876); color:#fff; }
.site-header h1 { margin:.1rem 0; font-size:clamp(1.35rem,3vw,2rem); }
.eyebrow { margin:0; color:#9fb7ff; font-size:.75rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.muted { color:var(--muted); }.site-header .muted { color:#d4ddff; }
nav { display:flex; gap:1.25rem; padding:.85rem clamp(1rem,4vw,3rem); background:#fff; border-bottom:1px solid var(--line); overflow-x:auto; }
nav a { color:var(--ink); font-weight:650; text-decoration:none; white-space:nowrap; }
.page { display:grid; gap:1rem; width:min(1500px,100%); margin:auto; padding:1.25rem clamp(1rem,3vw,2rem) 3rem; }
.card { min-width:0; padding:1.25rem; background:var(--surface); border:1px solid var(--line); border-radius:.8rem; box-shadow:0 3px 14px rgb(16 24 40 / 6%); }
.card h2 { margin:.15rem 0 1rem; font-size:1.1rem; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1rem; }
.metric { padding:1rem; background:#fff; border:1px solid var(--line); border-top:4px solid var(--brand); border-radius:.65rem; }.metric span { display:block; color:var(--muted); font-size:.8rem; }.metric strong { display:block; margin-top:.35rem; font-size:1.7rem; }
.metric.success { border-top-color:#179b68; }.metric.failed { border-top-color:#db3b4b; }.metric.warning { border-top-color:#e9a319; }
.chart-grid,.table-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.chart { min-height:320px; }
.filter-grid { display:grid; grid-template-columns:1fr 1fr auto; gap:1rem; align-items:end; }
label { display:grid; gap:.35rem; color:#344054; font-size:.88rem; font-weight:650; } input,select { width:100%; padding:.7rem; border:1px solid #b9c4d2; border-radius:.4rem; background:#fff; font:inherit; }
button,.button { display:inline-block; padding:.7rem 1rem; border:0; border-radius:.4rem; color:#fff; background:var(--brand); font:inherit; font-weight:700; text-decoration:none; cursor:pointer; } button.secondary,.button.secondary { color:var(--ink); background:#e9eef6; } button.danger { background:#b42318; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; font-size:.88rem; } th,td { padding:.7rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; } th { color:#475467; background:#f8fafc; }
.truncate { max-width:26rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.success { color:#067647; }.failed { color:#b42318; }.invalid { color:#b54708; }.empty { padding:3rem; text-align:center; }.error { color:#b42318; } footer { padding:1.5rem; color:var(--muted); text-align:center; }
dialog { width:min(720px,calc(100% - 2rem)); border:0; border-radius:.8rem; box-shadow:0 18px 60px rgb(0 0 0 / 25%); } dialog::backdrop { background:rgb(16 24 40 / 60%); } dialog form { display:grid; gap:1rem; }.checkbox-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }.checkbox-grid label { display:flex; align-items:center; }.checkbox-grid input { width:auto; }
@media (max-width:1050px) { .metric-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px) { .site-header { align-items:flex-start; flex-direction:column; }.metric-grid,.chart-grid,.table-grid,.filter-grid { grid-template-columns:1fr; }.checkbox-grid { grid-template-columns:1fr 1fr; }.page { padding-inline:.75rem; } }