:root {
    --bg:
        #050507;

    --panel:
        rgba(8,8,13,.96);

    --panel-soft:
        rgba(13,11,18,.92);

    --line:
        rgba(255,255,255,.10);

    --line-bright:
        rgba(255,255,255,.16);

    --purple:
        #a74de3;

    --purple-bright:
        #c56cff;

    --purple-dark:
        #592077;

    --lavender:
        #deb8f7;

    --gold:
        #cf9c39;

    --mint:
        #64d8bf;

    --mint-soft:
        #8ee8d3;

    --white:
        #f6f3f8;

    --muted:
        #aaa4af;
}


* {
    box-sizing:
        border-box;
}


html {
    scroll-behavior:
        smooth;
}


html,
body {
    margin: 0;

    min-height:
        100%;

    background:
        var(--bg);

    color:
        var(--white);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}


body {
    padding-bottom:
        94px;

    background:
        radial-gradient(
            circle at 45% -5%,
            rgba(106,39,147,.13),
            transparent 28%
        ),
        #050507;
}


a {
    color:
        inherit;
}


/* ==========================================================
   HEADER
   ========================================================== */

.hub-topbar {
    position:
        sticky;

    top:
        0;

    z-index:
        90;

    height:
        82px;

    padding:
        0 24px;

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(3,3,6,.97);

    backdrop-filter:
        blur(20px);
}


.hub-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    min-width:
        214px;

    text-decoration:
        none;
}


.hub-brand-icon {
    width:
        45px;

    height:
        45px;

    display:
        grid;

    place-items:
        center;

    border:
        2px solid
        var(--purple);

    border-radius:
        50%;

    color:
        var(--lavender);

    box-shadow:
        0 0 24px
        rgba(156,66,213,.17);
}


.hub-brand-copy {
    display:
        flex;

    align-items:
        baseline;

    gap:
        7px;
}


.hub-brand-copy strong {
    color:
        var(--purple-bright);

    font-size:
        25px;

    letter-spacing:
        .03em;
}


.hub-brand-copy b {
    font-size:
        25px;

    letter-spacing:
        .04em;
}


.hub-nav {
    display:
        flex;

    align-items:
        stretch;

    gap:
        5px;

    height:
        100%;
}


.hub-nav a {
    position:
        relative;

    min-width:
        88px;

    padding:
        0 13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-decoration:
        none;

    color:
        #c9c4cc;

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        .06em;
}


.hub-nav a:hover,
.hub-nav a.active {
    color:
        white;
}


.hub-nav a.active::after {
    content:
        "";

    position:
        absolute;

    left:
        18px;

    right:
        18px;

    bottom:
        0;

    height:
        2px;

    background:
        var(--purple);

    box-shadow:
        0 0 12px
        rgba(169,72,230,.75);
}


.hub-search {
    margin-left:
        auto;

    width:
        min(320px, 25vw);

    height:
        42px;

    padding:
        0 14px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        11px;

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


.hub-search span {
    color:
        var(--muted);
}


.hub-search input {
    width:
        100%;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        white;
}


/* ==========================================================
   THREE-COLUMN DASHBOARD
   ========================================================== */

.radio-dashboard {
    width:
        min(1900px, calc(100vw - 22px));

    margin:
        12px auto;

    display:
        grid;

    grid-template-columns:
        minmax(300px, 350px)
        minmax(570px, 1fr)
        minmax(330px, 380px);

    gap:
        12px;

    align-items:
        start;
}


.dashboard-panel {
    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    background:
        linear-gradient(
            150deg,
            rgba(12,10,17,.98),
            rgba(5,5,8,.99)
        );

    overflow:
        hidden;
}


.panel-heading,
.picked-heading {
    padding:
        22px 22px 17px;
}


.panel-heading small,
.picked-heading small,
.wellness-heading small,
.section-title-row small {
    color:
        var(--purple);

    font-size:
        9px;

    letter-spacing:
        .16em;
}


.panel-heading h1,
.picked-heading h2 {
    margin:
        6px 0 5px;

    font-size:
        21px;

    font-weight:
        600;
}


.panel-heading p,
.picked-heading p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.5;
}


/* ==========================================================
   LEFT — EXPLORE
   ========================================================== */

.explore-panel {
    padding-bottom:
        14px;
}


.explore-category-grid {
    padding:
        0 12px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;
}


.explore-category {
    position:
        relative;

    min-height:
        70px;

    padding:
        12px;

    display:
        grid;

    grid-template-columns:
        35px 1fr;

    gap:
        9px;

    align-items:
        center;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        9px;

    background:
        linear-gradient(
            145deg,
            rgba(20,16,27,.92),
            rgba(8,7,12,.96)
        );

    text-decoration:
        none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}


/* This layer is intentionally ready for
   category-specific artwork later. */

.explore-category::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    opacity:
        .22;

    background-image:
        var(--category-art, none);

    background-size:
        cover;

    background-position:
        center;
}


.explore-category::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(6,5,10,.76),
            rgba(7,6,11,.88)
        );
}


.explore-category > * {
    position:
        relative;

    z-index:
        2;
}


.explore-category:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(175,82,229,.55);

    background:
        rgba(37,18,48,.95);
}


