:root {
  color-scheme: dark;
  forced-color-adjust: none;
  --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;
  --color-border-light: #333;
  --color-error: #ff5555; /* --- NEW --- */
  --font-main: "VT323", monospace, sans-serif;
  --font-header: "Sixtyfour", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.833rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 2rem;
  --spacing-xs: 0.125rem;
  --spacing-sm: 0.25rem;
  --spacing-md: 0.5rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --border-width-default: 1px;
  --border-color-default: #666666;
  --border-radius-sm: var(--spacing-sm);
  --border-radius-md: var(--spacing-md);
  --border-radius-default: var(--border-radius-sm);
  --control-height: 1.5rem;
  --opacity-inactive: 0.75;
  --opacity-disabled: 0.5;
  --toast-bg-color: #333;
  --toast-text-color: #fff;
  --toast-bottom-spacing: var(--spacing-xl);
  --toast-padding: 0.625rem var(--spacing-xl);
  --toast-border-radius: var(--border-radius-sm);
  --toast-opacity-transition: opacity 0.3s;
  --toast-z-index: 9999;

  /* Hoisted TV & Theme Tokens */
  --color-text-player: #e0e0e0;
  --color-text-button: #e0e0e0;
  --color-background-remote: #222222;
  --color-background-button: #222222;
  --color-background-button-hover: #4a4a4a;
  --color-background-button-active: #4a4a4a;
  --panel-bg: rgba(0, 31, 63, 0.75);
  --panel-text: #ffff00;
  --guide-nowline-color: var(--color-error);

  /* Scrollbar defaults (Table mode) */
  --scrollbar-width: var(--spacing-md);
  --scrollbar-track-bg: transparent;
  --scrollbar-thumb-bg: color-mix(in srgb, var(--color-text) 25%, transparent);
  --scrollbar-thumb-hover-bg: var(--color-text);
}

/* TV Mode Scrollbar Overrides */
#tv-mode-container {
  --scrollbar-track-bg: rgb(0, 31, 63); /* Navy */
  --scrollbar-thumb-bg: color-mix(in srgb, var(--panel-text) 25%, transparent);
  --scrollbar-thumb-hover-bg: var(--panel-text);
}
* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

@media (max-width: 768px) {
  html {
    font-size: 90%;
  }
}

/* Front-end UI S/M/L font scaling */
html[data-text-size="s"] {
  font-size: 87.5%;
}
html[data-text-size="m"] {
  font-size: 100%;
}
html[data-text-size="l"] {
  font-size: 112.5%;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--font-main);
  background-color: var(--color-background);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

/* Mobile/Touch: trigger overflow to allow hiding mobile browser address bar */
@media (pointer: coarse) {
  html,
  body {
    min-height: calc(100dvh + 1px);
  }
}

/* Mobile: drop base body font from lg → md */
@media (max-width: 768px) {
  body {
    font-size: var(--font-size-md);
  }
}

/* Global Scrollbar Styles */

::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-bg);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-bg);
}

::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-track-bg);
}

a {
  color: var(--text-bordcolorer);
  text-decoration: none;
}
h4 {
  text-transform: uppercase;
}

.hidden {
  display: none;
}

/* Material Icons Base CSS */
.material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: var(--font-size-lg); /* Rem-based icon sizing */
  color: inherit;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: middle;
}

.material-symbols-outlined::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-svg);
  mask-image: var(--icon-svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  /* Ensure layout fills screen, but can grow and scroll */
}

.layout__player {
  background-color: transparent;
  overflow-x: hidden;
}

.layout__table {
  max-height: 80dvh;
  /* Allow table to be up to screen height, then scroll */
  overflow-y: auto;
  /* Allow table to scroll independently */
  overflow-x: hidden;
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--spacing-xl));
}

.layout.layout--landscape {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100dvh;
  overflow: hidden;
}

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

.layout.layout--landscape .layout__player::-webkit-scrollbar {
  display: none;
}

.layout.layout--landscape .layout__table {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100dvh;
}

.layout.layout--landscape .player-container {
  /* Ensure player fits with controls on short screens, but don't stretch on tall screens */
  max-height: calc(100dvh - (var(--control-height) * 5));
  width: 100%;
}

.player__header {
  font-family: var(--font-header);
  font-size: 24px;
  line-height: 24px;
  cursor: pointer;
  color: var(--color-text);
  text-align: center;
  user-select: none;
  transform: translateY(2px); /* Optical adjustment for custom font baseline */
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0;
  height: 100%;
}

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

.header-controls {
  display: flex;
  align-items: center;
  border-bottom: var(--border-width-default) solid var(--border-color-default);
  height: calc(var(--control-height) * 2);
}

.header-controls .player__header {
  padding-left: var(--spacing-md);
}

.flex-grow {
  flex-grow: 1;
}

.promo-container {
  font-size: var(--font-size-xs);
  color: var(--color-text);
  opacity: var(--opacity-disabled);
  line-height: 1.2;
  border: var(--border-width-default) solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-default);
}

#main-promo-container {
  margin-left: var(--spacing-lg);
}

.settings-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;
}

.settings-container.hidden {
  display: none;
}

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

.control-group--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.control-group--wrap {
  flex-wrap: wrap;
}

.setting-item--inline {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.control-group--scroll .setting-item--inline {
  flex-shrink: 0;
  white-space: nowrap;
}

.settings-label {
  font-size: var(--font-size-sm);
  opacity: var(--opacity-inactive);
}

.setting-item--inline .settings-label {
  margin-right: 0;
}

.settings-container__input,
.date-filters__input,
.search-input,
.search-container__input,
.input-number,
.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: 0 var(--spacing-md);
  height: var(--control-height);
  box-sizing: border-box;
}

.settings-container__input:focus,
.date-filters__input:focus,
.search-input:focus,
.search-container__input:focus,
.input-number:focus,
.channel-filter-grid-row input[type="text"]:focus {
  box-shadow: inset 0 0 0 var(--spacing-xs) var(--color-text);
}

/* System Checkbox Styling */
input[type="checkbox"] {
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  accent-color: var(--color-text);
}

input[type="checkbox"]:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* System Radio Button Styling */
input[type="radio"] {
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  accent-color: var(--color-text);
}

input[type="radio"]:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

body .material-symbols-outlined {
  font-size: var(--font-size-md);
  line-height: 1;
  font-weight: 300;
  vertical-align: middle;
  pointer-events: none;
}

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

.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: 0 var(--spacing-md);
  min-width: 36px;
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.2s;
}

.btn:disabled,
.btn[disabled] {
  opacity: var(--opacity-disabled);
  cursor: default;
  box-shadow: none;
  background-color: transparent;
}

.btn--danger {
  color: var(--color-error);
  border-color: var(--color-error);
}



.playlist-controls .btn {
  text-transform: lowercase;
}

.date-filters__input {
  flex-grow: 0;
  min-width: var(--control-height);
  width: var(--control-height);
  text-align: center;
  border-right: 0;
  border-radius: 0;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

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

.input-number {
  flex-grow: 0;
  width: 60px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

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

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

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

.search-input {
  flex-grow: 0;
  width: 120px;
}

.settings-container__textarea {
  width: 100%;
  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);
  resize: vertical;
  min-height: calc(var(--control-height) * 2);
  line-height: 1.4;
}

.settings-container__textarea:focus {
  box-shadow: inset 0 0 0 2px var(--color-text);
}

.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: 0 var(--spacing-md);
  min-width: 36px;
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.2s;
}

.btn:disabled,
.btn[disabled] {
  opacity: var(--opacity-disabled);
  cursor: default;
  box-shadow: none;
  background-color: transparent;
}



/* Button Groups & Icons */
.btn-remove-icon {
  background: transparent;
  border: none;
  color: var(--color-text);
  padding: var(--spacing-xs);
  min-width: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: var(--opacity-inactive);
  transition:
    opacity 0.2s,
    color 0.2s;
  flex-shrink: 0;
}

.btn-remove-icon:hover {
  opacity: 1;
  color: var(--color-error);
}

.btn--icon,
.btn.btn--icon {
  width: var(--control-height);
  min-width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.segmented-group__left {
  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;
}

.segmented-group__right {
  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);
}

.segmented-group__right.from-yt {
  text-decoration: underline dotted;
}

.btn.active,
.segmented-group__left.active,
.segmented-group__right.active {
  box-shadow: inset 0 0 0 var(--spacing-xs) var(--color-text);
}

.duration-filter-group {
  display: flex;
  gap: var(--spacing-sm);
  height: var(--control-height);
}

.date-filters__btn--duration {
  transition: background-color 0.2s;
  min-width: var(--control-height);
  padding: 0 var(--spacing-sm);
}

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

/* Playing state overrides for player tabs */
.segmented-group--playing .segmented-group__left,
.segmented-group--playing .segmented-group__right {
  box-shadow: inset 0 0 0 var(--spacing-xs) var(--color-text);
  background-color: transparent;
}

.segmented-group--playing .segmented-group__left:hover,
.segmented-group--playing .segmented-group__right:hover {
  background-color: var(--color-header-hover);
}

.segmented-group--playing .segmented-group__right.active {
  background-color: transparent;
}

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

.btn--header-text:focus {
  outline: none;
}

.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;
}

/* Virtual scroll: padding rows handle the scroll height natively */
.virtual-scroll-body {
  width: 100%;
}

