/* Theme: modern (default) – clean dark UI, higher contrast guide */
[data-theme="modern"] {
  --bg: #0b0c10;
  --panel: #11131a;
  --text: #e8eaed;
  --muted: #a7adb7;
  --edge: #242a3d;
  --accent: #8ab4f8;
}

[data-theme="modern"] .guidePanel {
  background: color-mix(in srgb, #1a1d26 94%, transparent);
  border-color: #3d4558;
}
[data-theme="modern"] .guideGridShell {
  --guide-grid-bg: rgba(0,0,0,.16);
  --guide-track-bg: rgba(0,0,0,.10);
  --guide-head-bg: color-mix(in srgb, #1a1d26 92%, rgba(0,0,0,.25));
  --guide-corner-bg: color-mix(in srgb, #1a1d26 92%, rgba(0,0,0,.25));
  --guide-cell-bg: color-mix(in srgb, #121521 92%, rgba(0,0,0,.25));
  --guide-ep-bg: rgba(255,255,255,.03);
  --guide-ep-repeat-bg: rgba(255,255,255,.018);
  --guide-ep-hover-bg: rgba(255,255,255,.07);
  --guide-ep-active-bg: rgba(138,180,248,.12);
}

[data-theme="modern"] .guideGridEp.repeat { border-style: dashed }

[data-theme="modern"] #btnPlay.guideBtn {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--edge));
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.02)) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.10) 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.2) inset;
}
[data-theme="modern"] #btnPlay.guideBtn:hover {
  border-color: color-mix(in srgb, var(--accent) 85%, var(--edge));
  box-shadow: 0 10px 26px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.22) inset, 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Theme: dos – classic cable TV / DOS harsh blue, big letters */
[data-theme="dos"] {
  --bg: #000080;
  --panel: #0000aa;
  --text: #00aaaa;
  --muted: #00ff00;
  --edge: #0055ff;
  --accent: #ffffff;
  --mono: "IBM VGA", "IBM VGA8", "Perfect DOS VGA 437", "MS Gothic", monospace;
}

