:root {
  --bg-dark: #000000;
  --bg-gradient: #000000;
  --surface-1: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.09);
  --surface-card: #080911;
  --surface-hover: #121524;
  --border-glass: rgba(255, 255, 255, 0.14);
  --border-glass-hover: rgba(0, 240, 214, 0.85);
  --text-primary: #ffffff;
  --text-secondary: #e2e5f5;
  --text-muted: #a0a6c6;
  --neon-cyan: #00f0d6;
  --neon-pink: #ff2d78;
  --neon-orange: #ff7700;
  --neon-gold: #ffb800;
  --neon-purple: #8555ff;
  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 26px rgba(0, 240, 214, 0.42);
  --focus-glow: 0 0 0 3.5px #00f0d6, 0 0 28px rgba(0, 240, 214, 0.85);
  --transition-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: #000000;
  background: #000000;
  color: var(--text-primary);
  font-family: var(--font-main);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#app-root {
  width: 100%;
  height: 100%;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  transition: filter 0.15s ease-out;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

input {
  font-family: inherit;
  color: inherit;
  border: none;
  outline: none;
}

.tv-focus,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3.5px #00f0d6, 0 0 30px rgba(0, 240, 214, 0.9), 0 8px 24px rgba(0, 0, 0, 0.75) !important;
  border-color: #00f0d6 !important;
  transform: scale(1.05) translateY(-2px);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.18s ease;
  z-index: 25;
}

input.tv-focus,
input:focus-visible {
  transform: none !important;
  box-shadow: 0 0 0 2.5px #00f0d6, 0 0 18px rgba(0, 240, 214, 0.5) !important;
}

.user-badge-change:focus,
.user-badge-change.tv-focus {
  outline: none !important;
  color: #00e5cc !important;
  background: rgba(0, 229, 204, 0.3) !important;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 14px rgba(0, 229, 204, 0.7) !important;
  padding: 2px 8px;
  display: inline-block;
}

.pin-toggle-btn.tv-focus,
.pin-toggle-btn:focus-visible {
  outline: none !important;
  background: rgba(0, 229, 204, 0.3) !important;
  border-color: #00e5cc !important;
  box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 16px rgba(0, 229, 204, 0.7) !important;
  transform: scale(1.1) !important;
}

.pin-chip.tv-focus,
.pin-chip:focus-visible {
  outline: none !important;
  background: rgba(0, 229, 204, 0.25) !important;
  border-color: #00e5cc !important;
  box-shadow: 0 0 0 3px var(--neon-cyan), 0 0 25px rgba(0, 229, 204, 0.7) !important;
  transform: scale(1.06) translateY(-2px) !important;
}

.login-renew-btn.tv-focus,
.login-renew-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px #ff9900, 0 0 25px rgba(255, 153, 0, 0.7) !important;
  transform: scale(1.04) translateY(-2px) !important;
}

.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
  z-index: 1;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  background: #140936 radial-gradient(circle at 75% 30%, #7c3aed 0%, #3b82f6 30%, #1e1b4b 65%, #08061e 100%) !important;
  background-image: url('../assets/app_bg.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  overflow: hidden;
  margin: 0;
  padding: 0;
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#splash-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  display: block;
}


.splash-mobile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.splash-content-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  animation: splashPulse 2.4s infinite ease-in-out;
}

.splash-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.splash-logo-box {
  width: 78px;
  height: 78px;
  min-width: 78px;
  min-height: 78px;
  padding: 6px;
  background: linear-gradient(135deg, #1c1448 0%, #0c0824 100%);
  border-radius: 20px;
  border: 1.6px solid #00e5cc;
  box-shadow: 0 0 20px rgba(0, 229, 204, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.splash-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

.splash-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}

.splash-vstar-text {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1;
  background: linear-gradient(135deg, #fff3b0 0%, #ffd700 50%, #ff9e00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.splash-tvbox-badge {
  padding: 3px 14px;
  background: rgba(0, 229, 204, 0.1);
  border: 1.2px solid #00e5cc;
  border-radius: 6px;
  color: #00e5cc;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 3.5px;
  box-shadow: 0 0 12px rgba(0, 229, 204, 0.25);
}

.splash-tamil-text {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1.2px;
  text-shadow: 0 0 16px rgba(0, 229, 204, 0.8), 0 2px 8px rgba(0, 0, 0, 0.8);
  margin-top: 2px;
}

.splash-version-badge {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  left: max(20px, env(safe-area-inset-left, 20px));
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  pointer-events: none;
  z-index: 3;
}

.splash-loader-bar {
  width: min(300px, 78vw);
  height: 5px;
  background: rgba(255, 255, 255, 0.16);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}

.splash-loader-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #00ff87, #00e5cc, #00b4d8, #7c4dff);
  box-shadow: 0 0 16px rgba(0, 229, 204, 0.9);
  border-radius: var(--radius-full);
  animation: splashProgress 4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.splash-pill-version {
  display: none !important;
}

@keyframes splashProgress {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }

  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes splashPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

@media (orientation: portrait), (max-width: 959px), (max-height: 550px) {
  #splash-screen {
    background: #140936 radial-gradient(circle at 75% 30%, #7c3aed 0%, #3b82f6 30%, #1e1b4b 65%, #08061e 100%) !important;
    background-image: -webkit-image-set(url('../assets/app_bg.webp') 1x, url('../assets/app_bg.png') 1x), url('../assets/app_bg.webp'), url('../assets/app_bg.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  .splash-bg-img {
    display: block !important;
  }

  .splash-mobile-content {
    display: flex !important;
  }
}

@media (min-width: 960px) and (orientation: landscape) {
  .splash-logo-box {
    width: 92px;
    height: 92px;
    min-width: 92px;
    min-height: 92px;
    border-radius: 24px;
  }
  .splash-logo-box img {
    border-radius: 16px;
  }
  .splash-vstar-text {
    font-size: 52px;
  }
  .splash-tvbox-badge {
    font-size: 14px;
    letter-spacing: 4px;
    padding: 4px 16px;
  }
  .splash-tamil-text {
    font-size: 24px;
  }
  .splash-loader-bar {
    width: min(360px, 60vw);
    height: 6px;
  }
}

body.is-mobile .splash-mobile-content,
body.mode-mobile-landscape .splash-mobile-content,
body.mode-landscape.is-mobile .splash-mobile-content {
  display: flex !important;
}

body.is-mobile .splash-bg-img,
body.mode-mobile-landscape .splash-bg-img,
body.mode-landscape.is-mobile .splash-bg-img {
  display: block !important;
}

body.is-mobile #splash-screen,
body.mode-mobile-landscape #splash-screen,
body.mode-landscape.is-mobile #splash-screen {
  background: #140936 radial-gradient(circle at 75% 30%, #7c3aed 0%, #3b82f6 30%, #1e1b4b 65%, #08061e 100%) !important;
  background-image: url('../assets/app_bg.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

@media (max-height: 500px) and (max-width: 1024px) {
  .splash-logo-box {
    width: 66px;
    height: 66px;
    min-width: 66px;
    min-height: 66px;
    border-radius: 16px;
    padding: 5px;
  }

  .splash-vstar-text {
    font-size: 34px;
  }

  .splash-tvbox-badge {
    font-size: 11px;
    padding: 2px 10px;
  }

  .splash-tamil-text {
    font-size: 16px;
  }

  .splash-content-inner {
    gap: 10px;
  }

  .splash-pill-version {
    bottom: 12px;
    left: 16px;
    font-size: 10px;
    padding: 2px 10px;
  }
}


#login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top, 20px)) max(16px, env(safe-area-inset-right, 16px)) max(24px, env(safe-area-inset-bottom, 24px)) max(16px, env(safe-area-inset-left, 16px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  background-color: #000000 !important;
  background-image: none !important;
  background: #000000 !important;
}

.login-card {
  width: 100%;
  max-width: min(440px, 94vw);
  margin: auto;
  background: rgba(10, 11, 18, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1.5px solid rgba(0, 240, 214, 0.55);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 4vw, 32px) clamp(16px, 4vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.5vh, 18px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 240, 214, 0.28);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00e5cc, #00b4d8, #7c4dff);
}

.login-logo-circle {
  width: 76px;
  height: 76px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.login-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #00e5cc, #00b4d8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.user-badge-pill {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0, 229, 204, 0.12);
  border: 1px solid rgba(0, 229, 204, 0.35);
  border-radius: var(--radius-full);
  color: #00e5cc;
  font-size: 14px;
  font-weight: 600;
}

.user-badge-change {
  cursor: pointer;
  text-decoration: underline;
  font-size: 12px;
  color: #ffffff;
  margin-left: 6px;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.input-box {
  width: 100%;
  height: 52px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.field-icon {
  position: absolute;
  left: 14px;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.input-box.with-icon {
  padding-left: 44px;
}

.input-box:focus+.field-icon,
.input-icon-wrap:focus-within .field-icon {
  color: #00e5cc;
}

.pin-input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.pin-toggle-btn {
  position: absolute;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--neon-cyan);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pin-toggle-btn:hover {
  background: rgba(0, 229, 204, 0.2);
  border-color: #00e5cc;
}

.input-box:focus {
  border-color: #00e5cc;
  box-shadow: 0 0 16px rgba(0, 229, 204, 0.3);
}

.input-box:-webkit-autofill,
.input-box:-webkit-autofill:hover,
.input-box:-webkit-autofill:focus,
.input-box:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #120e3d inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
}

#manual-pin-input {
  letter-spacing: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

#manual-pin-input::placeholder {
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 400;
}

.login-btn-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

.login-btn {
  flex: 1;
  height: 48px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.login-btn-get {
  background: linear-gradient(135deg, #00e5cc 0%, #0088cc 100%);
  color: #050414;
  box-shadow: 0 4px 16px rgba(0, 229, 204, 0.3);
}

.login-btn-enter {
  background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 180, 216, 0.3);
}

.login-btn-danger {
  background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 71, 87, 0.4);
}

.login-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

.login-status-banner {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.login-status-banner.pending {
  background: rgba(255, 184, 0, 0.12);
  border: 1.2px solid rgba(255, 184, 0, 0.5);
  color: #ffd166;
}

.login-status-banner.approved {
  background: rgba(0, 229, 204, 0.12);
  border: 1.2px solid #00e5cc;
  color: #00e5cc;
}

.login-status-banner a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.pending-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 184, 0, 0.3);
  border-top-color: #ffd166;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

.pin-options-container {
  display: none;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.pin-options-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pin-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.pin-chip {
  height: 56px;
  background: rgba(26, 22, 84, 0.6);
  border: 1.5px solid rgba(0, 229, 204, 0.3);
  border-radius: var(--radius-md);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.pin-chip:hover {
  background: rgba(0, 229, 204, 0.2);
  border-color: #00e5cc;
  box-shadow: 0 0 20px rgba(0, 229, 204, 0.45);
  transform: translateY(-2px) scale(1.03);
}

.manual-pin-container {
  display: none;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.manual-pin-container .login-btn-row {
  margin-top: 14px;
  gap: 12px;
}

.login-error {
  display: none;
  padding: 12px 16px;
  background: rgba(255, 51, 102, 0.15);
  border: 1.2px solid #ff3366;
  border-radius: var(--radius-md);
  color: #ff859f;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
  word-break: break-word;
}

.login-error a {
  color: #00e5cc;
  text-decoration: underline;
  font-weight: 600;
}

.login-renew-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, #ff9900 0%, #ff5500 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.8px;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 100, 0, 0.35);
  transition: all var(--transition-fast);
}

.login-renew-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

@keyframes loginShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-8px);
  }

  40%,
  80% {
    transform: translateX(8px);
  }
}

.login-card.shake {
  animation: loginShake 0.45s ease-in-out;
}

.login-success-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: #1e1b2e;
  border: 1.2px solid #00e5cc;
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 229, 204, 0.3);
  z-index: 10000;
  animation: toastSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

#home-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-header {
  height: calc(64px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(16px, env(safe-area-inset-left, 16px));
  padding-right: max(16px, env(safe-area-inset-right, 16px));
  padding-bottom: 0;
  box-sizing: border-box;
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  z-index: 15;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  order: 1;
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.brand-logo-glow {
  width: 35px;
  height: 35px;
  border-radius: 9px;
  padding: 2px;
  background: #000;
  border: 1px solid rgba(255, 45, 120, 0.5);
  box-shadow: 0 0 12px rgba(255, 45, 120, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, #ffb800 0%, #ff6b00 50%, #ff2d78 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-capsule-bar {
  display: inline-flex;
  align-items: center;
  background: rgba(85, 80, 88, 0.65);
  background: linear-gradient(180deg, rgba(95, 90, 98, 0.72) 0%, rgba(70, 65, 75, 0.68) 100%);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1.5px rgba(255, 255, 255, 0.25);
  padding: 4px 6px;
  gap: 3px;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 1 auto;
  margin: 0 auto;
  min-width: 0;
  z-index: 10;
  order: 2;
}

.nav-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nav-tabs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.nav-tab-btn {
  height: 35px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72) !important;
  border-radius: 9999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  outline: none !important;
  letter-spacing: 0.1px;
}

.nav-tab-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.nav-tab-btn:active {
  transform: scale(0.96) !important;
}

.nav-tab-btn:focus,
.nav-tab-btn:focus-visible {
  outline: none !important;
}

.nav-tab-btn .nav-tab-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.nav-tab-btn .nav-tab-icon svg {
  display: block;
}

.nav-tab-btn.active,
.nav-tab-btn.active:focus,
.nav-tab-btn.active:focus-visible,
.nav-tab-btn.active.tv-focus {
  background: #ffffff !important;
  color: #111111 !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  text-shadow: none !important;
  padding: 0 16px !important;
  transform: none !important;
  outline: none !important;
}

.nav-tab-btn.active .nav-tab-icon {
  display: inline-flex !important;
  color: #111111 !important;
}

.nav-tab-btn.active .nav-tab-icon svg {
  stroke: #111111 !important;
}

.nav-tab-btn.active .nav-tab-label {
  color: #111111 !important;
}

.nav-tab-btn:not(.active).tv-focus {
  background: rgba(0, 229, 204, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #00e5cc !important;
}

.nav-tab-dot {
  display: none !important;
}

.nav-capsule-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 4px;
  flex-shrink: 0;
}

.nav-capsule-btn {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.78) !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  flex-shrink: 0;
  padding: 0;
  outline: none !important;
  box-sizing: border-box;
}

.nav-capsule-btn svg {
  stroke: currentColor;
  display: block;
}

.nav-capsule-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  transform: scale(1.08);
}

.nav-capsule-btn:active {
  transform: scale(0.92);
}

.nav-capsule-btn.tv-focus,
#capsule-search-btn.tv-focus {
  color: #00e5cc !important;
  background: rgba(0, 229, 204, 0.25) !important;
  box-shadow: 0 0 0 2px #00e5cc, 0 0 14px rgba(0, 229, 204, 0.6) !important;
  transform: scale(1.1);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-end;
  order: 3;
}

.header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 16px;
  transition: all var(--transition-fast);
  cursor: pointer;
  flex-shrink: 0;
}

.header-icon-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--neon-cyan);
}

.header-icon-btn.active {
  background: rgba(0, 229, 204, 0.25) !important;
  border-color: var(--neon-cyan) !important;
  color: var(--neon-cyan) !important;
  box-shadow: 0 0 12px rgba(0, 229, 204, 0.4) !important;
}

.pwa-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 0 11px;
  height: 33px;
  border-radius: 16.5px;
  box-shadow: 0 4px 14px rgba(255, 45, 120, 0.45);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  white-space: nowrap;
}

.pwa-install-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 45, 120, 0.65);
  border-color: #ffffff;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  width: 170px;
  transition: all var(--transition-fast);
}

.search-bar:focus-within {
  width: 230px;
  border-color: var(--neon-cyan);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 16px rgba(0, 229, 204, 0.25);
}

.search-input {
  flex: 1;
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 13px;
  padding: 0;
  margin: 0;
  box-shadow: none !important;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.search-input:-webkit-autofill,
.search-input:-webkit-autofill:hover,
.search-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #0a0826 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.osd-clock {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

@media (max-width: 1400px) and (min-width: 821px) {
  .app-header {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }

  .brand-badge {
    gap: 8px;
  }

  .brand-logo-glow {
    width: 36px;
    height: 36px;
  }

  .brand-name {
    font-size: 24px;
    letter-spacing: 1.2px;
  }

  .nav-tabs {
    gap: 5px;
    margin: 0 auto;
    padding: 2px;
  }

  .nav-tab-btn {
    height: 33px;
    padding: 0 10px;
    font-size: 12px;
    gap: 5px;
    flex-shrink: 0;
  }

  .header-right {
    gap: 6px;
  }

  .header-icon-btn {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .pwa-install-btn {
    height: 32px;
    padding: 0 10px;
    font-size: 11px;
    gap: 4px;
  }
}

@media (max-width: 1150px) and (min-width: 821px) {
  .app-header {
    padding-left: 8px;
    padding-right: 8px;
    gap: 6px;
  }

  .brand-name {
    font-size: 22px;
    letter-spacing: 1px;
  }

  .nav-tabs {
    gap: 4px;
    margin: 0 auto;
  }

  .nav-tab-btn {
    height: 31px;
    padding: 0 8px;
    font-size: 11px;
    gap: 4px;
    flex-shrink: 0;
  }

  .header-right {
    gap: 5px;
  }

  .header-icon-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .pwa-install-btn {
    height: 30px;
    padding: 0 8px;
    font-size: 10.5px;
  }

  .osd-clock {
    display: none;
  }
}

.content-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 40px;
}

.content-scroll-area::-webkit-scrollbar {
  width: 6px;
}

.content-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
}

.content-scroll-area.home-fixed-mode {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
}

.content-scroll-area.home-fixed-mode #content-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

.home-fixed-top-section {
  width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  z-index: 10;
  position: relative;
  background: transparent;
}

.home-scroll-bottom-section {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 40px;
  -webkit-overflow-scrolling: touch;
}

.home-scroll-bottom-section::-webkit-scrollbar {
  width: 6px;
}

.home-scroll-bottom-section::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
}

.hero-slider-wrap {
  margin: 14px 24px 10px;
  height: 260px;
  min-height: 200px;
  max-height: 300px;
  border-radius: 16px;
  border: 2px solid rgba(0, 240, 214, 0.65);
  box-shadow: 0 0 32px rgba(0, 240, 214, 0.35), 0 12px 34px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  position: relative;
  background: #070810;
  cursor: pointer;
  flex-shrink: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background-size: cover;
  background-position: center;
}

.hero-slide.active {
  opacity: 1;
}

.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
}

.hero-content {
  position: absolute;
  left: 24px;
  bottom: 18px;
  right: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.hero-tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--neon-pink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.hero-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  letter-spacing: -0.3px;
}

.hero-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.hero-dots-row {
  position: absolute;
  right: 24px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: all 0.2s ease;
}

.hero-dot.active {
  width: 22px;
  border-radius: 8px;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 204, 0.8);
}

.shortcuts-row-container {
  padding: 6px 24px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.shortcut-card {
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #ffffff;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1.8px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  filter: brightness(1.08) saturate(1.1);
  white-space: nowrap;
  padding: 0 4px;
}

.shortcut-card:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 255, 255, 0.35);
  border-color: #ffffff;
  filter: brightness(1.2) saturate(1.15);
}

.shortcut-icon {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.shortcut-icon svg {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  display: block;
}

@media (max-width: 1280px) and (min-width: 769px) {
  .hero-slider-wrap {
    margin: 10px 18px 6px;
    height: 220px;
    border-radius: 14px;
  }

  .hero-title {
    font-size: 19px;
  }

  .hero-subtitle {
    font-size: 11px;
  }

  .shortcuts-row-container {
    padding: 4px 18px 8px;
    gap: 7px;
  }

  .shortcut-card {
    height: 46px;
    font-size: 10px;
    border-radius: 9px;
  }

  .shortcut-icon {
    font-size: 15px;
  }
}

.tv-fullscreen-action-btn {
  width: 100%;
  padding: 13px 20px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #00E5CC 0%, #0077B6 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 18px rgba(0, 229, 204, 0.4);
  transition: all var(--transition-fast);
}

.tv-fullscreen-action-btn:hover,
.tv-fullscreen-action-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 229, 204, 0.6);
  border-color: #ffffff;
  outline: none;
}

.tv-exit-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 8, 38, 0.95);
  border: 1.5px solid var(--neon-cyan);
  box-shadow: 0 0 25px rgba(0, 229, 204, 0.4), 0 8px 30px rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 12px 26px;
  border-radius: var(--radius-full);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.section-wrapper {
  margin-top: 2px;
  margin-bottom: 2px;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  margin-bottom: 2px;
}

.section-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-accent-bar {
  width: 4.5px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffb800 0%, #ff2d78 100%);
  box-shadow: 0 0 12px rgba(255, 107, 0, 0.9);
}

.section-title-text {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}

.section-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-pill-btn {
  padding: 5px 14px;
  border-radius: 12px;
  background: rgba(0, 240, 214, 0.16);
  border: 1.5px solid #00f0d6;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-shadow: 0 0 8px rgba(0, 240, 214, 0.7);
  box-shadow: 0 2px 10px rgba(0, 240, 214, 0.25);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.section-pill-btn:hover {
  background: rgba(0, 240, 214, 0.32);
  border-color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 240, 214, 0.6);
  transform: translateY(-1px);
}

.horizontal-scroll-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 2px 24px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.horizontal-scroll-row::-webkit-scrollbar {
  display: none;
}