.virtual-row {
  width: 100%;
}

.virtual-grid {
  width: 100%;
  font-size: var(--font-size-sm);
}

.virtual-grid .virtual-grid-th,
.virtual-grid .virtual-grid-td {
  padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md);
  text-align: left;
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  height: 100%;
}

.virtual-grid .virtual-grid-td * {
  vertical-align: middle;
}

.cell--duration {
  border-right: var(--border-width-default) solid var(--color-border-light);
}

.cell--align-right {
  justify-content: flex-end;
  text-align: right;
  flex-shrink: 0;
}

/* Tier-based dimming for restricted content (tier 2/3). */
.tier-2-style,
.tier-3-style {
  opacity: var(--opacity-inactive);
}

.cell-text {
  will-change: transform;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.copied-message {
  vertical-align: middle;
}

.virtual-grid-td[data-column="title"] .cell-text {
  vertical-align: middle;
}

.virtual-grid .virtual-grid-td[data-column="title"] {
  cursor: pointer;
}

.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;

  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);
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.virtual-row {
  border-bottom: var(--border-width-default) solid var(--color-border);
  height: var(--control-height);
  user-select: none;
  contain: strict;
  will-change: transform;
}

.virtual-row:hover {
  cursor: pointer;
}

.virtual-grid-td[data-column="title"]:hover .title-cell__controls {
  backdrop-filter: blur(1px);
}

.virtual-grid-td[data-column="title"]:hover .title-cell__control-btn .material-symbols-outlined {
  opacity: 1;
}

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

.virtual-grid .user-playlist-indicator,
.virtual-grid .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);
  flex-shrink: 0;
}

.virtual-grid .virtual-grid-th {
  border-bottom-width: var(--spacing-xs);
  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);
  /* Headers stay vertically centered even though body cells align to flex-end. */
  align-items: center;
  gap: var(--spacing-xs);
}

.virtual-grid .virtual-grid-th.sortable {
  cursor: pointer;
}

.virtual-grid .virtual-grid-th.sortable:hover {
  background-color: var(--color-header-hover);
}

.virtual-grid .virtual-grid-th .virtual-grid__sort-icon {
  vertical-align: middle;
  font-size: var(--font-size-md);
}

.channel-filter-container {
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.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;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23e0e0e0'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: var(--font-size-md);
  padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm) var(--spacing-md);
  height: var(--control-height);
  box-sizing: border-box;
}

.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);
  width: 100%;
  box-sizing: border-box;
}

.channel-filter-grid-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.channel-filter-grid-row input[type="text"] {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.channel-filter-grid__channel-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-xs);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

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

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

@keyframes pulse-border {
  0%,
  100% {
    border-color: var(--border-color-default);
    box-shadow: none;
  }
  50% {
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--spacing-xs) var(--color-text);
  }
}

.flash-border {
  animation: pulse-border 1.5s infinite;
}

@keyframes tv-button-throb {
  0% {
    transform: scale(1);
    text-shadow: none;
  }
  50% {
    transform: scale(1.05);
    color: var(--color-accent-glow);
    text-shadow: 0 0 var(--spacing-md) var(--color-accent-glow);
  }
  100% {
    transform: scale(1);
    text-shadow: none;
  }
}

#enter-tv-mode-btn {
  animation: tv-button-throb 0.25s ease-in-out 8;
  transform-origin: center;
  will-change: transform, text-shadow, color;
}

#enter-tv-mode-btn:hover {
  animation: tv-button-throb 0.25s ease-in-out infinite;
}

/* --- NEW: Left-Handed Mode --- */
.left-handed-mode .header-controls #seek-backward-btn {
  order: -2;
  border: none;
}
.left-handed-mode .header-controls #seek-forward-btn {
  order: -1;
  border: none;
}

.left-handed-mode .player-tabs {
  grid-template-columns: 10% 10% 40% 40%;
}

.left-handed-mode .player-tabs > * {
  border-left: none;
}

.left-handed-mode #playlist-prev-btn {
  order: -2;
  border-right: none;
}

.left-handed-mode #playlist-next-btn {
  order: -1;
  border-right: var(--border-width-default) solid var(--border-color-default);
}

.left-handed-mode .player-tabs > .player-tabs__tab:first-of-type {
  border-right: var(--border-width-default) solid var(--border-color-default);
}

