:root {
    --bg: #08111d;
    --panel: #0e1b2d;
    --panel2: #13253b;
    --line: #1e3a5a;
    --text: #e8f1fb;
    --muted: #8fa5bf;
    --accent: #2c82ff;
    --accent2: #56b1ff;
    --green: #33d17a;
    --danger: #ff6b6b;
    --shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
    --radius: 18px;
}

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #06101a, #091728 40%, #08111d);
    color: var(--text);
    min-height: 100vh;
}

.app {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: rgba(5, 12, 20, 0.92);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 14px;
    backdrop-filter: blur(12px);
}

.clock {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

.logo {
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        rgba(44, 130, 255, 0.16),
        rgba(44, 130, 255, 0.06)
    );
    border: 1px solid rgba(86, 177, 255, 0.2);
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.logo .small {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}

.logo .big {
    font-size: 24px;
    font-weight: 700;
}

.side-title {
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 18px 10px 10px;
}

.channel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.channel-btn {
    margin-left:10px;
    padding:8px;
    border-left:3px solid var(--group-color);
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    padding: 12px 14px;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s ease;
    font-size: 15px;
}

body.mobile .channel-btn {
    padding: 8px 10px;       /* 🔥 reduced from 12px */
    font-size: 13px;         /* 🔥 tighter text */
    border-radius: 10px;
    gap: 6px;                /* 🔥 less spacing between icon/text */
}

body.mobile .group-header {
    padding: 6px 10px;       /* 🔥 smaller */
    font-size: 13px;
}

body.mobile .channel-list {
    gap: 4px; /* 🔥 tighter stack */
}

body.mobile .channel-badge {
    width: 6px;
    height: 6px;
}

body.mobile .channel-btn.active {
    box-shadow: none; /* 🔥 removes heavy glow */
}

body.mobile .mobile-tabs .tab-btn {
    padding: 8px;
    font-size: 13px;
}

body.mobile .mobile-tabs {
    padding: 6px;
    gap: 4px;
}

body.mobile #favoritesTab,
body.mobile #historyTab {
    position: fixed;
    inset: 0;
    background: #08111d;
    z-index: 20;
    overflow: auto;
    padding: 10px;
}

.channel-btn:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.mobile #favoritesTab > .btn-clear-history,
body.mobile #historyTab > .btn-clear-history {
    margin-right: 8px;
}

.channel-btn.active {
    background: linear-gradient(
        180deg,
        rgba(44, 130, 255, 0.22),
        rgba(44, 130, 255, 0.1)
    );
    border-color: rgba(86, 177, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 8px 18px rgba(0, 0, 0, 0.25);
}

.channel-badge {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent2);
    flex: 0 0 auto;
}

.main {
    padding: 20px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 16px;
}

.topbar .player-card {
    height: 100%;
}

.hero,
.meta-card,
.guide,
.player-card {
    background: linear-gradient(
        180deg,
        rgba(18, 34, 53, 0.98),
        rgba(10, 21, 34, 0.98)
    );
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero {
    padding: 18px;
    display: flex;
    gap: 16px;
    align-items: stretch;
    min-height: 120px;
    padding: 14px; /* slightly tighter */
}

.poster {
    width: 140px;
    border-radius: 16px;
    background: #0b1a2b;
    position: relative;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    position: relative;
    overflow: hidden;
}

.poster::before {
    content: "";
    position: absolute;
    inset: -40% auto auto -20%;
    width: 220px;
    height: 220px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.18),
        transparent 65%
    );
}

.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.now-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(51, 209, 122, 0.12);
    color: #9ef0bc;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 12px var(--green);
    animation: pulse 1.4s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.65;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.hero h1 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.08;
}

.hero .sub {
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 14px;
}

.desc {
    color: #dbe7f6;
    opacity: 0.9;
    line-height: 1.45;
    max-width: 820px;
}

.meta-card {
    padding: 18px;
    display: grid;
    gap: 12px;
    align-content: start;
}

.meta-item {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.meta-label {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.meta-value {
    font-size: 18px;
    font-weight: 700;
}

.middle {
    display: block;
    gap: 16px;
    min-height: 0;
}

.guide {
    padding: 18px;
    overflow: hidden;
}

.guide-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.title {
    font-size: 22px;
    font-weight: 700;
}

.subtitle {
    color: var(--muted);
    font-size: 14px;
}

.timeline {
    display: grid;
    grid-template-columns: 120px repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 13px;
}

.timeline div {
    padding: 0 4px;
}

.schedule-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
}

.schedule-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    align-items: center;
}

.schedule-label {
    color: #c7d5e8;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-track {
    position: relative;
    height: 62px;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.015)
    );
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.hour-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.08) 1px,
        transparent 1px
    );
    background-size: 33.333% 100%;
    pointer-events: none;
}