.channel-card-item {
  width: 175px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.channel-card-box {
  width: 100%;
  height: 105px;
  background: linear-gradient(145deg, rgba(16, 18, 28, 0.96) 0%, rgba(6, 7, 13, 0.98) 100%);
  border: 1.8px solid rgba(255, 130, 0, 0.85);
  border-radius: 13px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 107, 0, 0.35);
  transition: all var(--transition-smooth);
}

.channel-card-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 65%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

.channel-card-box:hover,
.channel-card-item:focus .channel-card-box {
  transform: translateY(-5px) scale(1.04);
  border-color: #00f0d6;
  box-shadow: 0 0 28px rgba(0, 240, 214, 0.85), 0 10px 28px rgba(0, 0, 0, 0.8);
}

.channel-card-item.tv-focus .channel-card-box {
  transform: translateY(-5px) scale(1.04);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 28px rgba(0, 240, 214, 0.9), 0 10px 28px rgba(0, 0, 0, 0.8);
}

.card-badge-live {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ff1744, #ff5252);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.9);
  z-index: 3;
}

.card-badge-ch {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 240, 214, 0.25);
  border: 1.5px solid #00f0d6;
  color: #00ffff;
  font-size: 10px;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(0, 240, 214, 0.9);
  box-shadow: 0 0 10px rgba(0, 240, 214, 0.4);
  z-index: 3;
}

.card-badge-vod {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, #1565c0, #42a5f5);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  z-index: 2;
}

.card-badge-ep {
  position: absolute;
  bottom: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(0, 229, 204, 0.5);
  color: #00e5cc;
  font-size: 9px;
  font-weight: 800;
  z-index: 2;
}

.card-fav-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  transition: all var(--transition-fast);
  z-index: 3;
}

.card-fav-btn.starred {
  color: #ff2d78;
  filter: drop-shadow(0 0 6px rgba(255, 45, 120, 0.8));
}

.card-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.channel-logo-badge {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-watermark {
  position: absolute;
  right: -10px;
  bottom: -10px;
  opacity: 0.15;
  color: #fff;
  pointer-events: none;
}

.badge-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.badge-monogram {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.badge-pill {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.5px;
}

.card-title-text {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 2px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
  letter-spacing: 0.3px;
}

.poster-card-item {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.poster-card-box {
  width: 100%;
  height: 200px;
  background: linear-gradient(145deg, rgba(16, 18, 28, 0.96) 0%, rgba(6, 7, 13, 0.98) 100%);
  border: 1.8px solid rgba(0, 240, 214, 0.6);
  border-radius: 13px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 240, 214, 0.3);
  transition: all var(--transition-smooth);
}

.poster-card-box:hover {
  transform: translateY(-5px) scale(1.04);
  border-color: #00ffff;
  box-shadow: 0 0 28px rgba(0, 255, 255, 0.85), 0 12px 32px rgba(0, 0, 0, 0.85);
}

.poster-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iptv-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 8px;
}

.iptv-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.iptv-title {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
}

.iptv-count-pill {
  padding: 3px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 45, 120, 0.5);
  background: rgba(255, 45, 120, 0.15);
  color: var(--neon-pink);
  font-size: 12px;
  font-weight: 800;
}

.iptv-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.iptv-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 12px 24px 32px;
}

.iptv-card-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.iptv-card-box {
  width: 100%;
  height: 120px;
  border-radius: 13px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(16, 18, 28, 0.96) 0%, rgba(6, 7, 13, 0.98) 100%);
  border: 1.8px solid rgba(255, 130, 0, 0.85);
  padding: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 107, 0, 0.35);
  transition: all var(--transition-smooth);
}

.iptv-card-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 65%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

.iptv-card-box:hover,
.iptv-card-item:focus .iptv-card-box {
  transform: translateY(-5px) scale(1.04);
  border-color: #00f0d6;
  box-shadow: 0 0 28px rgba(0, 240, 214, 0.85), 0 10px 28px rgba(0, 0, 0, 0.8);
}

.iptv-card-item.tv-focus .iptv-card-box {
  transform: translateY(-5px) scale(1.04);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 28px rgba(0, 240, 214, 0.9), 0 10px 28px rgba(0, 0, 0, 0.8);
}

.iptv-watermark-tv {
  position: absolute;
  right: -10px;
  bottom: -10px;
  font-size: 80px;
  opacity: 0.16;
  color: #ffffff;
  pointer-events: none;
}

.iptv-monogram-text {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.iptv-channel-pill {
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  z-index: 2;
}

.radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px 24px;
}

.radio-card {
  background: linear-gradient(145deg, rgba(16, 18, 28, 0.96) 0%, rgba(6, 7, 13, 0.98) 100%);
  border: 1.8px solid rgba(133, 85, 255, 0.6);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 14px rgba(133, 85, 255, 0.25);
  transition: all var(--transition-fast);
}

.radio-card:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: #00ffff;
  box-shadow: 0 0 24px rgba(0, 255, 255, 0.7), 0 8px 24px rgba(0, 0, 0, 0.7);
}

.radio-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
}

.radio-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.radio-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radio-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}

.radio-wave-bar {
  width: 3px;
  background: var(--neon-cyan);
  border-radius: 2px;
  animation: radioWave 1.2s infinite ease-in-out;
}

.radio-wave-bar:nth-child(1) {
  height: 60%;
  animation-delay: 0.1s;
}

.radio-wave-bar:nth-child(2) {
  height: 100%;
  animation-delay: 0.3s;
}

.radio-wave-bar:nth-child(3) {
  height: 40%;
  animation-delay: 0.2s;
}

.radio-wave-bar:nth-child(4) {
  height: 80%;
  animation-delay: 0.4s;
}

@keyframes radioWave {

  0%,
  100% {
    transform: scaleY(0.4);
  }

  50% {
    transform: scaleY(1);
  }
}

#player-screen {
  background: #000;
}

.video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

#main-video {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
}

.player-zoom-badge {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.82);
  border: 1.5px solid #00E5CC;
  color: #00E5CC;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  z-index: 30;
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 229, 204, 0.35);
}

.player-zoom-badge.visible {
  opacity: 1;
}

#player-screen.simulated-player-landscape .player-zoom-badge {
  top: 60px !important;
}

#main-video.fit-fill,
#player-screen.simulated-player-landscape #main-video.fit-fill {
  object-fit: fill !important;
}

#main-video.fit-contain,
#player-screen.simulated-player-landscape #main-video.fit-contain {
  object-fit: contain !important;
}

#main-video.fit-cover,
#player-screen.simulated-player-landscape #main-video.fit-cover {
  object-fit: cover !important;
}

@media (orientation: portrait) and (max-width: 900px) {
  #player-screen:not(.simulated-player-landscape) .video-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
  }

  #player-screen:not(.simulated-player-landscape) #main-video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
}

body.mode-portrait #player-screen:not(.simulated-player-landscape) .video-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
}

body.mode-portrait #player-screen:not(.simulated-player-landscape) #main-video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.player-connecting-overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #070514;
  z-index: 5;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.connecting-bg-ambient {
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: 0.7;
  pointer-events: none;
}

.connecting-particles-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.connecting-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(1px);
  animation: particleFloat 4s ease-in-out infinite alternate;
}

.connecting-particle.p1 {
  width: 8px;
  height: 8px;
  background: #00e5cc;
  top: 25%;
  left: 20%;
  box-shadow: 0 0 10px #00e5cc;
  animation-duration: 5s;
}

.connecting-particle.p2 {
  width: 6px;
  height: 6px;
  background: #ff5722;
  top: 60%;
  left: 15%;
  box-shadow: 0 0 8px #ff5722;
  animation-duration: 4.2s;
}

.connecting-particle.p3 {
  width: 5px;
  height: 5px;
  background: #d500f9;
  top: 35%;
  left: 28%;
  box-shadow: 0 0 8px #d500f9;
  animation-duration: 6s;
}

.connecting-particle.p4 {
  width: 7px;
  height: 7px;
  background: #ff9800;
  top: 55%;
  right: 22%;
  box-shadow: 0 0 10px #ff9800;
  animation-duration: 4.8s;
}

.connecting-particle.p5 {
  width: 6px;
  height: 6px;
  background: #00e5cc;
  top: 30%;
  right: 18%;
  box-shadow: 0 0 8px #00e5cc;
  animation-duration: 5.5s;
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) scale(0.9);
    opacity: 0.3;
  }

  100% {
    transform: translateY(-16px) scale(1.1);
    opacity: 0.8;
  }
}

.connecting-center-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 90%;
  max-width: 440px;
}

.connecting-glow-circle {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle, #25123a 0%, #0c0822 100%);
  border: 2.5px solid #FF6B00;
  box-shadow: 0 0 24px rgba(255, 107, 0, 0.65), inset 0 0 14px rgba(255, 107, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: connectingCirclePulse 2s ease-in-out infinite alternate;
}

@keyframes connectingCirclePulse {
  0% {
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.4), inset 0 0 8px rgba(255, 107, 0, 0.2);
    transform: scale(0.97);
  }

  100% {
    box-shadow: 0 0 32px rgba(255, 107, 0, 0.85), inset 0 0 20px rgba(255, 107, 0, 0.5);
    transform: scale(1.04);
  }
}

.connecting-cast-icon {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.connecting-progress-bar-wrap {
  width: 100%;
  max-width: 420px;
  height: 5.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.connecting-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF5722 0%, #FF9800 45%, #00E5CC 100%);
  box-shadow: 0 0 14px rgba(0, 229, 204, 0.85);
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.connecting-text-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.connecting-title-text {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.2px;
}

.connecting-percent-text {
  font-size: 14px;
  font-weight: 800;
  color: #00E5CC;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(0, 229, 204, 0.6);
}

.player-osd {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: max(20px, env(safe-area-inset-top, 20px));
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  padding-left: max(24px, env(safe-area-inset-left, 24px));
  padding-right: max(24px, env(safe-area-inset-right, 24px));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88) 0%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.92) 100%);
  transition: opacity 0.3s ease;
  z-index: 10;
  pointer-events: none;
  box-sizing: border-box;
}

.player-osd * {
  pointer-events: auto;
}

.player-osd.hidden {
  opacity: 0;
  pointer-events: none;
}

.player-osd.hidden * {
  pointer-events: none;
}

.player-osd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.osd-channel-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.osd-back-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
}

.osd-back-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.osd-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.osd-channel-name {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.3px;
}

.osd-category-badge {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.2px;
}

.osd-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.osd-circle-action-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
}

.osd-circle-action-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.osd-pill-badge-btn {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(0, 229, 204, 0.12);
  border: 1.5px solid #00E5CC;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
}

.osd-pill-badge-btn:hover {
  background: rgba(0, 229, 204, 0.25);
  box-shadow: 0 0 14px rgba(0, 229, 204, 0.4);
}

.hq-label {
  background: #00E5CC;
  color: #070514;
  font-size: 10px;
  font-weight: 900;
  padding: 1.5px 5px;
  border-radius: 4px;
  margin-right: 6px;
  letter-spacing: 0.5px;
}

.osd-progress-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 16px;
  margin-bottom: 0;
  background: rgba(10, 8, 30, 0.75);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: auto;
  box-sizing: border-box;
}

.osd-time-text {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  min-width: 48px;
  text-align: center;
}

.osd-seek-bar-bg {
  position: relative;
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition: height 0.15s ease;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.osd-seek-bar-bg::before {
  content: '';
  position: absolute;
  top: -16px;
  bottom: -16px;
  left: -8px;
  right: -8px;
  z-index: 1;
}

.osd-seek-bar-bg:hover,
.osd-seek-bar-bg.tv-focus,
.osd-seek-bar-bg.dragging {
  height: 12px;
}

.osd-seek-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
  border-radius: 4px;
  pointer-events: none;
  width: 0%;
}

.osd-seek-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 229, 204, 0.8);
  pointer-events: none;
  transition: transform 0.1s ease;
}

.osd-seek-bar-bg:active .osd-seek-thumb,
.osd-seek-bar-bg.dragging .osd-seek-thumb {
  transform: translate(-50%, -50%) scale(1.3);
}

.player-resume-toast {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13, 11, 46, 0.94);
  border: 1px solid rgba(0, 229, 204, 0.6);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 229, 204, 0.35);
  border-radius: 999px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 900;
  pointer-events: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: resumeToastFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.player-resume-toast svg {
  color: var(--neon-cyan, #00e5cc);
  flex-shrink: 0;
}

@keyframes resumeToastFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.player-double-tap-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 204, 0.32) 0%, rgba(0, 229, 204, 0.08) 55%, transparent 75%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 850;
  pointer-events: none;
  animation: doubleTapPulse 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.player-double-tap-indicator.left {
  left: 10%;
}

.player-double-tap-indicator.right {
  right: 10%;
}

.double-tap-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  gap: 3px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
}

.double-tap-circle svg {
  color: var(--neon-cyan, #00e5cc);
}

.double-tap-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
}

@keyframes doubleTapPulse {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.65);
  }
  35% {
    opacity: 1;
    transform: translateY(-50%) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1.22);
  }
}

.osd-skip-btn {
  margin: 0 4px;
}

.osd-skip-btn:hover {
  color: var(--neon-cyan, #00e5cc);
  border-color: rgba(0, 229, 204, 0.5);
}

.player-osd-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  pointer-events: none;
}

.player-osd-bottom>* {
  pointer-events: auto;
}

.osd-bottom-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.osd-controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.osd-ctrl-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
}

.osd-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--neon-cyan);
}

.osd-pill-btn {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
}

.osd-pill-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.osd-channels-pill {
  border-color: #00E5CC;
  background: rgba(0, 229, 204, 0.1);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.osd-channels-pill:hover {
  background: rgba(0, 229, 204, 0.25);
  box-shadow: 0 0 16px rgba(0, 229, 204, 0.4);
}

.osd-channels-pill svg {
  color: #00E5CC;
}

.osd-live-sync-pill {
  border-color: #ff334b;
  background: rgba(255, 51, 75, 0.15);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.5px;
  gap: 4px;
}

.osd-live-sync-pill:hover,
.osd-live-sync-pill.tv-focus {
  background: rgba(255, 51, 75, 0.35);
  border-color: #ff334b;
  box-shadow: 0 0 16px rgba(255, 51, 75, 0.5);
  transform: scale(1.05);
}

.osd-live-sync-pill .live-dot-pulse {
  color: #ff334b;
  font-size: 13px;
  line-height: 1;
  animation: liveDotPulse 1.2s infinite ease-in-out;
}

@keyframes liveDotPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}

.osd-live-sync-pill.syncing .sync-icon {
  animation: syncRotateAnim 0.7s infinite linear;
}

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

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

.osd-play-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--neon-cyan);
  border: none;
  color: #070514;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 229, 204, 0.5);
  transition: all var(--transition-fast);
}

.osd-play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 28px rgba(0, 229, 204, 0.8);
}

.osd-controls-center {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.osd-play-btn svg,
.osd-ctrl-btn svg,
.osd-pill-btn svg,
.audio-ctrl-btn svg {
  pointer-events: none;
}

.osd-controls-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.poster-fallback-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  background: #0A0826;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.movie-fallback {
  background: radial-gradient(circle at 50% 35%, #18123c 0%, #0A0826 100%);
}

.show-fallback {
  background: radial-gradient(circle at 50% 35%, #161a42 0%, #0A0826 100%);
}

.series-fallback {
  background: radial-gradient(circle at 50% 35%, #102042 0%, #0A0826 100%);
}

.fallback-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.movie-fallback .fallback-icon {
  color: rgba(255, 255, 255, 0.22);
}

.show-fallback .fallback-icon {
  color: rgba(255, 255, 255, 0.22);
}

.series-fallback .fallback-icon {
  color: rgba(0, 240, 255, 0.35);
}

.fallback-title-text {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.5px;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.channel-logo-badge {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}

.badge-watermark {
  position: absolute;
  right: -8px;
  bottom: -8px;
  opacity: 0.16;
  color: #ffffff;
  pointer-events: none;
}

.badge-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
}

.badge-monogram {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  line-height: 1;
  text-transform: uppercase;
}

.badge-pill {
  font-family: 'Outfit', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.4);
  border: 0.8px solid rgba(255, 255, 255, 0.2);
  padding: 1px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.radio-fallback-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8E24AA, #3D5AFE);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(142, 36, 170, 0.4);
  flex-shrink: 0;
}

.music-fallback-badge {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(135deg, #d81b60, #8e24aa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
}

.search-thumb-fallback {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #0A0826;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

.drawer-thumb-fallback {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #00b4d8, #0077b6);
  flex-shrink: 0;
}

.quick-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.quick-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .quick-drawer-backdrop {
    background: rgba(0, 0, 0, 0.15);
  }
}

.quick-drawer {
  position: absolute;
  top: 0;
  right: -340px;
  width: min(340px, 86vw);
  height: 100%;
  background: rgba(8, 9, 14, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1.5px solid rgba(0, 229, 204, 0.3);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 229, 204, 0.15);
  transition: right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.quick-drawer.open {
  right: 0;
}

.drawer-header {
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-glass);
}

.drawer-title {
  font-size: 16px;
  font-weight: 800;
}

.drawer-channel-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.drawer-item:hover,
.drawer-item.active {
  background: rgba(0, 229, 204, 0.15);
  color: var(--neon-cyan);
}

.drawer-item.tv-focus,
.drawer-item:focus-visible {
  background: rgba(0, 229, 204, 0.25) !important;
  color: #00E5CC !important;
  box-shadow: 0 0 0 2px #00E5CC, 0 4px 16px rgba(0, 229, 204, 0.4) !important;
  transform: translateX(-4px);
  outline: none;
}

.drawer-item-img {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.4);
}

.drawer-ch-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0, 229, 204, 0.15);
  border: 1px solid rgba(0, 229, 204, 0.45);
  color: #00e5cc;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  margin-left: auto;
  transition: all var(--transition-fast);
}

.drawer-item:hover .drawer-ch-badge,
.drawer-item.active .drawer-ch-badge {
  background: #00e5cc;
  color: #0c0a20;
  border-color: #00e5cc;
  box-shadow: 0 0 10px rgba(0, 229, 204, 0.4);
}

.drawer-item.tv-focus .drawer-ch-badge,
.drawer-item:focus-visible .drawer-ch-badge {
  background: #00e5cc;
  color: #0c0a20;
  border-color: #00e5cc;
  font-weight: 900;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-backdrop.active {
  display: flex;
}

.modal-card {
  width: 100%;
  max-width: 500px;
  background: linear-gradient(145deg, rgba(14, 16, 26, 0.98) 0%, rgba(6, 7, 12, 0.99) 100%);
  border: 1.5px solid rgba(0, 229, 204, 0.45);
  border-radius: 24px;
  box-shadow: 0 0 45px rgba(0, 229, 204, 0.18), 0 20px 50px rgba(0, 0, 0, 0.85);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 88vh;
  overflow: hidden;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.modal-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-gear-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00e5cc, #00b4d8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0c0a20;
  box-shadow: 0 0 15px rgba(0, 229, 204, 0.4);
}

.modal-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 0;
  color: #ffffff;
  line-height: 1.2;
}

.settings-modal-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  margin-top: 2px;
}

.modal-close-round-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-close-round-btn:hover {
  background: rgba(255, 45, 85, 0.2);
  border-color: #ff2d55;
  color: #ff2d55;
  transform: rotate(90deg);
}

.settings-scroll-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.settings-scroll-body::-webkit-scrollbar {
  width: 5px;
}

.settings-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 204, 0.3);
  border-radius: 10px;
}

.settings-grid-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-grid-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) and (min-height: 561px) {
  #settings-modal .modal-card {
    max-width: min(840px, 92vw);
    max-height: min(600px, 92vh);
    padding: 16px 22px;
    gap: 10px;
  }

  #settings-modal .modal-header {
    padding-bottom: 8px;
  }

  #settings-modal .settings-profile-banner {
    padding: 8px 14px;
    gap: 12px;
    border-radius: 12px;
  }

  #settings-modal .settings-avatar-badge {
    width: 36px;
    height: 36px;
  }

  #settings-modal .settings-avatar-badge svg {
    width: 20px;
    height: 20px;
  }

  #settings-modal .settings-profile-name {
    font-size: 15px;
  }

  #settings-modal .settings-profile-sub {
    font-size: 11px;
  }

  #settings-modal .settings-grid-layout {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 10px 18px;
    align-items: start;
  }

  #settings-modal .settings-grid-col {
    gap: 8px;
  }

  #settings-modal .settings-section-header {
    font-size: 10.5px;
    margin-top: 2px;
    margin-bottom: 2px;
    letter-spacing: 1.2px;
  }

  #settings-modal .settings-brightness-box {
    padding: 8px 12px;
    border-radius: 10px;
  }

  #settings-modal .settings-brightness-title-row {
    margin-bottom: 6px;
  }

  #settings-modal .settings-brightness-control-row {
    margin-bottom: 6px;
  }

  #settings-modal .brightness-step-btn {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }

  #settings-modal .brightness-presets-row {
    gap: 4px;
  }

  #settings-modal .brightness-chip {
    padding: 4px 0;
    font-size: 10px;
  }

  #settings-modal .settings-devices-list {
    max-height: 85px;
    overflow-y: auto;
    gap: 4px;
    padding-right: 2px;
  }

  #settings-modal .device-entry {
    padding: 5px 10px;
    min-height: 28px;
    font-size: 11px;
    border-radius: 7px;
  }

  #settings-modal .subscription-card-box,
  #settings-modal .version-card-box {
    padding: 6px 10px;
    gap: 4px;
    border-radius: 10px;
  }

  #settings-modal .settings-item {
    padding: 5px 10px;
    font-size: 11.5px;
    border-radius: 7px;
  }

  #settings-modal .settings-label,
  #settings-modal .settings-val {
    font-size: 11.5px;
  }

  #settings-modal .sub-status-pill {
    padding: 2px 8px;
    font-size: 10px;
  }

  #settings-modal .settings-renew-link-btn {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 7px;
  }

  #settings-modal .pwa-install-btn {
    padding: 3px 8px;
    font-size: 10.5px;
  }

  #settings-modal .settings-modal-footer {
    margin-top: 2px;
    padding-top: 8px;
  }

  #settings-modal .settings-logout-btn {
    height: 40px;
    font-size: 13px;
    border-radius: 10px;
  }
}