.category-icon {
    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(171,77,229,.35);

    border-radius:
        50%;

    color:
        var(--purple-bright);

    font-size:
        18px;
}


.category-icon.gold {
    color:
        var(--gold);
}


.explore-category strong {
    display:
        block;

    font-size:
        11px;

    line-height:
        1.25;
}


.explore-category small {
    display:
        block;

    margin-top:
        3px;

    color:
        #97909b;

    font-size:
        9px;

    line-height:
        1.25;
}


.extra-category {
    display:
        none;
}


.explore-category-grid.expanded
.extra-category {
    display:
        grid;
}


.explore-all-button {
    width:
        calc(100% - 24px);

    min-height:
        48px;

    margin:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        1px solid
        rgba(164,74,220,.34);

    border-radius:
        9px;

    background:
        rgba(29,14,37,.37);

    color:
        var(--lavender);

    cursor:
        pointer;
}


/* ==========================================================
   CENTER — PICKED STATIONS
   ========================================================== */

.picked-panel {
    min-width:
        0;
}


.picked-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.small-action {
    min-height:
        38px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(162,73,219,.32);

    border-radius:
        8px;

    background:
        rgba(29,14,36,.35);

    color:
        var(--lavender);

    cursor:
        pointer;
}


.picked-hero {
    position:
        relative;

    min-height:
        330px;

    margin:
        0 10px 10px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        10px;

    background-image:
        url("/radio/static/images/sage-radio-wall.png");

    background-size:
        cover;

    background-position:
        center;

    box-shadow:
        inset 0 0 70px
        rgba(0,0,0,.32);
}


.hero-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(4,3,8,.94) 0%,
            rgba(7,4,11,.82) 35%,
            rgba(8,5,12,.24) 72%,
            rgba(3,3,5,.18) 100%
        );
}


.hero-content {
    position:
        relative;

    z-index:
        2;

    width:
        50%;

    min-width:
        330px;

    padding:
        40px 30px;
}


.live-badge {
    display:
        inline-flex;

    padding:
        6px 9px;

    border-radius:
        5px;

    background:
        rgba(126,45,178,.88);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .08em;
}


.hero-content h2 {
    margin:
        24px 0 8px;

    font-size:
        clamp(30px, 3vw, 45px);

    line-height:
        1.02;
}


.hero-content p {
    margin:
        0;

    color:
        #d3ccd7;

    line-height:
        1.45;
}


.hero-location {
    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        11px;
}


.hero-actions {
    margin-top:
        30px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;
}


.hero-actions button,
.hero-actions a {
    min-height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(168,76,225,.45);

    border-radius:
        7px;

    text-decoration:
        none;

    color:
        white;

    cursor:
        pointer;
}


.hero-actions button {
    background:
        linear-gradient(
            90deg,
            #7b2fb0,
            #9f43d6
        );
}


.hero-actions a {
    background:
        rgba(10,8,14,.64);
}


.picked-stations-section,
.recent-section {
    margin:
        0 10px 10px;

    padding:
        13px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        10px;

    background:
        rgba(8,7,11,.68);
}


.section-title-row {
    margin-bottom:
        12px;

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;
}


.section-title-row h3 {
    margin:
        4px 0 0;

    font-size:
        16px;
}


.station-count {
    color:
        var(--muted);

    font-size:
        10px;
}


.picked-station-grid {
    display:
        grid;

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

    gap:
        8px;
}


.picked-station-card {
    min-width:
        0;

    min-height:
        135px;

    padding:
        11px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        8px;

    background:
        rgba(14,11,19,.90);

    cursor:
        pointer;

    transition:
        transform .17s ease,
        border-color .17s ease;
}


.picked-station-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(169,74,224,.48);
}


.picked-station-card img {
    width:
        47px;

    height:
        47px;

    margin-bottom:
        8px;

    object-fit:
        cover;

    border-radius:
        6px;

    background:
        #141119;
}


.picked-station-card strong {
    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        11px;
}


.picked-station-card span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        9px;
}


.station-card-play {
    width:
        27px;

    height:
        27px;

    margin-top:
        9px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(163,73,220,.32);

    border-radius:
        50%;

    color:
        var(--lavender);

    font-size:
        9px;
}


.recent-station-row {
    display:
        grid;

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

    gap:
        8px;
}


.recent-card {
    min-width:
        0;

    padding:
        9px;

    display:
        grid;

    grid-template-columns:
        40px 1fr;

    gap:
        8px;

    align-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        7px;

    cursor:
        pointer;
}


.recent-card img {
    width:
        40px;

    height:
        40px;

    object-fit:
        cover;

    border-radius:
        5px;
}


.recent-card strong {
    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        10px;
}


.recent-card span {
    color:
        var(--muted);

    font-size:
        8px;
}


.loading,
.empty-message {
    color:
        var(--muted);

    font-size:
        11px;
}


/* ==========================================================
   RIGHT — WELLNESS
   ========================================================== */

.wellness-panel {
    padding:
        14px;

    border-color:
        rgba(81,210,178,.18);

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(43,153,130,.10),
            transparent 35%
        ),
        linear-gradient(
            160deg,
            rgba(6,17,18,.98),
            rgba(5,8,10,.99)
        );
}


