:root { --bg: #fafafa; --fg: #1b1b1f; --muted: #62626b; --card: #fff; --line: #d9d9de; --accent: #3b5bdb; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #121316; --fg: #e8e8ea; --muted: #a0a0a8; --card: #1c1d22; --line: #2e3038; --accent: #91a7ff; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
header, main { max-width: 760px; margin: 0 auto; padding: 16px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
h1 { font-size: 1.4rem; margin: 0; }
h1 a { color: inherit; text-decoration: none; }
a { color: var(--accent); }
section { margin: 28px 0; }
form label { display: block; margin: 10px 0; }
input:not([type=radio]), textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px; font: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
}
fieldset { border: 1px solid var(--line); border-radius: 6px; }
button { font: inherit; padding: 8px 18px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
button:disabled { opacity: .6; }
.muted, .meta { color: var(--muted); }
.meta { font-size: .85rem; margin: 0; }
.report { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.report h3 { margin: 0 0 4px; font-size: 1.05rem; }
.report .body { white-space: pre-wrap; overflow-wrap: anywhere; }
#report-result { overflow-wrap: anywhere; }
[data-status] { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #8a8a8a; flex: none; }
[data-color=green] .dot { background: #2f9e44; }
[data-color=orange] .dot { background: #f08c00; }
[data-color=red] .dot { background: #e03131; }
.status-big { font-size: 1.5rem; }
.status-big .dot { width: 22px; height: 22px; }