.settings-profile-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(0, 229, 204, 0.08) 0%, rgba(124, 77, 255, 0.12) 100%);
  border: 1px solid rgba(0, 229, 204, 0.25);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.settings-avatar-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c4dff, #00e5cc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 0 18px rgba(124, 77, 255, 0.5);
  flex-shrink: 0;
}

.settings-profile-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-profile-name {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.settings-status-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.settings-status-pill.status-active {
  background: rgba(0, 230, 118, 0.18);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.4);
}

.settings-profile-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.settings-profile-sub strong {
  color: var(--neon-cyan);
}

.settings-section-header {
  font-size: 11px;
  font-weight: 800;
  color: var(--neon-gold);
  letter-spacing: 1.5px;
  margin-top: 6px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-section-header::before {
  content: '';
  width: 3px;
  height: 12px;
  background: var(--neon-gold);
  border-radius: 2px;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.settings-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 229, 204, 0.2);
}

.settings-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--neon-cyan);
}

.status-active {
  color: #00e676;
}

.settings-brightness-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-brightness-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-brightness-control-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brightness-step-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.brightness-step-btn:hover {
  background: rgba(0, 229, 204, 0.3);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

.brightness-range {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  accent-color: var(--neon-cyan);
  cursor: pointer;
}

.brightness-presets-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
}

.brightness-chip {
  flex: 1;
  padding: 5px 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.brightness-chip:hover,
.brightness-chip.active {
  background: rgba(0, 229, 204, 0.25);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 204, 0.3);
}

.settings-devices-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 130px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 204, 0.35) transparent;
  -webkit-overflow-scrolling: touch;
}

.settings-devices-list::-webkit-scrollbar {
  width: 4px;
}

.settings-devices-list::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 204, 0.35);
  border-radius: 4px;
}

.device-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 12px;
  color: #ffffff;
  min-height: 38px;
}

.device-entry.current-device {
  border-color: rgba(0, 229, 204, 0.4);
  background: rgba(0, 229, 204, 0.08);
}

.device-tag {
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0, 229, 204, 0.2);
  color: var(--neon-cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.device-active-badge {
  font-size: 9px;
  font-weight: 800;
  color: #00e5cc;
  background: rgba(0, 229, 204, 0.12);
  border: 1px solid rgba(0, 229, 204, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.subscription-card-box,
.version-card-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 229, 204, 0.25);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}

.sub-status-pill {
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(0, 229, 204, 0.2);
  color: var(--neon-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.settings-modal-footer {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-logout-btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff1744 0%, #d50000 50%, #b71c1c 100%);
  border: 1.5px solid rgba(255, 82, 82, 0.45);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(255, 23, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-transform: uppercase;
}

.settings-logout-btn .logout-icon {
  stroke-width: 2.3;
  transition: transform 0.2s ease;
}

.settings-logout-btn:hover {
  background: linear-gradient(135deg, #ff3366 0%, #ff1744 50%, #c51162 100%);
  box-shadow: 0 8px 28px rgba(255, 23, 68, 0.55), 0 0 16px rgba(255, 82, 82, 0.4);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.6);
}

.settings-logout-btn:hover .logout-icon {
  transform: translateX(3px);
}

.settings-logout-btn:active {
  transform: scale(0.98);
}

.settings-logout-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #ff1744, 0 0 25px rgba(255, 23, 68, 0.8);
}

.confirm-dialog {
  max-width: 380px;
  text-align: center;
  align-items: center;
  padding: 26px;
  border-color: rgba(255, 45, 85, 0.4);
  box-shadow: 0 0 40px rgba(255, 45, 85, 0.25), 0 20px 50px rgba(0, 0, 0, 0.9);
}

.confirm-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 45, 85, 0.15);
  border: 1.5px solid rgba(255, 45, 85, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 0 25px rgba(255, 45, 85, 0.3);
}

.confirm-title {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
}

.confirm-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.confirm-btn-row {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.confirm-cancel-btn {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#logout-confirm-modal {
  z-index: 150;
}

.confirm-cancel-btn:hover,
.confirm-cancel-btn.tv-focus {
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid #00e5cc;
  box-shadow: 0 0 20px rgba(0, 229, 204, 0.6);
  transform: scale(1.04);
}

.confirm-logout-btn {
  flex: 1.2;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff1744 0%, #d50000 100%);
  border: 1px solid rgba(255, 82, 82, 0.5);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 18px rgba(255, 23, 68, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-logout-btn:hover,
.confirm-logout-btn.tv-focus {
  background: linear-gradient(135deg, #ff1744 0%, #ff5252 100%);
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 30px rgba(255, 23, 68, 0.9);
  transform: scale(1.05);
}

.episodes-dialog {
  max-width: 600px;
}

.episodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px;
}

.episode-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.episode-card:hover {
  background: rgba(0, 229, 204, 0.2);
  border-color: var(--neon-cyan);
}

.search-modal-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, #15103a 0%, #07051a 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 1000;
  display: none;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.search-modal-backdrop.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.search-modal-container {
  width: 100%;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 16px 24px 24px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .search-modal-container {
    padding: 12px 14px 20px;
  }
}

.search-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.search-back-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(0, 229, 204, 0.25);
  color: var(--neon-cyan);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.search-back-btn:hover,
.search-back-btn:focus,
.search-back-btn.focused {
  background: rgba(0, 229, 204, 0.18);
  border-color: var(--neon-cyan);
  outline: none;
  box-shadow: 0 0 16px rgba(0, 229, 204, 0.4);
  transform: scale(1.05);
}

.search-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.search-close-btn:hover,
.search-close-btn:focus,
.search-close-btn.focused {
  background: rgba(255, 45, 120, 0.2);
  border-color: var(--neon-pink);
  color: #fff;
  outline: none;
}

.search-modal-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0 16px;
  height: 46px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.search-modal-input-wrap:focus-within {
  border-color: var(--neon-cyan);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 20px rgba(0, 229, 204, 0.28);
}

.search-modal-icon {
  color: var(--neon-cyan);
  margin-right: 12px;
  flex-shrink: 0;
}

.search-modal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  height: 100%;
  min-width: 0;
}

.search-modal-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-clear-btn {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.search-clear-btn:hover {
  background: rgba(255, 45, 120, 0.3);
  color: var(--neon-pink);
}

.search-chips-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
}

.search-chips-bar::-webkit-scrollbar {
  display: none;
}

.search-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  user-select: none;
}

.search-chip:hover,
.search-chip:focus,
.search-chip.focused {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(0, 229, 204, 0.4);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.search-chip.active {
  background: linear-gradient(135deg, #00E5CC 0%, #0077B6 100%);
  border-color: transparent;
  color: #050410;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(0, 229, 204, 0.4);
}

.search-results-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 4px 32px 0;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 204, 0.3) transparent;
}

.search-results-area::-webkit-scrollbar {
  width: 6px;
}

.search-results-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

.search-results-area::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 204, 0.25);
  border-radius: 4px;
}

.search-results-area::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 204, 0.6);
}

.search-section {
  width: 100%;
}

.search-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.search-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-section-icon {
  font-size: 17px;
}

.search-section-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.search-count-pill {
  font-size: 11px;
  font-weight: 800;
  color: #00E5CC;
  background: rgba(0, 229, 204, 0.12);
  border: 1px solid rgba(0, 229, 204, 0.3);
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

.search-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  width: 100%;
}

@media (max-width: 650px) {
  .search-cards-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (min-width: 1600px) {
  .search-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
  }
}

.search-item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.search-item-card:hover,
.search-item-card:focus,
.search-item-card.focused {
  background: rgba(0, 229, 204, 0.12);
  border-color: #00E5CC;
  box-shadow: 0 4px 18px rgba(0, 229, 204, 0.3);
  outline: none;
  transform: translateY(-2px);
}

.search-item-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.search-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.search-item-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-item-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-item-trailing {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.search-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.search-badge.live {
  background: rgba(229, 57, 53, 0.2);
  color: #FF5252;
  border: 1px solid rgba(229, 57, 53, 0.4);
}

.search-badge.iptv {
  background: rgba(94, 53, 177, 0.25);
  color: #B388FF;
  border: 1px solid rgba(94, 53, 177, 0.4);
}

.search-badge.radio {
  background: rgba(142, 36, 170, 0.25);
  color: #EA80FC;
  border: 1px solid rgba(142, 36, 170, 0.4);
}

.search-badge.movie {
  background: rgba(30, 136, 229, 0.2);
  color: #40C4FF;
  border: 1px solid rgba(30, 136, 229, 0.4);
}

.search-badge.show {
  background: rgba(67, 160, 71, 0.2);
  color: #69F0AE;
  border: 1px solid rgba(67, 160, 71, 0.4);
}

.search-badge.music {
  background: rgba(216, 27, 96, 0.2);
  color: #FF4081;
  border: 1px solid rgba(216, 27, 96, 0.4);
}

.search-play-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.2s ease;
}

.search-item-card:hover .search-play-icon,
.search-item-card:focus .search-play-icon,
.search-item-card.focused .search-play-icon {
  background: #00E5CC;
  border-color: #00E5CC;
  color: #050410;
  transform: scale(1.12);
  box-shadow: 0 0 12px rgba(0, 229, 204, 0.5);
}

.search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 20px;
  text-align: center;
  width: 100%;
}

.search-empty-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 229, 204, 0.08);
  border: 1.5px solid rgba(0, 229, 204, 0.25);
  color: #00E5CC;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 0 30px rgba(0, 229, 204, 0.15);
}

.search-empty-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.search-empty-desc {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  max-width: 440px;
  line-height: 1.5;
}

.iptv-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.iptv-filter-bar::-webkit-scrollbar {
  display: none;
}

.iptv-category-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.iptv-category-chip:hover,
.iptv-category-chip:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  outline: none;
}

.iptv-category-chip.active {
  background: linear-gradient(135deg, #5E35B1, #7E57C2);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 14px rgba(126, 87, 194, 0.45);
}

.iptv-category-count {
  font-size: 10px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.35);
  color: var(--neon-cyan);
  padding: 2px 6px;
  border-radius: 6px;
}

.iptv-subsearch-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px 10px;
  height: 32px;
  flex-shrink: 0;
}

.iptv-subsearch-wrap:focus-within {
  border-color: var(--neon-cyan);
  background: rgba(255, 255, 255, 0.09);
}

.iptv-subsearch-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 11.5px;
  width: 140px;
}

.iptv-subsearch-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.mobile-only-btn {
  display: none;
}

.mobile-menu-toggle-btn,
.mobile-nav-backdrop,
.mobile-nav-dropdown,
#mobile-nav-dropdown,
.mobile-side-drawer,
.mobile-inpage-panel {
  display: none !important;
}

.mobile-drawer-logo {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  object-fit: contain !important;
}

@media (min-width: 821px) {

  #mobile-nav-dropdown,
  .mobile-side-drawer,
  .mobile-nav-dropdown,
  .mobile-nav-backdrop,
  .mobile-menu-toggle-btn,
  .mobile-inpage-panel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translateX(-9999px) !important;
  }
}

@media (max-width: 820px) {
  .app-header {
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(8px, env(safe-area-inset-left, 8px));
    padding-right: max(8px, env(safe-area-inset-right, 8px));
    padding-bottom: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }

  .header-left {
    height: 100%;
    display: flex;
    align-items: center;
    order: 1 !important;
    min-width: 0;
    flex-shrink: 1;
    gap: 5px;
  }

  .brand-badge {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .brand-logo-glow {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .brand-text,
  .brand-name {
    display: none !important;
  }

  .nav-capsule-bar {
    display: none !important;
  }

  .nav-tabs {
    display: none !important;
  }

  .mobile-menu-toggle-btn {
    display: inline-flex !important;
  }

  .search-bar {
    display: none !important;
  }

  #header-clock {
    display: none !important;
  }

  .header-right {
    height: 100%;
    display: flex;
    align-items: center;
    order: 3 !important;
    margin-left: auto;
    gap: 4px;
    min-width: auto;
    flex-shrink: 0;
  }

  .pwa-install-btn {
    padding: 4px 7px;
    font-size: 10.5px;
    gap: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    height: 30px;
    border-radius: 15px;
  }

  .pwa-install-btn.installed {
    display: none !important;
  }

  .mobile-only-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .header-icon-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  }

  .header-icon-btn:active {
    transform: scale(0.91) !important;
    background: rgba(0, 229, 204, 0.25) !important;
  }

  .header-icon-btn.active {
    background: rgba(0, 229, 204, 0.2) !important;
    border-color: var(--neon-cyan) !important;
    color: var(--neon-cyan) !important;
    box-shadow: 0 0 12px rgba(0, 229, 204, 0.45) !important;
  }

  .pwa-install-btn:active {
    transform: scale(0.93) !important;
  }

  .nav-capsule-bar,
  body.mode-portrait .nav-capsule-bar,
  body.is-mobile:not(.mode-landscape):not(.simulated-app-landscape) .nav-capsule-bar {
    display: none !important;
  }

  body.mode-landscape .nav-capsule-bar,
  body.mode-mobile-landscape .nav-capsule-bar,
  body.simulated-app-landscape .nav-capsule-bar {
    display: inline-flex !important;
  }

  .nav-tabs,
  body.mode-portrait .nav-tabs,
  body.is-mobile:not(.mode-landscape):not(.simulated-app-landscape) .nav-tabs {
    display: none !important;
  }

  body.mode-landscape .nav-tabs,
  body.mode-mobile-landscape .nav-tabs,
  body.simulated-app-landscape .nav-tabs {
    display: flex !important;
  }

  .nav-tab-btn {
    height: 31px !important;
    padding: 0 11px !important;
    font-size: 12.5px !important;
    gap: 5px !important;
  }

  .nav-tab-btn.active {
    padding: 0 14px !important;
  }

  .nav-capsule-btn {
    width: 29px !important;
    height: 29px !important;
  }

  .nav-capsule-divider {
    height: 16px !important;
    margin: 0 3px !important;
  }

  .mobile-menu-toggle-btn,
  body:not(.mode-landscape) .mobile-menu-toggle-btn,
  body.mode-portrait .mobile-menu-toggle-btn,
  body.is-mobile:not(.mode-landscape) .mobile-menu-toggle-btn,
  body.fullscreen-mode:not(.mode-landscape) .mobile-menu-toggle-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(0, 229, 204, 0.4);
    border-radius: 18px;
    padding: 3px 10px;
    height: 32px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px rgba(0, 229, 204, 0.2);
    margin-left: 4px;
    flex-shrink: 0;
    max-width: 160px;
  }

  body.mode-landscape .mobile-menu-toggle-btn,
  body.mode-mobile-landscape .mobile-menu-toggle-btn,
  body.simulated-app-landscape .mobile-menu-toggle-btn {
    display: none !important;
  }

  .mobile-menu-toggle-btn:active {
    transform: scale(0.94);
    background: rgba(0, 229, 204, 0.28);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 18px rgba(0, 229, 204, 0.5);
  }

  .mobile-menu-toggle-btn.open {
    background: rgba(0, 229, 204, 0.22);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 16px rgba(0, 229, 204, 0.45);
  }

  .mobile-menu-icon {
    color: var(--neon-cyan);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
  }

  .mobile-menu-toggle-btn.open .mobile-menu-icon {
    transform: rotate(90deg);
    color: var(--neon-cyan);
  }

  .mobile-menu-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    flex-shrink: 0;
  }

  .mobile-menu-active-pill {
    font-size: 8px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.14) 100%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    transition: all 0.2s ease;
  }

  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-nav-backdrop.open {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
  }

  #mobile-nav-dropdown,
  .mobile-side-drawer,
  .mobile-nav-dropdown {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    flex-direction: column;
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, 82vw) !important;
    max-width: min(300px, 82vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: #000000 !important;
    background: rgba(8, 9, 13, 0.94) !important;
    backdrop-filter: blur(36px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(36px) saturate(200%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.95), inset -1px 0 0 rgba(255, 255, 255, 0.08) !important;
    z-index: 155;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    padding: max(14px, env(safe-area-inset-top, 14px)) 12px max(14px, env(safe-area-inset-bottom, 14px));
    box-sizing: border-box;
    overflow: hidden;
  }

  #mobile-nav-dropdown.open,
  .mobile-side-drawer.open,
  .mobile-nav-dropdown.open {
    transform: translateX(0) !important;
  }

  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .mobile-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-drawer-logo-glow {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  }

  .mobile-drawer-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  .mobile-drawer-title-wrap {
    display: flex;
    flex-direction: column;
  }

  .mobile-drawer-title {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .mobile-drawer-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  .mobile-drawer-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mobile-drawer-close-btn:active {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
  }

  .mobile-drawer-search-wrap {
    padding: 10px 4px 6px;
    flex-shrink: 0;
  }

  .mobile-drawer-search-btn {
    width: 100%;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mobile-drawer-search-btn:active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
  }

  .mobile-drawer-section-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.5);
    padding: 12px 8px 6px;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .mobile-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    padding: 6px 12px 18px;
  }

  .mobile-drawer-list::-webkit-scrollbar {
    display: none;
  }

  .mobile-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Outfit', sans-serif;
    outline: none;
    box-sizing: border-box;
    width: 100%;
  }

  .mobile-drawer-item:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
  }

  .mobile-drawer-item.active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.45), 0 0 12px rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.02);
  }

  .mobile-drawer-item-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
  }

  .mobile-drawer-item-icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 2.2;
    display: block;
  }

  .mobile-drawer-item.active .mobile-drawer-item-icon svg {
    stroke: #000000 !important;
  }

  .mobile-drawer-item-title {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex: 1;
    text-align: left;
    color: inherit;
    line-height: 1.2;
  }

  .mobile-drawer-item.active .mobile-drawer-item-title {
    color: #000000 !important;
    font-weight: 900;
    text-shadow: none;
  }

  .mobile-drawer-live-tag {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 6px;
    background: #ff1744;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 23, 68, 0.6);
    margin-left: auto;
    flex-shrink: 0;
  }

  .mobile-drawer-item.active .mobile-drawer-live-tag {
    background: #e60026;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(230, 0, 38, 0.7);
  }

  .mobile-drawer-item-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-drawer-item.active .mobile-drawer-item-sub {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .mobile-drawer-item-arrow {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    margin-left: auto;
    flex-shrink: 0;
  }

  .mobile-drawer-item.active .mobile-drawer-item-arrow {
    color: #000000 !important;
    font-weight: 900;
  }

  .mobile-drawer-item-dot {
    display: none !important;
  }

  .mobile-drawer-item.active .mobile-drawer-item-dot {
    display: none !important;
  }

  .mobile-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .mobile-drawer-footer-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 8px 14px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mobile-drawer-footer-btn:active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
  }

  .mobile-drawer-version {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  .hero-slider-wrap {
    height: 160px;
    margin: 10px 12px 6px;
  }

  .hero-title {
    font-size: 18px;
  }

  .shortcuts-row-container {
    padding: 6px 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    overflow-x: visible;
  }

  .shortcut-card {
    min-width: 0;
    height: 52px;
    border-radius: 10px;
    gap: 3px;
    font-size: 11px;
  }

  .shortcut-icon {
    font-size: 18px;
  }

  .section-header-row {
    padding: 0 12px;
  }

  .horizontal-scroll-row {
    padding: 4px 12px;
  }

  .search-modal-container {
    padding: 12px 14px;
  }

  .iptv-filter-bar {
    padding: 10px 14px 4px;
  }

  .iptv-subsearch-wrap {
    display: none;
  }
}

.episodes-dialog.modal-card,
.episodes-dialog,
.episodes-modal-card {
  width: 92%;
  max-width: 680px;
  max-height: 82vh;
  max-height: 82dvh;
  background: #000000;
  background: linear-gradient(180deg, #10121a 0%, #06070a 100%);
  border: 1.5px solid rgba(0, 229, 204, 0.4);
  border-radius: 20px;
  box-shadow: 0 0 32px rgba(0, 229, 204, 0.2), 0 20px 50px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  gap: 0;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.episodes-modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
}

.episodes-modal-title-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.episodes-modal-title,
.episodes-show-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episodes-modal-subtitle,
.episodes-show-category {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--neon-cyan);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.episodes-list-container {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 58vh;
  padding: 14px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  box-sizing: border-box;
}

.episode-item-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 14px;
  color: #fff;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  box-sizing: border-box;
}

.episode-item-btn:hover,
.episode-item-btn:focus,
.episode-item-btn.tv-focus {
  background: rgba(0, 229, 204, 0.22) !important;
  border-color: var(--neon-cyan) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 2px var(--neon-cyan), 0 4px 18px rgba(0, 229, 204, 0.4) !important;
  outline: none;
}

