:root {
    --bg: #050607;
    --panel: #0c0e11;
    --panel2: #15181e;
    --line: #827866;
    --line-soft: #39362f;
    --text: #d8d5cd;
    --muted: #969187;
    --green: #34ff70;
    --green-soft: #74ff98;
    --amber: #d8a13b;
    --blue: #7fc7ff;
    --danger: #ff6a6a;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(
            circle at 50% 0%,
            #151821 0,
            #050607 44%,
            #000 100%
        );
    color: var(--text);
    font-family:
        "Courier New",
        ui-monospace,
        monospace;
}

body {
    padding: 68px 16px;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.radio-shell {
    width: min(1180px, 100%);
    margin: auto;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow:
        0 30px 90px #000,
        0 0 0 8px #050607;
}

.titlebar {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: #20242c;
    border-bottom: 1px solid var(--line);
    letter-spacing: 2px;
    font-size: 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bolt {
    color: var(--green);
    font-size: 21px;
    font-weight: bold;
}

.engine {
    color: var(--muted);
    font-size: 9px;
}

.top-state {
    color: var(--muted);
}

.top-state.streaming {
    color: var(--green);
}

.display {
    margin: 10px;
    padding: 22px 24px 15px;
    min-height: 205px;
    background:
        linear-gradient(
            180deg,
            #020402,
            #030503
        );
    border: 1px solid #171c16;
    box-shadow:
        inset 0 0 30px #000;
}

.display-main {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 18px;
}

.elapsed {
    color: var(--green);
    font-size: 49px;
    line-height: 1;
    text-shadow:
        0 0 8px rgba(52,255,112,.55);
}

.now {
    min-width: 0;
}

.now-topline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.now-title {
    min-width: 0;
    color: var(--green);
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quality-badge {
    flex: none;
    padding: 3px 7px;
    border: 1px solid var(--green);
    color: var(--green);
    font-size: 10px;
}

.quality-badge.lossless {
    color: #fff;
    border-color: #fff;
    box-shadow:
        0 0 8px rgba(255,255,255,.3);
}

.hidden {
    display: none;
}

.identity {
    margin-top: 9px;
    color: #a8a49a;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.telemetry {
    margin-top: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--amber);
    font-size: 10px;
}

.telemetry span:nth-child(1) {
    color: var(--blue);
}

.visualizer {
    height: 66px;
    margin-top: 20px;
    border-top: 1px solid #5b574c;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding-top: 8px;
    overflow: hidden;
}

.vbar {
    flex: 1;
    min-width: 2px;
    max-width: 8px;
    height: 4px;
    background:
        linear-gradient(
            to top,
            #2f8f43 0 60%,
            #bd8b25 60% 82%,
            #8f302d 82%
        );
    opacity: .85;
    transition: height .15s linear;
}

.transport {
    min-height: 61px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:
        linear-gradient(
            #20232a,
            #15171c
        );
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line);
}

.transport-buttons {
    display: flex;
    gap: 7px;
}

.transport button,
.button-row button,
.nav-button {
    min-height: 31px;
    padding: 0 14px;
    color: var(--text);
    background:
        linear-gradient(
            #262a31,
            #15171b
        );
    border: 1px solid #716957;
    box-shadow:
        inset 1px 1px #373c45;
}

.transport button:hover,
.button-row button:hover,
.nav-button:hover {
    color: var(--green);
    border-color: var(--green);
}

.transport .play {
    color: var(--green);
}

.volume {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 10px;
}

.volume input {
    accent-color: var(--green);
    width: 170px;
}

.quality-panel {
    padding: 11px 14px 13px;
    border-bottom: 1px solid var(--line);
}

.section-label {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.button-row button {
    min-height: 27px;
    font-size: 10px;
}

.button-row button.active {
    color: var(--green);
    border-color: var(--green);
}

.library-header {
    min-height: 62px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--line);
}

.library-summary {
    color: var(--green-soft);
    font-size: 10px;
}

.search {
    width: min(320px, 45vw);
    height: 34px;
    padding: 0 11px;
    color: var(--text);
    background: #080a0b;
    border: 1px solid #716957;
    outline: none;
}

.search:focus {
    border-color: var(--green);
}

.library-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 400px;
}

.sidebar {
    padding: 14px 10px;
    border-right: 1px solid var(--line);
    background: #090b0d;
}

.nav-group + .nav-group {
    margin-top: 22px;
}

.nav-heading {
    margin: 0 8px 7px;
    color: #69675f;
    font-size: 9px;
    letter-spacing: 2px;
}

.nav-button {
    width: 100%;
    min-height: 29px;
    margin-bottom: 3px;
    padding: 0 9px;
    text-align: left;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    font-size: 10px;
}

.nav-button.active {
    color: var(--green);
    border-color: #31583b;
    background: #0e1711;
}

.station-pane {
    min-width: 0;
}

.station-head {
    height: 39px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    border-bottom: 1px solid var(--line-soft);
    font-size: 10px;
    letter-spacing: 1px;
}

.station-row {
    min-height: 58px;
    display: grid;
    grid-template-columns:
        28px
        minmax(170px, 1.6fr)
        minmax(100px, .8fr)
        minmax(130px, 1fr)
        88px
        30px;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid #514c41;
    cursor: pointer;
}

.station-row:hover {
    background: #11151a;
}

.station-row.selected {
    background:
        linear-gradient(
            90deg,
            #102016,
            #0c1110 55%,
            #0c0e11
        );
    box-shadow:
        inset 3px 0 var(--green);
}

.station-dot {
    color: #aaa69d;
}

.station-row.selected .station-dot {
    color: var(--green);
}

.station-name {
    font-size: 13px;
}

.station-genres {
    margin-top: 3px;
    color: #89867e;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.provider {
    color: #aaa69d;
    font-size: 10px;
}

.stream-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.badge {
    padding: 2px 5px;
    border: 1px solid #49473f;
    color: #aaa69d;
    font-size: 8px;
    text-transform: uppercase;
}

.badge.hifi {
    border-color: var(--green);
    color: var(--green);
}

.policy {
    color: #77736a;
    font-size: 9px;
    text-transform: uppercase;
}

.favorite {
    border: 0;
    background: none;
    color: #aaa69d;
    font-size: 15px;
}

.favorite.on {
    color: var(--green);
}

.empty {
    padding: 50px 20px;
    text-align: center;
    color: var(--muted);
}

footer {
    min-height: 28px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #8c887e;
    background: #17191e;
    border-top: 1px solid var(--line);
    font-size: 9px;
    letter-spacing: 1px;
}

@media (max-width: 800px) {

    body {
        padding: 20px 8px;
    }

    .display-main {
        grid-template-columns: 1fr;
    }

    .elapsed {
        font-size: 36px;
    }

    .library-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .nav-group {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .nav-heading {
        width: 100%;
    }

    .nav-button {
        width: auto;
    }

    .station-row {
        grid-template-columns:
            20px
            minmax(130px, 1fr)
            80px
            30px;
    }

    .stream-badges,
    .policy {
        display: none;
    }

    .transport {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }
}

/* ============================================================
   MABNET // RADIO-01
   UI 0.5 — MABNET TERMINAL
   ============================================================ */

:root {
    --mab-black: #050706;
    --mab-panel: #090d0b;
    --mab-panel-2: #0d1210;
    --mab-metal: #171b1a;
    --mab-line: #3a403a;
    --mab-line-soft: #222823;
    --mab-text: #b9bdb7;
    --mab-dim: #727970;
    --mab-green: #39ff78;
    --mab-green-dim: #16883d;
    --mab-amber: #d59b35;
    --mab-red: #c84b42;
}

body {
    background:
        radial-gradient(
            circle at 50% -10%,
            #161b1d 0,
            #090c0d 32%,
            #030404 72%
        );
}

.radio-shell {
    position: relative;
    border: 1px solid #54584f;
    background: var(--mab-black);
    box-shadow:
        0 0 0 5px #020303,
        0 0 0 6px #191d1a,
        0 24px 80px rgba(0, 0, 0, .75);
}

.radio-shell::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 100;
    opacity: .11;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.045) 0,
            rgba(255,255,255,.045) 1px,
            transparent 1px,
            transparent 4px
        );
}