[data-theme="dos"] .guidePanel {
  background: color-mix(in srgb, #0000aa 90%, transparent);
  border-color: #0055ff;
}
[data-theme="dos"] .guideGridShell {
  --guide-grid-bg: #0000aa;
  --guide-track-bg: rgba(0,0,0,.08);
  --guide-head-bg: #00008b;
  --guide-corner-bg: #00008b;
  --guide-cell-bg: #00008b;
  --guide-ep-bg: rgba(0,0,0,.10);
  --guide-ep-repeat-bg: rgba(0,0,0,.18);
  --guide-ep-hover-bg: rgba(0,255,255,.14);
  --guide-ep-active-bg: rgba(0,255,255,.25);
}

[data-theme="dos"] .guideBar,
[data-theme="dos"] .guidePanel,
[data-theme="dos"] .historyPanel,
[data-theme="dos"] .detailsPanel,
[data-theme="dos"] .sleepMenu,
[data-theme="dos"] .commentsPanel {
  border-radius: 0;
  border-width: 2px;
  border-style: solid;
}

[data-theme="dos"] .guideBtn,
[data-theme="dos"] .guideChannel,
[data-theme="dos"] .guideNowBlock,
[data-theme="dos"] .speedControl,
[data-theme="dos"] .speedBtn,
[data-theme="dos"] .guideEpBlock,
[data-theme="dos"] .guideGridHeaderBtn,
[data-theme="dos"] .guideGridChanFave,
[data-theme="dos"] .guideNowBack,
[data-theme="dos"] .sleepOpt,
[data-theme="dos"] .historyBtn,
[data-theme="dos"] .cornerBtn,
[data-theme="dos"] .ch,
[data-theme="dos"] .commentsForm input,
[data-theme="dos"] .commentsForm textarea {
  border-radius: 0;
}

[data-theme="dos"] .historySegBar {
  border-radius: 0;
  border-width: 2px;
  background: rgba(0,0,0,.12);
}
[data-theme="dos"] .historySegBar::before {
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(0,255,255,.18));
}
[data-theme="dos"] .historySegRange { color: #fff; opacity: 0.9 }

[data-theme="dos"] .guideBadge { border-radius: 0 }

[data-theme="dos"] .guideBar,
[data-theme="dos"] .guidePanel,
[data-theme="dos"] .historyPanel,
[data-theme="dos"] .detailsPanel {
  box-shadow: none;
}

/* DOS: bigger fonts, less padding – old-people TV */
[data-theme="dos"] .guideGridCornerTop {
  font-size: 14px;
  letter-spacing: 0.12em;
}
[data-theme="dos"] .guideGridCornerSub { font-size: 13px }
[data-theme="dos"] .guideGridChanNo { font-size: 15px; color: #fff }
[data-theme="dos"] .guideGridChanName { font-size: 16px }
[data-theme="dos"] .guideGridEpTitle { font-size: 15px; font-weight: 650 }
[data-theme="dos"] .guideGridEpMeta { font-size: 13px }
[data-theme="dos"] .guideNowLabel { font-size: 13px }
[data-theme="dos"] .guideNowEp { font-size: 16px; font-weight: 600 }

[data-theme="dos"] .guideGridHeaderRow {
  border-bottom-color: #0055ff;
  backdrop-filter: none;
}
[data-theme="dos"] .guideGridCorner,
[data-theme="dos"] .guideGridChannelCell {
  border-right-color: #0055ff;
}
[data-theme="dos"] .guideGridChanRow,
[data-theme="dos"] .guideGridTrackRow { border-bottom-color: rgba(0,255,255,.14) }
[data-theme="dos"] .guideGridTick { border-left-color: rgba(255,255,255,.28) }
[data-theme="dos"] .guideGridTickLabel { color: #fff; opacity: 0.85 }

[data-theme="dos"] .guideGridEp {
  border-radius: 0;
  border-width: 2px;
  color: #fff;
}

[data-theme="dos"] .guideGridChannelsScroll .guideBadge-cc,
[data-theme="dos"] .guideGridTracksScroll .guideBadge-cc {
  opacity: 0.35;
  border-color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.9);
}
[data-theme="dos"] .guideGridChannelsScroll .guideBadge-new,
[data-theme="dos"] .guideGridTracksScroll .guideBadge-new {
  opacity: 0.55;
  border-color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.95);
}
[data-theme="dos"] .guideGridEp.active {
  border-color: #fff;
}
[data-theme="dos"] .guideGridEp.focused {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
[data-theme="dos"] .guideGridEpProgress {
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(0,255,255,.18));
}

[data-theme="dos"] .historyEntryCurrent {
  background: rgba(0,255,255,.15);
}

[data-theme="dos"] .ch.active {
  background: rgba(0,255,0,.2);
}

[data-theme="dos"] .guideBtn.longpressing::before,
[data-theme="dos"] .speedBtn.longpressing::before,
[data-theme="dos"] .volumeBtn.longpressing::before {
  background: linear-gradient(90deg, rgba(0,255,0,.22), rgba(0,255,255,.18));
}
[data-theme="dos"] .guideBtn.longpressing::after,
[data-theme="dos"] .speedBtn.longpressing::after,
[data-theme="dos"] .volumeBtn.longpressing::after {
  opacity: 0.18;
  mix-blend-mode: normal;
}

/* Theme: y2k – millennium silver, chrome curves, bubbly */
[data-theme="y2k"] {
  --bg: #1a1d24;
  --panel: #252830;
  --text: #e8ecf0;
  --muted: #9ca3b0;
  --edge: #4a5160;
  --accent: #a8b8d0;
  --y2k-silver: #c8d0dc;
  --y2k-chrome: linear-gradient(145deg, #e8ecf2 0%, #a0a8b8 50%, #788090 100%);
}

[data-theme="y2k"] .guidePanel,
[data-theme="y2k"] .historyPanel,
[data-theme="y2k"] .detailsPanel,
[data-theme="y2k"] .sleepMenu,
[data-theme="y2k"] .commentsPanel {
  border-radius: 20px;
  border: 1px solid rgba(200,208,220,.25);
  box-shadow:
    0 4px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}

[data-theme="y2k"] .guideBar {
  border-radius: 0 0 24px 24px;
  border: 1px solid rgba(200,208,220,.2);
  border-top: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

[data-theme="y2k"] .guidePanel {
  background: linear-gradient(165deg, rgba(37,40,48,.95) 0%, rgba(26,29,36,.98) 100%);
  backdrop-filter: blur(12px);
}

[data-theme="y2k"] .guideGridShell {
  --guide-grid-bg: rgba(0,0,0,.12);
  --guide-track-bg: rgba(0,0,0,.08);
  --guide-head-bg: rgba(37,40,48,.9);
  --guide-corner-bg: rgba(37,40,48,.9);
  --guide-cell-bg: rgba(30,33,40,.92);
  --guide-ep-bg: rgba(255,255,255,.04);
  --guide-ep-repeat-bg: rgba(255,255,255,.02);
  --guide-ep-hover-bg: rgba(200,208,220,.12);
  --guide-ep-active-bg: rgba(168,184,208,.18);
}

[data-theme="y2k"] .guideBtn,
[data-theme="y2k"] .guideChannel,
[data-theme="y2k"] .guideNowBlock,
[data-theme="y2k"] .speedControl,
[data-theme="y2k"] .speedBtn,
[data-theme="y2k"] .guideEpBlock,
[data-theme="y2k"] .guideGridHeaderBtn,
[data-theme="y2k"] .guideGridChanFave,
[data-theme="y2k"] .guideNowBack,
[data-theme="y2k"] .sleepOpt,
[data-theme="y2k"] .historyBtn,
[data-theme="y2k"] .cornerBtn,
[data-theme="y2k"] .ch,
[data-theme="y2k"] .commentsForm input,
[data-theme="y2k"] .commentsForm textarea {
  border-radius: 14px;
}

[data-theme="y2k"] .guideBtn,
[data-theme="y2k"] .speedBtn,
[data-theme="y2k"] .guideGridHeaderBtn,
[data-theme="y2k"] .guideNowBack,
[data-theme="y2k"] .historyBtn,
[data-theme="y2k"] .sleepOpt {
  border-radius: 999px;
}

[data-theme="y2k"] #btnPlay.guideBtn {
  border-radius: 50%;
  border: 2px solid rgba(200,208,220,.4);
  background: radial-gradient(circle at 35% 30%, rgba(232,236,242,.25) 0%, rgba(120,128,144,.15) 45%, rgba(50,55,65,.4) 100%);
  box-shadow:
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.2);
}

[data-theme="y2k"] #btnPlay.guideBtn:hover {
  border-color: rgba(200,208,220,.6);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 0 3px rgba(168,184,208,.15);
}