.program-block {
    position: absolute;
    top: 8px;
    bottom: 8px;
    border-radius: 12px;
    padding: 8px 12px;
    background: linear-gradient(
        180deg,
        rgba(44, 130, 255, 0.35),
        rgba(44, 130, 255, 0.18)
    );
    border: 1px solid rgba(117, 185, 255, 0.28);
    color: #edf6ff;
    overflow: hidden;
    cursor: pointer;
    transition: 0.18s ease;
}

.program-block:hover {
    transform: translateY(-1px);
}

.program-block.active {
    outline: 2px solid rgba(117, 185, 255, 0.95);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04) inset,
        0 6px 20px rgba(44, 130, 255, 0.25);
}

.program-title {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.program-time {
    font-size: 12px;
    color: #d2e6ff;
    opacity: 0.9;
}

.now-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #67d6ff;
    box-shadow: 0 0 12px #67d6ff;
    z-index: 3;
}

.player-card {
    padding: 18px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 8px;
    padding: 14px;
    min-height: 0;
}

.player-box {
    background: #03080f;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden; /* 🔥 prevents expansion */
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px; /* 🔥 you control it */
    min-height: 0;
    width: 100%;
}

body.mobile .mobile-title {
    display: block;
    white-space: nowrap;        /* 🔥 force one line */
    overflow: hidden;
    text-overflow: ellipsis;    /* 🔥 adds ... */
	font-size: 13px;
    font-weight: 600;
}

body.mobile .player-box {
    height: 130px;
    max-height: 35vh; /* 🔥 prevents it from getting too big */
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🔥 CRITICAL */
}

audio {
    width: 100%;
}

.audio-visual {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    color: white;
    background: radial-gradient(
            circle at center,
            rgba(44, 130, 255, 0.25),
            transparent 35%
        ),
        linear-gradient(180deg, #071221, #02060b);
    pointer-events: none;
}

.audio-visual.show {
    display: flex;
}

.audio-waves {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 80px;
}

.audio-waves span {
    width: 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #7fcbff, #2c82ff);
    animation: bounce 1.05s infinite ease-in-out;
}

.audio-waves span:nth-child(1) {
    height: 30px;
    animation-delay: 0s;
}
.audio-waves span:nth-child(2) {
    height: 58px;
    animation-delay: 0.1s;
}
.audio-waves span:nth-child(3) {
    height: 42px;
    animation-delay: 0.2s;
}
.audio-waves span:nth-child(4) {
    height: 70px;
    animation-delay: 0.3s;
}
.audio-waves span:nth-child(5) {
    height: 38px;
    animation-delay: 0.4s;
}

@keyframes bounce {
    0%,
    100% {
        transform: scaleY(0.7);
        opacity: 0.8;
    }
    50% {
        transform: scaleY(1.25);
        opacity: 1;
    }
}

.player-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.player-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 12px 14px;
}

.player-stat .k {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.player-stat .v {
    font-size: 18px;
    font-weight: 700;
}

.player-note {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.empty {
    padding: 22px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
}

@media (max-width: 1100px) {
    .topbar,
    .middle {
        grid-template-columns: 1fr;
    }
    .poster {
        width: 180px;
    }
}

@media (max-width: 860px) {
    .app {
        grid-template-columns: 1fr;
    }
    .sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .clock {
        font-size: 30px;
    }
    .hero {
        flex-direction: column;
    }
    .poster {
        width: 100%;
        min-height: 140px;
    }
    .timeline {
        grid-template-columns: 100px repeat(8, 1fr);
        font-size: 11px;
    }
    .schedule-row {
        grid-template-columns: 100px 1fr;
    }
    .player-meta {
        grid-template-columns: 1fr;
    }
}

.custom-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* Buttons */
.custom-controls button {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.02)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

/* Hover */
.custom-controls button:hover {
    background: linear-gradient(
        180deg,
        rgba(44, 130, 255, 0.25),
        rgba(44, 130, 255, 0.12)
    );
    border-color: rgba(86, 177, 255, 0.4);
    box-shadow: 0 4px 12px rgba(44, 130, 255, 0.2);
}

/* Active (click feel) */
.custom-controls button:active {
    transform: scale(0.96);
}

/* Volume slider */
#volumeControl {
    width: 140px;
    accent-color: #2c82ff; /* modern browsers */
    cursor: pointer;
}

/* Optional: make mute button smaller square */
#muteBtn {
    padding: 6px;
    font-size: 10px;
}

.no-program-message {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    font-size: 22px;
    font-weight: 700;
    color: #dbe7f6;
    background: linear-gradient(180deg, #071221, #02060b);
    z-index: 2;
}

.no-program-message.show {
    display: flex;
}

.program-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.topbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

/* 🔥 NEXT */
.program-block.queue-next {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.06);
}

/* 🔥 LATER */
.program-block.queue-later {
    opacity: 0.6;
    background: rgba(255, 255, 255, 0.04);
}