.titlebar {
    background:
        linear-gradient(
            180deg,
            #252a2d,
            #171b1d
        );
    border-bottom:
        1px solid #626254;
    min-height: 42px;
}

.brand {
    letter-spacing: .18em;
    color: #d3d6d0;
}

.bolt {
    color: var(--mab-green);
    text-shadow:
        0 0 8px rgba(57,255,120,.7);
}

.engine {
    color: #777d76;
}

.top-state.streaming {
    color: var(--mab-green);
    text-shadow:
        0 0 8px rgba(57,255,120,.45);
}

.machine-strip {
    display: grid;
    grid-template-columns:
        .8fr
        .8fr
        1.35fr
        .7fr
        .8fr;
    background: #070a09;
    border-bottom: 1px solid #3b403a;
}

.machine-cell {
    min-width: 0;
    padding: 9px 12px;
    border-right:
        1px solid var(--mab-line-soft);
}

.machine-cell:last-child {
    border-right: 0;
}

.machine-label,
.signal-label {
    display: block;
    margin-bottom: 4px;
    color: #5e665e;
    font-size: 8px;
    letter-spacing: .2em;
}

.machine-value,
.signal-value {
    color: #aeb4ad;
    font-size: 10px;
    letter-spacing: .08em;
}

.machine-link .machine-value {
    color: var(--mab-green);
}

.status-lamp {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--mab-green);
    box-shadow:
        0 0 7px rgba(57,255,120,.85);
}

.display {
    position: relative;
    margin: 10px;
    border:
        1px solid #353c35;
    background:
        linear-gradient(
            180deg,
            #010302,
            #020503
        );
    box-shadow:
        inset 0 0 35px rgba(0,0,0,.9),
        inset 0 0 18px rgba(23,255,93,.025);
}

.scope-label {
    display: flex;
    justify-content: space-between;
    padding: 7px 11px;
    border-bottom:
        1px solid #1e2a21;
    color: #526057;
    font-size: 8px;
    letter-spacing: .2em;
}

#signalLock {
    color: var(--mab-amber);
}

.top-state.streaming ~ * #signalLock,
body.streaming #signalLock {
    color: var(--mab-green);
}

.now-title {
    color: var(--mab-green);
    text-shadow:
        0 0 7px rgba(57,255,120,.32);
}

.elapsed {
    color: var(--mab-green);
    text-shadow:
        0 0 6px rgba(57,255,120,.55),
        0 0 16px rgba(57,255,120,.18);
}

.identity {
    color: #747c74;
}

.telemetry {
    border-top:
        1px solid rgba(57,255,120,.08);
    padding-top: 7px;
}

.visualizer {
    position: relative;
    border-top:
        1px solid #252b25;
    background:
        linear-gradient(
            180deg,
            rgba(8,20,12,.25),
            rgba(0,0,0,.25)
        );
}

.visualizer::before {
    content:
        "-12        -9        -6        -3        0 dB";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 3px;
    color: rgba(93,117,99,.26);
    font-size: 7px;
    letter-spacing: .12em;
    pointer-events: none;
}

.vbar {
    box-shadow:
        0 0 4px rgba(57,255,120,.13);
}

.signal-panel {
    margin: 0 10px 10px;
    border:
        1px solid var(--mab-line);
    background: #080b09;
}

.signal-header {
    display: flex;
    justify-content: space-between;
    padding: 7px 10px;
    border-bottom:
        1px solid var(--mab-line-soft);
    background:
        linear-gradient(
            90deg,
            #111612,
            #090c0a
        );
    color: #747d74;
    font-size: 8px;
    letter-spacing: .18em;
}

#signalState {
    color: var(--mab-amber);
}

.signal-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
}

.signal-cell {
    min-width: 0;
    padding: 8px 10px;
    border-right:
        1px solid var(--mab-line-soft);
}

.signal-cell:last-child {
    border-right: 0;
}

