:root {
  color-scheme: dark;
  --color-background: #000;
  --color-surface: transparent;
  --color-text: #e0e0e0;
  --color-border: #4a4a4a;
  --color-player-bg: transparent;
  --color-header-bg: #1a1a1a;
  --color-accent-glow: #00ff00;
  --color-header-hover: #3a3a3a;
  --font-main: 'VT323', monospace, sans-serif;
  --font-header: 'Sixtyfour', sans-serif;
  --font-size-sm: 10pt;
  --font-size-md: 12pt;
  --font-size-lg: 14pt;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --border-width-default: 1px;
  --border-color-default: #666666;
  --border-radius-default: 4px;
  --control-height: 24px;
  --opacity-inactive: 0.5;
  --opacity-disabled: 0.5;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: calc(100vh + 1px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-family: var(--font-main);
  background-color: var(--color-background);
  font-size: var(--font-size-md);
  color: var(--color-text);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

.hidden {
  display: none !important;
}

#layout-toggle {
  display: none;
}

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: auto;
}

.layout__player {
  background-color: transparent;
  border-bottom: var(--border-width-default) solid var(--color-border);
  overflow-x: hidden;
}

.layout__table {
  flex-grow: 1;
  overflow-x: hidden;
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}

#layout-toggle:checked ~ .layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* --- MODIFIED: Fine-tuned scrollbar visibility for layout components --- */
#layout-toggle:checked ~ .layout .layout__player {
  border-right: var(--border-width-default) solid var(--color-border);
  border-bottom: none;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}

#layout-toggle:checked ~ .layout .layout__player::-webkit-scrollbar {
  display: none;
}

#layout-toggle:checked ~ .layout .layout__table {
  overflow-y: auto;
  overflow-x: hidden;
}

#layout-toggle:checked ~ .layout .layout__table::-webkit-scrollbar {
  width: 4px;
}

#layout-toggle:checked ~ .layout .layout__table::-webkit-scrollbar-track {
  background: transparent;
}

#layout-toggle:checked ~ .layout .layout__table::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
}

.player-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.player__header {
  font-family: var(--font-header);
  font-size: clamp(1rem, 3vw, 1.5rem);
  cursor: pointer;
  color: var(--color-text);
  text-align: center;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 0;
  min-height: 40px;
  max-height: 80px;
}

.player__header .material-symbols-outlined {
  font-size: inherit;
}

.player__header h1 {
  font-size: clamp(1rem, 3vw, 1.5rem);
  margin: 0;
  line-height: 1;
}

.player-tabs {
  display: grid;
  grid-template-columns: 40% 40% 10% 10%;
  border-top: var(--border-width-default) solid var(--border-color-default);
  border-bottom: var(--border-width-default) solid var(--border-color-default);
  padding: 0;
  align-items: stretch;
}

.player-tabs__tab {
  font-family: var(--font-main);
  background-color: var(--color-header-bg);
  color: var(--color-text);
  border: none;
  padding: var(--spacing-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  opacity: var(--opacity-inactive);
  justify-content: flex-start;
}

.player-tabs__title .material-symbols-outlined {
  font-size: var(--font-size-sm);
}

.player-tabs > *:not(:first-child) {
  border-left: var(--border-width-default) solid var(--border-color-default);
}

.player-tabs__tab.active {
  opacity: 1;
}

.player-tabs__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  width: 100%;
  overflow: hidden;
}

