body { background-color: #020617; margin: 0; font-family: ui-sans-serif, system-ui, sans-serif; color: #f1f5f9; }
        
        /* Custom Scrollbar */
        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #0f172a; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }

        /* Animações */
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .animate-in { animation: fadeIn 0.3s ease-out forwards; }
        .hidden { display: none !important; }

        /* Rádio UI */
        input[type=range].radio-range::-moz-range-thumb {
            background-color: #22d3ee; border: 2px solid #083344; height: 20px; width: 20px; border-radius: 50%; cursor: pointer;
        }
        input[type=range].radio-range::-moz-range-track {
            background-color: #164e63; height: 8px; border-radius: 4px;
        }
        .btn-3d { transition: transform 0.1s, box-shadow 0.1s; transform: translateY(0); }
        .btn-3d:active { transform: translateY(4px); box-shadow: 0 0px 0 0 !important; border-bottom-width: 0px !important; margin-top: 4px; }
        
        /* Loading Spinner */
        @keyframes spin { 100% { transform: rotate(360deg); } }
        .loader { border: 4px solid rgba(6, 182, 212, 0.2); border-left-color: #06b6d4; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
        
        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        
        /* Player cursor state */
        .cursor-grab { cursor: grab; }
        .cursor-grabbing { cursor: grabbing; }

        /* =========================================================
           NOVO LAYOUT MODERNO E RESPONSIVO
           A lógica JavaScript e o bloco do Google AdSense permanecem.
        ========================================================== */
        :root {
            --app-bg: #050816;
            --app-surface: rgba(17, 24, 39, .78);
            --app-surface-strong: rgba(15, 23, 42, .96);
            --app-border: rgba(148, 163, 184, .16);
            --app-text: #f8fafc;
            --app-muted: #94a3b8;
            --app-primary: #22d3ee;
            --app-primary-2: #3b82f6;
            --app-accent: #8b5cf6;
            --app-danger: #ef4444;
            --app-radius: 22px;
            --app-shadow: 0 24px 70px rgba(0, 0, 0, .38);
        }

        * { box-sizing: border-box; }
        html, body { width: 100%; min-height: 100%; }
        body {
            background:
                radial-gradient(circle at 8% 5%, rgba(59,130,246,.18), transparent 30%),
                radial-gradient(circle at 92% 15%, rgba(139,92,246,.14), transparent 28%),
                radial-gradient(circle at 50% 100%, rgba(34,211,238,.09), transparent 40%),
                var(--app-bg);
            color: var(--app-text);
            overflow: hidden;
        }

        button, input, select { -webkit-tap-highlight-color: transparent; }
        button { touch-action: manipulation; }
        input, select { font-size: 16px; }

        #root {
            background: transparent !important;
            min-height: 100dvh;
            height: 100dvh;
        }

        /* Header principal */
        #root > header {
            height: 76px !important;
            padding: 0 22px !important;
            background: rgba(5, 8, 22, .78) !important;
            border-bottom: 1px solid var(--app-border) !important;
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            box-shadow: 0 12px 38px rgba(0,0,0,.22) !important;
        }

        #root > header > div:first-child > div:first-child {
            border-radius: 15px !important;
            background: linear-gradient(135deg, var(--app-primary-2), var(--app-accent)) !important;
            box-shadow: 0 12px 28px rgba(59,130,246,.28) !important;
        }

        #root > header h1 {
            font-size: 1.12rem !important;
            letter-spacing: -.025em !important;
        }

        #root > header > div:nth-child(2) {
            padding: 5px !important;
            border-radius: 16px !important;
            border: 1px solid var(--app-border) !important;
            background: rgba(15,23,42,.72) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
        }

        #tab-btn-live, #tab-btn-radio {
            min-height: 42px;
            border-radius: 12px !important;
            padding-left: 18px !important;
            padding-right: 18px !important;
        }

        #tab-btn-live.bg-blue-600 {
            background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
            box-shadow: 0 8px 24px rgba(37,99,235,.28) !important;
        }

        #tab-btn-radio.bg-cyan-600 {
            background: linear-gradient(135deg, #0891b2, #2563eb) !important;
            box-shadow: 0 8px 24px rgba(8,145,178,.28) !important;
        }

        /* TV */
        #view-live { gap: 0; }

        #tv-sidebar {
            width: 340px !important;
            margin: 14px 0 14px 14px;
            height: calc(100% - 28px) !important;
            border: 1px solid var(--app-border) !important;
            border-radius: var(--app-radius);
            background: var(--app-surface) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            overflow: hidden;
            box-shadow: var(--app-shadow);
        }

        #tv-sidebar > div:first-child {
            background: rgba(15,23,42,.82) !important;
            border-bottom: 1px solid var(--app-border) !important;
            padding: 18px !important;
        }

        #tv-sidebar input,
        #tv-explorer-modal input {
            min-height: 44px;
            border-radius: 13px !important;
            background: rgba(2,6,23,.62) !important;
            border-color: var(--app-border) !important;
            transition: border-color .2s, box-shadow .2s, background .2s;
        }

        #tv-sidebar input:focus,
        #tv-explorer-modal input:focus {
            border-color: rgba(34,211,238,.72) !important;
            box-shadow: 0 0 0 4px rgba(34,211,238,.1);
            background: rgba(2,6,23,.84) !important;
        }

        #tv-channel-list {
            padding: 12px !important;
            gap: 10px !important;
        }

        #tv-channel-list button {
            min-height: 112px;
            aspect-ratio: auto !important;
            border-radius: 16px !important;
            background: rgba(30,41,59,.68) !important;
            border-color: rgba(148,163,184,.12) !important;
            box-shadow: 0 10px 26px rgba(0,0,0,.15);
        }

        #tv-channel-list button:hover {
            transform: translateY(-3px);
            background: rgba(51,65,85,.82) !important;
            border-color: rgba(34,211,238,.48) !important;
        }

        #tv-channel-list button.bg-blue-600 {
            background: linear-gradient(145deg, rgba(37,99,235,.98), rgba(8,145,178,.82)) !important;
            border-color: rgba(125,211,252,.78) !important;
            box-shadow: 0 14px 32px rgba(37,99,235,.26);
        }

        #view-live main {
            margin: 14px;
            border-radius: var(--app-radius);
            border: 1px solid var(--app-border);
            overflow: hidden;
            background:
                radial-gradient(circle at center, rgba(30,41,59,.34), transparent 64%),
                #02040b !important;
            box-shadow: var(--app-shadow);
        }

        #tv-empty-state {
            background:
                radial-gradient(circle at 50% 40%, rgba(37,99,235,.14), transparent 32%),
                linear-gradient(145deg, rgba(2,6,23,.88), rgba(15,23,42,.7));
        }

        #tv-player-container video {
            background: #000;
        }

        #tv-bottom-bar {
            height: 68px !important;
            padding: 10px 16px !important;
            background: rgba(15,23,42,.88) !important;
            backdrop-filter: blur(18px);
            border-top-color: var(--app-border) !important;
        }

        #tv-explorer-modal {
            background: rgba(2,6,23,.88) !important;
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
        }

        #tv-explorer-modal > div {
            max-width: 1120px !important;
        }

        #tv-explorer-grid button {
            min-height: 72px;
            border-radius: 16px !important;
            background: rgba(30,41,59,.7) !important;
            border-color: var(--app-border) !important;
        }

        #tv-explorer-grid button:hover {
            transform: translateY(-2px);
            background: rgba(51,65,85,.85) !important;
            border-color: rgba(34,211,238,.5) !important;
        }

        /* Rádio */
        #view-radio > div {
            background:
                radial-gradient(circle at 10% 0%, rgba(34,211,238,.1), transparent 28%),
                radial-gradient(circle at 92% 18%, rgba(59,130,246,.12), transparent 26%),
                transparent !important;
            padding-bottom: 190px !important;
        }

        #view-radio .max-w-5xl {
            max-width: 1180px !important;
            padding: 22px !important;
        }

        #view-radio .bg-gray-800 {
            background: rgba(17,24,39,.74) !important;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        #view-radio .border-gray-700,
        #view-radio .border-gray-800,
        #view-radio .border-cyan-900 {
            border-color: var(--app-border) !important;
        }

        #view-radio .shadow-\[0_8px_0_0_rgba\(8\,51\,68\,1\)\] {
            box-shadow: var(--app-shadow) !important;
        }

        #view-radio .rounded-2xl,
        #view-radio .rounded-3xl {
            border-radius: var(--app-radius) !important;
        }

        #view-radio > div > div > div:first-of-type {
            border-width: 1px !important;
            box-shadow: var(--app-shadow) !important;
            padding: 20px !important;
        }

        #adsense-container {
            min-width: 300px;
            min-height: 76px !important;
            background: rgba(2,6,23,.52) !important;
            border: 1px solid var(--app-border) !important;
            border-radius: 16px !important;
        }

        #view-radio input[type="text"],
        #view-radio select {
            min-height: 50px;
            border-width: 1px !important;
            border-color: var(--app-border) !important;
            background: rgba(2,6,23,.68) !important;
            border-radius: 14px !important;
        }

        #view-radio input[type="text"]:focus,
        #view-radio select:focus {
            border-color: rgba(34,211,238,.65) !important;
            box-shadow: 0 0 0 4px rgba(34,211,238,.1) !important;
        }

        #radio-grid, #radio-fav-grid {
            gap: 18px !important;
        }

        #radio-grid > div,
        #radio-fav-grid > div {
            border-width: 1px !important;
            border-radius: 20px !important;
            background: rgba(17,24,39,.72) !important;
            box-shadow: 0 16px 42px rgba(0,0,0,.2);
        }

        #radio-grid > div:hover,
        #radio-fav-grid > div:hover {
            transform: translateY(-5px) !important;
            border-color: rgba(34,211,238,.5) !important;
            box-shadow: 0 22px 52px rgba(6,182,212,.14) !important;
        }

        #radio-grid button,
        #radio-fav-grid button {
            min-height: 42px;
            border-width: 0 !important;
            border-radius: 12px !important;
            box-shadow: none !important;
        }

        #radio-floating-player {
            left: 50% !important;
            right: auto !important;
            width: min(920px, calc(100vw - 28px));
            max-width: none !important;
            margin: 0 !important;
            transform-origin: center;
            translate: -50% 0;
        }

        #radio-floating-player > div {
            border: 1px solid rgba(148,163,184,.24) !important;
            border-radius: 22px !important;
            background: rgba(15,23,42,.88) !important;
            backdrop-filter: blur(26px);
            -webkit-backdrop-filter: blur(26px);
            box-shadow: 0 24px 80px rgba(0,0,0,.58) !important;
        }

        #radio-btn-play {
            flex: 0 0 auto;
        }

        /* Scrollbars */
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(100,116,139,.7) rgba(15,23,42,.3);
        }

        *::-webkit-scrollbar { width: 7px; height: 7px; }
        *::-webkit-scrollbar-track { background: rgba(15,23,42,.32); }
        *::-webkit-scrollbar-thumb {
            background: rgba(100,116,139,.62);
            border-radius: 999px;
        }

        /* Tablet */
        @media (max-width: 1023px) {
            #tv-sidebar { width: 310px !important; }
            #view-radio .max-w-5xl { padding: 16px !important; }
            #adsense-container { min-width: 260px; }
        }

        /* Celular */
        @media (max-width: 767px) {
            body { overflow: hidden; }

            #root > header {
                height: 66px !important;
                padding: 0 10px !important;
                gap: 8px !important;
            }

            #root > header > div:first-child {
                min-width: auto !important;
            }

            #root > header > div:first-child > div:first-child {
                padding: 8px !important;
                border-radius: 12px !important;
            }

            #root > header > div:nth-child(2) {
                flex: 1;
                justify-content: stretch;
                overflow: visible !important;
            }

            #tab-btn-live, #tab-btn-radio {
                flex: 1;
                min-height: 40px;
                justify-content: center;
                padding: 0 12px !important;
                font-size: 12px !important;
            }

            #tab-btn-live span, #tab-btn-radio span {
                display: inline !important;
            }

            #root > header > div:last-child { display: none; }

            #view-live {
                position: relative;
                display: block;
            }

            #tv-sidebar {
                position: absolute !important;
                inset: 8px auto 8px 8px;
                width: min(88vw, 340px) !important;
                height: calc(100% - 16px) !important;
                margin: 0 !important;
                z-index: 45 !important;
                border-radius: 20px;
                box-shadow: 20px 0 70px rgba(0,0,0,.62);
            }

            #tv-sidebar.-translate-x-full {
                transform: translateX(calc(-100% - 16px)) !important;
            }

            #tv-channel-list {
                grid-template-columns: repeat(2, minmax(0,1fr)) !important;
            }

            #tv-channel-list button {
                min-height: 104px;
                padding: 10px !important;
            }

            #view-live main {
                height: calc(100% - 16px);
                margin: 8px !important;
                border-radius: 18px;
            }

            #tv-empty-state {
                padding: 24px 18px !important;
            }

            #tv-empty-state h2 { font-size: 1.08rem !important; }
            #tv-empty-state p { font-size: .82rem !important; }

            #tv-bottom-bar {
                height: 64px !important;
                padding: 8px 10px !important;
            }

            #tv-current-name { max-width: 52vw; }

            #tv-explorer-modal > div {
                padding: 14px !important;
            }

            #tv-explorer-modal h2 { font-size: 1.25rem !important; }

            #tv-explorer-modal .flex.gap-4.mb-6 {
                flex-direction: column;
                gap: 10px !important;
                margin-bottom: 14px !important;
            }

            #tv-explorer-grid {
                grid-template-columns: repeat(2, minmax(0,1fr)) !important;
                gap: 9px !important;
            }

            #tv-explorer-grid button {
                min-height: 62px;
                padding: 10px !important;
            }

            #view-radio > div {
                padding-bottom: 210px !important;
            }

            #view-radio .max-w-5xl {
                padding: 10px !important;
            }

            #view-radio > div > div > div:first-of-type {
                padding: 15px !important;
                margin-bottom: 18px !important;
                gap: 14px;
            }

            #view-radio h1 {
                font-size: 1.4rem !important;
                line-height: 1.15;
            }

            #adsense-container {
                width: 100% !important;
                min-width: 0;
                max-width: none !important;
                min-height: 70px !important;
            }

            #view-radio .bg-gray-800.rounded-3xl.p-6 {
                padding: 16px !important;
                margin-bottom: 26px !important;
                border-width: 1px !important;
                box-shadow: 0 20px 55px rgba(0,0,0,.24) !important;
            }

            #view-radio .grid.md\:grid-cols-4 {
                gap: 14px !important;
            }

            #view-radio .mt-8.flex {
                margin-top: 18px !important;
                gap: 10px !important;
            }

            #view-radio .mt-8.flex button {
                width: 100%;
                flex: 1 1 100% !important;
            }

            #radio-grid, #radio-fav-grid {
                grid-template-columns: 1fr !important;
                gap: 14px !important;
            }

            #radio-grid > div .p-5,
            #radio-fav-grid > div .p-5 {
                padding: 16px !important;
            }

            #radio-floating-player {
                bottom: 10px !important;
                width: calc(100vw - 16px);
            }

            #radio-floating-player .p-3 {
                padding: 10px !important;
                gap: 10px !important;
            }

            #radio-floating-player .flex.items-center.gap-4.w-full.md\:w-auto.justify-center {
                width: 100%;
                gap: 8px !important;
                justify-content: space-between !important;
            }

            #radio-floating-player input[type="range"] {
                width: 78px !important;
            }

            #radio-floating-player .h-12.w-12 {
                width: 44px !important;
                height: 44px !important;
            }

            #radio-floating-player button.h-10.w-10 {
                width: 42px !important;
                height: 42px !important;
            }

            #radio-info-modal > div {
                max-height: calc(100dvh - 24px);
                overflow-y: auto;
                padding: 20px !important;
                border-width: 1px !important;
            }
        }

        @media (max-width: 390px) {
            #tab-btn-live, #tab-btn-radio {
                padding: 0 8px !important;
                gap: 5px !important;
                font-size: 11px !important;
            }

            #tv-channel-list { grid-template-columns: 1fr 1fr !important; }
            #tv-channel-list button { min-height: 96px; }
            #tv-explorer-grid { grid-template-columns: 1fr !important; }
            #radio-floating-player input[type="range"] { width: 62px !important; }
        }

        /* Respeita recorte e barra inferior de celulares modernos */
        @supports (padding: max(0px)) {
            #root > header {
                padding-left: max(10px, env(safe-area-inset-left)) !important;
                padding-right: max(10px, env(safe-area-inset-right)) !important;
            }
            #radio-floating-player {
                bottom: max(10px, env(safe-area-inset-bottom)) !important;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
                scroll-behavior: auto !important;
            }
        }