.signal-value {
    overflow: hidden;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.transport,
.quality-panel {
    background:
        linear-gradient(
            180deg,
            #171b1c,
            #101314
        );
}

.transport button,
.button-row button {
    border:
        1px solid #65665b;
    background:
        linear-gradient(
            180deg,
            #25292a,
            #16191a
        );
    box-shadow:
        inset 0 1px rgba(255,255,255,.04);
}

.transport button:hover,
.button-row button:hover {
    border-color:
        var(--mab-green-dim);
}

.transport .play {
    color: var(--mab-green);
}

.button-row button.active {
    border-color: var(--mab-green);
    color: var(--mab-green);
    background:
        linear-gradient(
            180deg,
            #102016,
            #0a130d
        );
    box-shadow:
        inset 0 0 10px rgba(57,255,120,.07),
        0 0 8px rgba(57,255,120,.05);
}

.library-header {
    background:
        linear-gradient(
            180deg,
            #0e1210,
            #080b09
        );
    border-top:
        1px solid #4b4d45;
}

.library-summary {
    color: var(--mab-green);
}

.library-grid {
    min-height: 540px;
}

.sidebar {
    background:
        linear-gradient(
            90deg,
            #070a08,
            #0a0e0b
        );
}

.nav-heading {
    color: #4f5b52;
    letter-spacing: .22em;
}

.nav-button {
    transition:
        color .12s ease,
        background .12s ease,
        border-color .12s ease;
}

.nav-button.active {
    color: var(--mab-green);
    background:
        linear-gradient(
            90deg,
            rgba(57,255,120,.09),
            rgba(57,255,120,.015)
        );
    border-color:
        rgba(57,255,120,.32);
}

.station-head {
    background: #090c0a;
}

.station-row {
    min-height: 48px;
    background: #090c0b;
}

.station-row:nth-child(even) {
    background: #0b0e0d;
}

.station-row:hover {
    background: #101611;
}

.station-row.selected {
    background:
        linear-gradient(
            90deg,
            rgba(57,255,120,.105),
            rgba(57,255,120,.018) 45%,
            transparent
        );
    box-shadow:
        inset 3px 0 var(--mab-green);
}

.station-row.selected .station-dot {
    background: var(--mab-green);
    box-shadow:
        0 0 7px rgba(57,255,120,.8);
}

.badge.hifi {
    color: var(--mab-green);
    border-color:
        var(--mab-green-dim);
}

.policy {
    color: #686e68;
}

.search {
    background: #050706;
    border-color: #54564c;
}

.search:focus {
    border-color: var(--mab-green-dim);
    box-shadow:
        0 0 0 1px rgba(57,255,120,.08);
}

footer {
    background:
        linear-gradient(
            180deg,
            #181c1d,
            #111415
        );
    border-top:
        1px solid #55564d;
    color: #656b65;
}

@media (max-width: 900px) {
    .machine-strip {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .machine-cell {
        border-bottom:
            1px solid var(--mab-line-soft);
    }

    .signal-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .signal-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


/* ============================================================
   MABNET // RADIO-01
   UI 0.5.1 — PALETTE NORMALIZATION

   GOTHAM / INDUSTRIAL BASE
   MATRIX SIGNAL LAYER
   2001 DISCIPLINE
   TERMINATOR EXCEPTION STATES
   ============================================================ */

:root {
    --mn-black: #050607;
    --mn-black-2: #080a0c;
    --mn-charcoal: #0d1013;
    --mn-panel: #111419;
    --mn-panel-raised: #171b20;
    --mn-steel: #232830;

    --mn-border-dark: #252a30;
    --mn-border: #3b4148;
    --mn-border-bright: #565d64;

    --mn-text: #b8bdc1;
    --mn-text-bright: #d5d9dc;
    --mn-muted: #737a80;
    --mn-faint: #454b50;

    --mn-green: #32f579;
    --mn-green-dim: #178b48;
    --mn-green-dark: #0b3c24;

    --mn-amber: #d59b3d;
    --mn-red: #d4544d;
}


/* ------------------------------------------------------------
   CHASSIS
   ------------------------------------------------------------ */

body {
    background:
        radial-gradient(
            ellipse at 50% 0%,
            #171b20 0%,
            #0a0c0f 38%,
            #030405 76%
        );
}

.radio-shell {
    background: var(--mn-black-2);

    border:
        1px solid var(--mn-border-bright);

    box-shadow:
        0 0 0 4px #020304,
        0 0 0 5px #1a1e22,
        0 28px 90px rgba(0,0,0,.82);
}


/* ------------------------------------------------------------
   TITLE / EQUIPMENT HEADER
   ------------------------------------------------------------ */

.titlebar {
    background:
        linear-gradient(
            180deg,
            #242930 0%,
            #171b20 52%,
            #121519 100%
        );

    border-bottom:
        1px solid #50565b;
}

.brand {
    color: var(--mn-text-bright);
}

.engine {
    color: var(--mn-muted);
}

.machine-strip {
    background:
        linear-gradient(
            180deg,
            #0d1013,
            #090b0d
        );

    border-bottom:
        1px solid var(--mn-border);
}

.machine-cell {
    border-right:
        1px solid var(--mn-border-dark);
}

.machine-label,
.signal-label {
    color: #596067;
}

.machine-value,
.signal-value {
    color: #aeb4b8;
}


/* ------------------------------------------------------------
   PRIMARY MONITOR
   ------------------------------------------------------------ */

.display {
    background:
        linear-gradient(
            180deg,
            #030504,
            #010202
        );

    border:
        1px solid #343a3e;

    box-shadow:
        inset 0 0 42px rgba(0,0,0,.96),
        inset 0 0 20px rgba(50,245,121,.018);
}

.scope-label {
    color: #56605b;

    border-bottom:
        1px solid #1d2221;
}


/* Green now has a job: LIVE SIGNAL. */

.elapsed,
.now-title {
    color: var(--mn-green);
}

.identity {
    color: #777e82;
}

.telemetry {
    color: #8c9295;
}


/* ------------------------------------------------------------
   SIGNAL INTELLIGENCE
   ------------------------------------------------------------ */

.signal-panel {
    background: #090b0d;

    border:
        1px solid var(--mn-border);
}

.signal-header {
    background:
        linear-gradient(
            180deg,
            #15191d,
            #101316
        );

    border-bottom:
        1px solid var(--mn-border-dark);

    color: #777e83;
}

.signal-cell {
    border-right:
        1px solid var(--mn-border-dark);
}


/* ------------------------------------------------------------
   TRANSPORT HARDWARE
   ------------------------------------------------------------ */

.transport,
.quality-panel {
    background:
        linear-gradient(
            180deg,
            #1b1f24,
            #111419
        );

    border-color:
        #444a50;
}

.transport button,
.button-row button {
    color: #aeb3b6;

    background:
        linear-gradient(
            180deg,
            #282d33,
            #171b20
        );

    border:
        1px solid #555b60;

    box-shadow:
        inset 0 1px rgba(255,255,255,.055),
        0 1px 2px rgba(0,0,0,.65);
}

.transport button:hover,
.button-row button:hover {
    color: var(--mn-text-bright);

    border-color:
        #747b80;

    background:
        linear-gradient(
            180deg,
            #30363c,
            #1b2025
        );
}

.transport .play {
    color: var(--mn-green);
}


/* Active controls get signal green,
   inactive controls remain steel. */

.button-row button.active {
    color: var(--mn-green);

    border-color:
        var(--mn-green-dim);

    background:
        linear-gradient(
            180deg,
            #17221c,
            #101713
        );

    box-shadow:
        inset 0 0 9px rgba(50,245,121,.05);
}


/* ------------------------------------------------------------
   LIBRARY
   ------------------------------------------------------------ */

.library-header {
    background:
        linear-gradient(
            180deg,
            #13171a,
            #0c0f12
        );

    border-top:
        1px solid #464c51;

    border-bottom:
        1px solid #343a3f;
}

.library-grid {
    background: var(--mn-black-2);
}

.sidebar {
    background:
        linear-gradient(
            90deg,
            #080a0c,
            #0c0f11
        );

    border-right:
        1px solid #3a4045;
}

.nav-heading {
    color: #525a60;
}

.nav-button {
    color: #9ca2a6;
}

.nav-button:hover {
    color: #d0d4d7;

    background:
        rgba(255,255,255,.025);
}

.nav-button.active {
    color: var(--mn-green);

    background:
        linear-gradient(
            90deg,
            rgba(50,245,121,.075),
            rgba(50,245,121,.012)
        );

    border-color:
        rgba(50,245,121,.30);
}


/* ------------------------------------------------------------
   STATION MATRIX
   ------------------------------------------------------------ */

.station-pane {
    background: #080a0c;
}

.station-head {
    background: #101316;
    color: #72797e;
}

.station-row {
    background: #090b0d;

    border-color:
        #353a3e;
}

.station-row:nth-child(even) {
    background: #0c0f11;
}

.station-row:hover {
    background: #13171a;
}

.station-row.selected {
    background:
        linear-gradient(
            90deg,
            rgba(50,245,121,.085),
            rgba(28,35,32,.42) 34%,
            rgba(11,14,16,.2) 75%
        );

    box-shadow:
        inset 3px 0
        var(--mn-green);
}

.station-dot {
    background: #9da2a2;
}


/* Fix the giant neon blob.
   This should look like an indicator,
   not a radioactive cube. */

.station-row.selected .station-dot {
    width: 7px;
    height: 7px;

    background: var(--mn-green);

    box-shadow:
        0 0 4px
        rgba(50,245,121,.65);
}


/* ------------------------------------------------------------
   BADGES / STATUS
   ------------------------------------------------------------ */

.badge {
    color: #858b8e;

    background: #111416;

    border-color: #41464a;
}

.badge.hifi {
    color: var(--mn-green);

    background:
        rgba(50,245,121,.035);

    border-color:
        var(--mn-green-dim);
}

.policy {
    color: #686f73;
}

.favorite {
    color: #8b9092;
}

.favorite.on {
    color: var(--mn-amber);
}


/* ------------------------------------------------------------
   INPUT
   ------------------------------------------------------------ */

.search {
    color: #b8bdc1;

    background: #07090b;

    border-color: #50565b;
}

.search:focus {
    border-color:
        var(--mn-green-dim);

    box-shadow:
        0 0 0 1px
        rgba(50,245,121,.06);
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

footer {
    background:
        linear-gradient(
            180deg,
            #191d21,
            #101317
        );

    border-top:
        1px solid #4b5156;

    color: #666d72;
}


/* ------------------------------------------------------------
   STATUS SEMANTICS
   ------------------------------------------------------------ */

.status-lamp {
    background: var(--mn-green);

    box-shadow:
        0 0 6px
        rgba(50,245,121,.65);
}

#signalLock,
#signalState {
    color: var(--mn-amber);
}

.top-state.streaming {
    color: var(--mn-green);
}


/* ------------------------------------------------------------
   SPECTRUM
   ------------------------------------------------------------ */

.visualizer {
    background:
        linear-gradient(
            180deg,
            rgba(8,12,11,.4),
            rgba(1,2,2,.7)
        );
}


/* ------------------------------------------------------------
   REDUCE OVERALL GREEN HAZE
   ------------------------------------------------------------ */

.library-summary {
    color: #8fa99a;
}

.section-label {
    color: #747b80;
}


/* ============================================================
   MABNET // RADIO-01
   UI 0.5.2 — STATION INDICATOR NORMALIZATION

   Station markers are equipment LEDs, not content blocks.
   ============================================================ */

.station-dot {
    display: block !important;

    width: 6px !important;
    min-width: 6px !important;
    max-width: 6px !important;

    height: 6px !important;
    min-height: 6px !important;
    max-height: 6px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #8a9092 !important;

    box-shadow:
        inset 0 0 1px rgba(255,255,255,.35) !important;

    opacity: .72;

    flex: 0 0 6px !important;

    align-self: center;

    overflow: hidden !important;
}

.station-row:hover .station-dot {
    background: #b3b8ba !important;
    opacity: .9;
}

.station-row.selected .station-dot {
    width: 7px !important;
    min-width: 7px !important;
    max-width: 7px !important;

    height: 7px !important;
    min-height: 7px !important;
    max-height: 7px !important;

    flex-basis: 7px !important;

    background: var(--mn-green) !important;

    opacity: 1;

    box-shadow:
        0 0 3px rgba(50,245,121,.95),
        0 0 8px rgba(50,245,121,.35) !important;
}


/* Keep status indicators visually distinct from station LEDs. */

.status-lamp {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--mn-green);

    box-shadow:
        0 0 4px rgba(50,245,121,.75);
}


/* Final station-row hierarchy lock. */

.station-row {
    min-height: 52px;
}

.station-row.selected {
    border-left-color:
        var(--mn-green) !important;
}


/* ============================================================
   MABNET // RADIO-01
   UI 0.6.0
   SIGNAL MEMORY
   ============================================================ */

.memory-panel {
    border-top: 1px solid #343941;
    border-bottom: 1px solid #050607;
    background:
        linear-gradient(
            180deg,
            #111419 0%,
            #0b0e12 100%
        );
}

.memory-header,
.memory-section-head {
    min-height: 28px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #292e35;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #9ca5af;
}

.memory-state {
    color: #67a878;
}

.memory-state.error {
    color: #b46d5d;
}

.memory-stats {
    display: grid;
    grid-template-columns:
        minmax(90px, 0.7fr)
        minmax(120px, 0.9fr)
        minmax(90px, 0.7fr)
        minmax(180px, 2fr);
    border-bottom: 1px solid #292e35;
}

.memory-stat {
    min-width: 0;
    padding: 10px 12px;
    border-right: 1px solid #292e35;
}

.memory-stat:last-child {
    border-right: 0;
}

.memory-stat-label {
    display: block;
    margin-bottom: 5px;
    color: #626b75;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.memory-stat strong {
    display: block;
    overflow: hidden;
    color: #c5cbd1;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.memory-stat:not(.memory-last) strong {
    color: #79a987;
    font-family:
        "Courier New",
        monospace;
    font-size: 16px;
}

.memory-section-head {
    color: #737d87;
    background: #090b0e;
}

.recent-history {
    max-height: 224px;
    overflow-y: auto;
}

.history-row {
    display: grid;
    grid-template-columns:
        62px
        minmax(110px, 0.9fr)
        minmax(180px, 1.6fr)
        minmax(120px, 0.9fr);
    gap: 10px;
    align-items: center;
    min-height: 35px;
    padding: 0 12px;
    border-bottom: 1px solid #1d2228;
    color: #9099a3;
    font-size: 11px;
}

.history-row:nth-child(even) {
    background: rgba(255,255,255,0.012);
}

.history-row:hover {
    background: #151a1f;
}

.history-time {
    color: #5f6973;
    font-family:
        "Courier New",
        monospace;
}

.history-artist,
.history-track,
.history-station {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-artist {
    color: #aeb5bc;
}

.history-track {
    color: #d0d4d8;
}

.history-station {
    text-align: right;
    color: #718c79;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.history-empty {
    padding: 18px 12px;
    color: #505861;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-align: center;
}

body.streaming .memory-state {
    color: #78ad86;
    text-shadow:
        0 0 8px rgba(83, 155, 101, 0.22);
}

@media (max-width: 760px) {
    .memory-stats {
        grid-template-columns:
            1fr
            1fr;
    }

    .memory-stat:nth-child(2) {
        border-right: 0;
    }

    .memory-stat:nth-child(-n+2) {
        border-bottom: 1px solid #292e35;
    }

    .history-row {
        grid-template-columns:
            52px
            minmax(90px, 0.8fr)
            minmax(120px, 1.4fr);
    }

    .history-station {
        display: none;
    }
}

/* ==========================================================
   MABNET // RADIO-01
   UI 0.8.0 — RESPONSIVE CONSOLE

   Authoritative geometry layer.
   Preserves the established UI 0.7 visual language while
   allowing RADIO-01 to scale from workstation to pocket radio.
   ========================================================== */

/* ----------------------------------------------------------
   GLOBAL GEOMETRY
   ---------------------------------------------------------- */

html {
    width: 100%;
    min-width: 0;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.radio-shell {
    width: min(96vw, 1600px);
    max-width: 1600px;
    min-width: 0;
    margin-inline: auto;
}

/*
 * Metadata-bearing flex/grid descendants must be allowed to
 * shrink. Without this, long track/station names can force
 * parents wider than the viewport.
 */
.radio-shell *,
.radio-shell *::before,
.radio-shell *::after {
    box-sizing: border-box;
}

.display,
.display-main,
.now,
.now-topline,
.identity,
.telemetry,
.signal-panel,
.signal-grid,
.signal-cell,
.memory-panel,
.memory-stats,
.memory-stat,
.transport,
.library,
.library-header,
.library-grid,
.sidebar,
.station-pane,
.station-head,
.station-row,
.recent-history,
.history-row {
    min-width: 0;
}

/* ----------------------------------------------------------
   FLUID DESKTOP
   ---------------------------------------------------------- */

.display {
    padding-inline:
        clamp(12px, 1.4vw, 24px);
}

.display-main {
    grid-template-columns:
        clamp(108px, 10vw, 150px)
        minmax(0, 1fr);
    gap:
        clamp(12px, 1.6vw, 24px);
}

.elapsed {
    font-size:
        clamp(32px, 3.4vw, 52px);
}

.now-title,
.identity,
.signal-value,
.memory-stat strong,
.history-artist,
.history-track,
.history-station {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.now-title,
.identity {
    white-space: nowrap;
}

/* Six signal cells expand evenly on large displays. */
.signal-grid {
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
}

/* Memory has three compact counters and one flexible last hit. */
.memory-stats {
    grid-template-columns:
        repeat(3, minmax(105px, .7fr))
        minmax(240px, 2.4fr);
}

/* Library uses a fluid navigation rail. */
.library-grid {
    grid-template-columns:
        clamp(190px, 17vw, 250px)
        minmax(0, 1fr);
}

.sidebar {
    width: auto;
}

.station-pane {
    width: 100%;
}

/* Search grows without becoming absurdly wide. */
.search {
    width:
        clamp(220px, 27vw, 430px);
    max-width: 100%;
}

/* Station matrix gets progressively more breathing room. */
.station-row {
    min-width: 0;
}

/* Don't make a tall viewport create an artificial empty panel. */
.library-grid,
.sidebar,
.station-pane {
    min-height: 0;
}

/* ----------------------------------------------------------
   LARGE WORKSTATION
   ---------------------------------------------------------- */

@media (min-width: 1400px) {

    .radio-shell {
        width: min(94vw, 1600px);
    }

    .library-grid {
        grid-template-columns:
            clamp(220px, 16vw, 270px)
            minmax(0, 1fr);
    }

    .station-row {
        padding-inline:
            clamp(10px, 1vw, 16px);
    }
}

/* ----------------------------------------------------------
   COMPACT DESKTOP / TABLET
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    .radio-shell {
        width: min(98vw, 1100px);
    }

    .machine-strip {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .machine-cell:nth-child(4),
    .machine-cell:nth-child(5) {
        border-top:
            1px solid rgba(219, 230, 220, 0.08);
    }

    .signal-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .memory-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .memory-last {
        grid-column: 1 / -1;
    }

    .library-grid {
        grid-template-columns:
            clamp(175px, 22vw, 215px)
            minmax(0, 1fr);
    }
}

/* ----------------------------------------------------------
   TABLET / NARROW CONSOLE
   ---------------------------------------------------------- */

@media (max-width: 820px) {

    body {
        padding:
            clamp(4px, 1vw, 8px);
    }

    .radio-shell {
        width: 100%;
        max-width: none;
    }

    .titlebar {
        gap: 8px;
    }

    .brand {
        min-width: 0;
    }

    .engine {
        display: none;
    }

    .machine-strip {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .machine-cell {
        min-width: 0;
    }

    .machine-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .display-main {
        grid-template-columns:
            minmax(90px, 112px)
            minmax(0, 1fr);
    }

    .telemetry {
        gap: 8px;
    }

    .signal-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .memory-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .memory-last {
        grid-column: 1 / -1;
    }

    .transport {
        flex-wrap: wrap;
        gap: 10px;
    }

    .transport-buttons {
        flex: 1 1 auto;
    }

    .volume {
        flex: 1 1 240px;
        width: auto;
        min-width: 200px;
    }

    /*
     * The permanent sidebar stops being a sidebar here.
     * Filters become a horizontal navigation surface above
     * the station matrix.
     */
    .library-grid {
        display: block;
    }

    .sidebar {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        min-height: 0;
        max-height: 260px;
        overflow-y: auto;
        border-right: 0;
        border-bottom:
            1px solid rgba(219, 230, 220, 0.10);
    }

    .sidebar .nav-group:first-child {
        grid-column: 1 / -1;
    }

    .station-pane {
        width: 100%;
    }
}

/* ----------------------------------------------------------
   MOBILE — POCKET RADIO
   ---------------------------------------------------------- */

@media (max-width: 620px) {

    body {
        padding: 0;
    }

    .radio-shell {
        width: 100%;
        margin: 0;
        border-left: 0;
        border-right: 0;
    }

    /* Header remains a machine status bar, not a desktop menu. */
    .titlebar {
        min-height: 38px;
        padding-inline: 10px;
    }

    .brand {
        gap: 7px;
    }

    .engine {
        display: none;
    }

    .top-state {
        flex: none;
        white-space: nowrap;
    }

    /* Node metadata becomes a compact 2xN diagnostic grid. */
    .machine-strip {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .machine-cell {
        padding:
            7px 9px;
    }

    .machine-cell:nth-child(3) {
        grid-column: 1 / -1;
    }

    /* Main display becomes vertically composed. */
    .display {
        min-height: 0;
        padding:
            10px;
    }

    .display-main {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .elapsed {
        font-size:
            clamp(28px, 11vw, 42px);
        line-height: .95;
    }

    .now {
        width: 100%;
    }

    .now-topline {
        width: 100%;
        min-width: 0;
    }

    .now-title {
        font-size:
            clamp(12px, 3.5vw, 15px);
    }

    .identity {
        margin-top: 4px;
        font-size:
            clamp(8px, 2.5vw, 10px);
    }

    .telemetry {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 4px 10px;
        width: 100%;
    }

    .telemetry span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Preserve real FFT, just reduce its vertical footprint. */
    .visualizer {
        height: 52px;
        min-height: 52px;
        margin-top: 9px;
    }

    /* Signal intelligence becomes readable instrumentation. */
    .signal-header,
    .memory-header,
    .memory-section-head {
        gap: 8px;
    }

    .signal-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .signal-cell {
        min-height: 52px;
        padding:
            8px 9px;
    }

    .signal-value {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Four stats become 2 + 2 rather than squeezing across. */
    .memory-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .memory-last {
        grid-column: 1 / -1;
    }

    /*
     * History stops pretending to be a desktop table.
     * Time remains the small leading instrument; content stacks.
     */
    .history-row {
        grid-template-columns:
            48px minmax(0, 1fr);
        grid-template-areas:
            "time artist"
            "time track";
        gap:
            2px 8px;
        min-height: 48px;
        padding:
            7px 8px;
    }

    .history-time {
        grid-area: time;
        align-self: center;
    }

    .history-artist {
        grid-area: artist;
    }

    .history-track {
        grid-area: track;
    }

    .history-station {
        display: none;
    }

    /* Transport is deliberately finger-sized. */
    .transport {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        padding:
            9px;
    }

    .transport-buttons {
        display: grid;
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
        gap: 5px;
        width: 100%;
    }

    .transport-buttons button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding:
            7px 4px;
    }

    .volume {
        display: grid;
        grid-template-columns:
            auto minmax(0, 1fr) auto;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    .volume input {
        width: 100%;
        min-width: 0;
    }

    .quality-panel {
        padding:
            8px 9px;
    }

    .button-row {
        display: grid;
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    .button-row button {
        width: 100%;
        min-width: 0;
        min-height: 40px;
    }

    /* Library header becomes title + full-width search. */
    .library-header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: stretch;
        padding:
            9px;
    }

    .search {
        width: 100%;
        height: 42px;
        max-width: none;
    }

    /*
     * Mobile filters are intentionally bounded. They remain
     * available without forcing hundreds of genre links ahead
     * of the actual station list.
     */
    .sidebar {
        display: block;
        width: 100%;
        max-height: 190px;
        overflow-y: auto;
        padding:
            8px;
        border-right: 0;
    }

    .nav-group {
        margin-bottom: 9px;
    }

    #collectionNav,
    #genreNav {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .nav-button {
        width: auto;
        min-height: 36px;
        padding:
            6px 9px;
    }

    /*
     * Station matrix becomes a mobile station card.
     * Existing DOM remains intact; we only recompose it.
     */
    .station-head {
        display: flex;
        min-height: 36px;
        padding:
            7px 9px;
    }

    .station-row {
        min-height: 58px;
        padding:
            8px 9px;
        gap:
            4px 8px;
    }

    .station-name {
        min-width: 0;
    }

    .station-genres {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    footer {
        flex-wrap: wrap;
        gap:
            4px 10px;
        padding-inline:
            9px;
    }
}

/* ----------------------------------------------------------
   VERY SMALL HANDSETS
   ---------------------------------------------------------- */

@media (max-width: 390px) {

    .titlebar {
        padding-inline: 7px;
    }

    .machine-strip {
        grid-template-columns: 1fr;
    }

    .machine-cell:nth-child(3) {
        grid-column: auto;
    }

    .signal-grid {
        grid-template-columns: 1fr;
    }

    .memory-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .transport-buttons {
        gap: 3px;
    }

    .transport-buttons button {
        font-size: 9px;
    }

    .button-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .visualizer {
        height: 46px;
        min-height: 46px;
    }
}

/* ==========================================================
   END UI 0.8.0
   ========================================================== */

/* ==========================================================
   MABNET // RADIO-01
   UI 0.8.1 — FLUID SPECTRUM

   The analyser still supplies the same 72 measured FFT bars.
   Geometry now consumes the entire available scope width.
   ========================================================== */

.visualizer {
    display: grid !important;

    /*
     * One equal-width track per measured spectrum bar.
     * 72 measurements remain 72 visual bars at every width.
     */
    grid-template-columns:
        repeat(72, minmax(0, 1fr)) !important;

    align-items: end !important;

    width: 100% !important;
    max-width: none !important;

    /*
     * Tiny proportional spacing. This keeps individual bars
     * visible on a workstation without destroying the spectrum
     * on narrow displays.
     */
    column-gap:
        clamp(1px, 0.10vw, 2px) !important;

    overflow: hidden;
}

/*
 * Legacy spectrum rules assigned individual bars flexible
 * widths/max-widths. Grid owns horizontal geometry now.
 */
.visualizer > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    justify-self: stretch;
    align-self: end;
}

/*
 * Wide consoles have enough pixels for a little more air
 * between frequency bins.
 */
@media (min-width: 1400px) {

    .visualizer {
        column-gap:
            clamp(1px, 0.12vw, 2px) !important;
    }
}

/*
 * Tablet: preserve all 72 bins but tighten separation.
 */
@media (max-width: 820px) {

    .visualizer {
        column-gap: 1px !important;
    }
}

/*
 * Phone: there may not be enough physical pixels for a gap
 * between every one of 72 bins. Remove gaps rather than
 * discarding measured frequency information.
 */
@media (max-width: 480px) {

    .visualizer {
        column-gap: 0 !important;
    }
}

/* ==========================================================
   END UI 0.8.1
   ========================================================== */

/* ==========================================================
   MABNET // RADIO-01
   UI 0.8.2 — ADAPTIVE NAVIGATION
   ========================================================== */

.titlebar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

.nav-toggle,
.nav-close,
.nav-backdrop,
.drawer-header,
.drawer-machine {
    display: none;
}

/* ----------------------------------------------------------
   DESKTOP

   Collections remain immediately visible.
   Genres get their own bounded viewport so the navigation rail
   can no longer dictate the height of the station library.
   ---------------------------------------------------------- */

@media (min-width: 621px) {

    .library-grid {
        align-items: start;
    }

    .sidebar {
        align-self: start;
        min-width: 0;
    }

    #genreNav {
        max-height:
            min(48vh, 520px);

        overflow-y: auto;
        overscroll-behavior: contain;

        padding-right: 3px;
        padding-bottom: 4px;

        scrollbar-width: thin;
    }
}

/* ----------------------------------------------------------
   MOBILE RECEIVER
   ---------------------------------------------------------- */

@media (max-width: 620px) {

    .titlebar {
        position: sticky;
        top: 0;
        z-index: 80;
    }

    .titlebar-actions {
        gap: 9px;
        flex: 0 0 auto;
    }

    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;
        flex: 0 0 42px;

        padding: 0;
        gap: 4px;

        border:
            1px solid rgba(120, 140, 145, .42);

        background:
            linear-gradient(
                180deg,
                rgba(27, 34, 37, .96),
                rgba(10, 14, 16, .98)
            );

        cursor: pointer;
    }

    .nav-toggle span {
        display: block;

        width: 17px;
        height: 1px;

        background: #c6d0d2;

        box-shadow:
            0 0 4px
            rgba(34, 255, 116, .10);
    }

    .nav-toggle:focus-visible,
    .nav-close:focus-visible {
        outline:
            1px solid #21ff70;

        outline-offset: 2px;
    }

    /*
     * Replace the large diagnostic matrix with one compact
     * receiver status strip.
     */
    .machine-strip {
        display: flex !important;

        min-height: 34px;

        grid-template-columns:
            none !important;
    }

    .machine-cell {
        display: none !important;
    }

    .machine-cell:first-child {
        display: flex !important;

        flex: 1 1 auto;
        align-items: center;

        min-width: 0;

        padding:
            7px 10px;

        border-right: 0;
    }

    .machine-cell:first-child .machine-label {
        display: none;
    }

    .machine-cell:first-child .machine-value {
        display: flex;
        align-items: center;

        min-width: 0;

        font-size:
            clamp(9px, 2.7vw, 11px);

        letter-spacing: .13em;

        white-space: nowrap;
    }

    .machine-cell:first-child .machine-value::after {
        content:
            "  //  RADIO-01  //  ● ONLINE";

        margin-left: 7px;

        color: #21ff70;

        font-size: .86em;
        letter-spacing: .10em;
    }

    /*
     * Main library becomes station-first.
     */
    .library-grid {
        display: block;

        min-width: 0;
    }

    .station-pane {
        width: 100%;
        min-width: 0;
    }

    /*
     * Existing sidebar becomes the drawer. No cloned filter
     * controls and therefore no duplicate navigation state.
     */
    .sidebar {
        position: fixed;

        top: 0;
        left: 0;
        bottom: 0;

        z-index: 110;

        display: block;

        width:
            min(88vw, 360px);

        max-width: 360px;
        max-height: none;

        padding: 0;

        overflow-y: auto;
        overscroll-behavior: contain;

        border-right:
            1px solid
            rgba(90, 113, 118, .62);

        background:
            linear-gradient(
                180deg,
                rgba(18, 24, 27, .995),
                rgba(5, 8, 10, .998)
            );

        box-shadow:
            20px 0 48px
            rgba(0, 0, 0, .72);

        transform:
            translateX(-105%);

        visibility: hidden;

        transition:
            transform 180ms ease,
            visibility 180ms step-end;
    }

    .sidebar.drawer-open {
        transform:
            translateX(0);

        visibility: visible;

        transition:
            transform 180ms ease,
            visibility 0s step-start;
    }

    body.nav-open {
        overflow: hidden;
    }

    .drawer-header {
        position: sticky;

        top: 0;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: space-between;

        min-height: 62px;

        padding:
            10px 11px;

        border-bottom:
            1px solid
            rgba(84, 103, 108, .48);

        background:
            rgba(13, 18, 20, .985);
    }

    .drawer-eyebrow {
        color: #21ff70;

        font-size: 9px;
        letter-spacing: .22em;
    }

    .drawer-node {
        margin-top: 5px;

        color: #aeb8ba;

        font-size: 9px;
        letter-spacing: .14em;
    }

    .nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        padding: 0;

        border:
            1px solid
            rgba(120, 140, 145, .38);

        background:
            rgba(8, 12, 14, .8);

        color: #d1d9da;

        font-family: inherit;
        font-size: 23px;
        line-height: 1;

        cursor: pointer;
    }

    .drawer-machine {
        display: grid;

        grid-template-columns:
            auto auto;

        gap:
            6px 10px;

        padding:
            10px 11px;

        border-bottom:
            1px solid
            rgba(84, 103, 108, .38);

        color: #818d90;

        font-size: 8px;
        letter-spacing: .11em;
    }

    .drawer-machine span:last-child {
        grid-column:
            1 / -1;
    }

    .drawer-online {
        color: #21ff70;
    }

    /*
     * Drawer navigation becomes a proper vertical receiver menu.
     */
    .sidebar > .nav-group {
        margin: 0;

        padding:
            10px 11px;

        border-bottom:
            1px solid
            rgba(84, 103, 108, .30);
    }

    #collectionNav,
    #genreNav {
        display: block;

        max-height: none;

        overflow: visible;

        padding-right: 0;
    }

    .sidebar .nav-button {
        display: block;

        width: 100%;
        min-height: 38px;

        padding:
            7px 9px;

        text-align: left;
    }

    /*
     * Modal backdrop.
     */
    .nav-backdrop {
        position: fixed;

        inset: 0;

        z-index: 100;

        width: 100%;
        height: 100%;

        border: 0;

        background:
            rgba(0, 0, 0, .68);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 180ms ease,
            visibility 180ms step-end;
    }

    body.nav-open .nav-backdrop {
        display: block;

        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transition:
            opacity 180ms ease,
            visibility 0s step-start;
    }
}

/* ----------------------------------------------------------
   SMALL HANDSETS
   ---------------------------------------------------------- */

@media (max-width: 390px) {

    .machine-strip {
        display: flex !important;
    }

    .machine-cell:first-child {
        display: flex !important;
    }

    .machine-cell:first-child .machine-value::after {
        content:
            " // RADIO-01 // ●";
    }

    .sidebar {
        width: 92vw;
    }
}

/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .sidebar,
    .nav-backdrop {
        transition: none !important;
    }
}

/* ==========================================================
   END UI 0.8.2
   ========================================================== */


/* ============================================================
   MABNET RADIO // UI 0.9.0
   PHASE 4K.2 — LIBRARY CONTAINMENT

   Catalog growth must not increase receiver height.
   Desktop/tablet receives a bounded station viewport.
   Phone remains document-flow scrolling.
   ============================================================ */

@media (min-width: 621px) {

    /*
     * 11 x ~52px station rows plus the station header.
     * The catalog may contain 46 or 460 stations without
     * changing the physical size of RADIO-01.
     */
    #stationList {
        max-height: 572px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    /*
     * Keep the library rail and station receiver aligned rather
     * than allowing either side to stretch the other vertically.
     */
    .library-grid {
        align-items: start;
    }

    .station-pane,
    .sidebar {
        align-self: start;
    }

    /*
     * MabNet instrumentation scrollbar. Functional, restrained.
     */
    #stationList {
        scrollbar-width: thin;
        scrollbar-color:
            #3a4540
            #080a0c;
    }

    #stationList::-webkit-scrollbar {
        width: 8px;
    }

    #stationList::-webkit-scrollbar-track {
        background: #080a0c;
    }

    #stationList::-webkit-scrollbar-thumb {
        background: #303a35;
        border: 2px solid #080a0c;
    }

    #stationList::-webkit-scrollbar-thumb:hover {
        background: #46534c;
    }
}