.left-handed-mode .player-tabs > .player-tabs__tab:last-of-type {
  border-right: none;
}
/* Generated by scripts/sync-icons.mjs — do not edit manually. */
.material-symbols-outlined[data-icon="account_circle"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M234-276q51-39%20114-61.5T480-360q69%200%20132%2022.5T726-276q35-41%2054.5-93T800-480q0-133-93.5-226.5T480-800q-133%200-226.5%2093.5T160-480q0%2059%2019.5%20111t54.5%2093Zm246-164q-59%200-99.5-40.5T340-580q0-59%2040.5-99.5T480-720q59%200%2099.5%2040.5T620-580q0%2059-40.5%2099.5T480-440Zm0%20360q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q53%200%20100-15.5t86-44.5q-39-29-86-44.5T480-280q-53%200-100%2015.5T294-220q39%2029%2086%2044.5T480-160Zm0-360q26%200%2043-17t17-43q0-26-17-43t-43-17q-26%200-43%2017t-17%2043q0%2026%2017%2043t43%2017Zm0-60Zm0%20360Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="add"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="arrow_drop_down"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-360%20280-560h400L480-360Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="arrow_drop_up"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m280-400%20200-200%20200%20200H280Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="arrow_left"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M560-280%20360-480l200-200v400Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="arrow_right"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M400-280v-400l200%20200-200%20200Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="asterisk"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M440-120v-264L254-197l-57-57%20187-186H120v-80h264L197-706l57-57%20186%20187v-264h80v264l186-187%2057%2057-187%20186h264v80H576l187%20186-57%2057-186-187v264h-80Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="block"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-80q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q54%200%20104-17.5t92-50.5L228-676q-33%2042-50.5%2092T160-480q0%20134%2093%20227t227%2093Zm252-124q33-42%2050.5-92T800-480q0-134-93-227t-227-93q-54%200-104%2017.5T284-732l448%20448Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="check_circle"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="check_small"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M400-304%20240-464l56-56%20104%20104%20264-264%2056%2056-320%20320Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="close"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m256-200-56-56%20224-224-224-224%2056-56%20224%20224%20224-224%2056%2056-224%20224%20224%20224-56%2056-224-224-224%20224Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="close_fullscreen"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m136-80-56-56%20264-264H160v-80h320v320h-80v-184L136-80Zm344-400v-320h80v184l264-264%2056%2056-264%20264h184v80H480Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="closed_caption"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M200-160q-33%200-56.5-23.5T120-240v-480q0-33%2023.5-56.5T200-800h560q33%200%2056.5%2023.5T840-720v480q0%2033-23.5%2056.5T760-160H200Zm0-80h560v-480H200v480Zm80-120h120q17%200%2028.5-11.5T440-400v-40h-60v20h-80v-120h80v20h60v-40q0-17-11.5-28.5T400-600H280q-17%200-28.5%2011.5T240-560v160q0%2017%2011.5%2028.5T280-360Zm280%200h120q17%200%2028.5-11.5T720-400v-40h-60v20h-80v-120h80v20h60v-40q0-17-11.5-28.5T680-600H560q-17%200-28.5%2011.5T520-560v160q0%2017%2011.5%2028.5T560-360ZM200-240v-480%20480Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="closed_caption_disabled"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m361-600%2060%2060H300v120h80v-20h60v40q0%2017-11.5%2028.5T400-360H280q-17%200-28.5-11.5T240-400v-160q0-17%2011.5-28.5T280-600h81Zm-86-200h485q33%200%2056.5%2023.5T840-720v485l-80-80v-405H355l-80-80Zm445%20360v40q0%209-3.5%2017.5T706-369l-51-51h5v-20h60Zm-60-80v-20h-80v45l-60-60v-5q0-17%2011.5-28.5T560-600h120q17%200%2028.5%2011.5T720-560v40h-60Zm-102%202Zm-154%2074ZM168-793l73%2073h-41v480h407L27-820l57-57L876-85l-57%2057-132-132H200q-33%200-56.5-23.5T120-240v-480q0-25%2013.5-44.5T168-793Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="cloud"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M260-160q-91%200-155.5-63T40-377q0-78%2047-139t123-78q25-92%20100-149t170-57q117%200%20198.5%2081.5T760-520q69%208%20114.5%2059.5T920-340q0%2075-52.5%20127.5T740-160H260Zm0-80h480q42%200%2071-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83%200-141.5%2058.5T280-520h-20q-58%200-99%2041t-41%2099q0%2058%2041%2099t99%2041Zm220-240Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="cloud_alert"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M260-160q-91%200-155.5-63T40-377q0-78%2047-139t123-78q25-92%20100-149t170-57q117%200%20198.5%2081.5T760-520q69%208%20114.5%2059.5T920-340q0%2075-52.5%20127.5T740-160H260Zm0-80h480q42%200%2071-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83%200-141.5%2058.5T280-520h-20q-58%200-99%2041t-41%2099q0%2058%2041%2099t99%2041Zm220-240Zm0%20160q17%200%2028.5-11.5T520-360q0-17-11.5-28.5T480-400q-17%200-28.5%2011.5T440-360q0%2017%2011.5%2028.5T480-320Zm-40-140h80v-180h-80v180Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="cloud_done"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m414-280%20226-226-58-58-169%20169-84-84-57%2057%20142%20142ZM260-160q-91%200-155.5-63T40-377q0-78%2047-139t123-78q25-92%20100-149t170-57q117%200%20198.5%2081.5T760-520q69%208%20114.5%2059.5T920-340q0%2075-52.5%20127.5T740-160H260Zm0-80h480q42%200%2071-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83%200-141.5%2058.5T280-520h-20q-58%200-99%2041t-41%2099q0%2058%2041%2099t99%2041Zm220-240Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="cloud_download"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M260-160q-91%200-155.5-63T40-377q0-78%2047-139t123-78q17-72%2085-137t145-65q33%200%2056.5%2023.5T520-716v242l64-62%2056%2056-160%20160-160-160%2056-56%2064%2062v-242q-76%2014-118%2073.5T280-520h-20q-58%200-99%2041t-41%2099q0%2058%2041%2099t99%2041h480q42%200%2071-29t29-71q0-42-29-71t-71-29h-60v-80q0-48-22-89.5T600-680v-93q74%2035%20117%20103.5T760-520q69%208%20114.5%2059.5T920-340q0%2075-52.5%20127.5T740-160H260Zm220-358Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="cloud_upload"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M260-160q-91%200-155.5-63T40-377q0-78%2047-139t123-78q25-92%20100-149t170-57q117%200%20198.5%2081.5T760-520q69%208%20114.5%2059.5T920-340q0%2075-52.5%20127.5T740-160H520q-33%200-56.5-23.5T440-240v-206l-64%2062-56-56%20160-160%20160%20160-56%2056-64-62v206h220q42%200%2071-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83%200-141.5%2058.5T280-520h-20q-58%200-99%2041t-41%2099q0%2058%2041%2099t99%2041h100v80H260Zm220-280Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="content_copy"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M360-240q-33%200-56.5-23.5T280-320v-480q0-33%2023.5-56.5T360-880h360q33%200%2056.5%2023.5T800-800v480q0%2033-23.5%2056.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33%200-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480%20480Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="crop_16_9"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M200-280q-33%200-56.5-23.5T120-360v-240q0-33%2023.5-56.5T200-680h560q33%200%2056.5%2023.5T840-600v240q0%2033-23.5%2056.5T760-280H200Zm0-80h560v-240H200v240Zm0%200v-240%20240Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="crop_9_16"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M360-120q-33%200-56.5-23.5T280-200v-560q0-33%2023.5-56.5T360-840h240q33%200%2056.5%2023.5T680-760v560q0%2033-23.5%2056.5T600-120H360Zm0-640v560h240v-560H360Zm0%200v560-560Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="csv"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M230-360h120v-60H250v-120h100v-60H230q-17%200-28.5%2011.5T190-560v160q0%2017%2011.5%2028.5T230-360Zm156%200h120q17%200%2028.5-11.5T546-400v-60q0-17-11.5-31.5T506-506h-60v-34h100v-60H426q-17%200-28.5%2011.5T386-560v60q0%2017%2011.5%2030.5T426-456h60v36H386v60Zm264%200h60l70-240h-60l-40%20138-40-138h-60l70%20240ZM160-160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h640q33%200%2056.5%2023.5T880-720v480q0%2033-23.5%2056.5T800-160H160Zm0-80h640v-480H160v480Zm0%200v-480%20480Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="description"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M320-240h320v-80H320v80Zm0-160h320v-80H320v80ZM240-80q-33%200-56.5-23.5T160-160v-640q0-33%2023.5-56.5T240-880h320l240%20240v480q0%2033-23.5%2056.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200%20640-640Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="expand_less"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m296-345-56-56%20240-240%20240%20240-56%2056-184-184-184%20184Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="expand_more"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-345%20240-585l56-56%20184%20184%20184-184%2056%2056-240%20240Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="filter_alt"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M440-160q-17%200-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26%200%2036.5%2022t-4.5%2042L560-440v240q0%2017-11.5%2028.5T520-160h-80Zm40-308%20198-252H282l198%20252Zm0%200Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="filter_alt_off"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m592-481-57-57%20143-182H353l-80-80h487q25%200%2036%2022t-4%2042L592-481ZM791-56%20560-287v87q0%2017-11.5%2028.5T520-160h-80q-17%200-28.5-11.5T400-200v-247L56-791l56-57%20736%20736-57%2056ZM535-538Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="forward_10"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M360-320v-180h-60v-60h120v240h-60Zm140%200q-17%200-28.5-11.5T460-360v-160q0-17%2011.5-28.5T500-560h80q17%200%2028.5%2011.5T620-520v160q0%2017-11.5%2028.5T580-320h-80Zm20-60h40v-120h-40v120ZM480-80q-75%200-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440q0-75%2028.5-140.5t77-114q48.5-48.5%20114-77T480-800h6l-62-62%2056-58%20160%20160-160%20160-56-58%2062-62h-6q-117%200-198.5%2081.5T200-440q0%20117%2081.5%20198.5T480-160q117%200%20198.5-81.5T760-440h80q0%2075-28.5%20140.5t-77%20114q-48.5%2048.5-114%2077T480-80Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="forward_30"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M300-320v-60h100v-40h-60v-40h60v-40H300v-60h120q17%200%2028.5%2011.5T460-520v160q0%2017-11.5%2028.5T420-320H300Zm240%200q-17%200-28.5-11.5T500-360v-160q0-17%2011.5-28.5T540-560h80q17%200%2028.5%2011.5T660-520v160q0%2017-11.5%2028.5T620-320h-80Zm20-60h40v-120h-40v120ZM480-80q-75%200-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440q0-75%2028.5-140.5t77-114q48.5-48.5%20114-77T480-800h6l-62-62%2056-58%20160%20160-160%20160-56-58%2062-62h-6q-117%200-198.5%2081.5T200-440q0%20117%2081.5%20198.5T480-160q117%200%20198.5-81.5T760-440h80q0%2075-28.5%20140.5t-77%20114q-48.5%2048.5-114%2077T480-80Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="help"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M478-240q21%200%2035.5-14.5T528-290q0-21-14.5-35.5T478-340q-21%200-35.5%2014.5T428-290q0%2021%2014.5%2035.5T478-240Zm-36-154h74q0-33%207.5-52t42.5-52q26-26%2041-49.5t15-56.5q0-56-41-86t-97-30q-57%200-92.5%2030T342-618l66%2026q5-18%2022.5-39t53.5-21q32%200%2048%2017.5t16%2038.5q0%2020-12%2037.5T506-526q-44%2039-54%2059t-10%2073Zm38%20314q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="history"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-120q-138%200-240.5-91.5T122-440h82q14%20104%2092.5%20172T480-200q117%200%20198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69%200-129%2032t-101%2088h110v80H120v-240h80v94q51-64%20124.5-99T480-840q75%200%20140.5%2028.5t114%2077q48.5%2048.5%2077%20114T840-480q0%2075-28.5%20140.5t-77%20114q-48.5%2048.5-114%2077T480-120Zm112-192L440-464v-216h80v184l128%20128-56%2056Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="label"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M840-480%20666-234q-11%2016-28.5%2025t-37.5%209H200q-33%200-56.5-23.5T120-280v-400q0-33%2023.5-56.5T200-760h400q20%200%2037.5%209t28.5%2025l174%20246Zm-98%200L600-680H200v400h400l142-200Zm-542%200v200-400%20200Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="label_off"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m738-336-58-58%2062-86-142-200H394l-80-80h286q20%200%2037%208.5t29%2025.5l174%20246-102%20144Zm54%20280L638-210q-9%205-18%207.5t-20%202.5H200q-33%200-56.5-23.5T120-280v-400q0-11%202.5-20t7.5-18l-74-74%2056-56%20736%20736-56%2056ZM383-464Zm154-73Zm31%20257L200-648v368h368Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="lock"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M240-80q-33%200-56.5-23.5T160-160v-400q0-33%2023.5-56.5T240-640h40v-80q0-83%2058.5-141.5T480-920q83%200%20141.5%2058.5T680-720v80h40q33%200%2056.5%2023.5T800-560v400q0%2033-23.5%2056.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33%200%2056.5-23.5T560-360q0-33-23.5-56.5T480-440q-33%200-56.5%2023.5T400-360q0%2033%2023.5%2056.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50%200-85%2035t-35%2085v80ZM240-160v-400%20400Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="lock_open"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M240-640h360v-80q0-50-35-85t-85-35q-50%200-85%2035t-35%2085h-80q0-83%2058.5-141.5T480-920q83%200%20141.5%2058.5T680-720v80h40q33%200%2056.5%2023.5T800-560v400q0%2033-23.5%2056.5T720-80H240q-33%200-56.5-23.5T160-160v-400q0-33%2023.5-56.5T240-640Zm0%20480h480v-400H240v400Zm240-120q33%200%2056.5-23.5T560-360q0-33-23.5-56.5T480-440q-33%200-56.5%2023.5T400-360q0%2033%2023.5%2056.5T480-280ZM240-160v-400%20400Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="login"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-120v-80h280v-560H480v-80h280q33%200%2056.5%2023.5T840-760v560q0%2033-23.5%2056.5T760-120H480Zm-80-160-55-58%20102-102H120v-80h327L345-622l55-58%20200%20200-200%20200Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="mail"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M160-160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h640q33%200%2056.5%2023.5T880-720v480q0%2033-23.5%2056.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80%20320-200H160l320%20200ZM160-640v-80%20480-400Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="menu"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="menu_book"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M560-564v-68q33-14%2067.5-21t72.5-7q26%200%2051%204t49%2010v64q-24-9-48.5-13.5T700-600q-38%200-73%209.5T560-564Zm0%20220v-68q33-14%2067.5-21t72.5-7q26%200%2051%204t49%2010v64q-24-9-48.5-13.5T700-380q-38%200-73%209t-67%2027Zm0-110v-68q33-14%2067.5-21t72.5-7q26%200%2051%204t49%2010v64q-24-9-48.5-13.5T700-490q-38%200-73%209.5T560-454ZM260-320q47%200%2091.5%2010.5T440-278v-394q-41-24-87-36t-93-12q-36%200-71.5%207T120-692v396q35-12%2069.5-18t70.5-6Zm260%2042q44-21%2088.5-31.5T700-320q36%200%2070.5%206t69.5%2018v-396q-33-14-68.5-21t-71.5-7q-47%200-93%2012t-87%2036v394Zm-40%20118q-48-38-104-59t-116-21q-42%200-82.5%2011T100-198q-21%2011-40.5-1T40-234v-482q0-11%205.5-21T62-752q46-24%2096-36t102-12q58%200%20113.5%2015T480-740q51-30%20106.5-45T700-800q52%200%20102%2012t96%2036q11%205%2016.5%2015t5.5%2021v482q0%2023-19.5%2035t-40.5%201q-37-20-77.5-31T700-240q-60%200-116%2021t-104%2059ZM280-494Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="merge"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m256-120-56-56%20193-194q23-23%2035-52t12-61v-204l-64%2063-56-56%20160-160%20160%20160-56%2056-64-63v204q0%2032%2012%2061t35%2052l193%20194-56%2056-224-224-224%20224Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="open_in_full"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M120-120v-320h80v184l504-504H520v-80h320v320h-80v-184L256-200h184v80H120Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="play_arrow"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M320-200v-560l440%20280-440%20280Zm80-280Zm0%20134%20210-134-210-134v268Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="play_circle"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m380-300%20280-180-280-180v360ZM480-80q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="playlist_add"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M120-320v-80h280v80H120Zm0-160v-80h440v80H120Zm0-160v-80h440v80H120Zm520%20480v-160H480v-80h160v-160h80v160h160v80H720v160h-80Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="playlist_play"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M120-320v-80h320v80H120Zm0-160v-80h480v80H120Zm0-160v-80h480v80H120Zm520%20520v-320l240%20160-240%20160Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="playlist_remove"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m576-80-56-56%20104-104-104-104%2056-56%20104%20104%20104-104%2056%2056-104%20104%20104%20104-56%2056-104-104L576-80ZM120-320v-80h280v80H120Zm0-160v-80h440v80H120Zm0-160v-80h440v80H120Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="policy"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-80q-139-35-229.5-159.5T160-516v-244l320-120%20320%20120v244q0%2085-29%20163.5T688-214L560-342q-18%2011-38.5%2016.5T480-320q-66%200-113-47t-47-113q0-66%2047-113t113-47q66%200%20113%2047t47%20113q0%2022-5.5%2042.5T618-398l60%2060q20-41%2031-86t11-92v-189l-240-90-240%2090v189q0%20121%2068%20220t172%20132q26-8%2049.5-20.5T576-214l56%2056q-33%2027-71.5%2047T480-80Zm0-320q33%200%2056.5-23.5T560-480q0-33-23.5-56.5T480-560q-33%200-56.5%2023.5T400-480q0%2033%2023.5%2056.5T480-400Zm8-77Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="power_settings_new"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M440-440v-400h80v400h-80Zm40%20320q-74%200-139.5-28.5T226-226q-49-49-77.5-114.5T120-480q0-80%2033-151t93-123l56%2056q-48%2040-75%2097t-27%20121q0%20116%2082%20198t198%2082q117%200%20198.5-82T760-480q0-64-26.5-121T658-698l56-56q60%2052%2093%20123t33%20151q0%2074-28.5%20139.5t-77%20114.5q-48.5%2049-114%2077.5T480-120Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="queue_play_next"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m780-60-60-60%20120-120-120-120%2060-60%20180%20180L780-60Zm-460-60v-80H160q-33%200-56.5-23.5T80-280v-480q0-33%2023.5-56.5T160-840h640q33%200%2056.5%2023.5T880-760v280h-80v-280H160v480h520v80h-80v80H320Zm120-240h80v-120h120v-80H520v-120h-80v120H320v80h120v120Zm-280%2080v-480%20480Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="quiz"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M560-360q17%200%2029.5-12.5T602-402q0-17-12.5-29.5T560-444q-17%200-29.5%2012.5T518-402q0%2017%2012.5%2029.5T560-360Zm-30-128h60q0-29%206-42.5t28-35.5q30-30%2040-48.5t10-43.5q0-45-31.5-73.5T560-760q-41%200-71.5%2023T446-676l54%2022q9-25%2024.5-37.5T560-704q24%200%2039%2013.5t15%2036.5q0%2014-8%2026.5T578-596q-33%2029-40.5%2045.5T530-488ZM320-240q-33%200-56.5-23.5T240-320v-480q0-33%2023.5-56.5T320-880h480q33%200%2056.5%2023.5T880-800v480q0%2033-23.5%2056.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33%200-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="refresh"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-160q-134%200-227-93t-93-227q0-134%2093-227t227-93q69%200%20132%2028.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100%200-170%2070t-70%20170q0%20100%2070%20170t170%2070q77%200%20139-44t87-116h84q-28%20106-114%20173t-196%2067Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="remove"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M200-440v-80h560v80H200Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="replay_10"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-80q-75%200-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0%20117%2081.5%20198.5T480-160q117%200%20198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62%2062-56%2058-160-160%20160-160%2056%2058-62%2062h6q75%200%20140.5%2028.5t114%2077q48.5%2048.5%2077%20114T840-440q0%2075-28.5%20140.5t-77%20114q-48.5%2048.5-114%2077T480-80ZM360-320v-180h-60v-60h120v240h-60Zm140%200q-17%200-28.5-11.5T460-360v-160q0-17%2011.5-28.5T500-560h80q17%200%2028.5%2011.5T620-520v160q0%2017-11.5%2028.5T580-320h-80Zm20-60h40v-120h-40v120Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="replay_30"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-80q-75%200-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0%20117%2081.5%20198.5T480-160q117%200%20198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62%2062-56%2058-160-160%20160-160%2056%2058-62%2062h6q75%200%20140.5%2028.5t114%2077q48.5%2048.5%2077%20114T840-440q0%2075-28.5%20140.5t-77%20114q-48.5%2048.5-114%2077T480-80ZM300-320v-60h100v-40h-60v-40h60v-40H300v-60h120q17%200%2028.5%2011.5T460-520v160q0%2017-11.5%2028.5T420-320H300Zm240%200q-17%200-28.5-11.5T500-360v-160q0-17%2011.5-28.5T540-560h80q17%200%2028.5%2011.5T660-520v160q0%2017-11.5%2028.5T620-320h-80Zm20-60h40v-120h-40v120Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="restart_alt"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M440-122q-121-15-200.5-105.5T160-440q0-66%2026-126.5T260-672l57%2057q-38%2034-57.5%2079T240-440q0%2088%2056%20155.5T440-202v80Zm80%200v-80q87-16%20143.5-83T720-440q0-100-70-170t-170-70h-3l44%2044-56%2056-140-140%20140-140%2056%2056-44%2044h3q134%200%20227%2093t93%20227q0%20121-79.5%20211.5T520-122Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="screen_rotation_up"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m550-30-56-57%2073-73H320q-33%200-56.5-23.5T240-240v-407l80%2080v327h247l-73-73%2056-57%20170%20170L550-30Zm170-283-80-80v-327H393l73%2073-56%2057-170-170%20170-170%2056%2057-73%2073h247q33%200%2056.5%2023.5T720-720v407Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="settings"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m370-80-16-128q-13-5-24.5-12T307-235l-119%2050L78-375l103-78q-1-7-1-13.5v-27q0-6.5%201-13.5L78-585l110-190%20119%2050q11-8%2023-15t24-12l16-128h220l16%20128q13%205%2024.5%2012t22.5%2015l119-50%20110%20190-103%2078q1%207%201%2013.5v27q0%206.5-2%2013.5l103%2078-110%20190-118-50q-11%208-23%2015t-24%2012L590-80H370Zm70-80h79l14-106q31-8%2057.5-23.5T639-327l99%2041%2039-68-86-65q5-14%207-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99%2042q-22-23-48.5-38.5T533-694l-13-106h-79l-14%20106q-31%208-57.5%2023.5T321-633l-99-41-39%2068%2086%2064q-5%2015-7%2030t-2%2032q0%2016%202%2031t7%2030l-86%2065%2039%2068%2099-42q22%2023%2048.5%2038.5T427-266l13%20106Zm42-180q58%200%2099-41t41-99q0-58-41-99t-99-41q-59%200-99.5%2041T342-480q0%2058%2040.5%2099t99.5%2041Zm-2-140Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="settings_backup_restore"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-400q-33%200-56.5-23.5T400-480q0-33%2023.5-56.5T480-560q33%200%2056.5%2023.5T560-480q0%2033-23.5%2056.5T480-400Zm0%20280q-139%200-241-91.5T122-440h82q14%20104%2092.5%20172T480-200q117%200%20198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69%200-129%2032t-101%2088h110v80H120v-240h80v94q51-64%20124.5-99T480-840q75%200%20140.5%2028.5t114%2077q48.5%2048.5%2077%20114T840-480q0%2075-28.5%20140.5t-77%20114q-48.5%2048.5-114%2077T480-120Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="skip_next"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M660-240v-480h80v480h-80Zm-440%200v-480l360%20240-360%20240Zm80-240Zm0%2090%20136-90-136-90v180Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="skip_previous"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M220-240v-480h80v480h-80Zm520%200L380-480l360-240v480Zm-80-240Zm0%2090v-180l-136%2090%20136%2090Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="subheader"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M240-560h360v-120H240v120Zm-40%20440q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h560q33%200%2056.5%2023.5T840-760v560q0%2033-23.5%2056.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="sync"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M160-160v-80h110l-16-14q-52-46-73-105t-21-119q0-111%2066.5-197.5T400-790v84q-72%2026-116%2088.5T240-478q0%2045%2017%2087.5t53%2078.5l10%2010v-98h80v240H160Zm400-10v-84q72-26%20116-88.5T720-482q0-45-17-87.5T650-648l-10-10v98h-80v-240h240v80H690l16%2014q49%2049%2071.5%20106.5T800-482q0%20111-66.5%20197.5T560-170Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="sync_disabled"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M792-56%20643-205q-19%2011-39.5%2020T560-170v-84q6-2%2012-4.5t12-5.5L264-584q-11%2025-17.5%2051.5T240-478q0%2045%2017%2087.5t53%2078.5l10%2010v-98h80v240H160v-80h110l-16-14q-49-49-71.5-106.5T160-478q0-45%2011.5-86.5T205-643L56-792l57-57%20736%20736-57%2057Zm-35-263-60-60q11-24%2017-50t6-53q0-45-17-87.5T650-648l-10-10v98h-80v-240h240v80H690l16%2014q49%2049%2071.5%20106.5T800-482q0%2045-11.5%2085.5T757-319ZM379-697l-60-60q19-11%2039-19t42-14v84q-5%202-10.5%204t-10.5%205Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="tab"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M160-240h640v-320H520v-160H160v480Zm0%2080q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h640q33%200%2056.5%2023.5T880-720v480q0%2033-23.5%2056.5T800-160H160Zm0-80v-480%20480Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="table_rows"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M760-200v-120H200v120h560Zm0-200v-160H200v160h560Zm0-240v-120H200v120h560ZM200-120q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h560q33%200%2056.5%2023.5T840-760v560q0%2033-23.5%2056.5T760-120H200Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="undo"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M280-200v-80h284q63%200%20109.5-40T720-420q0-60-46.5-100T564-560H312l104%20104-56%2056-200-200%20200-200%2056%2056-104%20104h252q97%200%20166.5%2063T800-420q0%2094-69.5%20157T564-200H280Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="verified"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m344-60-76-128-144-32%2014-148-98-112%2098-112-14-148%20144-32%2076-128%20136%2058%20136-58%2076%20128%20144%2032-14%20148%2098%20112-98%20112%2014%20148-144%2032-76%20128-136-58-136%2058Zm34-102%20102-44%20104%2044%2056-96%20110-26-10-112%2074-84-74-86%2010-112-110-24-58-96-102%2044-104-44-56%2096-110%2024%2010%20112-74%2086%2074%2084-10%20114%20110%2024%2058%2096Zm102-318Zm-42%20142%20226-226-56-58-170%20170-86-84-56%2056%20142%20142Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="visibility"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-320q75%200%20127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75%200-127.5%2052.5T300-500q0%2075%2052.5%20127.5T480-320Zm0-72q-45%200-76.5-31.5T372-500q0-45%2031.5-76.5T480-608q45%200%2076.5%2031.5T588-500q0%2045-31.5%2076.5T480-392Zm0%20192q-146%200-266-81.5T40-500q54-137%20174-218.5T480-800q146%200%20266%2081.5T920-500q-54%20137-174%20218.5T480-200Zm0-300Zm0%20220q113%200%20207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113%200-207.5%2059.5T128-500q50%20101%20144.5%20160.5T480-280Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="visibility_off"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8%2034.5-12t37.5-4q75%200%20127.5%2052.5T660-500q0%2020-4%2037.5T644-428Zm128%20126-58-56q38-29%2067.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29%200-57%204t-55%2012l-62-62q41-17%2084-25.5t90-8.5q151%200%20269%2083.5T920-500q-23%2059-60.5%20109.5T772-302Zm20%20246L624-222q-35%2011-70.5%2016.5T480-200q-151%200-269-83.5T40-500q21-53%2053-98.5t73-81.5L56-792l56-56%20736%20736-56%2056ZM222-624q-29%2026-53%2057t-41%2067q50%20101%20143.5%20160.5T480-280q20%200%2039-2.5t39-5.5l-36-38q-11%203-21%204.5t-21%201.5q-75%200-127.5-52.5T300-500q0-11%201.5-21t4.5-21l-84-82Zm319%2093Zm-151%2075Z%22%2F%3E%3C%2Fsvg%3E"); }
.material-symbols-outlined[data-icon="warning"] { --icon-svg: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m40-120%20440-760%20440%20760H40Zm138-80h604L480-720%20178-200Zm302-40q17%200%2028.5-11.5T520-280q0-17-11.5-28.5T480-320q-17%200-28.5%2011.5T440-280q0%2017%2011.5%2028.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z%22%2F%3E%3C%2Fsvg%3E"); }
.player-container {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: 100dvh;
  margin-inline: auto;
  background: #000;
}

.player-container.player-container--short {
  aspect-ratio: unset;
  height: calc(100dvh - (var(--control-height) * 5));
  max-height: calc(100dvh - (var(--control-height) * 5));
  width: 100%;
}

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

.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;
  min-height: calc(var(--control-height) * 2);
  height: auto;
}

.btn--large-nav {
  height: 100%;
  box-sizing: border-box;
}

.btn--large-nav .material-symbols-outlined {
  font-size: 24px;
}

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

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

#playlist-next-btn {
  border-left: none;
}