#episodes-modal-close:hover,
#episodes-modal-close:focus-visible,
#episodes-modal-close.tv-focus {
  background: rgba(0, 229, 204, 0.25) !important;
  border-color: #00e5cc !important;
  box-shadow: 0 0 0 2px #00e5cc, 0 0 16px rgba(0, 229, 204, 0.6) !important;
  transform: scale(1.12);
  outline: none;
}

.episodes-modal-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 10px 18px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
}

#episodes-modal-footer-close {
  padding: 8px 18px;
  font-size: 13px;
  border-radius: 999px;
}

#episodes-modal-footer-close.tv-focus {
  box-shadow: 0 0 0 2px #ff2d78, 0 0 16px rgba(255, 45, 120, 0.5) !important;
  background: rgba(255, 45, 120, 0.25) !important;
  border-color: #ff2d78 !important;
}

.episode-icon-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-pink), #ff5722);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
}

.episode-meta-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}

.episode-name-text {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-sub-text {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {

  .episodes-dialog.modal-card,
  .episodes-dialog,
  .episodes-modal-card {
    width: 95%;
    max-width: 480px;
    max-height: 85vh;
    max-height: 85dvh;
    border-radius: 16px;
  }

  .episodes-modal-header {
    padding: 10px 14px;
  }

  .episodes-modal-title,
  .episodes-show-title {
    font-size: 15px;
  }

  .episodes-modal-subtitle,
  .episodes-show-category {
    font-size: 10.5px;
  }

  .episodes-list-container {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
    max-height: 60vh;
  }

  .episode-item-btn {
    padding: 8px 12px;
    gap: 10px;
  }

  .episodes-modal-footer {
    padding: 8px 14px 10px;
  }

  #episodes-modal-footer-close {
    padding: 6px 14px;
    font-size: 11.5px;
  }
}

@media (max-height: 540px),
(orientation: landscape) and (max-height: 600px) {
  #episodes-modal {
    padding: max(4px, env(safe-area-inset-top, 4px)) max(10px, env(safe-area-inset-right, 10px)) max(4px, env(safe-area-inset-bottom, 4px)) max(10px, env(safe-area-inset-left, 10px)) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #episodes-modal .episodes-dialog.modal-card,
  #episodes-modal .episodes-dialog,
  #episodes-modal .episodes-modal-card,
  #episodes-modal .modal-card,
  body.mode-landscape.is-mobile #episodes-modal .modal-card,
  body.mode-mobile-landscape #episodes-modal .modal-card {
    width: 100% !important;
    max-width: min(840px, 96vw) !important;
    height: min(calc(100dvh - 8px), calc(100vh - 8px)) !important;
    max-height: calc(100dvh - 8px) !important;
    max-height: calc(100vh - 8px) !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #episodes-modal .episodes-modal-header,
  body.mode-landscape.is-mobile #episodes-modal .episodes-modal-header,
  body.mode-mobile-landscape #episodes-modal .episodes-modal-header {
    flex: 0 0 auto !important;
    padding: 6px 12px !important;
    gap: 8px !important;
  }

  #episodes-modal .episodes-modal-title,
  #episodes-modal .episodes-show-title,
  body.mode-landscape.is-mobile #episodes-modal .episodes-modal-title,
  body.mode-mobile-landscape #episodes-modal .episodes-modal-title {
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }

  #episodes-modal .episodes-modal-subtitle,
  #episodes-modal .episodes-show-category,
  body.mode-landscape.is-mobile #episodes-modal .episodes-modal-subtitle,
  body.mode-mobile-landscape #episodes-modal .episodes-modal-subtitle {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
  }

  #episodes-modal #episodes-modal-close,
  body.mode-landscape.is-mobile #episodes-modal #episodes-modal-close,
  body.mode-mobile-landscape #episodes-modal #episodes-modal-close {
    width: 26px !important;
    height: 26px !important;
  }

  #episodes-modal #episodes-modal-close svg,
  body.mode-landscape.is-mobile #episodes-modal #episodes-modal-close svg,
  body.mode-mobile-landscape #episodes-modal #episodes-modal-close svg {
    width: 14px !important;
    height: 14px !important;
  }

  #episodes-modal .episodes-list-container,
  body.mode-landscape.is-mobile #episodes-modal .episodes-list-container,
  body.mode-mobile-landscape #episodes-modal .episodes-list-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 10px !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  #episodes-modal .episode-item-btn,
  body.mode-landscape.is-mobile #episodes-modal .episode-item-btn,
  body.mode-mobile-landscape #episodes-modal .episode-item-btn {
    padding: 5px 8px !important;
    gap: 7px !important;
    border-radius: 8px !important;
  }

  #episodes-modal .episode-icon-play,
  body.mode-landscape.is-mobile #episodes-modal .episode-icon-play,
  body.mode-mobile-landscape #episodes-modal .episode-icon-play {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
  }

  #episodes-modal .episode-name-text,
  body.mode-landscape.is-mobile #episodes-modal .episode-name-text,
  body.mode-mobile-landscape #episodes-modal .episode-name-text {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  #episodes-modal .episode-sub-text,
  body.mode-landscape.is-mobile #episodes-modal .episode-sub-text,
  body.mode-mobile-landscape #episodes-modal .episode-sub-text {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  #episodes-modal .episodes-modal-footer,
  body.mode-landscape.is-mobile #episodes-modal .episodes-modal-footer,
  body.mode-mobile-landscape #episodes-modal .episodes-modal-footer {
    flex: 0 0 auto !important;
    padding: 5px 12px 6px !important;
  }

  #episodes-modal #episodes-modal-footer-close,
  body.mode-landscape.is-mobile #episodes-modal #episodes-modal-footer-close,
  body.mode-mobile-landscape #episodes-modal #episodes-modal-footer-close {
    padding: 4px 14px !important;
    font-size: 11px !important;
    height: 26px !important;
    border-radius: 999px !important;
  }
}

.episodes-spinner {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px;
  color: var(--neon-cyan);
  font-weight: 600;
  font-size: 14px;
}

.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 10px 24px 30px;
}

.music-card {
  background: #0f0c2a;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.music-card:hover,
.music-card:focus {
  transform: translateY(-4px) scale(1.03);
  border-color: #d81b60;
  box-shadow: 0 6px 20px rgba(216, 27, 96, 0.35);
  outline: none;
}

.music-thumb-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #17123d;
  position: relative;
  overflow: hidden;
}

.music-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.music-thumb-img[src*="ytimg.com"],
.music-thumb-img[src*="youtube.com"],
.music-thumb-img[src*="youtu.be"],
.music-thumb-img[src*="ggpht.com"],
.music-thumb-img[src*="hqdefault"],
.music-thumb-img[src*="mqdefault"],
.music-thumb-img[src*="sddefault"],
.music-thumb-img[src*="default.jpg"] {
  transform: scale(1.36);
  object-fit: cover;
}

.music-card:hover .music-thumb-img[src*="ytimg.com"],
.music-card:hover .music-thumb-img[src*="youtube.com"],
.music-card:hover .music-thumb-img[src*="youtu.be"],
.music-card:hover .music-thumb-img[src*="ggpht.com"],
.music-card:hover .music-thumb-img[src*="hqdefault"],
.music-card:hover .music-thumb-img[src*="mqdefault"],
.music-card:hover .music-thumb-img[src*="sddefault"],
.music-card:hover .music-thumb-img[src*="default.jpg"],
.music-card.tv-focus .music-thumb-img[src*="ytimg.com"],
.music-card.tv-focus .music-thumb-img[src*="youtube.com"],
.music-card.tv-focus .music-thumb-img[src*="youtu.be"],
.music-card.tv-focus .music-thumb-img[src*="ggpht.com"],
.music-card.tv-focus .music-thumb-img[src*="hqdefault"],
.music-card.tv-focus .music-thumb-img[src*="mqdefault"],
.music-card.tv-focus .music-thumb-img[src*="sddefault"],
.music-card.tv-focus .music-thumb-img[src*="default.jpg"] {
  transform: scale(1.42);
}

.music-info-col {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.music-title-text {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-sub-text {
  font-size: 10.5px;
  color: var(--neon-cyan);
  font-weight: 600;
}

.rotate-prompt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 5, 26, 0.96);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: 99999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.rotate-prompt-overlay.active {
  display: flex !important;
}

.rotate-prompt-card {
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.rotate-phone-anim {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 229, 204, 0.12);
  border: 2px solid var(--neon-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-cyan);
  animation: rotatePhonePulse 2.2s infinite ease-in-out;
}

@keyframes rotatePhonePulse {
  0% {
    transform: rotate(0deg) scale(1);
  }

  35% {
    transform: rotate(-90deg) scale(1.08);
  }

  65% {
    transform: rotate(-90deg) scale(1.08);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

.rotate-prompt-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.rotate-prompt-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.rotate-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.rotate-btn-primary {
  background: linear-gradient(135deg, var(--neon-cyan), #0088cc);
  color: #07051a;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 18px rgba(0, 229, 204, 0.4);
}

.rotate-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 3, 15, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  animation: fadeInModal 0.25s ease forwards;
}

@keyframes fadeInModal {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ios-install-card {
  background: linear-gradient(135deg, rgba(14, 16, 26, 0.98), rgba(6, 7, 12, 0.99));
  border: 1.5px solid rgba(0, 229, 204, 0.45);
  border-radius: 20px;
  padding: 26px 26px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 229, 204, 0.2);
  box-sizing: border-box;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.3px;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover,
.modal-close-btn:focus-visible,
.modal-close-btn.tv-focus {
  background: rgba(255, 255, 255, 0.25);
  color: #00E5CC;
  outline: none;
}

.ios-step-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 10px;
  text-align: left;
}

.ios-step-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00E5CC, #0077B6);
  color: #070514;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 2px;
}

.ios-step-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
}

.ios-step-text strong {
  color: #00E5CC;
}

.primary-btn {
  background: linear-gradient(135deg, #00E5CC, #0077B6);
  color: #070514;
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 18px rgba(0, 229, 204, 0.4);
}

.primary-btn:hover,
.primary-btn:focus-visible,
.primary-btn.tv-focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 229, 204, 0.7);
  outline: none;
}

.player-unmute-badge {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 229, 204, 0.95), rgba(0, 119, 182, 0.98));
  color: #070514;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  border: 2px solid #fff;
  box-shadow: 0 0 24px rgba(0, 229, 204, 0.8), 0 8px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 30;
  animation: pulse-unmute 2s infinite ease-in-out;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.player-unmute-badge:hover,
.player-unmute-badge:focus-visible,
.player-unmute-badge.tv-focus {
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 0 32px rgba(0, 229, 204, 1), 0 12px 30px rgba(0, 0, 0, 0.6);
  outline: none;
}

@keyframes pulse-unmute {

  0%,
  100% {
    box-shadow: 0 0 18px rgba(0, 229, 204, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
  }

  50% {
    box-shadow: 0 0 30px rgba(0, 229, 204, 0.95), 0 8px 24px rgba(0, 0, 0, 0.6);
  }
}

@media (min-width: 1200px) and (min-height: 600px),
(min-width: 960px) and (orientation: landscape) {
  .app-header {
    padding: 0 max(36px, env(safe-area-inset-left));
    height: 72px;
  }

  .content-scroll-area {
    padding: 0 max(36px, env(safe-area-inset-left)) 60px;
  }

  .hero-slider-wrap {
    height: 270px;
    margin: 16px 0 16px;
  }

  .hero-title {
    font-size: 34px;
  }

  .section-wrapper {
    margin-top: 3px;
    margin-bottom: 2px;
  }

  .section-header-row {
    margin-bottom: 3px;
  }

  .horizontal-scroll-row {
    padding: 2px 6px 2px;
    gap: 14px;
  }

  .channel-card-item {
    width: 200px;
  }

  .poster-card-item {
    width: 160px;
  }

  .poster-card-box {
    height: 225px;
  }

  .pwa-install-btn {
    padding: 9px 20px;
    font-size: 13.5px;
  }

  .channel-card-item.tv-focus,
  .poster-card-item.tv-focus,
  .shortcut-card.tv-focus {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 0 0 3px #00E5CC, 0 12px 30px rgba(0, 229, 204, 0.5) !important;
    z-index: 10;
  }
}

.audio-player-container {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #080c14;
}

.audio-ambient-backdrop {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(60px) brightness(0.42) saturate(1.8);
  transform: scale(1.15);
  z-index: 1;
  transition: background-image 0.6s ease;
  pointer-events: none;
}

.audio-player-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(10, 16, 28, 0.35) 0%, rgba(4, 7, 13, 0.92) 100%);
  z-index: 2;
  pointer-events: none;
}

.audio-player-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: max(18px, env(safe-area-inset-top, 20px), 52px);
  padding-bottom: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 16px));
  padding-right: max(16px, env(safe-area-inset-right, 16px));
  box-sizing: border-box;
  width: 100%;
}

.audio-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: uppercase;
}

.audio-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff2d55;
  box-shadow: 0 0 10px #ff2d55;
  animation: audioPulseDot 1.4s infinite ease-in-out;
}

@keyframes audioPulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

.audio-player-center {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 8px clamp(16px, 4vw, 32px) max(20px, env(safe-area-inset-bottom, 20px));
  max-width: 580px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.audio-artwork-card-wrap {
  position: relative;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.audio-artwork-card {
  width: min(240px, 42vw);
  height: min(240px, 42vw);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 229, 204, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.16);
  background: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.4s ease;
}

.audio-artwork-card.disc-mode {
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.05), 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 229, 204, 0.35);
}

.audio-artwork-card.disc-mode.playing {
  animation: audioDiscRotate 20s linear infinite;
}

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

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

.audio-artwork-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.audio-artwork-img[src*="ytimg.com"],
.audio-artwork-img[src*="youtube.com"],
.audio-artwork-img[src*="youtu.be"],
.audio-artwork-img[src*="ggpht.com"],
.audio-artwork-img[src*="hqdefault"],
.audio-artwork-img[src*="mqdefault"],
.audio-artwork-img[src*="sddefault"],
.audio-artwork-img[src*="default.jpg"] {
  transform: scale(1.36);
  object-fit: cover;
}

.audio-artwork-fallback {
  font-size: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-eq-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 22px;
  margin-top: 14px;
}

.audio-eq-bar {
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #00e5cc, #00a896);
  animation: audioEqBounce 1.2s infinite ease-in-out;
}

.eq-b1 {
  height: 14px;
  animation-delay: 0.1s;
}

.eq-b2 {
  height: 22px;
  animation-delay: 0.3s;
}

.eq-b3 {
  height: 9px;
  animation-delay: 0.15s;
}

.eq-b4 {
  height: 20px;
  animation-delay: 0.4s;
}

.eq-b5 {
  height: 12px;
  animation-delay: 0.25s;
}

.eq-b6 {
  height: 18px;
  animation-delay: 0.35s;
}

.eq-b7 {
  height: 10px;
  animation-delay: 0.05s;
}

@keyframes audioEqBounce {

  0%,
  100% {
    transform: scaleY(0.25);
  }

  50% {
    transform: scaleY(1);
  }
}

.audio-meta-wrap {
  text-align: center;
  width: 100%;
  max-width: 90vw;
  padding: 0 12px;
  box-sizing: border-box;
}

.audio-track-title {
  font-size: clamp(16px, 3.8vw, 24px);
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  margin-top: 4px;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85vw;
  margin-left: auto;
  margin-right: auto;
}

.audio-track-subtitle {
  font-size: clamp(12px, 2.2vw, 14.5px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85vw;
  margin-left: auto;
  margin-right: auto;
}

.audio-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin-top: 14px;
  padding: 0 4px;
}

.audio-time-text {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.audio-seek-bar-bg {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  overflow: visible;
  transition: height 0.15s ease;
}

.audio-seek-bar-bg:hover,
.audio-seek-bar-bg:focus-visible,
.audio-seek-bar-bg.tv-focus {
  height: 9px;
  outline: none;
}

.audio-seek-bar-bg:focus-visible,
.audio-seek-bar-bg.tv-focus {
  box-shadow: 0 0 0 3px #00e5cc, 0 0 18px rgba(0, 229, 204, 0.8) !important;
}

.audio-seek-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00e5cc, #00b4d8);
  border-radius: 4px 0 0 4px;
  transition: width 0.1s linear;
  pointer-events: none;
}

.audio-seek-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  background: #00e5cc;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 229, 204, 0.8);
  pointer-events: none;
  transition: left 0.1s linear;
}

.pwa-install-btn.installed {
  background: rgba(0, 200, 83, 0.18) !important;
  border: 1.5px solid #00C853 !important;
  color: #00E676 !important;
  box-shadow: 0 0 14px rgba(0, 200, 83, 0.35) !important;
  pointer-events: none !important;
  cursor: default !important;
  font-weight: 700 !important;
}

#pwa-install-btn.installed,
header #pwa-install-btn.installed,
.header-right #pwa-install-btn.installed {
  display: none !important;
}

#settings-install-btn.installed {
  display: inline-flex !important;
}

.pwa-install-btn.installed svg {
  stroke: #00E676 !important;
}

.audio-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 32px);
  margin-top: 18px;
}

.audio-ctrl-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.audio-ctrl-btn:hover,
.audio-ctrl-btn:focus-visible,
.audio-ctrl-btn.tv-focus {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.12);
  outline: none;
  box-shadow: 0 0 0 3px #00e5cc !important;
}

.audio-play-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00e5cc, #00b4d8);
  border: none;
  color: #050b14;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 229, 204, 0.45);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.audio-play-btn:hover,
.audio-play-btn:focus-visible,
.audio-play-btn.tv-focus {
  transform: scale(1.12);
  box-shadow: 0 14px 40px rgba(0, 229, 204, 0.7);
  outline: none;
}

.audio-bottom-actions {
  margin-top: 14px;
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
}