.wellness-heading {
    padding:
        6px 6px 16px;

    display:
        grid;

    grid-template-columns:
        43px 1fr;

    gap:
        11px;

    align-items:
        start;
}


.wellness-heart {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(98,218,190,.44);

    border-radius:
        50%;

    color:
        var(--mint);

    font-size:
        25px;
}


.wellness-heading small {
    color:
        var(--mint);
}


.wellness-heading h2 {
    margin:
        3px 0 5px;

    color:
        var(--mint-soft);

    font-size:
        21px;
}


.wellness-heading p {
    margin:
        0;

    color:
        #9fafac;

    font-size:
        10px;

    line-height:
        1.45;
}


.wellness-big-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;
}


.wellness-big-button {
    min-height:
        145px;

    padding:
        17px 10px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    text-decoration:
        none;

    border:
        1px solid
        rgba(112,221,197,.18);

    border-radius:
        10px;

    background:
        linear-gradient(
            145deg,
            rgba(12,31,31,.84),
            rgba(10,18,22,.92)
        );

    transition:
        transform .18s ease,
        border-color .18s ease;
}


.wellness-big-button:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(110,226,198,.50);
}


.wellness-big-button.wide {
    grid-column:
        1 / -1;

    min-height:
        100px;
}


.wellness-icon {
    margin-bottom:
        11px;

    color:
        var(--mint);

    font-size:
        39px;
}


.wellness-icon.moon {
    color:
        #8cb8ff;
}


.wellness-icon.brain {
    color:
        #c094f5;
}


.wellness-big-button strong {
    font-size:
        14px;
}


.wellness-big-button small {
    margin-top:
        4px;

    color:
        #a8b7b4;

    font-size:
        9px;
}


.featured-wellness {
    margin-top:
        14px;

    padding:
        15px;

    border:
        1px solid
        rgba(107,222,195,.20);

    border-radius:
        10px;

    background:
        rgba(9,23,24,.72);
}


.featured-wellness-label {
    color:
        var(--mint);

    font-size:
        9px;

    letter-spacing:
        .10em;
}


.featured-wellness-main {
    margin-top:
        12px;

    display:
        grid;

    grid-template-columns:
        72px 1fr;

    gap:
        13px;

    align-items:
        center;
}


.featured-wellness-main img {
    width:
        72px;

    height:
        72px;

    object-fit:
        cover;

    border-radius:
        8px;

    background:
        #10181a;
}


.featured-wellness-main h3 {
    margin:
        0 0 5px;

    font-size:
        14px;
}


.featured-wellness-main p {
    margin:
        0;

    color:
        #9dafab;

    font-size:
        10px;
}


.featured-wellness-actions {
    margin-top:
        13px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;
}


.featured-wellness-actions button,
.featured-wellness-actions a {
    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(106,223,195,.30);

    border-radius:
        7px;

    color:
        #dffaf3;

    text-decoration:
        none;

    cursor:
        pointer;
}


.featured-wellness-actions button {
    background:
        linear-gradient(
            90deg,
            #278f78,
            #48b89f
        );
}


.featured-wellness-actions a {
    background:
        rgba(5,12,13,.52);
}


.wellness-quote {
    margin:
        14px 0 0;

    padding:
        16px;

    border:
        1px solid
        rgba(99,218,190,.12);

    border-radius:
        9px;

    color:
        #aebdb9;

    text-align:
        center;

    font-size:
        12px;

    line-height:
        1.5;
}


.wellness-quote span {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--mint);

    font-size:
        8px;
}


/* ==========================================================
   PERSISTENT PLAYER
   ========================================================== */

.persistent-player {
    position:
        fixed;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        120;

    min-height:
        82px;

    padding:
        9px 18px;

    display:
        grid;

    grid-template-columns:
        minmax(250px, 1fr)
        auto
        minmax(220px, .8fr);

    align-items:
        center;

    gap:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,.10);

    background:
        rgba(3,3,6,.98);

    backdrop-filter:
        blur(24px);
}