.player-tabs__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.player-tabs__nav-btn {
  font-family: var(--font-main);
  background-color: transparent;
  color: var(--color-text);
  border: none;
  cursor: pointer;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-controls__nav-btn {
  font-family: var(--font-main);
  background-color: transparent;
  color: var(--color-text);
  border: none;
  cursor: pointer;
  height: 100%;
  width: auto;
  min-width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-controls {
  display: flex;
  align-items: center;
  padding-left: var(--spacing-lg);
  border-bottom: var(--border-width-default) solid var(--border-color-default);
}

.header-controls .player__header {
  margin-right: auto;
}

.csv-url-container {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md) var(--spacing-lg);
  gap: var(--spacing-md);
  border-bottom: var(--border-width-default) solid var(--border-color-default);
  background-color: transparent;
}

.csv-url-container.hidden {
  display: none;
}

.control-group {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.csv-url-container__input,
.date-filters__input,
.search-container__input,
.channel-filter-grid-row input[type='text'] {
  flex-grow: 1;
  font-family: var(--font-main);
  background-color: transparent;
  color: var(--color-text);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-default);
  outline: none;
  padding: var(--spacing-sm) var(--spacing-md);
  height: var(--control-height);
}

.csv-url-container__input:focus,
.date-filters__input:focus,
.search-container__input:focus,
.channel-filter-grid-row input[type='text']:focus {
  box-shadow: inset 0 0 0 2px var(--color-text);
}

.material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
  font-weight: 300;
  vertical-align: middle;
}

.sub-header-controls,
.date-filters {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: var(--border-width-default) solid var(--border-color-default);
  flex-wrap: wrap;
}

.date-filters__input {
  flex-grow: 0;
  width: 48px;
  text-align: center;
}

.date-filters__input {
  -moz-appearance: textfield;
}

.date-filters__input::-webkit-outer-spin-button,
.date-filters__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.date-filters__stepper {
  display: flex;
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-default);
  overflow: hidden;
  height: var(--control-height);
}

.stepper-btn {
  font-family: var(--font-main);
  background-color: transparent;
  color: var(--color-text);
  border: none;
  padding: 0 var(--spacing-md);
  cursor: pointer;
  height: 100%;
  font-size: var(--font-size-lg);
}

.stepper-btn:first-child {
  border-right: var(--border-width-default) solid var(--border-color-default);
}

.date-filters__input:disabled,
.stepper-btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.date-filters__buttons {
  display: flex;
  gap: var(--spacing-md);
}

.date-filters__btn {
  font-family: var(--font-main);
  background-color: transparent;
  color: var(--color-text);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-sm) var(--spacing-md);
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.playlist-controls {
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.search-container {
  display: flex;
  align-items: center;
  position: relative;
}

.search-container__input {
  flex-grow: 1;
  width: 120px;
  padding-right: calc(var(--control-height) - var(--spacing-sm));
}

.search-container .search-container__clear-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  border: none;
  padding: 0;
  background-color: transparent;
}

.search-container__clear-btn.hidden {
  display: none;
}

.btn {
  font-family: var(--font-main);
  background-color: transparent;
  color: var(--color-text);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-sm) var(--spacing-md);
  min-width: 36px;
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.playlist-controls__btn {
  height: var(--control-height);
}

.playlist-btn-group {
  display: flex;
  height: var(--control-height);
}

.playlist-btn-group__stats {
  border-left: var(--border-width-default) solid var(--border-color-default);
  border-right: 0;
  border-top-left-radius: var(--border-radius-default);
  border-bottom-left-radius: var(--border-radius-default);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.playlist-btn-group__label {
  border-right: var(--border-width-default) solid var(--border-color-default);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--border-radius-default);
  border-bottom-right-radius: var(--border-radius-default);
}

.playlist-btn-group__label.active {
  box-shadow: inset 0 0 0 2px var(--color-text);
}

.playlist-btn-group__stats.active {
  box-shadow: inset 0 0 0 2px var(--color-text);
}

.date-filters__btn--duration {
  transition: background-color 0.2s;
}

.btn--icon,
.btn.btn--icon {
  padding: var(--spacing-sm);
}

.btn--icon .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}

.btn--header-text {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background-color: transparent;
  padding: 0;
  height: auto;
}

.btn--header-text:hover {
  color: var(--color-accent-glow);
  text-shadow:
    0 0 5px var(--color-accent-glow),
    0 0 8px rgba(0, 255, 0, 0.7);
  background-color: transparent;
}

.date-filters__btn:hover {
  background-color: var(--color-header-hover);
}