.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 {
  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: 3;
  line-clamp: 3;
  -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;
  box-sizing: border-box;
}

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

.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.from-yt {
  text-decoration: underline dotted;
}

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

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

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

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

.btn.active,
.playlist-btn-group__label.active,
.playlist-btn-group__stats.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 var(--spacing-xs) var(--color-text);
  outline: none;
  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: var(--opacity-disabled);
  cursor: not-allowed;
  background-color: transparent;
}

.progress-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background-color: var(--color-border);
  pointer-events: none;
  z-index: 0;
  transition:
    width 0.2s linear,
    background-color 0.5s ease,
    box-shadow 0.5s ease;
}

.progress-bar__text {
  position: relative;
  z-index: 1;
  color: var(--color-text);
  transition:
    color 0.5s ease,
    text-shadow 0.5s ease;
}

.progress-bar__text.recent-watched {
  text-shadow: 0 0 8px var(--color-text);
  font-weight: bold;
}

.progress-bar__text.recent-unwatched {
  text-shadow: 0 0 8px var(--color-text);
  font-weight: bold;
}

  .paypal-container.svelte-8q001h {
    margin-top: var(--spacing-md);
    min-height: 150px;
    background: #ffffff;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-default);
  }
  .error-message.svelte-8q001h {
    color: var(--color-error, red);
  }

  .user-panel__logged-in.svelte-1hrdbub {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
  }

  .settings-section.svelte-1hrdbub {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }





  .user-panel__btn.svelte-1hrdbub {
    background: none;
    border: 1px solid var(--color-text);
    color: var(--color-text);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-default);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .user-panel__btn.svelte-1hrdbub:hover {
    background-color: var(--color-text);
    color: var(--color-background);
  }

  .user-panel__btn--danger.svelte-1hrdbub {
    color: var(--color-error);
    border-color: var(--color-error);
  }

  .user-panel__btn--danger.svelte-1hrdbub:hover {
    background-color: var(--color-error);
    color: var(--color-background);
  }

  .subscription-section.svelte-1hrdbub {
    border-radius: var(--border-radius-default);
    padding: var(--spacing-md);
    margin: 0;
    background: var(--color-header-bg);
  }

  .pro-status.svelte-1hrdbub {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
  }

  .pro-badge.svelte-1hrdbub {
    background: var(--color-text);
    color: var(--color-background);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-default);
    font-size: var(--font-size-xs);
  }

  .user-panel__hint.svelte-1hrdbub {
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
  }