.persistent-station {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.persistent-station img {
    width:
        58px;

    height:
        58px;

    object-fit:
        cover;

    border-radius:
        7px;

    background:
        #151219;
}


.persistent-station div {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.persistent-station small {
    color:
        var(--purple);

    font-size:
        8px;
}


.persistent-station strong {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        13px;
}


.persistent-station span {
    color:
        var(--muted);

    font-size:
        9px;
}


.persistent-controls {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}


.persistent-controls button {
    width:
        38px;

    height:
        38px;

    border:
        0;

    background:
        transparent;

    color:
        white;

    font-size:
        22px;

    cursor:
        pointer;
}


.persistent-controls
.main-player-button {
    width:
        52px;

    height:
        52px;

    border:
        2px solid
        rgba(177,79,234,.58);

    border-radius:
        50%;

    background:
        rgba(75,29,101,.35);

    color:
        white;

    font-size:
        17px;
}


.persistent-volume {
    justify-self:
        end;

    width:
        min(260px, 100%);

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--muted);

    font-size:
        9px;
}


.persistent-volume input {
    width:
        100%;

    accent-color:
        var(--purple);
}


/* ==========================================================
   SEARCH
   ========================================================== */

.search-hidden {
    display:
        none !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1380px) {

    .radio-dashboard {
        grid-template-columns:
            300px 1fr;
    }


    .wellness-panel {
        grid-column:
            1 / -1;

        display:
            grid;

        grid-template-columns:
            1fr 2fr 1fr;

        gap:
            16px;
    }


    .wellness-heading {
        align-content:
            start;
    }


    .featured-wellness,
    .wellness-quote {
        margin-top:
            0;
    }
}


@media (max-width: 1000px) {

    .hub-nav {
        display:
            none;
    }


    .hub-search {
        width:
            min(420px, 50vw);
    }


    .radio-dashboard {
        grid-template-columns:
            1fr;
    }


    .explore-panel,
    .picked-panel,
    .wellness-panel {
        grid-column:
            auto;
    }


    .wellness-panel {
        display:
            block;
    }


    .featured-wellness,
    .wellness-quote {
        margin-top:
            14px;
    }


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


@media (max-width: 720px) {

    body {
        padding-bottom:
            140px;
    }


    .hub-topbar {
        height:
            68px;

        padding:
            0 12px;
    }


    .hub-brand {
        min-width:
            auto;
    }


    .hub-brand-copy strong,
    .hub-brand-copy b {
        font-size:
            18px;
    }


    .hub-brand-icon {
        width:
            38px;

        height:
            38px;
    }


    .hub-search {
        display:
            none;
    }


    .radio-dashboard {
        width:
            calc(100vw - 12px);

        margin:
            6px;
    }


    .explore-category-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .picked-station-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .recent-station-row {
        grid-template-columns:
            repeat(2,1fr);
    }


    .picked-hero {
        min-height:
            390px;
    }


    .hero-content {
        width:
            100%;

        min-width:
            0;

        padding:
            28px 20px;
    }


    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5,4,8,.56),
                rgba(5,4,8,.94)
            );
    }


    .wellness-big-grid {
        grid-template-columns:
            1fr;
    }


    .wellness-big-button.wide {
        grid-column:
            auto;
    }


    .persistent-player {
        min-height:
            130px;

        grid-template-columns:
            1fr auto;

        grid-template-rows:
            auto auto;
    }


    .persistent-volume {
        grid-column:
            1 / -1;

        justify-self:
            stretch;

        width:
            100%;
    }
}


/* ==========================================================
   CHANNEL CONNECTIONS
   ========================================================== */

.picked-card-footer {
    margin-top: 9px;

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

.picked-card-footer
.station-card-play {
    margin-top: 0;
}

.picked-station-page {
    padding: 6px 9px;

    border:
        1px solid
        rgba(169,74,224,.32);

    border-radius: 5px;

    color: var(--lavender);

    text-decoration: none;

    font-size: 8px;
}


.category-actions {
    display: flex;
    gap: 7px;
}

.category-actions
.category-action {
    min-width: 68px;
}

.station-page-action {
    background:
        rgba(64,25,84,.22);
}


/* ==========================================================
   INDIVIDUAL RADIO CHANNEL PAGE
   ========================================================== */

.radio-channel-page {
    padding-bottom: 95px;
}

.channel-main {
    width:
        min(1400px, calc(100vw - 30px));

    margin: 0 auto;

    padding: 28px 0 70px;
}

.channel-breadcrumb {
    margin-bottom: 20px;

    display: flex;
    gap: 9px;

    color: var(--muted);

    font-size: 11px;
}

.channel-breadcrumb a {
    color: var(--lavender);
    text-decoration: none;
}

.channel-hero {
    position: relative;

    min-height: 440px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 16px;

    background: #07060a;
}

.channel-wall {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,3,7,.97) 0%,
            rgba(5,4,8,.88) 40%,
            rgba(5,4,8,.24) 100%
        ),
        url("/radio/static/images/sage-radio-wall.png")
        center center / cover no-repeat;
}

.channel-hero-content {
    position: relative;
    z-index: 2;

    min-height: 440px;

    padding: 50px;

    display: grid;

    grid-template-columns:
        220px minmax(0, 600px);

    gap: 35px;

    align-items: center;
}

.channel-station-art img {
    width: 220px;
    height: 220px;

    object-fit: cover;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius: 18px;

    background: #111;
}

.channel-station-copy > small {
    color: var(--purple);

    letter-spacing: .15em;

    font-size: 9px;
}

.channel-station-copy h1 {
    margin: 10px 0 13px;

    font-size:
        clamp(38px,5vw,72px);

    line-height: .96;
}

.channel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.channel-meta span,
.channel-tags span {
    padding: 6px 9px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 999px;

    background:
        rgba(255,255,255,.035);

    color: #cec8d1;

    font-size: 10px;
}