@media (max-height: 520px) {
  .audio-artwork-card {
    width: 140px;
    height: 140px;
    border-radius: 18px;
  }

  .audio-play-btn {
    width: 56px;
    height: 56px;
  }

  .audio-ctrl-btn {
    width: 42px;
    height: 42px;
  }

  .audio-track-title {
    font-size: 18px;
  }

  .audio-eq-wave {
    height: 16px;
    margin-top: 8px;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 480px) {
  .app-header {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 max(16px, env(safe-area-inset-right, 16px)) 0 max(16px, env(safe-area-inset-left, 16px)) !important;
  }

  .brand-logo-glow {
    width: 26px !important;
    height: 26px !important;
  }

  .brand-text,
  .brand-name {
    display: none !important;
  }

  .nav-tab-btn {
    height: 26px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }

  .header-icon-btn {
    width: 28px !important;
    height: 28px !important;
  }

  .hero-slider-wrap {
    margin: 4px 10px 4px !important;
    height: clamp(88px, 24vh, 110px) !important;
    border-radius: 10px !important;
  }

  .hero-title {
    font-size: 14px !important;
  }

  .hero-subtitle {
    display: none !important;
  }

  .hero-tag {
    font-size: 8px !important;
    padding: 1px 5px !important;
  }

  .hero-dots-row {
    bottom: 8px !important;
    right: 12px !important;
  }

  .shortcuts-row-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 2px 10px 4px !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .shortcut-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: clamp(9px, 1.2vw, 10.5px) !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .shortcut-card span:not(.shortcut-icon) {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }

  .shortcut-icon {
    font-size: clamp(11px, 1.4vw, 13px) !important;
    flex-shrink: 0 !important;
  }

  .content-scroll-area {
    height: calc(100dvh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    padding-left: max(16px, env(safe-area-inset-left, 16px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    box-sizing: border-box !important;
  }

  .section-wrapper {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .channel-card-item {
    width: 120px !important;
  }

  .channel-card-box {
    height: 70px !important;
  }

  .poster-card-item {
    width: 88px !important;
  }

  .poster-card-box {
    height: 120px !important;
  }
}

@media (max-width: 680px) {
  .shortcuts-row-container {
    padding: 4px 12px 6px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
  }

  .shortcuts-row-container::-webkit-scrollbar {
    display: none !important;
  }

  .shortcut-card {
    flex: 0 0 68px !important;
    min-width: 68px !important;
    height: 48px !important;
    font-size: 9.5px !important;
    padding: 0 2px !important;
  }

  .hero-slider-wrap {
    margin: 8px 12px 4px !important;
    height: 140px !important;
  }

  .section-header-row,
  .horizontal-scroll-row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 960px),
(max-height: 560px),
(pointer: coarse) {
  .mobile-only-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

#header-orientation-btn,
#header-fullscreen-btn {
  color: var(--neon-cyan);
  border-color: rgba(0, 229, 204, 0.35);
  background: rgba(0, 229, 204, 0.12);
  transition: all 0.2s ease;
}

#header-orientation-btn:hover,
#header-orientation-btn:active,
#header-orientation-btn.active,
#header-fullscreen-btn:hover,
#header-fullscreen-btn:active,
#header-fullscreen-btn.active {
  background: rgba(0, 229, 204, 0.28) !important;
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 12px rgba(0, 229, 204, 0.6) !important;
  transform: scale(1.08);
}

#osd-orientation-btn {
  color: var(--neon-cyan);
  border-color: rgba(0, 229, 204, 0.4);
  background: rgba(0, 229, 204, 0.15);
}

#osd-orientation-btn:hover {
  background: rgba(0, 229, 204, 0.35);
  box-shadow: 0 0 14px rgba(0, 229, 204, 0.7);
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .player-osd {
    padding: max(14px, env(safe-area-inset-top, 14px)) max(10px, env(safe-area-inset-right, 10px)) max(22px, env(safe-area-inset-bottom, 22px)) max(10px, env(safe-area-inset-left, 10px));
  }

  .osd-channel-name {
    font-size: 14px;
    max-width: 155px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .osd-category-badge {
    font-size: 9.5px;
    padding: 2px 7px;
  }

  .osd-bottom-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    width: 100%;
    flex-wrap: nowrap;
  }

  .osd-controls-left {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 1;
    min-width: 0;
  }

  .osd-controls-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .osd-controls-right {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    pointer-events: auto;
  }

  .osd-ctrl-btn,
  .osd-circle-action-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    cursor: pointer;
  }

  .osd-ctrl-btn svg,
  .osd-circle-action-btn svg {
    width: 17px;
    height: 17px;
  }

  .osd-pill-btn {
    height: 34px;
    padding: 0 6px;
    font-size: 10px;
    gap: 2px;
  }

  .osd-pill-btn svg {
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }

  .osd-pill-btn.osd-live-sync-pill svg.sync-icon {
    width: 12px;
    height: 12px;
    margin: 0 2px;
  }

  .osd-play-btn {
    width: 40px;
    height: 40px;
  }


}

@media (orientation: portrait) and (max-width: 420px) {
  .player-osd {
    padding-left: max(6px, env(safe-area-inset-left, 6px)) !important;
    padding-right: max(6px, env(safe-area-inset-right, 6px)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
  }

  .osd-channel-name {
    font-size: 13px !important;
    max-width: 130px !important;
  }

  .osd-bottom-controls-row {
    gap: 2px !important;
  }

  .osd-controls-left {
    gap: 2px !important;
  }

  .osd-controls-right {
    gap: 2px !important;
  }

  .osd-ctrl-btn,
  .osd-circle-action-btn {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
  }

  .osd-ctrl-btn svg,
  .osd-circle-action-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  .osd-pill-btn {
    height: 31px !important;
    padding: 0 5px !important;
    font-size: 9.5px !important;
    gap: 1.5px !important;
  }

  .osd-pill-btn svg {
    width: 13px !important;
    height: 13px !important;
    margin-right: 2px !important;
  }

  .osd-play-btn {
    width: 36px !important;
    height: 36px !important;
  }
}


@media (orientation: landscape) and (max-height: 520px) {
  .app-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 max(16px, env(safe-area-inset-right, 16px)) 0 max(16px, env(safe-area-inset-left, 16px)) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 50 !important;
    gap: 8px !important;
  }

  .header-left {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    z-index: 2 !important;
    order: 1 !important;
  }

  .brand-logo-glow {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }

  .brand-text,
  .brand-name {
    display: none !important;
  }

  .mobile-menu-toggle-btn {
    display: none !important;
  }

  .nav-tabs {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-content: safe center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 5px !important;
    margin: 0 auto !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
    z-index: 1 !important;
    order: 2 !important;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .nav-tab-btn {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.72) !important;
    gap: 5px !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
  }

  .nav-tab-btn.active {
    background: #ffffff !important;
    border: none !important;
    color: #111111 !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
    padding: 0 13px !important;
  }

  .header-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    z-index: 2 !important;
    order: 3 !important;
  }

  #pwa-install-btn {
    display: none !important;
  }

  #header-orientation-btn,
  #header-fullscreen-btn,
  #header-settings-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .hero-slider-wrap {
    height: clamp(100px, 26vh, 135px) !important;
    margin: 4px 10px 4px !important;
    border-radius: 10px !important;
  }

  .hero-title {
    font-size: clamp(14px, 2.4vw, 19px) !important;
  }

  .shortcuts-row-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 2px 10px 4px !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .shortcuts-row-container::-webkit-scrollbar {
    display: none !important;
  }

  .shortcut-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 4px !important;
    font-size: clamp(9px, 1.2vw, 10.5px) !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .shortcut-card span:not(.shortcut-icon) {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }

  .shortcut-icon {
    font-size: clamp(11px, 1.4vw, 13px) !important;
    flex-shrink: 0 !important;
  }

  .content-scroll-area {
    padding-left: max(16px, env(safe-area-inset-left, 16px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    height: calc(100dvh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    box-sizing: border-box !important;
  }

  .section-wrapper {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .channel-card-item {
    width: 140px !important;
  }

  .channel-card-box {
    height: 80px !important;
  }

  .poster-card-item {
    width: 105px !important;
  }

  .poster-card-box {
    height: 148px !important;
  }
}

body.mode-landscape.is-mobile .app-header,
body.mode-mobile-landscape .app-header,
body.simulated-app-landscape .app-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 max(16px, env(safe-area-inset-right, 16px)) 0 max(16px, env(safe-area-inset-left, 16px)) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 50 !important;
  gap: 8px !important;
}

body.mode-landscape.is-mobile .header-left,
body.mode-mobile-landscape .header-left,
body.simulated-app-landscape .header-left {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  z-index: 2 !important;
  order: 1 !important;
}

body.mode-landscape.is-mobile .brand-logo-glow,
body.mode-mobile-landscape .brand-logo-glow,
body.simulated-app-landscape .brand-logo-glow,
body.is-mobile .brand-logo-glow {
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0 !important;
}

body.mode-landscape.is-mobile .brand-text,
body.mode-landscape.is-mobile .brand-name,
body.mode-mobile-landscape .brand-text,
body.mode-mobile-landscape .brand-name,
body.simulated-app-landscape .brand-text,
body.simulated-app-landscape .brand-name {
  display: inline-block !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.8px !important;
  line-height: 1 !important;
}

body.mode-portrait .brand-text,
body.mode-portrait .brand-name,
body.mode-portrait.is-mobile .brand-text,
body.mode-portrait.is-mobile .brand-name,
body.is-mobile:not(.mode-landscape):not(.simulated-app-landscape) .brand-text,
body.is-mobile:not(.mode-landscape):not(.simulated-app-landscape) .brand-name {
  display: none !important;
}

body.mode-landscape.is-mobile .mobile-menu-toggle-btn,
body.mode-mobile-landscape .mobile-menu-toggle-btn,
body.simulated-app-landscape .mobile-menu-toggle-btn {
  display: none !important;
}

body.mode-portrait .mobile-menu-toggle-btn,
body.mode-portrait.is-mobile .mobile-menu-toggle-btn,
body.is-mobile:not(.mode-landscape):not(.simulated-app-landscape) .mobile-menu-toggle-btn {
  display: inline-flex !important;
}

body.mode-landscape.is-mobile .nav-capsule-bar,
body.mode-mobile-landscape .nav-capsule-bar,
body.simulated-app-landscape .nav-capsule-bar {
  display: inline-flex !important;
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 32px !important;
  max-height: 32px !important;
  align-items: center !important;
  padding: 2px 4px !important;
  margin: 0 4px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.mode-portrait .nav-capsule-bar,
body.mode-portrait.is-mobile .nav-capsule-bar,
body.is-mobile:not(.mode-landscape):not(.simulated-app-landscape) .nav-capsule-bar {
  display: none !important;
}

body.mode-landscape.is-mobile .nav-tabs,
body.mode-mobile-landscape .nav-tabs,
body.simulated-app-landscape .nav-tabs {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  white-space: nowrap !important;
  z-index: 1 !important;
  order: 1 !important;
}

body.mode-portrait .nav-tabs,
body.mode-portrait.is-mobile .nav-tabs,
body.is-mobile:not(.mode-landscape):not(.simulated-app-landscape) .nav-tabs {
  display: none !important;
}

body.mode-landscape.is-mobile .nav-tabs::-webkit-scrollbar,
body.mode-mobile-landscape .nav-tabs::-webkit-scrollbar,
body.simulated-app-landscape .nav-tabs::-webkit-scrollbar {
  display: none !important;
}

body.mode-landscape.is-mobile .nav-tab-btn,
body.mode-mobile-landscape .nav-tab-btn,
body.simulated-app-landscape .nav-tab-btn {
  height: 31px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.72) !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

body.mode-landscape.is-mobile .nav-tab-btn.active,
body.mode-mobile-landscape .nav-tab-btn.active,
body.simulated-app-landscape .nav-tab-btn.active {
  background: #ffffff !important;
  border: none !important;
  color: #111111 !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  padding: 0 13px !important;
}

body.mode-landscape.is-mobile .header-right,
body.mode-mobile-landscape .header-right,
body.simulated-app-landscape .header-right {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-left: 0 !important;
  z-index: 2 !important;
  order: 3 !important;
}

body.mode-landscape.is-mobile #header-orientation-btn,
body.mode-landscape.is-mobile #header-fullscreen-btn,
body.mode-landscape.is-mobile #header-settings-btn,
body.mode-mobile-landscape #header-orientation-btn,
body.mode-mobile-landscape #header-fullscreen-btn,
body.mode-mobile-landscape #header-settings-btn,
body.simulated-app-landscape #header-orientation-btn,
body.simulated-app-landscape #header-fullscreen-btn,
body.simulated-app-landscape #header-settings-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body.mode-landscape.is-mobile #pwa-install-btn,
body.mode-mobile-landscape #pwa-install-btn,
body.simulated-app-landscape #pwa-install-btn {
  display: none !important;
}

body.is-tv #pwa-install-btn:not(.installed),
header #pwa-install-btn:not(.installed) {
  display: inline-flex !important;
}

body.is-tv #header-orientation-btn {
  display: none !important;
}

@media (min-width: 768px) and (min-height: 521px) {
  #pwa-install-btn:not(.installed) {
    display: inline-flex !important;
  }
}

body.mode-landscape.is-mobile .hero-slider-wrap,
body.mode-mobile-landscape .hero-slider-wrap,
body.simulated-app-landscape .hero-slider-wrap {
  height: 112px !important;
  min-height: 0 !important;
  max-height: 120px !important;
  margin: 4px 12px 4px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 229, 204, 0.35) !important;
}

body.mode-landscape.is-mobile .hero-content,
body.mode-mobile-landscape .hero-content,
body.simulated-app-landscape .hero-content {
  left: 14px !important;
  bottom: 8px !important;
  right: 70px !important;
  gap: 2px !important;
}

body.mode-landscape.is-mobile .hero-tag,
body.mode-mobile-landscape .hero-tag,
body.simulated-app-landscape .hero-tag {
  font-size: 8px !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
}

body.mode-landscape.is-mobile .hero-title,
body.mode-mobile-landscape .hero-title,
body.simulated-app-landscape .hero-title {
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.2px !important;
}

body.mode-landscape.is-mobile .hero-subtitle,
body.mode-mobile-landscape .hero-subtitle,
body.simulated-app-landscape .hero-subtitle {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.mode-landscape.is-mobile .hero-dots-row,
body.mode-mobile-landscape .hero-dots-row,
body.simulated-app-landscape .hero-dots-row {
  right: 14px !important;
  bottom: 8px !important;
  gap: 4px !important;
}

body.mode-landscape.is-mobile .hero-dot,
body.mode-mobile-landscape .hero-dot,
body.simulated-app-landscape .hero-dot {
  width: 6px !important;
  height: 6px !important;
}

body.mode-landscape.is-mobile .hero-dot.active,
body.mode-mobile-landscape .hero-dot.active,
body.simulated-app-landscape .hero-dot.active {
  width: 14px !important;
}

body.mode-landscape.is-mobile .shortcuts-row-container,
body.mode-mobile-landscape .shortcuts-row-container,
body.simulated-app-landscape .shortcuts-row-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  padding: 3px 12px 5px !important;
  gap: 5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.mode-landscape.is-mobile .shortcuts-row-container::-webkit-scrollbar,
body.mode-mobile-landscape .shortcuts-row-container::-webkit-scrollbar,
body.simulated-app-landscape .shortcuts-row-container::-webkit-scrollbar {
  display: none !important;
}

body.mode-landscape.is-mobile .shortcut-card,
body.mode-mobile-landscape .shortcut-card,
body.simulated-app-landscape .shortcut-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 4px !important;
  font-size: clamp(9px, 1.2vw, 10.5px) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

body.mode-landscape.is-mobile .shortcut-card span:not(.shortcut-icon),
body.mode-mobile-landscape .shortcut-card span:not(.shortcut-icon),
body.simulated-app-landscape .shortcut-card span:not(.shortcut-icon) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

body.mode-landscape.is-mobile .shortcut-icon,
body.mode-mobile-landscape .shortcut-icon,
body.simulated-app-landscape .shortcut-icon {
  font-size: clamp(11px, 1.4vw, 13px) !important;
  flex-shrink: 0 !important;
}

body.mode-landscape.is-mobile #login-screen,
body.mode-mobile-landscape #login-screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(8px, env(safe-area-inset-top, 8px)) max(16px, env(safe-area-inset-right, 16px)) max(8px, env(safe-area-inset-bottom, 8px)) max(16px, env(safe-area-inset-left, 16px)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

body.mode-landscape.is-mobile .login-card,
body.mode-mobile-landscape .login-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: min(440px, 90vw) !important;
  max-height: calc(100vh - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  padding: 14px 22px !important;
  gap: 8px !important;
  margin: auto !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 229, 204, 0.15) !important;
}

body.mode-landscape.is-mobile .login-logo-circle,
body.mode-mobile-landscape .login-logo-circle {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.mode-landscape.is-mobile .login-header,
body.mode-mobile-landscape .login-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 3px !important;
}

body.mode-landscape.is-mobile .login-title,
body.mode-mobile-landscape .login-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
}

body.mode-landscape.is-mobile .login-subtitle,
body.mode-mobile-landscape .login-subtitle {
  font-size: 11.5px !important;
  color: var(--text-secondary) !important;
  display: block !important;
}

body.mode-landscape.is-mobile .login-form,
body.mode-mobile-landscape .login-form {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.mode-landscape.is-mobile .input-group,
body.mode-mobile-landscape .input-group {
  flex-direction: column !important;
  gap: 4px !important;
}

body.mode-landscape.is-mobile .input-group label,
body.mode-mobile-landscape .input-group label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
}

body.mode-landscape.is-mobile .input-box,
body.mode-mobile-landscape .input-box {
  height: 40px !important;
  font-size: 14px !important;
  padding: 0 14px !important;
  border-radius: var(--radius-md) !important;
}

body.mode-landscape.is-mobile .input-box.with-icon,
body.mode-mobile-landscape .input-box.with-icon {
  padding-left: 40px !important;
}

body.mode-landscape.is-mobile .field-icon,
body.mode-mobile-landscape .field-icon {
  left: 13px !important;
  width: 16px !important;
  height: 16px !important;
}

body.mode-landscape.is-mobile .login-btn-row,
body.mode-mobile-landscape .login-btn-row {
  gap: 8px !important;
  width: 100% !important;
}

body.mode-landscape.is-mobile .login-btn,
body.mode-mobile-landscape .login-btn {
  height: 40px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
}

body.mode-landscape.is-mobile .content-scroll-area,
body.mode-mobile-landscape .content-scroll-area,
body.simulated-app-landscape .content-scroll-area {
  height: calc(100dvh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
  padding-left: max(14px, env(safe-area-inset-left, 14px)) !important;
  padding-right: max(14px, env(safe-area-inset-right, 14px)) !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

body.mode-landscape.is-mobile .content-scroll-area.home-fixed-mode,
body.mode-mobile-landscape .content-scroll-area.home-fixed-mode,
body.simulated-app-landscape .content-scroll-area.home-fixed-mode {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  -webkit-overflow-scrolling: touch !important;
  height: calc(100dvh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
}

body.mode-landscape.is-mobile .content-scroll-area.home-fixed-mode #content-container,
body.mode-mobile-landscape .content-scroll-area.home-fixed-mode #content-container,
body.simulated-app-landscape .content-scroll-area.home-fixed-mode #content-container {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
}

body.mode-landscape.is-mobile .home-fixed-top-section,
body.mode-mobile-landscape .home-fixed-top-section,
body.simulated-app-landscape .home-fixed-top-section {
  position: static !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

body.mode-landscape.is-mobile .home-scroll-bottom-section,
body.mode-mobile-landscape .home-scroll-bottom-section,
body.simulated-app-landscape .home-scroll-bottom-section {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  padding-bottom: 24px !important;
}

body.mode-landscape.is-mobile .section-wrapper,
body.mode-mobile-landscape .section-wrapper,
body.simulated-app-landscape .section-wrapper {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

body.mode-landscape.is-mobile .section-header-row,
body.mode-mobile-landscape .section-header-row,
body.simulated-app-landscape .section-header-row {
  padding: 0 10px !important;
  margin-bottom: 3px !important;
}

body.mode-landscape.is-mobile .section-title,
body.mode-mobile-landscape .section-title,
body.simulated-app-landscape .section-title {
  font-size: 12.5px !important;
  letter-spacing: 0.3px !important;
}

body.mode-landscape.is-mobile .channel-card-item,
body.mode-mobile-landscape .channel-card-item,
body.simulated-app-landscape .channel-card-item {
  width: 124px !important;
}

body.mode-landscape.is-mobile .channel-card-box,
body.mode-mobile-landscape .channel-card-box,
body.simulated-app-landscape .channel-card-box {
  height: 72px !important;
  border-radius: 10px !important;
}

body.mode-landscape.is-mobile .poster-card-item,
body.mode-mobile-landscape .poster-card-item,
body.simulated-app-landscape .poster-card-item {
  width: 94px !important;
}

body.mode-landscape.is-mobile .poster-card-box,
body.mode-mobile-landscape .poster-card-box,
body.simulated-app-landscape .poster-card-box {
  height: 134px !important;
  border-radius: 10px !important;
}

body.mode-landscape.is-mobile .card-title-text,
body.mode-mobile-landscape .card-title-text,
body.simulated-app-landscape .card-title-text {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.2 !important;
  font-size: 11px !important;
  height: 26px !important;
  padding: 0 2px !important;
}

body.mode-landscape.is-mobile .iptv-grid-container,
body.mode-mobile-landscape .iptv-grid-container,
body.simulated-app-landscape .iptv-grid-container {
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)) !important;
  gap: 10px !important;
  padding: 8px 12px 24px !important;
}

body.mode-landscape.is-mobile .iptv-card-box,
body.mode-mobile-landscape .iptv-card-box,
body.simulated-app-landscape .iptv-card-box {
  height: 82px !important;
  border-radius: 10px !important;
}

body.mode-landscape.is-mobile .radio-grid,
body.mode-mobile-landscape .radio-grid,
body.simulated-app-landscape .radio-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 10px !important;
  padding: 8px 12px 24px !important;
}

body.mode-landscape.is-mobile .radio-card,
body.mode-mobile-landscape .radio-card,
body.simulated-app-landscape .radio-card {
  padding: 8px 10px !important;
  gap: 8px !important;
  border-radius: 10px !important;
}

body.mode-landscape.is-mobile .radio-logo,
body.mode-mobile-landscape .radio-logo,
body.simulated-app-landscape .radio-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

body.mode-landscape.is-mobile .radio-title,
body.mode-mobile-landscape .radio-title,
body.simulated-app-landscape .radio-title {
  font-size: 11.5px !important;
}

body.mode-landscape.is-mobile .music-grid,
body.mode-mobile-landscape .music-grid,
body.simulated-app-landscape .music-grid {
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)) !important;
  gap: 10px !important;
  padding: 8px 12px 24px !important;
}

body.mode-landscape.is-mobile .music-card,
body.mode-mobile-landscape .music-card,
body.simulated-app-landscape .music-card {
  border-radius: 10px !important;
}

body.mode-landscape.is-mobile .music-info-col,
body.mode-mobile-landscape .music-info-col,
body.simulated-app-landscape .music-info-col {
  padding: 6px 8px !important;
  gap: 2px !important;
}

body.mode-landscape.is-mobile .music-title-text,
body.mode-mobile-landscape .music-title-text,
body.simulated-app-landscape .music-title-text {
  font-size: 11px !important;
}

body.mode-landscape.is-mobile #settings-modal,
body.mode-mobile-landscape #settings-modal,
body.simulated-app-landscape #settings-modal {
  padding: max(4px, env(safe-area-inset-top, 4px)) max(12px, env(safe-area-inset-right, 12px)) max(4px, env(safe-area-inset-bottom, 4px)) max(12px, env(safe-area-inset-left, 12px)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
}

body.mode-landscape.is-mobile #settings-modal.active,
body.mode-mobile-landscape #settings-modal.active,
body.simulated-app-landscape #settings-modal.active {
  display: flex !important;
}

body.mode-landscape.is-mobile #settings-modal .modal-card,
body.mode-mobile-landscape #settings-modal .modal-card,
body.simulated-app-landscape #settings-modal .modal-card {
  width: 95% !important;
  max-width: min(840px, 95vw) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(calc(100% - 10px), calc(100dvh - 10px), calc(100vh - 10px)) !important;
  padding: 8px 14px 6px !important;
  gap: 4px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.mode-landscape.is-mobile #settings-modal .modal-header,
body.mode-mobile-landscape #settings-modal .modal-header,
body.simulated-app-landscape #settings-modal .modal-header {
  flex: 0 0 auto !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.mode-landscape.is-mobile #settings-modal .modal-header-brand,
body.mode-mobile-landscape #settings-modal .modal-header-brand,
body.simulated-app-landscape #settings-modal .modal-header-brand {
  gap: 8px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-gear-badge,
body.mode-mobile-landscape #settings-modal .settings-gear-badge,
body.simulated-app-landscape #settings-modal .settings-gear-badge {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-gear-badge svg,
body.mode-mobile-landscape #settings-modal .settings-gear-badge svg,
body.simulated-app-landscape #settings-modal .settings-gear-badge svg {
  width: 14px !important;
  height: 14px !important;
}