/* Botão de retorno à lista de canais no player móvel */
#tv-mobile-menu-btn {
    transition: transform .15s ease, background .15s ease;
}
#tv-mobile-menu-btn:active { transform: scale(.96); }

@media (max-width: 767px) {
    #tv-mobile-menu-btn {
        top: 12px !important;
        right: 12px !important;
        min-height: 40px;
    }
    #tv-live-badge { top: 12px !important; left: 12px !important; }
    #tv-sidebar { visibility: visible; }
}


/* Correção do Explorador Global no celular */
#tv-explorer-modal {
    position: absolute !important;
    z-index: 120 !important;
    isolation: isolate;
}
@media (max-width: 767px) {
    #tv-explorer-modal {
        position: fixed !important;
        inset: 0 !important;
        z-index: 9999 !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    #tv-explorer-modal > div {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    #tv-explorer-grid {
        min-height: 0;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}


/* Portal móvel definitivo do explorador de países */
body.tv-explorer-open { overflow: hidden !important; touch-action: none; }
@media (max-width: 767px) {
  body > #tv-explorer-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 2147483647 !important;
    display: flex;
    overflow: hidden !important;
    background: #020617 !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body > #tv-explorer-modal.hidden { display: none !important; }
  body > #tv-explorer-modal > div {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 16px !important;
  }
  body > #tv-explorer-modal #tv-explorer-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  body > #tv-explorer-modal button,
  body > #tv-explorer-modal input { touch-action: manipulation; }
}