/*
 * Mobile stays station-first and naturally scrollable.
 * The existing UI 0.8.2 off-canvas navigation remains the
 * authoritative phone navigation system.
 */
@media (max-width: 620px) {

    #stationList {
        max-height: none;
        overflow: visible;
    }
}


/* ============================================================
   MABNET RADIO // UI 0.9.1
   PHASE 4K.3 — NAVIGATION INTELLIGENCE
   ============================================================ */

.history-row.history-recall {
    cursor: pointer;
}

.history-row.history-recall:hover {
    background: rgba(255, 255, 255, 0.025);
}

.history-row.history-recall:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: -1px;
}


/* ============================================================
   MABNET // RADIO-01
   UI 1.1.0 — SIGNAL CHAMBER
   Perspective FFT + scope persistence + measured telemetry
   ============================================================ */

.visualizer {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: clamp(250px, 29vw, 410px) !important;
    min-height: 250px !important;
    margin-top: 16px !important;
    padding: 0 !important;
    overflow: hidden !important;

    border-top:
        1px solid rgba(88,104,94,.52) !important;
    border-bottom:
        1px solid rgba(38,255,112,.12);

    background: #020404 !important;

    isolation: isolate;
}

.visualizer::before {
    content: none !important;
}

.visualizer > * {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    align-self: auto !important;
}

