:root {
    color-scheme: dark;
    --bg: #091017;
    --panel: #101b25;
    --panel-2: #142431;
    --line: #263b4a;
    --text: #edf5f8;
    --muted: #96acb9;
    --accent: #28d6b2;
    --danger: #ff6b70;
    --warning: #f6c85f;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Segoe UI, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
.topbar { min-height: 68px; display: flex; align-items: center; gap: 28px; padding: 0 3vw; border-bottom: 1px solid var(--line); background: #0c161e; }
.brand { color: var(--text); font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.brand span { color: var(--accent); font-weight: 500; letter-spacing: 0; }
nav { display: flex; gap: 20px; flex: 1; }
nav a { color: var(--muted); }
nav a:hover { color: var(--text); }
.logout { margin: 0; }
.link-button { border: 0; padding: 0; color: var(--muted); background: transparent; cursor: pointer; }
.page { width: min(1440px, 94vw); margin: 34px auto 80px; }
h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 3vw, 2.6rem); }
h2 { margin-top: 32px; }
.lede, .muted { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 24px 0; }
.card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.metric { font-size: 2rem; font-weight: 750; margin-top: 8px; }
.ok { color: var(--accent); }
.bad { color: var(--danger); }
.warn { color: var(--warning); }
table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 12px; background: var(--panel); }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
form.panel { max-width: 760px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
label { display: block; margin: 14px 0 6px; color: var(--muted); }
input, select, textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel-2); }
input[type=checkbox] { width: auto; margin-right: 8px; }
textarea { min-height: 100px; font-family: Consolas, monospace; }
button, .button { display: inline-block; width: auto; margin-top: 18px; padding: 11px 18px; border: 0; border-radius: 8px; color: #04120f; background: var(--accent); font-weight: 700; cursor: pointer; }
.button.secondary, button.secondary { color: var(--text); background: var(--panel-2); border: 1px solid var(--line); }
.validation-summary-errors, .field-validation-error { color: var(--danger); }
.notice { margin-bottom: 20px; padding: 12px 16px; border: 1px solid #236b5c; border-radius: 9px; background: #0d3029; }
.token { padding: 16px; border: 1px solid var(--warning); border-radius: 9px; background: #2c2512; overflow-wrap: anywhere; font: 600 1rem Consolas, monospace; }
.status-dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: currentColor; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.screenshot { max-width: 360px; max-height: 240px; border: 1px solid var(--line); border-radius: 8px; }
code, pre { overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 780px) { .topbar { align-items: flex-start; flex-wrap: wrap; padding: 18px 4vw; } nav { order: 3; width: 100%; overflow-x: auto; } .split { grid-template-columns: 1fr; } }