:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; --ink:#18212f; --muted:#667085; --line:#d8dee8; --brand:#175cd3; --surface:#f7f9fc; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--surface); }
a { color: var(--brand); }
.topbar { min-height: 4rem; display:flex; gap:1rem; align-items:center; padding:.8rem 2rem; background:#101828; color:white; }
.brand { color:white; text-decoration:none; font-weight:700; margin-right:auto; }
.operator { color:#d0d5dd; }
.link-button { border:0; padding:0; color:white; background:transparent; text-decoration:underline; cursor:pointer; }
.navigation { display:flex; gap:1rem; flex-wrap:wrap; padding:.75rem 2rem; background:white; border-bottom:1px solid var(--line); }
.container { max-width:1280px; margin:2rem auto; padding:0 1.25rem 4rem; }
.auth-card, .action-card { max-width:38rem; padding:1.5rem; margin:2rem auto; background:white; border:1px solid var(--line); border-radius:.75rem; }
.action-card { margin:2rem 0; }
form { display:grid; gap:.65rem; }
input, select, textarea, button { font:inherit; }
input, select, textarea { width:100%; padding:.65rem; border:1px solid #98a2b3; border-radius:.35rem; }
textarea { min-height:8rem; }
button { width:max-content; padding:.65rem 1rem; border:0; border-radius:.35rem; color:white; background:var(--brand); cursor:pointer; }
.heading-row { display:flex; justify-content:space-between; gap:2rem; align-items:end; }
.filters { grid-template-columns:auto minmax(8rem,18rem); align-items:center; }
.filters button { grid-column:2; }
.table-scroll { overflow:auto; background:white; border:1px solid var(--line); border-radius:.5rem; }
table { width:100%; border-collapse:collapse; }
th, td { padding:.75rem; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
th { background:#eef2f7; }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:1rem; }
.metric { display:grid; gap:.5rem; padding:1.25rem; background:white; border:1px solid var(--line); border-radius:.6rem; }
.metric strong { font-size:2rem; }
.details { display:grid; grid-template-columns:minmax(10rem,16rem) 1fr; background:white; border:1px solid var(--line); border-radius:.5rem; overflow:hidden; }
.details dt, .details dd { margin:0; padding:.75rem; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.details dt { font-weight:600; background:#eef2f7; }
.nested-value { margin-bottom:.75rem; }
.notice, .error { padding:1rem; margin-bottom:1rem; border-radius:.5rem; }
.notice { background:#ecfdf3; border:1px solid #6ce9a6; }
.error { background:#fef3f2; border:1px solid #fda29b; }
.muted { color:var(--muted); }
.field-error { color:#b42318; }
@media (max-width: 760px) { .heading-row { display:block; } .details { grid-template-columns:1fr; } .navigation { padding-inline:1rem; } }