body.mode-landscape.is-mobile #settings-modal .modal-title,
body.mode-mobile-landscape #settings-modal .modal-title,
body.simulated-app-landscape #settings-modal .modal-title {
  font-size: 13.5px !important;
  letter-spacing: 0.6px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-modal-sub,
body.mode-mobile-landscape #settings-modal .settings-modal-sub,
body.simulated-app-landscape #settings-modal .settings-modal-sub {
  font-size: 9px !important;
  margin-top: 1px !important;
}

body.mode-landscape.is-mobile #settings-modal .modal-close-round-btn,
body.mode-mobile-landscape #settings-modal .modal-close-round-btn,
body.simulated-app-landscape #settings-modal .modal-close-round-btn {
  width: 24px !important;
  height: 24px !important;
}

body.mode-landscape.is-mobile #settings-modal .modal-close-round-btn svg,
body.mode-mobile-landscape #settings-modal .modal-close-round-btn svg,
body.simulated-app-landscape #settings-modal .modal-close-round-btn svg {
  width: 14px !important;
  height: 14px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-scroll-body,
body.mode-mobile-landscape #settings-modal .settings-scroll-body,
body.simulated-app-landscape #settings-modal .settings-scroll-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-right: 4px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-profile-banner,
body.mode-mobile-landscape #settings-modal .settings-profile-banner,
body.simulated-app-landscape #settings-modal .settings-profile-banner {
  padding: 5px 10px !important;
  gap: 8px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  margin-bottom: 2px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-avatar-badge,
body.mode-mobile-landscape #settings-modal .settings-avatar-badge,
body.simulated-app-landscape #settings-modal .settings-avatar-badge {
  width: 26px !important;
  height: 26px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-avatar-badge svg,
body.mode-mobile-landscape #settings-modal .settings-avatar-badge svg,
body.simulated-app-landscape #settings-modal .settings-avatar-badge svg {
  width: 15px !important;
  height: 15px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-profile-name,
body.mode-mobile-landscape #settings-modal .settings-profile-name,
body.simulated-app-landscape #settings-modal .settings-profile-name {
  font-size: 12.5px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-profile-sub,
body.mode-mobile-landscape #settings-modal .settings-profile-sub,
body.simulated-app-landscape #settings-modal .settings-profile-sub {
  font-size: 9.5px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-status-pill,
body.mode-mobile-landscape #settings-modal .settings-status-pill,
body.simulated-app-landscape #settings-modal .settings-status-pill {
  font-size: 8.5px !important;
  padding: 1.5px 6px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-grid-layout,
body.mode-mobile-landscape #settings-modal .settings-grid-layout,
body.simulated-app-landscape #settings-modal .settings-grid-layout {
  display: grid !important;
  grid-template-columns: 1.06fr 1fr !important;
  gap: 5px 12px !important;
  align-items: start !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-grid-col,
body.mode-mobile-landscape #settings-modal .settings-grid-col,
body.simulated-app-landscape #settings-modal .settings-grid-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-section-header,
body.mode-mobile-landscape #settings-modal .settings-section-header,
body.simulated-app-landscape #settings-modal .settings-section-header {
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  margin-top: 1px !important;
  margin-bottom: 1px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-brightness-box,
body.mode-mobile-landscape #settings-modal .settings-brightness-box,
body.simulated-app-landscape #settings-modal .settings-brightness-box {
  padding: 5px 8px !important;
  gap: 3px !important;
  border-radius: 8px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-brightness-title-row,
body.mode-mobile-landscape #settings-modal .settings-brightness-title-row,
body.simulated-app-landscape #settings-modal .settings-brightness-title-row {
  font-size: 10px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-brightness-control-row,
body.mode-mobile-landscape #settings-modal .settings-brightness-control-row,
body.simulated-app-landscape #settings-modal .settings-brightness-control-row {
  gap: 6px !important;
}

body.mode-landscape.is-mobile #settings-modal .brightness-step-btn,
body.mode-mobile-landscape #settings-modal .brightness-step-btn,
body.simulated-app-landscape #settings-modal .brightness-step-btn {
  width: 20px !important;
  height: 20px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
}

body.mode-landscape.is-mobile #settings-modal .brightness-presets-row,
body.mode-mobile-landscape #settings-modal .brightness-presets-row,
body.simulated-app-landscape #settings-modal .brightness-presets-row {
  gap: 3px !important;
  margin-top: 2px !important;
}

body.mode-landscape.is-mobile #settings-modal .brightness-chip,
body.mode-mobile-landscape #settings-modal .brightness-chip,
body.simulated-app-landscape #settings-modal .brightness-chip {
  padding: 2px 0 !important;
  font-size: 8.5px !important;
  border-radius: 4px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-devices-list,
body.mode-mobile-landscape #settings-modal .settings-devices-list,
body.simulated-app-landscape #settings-modal .settings-devices-list {
  max-height: 52px !important;
  gap: 3px !important;
  overflow-y: auto !important;
}

body.mode-landscape.is-mobile #settings-modal .device-entry,
body.mode-mobile-landscape #settings-modal .device-entry,
body.simulated-app-landscape #settings-modal .device-entry {
  padding: 3px 6px !important;
  min-height: 22px !important;
  font-size: 9.5px !important;
  border-radius: 5px !important;
}

body.mode-landscape.is-mobile #settings-modal .subscription-card-box,
body.mode-mobile-landscape #settings-modal .subscription-card-box,
body.simulated-app-landscape #settings-modal .subscription-card-box,
body.mode-landscape.is-mobile #settings-modal .version-card-box,
body.mode-mobile-landscape #settings-modal .version-card-box,
body.simulated-app-landscape #settings-modal .version-card-box {
  padding: 4px 7px !important;
  gap: 2px !important;
  border-radius: 7px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-item,
body.mode-mobile-landscape #settings-modal .settings-item,
body.simulated-app-landscape #settings-modal .settings-item {
  padding: 3px 6px !important;
  border-radius: 5px !important;
  font-size: 10px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-label,
body.mode-landscape.is-mobile #settings-modal .settings-val,
body.mode-mobile-landscape #settings-modal .settings-label,
body.mode-mobile-landscape #settings-modal .settings-val,
body.simulated-app-landscape #settings-modal .settings-label,
body.simulated-app-landscape #settings-modal .settings-val {
  font-size: 10px !important;
}

body.mode-landscape.is-mobile #settings-modal .sub-status-pill,
body.mode-mobile-landscape #settings-modal .sub-status-pill,
body.simulated-app-landscape #settings-modal .sub-status-pill {
  font-size: 8px !important;
  padding: 1px 5px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-renew-link-btn,
body.mode-mobile-landscape #settings-modal .settings-renew-link-btn,
body.simulated-app-landscape #settings-modal .settings-renew-link-btn {
  padding: 3px 8px !important;
  font-size: 9.5px !important;
  border-radius: 5px !important;
}

body.mode-landscape.is-mobile #settings-modal .pwa-install-btn,
body.mode-mobile-landscape #settings-modal .pwa-install-btn,
body.simulated-app-landscape #settings-modal .pwa-install-btn {
  padding: 2px 6px !important;
  font-size: 9px !important;
  border-radius: 5px !important;
  height: 22px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-modal-footer,
body.mode-mobile-landscape #settings-modal .settings-modal-footer,
body.simulated-app-landscape #settings-modal .settings-modal-footer {
  flex: 0 0 auto !important;
  padding-top: 4px !important;
  padding-bottom: 2px !important;
  margin-top: 0 !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-logout-btn,
body.mode-mobile-landscape #settings-modal .settings-logout-btn,
body.simulated-app-landscape #settings-modal .settings-logout-btn {
  height: 32px !important;
  min-height: 32px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  gap: 6px !important;
}

body.mode-landscape.is-mobile #settings-modal .settings-logout-btn svg,
body.mode-mobile-landscape #settings-modal .settings-logout-btn svg,
body.simulated-app-landscape #settings-modal .settings-logout-btn svg {
  width: 14px !important;
  height: 14px !important;
}

@media (orientation: landscape) and (max-height: 540px) {
  .app-header {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 max(16px, env(safe-area-inset-right, 16px)) 0 max(16px, env(safe-area-inset-left, 16px)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .header-left {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    z-index: 2 !important;
    order: 1 !important;
  }

  .brand-logo-glow {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }

  .brand-text,
  .brand-name {
    display: none !important;
  }

  .mobile-menu-toggle-btn {
    display: none !important;
  }

  .nav-tabs {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-content: safe center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 5px !important;
    margin: 0 auto !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
    z-index: 1 !important;
    order: 2 !important;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .nav-tab-btn {
    height: 26px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 13px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.72) !important;
    gap: 5px !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
  }

  .nav-tab-btn.active {
    background: #ffffff !important;
    border: none !important;
    color: #111111 !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
    padding: 0 13px !important;
  }

  .header-right {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    margin-left: 0 !important;
    z-index: 2 !important;
    order: 3 !important;
  }

  #header-orientation-btn,
  #header-fullscreen-btn,
  #header-settings-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 7px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  #pwa-install-btn {
    display: none !important;
  }

  .hero-slider-wrap {
    height: clamp(88px, 23vh, 114px) !important;
    min-height: 0 !important;
    max-height: 114px !important;
    margin: 4px 10px 4px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 229, 204, 0.35) !important;
  }

  .hero-content {
    left: 12px !important;
    bottom: 8px !important;
    right: 60px !important;
    gap: 2px !important;
  }

  .hero-tag {
    font-size: 8px !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
  }

  .hero-title {
    font-size: 14px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.2px !important;
  }

  .hero-subtitle {
    font-size: 10px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .hero-dots-row {
    right: 12px !important;
    bottom: 8px !important;
    gap: 4px !important;
  }

  .hero-dot {
    width: 5px !important;
    height: 5px !important;
  }

  .hero-dot.active {
    width: 12px !important;
  }

  .shortcuts-row-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 2px 10px 4px !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .shortcuts-row-container::-webkit-scrollbar {
    display: none !important;
  }

  .shortcut-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: clamp(9px, 1.2vw, 10.5px) !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .shortcut-card span:not(.shortcut-icon) {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }

  .shortcut-icon {
    font-size: clamp(11px, 1.4vw, 13px) !important;
    flex-shrink: 0 !important;
  }

  .content-scroll-area {
    height: calc(100dvh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    padding-left: max(14px, env(safe-area-inset-left, 14px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 14px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .content-scroll-area.home-fixed-mode {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
    height: calc(100dvh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
  }

  .content-scroll-area.home-fixed-mode #content-container {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
  }

  .home-fixed-top-section {
    position: static !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  .home-scroll-bottom-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: 24px !important;
  }

  .section-wrapper {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .section-header-row {
    padding: 0 10px !important;
    margin-bottom: 3px !important;
  }

  .section-title {
    font-size: 12.5px !important;
    letter-spacing: 0.3px !important;
  }

  .channel-card-item {
    width: 124px !important;
  }

  .channel-card-box {
    height: 72px !important;
    border-radius: 10px !important;
  }

  .poster-card-item {
    width: 94px !important;
  }

  .poster-card-box {
    height: 134px !important;
    border-radius: 10px !important;
  }

  .card-title-text {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.2 !important;
    font-size: 11px !important;
    height: 26px !important;
    padding: 0 2px !important;
  }

  .iptv-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)) !important;
    gap: 10px !important;
    padding: 8px 12px 24px !important;
  }

  .iptv-card-box {
    height: 82px !important;
    border-radius: 10px !important;
  }

  .radio-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
    padding: 8px 12px 24px !important;
  }

  .radio-card {
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }

  .radio-logo {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }

  .radio-title {
    font-size: 11.5px !important;
  }

  .music-grid {
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)) !important;
    gap: 10px !important;
    padding: 8px 12px 24px !important;
  }

  .music-card {
    border-radius: 10px !important;
  }

  .music-info-col {
    padding: 6px 8px !important;
    gap: 2px !important;
  }

  .music-title-text {
    font-size: 11px !important;
  }

  #settings-modal {
    padding: max(4px, env(safe-area-inset-top, 4px)) max(12px, env(safe-area-inset-right, 12px)) max(4px, env(safe-area-inset-bottom, 4px)) max(12px, env(safe-area-inset-left, 12px)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
  }

  #settings-modal.active {
    display: flex !important;
  }

  #settings-modal .modal-card {
    width: 95% !important;
    max-width: min(840px, 95vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(calc(100% - 10px), calc(100dvh - 10px), calc(100vh - 10px)) !important;
    padding: 8px 14px 6px !important;
    gap: 4px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #settings-modal .modal-header {
    flex: 0 0 auto !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  #settings-modal .modal-header-brand {
    gap: 8px !important;
  }

  #settings-modal .settings-gear-badge {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
  }

  #settings-modal .settings-gear-badge svg {
    width: 14px !important;
    height: 14px !important;
  }

  #settings-modal .modal-title {
    font-size: 13.5px !important;
    letter-spacing: 0.6px !important;
  }

  #settings-modal .settings-modal-sub {
    font-size: 9px !important;
    margin-top: 1px !important;
  }

  #settings-modal .modal-close-round-btn {
    width: 24px !important;
    height: 24px !important;
  }

  #settings-modal .modal-close-round-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  #settings-modal .settings-scroll-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding-right: 4px !important;
  }

  #settings-modal .settings-profile-banner {
    padding: 5px 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    margin-bottom: 2px !important;
  }

  #settings-modal .settings-avatar-badge {
    width: 26px !important;
    height: 26px !important;
  }

  #settings-modal .settings-avatar-badge svg {
    width: 15px !important;
    height: 15px !important;
  }

  #settings-modal .settings-profile-name {
    font-size: 12.5px !important;
  }

  #settings-modal .settings-profile-sub {
    font-size: 9.5px !important;
  }

  #settings-modal .settings-status-pill {
    font-size: 8.5px !important;
    padding: 1.5px 6px !important;
  }

  #settings-modal .settings-grid-layout {
    display: grid !important;
    grid-template-columns: 1.06fr 1fr !important;
    gap: 5px 12px !important;
    align-items: start !important;
  }

  #settings-modal .settings-grid-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  #settings-modal .settings-section-header {
    font-size: 9px !important;
    letter-spacing: 0.8px !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
  }

  #settings-modal .settings-brightness-box {
    padding: 5px 8px !important;
    gap: 3px !important;
    border-radius: 8px !important;
  }

  #settings-modal .settings-brightness-title-row {
    font-size: 10px !important;
  }

  #settings-modal .settings-brightness-control-row {
    gap: 6px !important;
  }

  #settings-modal .brightness-step-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
  }

  #settings-modal .brightness-range {
    height: 4px !important;
  }

  #settings-modal .brightness-presets-row {
    gap: 3px !important;
    margin-top: 2px !important;
  }

  #settings-modal .brightness-chip {
    padding: 2px 0 !important;
    font-size: 8.5px !important;
    border-radius: 4px !important;
  }

  #settings-modal .settings-devices-list {
    max-height: 52px !important;
    gap: 3px !important;
    overflow-y: auto !important;
  }

  #settings-modal .device-entry {
    padding: 3px 6px !important;
    min-height: 22px !important;
    font-size: 9.5px !important;
    border-radius: 5px !important;
  }

  #settings-modal .device-tag {
    font-size: 8px !important;
    padding: 2px 5px !important;
  }

  #settings-modal .subscription-card-box,
  #settings-modal .version-card-box {
    padding: 4px 7px !important;
    gap: 2px !important;
    border-radius: 7px !important;
  }

  #settings-modal .settings-item {
    padding: 3px 6px !important;
    border-radius: 5px !important;
    font-size: 10px !important;
  }

  #settings-modal .settings-label,
  #settings-modal .settings-val {
    font-size: 10px !important;
  }

  #settings-modal .sub-status-pill {
    font-size: 8px !important;
    padding: 1px 5px !important;
  }

  #settings-modal .settings-renew-link-btn {
    padding: 3px 8px !important;
    font-size: 9.5px !important;
    border-radius: 5px !important;
  }

  #settings-modal .pwa-install-btn {
    padding: 2px 6px !important;
    font-size: 9px !important;
    border-radius: 5px !important;
    height: 22px !important;
  }

  #settings-modal .settings-modal-footer {
    flex: 0 0 auto !important;
    padding-top: 4px !important;
    padding-bottom: 2px !important;
    margin-top: 0 !important;
  }

  #settings-modal .settings-logout-btn {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    gap: 6px !important;
  }

  #settings-modal .settings-logout-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
}

:fullscreen,
:-webkit-full-screen,
body.fullscreen-mode {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #07051a !important;
}

:fullscreen:not(.simulated-app-landscape) #app-root,
:-webkit-full-screen:not(.simulated-app-landscape) #app-root,
body.fullscreen-mode:not(.simulated-app-landscape) #app-root {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
}

body.mode-portrait:not(.simulated-app-landscape) .app-header,
body.mode-portrait.fullscreen-mode:not(.simulated-app-landscape) .app-header {
  height: calc(52px + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
  padding-top: max(8px, env(safe-area-inset-top, 8px)) !important;
  box-sizing: border-box !important;
}

body.mode-portrait:not(.simulated-app-landscape) .content-scroll-area,
body.mode-portrait.fullscreen-mode:not(.simulated-app-landscape) .content-scroll-area {
  height: calc(100dvh - 52px - env(safe-area-inset-top, 0px)) !important;
  max-height: calc(100dvh - 52px - env(safe-area-inset-top, 0px)) !important;
  box-sizing: border-box !important;
}

body.simulated-app-landscape {
  overflow: hidden !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  position: fixed !important;
  inset: 0 !important;
  background: #07051a !important;
}

body.simulated-app-landscape #app-root,
body.simulated-app-landscape.fullscreen-mode #app-root {
  position: fixed !important;
  top: 0 !important;
  left: 100vw !important;
  right: auto !important;
  bottom: auto !important;
  width: 100dvh !important;
  height: 100dvw !important;
  max-width: 100dvh !important;
  max-height: 100dvw !important;
  transform: rotate(90deg) !important;
  transform-origin: top left !important;
  padding-left: max(44px, env(safe-area-inset-top, 44px)) !important;
  padding-right: max(20px, env(safe-area-inset-bottom, 20px)) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #07051a !important;
}

body.simulated-app-landscape .app-header,
body.simulated-app-landscape.fullscreen-mode .app-header {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

body.simulated-app-landscape .content-scroll-area,
body.simulated-app-landscape.fullscreen-mode .content-scroll-area {
  height: calc(100dvw - 40px) !important;
  max-height: calc(100dvw - 40px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 14px 20px !important;
}

body.simulated-app-landscape .mobile-menu-toggle-btn {
  display: none !important;
}

body.simulated-app-landscape .nav-tabs {
  display: flex !important;
  flex: 1 1 auto !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

body.simulated-app-landscape .nav-tabs::-webkit-scrollbar {
  display: none !important;
}

body.simulated-app-landscape #player-screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

body.simulated-app-landscape #settings-modal .modal-card {
  max-height: calc(100dvw - 16px) !important;
  max-width: min(840px, 94dvh) !important;
}

body.simulated-app-landscape #login-screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(8px, env(safe-area-inset-top, 8px)) max(16px, env(safe-area-inset-right, 16px)) max(8px, env(safe-area-inset-bottom, 8px)) max(16px, env(safe-area-inset-left, 16px)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

body.simulated-app-landscape .login-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: min(440px, 90dvh) !important;
  max-height: calc(100dvw - 16px) !important;
  padding: 14px 22px !important;
  gap: 8px !important;
  margin: auto !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 229, 204, 0.15) !important;
}

body.simulated-app-landscape .login-logo-circle {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.simulated-app-landscape .login-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 3px !important;
}

body.simulated-app-landscape .login-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
}

body.simulated-app-landscape .login-subtitle {
  font-size: 11.5px !important;
  color: var(--text-secondary) !important;
  display: block !important;
}

body.simulated-app-landscape .login-form {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.simulated-app-landscape .input-group {
  flex-direction: column !important;
  gap: 4px !important;
}

body.simulated-app-landscape .input-group label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
}

body.simulated-app-landscape .input-box {
  height: 40px !important;
  font-size: 14px !important;
  padding: 0 14px !important;
  border-radius: var(--radius-md) !important;
}

body.simulated-app-landscape .input-box.with-icon {
  padding-left: 40px !important;
}

body.simulated-app-landscape .field-icon {
  left: 13px !important;
  width: 16px !important;
  height: 16px !important;
}

body.simulated-app-landscape .login-btn-row {
  gap: 8px !important;
  width: 100% !important;
}

body.simulated-app-landscape .login-btn {
  height: 40px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
}

@media (orientation: landscape) and (max-height: 540px) {

  :fullscreen .content-scroll-area,
  :-webkit-full-screen .content-scroll-area,
  body.fullscreen-mode .content-scroll-area {
    height: calc(100dvh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
  }
}

body.mode-landscape.is-mobile.fullscreen-mode .content-scroll-area,
body.mode-mobile-landscape.fullscreen-mode .content-scroll-area {
  height: calc(100dvh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
}

#player-screen.simulated-player-landscape {
  position: fixed !important;
  top: 0 !important;
  left: 100vw !important;
  width: 100dvh !important;
  height: 100dvw !important;
  transform: rotate(90deg) !important;
  transform-origin: top left !important;
  z-index: 99999 !important;
}

#player-screen.simulated-player-landscape .video-wrapper,
#player-screen.simulated-player-landscape #main-video {
  width: 100% !important;
  height: 100% !important;
}

