:root {
  color-scheme: dark;
  --bg: #000000;
  --card: #1c1c1e;
  --fill: #2c2c2e;
  --separator: #38383a;
  --label: #ffffff;
  --secondary: #98989f;
  --tertiary: #636366;
  --blue: #0a84ff;
  --orange: #ff9f0a;
  --teal: #40c8e0;
  --green: #30d158;
  --gray: #8e8e93;
  --focus: #0a84ff;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f2f2f7;
    --card: #ffffff;
    --fill: #e5e5ea;
    --separator: #d1d1d6;
    --label: #000000;
    --secondary: #6c6c70;
    --tertiary: #aeaeb2;
    --blue: #0066d6;
    --orange: #c93400;
    --teal: #0f7f95;
    --green: #248a3d;
    --focus: #007aff;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f7;
  --card: #ffffff;
  --fill: #e5e5ea;
  --separator: #d1d1d6;
  --label: #000000;
  --secondary: #6c6c70;
  --tertiary: #aeaeb2;
  --blue: #0066d6;
  --orange: #c93400;
  --teal: #0f7f95;
  --green: #248a3d;
  --focus: #007aff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 64px max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.content { display: flex; flex-direction: column; gap: 32px; }

.secondary { color: var(--secondary); }
.numeric { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.header-title { display: flex; flex-direction: column; gap: 4px; }
.header h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 8px; }

.status { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 500; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray); }
.status-vpn { display: none; }
:root[data-network="vpn"] .status-dot { background: var(--green); }
:root[data-network="vpn"] .status-public { display: none; }
:root[data-network="vpn"] .status-vpn { display: inline; }

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--fill); color: var(--label); cursor: pointer; }
.theme-sun { display: none; }
:root[data-theme="light"] .theme-sun { display: block; }
:root[data-theme="light"] .theme-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-sun { display: block; }
  :root:not([data-theme="dark"]) .theme-moon { display: none; }
}

.card { background: var(--card); border-radius: 22px; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.metric-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.card-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.tone-orange { color: var(--orange); }
.tone-blue { color: var(--blue); }
.tone-teal { color: var(--teal); }

.headline { display: flex; align-items: baseline; gap: 8px; }
.headline-value { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; }
.metric-rows { display: flex; flex-direction: column; gap: 8px; }
.metric-row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.disks { display: flex; flex-direction: column; gap: 16px; }
.disk { display: flex; flex-direction: column; gap: 6px; }

.bar { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; background: currentColor; }

.fan-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 76px; align-items: center; gap: 12px; font-size: 14px; }
.fan-speed { text-align: right; }

.group { display: flex; flex-direction: column; gap: 8px; }
.group-title { margin: 0; padding: 0 16px; font-size: 13px; font-weight: 600; }
.list { border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px; background: var(--card); box-shadow: 0 -1px 0 var(--separator) inset; }
.row:hover { background: var(--fill); }
.row:focus-visible { outline-offset: -2px; }
.service-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; object-fit: contain; }
.row-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-size: 15px; font-weight: 500; }
.row-subtitle { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chevron { flex-shrink: 0; color: var(--tertiary); }