/* Modern UI preview. The approved cafe.css remains intact for instant comparison. */
:root {
  font-family: 'DM Sans', system-ui, sans-serif;
  --accent:#bcaaff; --orange:#bcaaff; --green:#c5ed87;
  --bg:#111315; --panel:#1a1d20; --edge:#303438; --line:#303438;
  --text:#f3f4f5; --soft:#a8adb4; --muted:#a8adb4;
  color:var(--text); background:var(--bg); color-scheme:dark;
}
:root[data-theme=dark] {background:var(--bg);color:var(--text)}
:root[data-theme=light] {
  --bg:#f5f6f8; --panel:#fff; --edge:#dce0e5; --line:#dce0e5;
  --text:#20252b; --soft:#5c6571; --muted:#5c6571;
  --accent:#6544ba; --orange:#6544ba; --green:#357044;
  background:var(--bg);color:var(--text);color-scheme:light;
}
body {background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}
h1,h2,h3,.brand {font-family:'DM Sans',system-ui,sans-serif}
button,a,input,select { -webkit-tap-highlight-color:transparent }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
[hidden] {display:none!important}
.club-header {background:var(--bg);backdrop-filter:none;border-color:var(--edge);z-index:8;padding:0}
.topbar {height:80px;max-width:none;padding:0 32px;gap:20px;background:var(--bg)!important}
.brand {gap:12px;letter-spacing:-.6px;flex-shrink:0}
.brand .brand-type {font-size:20px;line-height:1.15}
.brand-type small {font-size:9px;letter-spacing:3px;margin-top:6px;color:var(--soft)}
.club-logo-mark {width:42px;height:42px}
.club-badge,.nav-caption,.header-help {display:none}
.topbar .search {position:static;width:min(420px,42vw);margin-left:auto;padding:11px 14px;border:1px solid var(--edge);border-radius:10px;background:var(--panel)}
.search input,.search input::placeholder {font-size:14px;color:var(--soft)}
.search input {color:var(--text)}
.search kbd {background:var(--bg);color:var(--soft);border-color:var(--edge);font-size:12px}
.theme-toggle {width:38px;height:38px;font-size:19px;padding:6px;margin:0!important}
.avatar {width:38px;height:38px;border:1px solid var(--edge)!important;background:var(--panel)!important}
.nav-row {padding:0 32px;max-width:none;gap:20px;min-height:52px}
.nav-row #navigation {gap:8px}
.nav-row .nav-item {font-size:14px;gap:10px;padding:12px 16px;font-weight:500;color:var(--soft);border:0;border-radius:8px;line-height:1.5;min-height:44px;margin:0}
.nav-row .nav-item svg {width:19px;height:19px;display:block}
.nav-row .nav-item.active,[data-theme=dark] .nav-row .nav-item.active {background:#bcaaff16;color:var(--accent);box-shadow:none;border:0}
.nav-row .nav-item:hover,[data-theme=dark] .nav-row .nav-item:hover {background:var(--panel);color:var(--text)}
.nav-row .nav-count {background:var(--green);color:var(--bg);font-size:11px;padding:1px 6px;border-radius:5px;margin-left:2px}
.ui-version {font-size:12px;white-space:nowrap;color:var(--soft);padding:8px 0;line-height:1.5}
.ui-version:hover {color:var(--text)}
main {max-width:1560px;padding:36px 40px 0;margin:auto}
body .heading,body[data-view=discover] .heading,body:not([data-view=discover]) .heading {margin:0 0 28px;align-items:center}
body .heading h1,body[data-view=discover] .heading h1,body:not([data-view=discover]) .heading h1 {font-size:30px;font-weight:650;line-height:1.25;letter-spacing:-.9px}
body .heading p,body[data-view=discover] .heading p {font-size:14px;line-height:1.6;color:var(--soft);margin-top:8px;max-width:620px}
.today {font-size:13px;color:var(--soft)!important;gap:8px;white-space:nowrap}
.hero.overview-program {grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:24px;margin-bottom:32px}
.overview-program .spotlight,[data-theme=light] .overview-program .spotlight {background:var(--panel);border:1px solid var(--edge);border-radius:14px;margin:0;box-shadow:none;transform:none}
.feature-poster {height:auto;aspect-ratio:16/9;background:#090a0b}
.feature-poster>img {object-fit:contain}
.feature-label {font-size:11px;letter-spacing:.4px;padding:7px 10px;border-radius:5px}
.feature-play {width:48px;height:48px}
.feature-details {padding:20px;gap:16px;flex-wrap:wrap}
.feature-category {font-size:12px;color:var(--soft)}
.feature-details h2 {font-size:23px;font-weight:600;line-height:1.3;letter-spacing:-.5px;margin:7px 0 0}
.feature-watch,[data-theme=light] .feature-watch {font-size:13px;font-weight:600;padding:11px 16px;border-radius:8px;background:var(--accent);color:#191329;gap:10px}
[data-theme=light] .feature-watch {color:#fff}
.feature-watch:hover {filter:brightness(1.08);background:var(--accent)}
.up-next {padding:20px;border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.up-next-heading,[data-theme=light] .up-next-heading {padding:0 0 16px;border-color:var(--edge)}
.up-next-heading h2 {font-size:18px;font-weight:600;letter-spacing:-.3px}
.up-next-heading>span {font-size:10px;letter-spacing:1px;color:var(--soft)}
.next-event,[data-theme=light] .next-event {padding:16px 0;gap:14px;border-color:var(--edge)}
.next-event time {width:48px;gap:3px}
.next-event time strong {font-size:16px;font-weight:600;letter-spacing:0}
.next-event time span,.next-event-info small {font-size:12px;color:var(--soft)}
.next-event-info {gap:4px}
.next-event-info>strong {font-size:14px;line-height:1.45;font-weight:500}
.next-event:hover .next-event-info>strong {color:var(--accent)}
.schedule-link,[data-theme=light] .schedule-link {font-size:13px;font-weight:500;padding:16px 0 0;color:var(--accent);margin-top:auto}
.live-program-link {display:none}
.next-empty {font-size:14px;color:var(--soft)}
#cafe-shortcuts {display:none}
.sport-strip {gap:8px;margin:0 0 26px;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
.sport-pill,[data-theme=dark] .sport-pill {font-size:13px;padding:10px 14px;border-radius:8px;background:transparent;border:1px solid var(--edge);color:var(--soft);gap:8px}
.sport-pill .sport-symbol {font-size:16px;opacity:.8}
.sport-pill.active,[data-theme=dark] .sport-pill.active,[data-theme=light] .sport-pill.active {background:var(--text);border-color:var(--text);color:var(--bg)}
.section-heading {gap:20px;align-items:center;margin-bottom:22px}
.section-heading h2 {font-size:22px;font-weight:600;letter-spacing:-.5px}
.section-heading h2>span {font-size:12px;padding:3px 8px;background:var(--panel);color:var(--soft)!important;border:1px solid var(--edge)!important;margin-left:8px}
.section-heading p {font-size:13px;color:var(--soft);margin-top:7px}
.segmented,[data-theme=dark] .segmented {padding:4px;gap:4px;background:var(--panel);border:1px solid var(--edge);border-radius:9px;flex-shrink:0}
.segmented button {font-size:12px;padding:7px 12px;border:0;border-radius:6px;color:var(--soft)}
.segmented .selected,[data-theme=dark] .segmented .selected {color:var(--text);background:var(--edge);box-shadow:none;border:0}
.match-grid,.schedule-cards {grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.match-card,[data-theme=dark] .match-card {border:1px solid var(--edge);border-radius:12px;background:var(--panel);overflow:hidden;box-shadow:none;transition:border-color .2s}
.match-card:hover {border-color:var(--soft);transform:none}
.match-preview {border-radius:0;margin:0;width:100%}
.card-top {padding:14px 16px 0;font-size:12px;color:var(--soft)!important;gap:6px}
.card-top .sport-symbol {font-size:13px}
.card-top .favorite {top:10px;right:10px;width:34px;height:34px;background:#14171ce8;border:1px solid #ffffff40;z-index:3;color:#fff}
.favorite svg {width:17px;height:17px}
.match-card h3,.schedule-cards .match-card h3 {font-size:16px;line-height:1.45;font-weight:600;letter-spacing:-.2px;min-height:46px;margin:8px 16px}
.match-date,.schedule-cards .match-date {font-size:12px;color:var(--soft)!important;margin:0 16px 14px}
.card-bottom {padding:12px 16px;margin:0;margin-top:auto;border-color:var(--edge)!important;gap:10px}
.live-badge,[data-theme=dark] .live-badge {font-size:10px;letter-spacing:.4px;background:#c5ed8712;color:var(--green);padding:4px 8px}
.live-badge i {background:var(--green)}
.watch-button {font-size:12px;font-weight:500;color:var(--text)!important}
.watch-button svg {width:13px;height:13px}
.schedule-badge {font-size:12px;color:var(--soft)}
.load-more,[data-theme=dark] .load-more {padding:12px 20px;border:1px solid var(--edge);border-radius:8px;font-size:14px;color:var(--text);background:var(--panel)}
.bottom-banner,[data-theme=dark] .bottom-banner {background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:24px;margin:36px 0 24px;gap:16px}
.bottom-banner h3 {font-size:16px;font-weight:600}
.bottom-banner p {font-size:13px;color:var(--soft);line-height:1.6}
.bottom-banner button,[data-theme=dark] .bottom-banner button {background:transparent;border:1px solid var(--edge);color:var(--text);font-size:13px;padding:10px 14px;border-radius:8px}
.banner-icon,[data-theme=dark] .banner-icon {background:transparent;color:var(--accent);padding:0}
footer {font-size:12px;color:var(--soft);gap:18px;padding:24px 0}
.footer-brand {font-size:15px;color:var(--text)}
.footer-brand span,.provider,footer button,.version-link {font-size:12px;color:var(--soft)}
.version-link {display:none}
.schedule-filters,[data-theme=dark] .schedule-filters {background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:18px;gap:16px;font-size:13px}
.schedule-filters select,[data-theme=dark] .schedule-filters select {background:var(--bg);color:var(--text);border-color:var(--edge);font-size:14px;padding:10px}
.schedule-filters label {font-size:13px;color:var(--soft)}
.date-button,[data-theme=dark] .date-button {padding:12px 16px;border-radius:10px;background:var(--panel);border-color:var(--edge);font-size:13px;color:var(--soft)}
.date-button.active,[data-theme=dark] .date-button.active {background:#bcaaff18;border-color:var(--accent);color:var(--accent)}
.schedule-day {top:100px;flex-basis:65px;font-size:13px;color:var(--soft)}
.schedule-day strong {font-family:inherit;font-size:32px;color:var(--text)}
.schedule-day.is-today {color:var(--accent)}
.empty h3 {font-size:20px;color:var(--text)}
.empty p {font-size:14px;line-height:1.7;color:var(--soft)}
.empty button {font-size:14px;color:var(--accent)}
.skeleton {background:var(--panel);border-radius:12px;min-height:280px}
dialog {background:var(--panel);color:var(--text);border:1px solid var(--edge);border-radius:16px}
dialog::backdrop {background:#070a10bb;backdrop-filter:blur(5px)}
.dialog-heading h2 {font-size:22px;font-weight:600;line-height:1.35}
dialog p,#account-description {font-size:14px;line-height:1.7;color:var(--soft)}
.player-tools {font-size:14px;gap:16px}
.player-tools .text-button {font-size:13px;color:var(--accent)}
.stream-button {font-size:13px}
.stream-option {font-size:13px;background:var(--bg);border-color:var(--edge);color:var(--text)}
.stream-option.active {border-color:var(--accent);color:var(--accent)}
.player-note {font-size:12px!important;color:var(--soft)!important}
.primary {font-size:14px;border-radius:8px;background:var(--accent);color:#191329;padding:12px 18px;font-weight:600}
[data-theme=light] .primary {color:#fff}
/* The viewing workspace keeps its full width and existing responsive geometry. */
body[data-view=multi] .nav-row {padding-bottom:6px}
body[data-view=multi] #multistream {--multi-border:var(--edge);--multi-panel:var(--panel)}
body[data-view=multi] #multistream .multi-toolbar {background:var(--panel);border-color:var(--edge)}
body[data-view=multi] #multistream #multi-add-top {background:var(--bg);color:var(--text);border-color:var(--edge)}
body[data-view=multi] #multistream .multi-layout-bar {background:var(--panel)}
body[data-view=multi] #multistream .multi-slot {background:var(--panel);border-color:var(--edge)}
body[data-view=multi] #multistream .multi-controls select {background:var(--bg);color:var(--text);border-color:var(--edge)}
body[data-view=multi] #multistream .multi-layout-bar [data-layout] {font-size:12px}
body[data-view=multi] #multistream .multi-slot-heading h3 {font-size:12px}
@media(min-width:1100px) {
  body:not([data-view=multi]) .nav-row {position:fixed;left:0;top:80px;bottom:0;width:216px;padding:28px 16px 20px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background:var(--bg);border-right:1px solid var(--edge);gap:24px}
  body:not([data-view=multi]) .nav-row::before {content:'DEIN PROGRAMM';font-size:10px;font-weight:600;letter-spacing:1.3px;color:var(--soft);padding:0 16px}
  body:not([data-view=multi]) .nav-row #navigation {flex-direction:column;gap:6px;overflow:visible;width:100%}
  body:not([data-view=multi]) .nav-row .nav-item {width:100%;padding:13px 14px;flex:none}
  body:not([data-view=multi]) .nav-row .ui-version {margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--edge)}
  body:not([data-view=multi]) main {margin-left:216px;max-width:1700px;padding:36px 40px 0}
}
@media(min-width:1800px) {.match-grid,.schedule-cards {grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1250px) and (min-width:1100px) {
  body:not([data-view=multi]) main {padding:30px 28px 0}
  .hero.overview-program {grid-template-columns:minmax(0,1.3fr) minmax(270px,1fr);gap:20px}
  .up-next {padding:16px}.next-event {padding:12px 0}.next-event-info>strong {font-size:13px}
  .feature-details h2 {font-size:21px}.match-grid,.schedule-cards {gap:18px}
}
@media(max-width:1099px) {
  main {padding:28px 24px 0}.topbar {padding:0 24px}.nav-row {padding:0 24px 8px;gap:14px}
  .nav-row #navigation {gap:3px;overflow-x:auto;scrollbar-width:none}
  .nav-row .nav-item {padding:10px 12px;white-space:nowrap;flex:none;font-size:13px}
  .nav-row .ui-version {margin-left:auto;font-size:11px}
  .hero.overview-program {grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:20px}
  .up-next {padding:16px}.next-event {padding:12px 0}.next-event-info>strong {font-size:13px}
}
@media(max-width:760px) {
  .topbar {height:auto;min-height:74px;padding:16px 20px;display:flex;flex-wrap:wrap;gap:12px}
  .brand {margin-right:auto}.brand .brand-type {font-size:18px}.club-logo-mark {width:36px;height:36px}
  .topbar .search {order:5;width:100%;flex-basis:100%;padding:10px 12px;margin:0}
  .theme-toggle {margin-left:0!important}.avatar {width:34px;height:34px}
  .nav-row {padding:0 12px 10px;display:block;min-height:0}
  .nav-row #navigation {gap:4px;overflow-x:auto;justify-content:flex-start}
  .nav-row .nav-item {font-size:12px;padding:9px 10px;gap:6px;min-height:42px}
  .nav-row .nav-item svg {width:16px;height:16px}.nav-row .nav-count {font-size:10px}
  .nav-row>.ui-version {display:none}
  main {padding:24px 20px 0}
  body .heading,body[data-view=discover] .heading,body:not([data-view=discover]) .heading {margin-bottom:24px}
  body .heading h1,body[data-view=discover] .heading h1,body:not([data-view=discover]) .heading h1 {font-size:26px;letter-spacing:-.7px}
  body .heading p,body[data-view=discover] .heading p {font-size:13px}.today {display:none}
  .hero.overview-program {grid-template-columns:1fr;gap:20px;margin-bottom:28px}
  .feature-details {padding:18px;gap:14px}.feature-details h2 {font-size:21px}.feature-category {font-size:12px}
  .feature-watch {font-size:12px;padding:10px 14px}.feature-label {font-size:10px}
  .up-next {padding:18px}.up-next #up-next-list .next-event:nth-child(n+3) {display:none}
  .next-event-info>strong {font-size:14px}.next-event {padding:14px 0}
  .sport-strip {margin-bottom:20px}.sport-pill,[data-theme=dark] .sport-pill {font-size:12px;padding:9px 12px}
  .section-heading {flex-wrap:wrap;gap:14px}.section-heading h2 {font-size:21px}.section-heading p {font-size:13px}
  .segmented,[data-theme=dark] .segmented {gap:3px}.segmented button {font-size:12px;padding:8px 12px}
  .match-grid,.schedule-cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .card-top {padding:12px 12px 0;font-size:11px;flex-wrap:wrap}.card-top .sport-symbol {display:none}
  .card-top .favorite {width:30px;height:30px;top:7px;right:7px}
  .match-card h3,.schedule-cards .match-card h3 {font-size:14px;margin:7px 12px;min-height:41px;line-height:1.45}
  .match-date,.schedule-cards .match-date {font-size:11px;margin:0 12px 12px}
  .card-bottom {padding:10px 12px;flex-wrap:wrap;gap:7px}.watch-button {font-size:11px}.live-badge {font-size:9px}
  .bottom-banner,[data-theme=dark] .bottom-banner {padding:20px;gap:12px;flex-wrap:wrap}
  .bottom-banner p {font-size:13px;max-width:none}.bottom-banner button {margin:0;font-size:12px!important;padding:10px 14px!important}
  .banner-icon {display:none}footer {flex-wrap:wrap;font-size:12px;padding:22px 0;gap:12px}
  footer .ui-version {display:block;margin:0}.provider {margin-left:auto}
  .schedule-group {margin-bottom:26px}.schedule-day {margin-bottom:16px;gap:9px}.schedule-day strong {font-size:27px}.schedule-day small {font-size:12px}
  .schedule-filters {flex-wrap:wrap}.schedule-filters label {flex:1;min-width:120px}.schedule-filters>span {font-size:12px}
  .dialog-heading h2 {font-size:19px}dialog {padding:20px}.player-tools {gap:10px;font-size:13px}
  body[data-view=multi] .topbar .search {display:none}
  body[data-view=multi] .nav-row {padding-bottom:6px}
  body[data-view=multi] #multistream .multi-layout-bar [data-layout] {font-size:10px}
}
@media(max-width:380px) {
  main {padding-inline:16px}.match-grid,.schedule-cards {grid-template-columns:1fr}
  .match-card h3,.schedule-cards .match-card h3 {min-height:0;font-size:16px}
}
/* Match the contrast of the dark palette instead of inheriting the old light theme. */
[data-theme=light] .club-header {background:var(--bg)}
[data-theme=light] .topbar .search {background:var(--panel);border-color:var(--edge)}
[data-theme=light] .nav-row .nav-item.active {background:#6544ba10;color:var(--accent)}
[data-theme=light] .sport-pill {border-color:var(--edge);color:var(--soft)}
[data-theme=light] .sport-pill.active {color:var(--bg);background:var(--text);border-color:var(--text)}
[data-theme=light] .segmented .selected {background:var(--edge);color:var(--text)}
[data-theme=light] .section-heading h2>span {background:var(--panel);color:var(--soft)!important}
[data-theme=light] .card-bottom {border-color:var(--edge)!important}
[data-theme=light] .watch-button {color:var(--text)!important}
[data-theme=light] .bottom-banner {background:var(--panel);border-color:var(--edge)}
[data-theme=light] .bottom-banner button {background:var(--panel);border-color:var(--edge);color:var(--text)}
[data-theme=light] .schedule-filters {background:var(--panel);border-color:var(--edge)}
[data-theme=light] .date-button {background:var(--panel);border-color:var(--edge);color:var(--soft)}
[data-theme=light] .date-button.active {background:#6544ba10;border-color:var(--accent);color:var(--accent)}
[data-theme=light] dialog {background:var(--panel);color:var(--text);border-color:var(--edge)}
[data-theme=light] .footer-brand {color:var(--text)}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {transition:none!important;scroll-behavior:auto!important}}