#player-screen.simulated-player-landscape #main-video:not(.fit-fill):not(.fit-cover) {
  object-fit: contain !important;
}

#player-screen.simulated-player-landscape .player-osd {
  width: 100% !important;
  height: 100% !important;
  padding-top: max(12px, env(safe-area-inset-right, 12px)) !important;
  padding-bottom: max(12px, env(safe-area-inset-left, 12px)) !important;
  padding-left: max(44px, env(safe-area-inset-top, 44px)) !important;
  padding-right: max(20px, env(safe-area-inset-bottom, 20px)) !important;
  box-sizing: border-box !important;
}

#player-screen.simulated-player-landscape .player-osd-top,
#player-screen.simulated-player-landscape .player-osd-bottom {
  width: 100% !important;
}

#player-screen.simulated-player-landscape .osd-ctrl-btn,
#player-screen.simulated-player-landscape .osd-circle-action-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

body.player-in-simulated-landscape {
  overflow: hidden !important;
}

.osd-ctrl-btn,
.osd-circle-action-btn,
.osd-pill-btn,
.header-icon-btn,
.rotate-bar-action-btn,
.audio-ctrl-btn,
.audio-play-btn,
.osd-back-btn {
  touch-action: manipulation;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.osd-ctrl-btn:active,
.osd-circle-action-btn:active,
.osd-pill-btn:active,
.osd-back-btn:active {
  transform: scale(0.92);
  opacity: 0.88;
}

.osd-ctrl-btn svg,
.osd-circle-action-btn svg,
.osd-pill-btn svg,
.osd-back-btn svg,
.osd-ctrl-btn *,
.osd-circle-action-btn *,
.osd-pill-btn *,
.osd-back-btn * {
  pointer-events: none;
}

.rotate-bar-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
}

.rotate-bar-action-btn {
  padding: 4px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00e5cc, #00b4d8);
  color: #0c0a20;
  font-size: 11px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 229, 204, 0.4);
  transition: transform 0.2s ease;
  white-space: nowrap;
}

.rotate-bar-action-btn:active {
  transform: scale(0.95);
}

.content-scroll-area,
.horizontal-scroll-row {
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}

.channel-card-item,
.poster-card-item {
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: 160px 100px;
}

.poster-card-img,
.channel-logo-img {
  image-rendering: auto;
}

@media (max-width: 480px) {
  #login-screen {
    padding: max(16px, env(safe-area-inset-top, 16px)) 12px max(24px, env(safe-area-inset-bottom, 24px));
  }

  .login-card {
    max-width: 100%;
    padding: 20px 16px;
    gap: 12px;
    border-radius: 18px;
  }

  .login-logo-circle {
    width: 52px;
    height: 52px;
  }

  .login-title {
    font-size: 21px;
    letter-spacing: 1.5px;
  }

  .login-subtitle {
    font-size: 12px;
  }

  .input-box {
    height: 46px;
    font-size: 14.5px;
    padding: 0 12px;
  }

  .input-box.with-icon {
    padding-left: 38px;
  }

  .login-btn-row {
    gap: 8px;
  }

  .login-btn {
    height: 44px;
    font-size: 13px;
    letter-spacing: 0.5px;
  }

  .pin-chip {
    height: 50px;
    font-size: 20px;
    letter-spacing: 2px;
  }
}

@media (orientation: portrait) and (max-height: 580px) {
  #login-screen {
    padding: max(8px, env(safe-area-inset-top, 8px)) max(14px, env(safe-area-inset-right, 14px)) max(14px, env(safe-area-inset-bottom, 14px)) max(14px, env(safe-area-inset-left, 14px));
    justify-content: flex-start;
  }

  .login-card {
    max-width: min(440px, 96vw);
    padding: 12px 18px;
    gap: 8px;
    margin: 4px auto;
    border-radius: 14px;
  }

  .login-logo-circle {
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .login-header {
    gap: 2px;
  }

  .login-title {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .login-subtitle {
    display: none;
  }

  .user-badge-pill {
    padding: 3px 10px;
    font-size: 11.5px;
  }

  .login-form {
    gap: 8px;
  }

  .input-group {
    gap: 3px;
  }

  .input-group label {
    font-size: 10.5px;
  }

  .input-box {
    height: 36px;
    font-size: 13px;
  }

  .login-btn-row {
    gap: 6px;
  }

  .manual-pin-container .login-btn-row {
    margin-top: 8px;
    gap: 8px;
  }

  .login-btn {
    height: 36px;
    font-size: 12px;
  }

  .pin-chips {
    gap: 8px;
  }

  .pin-chip {
    height: 40px;
    font-size: 16px;
    letter-spacing: 1.5px;
  }

  .pin-toggle-btn {
    width: 28px;
    height: 28px;
    right: 4px;
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  #login-screen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(8px, env(safe-area-inset-top, 8px)) max(16px, env(safe-area-inset-right, 16px)) max(8px, env(safe-area-inset-bottom, 8px)) max(16px, env(safe-area-inset-left, 16px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .login-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: min(440px, 90vw) !important;
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 14px 22px !important;
    gap: 8px !important;
    margin: auto !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 229, 204, 0.15) !important;
  }

  .login-logo-circle {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .login-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 3px !important;
  }

  .login-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
  }

  .login-subtitle {
    font-size: 11.5px !important;
    color: var(--text-secondary) !important;
    display: block !important;
  }

  .login-form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .input-group {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .input-group label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
  }

  .input-box {
    height: 40px !important;
    font-size: 14px !important;
    padding: 0 14px !important;
    border-radius: var(--radius-md) !important;
  }

  .input-box.with-icon {
    padding-left: 40px !important;
  }

  .field-icon {
    left: 13px !important;
    width: 16px !important;
    height: 16px !important;
  }

  .login-btn-row {
    gap: 8px !important;
    width: 100% !important;
  }

  .login-btn {
    height: 40px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
  }

  .pin-chips {
    gap: 8px !important;
  }

  .pin-chip {
    height: 38px !important;
    font-size: 16px !important;
  }

  .pin-input-wrapper {
    height: 40px !important;
  }

  .pin-toggle-btn {
    width: 30px !important;
    height: 30px !important;
    right: 6px !important;
  }

  .login-error {
    font-size: 11.5px !important;
    padding: 6px 10px !important;
    line-height: 1.35 !important;
  }

  .login-status-banner {
    font-size: 11.5px !important;
    padding: 6px 10px !important;
  }
}

#login-btn-row[style*="display: none"],
#login-btn-row[style*="display:none"],
#username-input-group[style*="display: none"],
#username-input-group[style*="display:none"],
#manual-pin-container[style*="display: none"],
#manual-pin-container[style*="display:none"],
#pin-options-container[style*="display: none"],
#pin-options-container[style*="display:none"],
#user-badge-pill[style*="display: none"],
#user-badge-pill[style*="display:none"],
#login-status-banner[style*="display: none"],
#login-status-banner[style*="display:none"],
#login-error-msg[style*="display: none"],
#login-error-msg[style*="display:none"],
#login-btn-change[style*="display: none"],
#login-btn-change[style*="display:none"] {
  display: none !important;
}

@media (orientation: landscape) and (max-height: 375px) {
  #settings-modal .modal-card {
    padding: 6px 14px 4px !important;
    gap: 4px !important;
    max-width: min(760px, 96vw) !important;
    max-height: calc(100dvh - 8px) !important;
    max-height: calc(100vh - 8px) !important;
  }

  #settings-modal .modal-header {
    padding-bottom: 4px !important;
  }

  #settings-modal .settings-gear-badge {
    width: 24px !important;
    height: 24px !important;
  }

  #settings-modal .modal-title {
    font-size: 13px !important;
  }

  #settings-modal .settings-modal-sub {
    font-size: 9px !important;
  }

  #settings-modal .modal-close-round-btn {
    width: 24px !important;
    height: 24px !important;
  }

  #settings-modal .settings-scroll-body {
    gap: 4px !important;
  }

  #settings-modal .settings-profile-banner {
    padding: 4px 10px !important;
    gap: 8px !important;
  }

  #settings-modal .settings-avatar-badge {
    width: 26px !important;
    height: 26px !important;
  }

  #settings-modal .settings-profile-name {
    font-size: 12px !important;
  }

  #settings-modal .settings-profile-sub {
    font-size: 9.5px !important;
  }

  #settings-modal .settings-grid-layout {
    display: grid !important;
    grid-template-columns: 1.06fr 1fr !important;
    gap: 5px 12px !important;
    align-items: start !important;
  }

  #settings-modal .settings-grid-col {
    gap: 3px !important;
  }

  #settings-modal .settings-section-header {
    font-size: 9px !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
  }

  #settings-modal .settings-brightness-box {
    padding: 5px 8px !important;
    gap: 3px !important;
  }

  #settings-modal .settings-devices-list {
    max-height: 48px !important;
    gap: 2px !important;
  }

  #settings-modal .device-entry {
    padding: 2.5px 6px !important;
    min-height: 22px !important;
    font-size: 9.5px !important;
  }

  #settings-modal .subscription-card-box,
  #settings-modal .version-card-box {
    padding: 4px 7px !important;
    gap: 3px !important;
  }

  #settings-modal .settings-item {
    padding: 3px 6px !important;
    font-size: 10px !important;
  }

  #settings-modal .settings-label,
  #settings-modal .settings-val {
    font-size: 10px !important;
  }

  #settings-modal .settings-renew-link-btn {
    padding: 3.5px 7px !important;
    font-size: 9.5px !important;
  }

  #settings-modal .pwa-install-btn {
    padding: 2px 6px !important;
    font-size: 9px !important;
    height: 22px !important;
  }

  #settings-modal .settings-modal-footer {
    padding-top: 3px !important;
  }

  #settings-modal .settings-logout-btn {
    height: 28px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
  }
}

.sub-status-pill {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  background: rgba(0, 229, 204, 0.16);
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 229, 204, 0.4);
}

.sub-status-pill.sub-status-active {
  background: rgba(0, 229, 204, 0.16);
  color: var(--neon-cyan);
  border-color: rgba(0, 229, 204, 0.4);
}

.sub-status-pill.sub-status-warning {
  background: rgba(255, 171, 0, 0.18);
  color: #ffab00;
  border-color: rgba(255, 171, 0, 0.45);
}

.sub-status-pill.sub-status-expired {
  background: rgba(255, 45, 85, 0.2);
  color: #ff2d55;
  border-color: rgba(255, 45, 85, 0.45);
}

.settings-renew-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 229, 204, 0.2), rgba(124, 77, 255, 0.2));
  border: 1px solid rgba(0, 229, 204, 0.4);
  color: #00e5cc;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-renew-link-btn:hover {
  background: linear-gradient(135deg, rgba(0, 229, 204, 0.35), rgba(124, 77, 255, 0.35));
  box-shadow: 0 0 16px rgba(0, 229, 204, 0.3);
}

.subscription-modal-card {
  max-width: 420px;
  text-align: center;
  padding: 28px 24px;
  background: rgba(18, 14, 61, 0.92);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 45, 85, 0.4);
  box-shadow: 0 0 35px rgba(255, 45, 85, 0.25), 0 20px 40px rgba(0, 0, 0, 0.8);
}

.subscription-modal-icon {
  font-size: 44px;
  margin-bottom: 8px;
}

.subscription-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #ff2d55;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.subscription-modal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 16px;
}

.subscription-modal-details {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  text-align: left;
  font-size: 13px;
}

.sub-detail-row {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
}

.sub-detail-row strong {
  color: #ffffff;
}

.subscription-modal-btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.sub-contact-link-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  background: rgba(37, 211, 102, 0.18);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.45);
  transition: all 0.2s ease;
  cursor: pointer;
}

.sub-contact-link-btn:hover,
.sub-contact-link-btn.tv-focus {
  background: rgba(37, 211, 102, 0.35);
  border-color: #25d366;
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.4);
  transform: translateY(-1px);
}

.sub-renew-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.sub-renew-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
}

.sub-renew-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.sub-input:focus,
.sub-input.tv-focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 204, 0.35);
}

.sub-renew-status {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

.sub-renew-status.success {
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.4);
  color: #25d366;
}

.sub-renew-status.error {
  background: rgba(255, 45, 85, 0.15);
  border: 1px solid rgba(255, 45, 85, 0.4);
  color: #ff2d55;
}

.sub-warning-modal-card {
  max-width: 440px;
  position: relative;
  text-align: center;
  padding: 26px 22px;
  background: linear-gradient(135deg, #1e1e28 0%, #13131a 50%, #0c0c12 100%);
  border: 1.5px solid rgba(255, 184, 0, 0.6);
  border-radius: 20px;
  box-shadow: 0 0 36px rgba(255, 184, 0, 0.2), 0 20px 45px rgba(0, 0, 0, 0.85);
}

.sub-warn-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sub-warn-close:hover,
.sub-warn-close.tv-focus {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: scale(1.08);
}

.sub-warn-icon-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb800 0%, #ff6d00 100%);
  box-shadow: 0 0 22px rgba(255, 184, 0, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.sub-warning-title {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.sub-warn-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 8px;
  background: rgba(255, 184, 0, 0.15);
  border: 1px solid rgba(255, 184, 0, 0.4);
  color: #ffb800;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
}

.sub-warn-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
  margin-bottom: 14px;
}

.sub-warning-details {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 18px;
}

.sub-warning-btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.sub-warn-snooze-btn {
  flex: 1;
  padding: 12px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sub-warn-snooze-btn:hover,
.sub-warn-snooze-btn.tv-focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

.sub-warn-renew-btn {
  flex: 1;
  padding: 12px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #000000;
  background: #ffb800;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 184, 0, 0.35);
  transition: all 0.2s ease;
}

.sub-warn-renew-btn:hover,
.sub-warn-renew-btn.tv-focus {
  background: #ffc425;
  box-shadow: 0 0 20px rgba(255, 184, 0, 0.6);
  border: 2px solid #ffffff;
  transform: translateY(-1px);
}

.skeleton-card {
  pointer-events: none;
  opacity: 0.85;
}

.skeleton-box {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite linear;
  border-radius: 12px;
}

.skeleton-text {
  height: 12px;
  width: 70%;
  margin: 6px auto 0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite linear;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

body.is-tv #settings-modal .modal-card {
  max-width: 820px !important;
  width: 90% !important;
  height: auto !important;
  min-height: 380px !important;
  max-height: 88vh !important;
  padding: 18px 24px 14px !important;
}

body.is-tv #settings-modal .settings-scroll-body {
  flex: 1 1 auto !important;
  min-height: 260px !important;
  max-height: 65vh !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

body.is-tv #settings-modal .settings-grid-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 18px !important;
}

.drawer-channel-list {
  scroll-behavior: smooth;
}

#drawer-close-btn.tv-focus,
#drawer-close-btn:focus-visible {
  outline: none !important;
  background: rgba(0, 229, 204, 0.25) !important;
  color: #00e5cc !important;
  box-shadow: 0 0 0 2px #00e5cc, 0 0 16px rgba(0, 229, 204, 0.5) !important;
  transform: scale(1.1) !important;
}

.osd-pill-btn.tv-focus,
.osd-pill-btn:focus-visible,
#audio-list-pill.tv-focus,
#audio-list-pill:focus-visible {
  outline: none !important;
  background: rgba(0, 229, 204, 0.3) !important;
  border-color: #00e5cc !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #00e5cc, 0 0 20px rgba(0, 229, 204, 0.6) !important;
  transform: scale(1.05) !important;
}

.audio-ctrl-btn.tv-focus,
.audio-ctrl-btn:focus-visible {
  outline: none !important;
  background: rgba(0, 229, 204, 0.25) !important;
  color: #00e5cc !important;
  box-shadow: 0 0 0 2px #00e5cc, 0 0 16px rgba(0, 229, 204, 0.5) !important;
  transform: scale(1.1) !important;
}

body.is-tv .app-header,
body.is-tv.fullscreen-mode .app-header {
  height: auto !important;
  min-height: 54px !important;
  max-height: none !important;
  padding-top: max(14px, env(safe-area-inset-top, 14px)) !important;
  padding-bottom: 6px !important;
  padding-left: max(18px, env(safe-area-inset-left, 18px)) !important;
  padding-right: max(18px, env(safe-area-inset-right, 18px)) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  overflow: hidden !important;
}

body.is-tv .header-left,
body.is-tv.fullscreen-mode .header-left {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  order: 1 !important;
  z-index: 3 !important;
}

body.is-tv .brand-badge,
body.is-tv.fullscreen-mode .brand-badge {
  gap: 12px !important;
}

body.is-tv .brand-logo-glow,
body.is-tv.fullscreen-mode .brand-logo-glow {
  width: 44px !important;
  height: 44px !important;
  border-radius: 11px !important;
}

body.is-tv .brand-text,
body.is-tv.fullscreen-mode .brand-text {
  display: flex !important;
}

body.is-tv .brand-name,
body.is-tv.fullscreen-mode .brand-name {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
}

body.is-tv .header-right,
body.is-tv.fullscreen-mode .header-right {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  order: 3 !important;
  z-index: 3 !important;
}

body.is-tv .nav-capsule-bar,
body.is-tv.fullscreen-mode .nav-capsule-bar {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  margin: 0 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  overflow: hidden !important;
  order: 2 !important;
  z-index: 2 !important;
}

body.is-tv .mobile-menu-toggle-btn,
body.is-tv.fullscreen-mode .mobile-menu-toggle-btn {
  display: none !important;
}

body.is-tv .nav-tabs,
body.is-tv.fullscreen-mode .nav-tabs {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-content: safe center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 5px !important;
  margin: 0 auto !important;
  padding: 2px 4px !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  scroll-behavior: smooth !important;
}

body.is-tv .nav-tabs::-webkit-scrollbar,
body.is-tv.fullscreen-mode .nav-tabs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.is-tv .nav-tab-btn,
body.is-tv.fullscreen-mode .nav-tab-btn {
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  gap: 7px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.is-tv .nav-tab-btn.active,
body.is-tv.fullscreen-mode .nav-tab-btn.active {
  background: #ffffff !important;
  color: #111111 !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  border: none !important;
}

body.is-tv #pwa-install-btn:not(.installed),
body.is-tv.fullscreen-mode #pwa-install-btn:not(.installed) {
  height: 30px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 15px !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.is-tv #pwa-install-btn.installed,
body.is-tv.fullscreen-mode #pwa-install-btn.installed {
  display: none !important;
}

#settings-install-btn.installed,
.settings-item #settings-install-btn.installed {
  display: inline-flex !important;
  background: rgba(0, 200, 83, 0.22) !important;
  border: 1.5px solid #00C853 !important;
  color: #00E676 !important;
  box-shadow: 0 0 16px rgba(0, 200, 83, 0.4) !important;
  pointer-events: none !important;
  cursor: default !important;
  font-weight: 700 !important;
}

#settings-install-btn.installed svg {
  stroke: #00E676 !important;
}

body.is-tv #header-fullscreen-btn,
body.is-tv #header-settings-btn,
body.is-tv.fullscreen-mode #header-fullscreen-btn,
body.is-tv.fullscreen-mode #header-settings-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body.is-tv .content-scroll-area,
body.is-tv.fullscreen-mode .content-scroll-area {
  height: calc(100dvh - 54px) !important;
  max-height: calc(100dvh - 54px) !important;
}