[data-theme="y2k"] .guideGridEp {
  border-radius: 12px;
}

[data-theme="y2k"] .guideBadge {
  border-radius: 999px;
}

[data-theme="y2k"] .historySegBar {
  border-radius: 999px;
  background: rgba(0,0,0,.2);
}

[data-theme="y2k"] .historySegBar::before {
  background: linear-gradient(90deg, rgba(200,208,220,.35), rgba(168,184,208,.4));
  border-radius: 999px;
}

[data-theme="y2k"] .historySegRange { color: var(--y2k-silver); opacity: 0.95 }

[data-theme="y2k"] .guideGridHeaderRow {
  border-bottom-color: rgba(200,208,220,.2);
}

[data-theme="y2k"] .guideGridCorner,
[data-theme="y2k"] .guideGridChannelCell {
  border-right-color: rgba(200,208,220,.18);
}

[data-theme="y2k"] .guideGridChanRow,
[data-theme="y2k"] .guideGridTrackRow {
  border-bottom-color: rgba(200,208,220,.1);
}

[data-theme="y2k"] .guideGridEp.active {
  border-color: rgba(168,184,208,.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

[data-theme="y2k"] .guideGridEp.focused {
  outline: 2px solid rgba(200,208,220,.5);
  outline-offset: 2px;
}

[data-theme="y2k"] .guideGridEpProgress {
  background: linear-gradient(90deg, rgba(200,208,220,.3), rgba(168,184,208,.35));
  border-radius: 0 0 10px 10px;
}

[data-theme="y2k"] .historyEntryCurrent {
  background: rgba(168,184,208,.12);
  border-radius: 12px;
}

[data-theme="y2k"] .ch.active {
  background: rgba(168,184,208,.2);
}

[data-theme="y2k"] .progress {
  border-radius: 999px;
}

[data-theme="y2k"] .progressFill {
  border-radius: 999px;
}

[data-theme="y2k"] .progressThumb {
  background: linear-gradient(145deg, #e8ecf2 0%, #b0b8c8 100%);
  box-shadow:
    0 2px 8px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}

[data-theme="y2k"] .guideBtn.longpressing::before,
[data-theme="y2k"] .speedBtn.longpressing::before,
[data-theme="y2k"] .volumeBtn.longpressing::before {
  background: linear-gradient(90deg, rgba(200,208,220,.25), rgba(168,184,208,.3));
}

[data-theme="y2k"] .guideBarTakeover {
  border-radius: 20px;
}

[data-theme="y2k"] .guideBarTakeoverBody .guideBtn {
  border-radius: 999px;
}

[data-theme="y2k"] .scrubPreview,
[data-theme="y2k"] .progressChapterTitle {
  border-radius: 16px;
}

[data-theme="y2k"] .playPauseIcon {
  border-radius: 50%;
  border: 2px solid rgba(200,208,220,.4);
  background: radial-gradient(circle at 35% 30%, rgba(232,236,242,.3) 0%, rgba(120,128,144,.2) 50%, rgba(50,55,65,.5) 100%);
  box-shadow:
    0 6px 28px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.2);
}

[data-theme="y2k"] .guideGridCornerTop {
  font-weight: 600;
  letter-spacing: 0.04em;
}

[data-theme="y2k"] .guideGridTracksScroll::-webkit-scrollbar-thumb,
[data-theme="y2k"] .guideGridChannelsScroll::-webkit-scrollbar-thumb,
[data-theme="y2k"] .guideGridHeaderScroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(200,208,220,.5) 0%, rgba(120,128,144,.4) 100%);
}