.channel-tags {
    margin-top: 13px;

    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.channel-actions {
    margin-top: 28px;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.channel-actions button,
.channel-actions a {
    min-height: 48px;

    padding: 0 23px;

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

    border:
        1px solid
        rgba(172,76,228,.46);

    border-radius: 8px;

    color: white;

    text-decoration: none;
}

.channel-actions button {
    border: 0;

    background:
        linear-gradient(
            90deg,
            #772ba9,
            #a344d6
        );

    cursor: pointer;
}

.channel-actions a {
    background:
        rgba(9,7,12,.55);
}

.channel-status {
    margin-top: 13px;

    color: var(--muted);

    font-size: 10px;
}

.channel-info-grid {
    margin-top: 16px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 16px;
}

.channel-info-card {
    padding: 25px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 13px;

    background:
        rgba(10,8,14,.92);
}

.channel-info-card > small,
.related-channel-section header small {
    color: var(--purple);

    font-size: 9px;

    letter-spacing: .14em;
}

.channel-info-card h2,
.related-channel-section h2 {
    margin: 6px 0 19px;

    font-size: 22px;
}

.channel-info-card dl {
    margin: 0;
}

.channel-info-card dl div {
    padding: 11px 0;

    display: grid;

    grid-template-columns:
        130px 1fr;

    gap: 15px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.channel-info-card dt {
    color: var(--muted);

    font-size: 10px;
}

.channel-info-card dd {
    margin: 0;

    font-size: 11px;
}

.related-channel-section {
    margin-top: 16px;

    padding: 25px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 13px;

    background:
        rgba(8,7,11,.86);
}

.related-channel-grid {
    display: grid;

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

    gap: 10px;
}

.related-channel {
    min-width: 0;

    padding: 12px;

    display: grid;

    grid-template-columns:
        55px 1fr;

    gap: 11px;

    align-items: center;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 9px;

    text-decoration: none;
}

.related-channel img {
    width: 55px;
    height: 55px;

    object-fit: cover;

    border-radius: 7px;

    background: #121014;
}

.related-channel strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 11px;
}

.related-channel span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 9px;
}

.channel-player {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 120;

    min-height: 78px;

    padding: 10px 24px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    gap: 20px;

    align-items: center;

    border-top:
        1px solid
        rgba(255,255,255,.10);

    background:
        rgba(3,3,6,.98);

    backdrop-filter: blur(22px);
}

.channel-player div:first-child {
    display: flex;
    flex-direction: column;
}

.channel-player small {
    color: var(--purple);

    font-size: 8px;
}

#channelBottomPlay {
    width: 52px;
    height: 52px;

    border:
        2px solid
        rgba(177,79,234,.55);

    border-radius: 50%;

    background:
        rgba(73,25,101,.34);

    color: white;

    cursor: pointer;
}

.channel-volume {
    justify-self: end;

    width: min(260px,100%);

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--muted);

    font-size: 9px;
}

.channel-volume input {
    width: 100%;

    accent-color:
        var(--purple);
}


@media (max-width: 800px) {

    .channel-hero-content {
        padding: 30px 20px;

        grid-template-columns: 1fr;
    }

    .channel-station-art img {
        width: 160px;
        height: 160px;
    }

    .channel-info-grid,
    .related-channel-grid {
        grid-template-columns: 1fr;
    }

    .channel-player {
        grid-template-columns:
            1fr auto;
    }

    .channel-volume {
        display: none;
    }
}


/* ==========================================================
   SAGE RADIO CATEGORY PAGES
   Hub -> Category -> Channel
   ========================================================== */

.category-page {
    padding-bottom: 94px;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(116,45,159,.13),
            transparent 30%
        ),
        #050507;
}


.category-main {
    width: min(1500px, calc(100vw - 34px));
    margin: 0 auto;
    padding: 30px 0 70px;
}


.category-breadcrumb {
    margin-bottom: 20px;

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

    color: var(--muted);
    font-size: 11px;
}


.category-breadcrumb a {
    color: var(--lavender);
    text-decoration: none;
}


.category-header {
    min-height: 165px;
    padding: 28px 30px;

    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;

    background:
        radial-gradient(
            circle at 78% 32%,
            rgba(152,62,205,.17),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(15,12,21,.97),
            rgba(6,5,9,.98)
        );
}


.category-header small {
    color: var(--purple);
    font-size: 9px;
    letter-spacing: .17em;
}


.category-header h1 {
    margin: 7px 0 8px;

    font-size: clamp(34px,4vw,55px);
    font-weight: 600;
    line-height: 1;
}


.category-header p {
    max-width: 700px;
    margin: 0;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}


.category-count {
    min-width: 130px;

    color: var(--lavender);
    font-size: 34px;
    text-align: right;
}


.category-count span {
    display: block;

    margin-top: 4px;

    color: var(--muted);
    font-size: 8px;
    letter-spacing: .11em;
}


.category-search {
    margin: 18px 0;
}


.category-search input {
    width: min(520px,100%);
    height: 46px;

    padding: 0 17px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;

    background: rgba(255,255,255,.025);
    color: white;

    outline: none;
}


.category-search input:focus {
    border-color: rgba(174,80,229,.48);
}


.category-station-grid {
    display: grid;

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

    gap: 12px;
}


.category-station {
    min-width: 0;
    min-height: 112px;

    padding: 14px;

    display: grid;

    grid-template-columns:
        74px minmax(0,1fr) auto;

    gap: 14px;

    align-items: center;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(14,11,19,.94),
            rgba(7,6,10,.98)
        );

    transition:
        transform .17s ease,
        border-color .17s ease;
}


.category-station:hover {
    transform: translateY(-2px);

    border-color:
        rgba(168,74,224,.42);
}


