/* Colors come from Telegram's theme; the fallbacks cover light and dark. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #1b1b1f);
  --hint: var(--tg-theme-hint-color, #8a8a90);
  --card: var(--tg-theme-secondary-bg-color, #f2f2f5);
  --link: var(--tg-theme-link-color, #2a7ae2);
  --accent: var(--tg-theme-button-color, #2a7ae2);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --ok: #2e9d57;
  --warn: #d99a1e;
  --bad: #d64545;
  --divider: rgba(127, 127, 127, 0.2);
  --alert-bg: #fdecea;
  --alert-fg: #8a1c1c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--tg-theme-bg-color, #1c1c1e);
    --fg: var(--tg-theme-text-color, #f2f2f5);
    --hint: var(--tg-theme-hint-color, #98989f);
    --card: var(--tg-theme-secondary-bg-color, #2c2c2e);
    --link: var(--tg-theme-link-color, #5ea2ff);
    --alert-bg: #4a1f1f;
    --alert-fg: #ffd7d7;
  }
}

:root[data-theme="dark"] {
  --bg: var(--tg-theme-bg-color, #1c1c1e);
  --fg: var(--tg-theme-text-color, #f2f2f5);
  --hint: var(--tg-theme-hint-color, #98989f);
  --card: var(--tg-theme-secondary-bg-color, #2c2c2e);
  --link: var(--tg-theme-link-color, #5ea2ff);
  --alert-bg: #4a1f1f;
  --alert-fg: #ffd7d7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding:
    calc(0.75rem + env(safe-area-inset-top, 0px))
    calc(0.75rem + env(safe-area-inset-right, 0px))
    calc(1rem + env(safe-area-inset-bottom, 0px))
    calc(0.75rem + env(safe-area-inset-left, 0px));
  background: var(--bg);
  color: var(--fg);
  font: 0.9375rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 1.125rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
h2 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--hint); margin: 0 0 0.375rem;
}
section { background: var(--card); border-radius: 0.75rem; padding: 0.625rem 0.75rem; margin-top: 0.625rem; }
ol { margin: 0; padding-left: 1.25rem; }
li { padding: 0.125rem 0; word-break: break-all; }
a { color: var(--link); }
pre { margin: 0; white-space: pre-wrap; font: 0.75rem/1.4 ui-monospace, Menlo, monospace; color: var(--hint); }
footer { color: var(--hint); font-size: 0.75rem; margin-top: 0.75rem; text-align: center; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0.25rem; }

.subtitle { color: var(--hint); font-size: 0.8125rem; margin-top: 0.125rem; word-break: break-all; }
.status-label { color: var(--hint); font-size: 0.8125rem; font-weight: normal; }
.muted { color: var(--hint); }
.alert { background: var(--alert-bg); color: var(--alert-fg); }

.row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.1875rem 0; }
.row span:first-child { color: var(--hint); flex-shrink: 0; }
.row span:last-child { text-align: right; word-break: break-all; }

.badge {
  display: inline-block; padding: 0.0625rem 0.5rem; border-radius: 0.625rem;
  font-size: 0.75rem; background: var(--accent); color: var(--accent-text);
}

.status-dot {
  width: 0.5625rem; height: 0.5625rem; border-radius: 50%;
  display: inline-block; flex-shrink: 0; background: var(--hint);
}
.status-dot[data-status="ok"] { background: var(--ok); }
.status-dot[data-status="warn"] { background: var(--warn); }
.status-dot[data-status="bad"] { background: var(--bad); }
.status-dot[data-status="info"] { background: var(--accent); }

.problem { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.1875rem 0; }

.nav-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0; color: inherit; text-decoration: none;
}
.nav-row + .nav-row { border-top: 1px solid var(--divider); }
.nav-detail { color: var(--hint); font-size: 0.8125rem; }
.nav-chevron { color: var(--hint); font-size: 1.125rem; }