/* 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;
}