@media (min-width: 960px) and (min-height: 521px) {
  body:not(.is-mobile) .app-header {
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    padding-top: max(14px, env(safe-area-inset-top, 14px)) !important;
    padding-bottom: 6px !important;
    padding-left: max(18px, env(safe-area-inset-left, 18px)) !important;
    padding-right: max(18px, env(safe-area-inset-right, 18px)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  body:not(.is-mobile) .header-left {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    order: 1 !important;
    z-index: 3 !important;
  }

  body:not(.is-mobile) .nav-capsule-bar {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    margin: 0 auto !important;
    min-width: 0 !important;
    align-items: center !important;
    overflow: hidden !important;
    order: 2 !important;
    z-index: 2 !important;
  }

  body:not(.is-mobile) .mobile-menu-toggle-btn {
    display: none !important;
  }

  body:not(.is-mobile) .brand-text {
    display: flex !important;
  }

  body:not(.is-mobile) .brand-name {
    font-size: 24px !important;
    letter-spacing: 1.5px !important;
  }

  body:not(.is-mobile) .header-right {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    order: 3 !important;
    z-index: 3 !important;
  }

  body:not(.is-mobile) .nav-tabs {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-content: safe center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 5px !important;
    margin: 0 auto !important;
    padding: 2px 4px !important;
    white-space: nowrap !important;
    z-index: 2 !important;
    scroll-behavior: smooth !important;
  }

  body:not(.is-mobile) .nav-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body:not(.is-mobile) .nav-tab-btn {
    height: 35px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    gap: 7px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:not(.is-mobile) .nav-tab-btn.active {
    background: #ffffff !important;
    color: #111111 !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    border: none !important;
  }

  body:not(.is-mobile) #pwa-install-btn:not(.installed) {
    height: 30px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 15px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:not(.is-mobile) #pwa-install-btn.installed {
    display: none !important;
  }

  body:not(.is-mobile) #header-fullscreen-btn,
  body:not(.is-mobile) #header-settings-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  body:not(.is-mobile) .content-scroll-area {
    height: calc(100dvh - 54px) !important;
    max-height: calc(100dvh - 54px) !important;
  }
}

.exit-dialog-card {
  width: min(420px, 90vw);
  max-width: 420px;
  background: linear-gradient(145deg, #1A1A1A 0%, #0A0A0A 60%, #111111 100%);
  border: 1.5px solid rgba(255, 45, 120, 0.45);
  border-radius: 22px;
  box-shadow: 0 0 45px rgba(255, 45, 120, 0.18), 0 20px 50px rgba(0, 0, 0, 0.85);
  padding: 28px 24px;
  text-align: center;
  box-sizing: border-box;
}

.exit-icon-wrap {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255, 45, 120, 0.15);
  border: 1px solid rgba(255, 45, 120, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-title {
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 1px;
  margin: 0 0 8px;
}

.exit-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  margin: 0 0 24px;
}

.exit-btn-row {
  display: flex;
  gap: 14px;
  width: 100%;
}

.exit-btn {
  flex: 1;
  padding: 13px 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  border: 1.5px solid transparent;
}

.exit-btn-no {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.exit-btn-no:hover,
.exit-btn-no:focus,
.exit-btn-no.tv-focus {
  background: linear-gradient(135deg, #00E5CC 0%, #00B4D8 100%) !important;
  border-color: #00E5CC !important;
  color: #000000 !important;
  box-shadow: 0 0 22px rgba(0, 229, 204, 0.5) !important;
  transform: scale(1.04);
}

.exit-btn-yes {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 45, 120, 0.3);
  color: #FFFFFF;
}

.exit-btn-yes:hover,
.exit-btn-yes:focus,
.exit-btn-yes.tv-focus {
  background: linear-gradient(135deg, #FF2D78 0%, #FF6B81 100%) !important;
  border-color: #FF2D78 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 22px rgba(255, 45, 120, 0.5) !important;
  transform: scale(1.04);
}

@media (orientation: landscape) and (max-height: 540px) {
  .exit-dialog-card {
    padding: 14px 20px !important;
    max-width: 360px !important;
    border-radius: 16px !important;
  }

  .exit-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto 8px !important;
  }

  .exit-icon-wrap svg {
    width: 22px !important;
    height: 22px !important;
  }

  .exit-title {
    font-size: 16px !important;
    margin: 0 0 4px !important;
  }

  .exit-desc {
    font-size: 12px !important;
    margin: 0 0 12px !important;
  }

  .exit-btn {
    padding: 8px 0 !important;
    font-size: 13px !important;
    border-radius: 9px !important;
  }

  .subscription-modal-card,
  .sub-warning-modal-card {
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    padding: 10px 16px !important;
  }
}

.channel-num-overlay {
  position: fixed;
  top: 28px;
  right: 32px;
  z-index: 99999;
  background: rgba(15, 13, 40, 0.95);
  backdrop-filter: blur(14px);
  border: 2px solid #00E5CC;
  border-radius: 16px;
  padding: 10px 18px;
  box-shadow: 0 0 25px rgba(0, 229, 204, 0.5), 0 8px 24px rgba(0, 0, 0, 0.85);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  animation: overlayPopIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes overlayPopIn {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.channel-num-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-num-badge {
  background: #00E5CC;
  color: #000000;
  font-size: 13px;
  font-weight: 900;
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 1px;
}

.channel-num-digits {
  font-size: 30px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-shadow: 0 0 14px rgba(0, 229, 204, 0.8);
}

.channel-num-preview {
  font-size: 13px;
  font-weight: 700;
  color: #00E5CC;
  margin-top: 4px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-channel-switch-toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  background: rgba(10, 12, 22, 0.94);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(0, 229, 204, 0.55);
  border-radius: 14px;
  padding: 10px 24px;
  box-shadow: 0 0 25px rgba(0, 229, 204, 0.35), 0 8px 24px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  pointer-events: none;
  animation: toastFadeIn 0.25s ease;
}

@keyframes toastFadeIn {
  0% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.iptv-card-box {
  position: relative;
}

.iptv-card-box .card-badge-ch {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 229, 204, 0.2);
  border: 1px solid rgba(0, 229, 204, 0.5);
  color: #00E5CC;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  z-index: 2;
}

@media (min-width: 1024px) {
  .section-wrapper {
    margin-top: 3px;
    margin-bottom: 2px;
  }

  .section-header-row {
    margin-bottom: 3px;
  }

  .horizontal-scroll-row {
    padding: 2px 20px 2px;
    gap: 14px;
  }

  .channel-card-item {
    width: 190px;
  }

  .channel-card-box {
    height: 114px;
  }

  .poster-card-item {
    width: 152px;
  }

  .poster-card-box {
    height: 220px;
  }

  .card-title-text {
    font-size: 15px;
    font-weight: 800;
  }

  .section-title-text {
    font-size: 19px;
    font-weight: 900;
  }
}

@media (min-width: 1400px) {
  .app-header {
    height: 72px;
    padding-left: 28px;
    padding-right: 28px;
  }

  .brand-badge {
    gap: 12px;
  }

  .brand-logo-glow {
    width: 42px;
    height: 42px;
  }

  .brand-text {
    display: flex !important;
  }

  .brand-name,
  body:not(.is-mobile) .brand-name {
    font-size: 28px !important;
    letter-spacing: 1.8px !important;
  }

  .nav-tab-btn {
    height: 38px;
    font-size: 13.5px;
    padding: 0 16px;
  }

  .hero-slider-wrap {
    height: 310px;
    margin: 14px 28px 8px;
  }

  .hero-title {
    font-size: 38px;
  }

  .hero-subtitle {
    font-size: 15.5px;
  }

  .shortcuts-row-container {
    padding: 4px 28px 8px;
    gap: 12px;
  }

  .shortcut-card {
    height: 56px;
    font-size: 13px;
  }

  .shortcut-icon {
    font-size: 20px;
  }

  .section-wrapper {
    margin-top: 4px;
    margin-bottom: 2px;
  }

  .section-header-row {
    padding: 0 28px;
    margin-bottom: 3px;
  }

  .horizontal-scroll-row {
    padding: 2px 28px 3px;
    gap: 16px;
  }

  .channel-card-item {
    width: 215px;
  }

  .channel-card-box {
    height: 126px;
  }

  .poster-card-item {
    width: 172px;
  }

  .poster-card-box {
    height: 250px;
  }

  .card-title-text {
    font-size: 16px;
    font-weight: 800;
  }

  .section-title-text {
    font-size: 21px;
    font-weight: 900;
  }

  .section-accent-bar {
    width: 5px;
    height: 24px;
  }

  .section-pill-btn {
    padding: 6px 16px;
    font-size: 12.5px;
  }

  .channel-card-item.tv-focus .channel-card-box,
  .poster-card-item.tv-focus .poster-card-box,
  .shortcut-card.tv-focus {
    transform: scale(1.07) translateY(-4px) !important;
    box-shadow: 0 0 0 4px #00f0d6, 0 0 35px rgba(0, 240, 214, 0.95), 0 12px 30px rgba(0, 0, 0, 0.8) !important;
    border-color: #00f0d6 !important;
  }
}

@media (min-width: 1920px) {
  .app-header {
    height: 82px;
    padding-left: 36px;
    padding-right: 36px;
  }

  .brand-badge {
    gap: 14px;
  }

  .brand-logo-glow {
    width: 48px;
    height: 48px;
  }

  .brand-text {
    display: flex !important;
  }

  .brand-name,
  body:not(.is-mobile) .brand-name,
  body.is-tv .brand-name,
  body.is-tv.fullscreen-mode .brand-name {
    font-size: 34px !important;
    letter-spacing: 2px !important;
  }

  .nav-tab-btn {
    height: 42px;
    font-size: 15px;
    padding: 0 20px;
  }

  .hero-slider-wrap {
    height: 360px;
    margin: 16px 36px 10px;
  }

  .hero-title {
    font-size: 44px;
  }

  .hero-subtitle {
    font-size: 17px;
  }

  .shortcuts-row-container {
    padding: 6px 36px 10px;
    gap: 14px;
  }

  .shortcut-card {
    height: 62px;
    font-size: 14px;
  }

  .shortcut-icon {
    font-size: 22px;
  }

  .section-wrapper {
    margin-top: 5px;
    margin-bottom: 3px;
  }

  .section-header-row {
    padding: 0 36px;
    margin-bottom: 4px;
  }

  .horizontal-scroll-row {
    padding: 2px 36px 4px;
    gap: 18px;
  }

  .channel-card-item {
    width: 245px;
  }

  .channel-card-box {
    height: 144px;
  }

  .poster-card-item {
    width: 195px;
  }

  .poster-card-box {
    height: 285px;
  }

  .card-title-text {
    font-size: 17.5px;
    font-weight: 800;
  }

  .section-title-text {
    font-size: 24px;
    font-weight: 900;
  }

  .section-accent-bar {
    width: 6px;
    height: 28px;
  }

  .section-pill-btn {
    padding: 7px 18px;
    font-size: 13.5px;
  }
}

.floating-mini-player {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(94%, 860px);
  z-index: 999;
  background: rgba(14, 18, 28, 0.94);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: miniPlayerSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes miniPlayerSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 25px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.mini-player-progress-bar-bg {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  position: relative;
  transition: height 0.15s ease;
}

.mini-player-progress-bar-bg:hover {
  height: 6px;
}

.mini-player-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d81b60, #f06292, #00e5cc);
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  transition: width 0.1s linear;
}

.mini-player-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 12px;
}

.mini-player-left {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-width: 0;
  flex: 1;
  padding: 4px;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.mini-player-left:hover {
  background: rgba(255, 255, 255, 0.06);
}

.mini-player-thumb-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.mini-player-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mini-player-thumb[src*="ytimg.com"],
.mini-player-thumb[src*="youtube.com"],
.mini-player-thumb[src*="youtu.be"],
.mini-player-thumb[src*="ggpht.com"],
.mini-player-thumb[src*="hqdefault"],
.mini-player-thumb[src*="mqdefault"],
.mini-player-thumb[src*="sddefault"],
.mini-player-thumb[src*="default.jpg"] {
  transform: scale(1.36);
  object-fit: cover;
}

.mini-player-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d81b60, #880e4f);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.mini-player-glow-ring {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.mini-player-meta {
  min-width: 0;
  overflow: hidden;
}

.mini-player-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.mini-player-artist {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.mini-player-center {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.mini-ctrl-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.82);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mini-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: scale(1.08);
}

.mini-play-btn {
  background: linear-gradient(135deg, #d81b60, #f06292);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(216, 27, 96, 0.45);
  transition: all 0.15s ease;
}

.mini-play-btn:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 20px rgba(216, 27, 96, 0.6);
}

.mini-player-time {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

.mini-player-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mini-action-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.78);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mini-action-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.mini-close-btn:hover {
  background: rgba(244, 67, 54, 0.28);
  color: #ff5252;
}

.mini-ctrl-btn.tv-focus,
.mini-ctrl-btn:focus-visible,
.mini-action-btn.tv-focus,
.mini-action-btn:focus-visible {
  background: rgba(0, 229, 204, 0.28) !important;
  color: #00e5cc !important;
  box-shadow: 0 0 0 2.5px #00e5cc, 0 0 16px rgba(0, 229, 204, 0.5) !important;
  transform: scale(1.15);
  outline: none;
}

.mini-play-btn.tv-focus,
.mini-play-btn:focus-visible {
  box-shadow: 0 0 0 3px #ffffff, 0 0 24px rgba(216, 27, 96, 0.85) !important;
  transform: scale(1.18);
  outline: none;
}

.mini-close-btn.tv-focus,
.mini-close-btn:focus-visible {
  background: rgba(244, 67, 54, 0.35) !important;
  color: #ff5252 !important;
  box-shadow: 0 0 0 2.5px #ff5252, 0 0 16px rgba(244, 67, 54, 0.6) !important;
  transform: scale(1.15);
  outline: none;
}

.mini-player-left.tv-focus,
.mini-player-left:focus-visible,
#mini-player-expand-area.tv-focus,
#mini-player-expand-area:focus-visible {
  background: rgba(0, 229, 204, 0.15) !important;
  box-shadow: 0 0 0 2px #00e5cc, 0 0 14px rgba(0, 229, 204, 0.35) !important;
  outline: none;
}

body.has-mini-player #content-container {
  padding-bottom: 95px !important;
}

.youtube-player-wrapper {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #000;
  display: none;
  opacity: 1;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.youtube-player-wrapper.active,
.youtube-player-wrapper.video-active {
  display: flex;
}

.youtube-player-wrapper.video-active {
  z-index: 65;
  pointer-events: auto;
}

.youtube-player-wrapper iframe,
#youtube-player-host {
  width: 100%;
  height: 100%;
  border: none;
}

.yt-shield-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 65px;
  z-index: 70;
  pointer-events: auto;
  background: transparent;
}

.yt-shield-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 240px;
  height: 80px;
  z-index: 70;
  pointer-events: auto;
  background: transparent;
}

.youtube-controls-overlay {
  position: absolute;
  inset: 0;
  z-index: 75;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  transition: opacity 0.25s ease;
  box-sizing: border-box;
}

.youtube-controls-overlay.controls-hidden {
  opacity: 0;
  pointer-events: none;
}

.yt-overlay-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top, 16px)) 24px 14px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.6) 70%, transparent 100%);
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  gap: 16px;
}

.yt-overlay-btn {
  background: rgba(14, 22, 36, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.yt-overlay-btn:hover {
  background: rgba(0, 229, 204, 0.22);
  border-color: #00E5CC;
  color: #00E5CC;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 229, 204, 0.3);
}

.yt-close-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
}

.yt-close-btn:hover {
  background: rgba(244, 67, 54, 0.25);
  border-color: #ff5252;
  color: #ff5252;
  box-shadow: 0 4px 16px rgba(244, 67, 54, 0.3);
}

.yt-overlay-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.yt-overlay-title {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.yt-overlay-artist {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.yt-overlay-bottombar {
  display: flex;
  flex-direction: column;
  padding: 12px 24px max(16px, env(safe-area-inset-bottom, 16px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.65) 70%, transparent 100%);
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  gap: 10px;
}

.yt-seek-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: height 0.15s ease;
}

.yt-seek-bar-bg:hover {
  height: 8px;
}

.yt-seek-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #d81b60, #ff4081, #00e5cc);
  border-radius: 4px;
  pointer-events: none;
  transition: width 0.1s linear;
}

.yt-seek-thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00E5CC;
  box-shadow: 0 0 10px rgba(0, 229, 204, 0.8);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.yt-seek-bar-bg:hover .yt-seek-thumb {
  opacity: 1;
}

.yt-bottom-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yt-bottom-left,
.yt-bottom-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yt-icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.yt-icon-btn:hover {
  background: rgba(0, 229, 204, 0.25);
  color: #00E5CC;
  transform: scale(1.08);
}

.yt-overlay-btn.tv-focus,
.yt-overlay-btn:focus-visible,
.yt-icon-btn.tv-focus,
.yt-icon-btn:focus-visible {
  background: rgba(0, 229, 204, 0.3) !important;
  color: #00e5cc !important;
  box-shadow: 0 0 0 2.5px #00e5cc, 0 0 18px rgba(0, 229, 204, 0.65) !important;
  transform: scale(1.12);
  outline: none;
}

.yt-close-btn.tv-focus,
.yt-close-btn:focus-visible {
  background: rgba(244, 67, 54, 0.35) !important;
  color: #ff5252 !important;
  box-shadow: 0 0 0 2.5px #ff5252, 0 0 18px rgba(244, 67, 54, 0.65) !important;
  transform: scale(1.12);
  outline: none;
}

.yt-time-text {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

@media (max-width: 400px) {
  .floating-mini-player {
    bottom: 66px;
    width: 97%;
    border-radius: 12px;
  }
  .mini-player-content {
    padding: 6px 10px;
    gap: 8px;
  }
  .mini-player-thumb-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  .mini-player-title {
    font-size: 12px;
  }
  .mini-player-artist {
    font-size: 10px;
  }
  .mini-player-center {
    gap: 4px;
  }
  .mini-ctrl-btn {
    width: 28px;
    height: 28px;
  }
  .mini-ctrl-btn svg {
    width: 14px;
    height: 14px;
  }
  .mini-play-btn {
    width: 34px;
    height: 34px;
  }
  .mini-play-btn svg {
    width: 16px;
    height: 16px;
  }
  .mini-player-time {
    display: none;
  }
  .mini-action-btn {
    width: 28px;
    height: 28px;
  }
  .mini-action-btn svg {
    width: 14px;
    height: 14px;
  }
  .mini-player-right {
    gap: 4px;
  }
  body.has-mini-player #content-container {
    padding-bottom: 130px !important;
  }
}

@media (min-width: 401px) and (max-width: 768px) {
  .floating-mini-player {
    bottom: 74px;
    width: 95%;
    border-radius: 14px;
  }
  .mini-player-time {
    display: none;
  }
  body.has-mini-player #content-container {
    padding-bottom: 150px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .floating-mini-player {
    bottom: 20px;
    width: 90%;
    max-width: 780px;
    border-radius: 16px;
  }
  .mini-player-content {
    padding: 8px 14px;
  }
  body.has-mini-player #content-container {
    padding-bottom: 100px !important;
  }
}

@media (min-width: 1200px) {
  .floating-mini-player {
    bottom: 24px;
    width: min(92%, 920px);
    border-radius: 20px;
  }
  .mini-player-content {
    padding: 10px 20px;
    gap: 16px;
  }
  .mini-player-thumb-wrap {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }
  .mini-player-title {
    font-size: 15px;
  }
  .mini-player-artist {
    font-size: 13px;
  }
  .mini-ctrl-btn {
    width: 40px;
    height: 40px;
  }
  .mini-ctrl-btn svg {
    width: 20px;
    height: 20px;
  }
  .mini-play-btn {
    width: 48px;
    height: 48px;
  }
  .mini-play-btn svg {
    width: 24px;
    height: 24px;
  }
  .mini-player-time {
    font-size: 12px;
  }
  .mini-action-btn {
    width: 40px;
    height: 40px;
  }
  .mini-action-btn svg {
    width: 20px;
    height: 20px;
  }
  body.has-mini-player #content-container {
    padding-bottom: 110px !important;
  }
}

@media (min-width: 1600px) {
  .floating-mini-player {
    max-width: 1000px;
    border-radius: 22px;
  }
  .mini-player-content {
    padding: 12px 24px;
  }
  .mini-player-thumb-wrap {
    width: 56px;
    height: 56px;
  }
  .mini-player-title {
    font-size: 16px;
  }
  .mini-ctrl-btn {
    width: 44px;
    height: 44px;
  }
  .mini-play-btn {
    width: 52px;
    height: 52px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .mini-ctrl-btn,
  .mini-play-btn,
  .mini-action-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

.all-channels-view-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.all-channels-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.all-channels-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.all-channels-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.all-channels-count-badge {
  padding: 3px 10px;
  background: rgba(255, 45, 120, 0.2);
  border: 1px solid rgba(255, 45, 120, 0.5);
  border-radius: 8px;
  color: #ff2d78;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.live-active-category-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(0, 229, 204, 0.18);
  border: 1px solid rgba(0, 229, 204, 0.5);
  color: var(--neon-cyan);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.all-channels-actions-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.all-channels-search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0 12px;
  height: 36px;
  width: 220px;
  max-width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.all-channels-search-box:focus-within,
.all-channels-search-input.tv-focus {
  border-color: #00e5cc !important;
  box-shadow: 0 0 12px rgba(0, 229, 204, 0.35) !important;
}

.all-channels-search-input {
  background: transparent;
  border: none;
  color: #ffffff;
  outline: none;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  width: 100%;
}

.all-channels-search-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.live-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
  flex-shrink: 0;
}

.live-filter-toggle-btn:hover,
.live-filter-toggle-btn:focus,
.live-filter-toggle-btn.tv-focus {
  background: rgba(0, 229, 204, 0.2) !important;
  border-color: #00e5cc !important;
  color: #00e5cc !important;
  box-shadow: 0 0 14px rgba(0, 229, 204, 0.4) !important;
}

.live-filter-toggle-btn.active {
  background: rgba(0, 229, 204, 0.2) !important;
  border-color: #00e5cc !important;
  color: #00e5cc !important;
  box-shadow: 0 0 14px rgba(0, 229, 204, 0.35) !important;
}

.live-category-filter-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  background: rgba(12, 13, 20, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.live-category-filter-bar.open {
  display: flex !important;
}

.live-category-filter-bar::-webkit-scrollbar {
  display: none;
}

.live-category-chip.active {
  background: linear-gradient(135deg, #00e5cc, #00b4d8) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(0, 229, 204, 0.45) !important;
}

.live-category-chip.active .iptv-category-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #000000 !important;
}

.all-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  padding: 18px 24px 60px 24px;
  width: 100%;
  box-sizing: border-box;
}

.all-channels-grid .channel-card-item {
  width: 100% !important;
  max-width: none !important;
  flex-shrink: 1 !important;
}

.all-channels-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 768px) {
  .all-channels-header-bar {
    padding: 8px 12px;
    gap: 8px;
  }

  .all-channels-title {
    font-size: 16px;
  }

  .all-channels-actions-wrap {
    width: 100%;
    margin-left: 0;
    order: 3;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .all-channels-search-box {
    flex: 1 1 auto;
    width: auto;
    margin-left: 0;
  }

  .live-filter-toggle-btn {
    flex-shrink: 0;
  }

  .live-category-filter-bar {
    padding: 8px 12px;
    gap: 8px;
  }

  .all-channels-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    padding: 10px 12px 40px 12px;
  }
}