.signal-theater-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
}

.signal-theater-hud {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    padding: 8px 10px;

    pointer-events: none;

    color: rgba(153,177,162,.72);
    font-size: 8px;
    letter-spacing: .15em;

    background:
        linear-gradient(
            180deg,
            rgba(2,4,4,.94),
            rgba(2,4,4,.46),
            transparent
        );
}

.theater-hud-left,
.theater-hud-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theater-live-dot {
    width: 5px !important;
    height: 5px;
    border-radius: 50%;
    background: #36433a;
    box-shadow: none;
}

.visualizer[data-spectrum="live"]
.theater-live-dot {
    background: #39ff78;
    box-shadow:
        0 0 5px rgba(57,255,120,.75),
        0 0 12px rgba(57,255,120,.24);
}

.theater-mode {
    color: rgba(111,128,118,.46);
}

#theaterRate {
    color: rgba(111,128,118,.52);
}

.theater-fullscreen {
    pointer-events: auto;

    border:
        1px solid rgba(90,112,99,.34);

    padding: 4px 7px;

    background:
        rgba(5,9,7,.68);

    color:
        rgba(174,193,181,.72);

    font: inherit;
    font-size: 8px;
    letter-spacing: .14em;

    cursor: pointer;
}

.theater-fullscreen:hover {
    color: #39ff78;

    border-color:
        rgba(57,255,120,.48);
}