/* AuthModal scoped additions — extends auth.css BEM partials. */

.auth-main-tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 0;
}

.auth-tab-separator {
  color: var(--color-border);
  opacity: var(--opacity-inactive);
  font-family: var(--font-header);
  font-size: var(--font-size-sm);
  user-select: none;
}

.tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted, #888);
  font-family: var(--font-header);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  padding: var(--spacing-xs) var(--spacing-sm);
  transition: color 0.15s;

  &:first-child {
    padding-left: 0;
  }

  &.active {
    color: var(--color-text, #fff);
  }

  &:hover:not(.active) {
    color: var(--color-text, #fff);
  }
}

.auth-info-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted, #aaa);
  text-align: center;
  line-height: 1.5;
  padding: 0;
  margin-bottom: 0;
  white-space: pre-line;
}

.auth-banner--error {
  color: var(--color-error, #f44);
  font-size: var(--font-size-sm);
  display: block;
  margin-bottom: 0;
}

.auth-modal-content {
  max-height: 90dvh;
  overflow-y: auto;
}

.modal-user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

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

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}

.auth-control-group {
  margin-bottom: 0;
}

.btn--full-width {
  width: 100%;
}

.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: 520px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-height: 85dvh;
  overflow-y: auto;
}

.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;
}

.control-group--border-bottom {
  border-bottom: var(--border-width-default) solid var(--border-color-default);
  padding-bottom: var(--spacing-lg);
  width: 100%;
}

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