/* 🔥 GLOW ANIMATION */
@keyframes queuePulse {
    0% {
        box-shadow: 0 0 8px rgba(103, 214, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 22px rgba(103, 214, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 8px rgba(103, 214, 255, 0.2);
    }
}

.program-block.queue-now {
    background: linear-gradient(
        180deg,
        rgba(44, 130, 255, 0.6),
        rgba(44, 130, 255, 0.25)
    );
    border: 2px solid rgba(103, 214, 255, 0.7);
    box-shadow: 0 0 18px rgba(103, 214, 255, 0.35);
    animation: queuePulse 2s infinite;
    position: relative;
    overflow: hidden;
}

.program-block.queue-now::after {
    content: "LIVE";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #33d17a;
    color: #08111d;
    font-weight: 700;
}

.audio-poster {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #02060b;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.audio-poster.show {
    opacity: 1;
    pointer-events: auto;
}

/* IMAGE */
.audio-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.55) contrast(1.05);
}

/* DARK GLASS OVERLAY */
.audio-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 20px;

    background: radial-gradient(
            circle at center,
            rgba(44, 130, 255, 0.25),
            transparent 50%
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.85));
}

/* BADGE */
.audio-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(44, 130, 255, 0.2);
    border: 1px solid rgba(86, 177, 255, 0.35);
    color: #bfe3ff;
    letter-spacing: 0.5px;
}

/* TITLE */
.audio-title {
    font-size: 20px;
    font-weight: 700;
    max-width: 90%;
    line-height: 1.3;
}

/* SUBTEXT */
.audio-sub {
    font-size: 14px;
    color: #8fa5bf;
}

/* GLOW EFFECT */
.audio-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(44, 130, 255, 0.35),
        transparent 70%
    );
    filter: blur(25px);
    opacity: 0.6;
}

.ppv-cat-btn {
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    cursor: pointer;
    font-size: 12px;
}

.ppv-cat-btn.active {
    background: linear-gradient(180deg, #2c82ff, #1c5fd1);
    color: white;
    border-color: rgba(86, 177, 255, 0.5);
}

/* MOBILE MODE */
body.mobile .app {
    display: none; /* hide desktop */
}

.mobile-app {
    display: flex;
    flex-direction: column;
    height: auto;
}

/* PLAYER ALWAYS TOP */
.mobile-player {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #000;
}

/* TABS */
.mobile-tabs {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: #08111d;
}

.mobile-tabs button {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

/* CONTENT SCROLL */
.mobile-content {
    flex: 1;
    overflow: auto;
    padding: 10px;
}

.mobile-now-playing {
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-sub {
    font-size: 11px;
    color: #8fa5bf;
}

.mobile-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;

    line-height: 1.3;
    max-height: 2.6em; /* 🔥 ensures exactly 2 lines */

    font-size: 14px; /* slightly tighter */
    font-weight: 600;
}

.mobile-desc {
    font-size: 12px;
    color: #aaa;
}

.mobile-channel {
	font-size: 11px;
    opacity: 0.8;
    font-weight: 700;
    color: #56b1ff;
    margin-bottom: 2px;
}

body.mobile #ppvOverlay {
    position: relative !important;
    inset: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.mobile #ppvScreen {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
}

/* MOBILE: schedule as 2 columns (NOW | NEXT) */
body.mobile .schedule-track {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    height: auto !important;
}

/* remove timeline positioning */
body.mobile .program-block {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
}

/* hide LATER (3rd item and beyond) */
body.mobile .schedule-track .program-block:nth-child(n + 3) {
    display: none !important;
}

body.mobile .program-block.queue-now {
    border: 2px solid #67d6ff;
}

/* tabs base */
.mobile-tabs .tab-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    transition: 0.2s;
}

/* active tab */
.mobile-tabs .tab-btn.active {
    background: linear-gradient(180deg, #2c82ff, #1c5fd1);
    border-color: rgba(86, 177, 255, 0.5);
    box-shadow: 0 4px 12px rgba(44, 130, 255, 0.3);
}

#loadingText::after {
    content: "";
    animation: dots 1.2s steps(3, end) infinite;
}

@keyframes dots {
    0% {
        content: "";
    }
    33% {
        content: ".";
    }
    66% {
        content: "..";
    }
    100% {
        content: "...";
    }
}


#favoritesPanel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;

    width: 420px; /* 👈 drawer size */
    max-width: 90%; /* 👈 mobile safety */

    background: linear-gradient(180deg, #06101a, #08111d);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.6);

    z-index: 10001;

    transform: translateX(-100%); /* hidden to the left */
    transition: transform 0.35s ease;

    display: flex;
    flex-direction: column;
}

#favoritesContent {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

/* 🧾 History Drawer Panel */
#historyPanel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;

    width: 420px; /* 👈 drawer size */
    max-width: 90%; /* 👈 mobile safety */

    background: linear-gradient(180deg, #06101a, #08111d);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.6);

    z-index: 10001;

    transform: translateX(-100%); /* hidden to the left */
    transition: transform 0.35s ease;

    display: flex;
    flex-direction: column;
}