.signal-theater-bands {
    position: absolute;
    z-index: 3;

    left: 12px;
    right: 12px;
    bottom: 7px;

    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 7px;

    pointer-events: none;
}

.theater-band {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.theater-band-label {
    color: rgba(107,130,116,.46);
    font-size: 7px;
    letter-spacing: .13em;
    text-align: center;
    white-space: nowrap;
}

.theater-band-meter {
    display: block;
    position: relative;

    width: 100% !important;
    height: 2px;

    overflow: hidden;

    background:
        rgba(70,89,77,.19);
}

.theater-band-meter i {
    display: block;

    width: 100%;
    height: 100%;

    transform: scaleX(0);
    transform-origin: left center;

    background:
        rgba(57,255,120,.66);

    box-shadow:
        0 0 5px rgba(57,255,120,.18);
}

.theater-band-meter
i[data-energy="warm"] {
    background:
        rgba(189,139,37,.78);

    box-shadow:
        0 0 6px rgba(189,139,37,.22);
}

.theater-band-meter
i[data-energy="hot"] {
    background:
        rgba(206,52,44,.82);

    box-shadow:
        0 0 7px rgba(206,52,44,.28);
}

.visualizer:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;

    margin: 0 !important;
    border: 0 !important;

    background: #000 !important;
}