.modal-content h3 {
  text-transform: uppercase;
}

/*
.btn:hover {
  background-color: var(--color-text);
  color: var(--color-background);
}
*/

.btn--primary {
  border-color: var(--color-text);
}

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

.btn--danger {
  color: var(--color-error);
  border-color: var(--color-error);
}

.btn--danger:hover {
  background-color: var(--color-error);
  color: var(--color-background);
}



.banner--error {
  color: var(--color-error);
  border-color: var(--color-error);
}

.stepper-btn:hover {
  background-color: var(--color-text);
  border-color: var(--color-text);
  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);
}

#auth-modal-paypal-btn {
  padding: var(--spacing-lg);
  background-color: white;

  border-radius: var(--border-radius-default);
}

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

.cf-turnstile {
  margin-top: var(--spacing-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.sync-inspector-pre {
  background-color: #1a1a1a;
  border: var(--border-width-default) solid var(--color-border);
  padding: var(--spacing-md);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: var(--font-size-sm);
}

.auth-view-header {
  font-family: ui-monospace, monospace;
  text-transform: uppercase;
}

.auth-view-sub-header {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xl);
  opacity: var(--opacity-inactive);
  text-transform: uppercase;
}

.auth-otp-form {
  display: flex;
  justify-content: center;
  width: 100%;
}

.auth-otp-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-md);
}

.auth-otp-container {
  width: 100%;
}

.auth-otp-input {
  letter-spacing: var(--spacing-md);
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-xl);
  text-align: center;
  width: 100%;
  height: 54px;
  padding-left: var(--spacing-sm);
  box-sizing: border-box;
}

.auth-otp-action-row {
  width: 100%;
}

.auth-otp-secondary-row {
  display: flex;
  gap: var(--spacing-md);
  width: 100%;
}

/* Auth Modal Layout Additions */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--spacing-lg) 0;

  font-size: var(--font-size-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: var(--border-width-default) solid var(--color-border);
}

.auth-divider span {
  padding: 0 var(--spacing-md);
  opacity: var(--opacity-inactive);
}

.auth-email-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-md);
}

.auth-field-group {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
}

.auth-field-label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: 500;
}

.auth-email-group .search-container__input,
.auth-field-group .search-container__input {
  width: 100%;
  /* Reset specific padding meant for the top-bar search */
  padding-right: var(--spacing-md);
}

.auth-password-row {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  width: 100%;
}

.auth-password-row > .search-container__input {
  flex: 1;
  min-width: 0;
}

.auth-confirm-container {
  flex: 1;
  min-width: 0;
}

.auth-confirm-container .search-container__input {
  width: 100%;
}

.auth-forgot-container-inline {
  text-align: left;
  font-size: var(--font-size-sm);
}

.auth-forgot-container-inline a {
  font-size: var(--font-size-sm);
  opacity: var(--opacity-inactive);
  color: var(--color-text-muted, #888);
  transition: opacity 0.2s;
  text-decoration: none;
}

.auth-forgot-container-inline a:hover {
  opacity: 1;
  text-decoration: underline;
}

.auth-action-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-md);
  align-items: center;
  width: 100%;
}

.auth-divider-inline {
  font-size: var(--font-size-sm);
  opacity: var(--opacity-inactive);
  text-transform: uppercase;
  font-weight: bold;
}

.auth-mode-toggle-container {
  text-align: center;
  font-size: var(--font-size-sm);
  margin-top: 0;
  color: var(--color-text);
}

.auth-mode-toggle-container a {
  color: var(--color-text);
  font-weight: bold;
  margin-left: var(--spacing-sm);
}

.auth-mode-toggle-container a:hover {
  text-decoration: underline;
}

.auth-btn-row {
  display: flex;
  gap: var(--spacing-md);
}

.auth-btn-row .btn {
  flex: 1;
}

.auth-controls {
  margin-top: var(--spacing-xl);
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.auth-resend-btn {
  font-size: var(--font-size-sm);
}

.auth-back-btn {
  font-size: var(--font-size-sm);
  opacity: var(--opacity-disabled);
}

.app-toast {
  position: fixed;
  bottom: var(--toast-bottom-spacing);
  left: 50%;
  transform: translateX(-50%);
  background: var(--toast-bg-color);
  color: var(--toast-text-color);
  padding: var(--toast-padding);
  border-radius: var(--toast-border-radius);
  opacity: 0;
  transition: var(--toast-opacity-transition);
  pointer-events: none;
  z-index: var(--toast-z-index);
}

.visually-hidden {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

#station-verification-icon {
  font-size: 1em;
  vertical-align: text-bottom;

  --icon-color: var(--color-text);
  color: var(--icon-color);
  opacity: var(--opacity-inactive);
}

#station-verification-icon.status-match {
  --icon-color: #50fa7b;
  /* Green */
  opacity: 1;
}

#station-verification-icon.status-mismatch {
  --icon-color: #ff5555;
  /* Red */
  opacity: 1;
}

/* ANCHOR: Footer Styles */
.app-footer.svelte-1sr6y3t {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md) var(--spacing-md);
  font-size: var(--font-size-sm);
  line-height: var(--control-height);
  color: var(--color-border);
}

.app-footer.svelte-1sr6y3t a:where(.svelte-1sr6y3t) {
  color: var(--color-border);
  text-decoration: none;
  margin: 0 var(--spacing-sm);
  opacity: var(--opacity-inactive);
}
.app-footer.svelte-1sr6y3t a:where(.svelte-1sr6y3t):hover {
  opacity: 1;
}

.footer-station-status.svelte-1sr6y3t {
  font-size: var(--font-size-md);
  vertical-align: middle;
}

.footer-stats-info.svelte-1sr6y3t {
  font-size: var(--font-size-sm);
  color: var(--color-border);
  opacity: var(--opacity-inactive);
}

.btn-copy-station.svelte-1sr6y3t {
  background: none;
  border: none;
  padding: 0;
  margin: 0 var(--spacing-xs);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: text-bottom;
  opacity: var(--opacity-inactive);
}
.btn-copy-station.svelte-1sr6y3t:hover {
  opacity: 1;
}

#footer-station-status.svelte-1sr6y3t .footer-station-icon:where(.svelte-1sr6y3t) {
  vertical-align: text-bottom;
}

.footer-station-icon.status-mismatch.svelte-1sr6y3t {
  color: var(--color-error);
}

  .cloud-sync-status.svelte-yv56yh {
    font-size: var(--font-size-sm);
    color: var(--color-border);
    white-space: nowrap;
  }

  .settings-modal-content.svelte-182y78p {
    gap: var(--spacing-md);
    overflow-x: hidden;
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
  }

  .settings-modal-content.svelte-182y78p h2:where(.svelte-182y78p) {
    margin: 0;
  }

  .settings-modal-content.svelte-182y78p h3:where(.svelte-182y78p) {
    margin: var(--spacing-lg) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    font-family: var(--font-header);
    letter-spacing: 0.5px;
  }

  .saved-csvs-list.svelte-182y78p {
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
  }

  .saved-csv-row.svelte-182y78p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }

  .saved-csv-label.svelte-182y78p {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--font-size-xs);
  }

  .saved-csv-name.svelte-182y78p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-xs);
  }

  .saved-csv-id.svelte-182y78p {
    opacity: var(--opacity-inactive);
  }

  .csv-config-group.svelte-182y78p {
    width: 100%;
    box-sizing: border-box;
  }

  .csv-check-row.svelte-182y78p {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
  }

  .settings-container__textarea.svelte-182y78p {
    width: 100%;
    box-sizing: border-box;
  }

  .control-group.svelte-182y78p {
    width: 100%;
    box-sizing: border-box;
    gap: var(--spacing-md);
    margin: 0;
  }

  .settings-footer.svelte-182y78p {
    margin-top: 0;
  }

/* Yellow bg / blue text panel — matches master .channel-panel rule */
#tv-mode-container .panel.channel-panel {
  background-color: var(--panel-bg);
  color: var(--panel-text);
  width: 16rem;
  height: 100%;
  right: 0;
  top: 0;
  padding: var(--padding-size) 0;
  display: flex;
  flex-direction: column;
}

#tv-mode-container #tv-channel-panel-list {
  margin-top: var(--spacing-md);
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto; /* Re-enable pointer events for scrolling */
}

.channel-list-item.svelte-1e3bi5t {
  padding: var(--spacing-md) var(--padding-size);
  font-size: var(--font-size-md);
  cursor: pointer;
  border-radius: 0;
  transition: background-color 0.1s ease;
}

.channel-list-item.svelte-1e3bi5t:hover {
  background-color: rgba(255, 255, 0, 0.1);
}

