:root {
  --bg: #f4f6f8; --fg: #14202b; --muted: #5b6b7a; --card: #ffffff; --line: #d6dde3;
  --brand: #0f2a43; --ok: #1a7f4b; --warn: #a15c00; --bad: #b3261e;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b141d; --fg: #e6edf3; --muted: #93a4b3; --card: #13212d; --line: #263745; --brand: #1d4a73; --ok: #4cc38a; --warn: #f0b34a; --bad: #ff8a80; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
header { background: var(--brand); color: #fff; padding: 14px 16px 10px; }
h1 { font-size: 1.1rem; margin: 0 0 6px; font-weight: 650; }
h2 { font-size: 1rem; margin: 0 0 4px; }
main { padding: 12px 16px 28px; max-width: 40rem; margin: 0 auto; }
.banner { font-size: .85rem; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,.14); }
.banner.ok { background: rgba(76,195,138,.25); }
.banner.offline { background: rgba(240,179,74,.3); }
.banner.error { background: rgba(255,138,128,.3); }
.small { font-size: .82rem; color: var(--muted); margin: 6px 0 0; }
.problem { color: var(--bad); }
.panel, details.face { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 10px 0; }
details.face > summary { font-weight: 650; cursor: pointer; padding: 2px 0; min-height: 28px; }
details.face[open] > summary { margin-bottom: 8px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.row .k { color: var(--muted); flex: 0 0 38%; }
.row .v { text-align: right; flex: 1; overflow-wrap: anywhere; }
.row .v.needed { color: var(--warn); font-style: italic; }
.row .v.bad { color: var(--bad); font-weight: 650; }
.problem-text { font-size: 1.02rem; margin: 0 0 8px; }
.entry { padding: 6px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.entry:first-child { border-top: 0; }
.entry .when { color: var(--muted); font-size: .78rem; }
.standing { font-style: italic; color: var(--muted); font-size: .85rem; margin: 8px 0 0; }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; }
button {
  font: inherit; min-height: 46px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); touch-action: manipulation;
}
button.primary { background: var(--brand); color: #fff; border-color: transparent; font-weight: 650; flex: 1; }
button:disabled { opacity: .55; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.empty { text-align: center; padding: 28px 8px; color: var(--muted); }