.category-station > img {
    width: 74px !important;
    height: 74px !important;
    max-width: 74px !important;

    display: block;

    object-fit: cover;

    border-radius: 9px;

    background: #131017;
}


.category-station-copy {
    min-width: 0;
}


.category-station-copy > small {
    color: var(--purple);

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


.category-station-copy h2 {
    margin: 5px 0;

    overflow: hidden;

    color: var(--white);
    font-size: 15px;
    line-height: 1.2;

    text-overflow: ellipsis;
}


.category-station-copy p {
    margin: 0;

    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}


.station-schedule {
    margin-top: 6px;

    color: #c7c0ca;
    font-size: 9px;
    line-height: 1.4;
}


.category-actions {
    min-width: 88px;

    display: flex;
    flex-direction: column;
    gap: 7px;
}


.category-action {
    width: 88px;
    min-width: 88px;
    height: 34px;
    min-height: 34px;

    padding: 0 10px;

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

    border: 1px solid rgba(169,74,224,.38);
    border-radius: 6px;

    background: rgba(75,28,100,.24);
    color: var(--lavender);

    text-decoration: none;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .05em;

    cursor: pointer;
}


.category-action:hover {
    border-color: rgba(194,105,245,.65);
    background: rgba(105,42,138,.35);
}


.play-category-station {
    background:
        linear-gradient(
            90deg,
            rgba(111,39,154,.82),
            rgba(151,58,202,.82)
        );

    color: white;
}


.station-page-action {
    background: rgba(15,11,20,.75);
}


.category-empty {
    padding: 35px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;

    color: var(--muted);
}


/* persistent category player */

.category-player {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 120;

    min-height: 78px;

    padding: 10px 24px;

    display: grid;

    grid-template-columns:
        minmax(250px,1fr)
        auto;

    gap: 20px;

    align-items: center;

    border-top: 1px solid rgba(255,255,255,.10);

    background: rgba(3,3,6,.98);

    backdrop-filter: blur(22px);
}


.category-player > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.category-player small {
    color: var(--purple);
    font-size: 8px;
    letter-spacing: .11em;
}


.category-player strong {
    font-size: 13px;
}


#categoryPlayPause {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border: 2px solid rgba(174,77,230,.50);
    border-radius: 50%;

    background: rgba(72,26,96,.34);
    color: white;

    font-size: 15px;

    cursor: pointer;
}


@media (max-width: 950px) {

    .category-station-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 650px) {

    .category-main {
        width: calc(100vw - 20px);
        padding-top: 15px;
    }


    .category-header {
        min-height: 0;

        padding: 22px;

        align-items: flex-start;
        flex-direction: column;
    }


    .category-count {
        text-align: left;
    }


    .category-station {
        grid-template-columns:
            62px minmax(0,1fr);
    }


    .category-station > img {
        width: 62px !important;
        height: 62px !important;
    }


    .category-actions {
        grid-column: 1 / -1;

        width: 100%;

        flex-direction: row;
    }


    .category-action {
        flex: 1;

        width: auto;
    }
}


/* ==========================================================
   CATEGORY -> CHANNEL FLOW
   Category pages browse only.
   Playback happens on channel pages.
   ========================================================== */

.category-page {
    padding-bottom: 40px;
}

.category-actions {
    min-width: 96px;
}

.category-actions a {
    box-sizing: border-box;
}

.category-actions
.play-category-station {
    background:
        linear-gradient(
            90deg,
            #752aa7,
            #a442d6
        );

    color: white;
}

.category-actions
.station-page-action {
    background:
        rgba(13,10,18,.76);

    color:
        var(--lavender);
}

.category-player {
    display: none !important;
}


/* ==========================================================
   RADIO CATEGORY — ONE CLEAR ACTION
   ========================================================== */

.category-actions {
    min-width: 110px;
    width: 110px;
}

.category-actions
.category-play-link {
    width: 110px;
    min-width: 110px;
    height: 44px;

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

    border: 1px solid rgba(196,103,246,.55);
    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            #7629a8,
            #a742d7
        );

    color: white;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;

    box-shadow:
        0 0 20px
        rgba(150,55,205,.10);
}

.category-actions
.category-play-link:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            90deg,
            #8b32bf,
            #b54be6
        );
}


/* ==========================================================
   RADIO CHANNEL — CONTENT + AD RAILS
   ========================================================== */