.channel-list-item.active.svelte-1e3bi5t {
  background-color: var(--panel-text);
  color: var(--panel-bg);
  font-weight: bold;
}

.channel-list-item.svelte-1e3bi5t span:where(.svelte-1e3bi5t) {
  font-weight: bold;
  margin-right: var(--spacing-md);
}

.guide-panel.svelte-g7hgg5 {
  width: 100%;
  top: auto; /* Pin to bottom */
  bottom: 0;
  height: auto; /* Dynamic height based on content */
  max-height: 100%; /* 100% if want autoscroll on android tv browser */
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.guide-layout-new.svelte-g7hgg5 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: var(--font-size-sm);
}

.guide-main-content.svelte-g7hgg5 {
  flex-grow: 1;
  overflow: auto;
  position: relative;
}

.guide-grid-wrapper.svelte-g7hgg5 {
  position: relative;
}

.guide-channels-col-sticky.svelte-g7hgg5 {
  width: var(--guide-channel-col-width);
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 4;
  background: linear-gradient(
    to right,
    var(--panel-bg) 0%,
    var(--panel-bg) 75%,
    transparent 100%
  );
}

.guide-programs-grid.svelte-g7hgg5 {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  mask-image: linear-gradient(
    to right,
    transparent 0px,
    transparent var(--guide-channel-col-width),
    black calc(var(--guide-channel-col-width) + 30px),
    black 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0px,
    transparent var(--guide-channel-col-width),
    black calc(var(--guide-channel-col-width) + 30px),
    black 100%
  );
}

.guide-channel-header.svelte-g7hgg5 {
  padding: var(--spacing-sm) var(--spacing-md);
  height: 40px;
  border-top: var(--border-width-default) solid var(--panel-text);

  cursor: pointer;
  display: flex;
  align-items: center;
}

.guide-channel-header__text.svelte-g7hgg5 {
  background-color: var(--panel-text);
  color: var(--panel-bg);
  padding: 0 var(--spacing-sm);
}

.guide-channel-header.svelte-g7hgg5:hover {
  background-color: rgba(255, 255, 0, 0.1);
}

.guide-row-wrapper.svelte-g7hgg5 {
  border-top: var(--border-width-default) solid var(--panel-text);
  height: 40px;
  box-sizing: border-box;
}

.guide-channel-header.svelte-g7hgg5:last-child,
.guide-row-wrapper.svelte-g7hgg5:last-child {
  border-bottom: var(--border-width-default) solid var(--panel-text);
}

.guide-program-row.svelte-g7hgg5 {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}

.guide-program.svelte-g7hgg5 {
  flex-shrink: 0;
  border-left: var(--border-width-default) solid var(--panel-text);
  padding: 0 var(--spacing-xs);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
}

.guide-channel-header.active-channel.svelte-g7hgg5 {
  background-color: var(--panel-text);
  color: var(--panel-bg);
}

.guide-program.active-program.svelte-g7hgg5 {
  background-color: var(--panel-text);
  color: var(--panel-bg);
}

.guide-program.program-expanded.svelte-g7hgg5 {
  line-height: 40px;
}

.guide-program-spacer.svelte-g7hgg5 {
  flex-grow: 1;
  border-right: var(--border-width-default) solid var(--panel-text);
}

.guide-top-sticky-row.svelte-g7hgg5 {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  width: 100%;
  height: 30px;
  background-color: var(--panel-bg);
}

.guide-corner-header.svelte-g7hgg5 {
  position: sticky;
  left: 0;
  z-index: 25;
  width: var(--guide-channel-col-width);
  flex-shrink: 0;
  background-color: var(--panel-bg);

  display: flex;
  align-items: center;
  padding: 0 var(--spacing-md);
  font-weight: bold;
  box-sizing: border-box;
}

.guide-timeline-track.svelte-g7hgg5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 20;
  pointer-events: none;

  box-sizing: border-box;
}

.guide-timeline-row.svelte-g7hgg5 {
  display: flex;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  contain: layout style;
}

.guide-time-tick.svelte-g7hgg5 {
  flex-shrink: 0;
  height: 100%;
  border-left: var(--border-width-default) solid var(--panel-text);
  padding-left: var(--spacing-sm);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-weight: bold;
  background-color: var(--panel-bg);
  color: var(--panel-text);
}

.guide-body-wrapper.svelte-g7hgg5 {
  display: flex;
  position: relative;
  width: 100%;
}

.guide-grid-wrapper.svelte-g7hgg5::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0; /* Ensures it spans the entire vertical height */
  left: var(--guide-redline-px, 400px); /* Use EXACT pixel coordinates */
  width: var(--spacing-xs);
  background-color: var(--guide-nowline-color);
  z-index: 30;
  pointer-events: none;
}

/* New CSS animation ticker instead of JS */
@keyframes svelte-g7hgg5-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.ticker-container.svelte-g7hgg5 {
  mask-image: linear-gradient(to right, transparent, black var(--spacing-md), black calc(100% - var(--spacing-md)), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--spacing-md), black calc(100% - var(--spacing-md)), transparent);
}

.ticker-text.svelte-g7hgg5 {
  display: inline-block;
  animation: svelte-g7hgg5-ticker 10s linear infinite;
  animation-delay: 1s;
}

.guide-program.svelte-g7hgg5:hover .ticker-text:where(.svelte-g7hgg5) {
  animation-play-state: running;
}

  #tv-osd-display.svelte-1vhcc4o {
    position: absolute;
    top: var(--spacing-xl);
    left: var(--spacing-xl);
    color: var(--accent-color);
    text-shadow:
      1px 1px 0 rgba(0, 0, 0, 0.25),
      -1px -1px 0 rgba(0, 0, 0, 0.25),
      1px -1px 0 rgba(0, 0, 0, 0.25),
      -1px 1px 0 rgba(0, 0, 0, 0.25),
      0 0 var(--spacing-xs) var(--accent-color),
      0 0 var(--spacing-sm) var(--accent-color);
    z-index: 28;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease-in-out,
      visibility 0s 0.3s;
    pointer-events: none;
    white-space: pre-wrap;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

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

  #tv-osd-display.svelte-1vhcc4o > div:where(.svelte-1vhcc4o) {
    padding: 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #tv-osd-display.svelte-1vhcc4o .osd-channel-line:where(.svelte-1vhcc4o) {
    font-size: var(--font-size-xl);
    font-weight: bold;
    line-height: 0.95;
  }

  #tv-osd-display.svelte-1vhcc4o .osd-title-line:where(.svelte-1vhcc4o) {
    font-size: var(--font-size-lg);
    color: var(--accent-color);
    line-height: 0.95;
  }

  #tv-osd-display.svelte-1vhcc4o .osd-author-line:where(.svelte-1vhcc4o) {
    font-size: var(--font-size-md);
    opacity: var(--opacity-inactive);
    color: var(--accent-color);
    line-height: 0.95;
  }

  #tv-osd-display.svelte-1vhcc4o .osd-message-line:where(.svelte-1vhcc4o) {
    font-size: var(--font-size-xl);
    line-height: 0.95;
  }

  .remote-container.svelte-14r9qhj {
    /* background-color: var(--color-background-remote); */
    padding: var(--padding-size);
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow-y: auto;
  }

  .button-grid.svelte-14r9qhj {
    display: grid;
    gap: var(--gap-size);
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }

  .button.svelte-14r9qhj {
    background-color: transparent;
    color: var(--color-text-button);
    font-family: var(--main-font);

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

  .button.svelte-14r9qhj:hover {
    color: var(--accent-color);
  }

  .button.svelte-14r9qhj:active {
    transform: scale(0.95);
  }

  .button.active.svelte-14r9qhj {
    color: var(--accent-color);
  }

  .toggle-group.svelte-14r9qhj {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--button-border-radius);
    overflow: hidden;
  }

  .toggle-group.svelte-14r9qhj .button:where(.svelte-14r9qhj) {
    flex-grow: 1;
    aspect-ratio: unset;
    border-radius: 0;
  }

  #tv-remote-grid.svelte-14r9qhj .toggle-group-vol:where(.svelte-14r9qhj) {
    grid-column: 1;
    grid-row: 5 / span 2;
  }

  #tv-remote-grid.svelte-14r9qhj .toggle-group-ch:where(.svelte-14r9qhj) {
    grid-column: 3;
    grid-row: 5 / span 2;
  }

  #tv-remote-grid.svelte-14r9qhj .button-last-ch:where(.svelte-14r9qhj) {
    grid-column: 2;
    grid-row: 5;
  }

  #tv-remote-grid.svelte-14r9qhj .button-settings:where(.svelte-14r9qhj) {
    grid-column: 2;
    grid-row: 6;
  }

  #tv-promo-container.svelte-14r9qhj {
    margin-top: var(--gap-size);
    font-size: var(--font-size-sm);
    color: var(--color-text-button);
    opacity: var(--opacity-disabled);
    border: var(--border-width-default) solid
      var(--color-background-button-hover);
    border-radius: var(--button-border-radius);
    padding: var(--spacing-md);
    text-align: center;
    line-height: 1.2;
    width: 100%;
    box-sizing: border-box;
  }

  .remote-container.compact-mode.svelte-14r9qhj .button-grid:where(.svelte-14r9qhj) {
    display: flex;
    flex-direction: column;
  }

  .remote-container.compact-mode.svelte-14r9qhj .button:where(.svelte-14r9qhj) {
    display: none;
  }

  .remote-container.compact-mode.svelte-14r9qhj .tv-btn-guide-toggle:where(.svelte-14r9qhj),
  .remote-container.compact-mode.svelte-14r9qhj #tv-btn-remote-toggle:where(.svelte-14r9qhj),
  .remote-container.compact-mode.svelte-14r9qhj .tv-btn-channel-toggle:where(.svelte-14r9qhj),
  .remote-container.compact-mode.svelte-14r9qhj #tv-btn-power:where(.svelte-14r9qhj),
  .remote-container.compact-mode.svelte-14r9qhj .toggle-group-vol:where(.svelte-14r9qhj),
  .remote-container.compact-mode.svelte-14r9qhj .toggle-group-ch:where(.svelte-14r9qhj) {
    display: flex;
  }

  .remote-container.compact-mode.svelte-14r9qhj .toggle-group:where(.svelte-14r9qhj) .button:where(.svelte-14r9qhj) {
    display: flex;
  }

  .remote-container.compact-mode.svelte-14r9qhj #tv-promo-container:where(.svelte-14r9qhj) {
    display: none;
  }

  .remote-container.compact-mode.svelte-14r9qhj .toggle-group:where(.svelte-14r9qhj) {
    aspect-ratio: 1 / 2;
  }

  /* Compact Mode Order */
  .remote-container.compact-mode.svelte-14r9qhj .toggle-group-vol:where(.svelte-14r9qhj) {
    order: 1;
  }

  .remote-container.compact-mode.svelte-14r9qhj #tv-btn-guide:where(.svelte-14r9qhj) {
    order: 2;
  }

  .remote-container.compact-mode.svelte-14r9qhj #tv-btn-channel:where(.svelte-14r9qhj) {
    order: 3;
  }

  .remote-container.compact-mode.svelte-14r9qhj .toggle-group-ch:where(.svelte-14r9qhj) {
    order: 4;
  }

  .remote-container.compact-mode.svelte-14r9qhj #tv-btn-power:where(.svelte-14r9qhj) {
    order: 5;
  }

  .remote-container.compact-mode.svelte-14r9qhj #tv-btn-remote-toggle:where(.svelte-14r9qhj) {
    order: 6;
  }

  .remote-container.svelte-14r9qhj:not(.compact-mode) #tv-btn-remote-toggle:where(.svelte-14r9qhj) {
    grid-column: 1 / -1;
    aspect-ratio: unset;
  }

  /* The last row buttons in full mode should be normal size 1x1 */
  .remote-container.svelte-14r9qhj:not(.compact-mode) #tv-btn-remote-toggle:where(.svelte-14r9qhj),
  .remote-container.svelte-14r9qhj:not(.compact-mode) #tv-btn-power:where(.svelte-14r9qhj),
  .remote-container.svelte-14r9qhj:not(.compact-mode) #tv-btn-channel:where(.svelte-14r9qhj) {
    grid-column: auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .remote-container.svelte-14r9qhj:not(.compact-mode) #tv-btn-fav-1:where(.svelte-14r9qhj),
  .remote-container.svelte-14r9qhj:not(.compact-mode) #tv-btn-fav-2:where(.svelte-14r9qhj) {
    display: none;
  }

  #tv-btn-reshuffle.svelte-14r9qhj {
    font-family: inherit;
  }