.visualizer:fullscreen
.signal-theater-hud {
    padding: 18px 22px;
    font-size: 10px;
}

.visualizer:fullscreen
.signal-theater-bands {
    left: 5vw;
    right: 5vw;
    bottom: 22px;
    gap: 18px;
}

.visualizer:fullscreen
.theater-band-label {
    font-size: 9px;
}

.visualizer:fullscreen
.theater-band-meter {
    height: 3px;
}

@media (max-width: 820px) {
    .visualizer {
        height: clamp(210px, 48vw, 300px) !important;
        min-height: 210px !important;
        margin-top: 10px !important;
    }

    .theater-mode,
    #theaterRate {
        display: none;
    }
}

@media (max-width: 480px) {
    .visualizer {
        height: 200px !important;
        min-height: 200px !important;
    }

    .signal-theater-hud {
        padding: 6px 7px;
        font-size: 7px;
        letter-spacing: .10em;
    }

    .theater-hud-left,
    .theater-hud-right {
        gap: 6px;
    }

    .signal-theater-bands {
        left: 5px;
        right: 5px;
        bottom: 5px;
        gap: 3px;
    }

    .theater-band {
        gap: 2px;
    }

    .theater-band-label {
        font-size: 5.5px;
        letter-spacing: .02em;
    }
}

/* ============================================================
   END UI 1.1.0 — SIGNAL CHAMBER
   ============================================================ */


/* ============================================================
   MABNET // RADIO-01
   UI 1.2.0 — THEATER EXPERIENCE
   Presentation layer only. Signal Chamber engine unchanged.
   ============================================================ */

.mabnet-support-link {
    color: rgba(119,138,126,.54);
    text-decoration: none;
    letter-spacing: .12em;

    transition:
        color 150ms ease,
        text-shadow 150ms ease;
}

.mabnet-support-link:hover,
.mabnet-support-link:focus-visible {
    color: #39ff78;
    text-shadow:
        0 0 8px rgba(57,255,120,.20);
    outline: none;
}

.theater-experience {
    display: none;
}

.visualizer:fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;

    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #000 !important;

    border: 0 !important;
    outline: 0 !important;
}

.visualizer:fullscreen::backdrop {
    background: #000;
}

.visualizer:fullscreen
.theater-experience {
    position: absolute;
    inset: 0;
    z-index: 5;

    display: block;

    pointer-events: none;
}

.visualizer:fullscreen
.theater-brand {
    position: absolute;
    top: 26px;
    left: 30px;

    opacity: 0;

    transition:
        opacity 650ms ease;
}

.visualizer:fullscreen
.theater-brand-name {
    color: rgba(161,186,170,.78);
    font-size: 10px;
    letter-spacing: .24em;
}

.visualizer:fullscreen
.theater-brand-sub {
    margin-top: 6px;

    color: rgba(89,111,97,.42);
    font-size: 7px;
    letter-spacing: .19em;
}

.visualizer:fullscreen
.theater-track-card {
    position: absolute;

    top: 13vh;
    left: 50%;

    width: min(78vw, 1100px);

    transform:
        translateX(-50%)
        translateY(10px);

    text-align: center;

    opacity: 0;

    transition:
        opacity 1100ms ease,
        transform 1100ms ease;
}

.visualizer:fullscreen
.theater-carrier {
    margin-bottom: 18px;

    color: rgba(189,139,37,.64);

    font-size: clamp(
        7px,
        .7vw,
        10px
    );

    letter-spacing: .30em;
}

.visualizer:fullscreen
.theater-track {
    overflow: hidden;

    color: rgba(57,255,120,.88);

    font-size: clamp(
        22px,
        3.2vw,
        54px
    );

    line-height: 1.12;

    letter-spacing: .055em;

    text-overflow: ellipsis;
    white-space: nowrap;

    text-shadow:
        0 0 16px rgba(57,255,120,.11);
}