.channel-layout {
    width: min(1780px, calc(100vw - 24px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1400px)
        150px;

    gap: 14px;

    justify-content: center;
    align-items: stretch;
}


.channel-layout
.channel-main {
    width: 100%;

    margin: 0;

    min-width: 0;
}


.channel-ad-rail {
    padding-top: 75px;
}


.channel-ad-slot {
    position: sticky;

    top: 105px;

    min-height: 520px;

    padding: 12px 8px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 10px;

    background:
        rgba(9,7,12,.72);

    text-align: center;
}


.channel-ad-slot small {
    color:
        #69636d;

    font-size: 7px;

    letter-spacing: .14em;
}


.channel-ad-slot
.ad-space {
    min-height: 480px;
}


/* Do not display empty ad rails on narrower screens. */

@media (max-width: 1250px) {

    .channel-layout {
        grid-template-columns: 1fr;
    }

    .channel-ad-rail {
        display: none;
    }
}


/* ==========================================================
   SMART RADIO STATION TITLES
   Keeps very long Wellness / specialty station names sane.
   ========================================================== */

.channel-station-copy h1 {
    max-width: 760px;

    overflow-wrap: anywhere;

    word-break: normal;

    font-size:
        clamp(36px, 4.2vw, 66px);

    line-height: .98;
}


.channel-station-copy
.channel-title-medium {
    font-size:
        clamp(31px, 3.5vw, 50px);

    line-height: 1;
}


.channel-station-copy
.channel-title-long {
    font-size:
        clamp(26px, 2.8vw, 40px);

    line-height: 1.04;
}


.channel-station-copy
.channel-title-very-long {
    font-size:
        clamp(22px, 2.25vw, 32px);

    line-height: 1.08;
}


/* Keep breadcrumbs from becoming another giant line. */

.channel-breadcrumb {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.channel-breadcrumb > span:last-child {
    min-width: 0;

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


/* Give the player hero a sensible desktop height. */

.channel-hero,
.channel-hero-content {
    min-height: 390px;
}


@media (max-width: 800px) {

    .channel-station-copy h1,
    .channel-station-copy .channel-title-medium,
    .channel-station-copy .channel-title-long,
    .channel-station-copy .channel-title-very-long {
        font-size:
            clamp(25px, 8vw, 38px);

        line-height: 1.03;
    }
}


/* ==========================================================
   UNIVERSAL RADIO BACK BUTTON
   ========================================================== */

.radio-back-row {
    margin-bottom: 15px;
}

.radio-back-button {
    min-width: 92px;
    height: 38px;

    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(175,78,230,.36);

    border-radius: 8px;

    background:
        rgba(25,12,33,.50);

    color:
        var(--lavender);

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .06em;
}

.radio-back-button:hover {
    border-color:
        rgba(198,103,247,.65);

    background:
        rgba(62,24,81,.58);
}


.category-back-row {
    margin-bottom: 12px;
}


.channel-back-row {
    margin-bottom: 12px;
}


/* ==========================================================
   INTERNAL SAGE WELLNESS PROGRAM PAGE
   ========================================================== */

.radio-program-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 55% -10%,
            rgba(68,196,169,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 35%,
            rgba(122,60,163,.10),
            transparent 35%
        ),
        #040708;

    color: white;
}


.program-page-layout {
    width:
        min(1780px, calc(100vw - 24px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1300px)
        150px;

    gap: 14px;

    justify-content: center;
}


.program-main {
    min-width: 0;

    padding: 32px 0 80px;
}


.program-wellness-hero {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    border:
        1px solid
        rgba(100,218,191,.20);

    border-radius: 16px;

    background:
        url("/radio/static/images/sage-radio-wall.png")
        center center / cover no-repeat;
}


.program-wellness-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2,13,14,.97) 0%,
            rgba(5,17,18,.92) 43%,
            rgba(5,15,16,.52) 70%,
            rgba(4,8,10,.46) 100%
        );
}


.program-hero-content {
    position: relative;

    z-index: 2;

    min-height: 390px;

    padding: 38px;

    display: grid;

    grid-template-columns:
        190px minmax(0,1fr);

    gap: 30px;

    align-items: center;
}


.program-art img {
    width: 190px;
    height: 190px;

    object-fit: cover;

    border:
        1px solid
        rgba(111,224,198,.28);

    border-radius: 15px;

    background: #091315;
}


.program-copy {
    min-width: 0;
}


.program-copy > small {
    color: var(--mint);

    font-size: 9px;

    letter-spacing: .16em;
}


.program-copy h1 {
    max-width: 800px;

    margin: 10px 0 14px;

    overflow-wrap: anywhere;

    font-size:
        clamp(30px, 4vw, 58px);

    line-height: 1.02;
}


.program-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.program-meta span {
    padding: 6px 9px;

    border:
        1px solid
        rgba(108,221,195,.20);

    border-radius: 999px;

    background:
        rgba(4,20,20,.58);

    color:
        #c4e5dd;

    font-size: 9px;
}


.program-schedule {
    margin: 15px 0 0;

    color:
        #c0d3cf;

    font-size: 12px;
}


.program-source-note {
    margin-top: 13px;

    color:
        #93aaa5;

    font-size: 10px;
}


.official-program-button {
    min-height: 46px;

    margin-top: 23px;

    padding: 0 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(100,220,193,.42);

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(32,132,111,.90),
            rgba(58,171,146,.90)
        );

    color: white;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .05em;
}


.affirmation-window {
    position: relative;

    margin-top: 15px;

    padding: 28px 35px;

    overflow: hidden;

    border:
        1px solid
        rgba(111,225,198,.20);

    border-radius: 14px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(100,222,194,.12),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            rgba(7,28,27,.90),
            rgba(9,10,16,.96)
        );

    text-align: center;
}


.affirmation-window small {
    color: var(--mint);

    font-size: 9px;

    letter-spacing: .18em;
}


.affirmation-mark {
    margin-top: 8px;

    color: var(--mint);

    font-size: 25px;
}


.affirmation-window blockquote {
    max-width: 830px;

    margin: 12px auto;

    color:
        #e3f5f0;

    font-size:
        clamp(18px,2vw,28px);

    line-height: 1.4;
}