.playlist-controls__btn:hover {
  background-color: var(--color-header-hover);
}

.date-filters__btn.active,
.playlist-controls__btn.active,
.date-filters__btn--duration.active {
  box-shadow: inset 0 0 0 2px var(--color-text);
}

#csv-url-toggle-btn.active,
#per-channel-filter-btn.active,
#cc-toggle-btn.active,
#watched-toggle-btn.active,
#user-playlist-toggle-btn.active,
#per-channel-filter-toggle-btn.active {
  box-shadow: inset 0 0 0 2px var(--color-text);
}

.playlist-btn-group--playing .playlist-btn-group__stats,
.playlist-btn-group--playing .playlist-btn-group__label {
  box-shadow: inset 0 0 0 2px var(--color-text);
  background-color: transparent;
}

.playlist-btn-group--playing .playlist-btn-group__stats:hover,
.playlist-btn-group--playing .playlist-btn-group__label:hover {
  background-color: var(--color-header-hover);
}

.playlist-btn-group--playing .playlist-btn-group__label.active {
  background-color: transparent;
}

.player-tabs__nav-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
  background-color: transparent;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  table-layout: fixed;
}

.data-table th,
.data-table td {
  padding: 0 var(--spacing-md);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.data-table td * {
  vertical-align: middle;
}

.cell-text {
  will-change: transform;
}

td[data-column='TITLE'] .cell-text {
  vertical-align: middle;
}

.data-table th[data-column='AGO'],
.data-table th[data-column='PUBDAT'],
.data-table th[data-column='DURATION'] {
  width: 8ch;
  padding-left: var(--spacing-lg);
}

.data-table th[data-column='CH'],
.data-table th[data-column='PL'] {
  min-width: 12ch;
}

.data-table th[data-column='TITLE'] {
  min-width: 200px;
  width: 50%;
}

.data-table td[data-column='TITLE'] {
  cursor: pointer;
}

.data-table td[data-column='TITLE'] {
  position: relative;
}

.title-cell__controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--color-background), 0.5);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background-color: transparent;
  transition: backdrop-filter 0.1s ease-in-out;
}

.title-cell__control-btn {
  flex: 1 1 0;
  border-radius: 0;
  border: none;
  height: auto;
  background-color: transparent;
  transition: backdrop-filter 0.1s ease-in-out;
}

.title-cell__control-btn:hover {
  background-color: rgba(58, 58, 58, 0.5);
  backdrop-filter: blur(1px);
}

.title-cell__control-btn .material-symbols-outlined {
  font-size: var(--font-size-md);
  font-weight: 300;
  vertical-align: middle;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.data-table tr {
  border-bottom: var(--border-width-default) solid var(--color-border);
  height: var(--control-height);
  user-select: none;
}

.data-table tr:hover {
  cursor: pointer;
}

.data-table tr:hover .title-cell__controls {
  backdrop-filter: blur(1px);
}

.data-table tr:hover .title-cell__control-btn .material-symbols-outlined {
  opacity: 1;
}

.data-table td .material-symbols-outlined {
  font-size: var(--font-size-md);
}

.data-table .user-playlist-indicator,
.data-table .now-playing-indicator {
  font-size: var(--font-size-md);
  font-weight: 300;
  vertical-align: middle;
  line-height: 1;
  padding-right: var(--spacing-sm);
  color: var(--color-text);
  opacity: var(--opacity-inactive);
  margin-right: 4px;
}

.data-table th {
  border-bottom-width: 2px;
  background-color: var(--color-header-bg);
  position: sticky;
  top: 0;
  z-index: 2;
  user-select: none;
  height: var(--control-height);
  padding-top: 0;
  padding-bottom: 0;
  line-height: var(--control-height);
}

.data-table th.sortable {
  cursor: pointer;
}

.data-table th.sortable:hover {
  background-color: var(--color-header-hover);
}

.data-table th .data-table__sort-icon {
  vertical-align: middle;
  font-size: 1rem;
  margin-right: var(--spacing-md);
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 100%;
  height: var(--control-height);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.progress-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background-color: var(--color-border);
  transition: width 0.2s linear;
}

.progress-bar__text {
  position: relative;
  z-index: 1;
  padding-left: var(--spacing-lg);
  color: var(--color-text);
}

#tv-mode-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 100;
  display: flex;
  font-family: var(--font-main);
  color: var(--panel-text, #ffff00);
}

html.tv-mode-active body #tv-mode-container {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}

#tv-mode-container .tv-exit-button-top {
  position: absolute;
  top: var(--spacing-lg);
  left: var(--spacing-lg);
  z-index: 120;
}