#historyContent {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}


#historyHeader button {
    margin-left: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    border: none;
    background: #2c82ff;
    color: #fff;
    font-size: 12px;
}

#favoritesFloatingBtn:hover,
#historyFloatingBtn:hover {
    transform: scale(1.12);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.7),
        0 0 18px rgba(44,130,255,0.5);
}

#favoritesFloatingBtn {
    color: #ffd700;
}

#historyFloatingBtn {
    color: #67d6ff;
}

@keyframes floatPulse {
    0% { box-shadow: 0 0 0 rgba(44,130,255,0); }
    50% { box-shadow: 0 0 18px rgba(44,130,255,0.35); }
    100% { box-shadow: 0 0 0 rgba(44,130,255,0); }
}

#historyFloatingBtn {
    animation: floatPulse 3s infinite;
}

#videoLoading .loading-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top: 4px solid #fff;
    border-radius: 50%;
    animation: videoSpin 0.9s linear infinite;
}

#videoLoading .loading-text {
    display: flex;
    align-items: center;
    font-size: 20px;
}

#videoLoading .loading-dots {
    display: inline-block;
    min-width: 24px;
    text-align: left;
}

#videoLoading .loading-dots span {
    opacity: 0;
    animation: videoDots 1.4s infinite;
}

#videoLoading .loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

#videoLoading .loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

#videoLoading .loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes videoSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes videoDots {
    0%,
    20% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.history-play-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #2c82ff, #00c6ff);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
    font-size: 18px;
}

.history-play-btn:hover {
    transform: scale(1.15);
}

.history-play-btn:active {
    transform: scale(0.95);
}

.history-play-btn::before {
    content: "▶";
    margin-left: 3px;
}

.player-box:fullscreen {
    width: 100vw;
    height: 100vh;
    background: black;
}

#hudastream-slideshow {
    position: absolute;
    inset: 0;
    display: none;
    z-index: 2; /* below overlays, above background */
    pointer-events: none;
    z-index: 10; /* 🔥 above video */
}

#hudastream-slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.mobile-player-meta {
    display: block; /* 🔥 no side-by-side anymore */
}

.mobile-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.mobile-thumb {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

.mobile-right {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mobile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 4px;
}

body.mobile .mobile-channel,
body.mobile .mobile-title,
body.mobile .mobile-desc {
    text-align: center;
}

body.mobile .mobile-info {
    width: 100%;
    max-width: 90%;
    text-align: center;    /* 🔥 center text */
}

.mobile-channel,
.mobile-desc {
    word-break: break-word;
}

.fullscreen-btn {
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;

    /* 🔥 glow base */
    box-shadow: 0 0 0 rgba(44, 130, 255, 0);
    transition: 0.2s;
}

/* 🔥 pulsing glow */
.fullscreen-btn {
    animation: fsGlow 2s infinite;
}

@keyframes fsGlow {
    0% {
        box-shadow: 0 0 0 rgba(44, 130, 255, 0);
    }
    50% {
        box-shadow: 0 0 12px rgba(44, 130, 255, 0.8),
            0 0 24px rgba(44, 130, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 0 rgba(44, 130, 255, 0);
    }
}

/* 🔥 hover = stronger */
.fullscreen-btn:hover {
    background: rgba(44, 130, 255, 0.25);
    box-shadow: 0 0 14px rgba(44, 130, 255, 0.9);
}

.fav-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e53935; /* 🔴 solid red */
    color: white;

    border: none;
    border-radius: 50%;

    font-size: 14px;
    cursor: pointer;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: 0.25s;
}

/* 🔥 hover = glow (not appear) */
.fav-remove-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 80, 80, 0.8), 0 0 20px rgba(255, 80, 80, 0.5);
    background: #ff3b3b;
}

div[data-title]:hover .fav-remove-btn {
    opacity: 1;
}

.share-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.12);
}

/* Facebook style */
.share-btn.fb {
    background: #1877f2;
    color: white;
    font-family: Arial, sans-serif;
}

.share-btn.fb:hover {
    transform: scale(1.1);
}

.share-btn.wa {
    background: #25d366;
    color: white;
}

.share-btn.copy {
    background: #555;
    color: white;
}

.share-btn.wa {
    background: #25d366;
    color: white;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
}

.share-btn.wa:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(37, 211, 102, 0.6);
}

/* platform colors */
.mobile .share-btn.fb {
    background: #1877f2;
    color: #fff;
}
.mobile .share-btn.wa {
    background: #25d366;
    color: #fff;
}
.mobile .share-btn.copy {
    background: #555;
    color: #fff;
}

/* ▶️ Play / Pause button */
#playPauseBtn {
    background: linear-gradient(180deg, #2c82ff, #1c5fd1);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;

    box-shadow: 0 4px 10px rgba(44, 130, 255, 0.4);
    transition: 0.2s;
}

#playPauseBtn:hover {
    background: linear-gradient(180deg, #3a8fff, #2c82ff);
}