.visualizer:fullscreen
.theater-station {
    margin-top: 14px;

    color: rgba(139,162,147,.48);

    font-size: clamp(
        7px,
        .8vw,
        11px
    );

    letter-spacing: .22em;
}

.visualizer:fullscreen
.theater-telemetry {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 25px;

    display: flex;
    align-items: center;
    gap: 22px;

    color: rgba(109,132,117,.48);

    font-size: 8px;
    letter-spacing: .15em;

    opacity: 0;

    transition:
        opacity 650ms ease;

    pointer-events: none;
}

.visualizer:fullscreen
.theater-support {
    margin-left: auto;

    color: rgba(121,143,129,.52);

    text-decoration: none;

    pointer-events: auto;

    transition:
        color 150ms ease,
        text-shadow 150ms ease;
}

.visualizer:fullscreen
.theater-support:hover,
.visualizer:fullscreen
.theater-support:focus-visible {
    color: #39ff78;

    text-shadow:
        0 0 8px rgba(57,255,120,.22);

    outline: none;
}

.visualizer:fullscreen
.theater-exit {
    color: rgba(91,110,98,.38);
}

/*
 * Existing chamber HUD and band telemetry become dormant
 * unless the user wakes the interface.
 */
.visualizer:fullscreen
.signal-theater-hud,
.visualizer:fullscreen
.signal-theater-bands {
    opacity: .06;

    transition:
        opacity 650ms ease;
}

.visualizer:fullscreen.theater-awake
.signal-theater-hud,
.visualizer:fullscreen.theater-awake
.signal-theater-bands {
    opacity: .82;
}

.visualizer:fullscreen.theater-awake
.theater-brand,
.visualizer:fullscreen.theater-awake
.theater-telemetry {
    opacity: 1;
}

/*
 * Track changes temporarily emerge from the chamber,
 * then naturally disappear again.
 */
.visualizer:fullscreen.theater-identify
.theater-track-card {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}

/*
 * The regular HUD's THEATER button is redundant once
 * fullscreen is active; ESC remains the native exit.
 */
.visualizer:fullscreen
.theater-fullscreen {
    opacity: .22;
}

/*
 * Keep the chamber itself visually sovereign.
 */
body.radio-theater-active {
    background: #000;
}

@media (max-width: 700px) {
    .visualizer:fullscreen
    .theater-brand {
        top: 16px;
        left: 16px;
    }

    .visualizer:fullscreen
    .theater-track-card {
        top: 15vh;
        width: 90vw;
    }

    .visualizer:fullscreen
    .theater-telemetry {
        left: 16px;
        right: 16px;
        bottom: 16px;

        gap: 10px;

        font-size: 6px;
        letter-spacing: .08em;
    }

    .visualizer:fullscreen
    .theater-exit {
        display: none;
    }
}

/* ============================================================
   END UI 1.2.0 — THEATER EXPERIENCE
   ============================================================ */


/* ============================================================
   MABNET // RADIO-01
   UI 1.2.1 — SIGNAL THEATER FINAL CALIBRATION

   Presentation calibration only.
   No signal-measurement or transport behavior is implemented
   in this block.
   ============================================================ */

/*
 * Reserve the extreme upper-left for the chamber's own
 * instrument legend. MabNet identity occupies the opposite
 * architectural corner while the HUD is awake.
 */
.visualizer:fullscreen
.theater-brand {
    top: 26px;
    left: auto;
    right: 30px;

    text-align: right;
}

/*
 * The existing chamber telemetry already occupies the upper
 * right edge. Give it breathing room from the MabNet signature.
 */
.visualizer:fullscreen
.signal-theater-hud {
    padding-right: 245px;
}

/*
 * Track identity gets a bounded cinematic envelope.
 * Long ICY metadata may shrink but may never invade the
 * entire viewport.
 */
.visualizer:fullscreen
.theater-track-card {
    top: clamp(92px, 12vh, 150px);

    width: min(84vw, 1280px);

    padding:
        0
        clamp(16px, 3vw, 54px);

    box-sizing: border-box;
}

.visualizer:fullscreen
.theater-track {
    display: block;

    max-width: 100%;

    overflow: hidden;

    font-size:
        clamp(
            20px,
            3vw,
            52px
        );

    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Station/carrier identity remains subordinate to the actual
 * track and measured chamber.
 */
.visualizer:fullscreen
.theater-station {
    max-width: min(82vw, 1100px);

    margin-left: auto;
    margin-right: auto;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Keep lower telemetry attached to the viewport edge while
 * leaving the measured band instruments visually independent.
 */
.visualizer:fullscreen
.theater-telemetry {
    bottom: 20px;
}

/*
 * Once the presentation sleeps, the signal owns the room.
 */
.visualizer:fullscreen:not(.theater-awake)
.theater-brand,
.visualizer:fullscreen:not(.theater-awake)
.theater-telemetry {
    opacity: 0;
}

/*
 * Track-change identification remains intentionally visible
 * even if the rest of the HUD has returned to sleep.
 */
.visualizer:fullscreen.theater-identify
.theater-track-card {
    opacity: 1;
}

/*
 * Smaller displays cannot afford two separate upper-right
 * telemetry regions. Move MabNet identity beneath the chamber
 * legend while retaining separation.
 */
@media (max-width: 700px) {
    .visualizer:fullscreen
    .theater-brand {
        top: 42px;
        left: 16px;
        right: auto;

        text-align: left;
    }

    .visualizer:fullscreen
    .signal-theater-hud {
        padding-right: 8px;
    }

    .visualizer:fullscreen
    .theater-track-card {
        top: 16vh;

        width: 94vw;

        padding:
            0
            12px;
    }

    .visualizer:fullscreen
    .theater-track {
        font-size:
            clamp(
                18px,
                6vw,
                34px
            );
    }
}

/* ============================================================
   SIGNAL THEATER // CALIBRATED // LOCK
   ============================================================ */

/* ==========================================================
   SURF SIGNAL // 5C.3
   Directional discovery control surface.
   Presentation only; tuner ownership remains in app.js.
   ========================================================== */

.surf-signal-panel {
    border: 1px solid rgba(112, 128, 119, 0.28);
    background:
        linear-gradient(
            180deg,
            rgba(17, 21, 20, 0.96),
            rgba(8, 11, 10, 0.98)
        );
    padding: 14px 16px;
    min-width: 0;
}

.surf-signal-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.surf-signal-descriptor {
    color: #69746e;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.surf-signal-controls {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.surf-signal-controls button {
    min-width: 0;
    padding: 9px 6px;
    border: 1px solid rgba(111, 126, 117, 0.34);
    background: #111519;
    color: #8f9994;
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        border-color 120ms ease,
        color 120ms ease,
        background 120ms ease;
}

.surf-signal-controls button:hover,
.surf-signal-controls button:focus-visible {
    border-color: rgba(95, 196, 125, 0.72);
    color: #b8efc8;
    background: #121a16;
    outline: none;
}

.surf-signal-status {
    min-height: 34px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(112, 128, 119, 0.18);
    color: #69746e;
    font-size: 0.72rem;
    line-height: 1.45;
    letter-spacing: 0.045em;
}

.surf-signal-mode {
    display: inline-block;
    margin-right: 10px;
    color: #6fca89;
    font-size: 0.67rem;
    letter-spacing: 0.12em;
}

.surf-signal-route {
    display: inline;
    color: #b5beb9;
}

.surf-signal-reason {
    margin-top: 3px;
    color: #78857e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .surf-signal-controls {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .surf-signal-panel {
        padding: 12px;
    }

    .surf-signal-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .surf-signal-controls {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .surf-signal-controls button {
        min-height: 42px;
    }

    .surf-signal-mode,
    .surf-signal-route {
        display: block;
    }

    .surf-signal-mode {
        margin: 0 0 3px;
    }
}