body {
    font-family: 'Consolas', 'Courier New', monospace;
    background: #000;
    color: #ccc;
    min-height: 100vh;
}

/* ── Header ───────────────────────────────────────────────── */
header {
    background: #0a0a0a;
    border-bottom: 1px solid #333;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
header h1 {
    font-size: 16px;
    color: #cccc44;
    font-weight: normal;
    letter-spacing: 3px;
}
header .sub {
    font-size: 11px;
    color: #555;
    letter-spacing: 1px;
}
.status-bar {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 11px;
    color: #666;
}
.status-bar .stat b { color: #aaa; font-weight: normal; }
.status-bar .live { color: #44aa44; }

/* Universal font-size / UI-scale control (shared frame.js appends it to the header). */
.nav-fontsize { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.nav-fontsize .fs-btn {
    background: #1a1a1a; color: #cccc44; border: 1px solid #444;
    font-family: 'Consolas', monospace; font-size: 11px; line-height: 1;
    padding: 4px 7px; cursor: pointer; user-select: none;
}
.nav-fontsize .fs-btn:hover { background: #333; border-color: #cccc44; }
.nav-fontsize .fs-lbl { min-width: 38px; text-align: center; color: #888; }

/* ── Content ──────────────────────────────────────────────── */
.content {
    padding: 14px 18px 32px;
    max-width: 1500px;
    margin: 0 auto;
}
.group { margin-bottom: 18px; }
.group-title {
    font-size: 10px;
    color: #555;
    letter-spacing: 2px;
    font-weight: normal;
    padding: 0 2px 8px;
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: 10px;
}

/* ── Card grid ────────────────────────────────────────────── */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.card {
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    padding: 11px 13px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.12s, background 0.12s;
}
.card:hover,
.card:focus-visible {
    border-color: #44aa44;
    background: #0d140d;
    outline: none;
}
.card .title {
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
}
.card .title .wip {
    font-size: 9px;
    letter-spacing: 1px;
    color: #ffb300;
    border: 1px solid #5a4300;
    background: #1a1400;
    border-radius: 2px;
    padding: 1px 4px;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    top: -2px;
}
.card .desc {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
    line-height: 1.4;
}
.card .count {
    font-size: 11px;
    color: #44aa44;
    margin-top: 6px;
    min-height: 13px;
}

/* ── Active TCP positions ─────────────────────────────────── */
#tcpSummary { font-size: 10px; color: #44aa44; letter-spacing: 1px; }
.tcp-empty { color: #555; font-size: 11px; padding: 4px 2px; }
.tcp-card .title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tcp-card .tcp-n { font-size: 10px; color: #44aa44; letter-spacing: 0; white-space: nowrap; }
.tcp-chips { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.tcp-chip {
    font-size: 10px; color: #aaa;
    background: #161616; border: 1px solid #2a2a2a; border-radius: 2px;
    padding: 1px 5px; line-height: 1.5;
}
.tcp-chip b { color: #cccc44; font-weight: normal; margin-left: 3px; }

/* ── Server card (expand inline) ──────────────────────────── */
.server-card { cursor: pointer; align-self: start; min-height: 110px; }
.server-card.open { border-color: #cccc44; background: #14140a; min-height: unset; }
/* :not([hidden]) so the `hidden` attribute actually hides it — a bare
   `display:grid` overrides the HTML hidden attribute, which left the detail
   stuck open (it could expand but never collapse). */
.server-detail:not([hidden]) {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #222;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    font-size: 11px;
}
.server-detail .lbl { color: #555; white-space: nowrap; }
.server-detail .val { color: #aaa; }
/* Storage card: dataset rows grouped (rolling replay / history / permanent / reference). */
/* Too much per row for a single grid cell — when open it takes the whole row. */
#storageCard.open { grid-column: 1 / -1; }
.storage-detail:not([hidden]) { grid-template-columns: max-content 1fr; gap: 4px 18px; font-size: 11.5px; }
.storage-detail .grp { grid-column: 1 / -1; color: #cccc44; letter-spacing: 1.5px; font-size: 10px; margin-top: 6px; }
.storage-detail .grp:first-child { margin-top: 0; }
.storage-detail .val b { color: #ddd; font-weight: normal; }
.storage-detail .bar { display: inline-block; vertical-align: middle; width: 70px; height: 6px; background: #222;
    border-radius: 3px; overflow: hidden; margin-left: 6px; }
.storage-detail .bar i { display: block; height: 100%; background: #cccc44; }
.storage-detail .bar.full i { background: #d9a066; }

/* ── About / contribute ───────────────────────────────────── */
.about { text-align: center; margin-top: 4px; }
.about-line {
    font-size: 11px;
    color: #666;
    letter-spacing: 0.3px;
    line-height: 1.6;
}
.repo-link {
    color: #cccc44;
    text-decoration: none;
    border-bottom: 1px solid #333;
    white-space: nowrap;
}
.repo-link:hover,
.repo-link:focus-visible {
    color: #fff;
    border-bottom-color: #44aa44;
    outline: none;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 560px) {
    header { padding: 9px 12px; }
    header h1 { font-size: 15px; letter-spacing: 2px; }
    header .sub { display: none; }
    .status-bar { width: 100%; margin-left: 0; gap: 4px 12px; }
    .content { padding: 12px 12px 28px; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
    .card { padding: 10px 11px; }
}

/* Throughput stat tiles (home page THROUGHPUT section) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.stat-tile {
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    padding: 14px 16px;
    text-align: center;
}
.stat-tile .v {
    font-size: 22px;
    color: #cccc44;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}
.stat-tile .k {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body {
    font-family: 'Consolas', 'Courier New', monospace;
    background: #000;
    color: #ccc;
    min-height: 100vh;
}

/* ── Header ───────────────────────────────────────────────── */
header {
    background: #0a0a0a;
    border-bottom: 1px solid #333;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
header h1 {
    font-size: 16px;
    color: #cccc44;
    font-weight: normal;
    letter-spacing: 3px;
}
header .sub {
    font-size: 11px;
    color: #555;
    letter-spacing: 1px;
}
.status-bar {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 11px;
    color: #666;
}
.status-bar .stat b { color: #aaa; font-weight: normal; }
.status-bar .live { color: #44aa44; }

/* Universal font-size / UI-scale control (shared frame.js appends it to the header). */
.nav-fontsize { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.nav-fontsize .fs-btn {
    background: #1a1a1a; color: #cccc44; border: 1px solid #444;
    font-family: 'Consolas', monospace; font-size: 11px; line-height: 1;
    padding: 4px 7px; cursor: pointer; user-select: none;
}
.nav-fontsize .fs-btn:hover { background: #333; border-color: #cccc44; }
.nav-fontsize .fs-lbl { min-width: 38px; text-align: center; color: #888; }

/* ── Content ──────────────────────────────────────────────── */
.content {
    padding: 14px 18px 32px;
    max-width: 1500px;
    margin: 0 auto;
}
.group { margin-bottom: 18px; }
.group-title {
    font-size: 10px;
    color: #555;
    letter-spacing: 2px;
    font-weight: normal;
    padding: 0 2px 8px;
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: 10px;
}

/* ── Card grid ────────────────────────────────────────────── */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.card {
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    padding: 11px 13px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.12s, background 0.12s;
}
.card:hover,
.card:focus-visible {
    border-color: #44aa44;
    background: #0d140d;
    outline: none;
}
.card .title {
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
}
.card .title .wip {
    font-size: 9px;
    letter-spacing: 1px;
    color: #ffb300;
    border: 1px solid #5a4300;
    background: #1a1400;
    border-radius: 2px;
    padding: 1px 4px;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    top: -2px;
}
.card .desc {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
    line-height: 1.4;
}
.card .count {
    font-size: 11px;
    color: #44aa44;
    margin-top: 6px;
    min-height: 13px;
}

/* ── Active TCP positions ─────────────────────────────────── */
#tcpSummary { font-size: 10px; color: #44aa44; letter-spacing: 1px; }
.tcp-empty { color: #555; font-size: 11px; padding: 4px 2px; }
.tcp-card .title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tcp-card .tcp-n { font-size: 10px; color: #44aa44; letter-spacing: 0; white-space: nowrap; }
.tcp-chips { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.tcp-chip {
    font-size: 10px; color: #aaa;
    background: #161616; border: 1px solid #2a2a2a; border-radius: 2px;
    padding: 1px 5px; line-height: 1.5;
}
.tcp-chip b { color: #cccc44; font-weight: normal; margin-left: 3px; }

/* ── Server card (expand inline) ──────────────────────────── */
.server-card { cursor: pointer; align-self: start; min-height: 110px; }
.server-card.open { border-color: #cccc44; background: #14140a; min-height: unset; }
/* :not([hidden]) so the `hidden` attribute actually hides it — a bare
   `display:grid` overrides the HTML hidden attribute, which left the detail
   stuck open (it could expand but never collapse). */
.server-detail:not([hidden]) {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #222;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    font-size: 11px;
}
.server-detail .lbl { color: #555; white-space: nowrap; }
.server-detail .val { color: #aaa; }
/* Storage card: dataset rows grouped (rolling replay / history / permanent / reference). */
/* Too much per row for a single grid cell — when open it takes the whole row. */
#storageCard.open { grid-column: 1 / -1; }
.storage-detail:not([hidden]) { grid-template-columns: max-content 1fr; gap: 4px 18px; font-size: 11.5px; }
.storage-detail .grp { grid-column: 1 / -1; color: #cccc44; letter-spacing: 1.5px; font-size: 10px; margin-top: 6px; }
.storage-detail .grp:first-child { margin-top: 0; }
.storage-detail .val b { color: #ddd; font-weight: normal; }
.storage-detail .bar { display: inline-block; vertical-align: middle; width: 70px; height: 6px; background: #222;
    border-radius: 3px; overflow: hidden; margin-left: 6px; }
.storage-detail .bar i { display: block; height: 100%; background: #cccc44; }
.storage-detail .bar.full i { background: #d9a066; }

/* ── About / contribute ───────────────────────────────────── */
.about { text-align: center; margin-top: 4px; }
.about-line {
    font-size: 11px;
    color: #666;
    letter-spacing: 0.3px;
    line-height: 1.6;
}
.repo-link {
    color: #cccc44;
    text-decoration: none;
    border-bottom: 1px solid #333;
    white-space: nowrap;
}
.repo-link:hover,
.repo-link:focus-visible {
    color: #fff;
    border-bottom-color: #44aa44;
    outline: none;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 560px) {
    header { padding: 9px 12px; }
    header h1 { font-size: 15px; letter-spacing: 2px; }
    header .sub { display: none; }
    .status-bar { width: 100%; margin-left: 0; gap: 4px 12px; }
    .content { padding: 12px 12px 28px; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
    .card { padding: 10px 11px; }
}

/* Throughput stat tiles (home page THROUGHPUT section) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.stat-tile {
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    padding: 14px 16px;
    text-align: center;
}
.stat-tile .v {
    font-size: 22px;
    color: #cccc44;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}
.stat-tile .k {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Shared base styles for all SwimReader frontends ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Global dark-themed scrollbars ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #444;
}
/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: #333 #1a1a1a;
}

/* ── HOME navigation button (top-left, floating) ── */
.nav-home {
    position: absolute; top: 8px; left: 8px; z-index: 1000;
    background: #1a1a1a; color: #cccc44; border: 1px solid #444;
    padding: 4px 10px; font-family: 'Consolas', monospace; font-size: 11px;
    text-decoration: none; cursor: pointer; user-select: none;
    line-height: 1.4;
}
.nav-home:hover { background: #333; border-color: #cccc44; }