/* 🔊 Mute button */
#muteBtn {
    background: linear-gradient(180deg, #444, #222);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: 0.2s;
}

#muteBtn_big {
    background: linear-gradient(180deg, #444, #222);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 16px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: 0.2s;
}

#muteBtn:hover {
    background: linear-gradient(180deg, #666, #333);
}

#copyToast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);

    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;

    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;

    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);

    z-index: 9999;
}

/* visible state */
#copyToast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(44, 130, 255, 0.6);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 20px rgba(44, 130, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(44, 130, 255, 0);
    }
}

#bigPlayOverlay {
    backdrop-filter: blur(6px);
}

.mobile-big-play {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 20;
    overflow: hidden;
    overflow: hidden; /* 🔥 prevents glow leak */
}

.mobile-play-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.mobile-play-sub {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 18px;
}

.mobile-play-btn {
    width: 60px;
    height: 60px;
    font-size: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    cursor: pointer;

    /* 🔥 ADD THESE */
    background: rgba(44, 130, 255, 0.2);
    border: 2px solid rgba(44, 130, 255, 0.6);
    box-shadow: 0 0 25px rgba(44, 130, 255, 0.4);

    animation: cinematicPulse 1.8s infinite;
}

@keyframes cinematicPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(44, 130, 255, 0.5);
    }
    70% {
        transform: scale(1.15);
        box-shadow: 0 0 0 25px rgba(44, 130, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(44, 130, 255, 0);
    }
}

.mobile-play-btn:active {
    transform: scale(0.92);
    box-shadow: 0 0 35px rgba(44, 130, 255, 0.7);
}

.mobile-play-content {
    position: relative;
    z-index: 2;
    padding: 15px;

    display: flex;
    flex-direction: column;
    align-items: center; /* 🔥 center horizontally */
    justify-content: center;
    text-align: center;
}

.mobile-big-play #bigPlayBg {
    position: absolute;
    inset: -20px; /* 🔥 extend instead of scale */
    background-size: cover;
    background-position: center;
    filter: blur(15px) brightness(0.5);
}

/* HEADER */
.fav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fav-title {
    font-size: 18px;
    font-weight: 700;
}

/* ACTION BUTTON AREA */
.fav-actions {
    display: flex;
    gap: 8px;
}