.channel-filter-container {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: var(--border-width-default) solid var(--border-color-default);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.add-channel-section {
  display: flex;
  gap: var(--spacing-md);
}

.add-channel-section__select {
  flex-grow: 1;
  font-family: var(--font-main);
  background-color: transparent;
  color: var(--color-text);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-default);
  outline: none;
  padding: var(--spacing-sm) var(--spacing-md);
  height: var(--control-height);
}

.add-channel-section__select option {
  background-color: var(--color-background);
  color: var(--color-text);
}

.channel-filter-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.channel-filter-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--spacing-md);
  align-items: center;
}

.channel-filter-grid__channel-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tv-mode-container {
  --button-size-normal: 40px;
  --button-size-compact: 40px;
  --button-font-size: 1rem;
  --gap-size: var(--spacing-md);
  --padding-size: var(--spacing-md);
  --button-border-radius: var(--border-radius-default);
  --panel-transition-speed: 0.3s;
  --fav-hold-duration: 2s;
  --color-background-main: #000000;
  --color-background-layout: #111111;
  --color-background-remote: #222222;
  --color-background-player: #000000;
  --color-background-button: #000000;
  --color-background-button-hover: #4a4a4a;
  --color-background-button-active: #4a4a4a;
  --color-text-player: #e0e0e0;
  --color-text-button: #e0e0e0;
  --panel-bg: rgba(0, 31, 63, 0.8);
  --panel-text: #ffff00;
  --accent-color: #00ff00;
  --guide-channel-col-width: 200px;
  --main-font: 'VT323', monospace;
}

#tv-mode-container * {
  text-transform: uppercase;
}

#tv-mode-container input,
#tv-mode-container textarea {
  text-transform: none;
}

#tv-mode-container .material-symbols-outlined {
  text-transform: none;
  pointer-events: none;
}

#tv-mode-container #tv-btn-duration {
  font-size: 0.8rem;
  padding: 0 2px;
}

#tv-mode-container .layout-container {
  display: flex;
  gap: var(--gap-size);
  width: 100vw;
  height: 100dvh;
  max-width: 100%;
  position: relative;
  cursor: default;
  padding: var(--padding-size);
  box-sizing: border-box;
}

#tv-mode-container .play-container {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  height: 100%;
  background-color: var(--color-background-main);
  position: relative;
}

#tv-mode-container .yt-player {
  background-color: var(--color-background-player);
  color: var(--color-text-player);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  position: relative;
  overflow: hidden;
}

#tv-mode-container #tv-player {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#tv-mode-container #tv-player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  display: block;
}

#tv-mode-container #tv-player-overlay.unlocked {
  display: none;
}

#tv-mode-container .remote-wrapper {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(
    (var(--button-size-normal) * 3) + (var(--gap-size) * 2) +
      (var(--padding-size) * 2)
  );
  pointer-events: auto;
  cursor: default;
  position: relative;
  z-index: 25;
}

#tv-mode-container .remote-wrapper.compact-mode {
  width: calc(var(--button-size-compact) + (var(--padding-size) * 2));
}

#tv-mode-container .remote-container {
  background-color: var(--color-background-remote);
  padding: var(--padding-size);
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

#tv-mode-container .remote-container {
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#tv-mode-container .remote-container::-webkit-scrollbar {
  display: none;
}

#tv-mode-container .button-grid {
  display: grid;
  gap: var(--gap-size);
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

