:root {
    color-scheme: dark;
    --background: #10111b;
    --surface: #181a29;
    --raised: #202337;
    --line: #34384f;
    --text: #f4f2ff;
    --muted: #b0b5d2;
    --accent: #baaaff;
    --accent-ink: #201741;
    font: 16px/1.55 Inter, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); }
a { color: var(--accent); text-underline-offset: .19em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.header-inner, main { width: min(1200px, 100% - 3rem); margin-inline: auto; }
.header-inner { min-height: 68px; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; padding-block: .7rem; }
.brand { display: inline-flex; gap: .55rem; align-items: center; color: var(--text); font-weight: 740; text-decoration: none; }
.brand-icon { color: var(--accent); font-size: 1.35rem; }
nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.header-inner nav a { color: var(--muted); font-size: .9rem; text-decoration: none; }
.header-inner nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); }
.account { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
main { padding-block: 2.25rem 4rem; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -.035em; margin-bottom: .65rem; overflow-wrap: anywhere; }
h2 { font-size: 1.15rem; margin-bottom: .7rem; }
p { color: var(--muted); max-width: 72ch; }
p:last-child { margin-bottom: 0; }
.page-heading { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; margin-bottom: 1.5rem; }
.welcome { margin: clamp(1rem, 8vw, 6rem) auto; max-width: 680px; padding: clamp(1.5rem, 5vw, 3.5rem); border-radius: 1.25rem; border: 1px solid var(--line); background: linear-gradient(145deg, #272142, var(--surface) 70%); }
.welcome p { margin-block: 1.1rem 1.65rem; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: .65rem; padding: .5rem .9rem; font: inherit; font-size: .9rem; font-weight: 650; text-decoration: none; cursor: pointer; background: var(--accent); color: var(--accent-ink); }
.button:hover { filter: brightness(1.12); }
.button.secondary { border-color: var(--line); background: var(--raised); color: var(--text); }
.button.danger { border-color: #6d3d59; background: #352137; color: #ffc3d6; min-height: 36px; }
.actions, .filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.actions { margin-top: 1.25rem; }
.filters { margin-bottom: 1.1rem; }
.panel .filters { margin-bottom: 0; }
label { color: var(--muted); font-size: .9rem; display: grid; gap: .35rem; max-width: 100%; }
select, input { min-height: 42px; max-width: 100%; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: .6rem; font: inherit; color: var(--text); background: var(--background); }
select { width: min(17rem, 100%); }
.secret { width: 100%; font-family: "IBM Plex Mono", monospace; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: 0 0 1.2rem; }
.metrics > div, .panel { border: 1px solid var(--line); background: var(--surface); border-radius: .9rem; padding: 1.1rem; }
.metrics dt, small, .muted { color: var(--muted); }
.metrics dd { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 700; margin: .2rem 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.panel { margin-bottom: 1rem; }
.history { display: grid; gap: .5rem; max-height: 22rem; overflow: auto; }
.history-row { display: grid; grid-template-columns: 3.5rem minmax(3rem, 1fr) minmax(8rem, auto); align-items: center; gap: .6rem; font-size: .85rem; color: var(--muted); }
meter { width: 100%; height: 1.2rem; accent-color: var(--accent); }
meter::-webkit-meter-optimum-value { background: var(--accent); }
meter::-moz-meter-bar { background: var(--accent); }
.table-scroll, pre { overflow: auto; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: .88rem; }
td, th { padding: .75rem .6rem; border-top: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
td small { display: block; }
td code { white-space: nowrap; }
.status { font-size: .82rem; color: #ffcd9b; }
.status.ok { color: #a8e6c4; }
.pagination { justify-content: end; margin-top: .7rem; font-size: .9rem; }
.notice { max-width: none; color: var(--text); padding: .8rem 1rem; background: #203a37; border-radius: .6rem; }
.notice.error { padding-left: 2rem; background: #432741; }
.connection { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .9rem; }
.connection dt { color: var(--muted); }
.connection dd { margin: 0; overflow-wrap: anywhere; }
pre { padding: .9rem; background: var(--background); border-radius: .6rem; }
code { font-family: "IBM Plex Mono", ui-monospace, monospace; }

@media (max-width: 820px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .header-inner, main { width: calc(100% - 2rem); }
    .header-inner { gap: .65rem; }
    .header-inner nav { order: 3; width: 100%; }
    .account span { display: none; }
    .history-row { grid-template-columns: 2.6rem minmax(2rem, 1fr) auto; gap: .35rem; }
    .metrics > div, .panel { padding: .85rem; }
    .filters label { flex: 1 1 100%; }
}