:root { --bg: #f5f6fb; --card: #fff; --text: #06013a; --muted: #5f6b82; --line: #e3e6ef; --brand: #1800e7; --ok: #16704a; --bad: #b42332; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg: #1a2537; --card: #1f2a3d; --text: #dddee1; --muted: #a3a8af; --line: #313e54; --brand: #99b6ff; --ok: #4cc38a; --bad: #ff7a5c; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 -apple-system, "Source Sans 3", system-ui, sans-serif; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 32px 16px 64px; }
h1 { font-size: 26px; margin: 0 0 4px; } h2 { margin: 32px 0 12px; font-size: 19px; } h3 { margin: 0; font-size: 17px; }
.muted { color: var(--muted); } .ok { color: var(--ok); font-weight: 600; } .bad { color: var(--bad); }
code { font-size: 13px; background: color-mix(in srgb, var(--muted) 14%, transparent); padding: 1px 6px; border-radius: 6px; }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin-bottom: 14px; }
.narrow { max-width: 380px; margin: 12vh auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 4px; }
.tile b { font-size: 28px; line-height: 1.1; } .tile span { color: var(--muted); font-size: 14px; }
.app-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
fieldset { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
legend { font-weight: 600; font-size: 13px; color: var(--muted); margin-bottom: 4px; width: 100%; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 14px; }
label { display: inline-flex; gap: 6px; align-items: center; }
form label:has(input[type=number]), form label:has(input[type=password]) { display: grid; gap: 4px; font-weight: 600; font-size: 13px; }
input[type=number], input[type=password] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; min-width: 140px; }
button { padding: 9px 16px; border-radius: 999px; border: 0; background: var(--brand); color: #fff; font: 600 14px/1 inherit; cursor: pointer; }
button.ghost { background: transparent; color: var(--brand); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { button { color: #06013a; } }
.secret { padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--ok) 12%, var(--card)); margin: 12px 0; display: grid; gap: 6px; }
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
.state { font-weight: 700; width: 64px; } .state.ok { color: var(--ok); } .state.bad { color: var(--bad); } .state.warn { color: #b45309; }
@media (prefers-color-scheme: dark) { .state.warn { color: #f5b454; } }
.bad-card { border-color: var(--bad); color: var(--bad); }
input[type=text] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; }
form label:has(input[type=text]) { display: grid; gap: 4px; font-weight: 600; font-size: 13px; }