/* PlayHub visual theme overrides. */
:root {
    --bg: #0d2946;
    --bg-deep: #081b30;
    --panel: rgba(23, 62, 98, .84);
    --panel-solid: #173f65;
    --line: rgba(178, 226, 249, .25);
    --text: #f3fbff;
    --muted: #bfd7e6;
    --muted-strong: #e1f3fb;
    --purple: #8f9cff;
    --violet: #709dff;
    --blue: #6edfff;
    --cyan: #b5efff;
    --pink: #d6adff;
    --shadow: 0 26px 80px rgba(3, 18, 36, .34);
}

body { background: linear-gradient(180deg, #1b527a 0%, #123e64 48%, #0c2846 100%); }
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: max(32px, calc((100vw - var(--max)) / 2));
    padding-left: max(32px, calc((100vw - var(--max)) / 2));
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(181, 231, 250, .2);
    background: rgba(13, 41, 70, .86);
    box-shadow: 0 10px 28px rgba(3, 18, 36, .12);
    backdrop-filter: blur(16px) saturate(1.18);
}
section[id] { scroll-margin-top: 82px; }
.page-glow--one { background: radial-gradient(circle, rgba(102, 199, 255, .4), transparent 68%); }
.page-glow--two { background: radial-gradient(circle, rgba(90, 218, 255, .25), transparent 67%); }
.brand-copy strong { color: #c2efff; text-shadow: 0 0 22px rgba(80, 205, 255, .28); }
.brand-copy strong span { color: #9ee8ff; }
.button--solid, .button--primary { background: linear-gradient(120deg, #45c8f2, #6c86ff); box-shadow: 0 9px 24px rgba(41, 164, 240, .25); }
.button--primary:hover, .button--solid:hover { box-shadow: 0 13px 30px rgba(41, 164, 240, .4); }
.button--ghost:hover { border-color: rgba(110, 223, 255, .62); background: rgba(71, 184, 255, .14); }
.button-play { color: #397cf1; }
.hero-dashboard { border-color: rgba(183, 231, 255, .38); background: linear-gradient(150deg, rgba(40, 91, 132, .95), rgba(16, 49, 83, .97)); box-shadow: 0 28px 70px rgba(3, 18, 36, .4); }
.hero-dashboard::after { background: radial-gradient(circle, rgba(157, 142, 255, .16), transparent 68%); }
.dashboard-caption { color: #d5f0fb; }
.dashboard-date { color: #e5f7ff; }
.dashboard-date span { color: var(--blue); }
.hero-dashboard-main h2 { color: #f5fcff; }
.hero-dashboard-main p { color: #c5dfeb; }
.hero-agenda { border-color: rgba(183, 231, 255, .24); background: rgba(7, 28, 52, .34); }
.hero-agenda-heading { color: #b4d5e3; }
.hero-agenda-heading span:last-child { color: #d7f1fa; }
.hero-agenda-row { border-color: rgba(183, 231, 255, .15); }
.agenda-day { color: #d7f7ff; background: rgba(77, 183, 235, .2); }
.agenda-copy small, .hero-agenda-empty { color: #b4d5e3; }
.signal-symbol { color: var(--blue); }
.signal-item small { color: #9fc4d5; }
.next-stream-card { border-color: rgba(183, 231, 255, .38); background: radial-gradient(circle at 90% 8%, rgba(103, 216, 255, .3), transparent 33%), linear-gradient(155deg, rgba(39, 94, 137, .96), rgba(17, 52, 88, .97)); }
.next-stream-card::after { border-color: rgba(132, 225, 255, .23); box-shadow: 0 0 0 25px rgba(91, 194, 255, .04), 0 0 0 50px rgba(91, 194, 255, .035), 0 0 0 75px rgba(91, 194, 255, .025); }
.next-meta span { border-color: rgba(159, 218, 245, .28); color: #d1ecf6; background: rgba(255, 255, 255, .06); }
.countdown small { color: #9dc2d3; }
.schedule-list { background: rgba(24, 62, 96, .78); }
.schedule-row { border-color: rgba(178, 226, 249, .14); }
.schedule-row:hover, .schedule-row:focus-visible { background: rgba(76, 176, 231, .14); }
.schedule-row--active::before { background: linear-gradient(var(--blue), var(--cyan)); box-shadow: 0 0 13px var(--blue); }
.schedule-date { border-color: rgba(113, 211, 247, .38); background: rgba(63, 167, 222, .18); }
.schedule-main p { color: #a7c9d9; }
.schedule-time small { color: #91b6c9; }
.calendar-weekdays { color: #a6cada; }
.calendar-day { border-color: rgba(158, 216, 241, .18); background: rgba(10, 39, 66, .46); }
.calendar-item { color: #d9eff8; }
.calendar-item--stream { color: #b5f0ff; background: rgba(42, 163, 207, .18); }
.calendar-item--stream:hover, .calendar-item--stream:focus-visible { background: rgba(42, 163, 207, .3); }
.calendar-legend { color: #b0d0de; }
.calendar-legend-dot { width: auto; height: auto; border-radius: 0; background: none !important; box-shadow: none !important; font-size: 7px; }
.calendar-legend-dot--stream { color: var(--cyan); text-shadow: 0 0 9px rgba(140, 234, 255, .6); }
.live-dot { width: auto; height: auto; border-radius: 0; color: var(--green); background: none; box-shadow: none; font-size: 7px; line-height: 1; text-shadow: 0 0 10px rgba(103, 247, 192, .85); }
.events-grid .event-card { background: rgba(20, 52, 84, .8); }
.event-card:hover { border-color: rgba(125, 219, 255, .62); }
.event-art { background: radial-gradient(circle at 75% 15%, rgba(104, 218, 255, .72), transparent 24%), linear-gradient(135deg, #1e5a83, #3177a9 49%, #243e73); }
.event-art--blue { background: radial-gradient(circle at 30% 15%, rgba(105, 234, 255, .78), transparent 24%), linear-gradient(135deg, #155a7f, #3d79ba 50%, #273d75); }
.event-date small { color: #a5c5d4; }
.event-meta { color: #bfd9e5; }
.event-note { color: #b5d2df; }
.about-mark { border-color: rgba(123, 219, 255, .48); background: radial-gradient(circle at 38% 23%, rgba(82, 219, 255, .5), transparent 18%), radial-gradient(circle at 70% 65%, rgba(115, 135, 255, .42), transparent 26%), #1e527d; box-shadow: 0 0 0 20px rgba(83, 188, 255, .055), 0 0 0 42px rgba(83, 188, 255, .04), 0 0 70px rgba(68, 183, 255, .2); }
.about-mark::after { border-color: rgba(159, 206, 255, .4); }
.about-mark span { color: #d0f4ff; }
.about-mark strong { color: #b4c8ff; }
.about-mark span, .about-mark strong { text-shadow: 8px 10px 0 rgba(6, 30, 55, .45), 0 0 27px rgba(91, 206, 255, .55); }
.footer-center small { color: #8eafbf; }
.copyright-link { color: var(--cyan); font-weight: 800; }
.copyright-link:hover, .copyright-link:focus-visible { color: #3f8194; text-decoration: underline; text-underline-offset: 3px; }
.footer-links { color: #a4c6d5; }
.schedule-month-toggle > span:last-child { display: inline-flex; width: auto; height: auto; flex: 0 0 auto; margin-top: 0; border: 0; font-size: inherit; line-height: 1; transform: none; }
.schedule-month-toggle > span:last-child .fa-solid { color: var(--cyan); font-size: 11px; transition: transform .2s ease; }
.schedule-list.is-calendar .schedule-month-toggle > span:last-child { transform: none; }
.schedule-list.is-calendar .schedule-month-toggle > span:last-child .fa-solid { transform: rotate(180deg); }
.nav-toggle > .fa-bars { display: block; color: var(--muted-strong); font-size: 17px; }
.button-play > .fa-solid, .button > .fa-solid, .button > .fa-brands, .stream-link > i, .text-link > i, .agenda-arrow > i { line-height: 1; }
.button-play > .fa-solid { font-size: 8px; }
@media (max-width: 980px) {
    .site-header { padding-right: 20px; padding-left: 20px; }
}
@media (max-width: 720px) {
    .site-header { padding-right: 17px; padding-left: 17px; }
    .main-nav.is-open { background: rgba(16, 57, 90, .98); }
}

/* Modern event tiles with a floating date badge and compact metadata chips. */
.events-grid .event-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border-color: rgba(173, 224, 247, .28);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(31, 83, 120, .94), rgba(12, 39, 67, .98));
    box-shadow: 0 22px 58px rgba(3, 18, 36, .26);
    isolation: isolate;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.events-grid .event-card::before {
    position: absolute;
    top: -90px;
    right: -70px;
    width: 230px;
    height: 230px;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 221, 255, .2), transparent 68%);
    pointer-events: none;
}
.events-grid .event-card:hover {
    transform: translateY(-7px);
    border-color: rgba(135, 225, 255, .7);
    box-shadow: 0 30px 70px rgba(3, 18, 36, .36);
}
.events-grid .event-card > .event-image,
.events-grid .event-card > .event-art {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    height: 240px;
}
.events-grid .event-card--featured > .event-image,
.events-grid .event-card--featured > .event-art { height: 340px; }
.events-grid .event-card > .event-image {
    transition: transform .5s ease, filter .5s ease;
}
.events-grid .event-card:hover > .event-image {
    transform: scale(1.035);
    filter: saturate(1.1) contrast(1.03);
}
.events-grid .event-card > .event-art { transition: transform .5s ease; }
.events-grid .event-card:hover > .event-art { transform: scale(1.025); }
.events-grid .event-content {
    position: relative;
    z-index: 1;
    display: block;
    flex: 1;
    min-height: 240px;
    padding: 62px 30px 30px;
    background: linear-gradient(180deg, rgba(10, 37, 63, .08), rgba(7, 26, 46, .28));
}
.events-grid .event-card--featured .event-content { padding-top: 64px; }
.events-grid .event-details { min-width: 0; }
.events-grid .event-date {
    position: absolute;
    top: -42px;
    left: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    padding: 10px 9px;
    border: 1px solid rgba(183, 231, 255, .58);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(54, 133, 176, .98), rgba(24, 69, 111, .98));
    box-shadow: 0 12px 25px rgba(4, 24, 44, .35), inset 0 1px rgba(255, 255, 255, .2);
    backdrop-filter: blur(12px);
    text-align: center;
}
.events-grid .event-date span:first-child { color: #f4fcff; font-size: 36px; line-height: 1; }
.events-grid .event-date span:nth-child(2) { margin-top: 5px; color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.events-grid .event-date small { margin-top: 5px; color: #b8dceb; font-size: 9px; letter-spacing: .05em; }
.events-grid .event-content h3 {
    margin: 0 0 14px;
    color: #f4fbff;
    font-size: 30px;
    letter-spacing: -.05em;
    line-height: 1.06;
}
.events-grid .event-card--featured .event-content h3 { font-size: clamp(2rem, 3vw, 2.8rem); }
.events-grid .event-content p { max-width: 46ch; color: #d2e8f1; font-size: 14px; line-height: 1.72; }
.events-grid .event-meta { gap: 9px; margin-top: 22px; }
.events-grid .event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 11px;
    border: 1px solid rgba(173, 224, 247, .2);
    border-radius: 999px;
    color: #c8e6f0;
    background: rgba(122, 211, 243, .08);
    font-size: 11px;
}
.events-grid .event-card .text-link,
.events-grid .event-card .event-note { margin-top: 22px; font-size: 12px; }
.events-grid .event-card .text-link { margin-top: 22px; font-size: 12px; }
@media (max-width: 720px) {
    .events-grid .event-card > .event-image,
    .events-grid .event-card > .event-art,
    .events-grid .event-card--featured > .event-image,
    .events-grid .event-card--featured > .event-art { height: 205px; }
    .events-grid .event-content,
    .events-grid .event-card--featured .event-content { padding: 58px 20px 25px; }
    .events-grid .event-date { top: -38px; left: 20px; width: 86px; height: 86px; }
    .events-grid .event-content h3,
    .events-grid .event-card--featured .event-content h3 { font-size: 2rem; }
    .events-grid .event-content p { font-size: 14px; }
}

/*
 * Graphite + paper contrast pass.
 *
 * The layout and the blue accent stay intact, but the page now has a neutral
 * canvas, deeper component surfaces, and quieter decorative effects. This
 * keeps the site recognisably PlayHub without making every section the same
 * shade of blue.
 */
:root {
    --bg: #edf0ef;
    --bg-deep: #dfe5e7;
    --panel: #202a33;
    --panel-solid: #26323c;
    --line: rgba(215, 226, 231, .18);
    --text: #f4f7f8;
    --muted: #b8c4cb;
    --muted-strong: #e6ecef;
    --purple: #aaa1c4;
    --violet: #7e91aa;
    --blue: #70b3c8;
    --cyan: #93cbd5;
    --pink: #d19aa4;
    --green: #83c2a4;
    --radius-lg: 24px;
    --radius-md: 15px;
    --shadow: 0 22px 56px rgba(28, 39, 48, .16);
}

body {
    color: #25323c;
    background: linear-gradient(180deg, #f3f5f4 0%, #edf0ef 47%, #e3e9eb 100%);
}

.page-noise { opacity: .01; mix-blend-mode: multiply; }
.page-glow { opacity: .15; }
.page-glow--one { background: radial-gradient(circle, rgba(105, 164, 184, .28), transparent 68%); }
.page-glow--two { background: radial-gradient(circle, rgba(173, 147, 180, .18), transparent 67%); }

.site-header {
    border-bottom-color: rgba(35, 49, 60, .12);
    background: rgba(243, 245, 244, .86);
    box-shadow: 0 10px 28px rgba(33, 47, 57, .07);
    backdrop-filter: blur(16px) saturate(1.02);
}
.brand-copy strong { color: #263640; text-shadow: none; }
.brand-copy strong span { color: #5f98ad; }
.brand-copy small { color: #73818a; }
.main-nav a, .header-social { color: #56636d; }
.main-nav a:hover, .main-nav a:focus-visible { color: #1d2932; }
.social-icon { border-color: rgba(37, 52, 63, .16); color: #648fa0; }

.button--solid, .button--primary {
    color: #fff;
    background: linear-gradient(120deg, #477f97, #6d7095);
    box-shadow: 0 9px 24px rgba(66, 102, 119, .22);
}
.button--primary:hover, .button--solid:hover { box-shadow: 0 13px 30px rgba(66, 102, 119, .3); }
.button--ghost {
    border-color: rgba(37, 52, 63, .2);
    color: #34434d;
    background: rgba(255, 255, 255, .62);
}
.button--ghost:hover { border-color: rgba(73, 130, 151, .55); color: #20303a; background: rgba(126, 190, 205, .16); }
.button-play { color: #477b92; }
.nav-toggle { border-color: rgba(37, 52, 63, .18); background: rgba(255, 255, 255, .55); }
.nav-toggle span:not(.sr-only) { background: #53646e; }
.nav-toggle > .fa-bars { color: #53646e; }

.eyebrow, .section-index, .mini-label { color: #527d89; }
.card-kicker { color: var(--green); }
.eyebrow { border-color: rgba(81, 137, 153, .24); background: rgba(118, 178, 192, .12); }
.hero h1::first-line { color: #1d2933; }
.hero-description, .section-heading p, .about-copy p { color: #5b6973; }

.hero-dashboard {
    color: var(--text);
    border-color: rgba(216, 230, 235, .2);
    background: linear-gradient(150deg, #2e3943, #18222b);
    box-shadow: 0 28px 70px rgba(29, 42, 52, .27);
}
.hero-dashboard::before { background: radial-gradient(circle, rgba(126, 187, 201, .15), transparent 68%); }
.hero-dashboard::after { background: radial-gradient(circle, rgba(172, 148, 188, .12), transparent 68%); }
.hero-dashboard-top { border-bottom-color: rgba(218, 230, 235, .12); background: rgba(255, 255, 255, .045); }
.dashboard-caption { color: #bdc9cf; }
.dashboard-status { color: #a7d1bb; }
.dashboard-date { color: #e8eef0; }
.dashboard-date span { color: var(--blue); }
.hero-dashboard-main h2 { color: #f7fafb; }
.hero-dashboard-main p { color: #b7c5cc; }
.hero-agenda { border-color: rgba(216, 230, 235, .15); background: rgba(7, 13, 18, .34); }
.hero-agenda-heading { color: #aab8bf; }
.hero-agenda-heading span:last-child { color: #d4dde1; }
.hero-agenda-row { border-color: rgba(216, 230, 235, .1); }
.agenda-day { color: #e0edf0; background: rgba(102, 155, 171, .22); }
.agenda-copy strong { color: #f3f7f8; }
.agenda-copy small, .hero-agenda-empty { color: #aab8bf; }

.signal-strip { border-color: rgba(38, 54, 65, .14); }
.signal-strip::before { background: #76b3c4; box-shadow: 0 0 14px rgba(118, 179, 196, .45); }
.signal-symbol { color: #5b93a6; }
.signal-item small { color: #77858e; }
.signal-item strong { color: #35434d; }
.signal-line { background: linear-gradient(90deg, rgba(45, 62, 73, .16), transparent); }

.next-stream-card {
    color: var(--text);
    border-color: rgba(216, 230, 235, .2);
    background: radial-gradient(circle at 90% 8%, rgba(119, 171, 187, .16), transparent 33%), linear-gradient(155deg, #303b45, #202a33);
    box-shadow: var(--shadow);
}
.next-stream-card::after { border-color: rgba(151, 201, 211, .15); box-shadow: 0 0 0 25px rgba(130, 164, 177, .025), 0 0 0 50px rgba(130, 164, 177, .02), 0 0 0 75px rgba(130, 164, 177, .016); }
.next-date span { color: #d7e0e4; }
.next-date strong, .countdown span { color: var(--cyan); }
.next-stream-card p { color: #b8c4cb; }
.next-meta span { border-color: rgba(215, 226, 231, .17); color: #d0dadd; background: rgba(255, 255, 255, .055); }
.countdown small { color: #97a6ae; }
.text-link { color: #96cbd5; }
.text-link:hover { color: #fff; }

.schedule-list {
    color: var(--text);
    border-color: rgba(215, 226, 231, .18);
    background: #242e37;
    box-shadow: var(--shadow);
}
.list-topline { border-bottom-color: rgba(215, 226, 231, .14); color: #bac7cd; }
.list-topline span:last-child { color: #91a0a8; }
.schedule-month-toggle { color: #e1e8eb; }
.schedule-month-toggle:hover, .schedule-month-toggle:focus-visible { border-color: rgba(215, 226, 231, .18); color: #fff; background: rgba(255, 255, 255, .06); }
.schedule-month-toggle-label { color: #a7d2d9; background: rgba(118, 179, 196, .13); }
.month-button { border-color: rgba(215, 226, 231, .18); color: #a8d1d9; background: rgba(255, 255, 255, .04); }
.month-button:hover:not(:disabled), .month-button:focus-visible:not(:disabled) { border-color: rgba(147, 203, 213, .6); color: #fff; background: rgba(118, 179, 196, .14); }
.schedule-row { border-bottom-color: rgba(215, 226, 231, .1); }
.schedule-row:hover, .schedule-row:focus-visible { background: rgba(118, 179, 196, .11); }
.schedule-row--active::before { background: linear-gradient(var(--blue), var(--purple)); box-shadow: 0 0 11px rgba(112, 179, 200, .55); }
.schedule-date { border-color: rgba(133, 190, 202, .3); background: rgba(95, 151, 169, .16); }
.schedule-date strong, .schedule-main h3 { color: #f2f6f7; }
.schedule-date span, .schedule-time strong { color: #9bcbd4; }
.schedule-main p { color: #9fadb5; }
.schedule-time small { color: #8998a1; }
.calendar-weekdays { color: #9caab2; }
.calendar-day { border-color: rgba(215, 226, 231, .12); background: rgba(14, 21, 27, .35); }
.calendar-day--empty { background: rgba(255, 255, 255, .018); }
.calendar-day--today { border-color: rgba(147, 203, 213, .6); box-shadow: inset 0 0 0 1px rgba(147, 203, 213, .12); }
.calendar-day-number { color: #d9e2e6; }
.calendar-day--today .calendar-day-number { color: #9ed5dd; }
.calendar-item { color: #c9d4d9; }
.calendar-item--stream { border-color: rgba(147, 203, 213, .2); color: #a7d7df; background: rgba(83, 145, 161, .15); }
.calendar-item--stream:hover, .calendar-item--stream:focus-visible { border-color: rgba(147, 203, 213, .58); background: rgba(83, 145, 161, .25); }
.calendar-legend { color: #a8b6bd; }
.calendar-legend-dot--stream { color: #9ed5dd; text-shadow: 0 0 8px rgba(147, 203, 213, .5); }
.empty-state--wide { border-color: rgba(38, 54, 65, .14); }

.events-grid .event-card {
    color: var(--text);
    border-color: rgba(215, 226, 231, .17);
    background: linear-gradient(160deg, #29343e, #1d262f);
    box-shadow: 0 22px 58px rgba(29, 42, 52, .16);
}
.events-grid .event-card::before { background: radial-gradient(circle, rgba(128, 178, 190, .14), transparent 68%); }
.events-grid .event-card:hover { border-color: rgba(147, 203, 213, .56); box-shadow: 0 30px 70px rgba(29, 42, 52, .22); }
.event-art { background: radial-gradient(circle at 75% 15%, rgba(195, 153, 168, .48), transparent 24%), linear-gradient(135deg, #4e414b, #6d5360 49%, #28333d); }
.event-art--blue { background: radial-gradient(circle at 30% 15%, rgba(132, 195, 204, .55), transparent 24%), linear-gradient(135deg, #304e5b, #557b84 50%, #293640); }
.event-art::after { border-color: rgba(225, 234, 237, .24); box-shadow: 0 0 0 23px rgba(225, 234, 237, .025), 0 0 0 47px rgba(225, 234, 237, .02), 0 0 0 71px rgba(225, 234, 237, .016); }
.events-grid .event-content { background: linear-gradient(180deg, rgba(24, 32, 40, .04), rgba(8, 13, 18, .2)); }
.events-grid .event-date { border-color: rgba(215, 226, 231, .2); background: linear-gradient(145deg, #4f7180, #304955); box-shadow: 0 12px 25px rgba(17, 27, 34, .3), inset 0 1px rgba(255, 255, 255, .18); }
.events-grid .event-date span:first-child, .events-grid .event-content h3 { color: #f4f7f8; }
.events-grid .event-date span:nth-child(2) { color: #b9dde2; }
.events-grid .event-date small { color: #c2cfd4; }
.events-grid .event-content p { color: #c3cfd4; }
.events-grid .event-meta span { border-color: rgba(215, 226, 231, .15); color: #c4d1d5; background: rgba(147, 203, 213, .07); }
.events-grid .event-note { color: #afbec4; }

.about-section { border-top-color: rgba(38, 54, 65, .14); }
.about-mark { border-color: rgba(95, 151, 169, .46); background: radial-gradient(circle at 38% 23%, rgba(111, 191, 203, .38), transparent 18%), radial-gradient(circle at 70% 65%, rgba(183, 150, 178, .25), transparent 26%), #2e4653; box-shadow: 0 0 0 20px rgba(83, 139, 155, .05), 0 0 0 42px rgba(83, 139, 155, .03), 0 0 70px rgba(68, 129, 144, .13); }
.about-mark::after { border-color: rgba(188, 214, 220, .32); }
.about-mark span { color: #d8eef0; }
.about-mark strong { color: #c3c4dc; }
.about-mark span, .about-mark strong { text-shadow: 8px 10px 0 rgba(16, 30, 38, .42), 0 0 24px rgba(135, 194, 202, .4); }
.footer-center p { color: #4a5963; }
.footer-center small { color: #7a8890; }
.copyright-link { color: #588fa1; }
.footer-links { color: #6a7b84; }
.footer-links a:hover { color: #4f90a4; }
.site-footer { border-top-color: rgba(38, 54, 65, .14); }

@media (max-width: 720px) {
    .main-nav.is-open { background: rgba(242, 245, 244, .98); box-shadow: 0 18px 45px rgba(31, 45, 55, .13); }
    .main-nav.is-open a { color: #34434d; }
}

/* Light-blue widget surfaces: keep the neutral page canvas, restore the brand
 * color on the dashboard, schedule, and event containers. */
.hero-dashboard,
.next-stream-card,
.schedule-list,
.events-grid .event-card {
    color: #1d3a46;
    border-color: rgba(49, 99, 114, .24);
    background: linear-gradient(150deg, #a9cdd6, #7faab7);
    box-shadow: 0 22px 56px rgba(54, 105, 121, .18);
}

.hero-dashboard {
    background: linear-gradient(150deg, #a9cdd6, #769fac);
    box-shadow: 0 28px 70px rgba(54, 105, 121, .22);
}
.hero-dashboard::before { background: radial-gradient(circle, rgba(255, 255, 255, .23), transparent 68%); }
.hero-dashboard::after { background: radial-gradient(circle, rgba(170, 142, 182, .16), transparent 68%); }
.hero-dashboard-top { border-bottom-color: rgba(40, 83, 96, .16); background: rgba(255, 255, 255, .2); }
.dashboard-caption { color: #315865; }
.dashboard-status { color: #2d6c55; }
.dashboard-kicker { color: #397889; }
.dashboard-date { color: #244b58; }
.dashboard-date span { color: #477f91; }
.hero-dashboard-main h2 { color: #173541; }
.hero-dashboard-main p { color: #456671; }
.hero-agenda { border-color: rgba(40, 83, 96, .18); background: rgba(255, 255, 255, .22); }
.hero-agenda-heading { color: #3b6471; }
.hero-agenda-heading span:last-child { color: #28505d; }
.hero-agenda-row { border-color: rgba(40, 83, 96, .13); }
.agenda-day { color: #244f5c; background: rgba(255, 255, 255, .35); }
.agenda-copy strong { color: #1d3e4a; }
.agenda-copy small, .hero-agenda-empty { color: #4d7480; }
.agenda-arrow { color: #3f7d8d; }

.next-stream-card {
    background: linear-gradient(155deg, #a5c9d3, #769fac);
    box-shadow: 0 22px 56px rgba(54, 105, 121, .2);
}
.next-stream-card::after { border-color: rgba(54, 111, 126, .2); box-shadow: 0 0 0 25px rgba(67, 130, 145, .04), 0 0 0 50px rgba(67, 130, 145, .03), 0 0 0 75px rgba(67, 130, 145, .025); }
.next-stream-card .card-kicker { color: #32775f; }
.next-date span { color: #2e5966; }
.next-date strong, .countdown span { color: #34788b; }
.next-stream-card h3 { color: #1b3945; }
.next-stream-card p { color: #4b6b76; }
.next-meta span { border-color: rgba(48, 102, 117, .22); color: #315b68; background: rgba(255, 255, 255, .28); }
.countdown small { color: #567580; }
.text-link { color: #34768a; }
.text-link:hover { color: #1c5265; }
.stream-link--youtube { border-color: rgba(175, 64, 93, .3); color: #a8405b; background: rgba(255, 255, 255, .2); }
.stream-link--youtube:hover { border-color: rgba(175, 64, 93, .58); background: rgba(255, 255, 255, .34); }
.stream-link--twitch { border-color: rgba(102, 84, 157, .32); color: #66549d; background: rgba(255, 255, 255, .2); }
.stream-link--twitch:hover { border-color: rgba(102, 84, 157, .6); background: rgba(255, 255, 255, .34); }

.schedule-list {
    background: #a2c6d0;
    box-shadow: 0 22px 56px rgba(54, 105, 121, .17);
}
.list-topline { border-bottom-color: rgba(42, 84, 97, .16); color: #315b68; }
.list-topline span:last-child { color: #5b7b85; }
.schedule-month-toggle { color: #244b57; }
.schedule-month-toggle:hover, .schedule-month-toggle:focus-visible { border-color: rgba(42, 84, 97, .18); color: #183b47; background: rgba(255, 255, 255, .25); }
.schedule-month-toggle-label { color: #2f7181; background: rgba(255, 255, 255, .32); }
.month-button { border-color: rgba(42, 84, 97, .2); color: #34778a; background: rgba(255, 255, 255, .24); }
.month-button:hover:not(:disabled), .month-button:focus-visible:not(:disabled) { border-color: rgba(52, 119, 138, .62); color: #1d5365; background: rgba(255, 255, 255, .4); }
.schedule-row { border-bottom-color: rgba(42, 84, 97, .14); }
.schedule-row:hover, .schedule-row:focus-visible { background: rgba(255, 255, 255, .2); }
.schedule-row--active::before { background: linear-gradient(var(--blue), #8d7fa8); box-shadow: 0 0 10px rgba(73, 135, 149, .48); }
.schedule-date { border-color: rgba(52, 119, 138, .3); background: rgba(72, 143, 161, .15); }
.schedule-date strong, .schedule-main h3 { color: #1d3d49; }
.schedule-date span, .schedule-time strong { color: #39788a; }
.schedule-main p { color: #5a7680; }
.schedule-time small { color: #66858e; }
.calendar-weekdays { color: #5d7b84; }
.calendar-day { border-color: rgba(42, 84, 97, .16); background: rgba(255, 255, 255, .2); }
.calendar-day--empty { background: rgba(255, 255, 255, .08); }
.calendar-day--today { border-color: rgba(52, 119, 138, .62); box-shadow: inset 0 0 0 1px rgba(52, 119, 138, .14); }
.calendar-day-number { color: #315561; }
.calendar-day--today .calendar-day-number { color: #2f7181; }
.calendar-item { color: #416773; }
.calendar-item--stream { border-color: rgba(52, 119, 138, .25); color: #2e7182; background: rgba(255, 255, 255, .22); }
.calendar-item--stream:hover, .calendar-item--stream:focus-visible { border-color: rgba(52, 119, 138, .58); background: rgba(255, 255, 255, .38); }
.calendar-legend { color: #5a7882; }
.calendar-legend-dot--stream { color: #3a8293; text-shadow: 0 0 8px rgba(63, 133, 149, .4); }
.schedule-list .empty-state { color: #5a7882; }
.schedule-list .empty-state span { color: #4b899b; }

.events-grid .event-card {
    background: linear-gradient(160deg, #a8cad4, #82aab5);
    box-shadow: 0 22px 58px rgba(54, 105, 121, .16);
}
.events-grid .event-card::before { background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 68%); }
.events-grid .event-card:hover { border-color: rgba(52, 119, 138, .56); box-shadow: 0 30px 70px rgba(54, 105, 121, .22); }
.events-grid .event-content { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(39, 86, 99, .08)); }
.events-grid .event-date { border-color: rgba(220, 237, 240, .52); background: linear-gradient(145deg, #5a8e9c, #3c6c7a); box-shadow: 0 12px 25px rgba(39, 86, 99, .24), inset 0 1px rgba(255, 255, 255, .22); }
.events-grid .event-date span:first-child, .events-grid .event-content h3 { color: #1c3c48; }
.events-grid .event-date span:nth-child(2) { color: #d9f0f2; }
.events-grid .event-date small { color: #e1eff1; }
.events-grid .event-content p { color: #496a75; }
.events-grid .event-meta span { border-color: rgba(42, 84, 97, .18); color: #456671; background: rgba(255, 255, 255, .2); }
.events-grid .event-card .text-link { color: #34768a; }
.events-grid .event-note { color: #5c7983; }

/* Match the public widgets to the admin page's panel treatment. */
.hero-dashboard,
.next-stream-card,
.schedule-list,
.events-grid .event-card {
    color: #f3fbff;
    border-color: rgba(183, 228, 249, .28);
    background: rgba(29, 76, 113, .82);
    box-shadow: 0 22px 58px rgba(3, 18, 36, .24);
}

.hero-dashboard {
    background: linear-gradient(150deg, rgba(47, 111, 153, .94), rgba(23, 61, 98, .98));
    box-shadow: 0 28px 70px rgba(3, 18, 36, .32);
}
.hero-dashboard::before { background: radial-gradient(circle, rgba(104, 224, 255, .2), transparent 68%); }
.hero-dashboard::after { background: radial-gradient(circle, rgba(143, 158, 255, .16), transparent 68%); }
.hero-dashboard-top { border-bottom-color: rgba(183, 228, 249, .16); background: rgba(214, 243, 252, .08); }
.dashboard-caption { color: #d5f0fb; }
.dashboard-status { color: #b1f3d9; }
.dashboard-kicker { color: #b8f1ff; }
.dashboard-date { color: #e5f7ff; }
.dashboard-date span { color: #7de4ff; }
.hero-dashboard-main h2 { color: #f5fcff; }
.hero-dashboard-main p { color: #c5dfeb; }
.hero-dashboard .live-dot { color: #70f3c7; }
.hero-agenda { border-color: rgba(183, 228, 249, .2); background: rgba(7, 28, 52, .34); }
.hero-agenda-heading { color: #b4d5e3; }
.hero-agenda-heading span:last-child { color: #d7f1fa; }
.hero-agenda-row { border-color: rgba(183, 228, 249, .14); }
.agenda-day { color: #d7f7ff; background: rgba(77, 183, 235, .2); }
.agenda-copy strong { color: #f3fbff; }
.agenda-copy small, .hero-agenda-empty { color: #b4d5e3; }
.agenda-arrow { color: #b8f1ff; }

.next-stream-card {
    background: radial-gradient(circle at 90% 8%, rgba(104, 224, 255, .2), transparent 33%), linear-gradient(155deg, rgba(47, 111, 153, .96), rgba(17, 52, 88, .98));
    box-shadow: 0 22px 58px rgba(3, 18, 36, .28);
}
.next-stream-card::after { border-color: rgba(132, 225, 255, .23); box-shadow: 0 0 0 25px rgba(91, 194, 255, .04), 0 0 0 50px rgba(91, 194, 255, .035), 0 0 0 75px rgba(91, 194, 255, .025); }
.next-stream-card .card-kicker { color: #70f3c7; }
.next-date span { color: #e1f3fb; }
.next-date strong, .countdown span { color: #b8f1ff; }
.next-stream-card h3 { color: #f3fbff; }
.next-stream-card p { color: #bfd8e6; }
.next-meta span { border-color: rgba(159, 218, 245, .28); color: #d1ecf6; background: rgba(255, 255, 255, .06); }
.countdown small { color: #9dc2d3; }
.text-link { color: #b8f1ff; }
.text-link:hover { color: #fff; }
.stream-link--youtube { border-color: rgba(255, 104, 151, .28); color: #ffabc4; background: rgba(255, 72, 116, .09); }
.stream-link--youtube:hover { border-color: rgba(255, 104, 151, .65); background: rgba(255, 72, 116, .18); }
.stream-link--twitch { border-color: rgba(167, 106, 255, .33); color: #d6b8ff; background: rgba(145, 68, 255, .11); }
.stream-link--twitch:hover { border-color: rgba(167, 106, 255, .7); background: rgba(145, 68, 255, .2); }

.schedule-list {
    background: rgba(29, 76, 113, .82);
    box-shadow: 0 22px 58px rgba(3, 18, 36, .22);
}
.list-topline { border-bottom-color: rgba(183, 228, 249, .2); color: #d3edf6; }
.list-topline span:last-child { color: #a9c9d8; }
.schedule-month-toggle { color: #e4f5fb; }
.schedule-month-toggle:hover, .schedule-month-toggle:focus-visible { border-color: rgba(183, 228, 249, .24); color: #fff; background: rgba(214, 243, 252, .08); }
.schedule-month-toggle-label { color: #b8f1ff; background: rgba(125, 228, 255, .12); }
.month-button { border-color: rgba(183, 228, 249, .28); color: #b8f1ff; background: rgba(214, 243, 252, .08); }
.month-button:hover:not(:disabled), .month-button:focus-visible:not(:disabled) { border-color: rgba(184, 241, 255, .7); color: #fff; background: rgba(82, 196, 239, .17); }
.schedule-row { border-bottom-color: rgba(183, 228, 249, .14); }
.schedule-row:hover, .schedule-row:focus-visible { background: rgba(76, 176, 231, .14); }
.schedule-row--active::before { background: linear-gradient(var(--blue), var(--cyan)); box-shadow: 0 0 13px var(--blue); }
.schedule-date { border-color: rgba(113, 211, 247, .38); background: rgba(63, 167, 222, .18); }
.schedule-date strong, .schedule-main h3 { color: #f4fbff; }
.schedule-date span, .schedule-time strong { color: #b8f1ff; }
.schedule-main p { color: #a7c9d9; }
.schedule-time small { color: #91b6c9; }
.calendar-weekdays { color: #a6cada; }
.calendar-day { border-color: rgba(158, 216, 241, .18); background: rgba(10, 39, 66, .46); }
.calendar-day--empty { background: rgba(255, 255, 255, .015); }
.calendar-day--today { border-color: rgba(184, 241, 255, .65); box-shadow: inset 0 0 0 1px rgba(184, 241, 255, .12); }
.calendar-day-number { color: #e1f3fb; }
.calendar-day--today .calendar-day-number { color: #b8f1ff; }
.calendar-item { color: #d9eff8; }
.calendar-item--stream { border-color: rgba(125, 228, 255, .22); color: #b5f0ff; background: rgba(42, 163, 207, .18); }
.calendar-item--stream:hover, .calendar-item--stream:focus-visible { border-color: rgba(125, 228, 255, .65); background: rgba(42, 163, 207, .3); }
.calendar-legend { color: #b0d0de; }
.calendar-legend-dot--stream { color: #b8f1ff; text-shadow: 0 0 9px rgba(184, 241, 255, .6); }
.schedule-list .empty-state { color: #bfd8e6; }
.schedule-list .empty-state span { color: #8f9eff; }

.events-grid .event-card {
    background: linear-gradient(160deg, rgba(47, 111, 153, .9), rgba(18, 61, 98, .96));
    box-shadow: 0 22px 58px rgba(3, 18, 36, .24);
}
.events-grid .event-card::before { background: radial-gradient(circle, rgba(104, 224, 255, .2), transparent 68%); }
.events-grid .event-card:hover { border-color: rgba(125, 219, 255, .62); box-shadow: 0 30px 70px rgba(3, 18, 36, .32); }
.event-art { background: radial-gradient(circle at 75% 15%, rgba(104, 218, 255, .72), transparent 24%), linear-gradient(135deg, #1e5a83, #3177a9 49%, #243e73); }
.event-art--blue { background: radial-gradient(circle at 30% 15%, rgba(105, 234, 255, .78), transparent 24%), linear-gradient(135deg, #155a7f, #3d79ba 50%, #273d75); }
.event-art::after { border-color: rgba(233, 244, 248, .3); box-shadow: 0 0 0 23px rgba(233, 244, 248, .04), 0 0 0 47px rgba(233, 244, 248, .035), 0 0 0 71px rgba(233, 244, 248, .025); }
.events-grid .event-content { background: linear-gradient(180deg, rgba(10, 37, 63, .08), rgba(7, 26, 46, .28)); }
.events-grid .event-date { border-color: rgba(183, 231, 255, .58); background: linear-gradient(145deg, rgba(54, 133, 176, .98), rgba(24, 69, 111, .98)); box-shadow: 0 12px 25px rgba(4, 24, 44, .35), inset 0 1px rgba(255, 255, 255, .2); }
.events-grid .event-date span:first-child, .events-grid .event-content h3 { color: #f4fbff; }
.events-grid .event-date span:nth-child(2) { color: #b8f1ff; }
.events-grid .event-date small { color: #b8dceb; }
.events-grid .event-content p { color: #d2e8f1; }
.events-grid .event-meta span { border-color: rgba(173, 224, 247, .2); color: #c8e6f0; background: rgba(122, 211, 243, .08); }
.events-grid .event-card .text-link { color: #b8f1ff; }
.events-grid .event-note { color: #b5d2df; }

/* Keep calendar times visible and truncate long stream titles cleanly. */
.calendar-day-items { min-width: 0; }
.calendar-item,
button.calendar-item {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 3px 4px;
    font-size: 7px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .calendar-item,
    button.calendar-item {
        padding: 2px 3px;
        font-size: 6px;
        line-height: 1.1;
    }
}

/* Calendar stream entries use a compact time row followed by a title row. */
.calendar-item--stream {
    white-space: normal;
}
.calendar-item-time,
.calendar-item-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-item-time {
    font-size: 6px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.calendar-item-title {
    margin-top: 2px;
    font-size: 6px;
    font-weight: 700;
}

@media (max-width: 720px) {
    .calendar-item-time,
    .calendar-item-title {
        font-size: 5px;
    }
}

/* Restore the PlayHub logo's cyan, blue, magenta, and white color language. */
.about-mark {
    border-color: rgba(32, 217, 255, .72);
    background: radial-gradient(circle at 38% 23%, rgba(32, 217, 255, .42), transparent 20%), radial-gradient(circle at 70% 65%, rgba(198, 55, 255, .5), transparent 30%), #0c113d;
    box-shadow: 0 0 0 20px rgba(32, 217, 255, .07), 0 0 0 42px rgba(89, 101, 255, .06), 0 0 70px rgba(198, 55, 255, .24);
    padding: 4%;
    overflow: visible;
}
.about-mark::before { border-color: rgba(139, 220, 255, .68); }
.about-mark::after { border-color: rgba(198, 55, 255, .62); }
.about-mark-word {
    position: relative;
    z-index: 2;
    display: block;
    width: max-content;
    min-width: 0;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
    justify-self: center;
    transform: rotate(8deg) scale(.82);
    transform-origin: center;
    isolation: isolate;
    font-size: clamp(2.7rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: -.08em;
    line-height: .86;
}
.about-mark-word--play { margin-left: -18px; letter-spacing: -.04em; transform: translateY(-8px) rotate(8deg) scale(.82); }
.about-mark-word--hub { margin-left: 18px; transform: translateY(8px) rotate(8deg) scale(.82); }
.about-mark-word-shadow,
.about-mark-word-face {
    display: block;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: nowrap;
}
.about-mark-word-shadow {
    position: absolute;
    top: 12px;
    left: calc(10px + .16em);
    z-index: 0;
    color: rgba(4, 10, 39, .7);
    -webkit-text-fill-color: rgba(4, 10, 39, .7);
    text-shadow: none;
    pointer-events: none;
}
.about-mark-word-face {
    position: relative;
    z-index: 1;
    width: max-content;
    max-width: none;
    overflow: visible;
    padding: .02em .16em .08em;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
}
.about-mark-word--play .about-mark-word-face {
    background-image: linear-gradient(160deg, #ff78ec 0%, #c94bff 48%, #897dff 100%);
}
.about-mark-word--hub .about-mark-word-face {
    background-image: linear-gradient(160deg, #ffffff 0%, #d7e0ff 48%, #8ea9ff 100%);
}
.about-mark i { background: #20d9ff; box-shadow: 0 0 14px #20d9ff; }
.about-mark-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: block;
    width: min(240px, 78%);
    height: 124px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%) rotate(8deg);
    pointer-events: none;
}
.about-mark-icons i {
    position: absolute;
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    font-size: clamp(20px, 2.5vw, 30px);
    line-height: 1;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 0 6px currentColor);
}
.about-mark-icons i:nth-child(1) { top: 31%; left: -3%; transform: rotate(-20deg); }
.about-mark-icons i:nth-child(2) { top: 10%; left: 23%; transform: rotate(9deg); }
.about-mark-icons i:nth-child(3) { top: 33%; left: 46%; transform: rotate(-8deg); }
.about-mark-icons i:nth-child(4) { top: 1%; right: 22%; transform: rotate(16deg); }
.about-mark-icons i:nth-child(5) { top: 31%; right: -2%; transform: rotate(22deg); }
.about-mark-icons i:nth-child(6) { top: 78%; left: 13%; transform: rotate(-14deg); }
.about-mark-icons i:nth-child(7) { top: 70%; left: 37%; transform: rotate(7deg); }
.about-mark-icons i:nth-child(8) { top: 72%; right: 10%; transform: rotate(18deg); }
.about-mark-icons i:nth-child(1) { color: #20d9ff; }
.about-mark-icons i:nth-child(2) { color: #8bdcff; }
.about-mark-icons i:nth-child(3) { color: #5965ff; }
.about-mark-icons i:nth-child(4) { color: #c637ff; }
.about-mark-icons i:nth-child(5) { color: #ff6bea; }
.about-mark-icons i:nth-child(6) { color: #4aa8ff; }
.about-mark-icons i:nth-child(7) { color: #7c8dff; }
.about-mark-icons i:nth-child(8) { color: #b77cff; }
@media (max-width: 720px) {
    .about-mark-icons { width: min(220px, 80%); height: 108px; }
    .about-mark-icons i { font-size: clamp(18px, 3.8vw, 24px); }
}

.about-links .button--youtube {
    border-color: rgba(211, 42, 81, .38);
    color: #c3294d;
    background: rgba(211, 42, 81, .1);
}
.about-links .button--youtube:hover {
    border-color: rgba(211, 42, 81, .68);
    color: #a91d3e;
    background: rgba(211, 42, 81, .17);
}
.about-links .button--twitch {
    border-color: rgba(116, 67, 190, .4);
    color: #7041b5;
    background: rgba(116, 67, 190, .11);
}
.about-links .button--twitch:hover {
    border-color: rgba(116, 67, 190, .7);
    color: #5b2d9d;
    background: rgba(116, 67, 190, .18);
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.footer-links a:hover { transform: translateY(-1px); }
.footer-links .footer-link--youtube {
    border-color: rgba(211, 42, 81, .3);
    color: #c3294d;
    background: rgba(211, 42, 81, .08);
}
.footer-links .footer-link--youtube:hover {
    border-color: rgba(211, 42, 81, .58);
    color: #a91d3e;
    background: rgba(211, 42, 81, .14);
}
.footer-links .footer-link--twitch {
    border-color: rgba(116, 67, 190, .32);
    color: #7041b5;
    background: rgba(116, 67, 190, .09);
}
.footer-links .footer-link--twitch:hover {
    border-color: rgba(116, 67, 190, .62);
    color: #5b2d9d;
    background: rgba(116, 67, 190, .15);
}

/* A light, misty canvas keeps the content airy without turning the page white. */
body {
    background:
        radial-gradient(circle at 12% -8%, rgba(116, 187, 204, .22), transparent 34%),
        radial-gradient(circle at 92% 28%, rgba(171, 150, 194, .16), transparent 36%),
        linear-gradient(180deg, #d9e1df 0%, #cdd8d8 52%, #becdd2 100%);
}

.next-stream-card .card-kicker--selected { color: #b8f1ff; }
.next-stream-card .card-kicker--empty { color: #b8d8e2; }
.next-stream-card .next-date { margin-top: 12px; }
.events-grid .empty-state { color: #365b66; }
.events-grid .empty-state span { color: #4a8192; }
.events-grid .empty-state p { color: #365b66; font-weight: 700; }

.schedule-view-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin: 13px 3px 0;
    padding: 4px;
    border: 1px solid rgba(183, 228, 249, .18);
    border-radius: 10px;
    background: rgba(7, 28, 52, .24);
}
.schedule-view-tab {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #a9c9d8;
    background: transparent;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.schedule-view-tab:hover,
.schedule-view-tab:focus-visible {
    border-color: rgba(183, 228, 249, .24);
    color: #f3fbff;
    outline: none;
}
.schedule-view-tab.is-active {
    border-color: rgba(125, 228, 255, .38);
    color: #e5f7ff;
    background: rgba(76, 176, 231, .2);
    box-shadow: inset 0 0 0 1px rgba(184, 241, 255, .06);
}
.schedule-month-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 11px;
    padding-bottom: 9px;
}
.schedule-period-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    flex: 1;
    gap: 13px;
}
.schedule-period {
    min-width: 0;
    flex: 1;
    min-width: 0;
    color: #d3edf6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-align: center;
}
.schedule-today-button {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 29px;
    padding: 0 7px;
    border: 1px solid rgba(183, 228, 249, .28);
    border-radius: 9px;
    color: #b8f1ff;
    background: rgba(214, 243, 252, .08);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.schedule-today-button:hover:not(:disabled),
.schedule-today-button:focus-visible:not(:disabled) {
    border-color: rgba(184, 241, 255, .7);
    color: #fff;
    background: rgba(82, 196, 239, .17);
    outline: none;
}
.schedule-today-button:disabled {
    cursor: default;
    opacity: .46;
}
.schedule-day-picker {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    padding: 2px 3px 12px;
}
.schedule-day-picker[hidden] { display: none; }
.schedule-day-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 54px;
    padding: 6px 3px 8px;
    border: 1px solid rgba(183, 228, 249, .16);
    border-radius: 9px;
    color: #a9c9d8;
    background: rgba(7, 28, 52, .24);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.schedule-day-option:hover,
.schedule-day-option:focus-visible {
    border-color: rgba(184, 241, 255, .48);
    color: #f3fbff;
    outline: none;
    transform: translateY(-1px);
}
.schedule-day-option.is-today {
    border-color: rgba(184, 241, 255, .65);
    box-shadow: inset 0 0 0 1px rgba(184, 241, 255, .1);
}
.schedule-day-option.is-today .schedule-day-name { color: #b8f1ff; }
.schedule-day-option.is-selected {
    border-color: rgba(125, 228, 255, .7);
    color: #f3fbff;
    background: rgba(76, 176, 231, .26);
}
.schedule-day-name {
    color: #a9c9d8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}
.schedule-day-number {
    margin-top: 7px;
    color: #e5f7ff;
    font-size: 16px;
    line-height: 1;
}
.schedule-day-marker {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #70f3c7;
    box-shadow: 0 0 8px rgba(112, 243, 199, .8);
}
@media (max-width: 720px) {
    .schedule-view-tabs { margin-top: 11px; }
    .schedule-view-tab { padding: 7px 4px; font-size: 8px; }
    .schedule-month-controls { gap: 7px; }
    .schedule-period-nav { gap: 6px; }
    .schedule-day-picker { gap: 3px; padding-right: 0; padding-left: 0; }
    .schedule-day-option { min-height: 50px; }
    .schedule-day-number { font-size: 15px; }
}

/* Keep the currently selected stream visible in the month grid. */
.calendar-item--stream.calendar-item--active,
.calendar-item--stream.calendar-item--active:hover,
.calendar-item--stream.calendar-item--active:focus-visible {
    border-color: rgba(184, 241, 255, .92);
    color: #f4fcff;
    background: linear-gradient(135deg, rgba(61, 196, 235, .54), rgba(106, 126, 255, .46));
    box-shadow: 0 0 0 1px rgba(184, 241, 255, .16), 0 0 14px rgba(98, 220, 255, .32);
}

/* Give busy month days room to breathe while keeping their stream list contained. */
.calendar-day {
    min-height: 92px;
    padding: 7px 6px;
}
.calendar-day-items {
    max-height: 58px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-color: rgba(125, 228, 255, .5) transparent;
    scrollbar-width: thin;
}
.calendar-day-items::-webkit-scrollbar { width: 4px; }
.calendar-day-items::-webkit-scrollbar-track { background: transparent; }
.calendar-day-items::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(125, 228, 255, .5);
}
.calendar-item-time { font-size: 7px; }
.calendar-item-title {
    margin-top: 2px;
    font-size: 7px;
}

@media (max-width: 720px) {
    .calendar-day {
        min-height: 74px;
        padding: 5px 3px;
    }
    .calendar-day-items {
        max-height: 46px;
        padding-right: 1px;
    }
    .calendar-item-time,
    .calendar-item-title {
        font-size: 6px;
    }
}

/* Keep both schedule columns at their natural height beside each other. */
.schedule-layout {
    align-items: start;
}

/* Show a real YouTube video only for stream-specific links, keeping it above the countdown. */
.youtube-embed {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(183, 228, 249, .28);
    border-radius: var(--radius-lg);
    background: rgba(7, 28, 52, .55);
    box-shadow: 0 14px 30px rgba(3, 18, 36, .24);
}
.youtube-embed[hidden] { display: none; }
.youtube-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.next-stream-card.has-youtube-embed .countdown {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 2;
    align-items: flex-end;
    margin-top: 14px;
}

/* Keep livestream descriptions readable while making shared URLs useful. */
.next-stream-card p a,
.schedule-main p a {
    color: var(--cyan);
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: rgba(184, 241, 255, .62);
    text-underline-offset: 2px;
}
.next-stream-card p a:hover,
.next-stream-card p a:focus-visible,
.schedule-main p a:hover,
.schedule-main p a:focus-visible {
    color: #fff;
    text-decoration-color: currentColor;
}
.schedule-main p {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.schedule-main p a {
    overflow-wrap: normal;
}

.next-stream-card .stream-description {
    max-height: calc(1.65em * 4);
    overflow: hidden;
}
.description-more-button,
.hero-description-more {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 11px;
    border: 1px solid rgba(184, 241, 255, .42);
    border-radius: 8px;
    color: #b8f1ff;
    background: rgba(82, 196, 239, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.description-more-button[hidden] {
    display: none;
}
.description-more-button:hover,
.hero-description-more:hover,
.description-more-button:focus-visible,
.hero-description-more:focus-visible {
    border-color: rgba(184, 241, 255, .78);
    color: #fff;
    background: rgba(82, 196, 239, .24);
    box-shadow: 0 0 14px rgba(82, 196, 239, .16), inset 0 0 0 1px rgba(255, 255, 255, .06);
    outline: none;
}
.description-more-button i,
.hero-description-more i {
    font-size: 8px;
}

.hero-stream-description {
    max-width: 380px;
    max-height: calc(1.65em * 4);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    white-space: normal;
}
.hero-stream-description a {
    color: var(--cyan);
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: rgba(184, 241, 255, .62);
    text-underline-offset: 2px;
}
.hero-stream-description a:hover,
.hero-stream-description a:focus-visible {
    color: #fff;
    text-decoration-color: currentColor;
}
body.stream-modal-open {
    overflow: hidden;
}
.stream-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
}
.stream-modal[hidden] {
    display: none;
}
.stream-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(4, 17, 31, .74);
    backdrop-filter: blur(7px);
    cursor: default;
}
.stream-modal-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    width: min(100%, 720px);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(183, 231, 255, .38);
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at 90% 8%, rgba(104, 224, 255, .2), transparent 33%), linear-gradient(155deg, rgba(47, 111, 153, .98), rgba(17, 52, 88, .99));
    box-shadow: 0 28px 90px rgba(3, 18, 36, .48);
}
.stream-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 241, 255, .68) rgba(5, 24, 43, .42);
    scrollbar-gutter: stable;
    padding: 30px;
}
.stream-modal-scroll::-webkit-scrollbar {
    width: 9px;
}
.stream-modal-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(5, 24, 43, .42);
}
.stream-modal-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(184, 241, 255, .88), rgba(82, 196, 239, .72)) padding-box;
    box-shadow: 0 0 10px rgba(82, 196, 239, .28);
}
.stream-modal-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #fff, rgba(184, 241, 255, .86)) padding-box;
}
.stream-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(183, 228, 249, .28);
    border-radius: 9px;
    color: #b8f1ff;
    background: rgba(214, 243, 252, .08);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.stream-modal-close:hover,
.stream-modal-close:focus-visible {
    border-color: rgba(184, 241, 255, .72);
    color: #fff;
    background: rgba(82, 196, 239, .18);
    outline: none;
}
.stream-modal-dialog .card-kicker {
    padding-right: 42px;
    color: #b8f1ff;
}
.stream-modal-date {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-top: 22px;
}
.stream-modal-date span {
    color: #e1f3fb;
    font-size: 13px;
}
.stream-modal-date strong {
    color: #b8f1ff;
    font-size: 22px;
}
.stream-modal-dialog h2 {
    margin: 14px 0 0;
    color: #f3fbff;
    font-size: clamp(1.65rem, 4vw, 2.45rem);
    letter-spacing: -.05em;
    line-height: 1.05;
}
.stream-modal-description {
    margin-top: 18px;
    color: #d0e7f0;
    font-size: 13px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
.stream-modal-description a {
    color: #b8f1ff;
    text-decoration: underline;
    text-decoration-color: rgba(184, 241, 255, .62);
    text-underline-offset: 2px;
}
.stream-modal-description a:hover,
.stream-modal-description a:focus-visible {
    color: #fff;
    text-decoration-color: currentColor;
}
.stream-modal-links {
    margin-top: 22px;
}
.stream-modal-embed {
    margin-top: 18px;
    z-index: 0;
    box-shadow: none;
    isolation: isolate;
    contain: paint;
}
.legal-hero {
    padding-top: 76px;
    padding-bottom: 52px;
}
.legal-hero h1 {
    margin: 14px 0 0;
    color: #1d3d49;
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    letter-spacing: -.07em;
    line-height: .96;
}
.legal-hero p {
    max-width: 620px;
    margin: 20px 0 0;
    color: #355963;
    font-size: 14px;
    line-height: 1.7;
}
.legal-content {
    padding-top: 0;
    padding-bottom: 100px;
}
.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.legal-card {
    min-width: 0;
    padding: 28px;
    border: 1px solid rgba(183, 228, 249, .18);
    border-radius: var(--radius-lg);
    background: rgba(24, 62, 96, .72);
    box-shadow: 0 20px 55px rgba(3, 18, 36, .18);
}
.legal-details {
    display: grid;
    gap: 0;
    margin: 24px 0 0;
}
.legal-details > div {
    display: grid;
    grid-template-columns: minmax(145px, .8fr) minmax(0, 1.2fr);
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(183, 228, 249, .12);
}
.legal-details > div:first-child {
    padding-top: 0;
}
.legal-details > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.legal-details dt {
    color: #a7c9d9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.5;
}
.legal-details dd {
    min-width: 0;
    margin: 0;
    color: #eef9fd;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.legal-details a {
    color: var(--cyan);
    text-decoration: underline;
    text-decoration-color: rgba(184, 241, 255, .58);
    text-underline-offset: 2px;
}
.legal-details a:hover,
.legal-details a:focus-visible {
    color: #fff;
    text-decoration-color: currentColor;
}
.legal-date {
    margin: 24px 0 0;
    color: #2e6677;
    font-size: 12px;
    text-align: right;
}
.legal-date strong {
    color: #234652;
}
.footer-links .footer-link--impressum {
    border-color: rgba(52, 119, 138, .38);
    color: #2d7182;
    background: rgba(72, 143, 161, .12);
}
.footer-links .footer-link--impressum:hover,
.footer-links .footer-link--impressum:focus-visible {
    border-color: rgba(52, 119, 138, .72);
    color: #1d5365;
    background: rgba(72, 143, 161, .2);
}
.hero-agenda-row[data-hero-stream-target] {
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.hero-agenda-row[data-hero-stream-target]:hover,
.hero-agenda-row[data-hero-stream-target]:focus-visible {
    border-radius: 10px;
    outline: none;
    background: rgba(82, 196, 239, .12);
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.main-nav a::after {
    right: 12px;
    bottom: 4px;
    left: 12px;
}
.main-nav a:hover,
.main-nav a:focus-visible {
    border-color: rgba(35, 49, 60, .32);
    color: #1d2932;
    background: rgba(35, 49, 60, .06);
    box-shadow: 0 3px 10px rgba(35, 49, 60, .07);
    outline: none;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
    transform: scaleX(0);
}
.main-nav a.is-active {
    border-color: transparent;
    color: #1d2932;
    background: transparent;
}
.main-nav a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}
.main-nav a.is-active:hover::after,
.main-nav a.is-active:focus-visible::after {
    transform: scaleX(1);
}
.main-nav.is-open a::after {
    display: block;
}
@media (max-width: 720px) {
    .schedule-main p {
        display: none;
    }
    .stream-modal {
        padding: 12px;
    }
    .stream-modal-dialog {
        max-height: calc(100vh - 24px);
    }
    .stream-modal-scroll {
        max-height: calc(100vh - 24px);
        padding: 24px 20px;
    }
    .stream-modal-date strong {
        font-size: 18px;
    }
    .legal-hero {
        padding-top: 54px;
        padding-bottom: 38px;
    }
    .legal-content {
        padding-bottom: 72px;
    }
    .legal-grid {
        grid-template-columns: 1fr;
    }
    .legal-card {
        padding: 23px;
    }
    .legal-details > div {
        display: block;
    }
    .legal-details dt {
        margin-bottom: 5px;
    }
    .legal-date {
        text-align: left;
    }
}

.error-page {
    display: flex;
    min-height: calc(100vh - 154px);
    align-items: center;
}
.error-hero {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
    align-items: center;
    gap: clamp(34px, 7vw, 110px);
    width: 100%;
    padding-top: clamp(64px, 10vh, 120px);
    padding-bottom: clamp(76px, 12vh, 145px);
}
.error-copy {
    position: relative;
    z-index: 1;
    max-width: 610px;
}
.error-copy h1 {
    max-width: 9ch;
    margin: 18px 0 0;
    color: #1d3d49;
    font-size: clamp(3.4rem, 7vw, 7.5rem);
    letter-spacing: -.085em;
    line-height: .91;
}
.error-copy p {
    max-width: 540px;
    margin: 25px 0 0;
    color: #355963;
    font-size: 15px;
    line-height: 1.75;
}
.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 31px;
}
.error-visual {
    position: relative;
    display: grid;
    min-height: clamp(300px, 38vw, 520px);
    place-items: center;
    isolation: isolate;
}
.error-visual::before {
    position: absolute;
    width: min(76%, 410px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(112, 179, 200, .3), rgba(126, 145, 170, .12) 42%, transparent 70%);
    content: "";
    filter: blur(7px);
}
.error-number {
    position: relative;
    z-index: 1;
    color: #26323c;
    font-size: clamp(7.5rem, 19vw, 15rem);
    font-weight: 900;
    letter-spacing: -.14em;
    line-height: .75;
    text-shadow: 12px 15px 0 rgba(126, 145, 170, .18), 0 20px 45px rgba(28, 39, 48, .16);
}
.error-orbit {
    position: absolute;
    z-index: 0;
    border: 1px solid rgba(63, 129, 148, .32);
    border-radius: 50%;
    transform: rotate(-22deg);
}
.error-orbit--outer {
    width: min(100%, 530px);
    aspect-ratio: 1.45;
}
.error-orbit--inner {
    width: min(75%, 390px);
    aspect-ratio: 1.45;
    border-color: rgba(126, 145, 170, .35);
    transform: rotate(38deg);
}
.error-signal {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(183, 228, 249, .58);
    border-radius: 15px;
    color: #effcff;
    background: linear-gradient(145deg, rgba(54, 133, 176, .98), rgba(24, 69, 111, .98));
    box-shadow: 0 12px 25px rgba(4, 24, 44, .22), 0 0 24px rgba(112, 179, 200, .27);
}
.error-signal--one {
    top: 17%;
    left: 15%;
    color: #b8f1ff;
    transform: rotate(-13deg);
}
.error-signal--two {
    right: 12%;
    bottom: 20%;
    color: #f0c5d0;
    transform: rotate(12deg);
}
.error-signal--three {
    top: 13%;
    right: 19%;
    color: #d6d5ff;
    transform: rotate(18deg);
}
@media (max-width: 760px) {
    .error-page {
        min-height: auto;
    }
    .error-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 58px;
        padding-bottom: 84px;
    }
    .error-copy h1 {
        max-width: 10ch;
        font-size: clamp(3.2rem, 15vw, 5.6rem);
    }
    .error-copy p {
        font-size: 14px;
    }
    .error-visual {
        min-height: 260px;
        order: -1;
    }
    .error-number {
        font-size: clamp(7rem, 30vw, 11rem);
    }
    .error-orbit--outer {
        width: min(100%, 380px);
    }
    .error-orbit--inner {
        width: min(75%, 285px);
    }
    .error-signal--one {
        left: 7%;
    }
    .error-signal--two {
        right: 5%;
    }
    .error-signal--three {
        right: 13%;
    }
}