/* Prefixed with #tv-mode-container (global) to match master tv.css specificity
   and win the cascade. Plain .panel rules get Svelte-hashed and lose to the
   shared base. The guide-panel override lives in TvGuide.svelte. */
#tv-mode-container .panel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%; /* Default for settings/channels */
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  /* RESTORED: slide from right */
  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 .panel.visible {
  visibility: visible;
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0s;
  pointer-events: auto;
}

/* Settings panel sizing — overrides the .panel base width:100% */
#tv-mode-container .settings-panel {
  width: 16rem;
  padding: var(--padding-size);
  overflow-y: auto;
  font-family: var(--font-main);
}



.settings-list.svelte-s3yo38 {
  margin-top: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.setting-item.svelte-s3yo38 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  font-size: var(--font-size-md);
}

.setting-item.svelte-s3yo38 label:where(.svelte-s3yo38) {
  font-weight: 600;
}

.setting-item.svelte-s3yo38 input[type='text']:where(.svelte-s3yo38),
.setting-item.svelte-s3yo38 input[type='number']:where(.svelte-s3yo38) {
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--panel-text);
  border: var(--border-width-default) solid var(--panel-text);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-md);
  width: 100%;
  font-family: 'VT323', monospace;
  box-sizing: border-box;
  font-size: var(--font-size-md);
  height: var(--button-size-normal);
}

.button-group.svelte-s3yo38 {
  display: flex;
  gap: var(--spacing-md);
}

.button-group.svelte-s3yo38 .option-btn:where(.svelte-s3yo38) {
  flex: 1;
  padding: var(--spacing-md);
  background-color: transparent;
  border: var(--border-width-default) solid var(--panel-text);
  color: var(--panel-text);
  cursor: pointer;
  border-radius: var(--border-radius-default);
  transition: background-color 0.1s ease;
}

.button-group.svelte-s3yo38 .option-btn:where(.svelte-s3yo38):hover {
  background-color: rgba(255, 255, 0, 0.1);
}

.button-group.svelte-s3yo38 .option-btn.active:where(.svelte-s3yo38) {
  background-color: var(--panel-text);
  color: var(--panel-bg);
  font-weight: bold;
}





.setting-item--inline.svelte-s3yo38 > label:where(.svelte-s3yo38) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.setting-item.svelte-s3yo38 input[type='checkbox']:where(.svelte-s3yo38) {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3);
  border: var(--border-width-default) solid var(--panel-text);
  border-radius: var(--border-radius-default);
  display: flex;
  align-items: center;
  justify-content: center;
}

.setting-item.svelte-s3yo38 input[type='checkbox']:where(.svelte-s3yo38):checked {
  background-color: transparent;
  border-color: var(--panel-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23ffff00'%3E%3Cpath d='M400-304 240-464l56-56 104 104 264-264 56 56-320 320Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--font-size-md) var(--font-size-md);
}



  #tv-mode-container.svelte-kz4plw {
    /* Layout — must be fullscreen fixed to match master tv-ui.js */
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;

    /* Theme tokens — hardcoded to prevent cyclic var() in Svelte scoped styles */
    --button-size-normal: 2.5rem;
    --button-size-compact: 2.5rem;
    --button-font-size: var(--font-size-md);
    --gap-size: var(--spacing-md);
    --padding-size: var(--spacing-md);
    --button-border-radius: var(--border-radius-default);
    --panel-transition-speed: 0.3s;
    --color-background-main: #000000;
    --color-background-layout: #111111;
    --color-background-remote: #222222;
    --color-background-player: #000000;
    --color-background-button: #222222;
    --color-background-button-hover: #4a4a4a;
    --color-background-button-active: #4a4a4a;
    --color-text-player: #e0e0e0;
    --color-text-button: #e0e0e0;
    /* Blue/yellow TV theme (matches master src/tv.css) */
    --panel-bg: rgba(0, 31, 63, 0.75);
    --panel-text: #ffff00;
    --accent-color: #00ff00;
    --guide-nowline-color: #ff5555;
    --guide-channel-col-width: 12.5rem;
    --main-font: 'VT323', monospace;

    /* Yellow text cascades to all TV elements */
    color: var(--panel-text);
    font-family: var(--main-font);
    background-color: var(--color-background-main);
  }

  #tv-mode-container.svelte-kz4plw :where(.svelte-kz4plw) {
    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: var(--font-size-sm);
    padding: 0 var(--spacing-xs);
  }

  #tv-mode-container.svelte-kz4plw .layout-container:where(.svelte-kz4plw) {
    display: flex;
    gap: var(--gap-size);
    width: 100dvw;
    height: 100%; /* IMPORTANT FOR HIDING MOBILEBAR VIA REMOTE SCROLL */
    max-width: 100%;
    position: relative;
    cursor: default;
    padding: var(--padding-size);
    box-sizing: border-box;
  }

  #tv-mode-container.svelte-kz4plw .play-container:where(.svelte-kz4plw) {
    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.svelte-kz4plw .yt-player:where(.svelte-kz4plw) {
    background-color: var(--color-background-player);
    color: var(--color-text-player);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--font-size-md) * 1.5);
    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-crt-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 26;
    display: none;
    pointer-events: none;
  }
  .tv-crt-backdrop.visible {
    display: block;
  }
  .tv-crt-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    z-index: 27;
    pointer-events: none;
    display: none;
    filter: brightness(0.6) contrast(1.6);
    background: #000;
  }
  .tv-crt-canvas.visible {
    display: block;
  }

  #tv-mode-container.svelte-kz4plw .remote-wrapper:where(.svelte-kz4plw) {
    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.svelte-kz4plw .remote-wrapper.compact-mode:where(.svelte-kz4plw) {
    width: calc(var(--button-size-compact) + (var(--padding-size) * 2));
  }

  .tv-transition-overlay.svelte-1n46o8q {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 9999;
  }
  /* Hide .layout in TV mode without unmounting it (matches master's CSS-hide
     pattern). display:none also stops the persistent players' audio, so no mute
     is needed on enter. */
  .layout--hidden.svelte-1n46o8q {
    display: none;
  }