/* CLOSE BUTTON */
.fav-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* GRID */
.fav-grid {
    flex: 1;
    overflow: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

/* 🔥 Shared panel header (used for Favorites + History) */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.panel-title {
    font-size: 18px;
    font-weight: 700;
}

.panel-actions {
    display: flex;
    gap: 8px;
}

/* 🔘 Close button (shared) */
.btn-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* 🧹 Clear button (special style) */
.btn-clear {
    background: rgba(255, 80, 80, 0.15);
    border: 1px solid rgba(255, 80, 80, 0.3);
    color: #ff8080;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
}

/* 📦 Grid (shared with favorites) */
.panel-grid {
    flex: 1;
    overflow: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.mobile-switch-btn {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%); /* 🔥 important for true centering */

    background: #222;
    color: #fff;

    padding: 8px 10px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: bold;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    cursor: pointer;

    z-index: 9999;
    opacity: 0.85;
}

/* 🔥 SIDE PANEL (shared by PPV, Favorites, History later) */
.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 420px;

    background: linear-gradient(180deg, #06101a, #08111d);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);

    z-index: 9999;

    transform: translateX(100%);
    transition: transform 0.35s ease;

    display: flex;
    flex-direction: column;
}

/* 🔥 SHOW STATE (you can toggle this in JS) */
.side-panel.open {
    transform: translateX(0);
}

/* 🔹 HEADER */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.panel-title {
    font-size: 18px;
    font-weight: 700;
}

/* 🔘 CLOSE BUTTON */
.btn-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* 📦 GRID */
.panel-grid {
    flex: 1;
    overflow: auto;
    padding: 16px;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

/* 🎬 BIG PLAY OVERLAY */
.big-play-overlay {
    position: absolute;
    inset: 0;

    display: none; /* hidden by default */

    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
}

/* ▶️ BIG PLAY BUTTON */
.big-play-btn {
    width: 120px;
    height: 120px;

    border-radius: 50%;

    background: rgba(44, 130, 255, 0.2);
    border: 3px solid rgba(44, 130, 255, 0.6);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 48px;
    color: white;

    cursor: pointer;

    animation: pulse 1.5s infinite;
    transition: transform 0.2s ease, background 0.2s ease;
}

.big-play-btn:hover {
    transform: scale(1.1);
    background: rgba(44, 130, 255, 0.3);
}

/* 📺 YOUTUBE PLAYER */
.youtube-player {
    display: none;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ⏸️ STILL THERE OVERLAY */
.still-there-overlay {
    position: absolute;
    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;

    background: rgba(0, 0, 0, 0.85);
    z-index: 5;

    text-align: center;
    padding: 20px;
}

/* TEXT */
.still-there-title {
    font-size: 22px;
    font-weight: 700;
}

/* BUTTON */
.still-there-btn {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;

    background: linear-gradient(180deg, #2c82ff, #1c5fd1);
    color: white;

    font-weight: 700;
    cursor: pointer;
}

/* ▶️ PLAY / PAUSE BUTTON */
.btn-play-pause {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(86, 177, 255, 0.25);
    background: rgba(44, 130, 255, 0.15);
    color: white;
    cursor: pointer;
}

/* ⭐ FAVORITE BUTTON */
.btn-fav-toggle {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    cursor: pointer;
}

/* 🔥 HIDDEN TAB */
.tab-hidden {
    display: none;
}

/* 🔥 MOBILE LIST (fav/history) */
.mobile-list {
    padding: 10px;
}

/* 🔥 SYNC DIV (invisible helper) */
.hidden-sync {
    display: none;
}

.hidden {
    display:none !important;
}

/* 🎬 VIDEO LOADING OVERLAY */
.video-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: none;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;

    background: rgba(0, 0, 0, 0.55);
    color: #fff;

    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.5px;

    z-index: 9999;
}

/* 📺 PPV MOBILE */
.ppv-overlay-mobile {
    position: relative;
    background: transparent;
    backdrop-filter: none;
    opacity: 1;
    pointer-events: auto;
}

.ppv-screen-mobile {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px;
    transform: none;
}

.ppv-title-mobile {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.ppv-grid-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* 🧾 HISTORY BUTTON */
.btn-clear-history {
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #c62828;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

/* 🖥️ DESKTOP SWITCH */
.desktop-switch-btn {
    position: fixed;
    top: 12px;
    right: 12px;

    background: #3a8bcd;
    color: #fff;

    padding: 8px 10px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: bold;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    cursor: pointer;

    z-index: 9999;
    opacity: 0.85;
}

.group-header {
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:700;
    border-left:4px solid var(--group-color);
}

.channel-badge {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--group-color);
}

.channel-name {
    flex:1;
}

.ppv-btn {
    font-size:16px;
    padding:6px 8px;
    border-radius:10px;
    background:rgba(44,130,255,.15);
    border:1px solid rgba(86,177,255,.25);
    cursor:pointer;
    transition:.2s;
}

.ppv-btn:hover {
    background:rgba(44,130,255,.35);
}

/* PROGRAM BLOCK BASE */
.program-block {
    position:absolute;
    top:10px;
    bottom:10px;
    padding:8px;
    border-radius:10px;
    background:rgba(255,255,255,.05);
    border-left:3px solid var(--channel-color);
    overflow:hidden;
}

/* POSITIONS (instead of inline left/width) */
.queue-now   { left:0%;   width:45%; }
.queue-next  { left:48%;  width:25%; }
.queue-later { left:75%;  width:23%; }

/* dynamic background tint */
.program-block {
    background:color-mix(in srgb, var(--channel-color) 12%, transparent);
}

/* ACTIVE highlight */
.queue-active {
    box-shadow:0 0 10px rgba(103,214,255,.4);
}

/* TITLE + TIME */
.program-title {
    font-size:13px;
    font-weight:700;
    margin-bottom:4px;
}

.program-time {
    font-size:11px;
    opacity:.7;
}

/* PROGRESS BAR */
.queue-progress-wrap {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4px;
    background:rgba(255,255,255,.1);
}

.queueProgressBar {
    height:100%;
    width:0%;
    background:#67d6ff;
    transition:width .2s linear;
}

/* TIME TEXT */
.queueTime {
    position:absolute;
    bottom:6px;
    right:8px;
    font-size:11px;
    opacity:.8;
}

/* EMPTY STATE */
.empty {
    position:absolute;
    inset:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    opacity:.6;
}

/* SEARCH */
.ppv-search-wrap {
    grid-column:1/-1;
}

.ppv-search {
    width:100%;
    padding:8px;
    border-radius:8px;
    border:none;
    margin-bottom:10px;
}

/* CARD */
.ppv-card {
    background:linear-gradient(180deg,rgba(18,34,53,.98),rgba(10,21,34,.98));
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:.2s;
    height:180px;
}

.ppv-card:hover {
    transform:scale(1.03);
}

/* THUMB */
.ppv-thumb {
    height:100px;
    background:#000;
}

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

/* BODY */
.ppv-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    z-index: 2;
    position: relative; /* 🔥 anchor for absolute children */
}

/* TITLE */
.ppv-title {
    font-size:12px;
    font-weight:700;
    line-height:1.3;
    height:32px;
    overflow:hidden;
}

/* PLAY BUTTON */
.ppv-play-btn {
    padding:6px;
    border-radius:8px;
    border:none;
    background:linear-gradient(180deg,#2c82ff,#1c5fd1);
    color:white;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

/* CATEGORIES */
.ppv-categories {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}

.ppv-cat-btn {
    padding:6px 10px;
    border-radius:8px;
    border:none;
    background:rgba(255,255,255,.08);
    cursor:pointer;
    font-size:12px;
}

.ppv-cat-btn.active {
    background:#2c82ff;
    color:#fff;
}

/* ERROR */
.ppv-error {
    padding:20px;
    text-align:center;
    opacity:.7;
}

/* progress overlay */
.program-block.has-progress {
    background:
        linear-gradient(
            to right,
            rgba(255,221,87,.35) var(--progress),
            rgba(44,130,255,.25) var(--progress)
        );
}

.program-block.has-progress::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;

    background:
        linear-gradient(
            to right,
            rgba(255,221,87,.35) var(--progress),
            transparent var(--progress)
        );

    pointer-events:none;
}

/* SEARCH */
.fav-search {
    width:100%;
    padding:8px;
    margin-bottom:10px;
    border-radius:8px;
    border:none;
}

/* GRID */
.fav-content {
    display:grid;
    grid-template-columns:repeat(2, minmax(150px, 1fr));
    gap:10px;
}

/* EMPTY */
.fav-empty {
    padding:20px;
    text-align:center;
    opacity:.7;
}

/* CARD */
.fav-card {
    background:linear-gradient(180deg,rgba(18,34,53,.98),rgba(10,21,34,.98));
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:180px;
}

/* THUMB */
.fav-thumb {
    position:relative;
    height:100px;
    background:#000;
}

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

/* REMOVE BUTTON */
.fav-remove-btn {
    position:absolute;
    top:6px;
    right:6px;
    z-index:2;

    padding:4px 6px;
    border-radius:6px;
    border:none;
    background:rgba(0,0,0,.6);
    color:#fff;
    cursor:pointer;
}

/* BODY */
.fav-body {
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

/* TITLE */
.fav-title {
    font-size:12px;
    font-weight:700;
    height:32px;
    overflow:hidden;
}

/* PLAY BUTTON */
.fav-play-btn {
    padding:6px;
    border-radius:8px;
    border:none;
    background:linear-gradient(180deg,#2c82ff,#1c5fd1);
    color:white;
    font-size:12px;
    cursor:pointer;
}

/* PANEL OPEN STATE */
.favorites-panel-open {
    width:420px;
    max-width:90vw;
    left:0;
    right:auto;
}

/* WRAP */
.favorites-wrap {
    width:100%;
}

/* SEARCH */
.favorites-search-wrap {
    margin-bottom:10px;
}

.favorites-search {
    width:100%;
    padding:8px;
    border-radius:8px;
    border:none;
    box-sizing:border-box;
}

/* GRID */
.favorites-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(180px, 1fr));
    gap:10px;
}

/* EMPTY */
.favorites-empty {
    padding:20px;
    text-align:center;
    opacity:.7;
}

/* CARD */
.favorites-card {
    background:#111;
    padding:10px;
    border-radius:10px;
    display:flex;
    flex-direction:column;
}

/* THUMB */
.favorites-thumb {
    position:relative;
    height:100px;
    background:#000;
    border-radius:8px;
    overflow:hidden;
}

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

/* OVERLAY */
.favorites-overlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.25);
    pointer-events:none;
}

.favorites-overlay .history-play-btn {
    pointer-events:auto;
}

/* TITLE */
.favorites-title {
    color:#fff;
    margin-top:6px;
    font-size:12px;
    height:32px;
    overflow:hidden;
}

/* SEARCH */
.history-search {
    width:100%;
    padding:8px;
    margin-bottom:10px;
    border-radius:8px;
    border:none;
}

/* GRID */
.history-content {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:10px;
}

/* EMPTY */
.history-empty {
    padding:20px;
    text-align:center;
    opacity:.7;
}

/* CARD */
.history-card {
    background:linear-gradient(180deg,rgba(18,34,53,.98),rgba(10,21,34,.98));
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:180px;
}

/* THUMB */
.history-thumb {
    height:100px;
    background:#000;
}

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

/* BODY */
.history-body {
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

/* TITLE */
.history-title {
    font-size:12px;
    font-weight:700;
    height:32px;
    overflow:hidden;
}

/* PLAY BUTTON */
.history-play-btn {
    padding:6px;
    border-radius:8px;
    border:none;
    background:linear-gradient(180deg,#2c82ff,#1c5fd1);
    color:white;
    font-size:12px;
    cursor:pointer;
}

/* PANEL */
.history-panel-open {
    width:420px;
    max-width:90vw;
    left:0;
    right:auto;
}

/* WRAP */
.history-wrap {
    width:100%;
}

/* SEARCH */
.history-search-wrap {
    margin-bottom:10px;
}

/* GRID */
.history-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(180px, 1fr));
    gap:10px;
}

/* CARD */
.history-card {
    background:#111;
    padding:10px;
    border-radius:10px;
    display:flex;
    flex-direction:column;
}

/* THUMB */
.history-thumb {
    position:relative;
    height:100px;
    background:#000;
    border-radius:8px;
    overflow:hidden;
}

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

/* OVERLAY */
.history-overlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.25);
}

