:root {
  color-scheme: dark;
  --bg: #0a0c11;
  --surface: #121620;
  --surface-2: #181e2b;
  --line: rgba(191, 207, 235, .13);
  --text: #f2f5fb;
  --muted: #9da7b9;
  --blue: #8db9ff;
  --green: #9bd7bd;
  --amber: #f0bf82;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 80% -10%, #1c2c48 0, transparent 38%), var(--bg); color: var(--text); }
button, select, input { font: inherit; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 56px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0 28px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 750; letter-spacing: -.02em; }.brand small { color: var(--blue); font-size: 10px; letter-spacing: .14em; margin-left: 2px; }.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #dbe8ff; color: #162b4e; font-size: 18px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }.muted, small { color: var(--muted); }
.access-card { max-width: 620px; margin: 18vh auto 0; padding: 38px; background: linear-gradient(145deg, rgba(27,35,50,.96), rgba(15,19,28,.96)); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.hero-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 54px 0 28px; }.eyebrow { color: var(--blue); font-size: 11px; font-weight: 780; letter-spacing: .14em; }.hero-row h1, .access-card h1 { margin: 8px 0 10px; font-size: clamp(32px, 5vw, 50px); letter-spacing: -.05em; line-height: .98; }.lede, .access-card p { max-width: 670px; color: var(--muted); line-height: 1.55; font-size: 15px; }.range-control { display: grid; gap: 7px; min-width: 160px; color: var(--muted); font-size: 12px; }.range-control select { color: var(--text); background: var(--surface-2); border: 1px solid var(--line); padding: 11px 13px; border-radius: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.metric-card, .panel, .reconciliation { background: linear-gradient(145deg, rgba(23,29,42,.95), rgba(15,18,26,.95)); border: 1px solid var(--line); border-radius: 20px; }.metric-card { min-height: 142px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }.metric-card span { color: var(--muted); font-size: 13px; }.metric-card strong { font-size: clamp(22px, 3vw, 31px); letter-spacing: -.04em; }.metric-card small { font-size: 12px; }.metric-card.accent { border-color: rgba(141,185,255,.45); background: linear-gradient(145deg, rgba(37,60,98,.85), rgba(17,23,35,.98)); }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }.panel { padding: 22px; min-width: 0; }.panel-wide { grid-column: span 2; }.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }.panel h2 { margin: 5px 0 0; font-size: 20px; letter-spacing: -.03em; }.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(141,185,255,.14); color: var(--blue); font-size: 12px; }.table-wrap { overflow-x: auto; }.table { width: 100%; border-collapse: collapse; font-size: 13px; }.table th { color: var(--muted); font-weight: 600; text-align: left; padding: 0 10px 10px 0; }.table td { padding: 12px 10px 12px 0; border-top: 1px solid var(--line); white-space: nowrap; }.table td:last-child, .table th:last-child { padding-right: 0; text-align: right; }.status-good { color: var(--green); }.status-warn { color: var(--amber); }.panel-note { margin: 18px 0 0; color: var(--muted); line-height: 1.45; font-size: 12px; }.reconciliation { margin-top: 14px; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.reconciliation h2 { margin: 5px 0 6px; font-size: 19px; }.reconciliation p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; max-width: 700px; }.button { border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer; font-weight: 700; color: #0a1220; background: var(--blue); }.button-secondary { color: var(--text); background: var(--surface-2); border: 1px solid var(--line); }.file-button { position: relative; overflow: hidden; white-space: nowrap; }.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.notice { min-height: 20px; color: var(--amber); font-size: 13px; }.notice:empty { display: none; }
@media (max-width: 780px) { .shell { width: min(100% - 28px, 620px); padding-top: 14px; }.topbar-actions .muted { display: none; }.hero-row { display: grid; padding-top: 36px; }.metric-grid { grid-template-columns: 1fr 1fr; }.panel-grid { grid-template-columns: 1fr; }.panel-wide { grid-column: span 1; }.reconciliation { align-items: start; flex-direction: column; } }
@media (max-width: 430px) { .metric-grid { grid-template-columns: 1fr; }.metric-card { min-height: auto; }.access-card { margin-top: 12vh; padding: 26px; } }