:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: oklch(0.075 0.024 248);
  color: oklch(0.96 0.018 228);
  font-synthesis: none;
}

* { box-sizing: border-box; }

/* The authenticated and unauthenticated views are sibling surfaces. Their
   layout classes set display modes, so make the semantic hidden state win. */
.login-layout[hidden], .dashboard[hidden], .site-header > [hidden], .form-message[hidden] { display: none !important; }

body { margin: 0; min-width: 320px; background: oklch(0.075 0.024 248); }

button, input { font: inherit; }

button { cursor: pointer; }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid oklch(0.81 0.115 214);
  outline-offset: 3px;
}

.page-frame { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }

.site-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid oklch(0.23 0.035 237);
}

.brand { display: inline-flex; align-items: center; color: inherit; gap: 10px; text-decoration: none; font-weight: 650; letter-spacing: -0.02em; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand small { color: oklch(0.72 0.04 230); border-left: 1px solid oklch(0.32 0.035 232); padding-left: 10px; font-size: 0.77rem; font-weight: 600; letter-spacing: 0; }

.quiet-button, .primary-button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid oklch(0.29 0.04 232);
  font-weight: 650;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}
.quiet-button { background: oklch(0.13 0.034 237); color: oklch(0.92 0.019 230); }
.quiet-button:hover:not(:disabled) { background: oklch(0.18 0.044 233); border-color: oklch(0.53 0.1 218); }
.quiet-button:disabled { cursor: not-allowed; background: oklch(0.12 0.02 235); border-color: oklch(0.18 0.024 233); color: oklch(0.47 0.03 229); }
.primary-button { width: 100%; background: oklch(0.67 0.16 240); color: oklch(0.12 0.03 238); border-color: transparent; }
.primary-button:hover:not(:disabled) { background: oklch(0.61 0.16 240); }
.primary-button:disabled { cursor: wait; background: oklch(0.23 0.04 232); color: oklch(0.59 0.04 228); }

.login-layout { min-height: calc(100vh - 84px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); align-items: center; gap: clamp(48px, 9vw, 140px); padding: 72px 0 96px; }
.login-copy { max-width: 570px; }
.eyebrow { margin: 0 0 11px; color: oklch(0.75 0.1 220); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 13ch; margin-bottom: 18px; font-size: 2.8rem; line-height: 1.07; letter-spacing: -0.045em; }
h2 { margin-bottom: 0; font-size: 1.4rem; letter-spacing: -0.025em; }
.login-copy > p:last-child { max-width: 50ch; margin-bottom: 0; color: oklch(0.73 0.035 230); font-size: 1.04rem; line-height: 1.65; }

.login-form { display: grid; gap: 9px; padding: 28px; border: 1px solid oklch(0.24 0.04 235); border-radius: 18px; background: oklch(0.105 0.028 239); box-shadow: 0 22px 60px oklch(0.035 0.018 240 / 0.32); }
.login-form label { margin-top: 8px; color: oklch(0.81 0.026 230); font-size: 0.9rem; font-weight: 650; }
.login-form input { min-height: 48px; width: 100%; border: 1px solid oklch(0.29 0.04 232); border-radius: 11px; background: oklch(0.085 0.025 239); color: oklch(0.95 0.018 230); padding: 0 13px; }
.login-form input:hover { border-color: oklch(0.39 0.06 228); }
.login-form input:focus { border-color: oklch(0.73 0.13 221); }
.login-form .primary-button { margin-top: 14px; }
.form-message { margin: 8px 0 0; color: oklch(0.76 0.14 22); font-size: 0.9rem; line-height: 1.45; }

.dashboard { padding: 44px 0 80px; }
.dashboard-intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.dashboard-intro h1 { max-width: none; margin-bottom: 0; font-size: 2rem; }
.dashboard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }

.metrics { display: grid; grid-template-columns: 1.25fr repeat(4, minmax(150px, 1fr)); gap: 12px; margin-bottom: 54px; }
.metric-card { min-height: 164px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid oklch(0.23 0.038 235); border-radius: 16px; background: oklch(0.105 0.028 239); }
.metric-card:nth-child(even) { background: oklch(0.12 0.032 237); }
.metric-card p { margin-bottom: 18px; color: oklch(0.72 0.034 230); font-size: 0.83rem; font-weight: 650; }
.metric-card strong { overflow-wrap: anywhere; color: oklch(0.96 0.018 230); font-size: 1.55rem; letter-spacing: -0.04em; line-height: 1; }
.metric-card span { color: oklch(0.61 0.032 230); font-size: 0.76rem; line-height: 1.35; }
.balance-card { background: oklch(0.14 0.05 238); }
.traffic-card strong { font-size: 1.3rem; }
.node-card strong { color: oklch(0.82 0.11 217); }

.node-section { border-top: 1px solid oklch(0.23 0.038 235); padding-top: 24px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.node-count { margin-bottom: 0; color: oklch(0.66 0.034 230); font-size: 0.88rem; }
.dashboard-message { margin-bottom: 14px; }
.table-shell { overflow-x: auto; border: 1px solid oklch(0.23 0.038 235); border-radius: 14px; background: oklch(0.098 0.026 239); }
table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
th { padding: 14px 18px; color: oklch(0.63 0.04 230); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
td { padding: 17px 18px; border-top: 1px solid oklch(0.19 0.03 235); color: oklch(0.89 0.022 230); font-size: 0.94rem; }
td:nth-child(2) { color: oklch(0.68 0.034 230); }
.loading-row td { color: oklch(0.61 0.032 230); text-align: center; }
.health { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 650; }
.health::before { width: 8px; height: 8px; border-radius: 999px; content: ""; background: currentColor; }
.health-healthy { color: oklch(0.79 0.13 218); }
.health-partial { color: oklch(0.81 0.12 78); }
.health-degraded { color: oklch(0.76 0.14 30); }
.health-offline { color: oklch(0.57 0.026 230); }
.health-maintenance { color: oklch(0.74 0.08 267); }
.load-more { display: block; margin: 16px auto 0; }

@media (max-width: 1000px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .balance-card { grid-column: span 2; }
}

@media (max-width: 700px) {
  .page-frame { width: min(100% - 32px, 600px); }
  .site-header { min-height: 72px; }
  .login-layout { min-height: calc(100vh - 72px); grid-template-columns: 1fr; align-content: center; gap: 36px; padding: 42px 0 56px; }
  h1 { font-size: 2.28rem; }
  .login-form { padding: 22px; }
  .dashboard { padding-top: 34px; }
  .dashboard-intro, .section-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-actions { justify-content: flex-start; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 42px; }
  .metric-card, .balance-card { grid-column: auto; min-height: 142px; padding: 15px; }
  .metric-card strong { font-size: 1.35rem; }
  .node-count { margin-top: -8px; }
}

@media (max-width: 390px) {
  .brand small { display: none; }
  .metrics { grid-template-columns: 1fr; }
  .metric-card { min-height: 116px; }
}