#tv-mode-container .button {
  background-color: var(--color-background-button);
  color: var(--color-text-button);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.1s ease-in-out,
    transform 0.1s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  padding: 0;
  font-size: var(--button-font-size);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--button-border-radius);
  position: relative;
}

#tv-mode-container .button:hover {
  background-color: var(--color-background-button-hover);
}

#tv-mode-container .button:active {
  transform: scale(0.95);
}

#tv-mode-container .button.active {
  background-color: var(--color-background-button-active);
}

#tv-mode-container .toggle-group {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--button-border-radius);
  overflow: hidden;
}

#tv-mode-container .toggle-group .button {
  flex-grow: 1;
  aspect-ratio: unset;
  border-radius: 0;
}

#tv-mode-container #tv-remote-grid .toggle-group-vol {
  grid-column: 1;
  grid-row: 6 / span 2;
}

#tv-mode-container #tv-remote-grid .toggle-group-ch {
  grid-column: 3;
  grid-row: 6 / span 2;
}

#tv-mode-container #tv-remote-grid .button-last-ch {
  grid-column: 2;
  grid-row: 6;
}

#tv-mode-container #tv-remote-grid .button-settings {
  grid-column: 2;
  grid-row: 7;
}

#tv-mode-container .remote-wrapper.compact-mode .button-grid {
  display: flex;
  flex-direction: column;
}

#tv-mode-container .remote-wrapper.compact-mode .button {
  display: none;
}

#tv-mode-container .remote-wrapper.compact-mode .tv-btn-favorite,
#tv-mode-container .remote-wrapper.compact-mode .tv-btn-guide-toggle,
#tv-mode-container .remote-wrapper.compact-mode .toggle-group-vol,
#tv-mode-container .remote-wrapper.compact-mode .toggle-group-ch {
  display: flex;
}

#tv-mode-container .remote-wrapper.compact-mode .toggle-group .button {
  display: flex;
}

#tv-mode-container .remote-wrapper.compact-mode .toggle-group {
  aspect-ratio: 1 / 2;
}

#tv-mode-container .remote-wrapper.compact-mode #tv-btn-fav-1 {
  order: 1;
}

#tv-mode-container .remote-wrapper.compact-mode #tv-btn-fav-2 {
  order: 2;
}

#tv-mode-container .remote-wrapper.compact-mode #tv-btn-fav-3 {
  order: 3;
}

#tv-mode-container .remote-wrapper.compact-mode #tv-btn-guide {
  order: 4;
}

#tv-mode-container .remote-wrapper.compact-mode .toggle-group-vol {
  order: 5;
}

#tv-mode-container .remote-wrapper.compact-mode .toggle-group-ch {
  order: 6;
}

#tv-mode-container .panel {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition:
    transform var(--panel-transition-speed) ease-in-out,
    opacity var(--panel-transition-speed) ease-in-out,
    visibility 0s var(--panel-transition-speed);
  pointer-events: none;
  color: var(--panel-text);
  background-color: var(--panel-bg);
  z-index: 30;
}

#tv-mode-container .remote-wrapper:not(.compact-mode) #tv-btn-power {
  grid-column: 1 / -1;
  aspect-ratio: unset;
}

#tv-mode-container .remote-wrapper.compact-mode #tv-btn-power {
  display: flex;
  order: 0;
}

#tv-mode-container .panel.visible {
  visibility: visible;
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0s;
  pointer-events: auto;
}

#tv-mode-container .channel-panel {
  width: 250px;
  padding: var(--padding-size);
  display: flex;
  flex-direction: column;
}

#tv-mode-container .guide-panel {
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
}

#tv-mode-container .settings-panel {
  width: 250px;
  padding: var(--padding-size);
  overflow-y: auto;
}

#tv-mode-container #tv-channel-panel-list {
  margin-top: 10px;
  flex-grow: 1;
  overflow-y: auto;
}

#tv-mode-container .channel-list-item {
  padding: 5px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 3px;
}