/* TITLE */
.history-title {
    color:#fff;
    margin-top:6px;
    font-size:12px;
    height:32px;
    overflow:hidden;
}

.ppv-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ppv-grid-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 🔥 force 2 columns */
    gap: 12px;
}

#ppvGrid {
    display: block !important;
    padding: 16px;
    overflow: auto;
}

#ppvGrid .ppv-search-wrap {
    width: 100%;
    margin-bottom: 12px;
}

#ppvGrid .ppv-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#ppvGrid .ppv-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.ppv-add-btn {
    position: absolute;
    top: 8px;
    right: 8px;

    z-index: 5; /* 🔥 bring above everything */

    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.6);
    color: #ffd700;
    cursor: pointer;
}

.ppv-add-btn:hover {
    background: rgba(255,215,0,0.2);
}

.ppv-thumb {
    position: relative;
    z-index: 1;
}

.ppv-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    width: 100%;
}

.ppv-play-btn {
    flex: 7;
    padding: 8px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(180deg,#2c82ff,#1c5fd1);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ppv-add-btn {
    flex: 2;
    position: static;
    top: auto;
    right: auto;
    z-index: auto;

    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #ffd700;
    cursor: pointer;
}

.ppv-add-btn:hover {
    background: rgba(255,215,0,0.2);
}

.clear-channel-btn {
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(255,80,80,0.15);
    border: 1px solid rgba(255,80,80,0.3);
    color: #ff8080;
    cursor: pointer;
    transition: 0.2s;
}

.clear-channel-btn:hover {
    background: rgba(255,80,80,0.3);
    box-shadow: 0 0 10px rgba(255,80,80,0.5);
}

.channel-name {
    flex: 1; /* 🔥 pushes icons to the right */
}

.ppv-btn,
.clear-channel-btn {
    flex-shrink: 0;
}


/* =========================
   DESKTOP FLOATERS ONLY
   ========================= */
body:not(.mobile) #favoritesFloatingBtn,
body:not(.mobile) #historyFloatingBtn {
    position: fixed;
    right: 18px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    z-index: 9999;
    background: linear-gradient(180deg, #8fd8ff, #5ec3ff);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 6px 20px rgba(0,0,0,0.5),
        inset 0 0 10px rgba(255,255,255,0.05);
    transition: all 0.25s ease;
    bottom: 30px;
	color: white;
}

body:not(.mobile) #historyFloatingBtn {
    bottom: 25px;
    color: #67d6ff;
    animation: floatPulse 3s infinite;
}