.affirmation-window > span {
    color:
        #6fa99c;

    font-size: 8px;

    letter-spacing: .12em;
}


.program-info-grid {
    margin-top: 15px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;
}


.program-info-card {
    padding: 24px;

    border:
        1px solid
        rgba(103,218,193,.14);

    border-radius: 13px;

    background:
        rgba(7,14,16,.82);
}


.program-info-card > small {
    color:
        var(--mint);

    font-size: 8px;

    letter-spacing: .14em;
}


.program-info-card h2 {
    margin:
        6px 0 17px;

    font-size: 20px;
}


.program-info-card dl {
    margin: 0;
}


.program-info-card dl div {
    padding: 10px 0;

    display: grid;

    grid-template-columns:
        120px 1fr;

    gap: 12px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}


.program-info-card dt {
    color:
        #80928f;

    font-size: 9px;
}


.program-info-card dd {
    margin: 0;

    color:
        #d7e2df;

    font-size: 10px;
}


.program-return-card p {
    color:
        #9eb0ac;

    font-size: 11px;

    line-height: 1.6;
}


.program-return-card a {
    min-height: 39px;

    margin-top: 9px;

    padding: 0 13px;

    display: flex;

    align-items: center;

    border:
        1px solid
        rgba(101,216,190,.20);

    border-radius: 7px;

    color:
        #bce9df;

    text-decoration: none;

    font-size: 10px;
}


.program-view-button {
    background:
        linear-gradient(
            90deg,
            rgba(38,135,116,.80),
            rgba(62,168,146,.80)
        ) !important;

    border-color:
        rgba(93,217,188,.34) !important;

    color: white !important;
}


@media (max-width: 1250px) {

    .program-page-layout {
        grid-template-columns: 1fr;
    }

    .program-page-layout
    .channel-ad-rail {
        display: none;
    }
}


@media (max-width: 760px) {

    .program-main {
        padding-top: 15px;
    }

    .program-hero-content {
        padding: 24px;

        grid-template-columns: 1fr;
    }

    .program-art img {
        width: 145px;
        height: 145px;
    }

    .program-info-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   SAGE WELLNESS — REAL PODCAST PLAYERS
   ========================================================== */

.sage-podcast-player {
    margin-top: 22px;

    padding: 16px;

    border:
        1px solid
        rgba(99,219,193,.24);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(5,20,21,.92),
            rgba(8,9,13,.96)
        );
}


.sage-podcast-label {
    display: block;

    margin-bottom: 11px;

    color:
        var(--mint);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;
}


.podcast-embed-shell {
    width: 100%;

    overflow: hidden;

    border-radius: 10px;

    background:
        rgba(0,0,0,.32);
}


.sage-spotify-player,
.sage-simplecast-player {
    width: 100%;

    display: block;

    border: 0;

    border-radius: 10px;
}


.buzzsprout-shell {
    min-height: 120px;

    padding: 4px;
}


.podcast-official-only {
    padding: 18px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 9px;

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


.podcast-official-only p {
    margin:
        0 0 14px;

    color:
        #aab7b4;

    font-size: 11px;

    line-height: 1.5;
}


.program-more-link {
    min-height: 40px;

    margin-top: 12px;

    padding:
        0 14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(105,220,195,.20);

    border-radius: 7px;

    color:
        #bce9df;

    background:
        rgba(4,15,16,.52);

    text-decoration: none;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .04em;
}


.program-more-link:hover {
    border-color:
        rgba(103,224,196,.48);
}


@media (max-width: 700px) {

    .sage-podcast-player {
        padding: 10px;
    }

    .sage-spotify-player {
        height: 352px;
    }
}

.external-info-note {
    display: block;
    margin-top: 10px;

    color: #879a96;
    font-size: 9px;
    line-height: 1.45;
}


/* SAGE RADIO BACK BUTTON */

.hub-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 0 13px;

    border: 1px solid rgba(185, 75, 255, 0.38);
    border-radius: 11px;

    background:
        rgba(15, 8, 23, 0.88);

    color: #dca8ff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;

    text-decoration: none;
    white-space: nowrap;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease;
}

.hub-back-button:hover {
    transform: translateX(-2px);

    border-color:
        rgba(218, 127, 255, 0.85);

    box-shadow:
        0 0 18px rgba(174, 67, 255, 0.22);

    color: #ffffff;
}

.hub-back-arrow {
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 900px) {
    .hub-back-text {
        display: none;
    }

    .hub-back-button {
        width: 38px;
        padding: 0;
    }
}

/* SAGE Radio: no advertising rails in this build. */
.channel-page-layout,
.program-page-layout {
    grid-template-columns: minmax(0, 1fr);
}
.channel-main,
.program-main {
    grid-column: 1 / -1;
    min-width: 0;
}

/* SAGE hub live presentation; no advertising slots. */
.hero-actions [hidden] { display: none !important; }
.picked-hero.sage-is-live { border-color: #ba86f4; }
.picked-hero.sage-is-live .hero-content { width: 100%; min-width: 0; }
.picked-hero.sage-live-expanded { min-height: 70vh; }
.picked-hero.sage-live-expanded .hero-content { padding-block: 60px; }