#tv-mode-container .channel-list-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#tv-mode-container .channel-list-item span {
  font-weight: bold;
  margin-right: 10px;
}

#tv-mode-container .settings-list {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#tv-mode-container .setting-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1rem;
}

#tv-mode-container .setting-item label {
  font-weight: 600;
}

#tv-mode-container .setting-item input[type='text'],
#tv-mode-container .setting-item input[type='number'] {
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--panel-text);
  border: 1px solid var(--panel-text);
  border-radius: 3px;
  padding: 8px;
  width: 100%;
  font-family: 'VT323', monospace;
  box-sizing: border-box;
  font-size: 1rem;
  height: var(--button-size-normal);
}

#tv-mode-container .button-group {
  display: flex;
  gap: 5px;
}

#tv-mode-container .button-group .speed-btn {
  flex: 1;
  padding: 8px;
  background-color: transparent;
  border: 1px solid var(--panel-text);
  color: var(--panel-text);
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.1s ease;
}

#tv-mode-container .button-group .speed-btn:hover {
  background-color: rgba(255, 255, 0, 0.1);
}

#tv-mode-container .button-group .speed-btn.active {
  background-color: var(--panel-text);
  color: var(--panel-bg);
  font-weight: bold;
}

#tv-mode-container #tv-btn-reshuffle {
  width: 100%;
  height: var(--button-size-normal);
  padding: 8px;
  background-color: transparent;
  border: 1px solid var(--panel-text);
  color: var(--panel-text);
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.1s ease;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
}

#tv-mode-container #tv-btn-reshuffle:hover {
  background-color: rgba(255, 255, 0, 0.1);
}

#tv-mode-container #tv-osd-display {
  position: absolute;
  top: 20px;
  left: 20px;
  color: var(--accent-color);
  text-shadow:
    0 0 5px var(--accent-color),
    0 0 8px rgba(0, 255, 0, 0.7);
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 28;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-in-out,
    visibility 0s 0.3s;
  pointer-events: none;
  line-height: 1.3;
  white-space: pre-wrap;
}

#tv-mode-container #tv-osd-display.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

#tv-mode-container #tv-osd-display .osd-channel-line {
  font-size: 2rem;
  font-weight: bold;
}

#tv-mode-container #tv-osd-display .osd-title-line {
  font-size: 1.2rem;
  color: var(--accent-color);
}

#tv-mode-container #tv-osd-display .osd-author-line {
  font-size: 1rem;
  opacity: 0.8;
  color: var(--accent-color);
}

#tv-mode-container #tv-osd-display .osd-message-line {
  font-size: 2rem;
}

#tv-mode-container .tv-btn-favorite .material-symbols-outlined {
  position: relative;
  z-index: 2;
}

#tv-mode-container .tv-btn-favorite .progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: var(--color-background-button);
  transition: height var(--fav-hold-duration) linear;
  z-index: 1;
}

#tv-mode-container .progress-bar.filling {
  height: 100%;
}

#tv-mode-container .guide-layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0.8rem;
}

#tv-mode-container .guide-layout-new {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0.8rem;
}

#tv-mode-container .guide-timeline-wrapper {
  flex-shrink: 0;
  display: flex;
  z-index: 5;
  height: 30px;
  overflow-x: hidden;
  background-color: var(--panel-bg);
}

#tv-mode-container .guide-main-content {
  flex-grow: 1;
  overflow: auto;
  position: relative;
  cursor: grab;
}

#tv-mode-container .guide-main-content:active {
  cursor: grabbing;
}

#tv-mode-container .guide-grid-wrapper {
  display: flex;
  position: relative;
}

#tv-mode-container .guide-channels-col-sticky {
  width: var(--guide-channel-col-width);
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 4;
  background-color: var(--panel-bg);
}

#tv-mode-container .guide-programs-grid {
  overflow: hidden;
}

