:root {
  --bg: #fafaf8;
  --bg-start: #fff;
  --card: #f4f4f0;
  --well: #efefea;
  --border: #e2e2dc;
  --text: #171716;
  --muted: #686864;
  --faint: #9b9b95;
  --accent: #ff7f50;
  --accent-dark: #df6230;
  --ok: #1f8a5b;
  --warn: #b7791f;
  --surface: rgba(255,255,255,.74);
  --surface-strong: rgba(255,255,255,.65);
  --shadow: rgba(20,20,18,.28);
  --error-bg: #fff;
  --error-border: #ffd1c0;
  --active-text: #fff;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1116;
  --bg-start: #151922;
  --card: #171b23;
  --well: #11151c;
  --border: #29313d;
  --text: #f2f4f8;
  --muted: #a7afbd;
  --faint: #778191;
  --accent: #ff8a61;
  --accent-dark: #ffad91;
  --ok: #55d49b;
  --warn: #f2bd5b;
  --surface: rgba(23,27,35,.82);
  --surface-strong: rgba(18,22,30,.78);
  --shadow: rgba(0,0,0,.5);
  --error-bg: #1c1413;
  --error-border: #6b3425;
  --active-text: #101318;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(circle at 80% 10%, rgba(255,127,80,.14), transparent 30rem),
    linear-gradient(180deg, var(--bg-start), var(--bg) 28rem);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -.01em; }
.brand-mark { width: 30px; height: 24px; display: inline-grid; place-items: center; }
.brand-mark svg { width: 30px; height: 24px; display: block; overflow: visible; }
.brand-mark rect { shape-rendering: geometricPrecision; }
.brand-mark .teal { fill: #1FA098; }
.brand-mark .violet { fill: #9B7BD8; }
.brand-mark .coral { fill: #E27160; }
.brand-mark .olive { fill: #A89770; }
.brand-mark .blue { fill: #3F8FBF; }
.brand-word { font-family: var(--mono); font-size: 14px; letter-spacing: -.04em; color: var(--text); }
.brand-dot { color: var(--accent); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.network-toggle { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong); }
.network-toggle a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 600; }
.network-toggle a.active { background: var(--text); color: var(--active-text); }
.theme-toggle { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong); color: var(--text); cursor: pointer; font: 700 22px/1 var(--sans); padding: 0; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-dark); }

.hero { padding: clamp(44px, 7vw, 92px) 0 64px; }
.refresh-progress { height: 2px; width: 100%; margin: 0 0 26px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.refresh-progress span { display: block; height: 100%; width: 42%; background: var(--accent); opacity: 0; transform: translateX(-110%); }
.hero.htmx-request .refresh-progress span { opacity: 1; animation: refresh-progress 1s ease-in-out infinite; }
@keyframes refresh-progress {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(75%); }
  100% { transform: translateX(250%); }
}
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent-dark); font-size: 12px; font-weight: 600; }
.status-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; }
.pill.ok { color: var(--ok); background: rgba(31,138,91,.11); }
.pill.warn { color: var(--warn); background: rgba(183,121,31,.13); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.ledger-number {
  margin: 14px 0 12px;
  font-size: clamp(72px, 16vw, 190px);
  line-height: .9;
  letter-spacing: -.075em;
  font-weight: 700;
}
.lead { color: var(--muted); font-size: clamp(18px, 2vw, 22px); max-width: 720px; line-height: 1.45; margin: 0 0 34px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.stats-grid.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 12px; }
.ledger-meta { display: flex; gap: 18px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 54px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px -34px var(--shadow); overflow: hidden; }
.summary-cell { min-width: 0; padding: 28px; }
.summary-cell + .summary-cell { border-left: 1px solid var(--border); }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: 0 18px 50px -34px var(--shadow); min-width: 0; }
.stat-label { font-family: var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.stat-value { font-family: var(--mono); font-size: clamp(18px, 2vw, 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-detail { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 8px; }
.section-label { margin-top: 42px; font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--faint); font-size: 12px; margin-top: 28px; }
.error-card { margin-top: 26px; max-width: 760px; background: var(--error-bg); border: 1px solid var(--error-border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 18px; display: grid; gap: 6px; color: var(--muted); }
.error-card strong { color: var(--text); }

@media (max-width: 900px) {
  .stats-grid, .stats-grid.compact, .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-cell:nth-child(odd) { border-left: 0; }
  .summary-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .shell { width: min(100% - 28px, 1180px); }
  .topbar { height: auto; padding: 18px 0; align-items: flex-start; gap: 14px; flex-direction: column; }
  .topbar-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .network-toggle { width: 100%; }
  .network-toggle a { flex: 1; text-align: center; }
  .theme-toggle { width: 100%; height: 42px; }
  .stats-grid, .stats-grid.compact, .summary-strip { grid-template-columns: 1fr; }
  .summary-cell { padding: 22px; }
  .summary-cell + .summary-cell { border-left: 0; border-top: 1px solid var(--border); }
}