body:not(.mobile) #favoritesFloatingBtn {
    bottom: 95px;
    color: #ffd700;
}

body:not(.mobile) #favoritesFloatingBtn:hover,
body:not(.mobile) #historyFloatingBtn:hover {
    transform: scale(1.12);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.7),
        0 0 18px rgba(44,130,255,0.5);
}

.player-btn {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #fff;
    font-size: 16px;

    cursor: pointer;
    transition: 0.2s ease;
}

.player-btn.active {
    background: linear-gradient(180deg, #2c82ff, #1c5fd1);
    border-color: rgba(86, 177, 255, 0.5);

    box-shadow: 0 4px 12px rgba(44, 130, 255, 0.4);
}

.player-btn:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.1);
}

.player-btn.fav {
    color: #ffd700;
}

.player-controls {
    display: flex;
    flex-direction: row;      /* 🔥 force horizontal */
    align-items: center;
    gap: 8px;

    flex-wrap: nowrap;        /* 🔥 prevent wrapping */

    width: 100%;              /* helps layout */
}

/* =========================
   MOBILE FLOATERS KEEP OLD LOOK
   ========================= */
body.mobile #favoritesFloatingBtn {
    position: fixed;
    bottom: 150px;
    right: 15px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8fd8ff, #5ec3ff);
    color: #111;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 9999;
    transition: 0.2s;
}

body.mobile #favoritesFloatingBtn:hover {
    transform: scale(1.1);
}

body.mobile #historyFloatingBtn {
    position: fixed;
    bottom: 80px;
    right: 15px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8fd8ff, #5ec3ff);
    color: white;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    cursor: pointer;
}

/* 🔥 Light background for open group channels */
.channel-list.open .channel-btn {
    background: color-mix(in srgb, var(--group-color) 12%, transparent);
}

/* hover */
.channel-list.open .channel-btn:hover {
    background: color-mix(in srgb, var(--group-color) 20%, transparent);
}

/* active */
.channel-list.open .channel-btn.active {
    background: color-mix(in srgb, var(--group-color) 28%, transparent);
}

.channel-list.open .channel-btn {
    box-shadow: inset 3px 0 0 var(--group-color);
}

body.mobile #videoPlayer {
    width: 100%;
    height: 100%;

    object-fit: cover;   /* 🔥 fills container nicely */
}