#tv-mode-container .guide-main-content::-webkit-scrollbar,
#tv-mode-container .guide-timeline-wrapper::-webkit-scrollbar,
#tv-mode-container #tv-channel-panel-list::-webkit-scrollbar,
#tv-mode-container .settings-panel::-webkit-scrollbar,
#tv-mode-container .guide-panel::-webkit-scrollbar {
  width: 8px;
}

#tv-mode-container .guide-main-content::-webkit-scrollbar-track,
#tv-mode-container .guide-timeline-wrapper::-webkit-scrollbar-track,
#tv-mode-container #tv-channel-panel-list::-webkit-scrollbar-track,
#tv-mode-container .settings-panel::-webkit-scrollbar-track,
#tv-mode-container .guide-panel::-webkit-scrollbar-track {
  background: rgb(0, 31, 63);
}

#tv-mode-container .guide-main-content::-webkit-scrollbar-thumb,
#tv-mode-container #tv-channel-panel-list::-webkit-scrollbar-thumb,
#tv-mode-container .settings-panel::-webkit-scrollbar-thumb,
#tv-mode-container .guide-panel::-webkit-scrollbar-thumb {
  background: var(--panel-text);
}

#tv-mode-container #tv-channel-panel-list::-webkit-scrollbar {
  width: 8px;
}

#tv-mode-container .guide-corner {
  height: 30px;
}

#tv-mode-container .guide-channel-header {
  padding: 5px 10px;
  height: 40px;
  border-top: 1px solid var(--panel-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tv-mode-container .guide-channel-header:hover {
  background-color: rgba(255, 255, 0, 0.1);
}

#tv-mode-container .guide-channel-header:last-child,
#tv-mode-container .guide-program-row:last-child {
  border-bottom: 1px solid var(--panel-text);
}

#tv-mode-container .guide-corner {
  flex-shrink: 0;
  width: 200px;
  height: 30px;
}

#tv-mode-container .guide-hour {
  flex-shrink: 0;
  text-align: left;
  padding: 5px;
  box-sizing: border-box;
  border-left: 1px solid var(--panel-text);
}

#tv-mode-container .guide-program-row {
  display: flex;
  height: 40px;
  box-sizing: border-box;
  white-space: nowrap;
}

#tv-mode-container .guide-program {
  flex-shrink: 0;
  border-left: 1px solid var(--panel-text);
  border-top: 1px solid var(--panel-text);
  padding: 0 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
}

#tv-mode-container .guide-time-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: red;
  z-index: 4;
  pointer-events: none;
}

#tv-mode-container .guide-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  max-width: 300px;
  font-size: 0.8rem;
  min-width: 150px;
}

#tv-mode-container .guide-channel-header.active-channel {
  background-color: var(--panel-text);
  color: var(--panel-bg);
}

#tv-mode-container .guide-program.active-program {
  background-color: var(--panel-text);
  color: var(--panel-bg);
}

#tv-mode-container .guide-program-spacer {
  flex-grow: 1;
  border-right: 1px solid var(--panel-text);
}

#tv-mode-container .setting-value-display {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-left: 0.5em;
  font-weight: bold;
  opacity: 1;
  display: inline;
  width: auto;
}

#tv-mode-container .button-group .speed-btn,
#tv-mode-container #tv-btn-reshuffle {
  font-family: inherit;
}

/* ANCHOR: Auth Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.modal-content {
  background-color: var(--color-background);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-lg);
  width: 90%;
  max-width: 500px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.modal-close-btn {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content h2 {
  margin: 0;
  margin-bottom: var(--spacing-md);
  font-family: var(--font-header);
  font-size: var(--font-size-lg);
}

.btn--primary {
  background-color: var(--color-text);
  color: var(--color-background);
  border-color: var(--color-text);
  font-weight: bold;
}

.btn--primary:hover {
  background-color: #bbbbbb;
  border-color: #bbbbbb;
  color: var(--color-background);
}

.modal-user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-header-bg);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-default);
}

.error-message {
  color: #ff5555;
  font-size: var(--font-size-sm);
  margin: var(--spacing-md) 0 0 0;
}