/* ==========================================================================
   StarBR Play - Design System Fiel e Idêntico ao Projeto v_webnew
   Identidade Oficial: Dark Navy (#081120), Deep Onyx (#02050D), Red (#FF1E1E)
   Suporte 100% a Smart TV, TV Box 32-bit, D-Pad remoto e navegadores modernos
   ========================================================================== */

:root {
    --bg-main: #081120;
    --bg-sidebar: #02050D;
    --bg-card: #0E1726;
    --bg-card-hover: #162032;
    --bg-glass: rgba(14, 23, 38, 0.85);
    --bg-glass-heavy: rgba(8, 17, 32, 0.96);

    --primary-red: #FF1E1E;
    --primary-red-hover: #E01414;
    --primary-red-glow: rgba(255, 30, 30, 0.45);

    --accent-cyan: #00D2FF;
    --accent-cyan-glow: rgba(0, 210, 255, 0.35);
    --accent-green: #00E676;
    --accent-gold: #FFB300;

    --text-primary: #FFFFFF;
    --text-secondary: #CBD5E1;
    --text-muted: #64748B;

    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-highlight: rgba(255, 255, 255, 0.16);
    --border-red: rgba(255, 30, 30, 0.5);

    --font-heading: 'Outfit', 'SamsungOne', 'Segoe UI Variable Display', 'Inter', -apple-system, sans-serif;
    --font-body: 'Inter', 'Roboto', 'Segoe UI Variable Text', -apple-system, sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    --sidebar-collapsed-width: 85px;
    --sidebar-expanded-width: 240px;
    --topbar-height: 70px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body {
    width: 100%;
    height: 100%;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.45;
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.hidden { display: none !important; }
.w-100 { width: 100% !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 14px !important; }
.mt-4 { margin-top: 20px !important; }
.font-mono { font-family: monospace !important; }

/* Foco D-Pad & Teclado para Smart TV / TV Box */
.focusable {
    outline: none;
    transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background-color 0.18s;
}

.focusable:focus,
.focusable.tv-focused {
    outline: none !important;
    transform: scale(1.04) !important;
    box-shadow: 0 0 0 2.5px #FFFFFF, 0 0 20px rgba(255, 255, 255, 0.5) !important;
    border-color: #FFFFFF !important;
    z-index: 10;
}

/* Botões Padrão v_webnew */
button {
    font-family: var(--font-body);
    border: none;
    cursor: pointer;
    background: none;
    color: inherit;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-red), #B20710);
    color: #FFFFFF;
    padding: 12px 26px;
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 20px var(--primary-red-glow);
    transition: all 0.2s var(--ease-out);
    text-decoration: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FF3B3B, var(--primary-red));
    box-shadow: 0 8px 25px rgba(255, 30, 30, 0.6);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    padding: 12px 22px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border-subtle);
    transition: all 0.2s var(--ease-out);
    text-decoration: none;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--border-highlight);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.35);
    color: #fff;
}

.btn-sm {
    padding: 8px 16px !important;
    font-size: 12.5px !important;
    border-radius: var(--radius-sm) !important;
}

/* Badges e Pílulas */
.badge-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.badge-red { background: var(--primary-red); color: #fff; box-shadow: 0 2px 10px var(--primary-red-glow); }
.badge-cyan { background: rgba(0, 210, 255, 0.2); color: var(--accent-cyan); border: 1px solid rgba(0, 210, 255, 0.4); }
.badge-green { background: rgba(0, 230, 118, 0.2); color: var(--accent-green); border: 1px solid rgba(0, 230, 118, 0.4); }
.badge-gold { background: rgba(255, 179, 0, 0.2); color: var(--accent-gold); border: 1px solid rgba(255, 179, 0, 0.4); }

.highlight-red { color: var(--primary-red) !important; }
.highlight-cyan { color: var(--accent-cyan) !important; }
.highlight-green { color: var(--accent-green) !important; }
.highlight-gold { color: var(--accent-gold) !important; }

/* ==========================================================================
   TELA DE LOGIN CINEMATOGRÁFICA (CinematicLoginBG + Tabs v_webnew)
   ========================================================================== */
.page-login {
    background-color: #030712;
    overflow: auto;
}

.cinematic-login-bg {
    position: fixed;
    inset: 0;
    background-image: url('https://image.tmdb.org/t/p/original/9BBTo63ANSmAgvxv5h3uH2K28xX.jpg');
    background-size: cover;
    background-position: center;
    filter: brightness(0.25) saturate(1.2);
    z-index: 1;
}

.login-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(3, 7, 18, 0.6) 0%, rgba(3, 7, 18, 0.95) 100%);
}

.login-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 7, 18, 0.8) 0%, transparent 40%, rgba(3, 7, 18, 0.98) 100%);
}

.login-wrapper {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}

.login-card-container {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.login-brand-logo-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 30, 30, 0.15);
    border: 1.5px solid rgba(255, 30, 30, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px var(--primary-red-glow);
}

.login-brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.login-brand-name {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.login-brand-subtitle {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
}

.login-glass-card {
    background: rgba(10, 13, 20, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
}

.login-tabs-switcher {
    display: flex;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 6px;
    margin-bottom: 20px;
}

.login-tab-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.login-tab-btn.active {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 4px 14px var(--primary-red-glow);
}

.login-tab-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qr-code-box {
    display: flex;
    justify-content: center;
    padding: 14px;
    background: #FFFFFF;
    border-radius: var(--radius-md);
    width: fit-content;
    margin: 0 auto;
    box-shadow: 0 8px 25px var(--primary-red-glow);
}

.qr-canvas-holder canvas,
.qr-canvas-holder img {
    display: block;
    width: 140px;
    height: 140px;
}

.mac-key-badge-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mac-badge-item {
    background: #000;
    border: 1px solid var(--border-red);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    display: flex;
    gap: 6px;
}

.mac-badge-label { color: var(--text-muted); font-weight: 700; }
.mac-badge-val { font-family: monospace; font-weight: 900; }

.qr-instructions-text {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Formulário de Login Xtream */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.form-group label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.form-control {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #FFFFFF;
    outline: none;
}

.input-action-btn {
    position: absolute;
    right: 12px;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
}

.input-action-btn:hover { color: #fff; }

.form-error-msg {
    color: #EF4444;
    font-size: 11.5px;
    font-weight: 600;
}

.form-row-remember {
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
}

.login-demo-divider {
    text-align: center;
    position: relative;
    margin: 16px 0;
}

.login-demo-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-subtle);
}

.login-demo-divider span {
    position: relative;
    background: #0A0D14;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
}

.login-device-footer {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
}

.footer-mac-info { display: flex; gap: 14px; }

/* ==========================================================================
   ESTRUTURA GERAL: APP SHELL (SIDEBAR ESQUERDA + PALCO PRINCIPAL DIREITA)
   ========================================================================== */
.app-shell-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow: hidden;
    background-color: var(--bg-main);
}

/* SIDEBAR EXPANSÍVEL (85px -> 240px) */
.tv-sidebar {
    width: var(--sidebar-collapsed-width);
    height: 100vh;
    background-color: var(--bg-sidebar);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: width 0.22s var(--ease-out);
    z-index: 200;
    overflow: hidden;
    white-space: nowrap;
    padding: 24px 0 16px 0;
    flex-shrink: 0;
}

.tv-sidebar:hover,
.tv-sidebar:focus-within {
    width: var(--sidebar-expanded-width);
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.6);
}

.sidebar-header {
    padding: 0 20px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-menu-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.sidebar-branding {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.sidebar-logo-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-brand-text {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.2s;
}

.tv-sidebar:hover .sidebar-brand-text,
.tv-sidebar:focus-within .sidebar-brand-text {
    opacity: 1;
}

.wordmark-star { color: #FFFFFF; }
.wordmark-br { color: var(--primary-red); }
.wordmark-badge {
    font-size: 9px;
    background: var(--primary-red);
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    font-weight: 800;
    margin-left: 4px;
}

.sidebar-nav-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 14px;
    flex: 1;
    overflow-y: auto;
}

.sidebar-item {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    transition: all 0.18s;
    flex-shrink: 0;
}

.sidebar-item i {
    font-size: 20px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-item span {
    opacity: 0;
    transition: opacity 0.2s;
}

.tv-sidebar:hover .sidebar-item span,
.tv-sidebar:focus-within .sidebar-item span {
    opacity: 1;
}

.sidebar-item:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-item.active {
    background: linear-gradient(90deg, rgba(255, 30, 30, 0.25), rgba(255, 30, 30, 0.05));
    color: #FFFFFF;
    border-left: 3.5px solid var(--primary-red);
}

.sidebar-footer {
    padding: 14px 14px 0 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-profile-card {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
}

.sidebar-avatar-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.sidebar-profile-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s;
}

.tv-sidebar:hover .sidebar-profile-info,
.tv-sidebar:focus-within .sidebar-profile-info {
    opacity: 1;
}

.sidebar-profile-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* PALCO PRINCIPAL (DIREITA) */
.main-stage-container {
    flex: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* TOPBAR SUPERIOR */
.stage-topbar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36px;
    background: linear-gradient(180deg, rgba(8, 17, 32, 0.95) 0%, rgba(8, 17, 32, 0.6) 80%, transparent 100%);
    z-index: 50;
    flex-shrink: 0;
}

.topbar-welcome-wrap {
    display: flex;
    flex-direction: column;
}

.welcome-user-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
}

.welcome-tagline {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.topbar-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.5px;
}

.topbar-actions-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trial-status-pill {
    background: rgba(0, 230, 118, 0.15);
    border: 1.5px solid rgba(0, 230, 118, 0.5);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-green);
    cursor: pointer;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

.days-chip {
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10.5px;
    color: #fff;
}

.topbar-clock-display {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
}

.topbar-search-pill {
    height: 42px;
    width: 240px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-decoration: none;
    transition: all 0.2s;
}

.topbar-search-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--primary-red);
    color: #fff;
}

.topbar-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    position: relative;
    font-size: 16px;
}

.topbar-icon-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--border-highlight);
}

.notif-badge-pill {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--primary-red);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expiry-alert-bar {
    background: linear-gradient(90deg, #B91C1C, #7F1D1D);
    padding: 10px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
}

.expiry-alert-content { display: flex; align-items: center; gap: 10px; }

/* ÁREA DE ROLAGEM PRINCIPAL */
.stage-content-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 60px;
}

/* ==========================================================================
   1. CINEMATIC HERO BANNER (CinematicHeroBanner v_webnew)
   ========================================================================== */
.cinematic-hero-banner {
    position: relative;
    width: 100%;
    height: 480px;
    display: flex;
    align-items: center;
    padding: 0 48px;
    overflow: hidden;
    margin-bottom: 24px;
}

.hero-backdrop-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    filter: brightness(0.65);
    transform: scale(1.02);
    transition: background-image 0.6s ease-in-out;
}

.hero-vignette-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #081120 0%, rgba(8, 17, 32, 0.85) 35%, rgba(8, 17, 32, 0.2) 70%, transparent 100%),
                linear-gradient(180deg, transparent 40%, rgba(8, 17, 32, 0.9) 85%, #081120 100%);
}

.hero-info-container {
    position: relative;
    z-index: 2;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-banner-title {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.15;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

.hero-banner-overview {
    font-size: 14.5px;
    color: #CBD5E1;
    line-height: 1.5;
    max-height: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.hero-banner-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.hero-carousel-indicators {
    position: absolute;
    bottom: 20px;
    right: 48px;
    display: flex;
    gap: 8px;
    z-index: 3;
}

.hero-carousel-indicator {
    width: 24px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    transition: all 0.3s;
}

.hero-carousel-indicator.active {
    width: 40px;
    background: var(--primary-red);
}

/* ==========================================================================
   2. FAIXAS E CARROSSEIS DA HOME (Prateleiras)
   ========================================================================== */
.home-shelf-section {
    padding: 0 48px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.shelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shelf-title {
    font-family: var(--font-heading);
    font-size: 18.5px;
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 10px;
}

.shelf-see-all {
    color: var(--accent-cyan);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.shelf-see-all:hover { text-decoration: underline; }

/* 8 Plataformas de Streaming */
.platforms-horizontal-list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
}

.platform-card-btn {
    height: 56px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13.5px;
    color: #FFFFFF;
    transition: all 0.2s;
    text-decoration: none;
}

.platform-card-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--border-highlight);
    transform: translateY(-2px);
}

.platform-card-btn.netflix { border-left: 3px solid #E50914; }
.platform-card-btn.prime { border-left: 3px solid #00A8E1; }
.platform-card-btn.disney { border-left: 3px solid #113CCF; }
.platform-card-btn.max { border-left: 3px solid #002BE7; }
.platform-card-btn.globoplay { border-left: 3px solid #FB0036; }
.platform-card-btn.apple { border-left: 3px solid #A2AAAD; }
.platform-card-btn.paramount { border-left: 3px solid #0064FF; }
.platform-card-btn.telecine { border-left: 3px solid #E50914; }

/* Carrosséis Horizontais de Pôsteres */
.posters-horizontal-list,
.channels-horizontal-list,
.top10-horizontal-list {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 2px 14px 2px;
    scroll-behavior: smooth;
}

/* Card Padrão de Pôster (Vertical 2:3) */
.poster-card {
    width: 175px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.poster-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    background: #000;
    overflow: hidden;
}

.poster-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.poster-card:hover .poster-card-thumb img {
    transform: scale(1.06);
}

.poster-rating-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 179, 0, 0.4);
    color: var(--accent-gold);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 4px;
}

.poster-quality-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid var(--border-subtle);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
}

.poster-play-glow {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.poster-play-glow i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 16px var(--primary-red-glow);
}

.poster-card:hover .poster-play-glow {
    opacity: 1;
}

.poster-card-info {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.poster-title-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poster-sub-label {
    font-size: 11px;
    color: var(--text-muted);
}

/* Card Paisagem (Continue Assistindo & Canais) */
.poster-card.card-landscape {
    width: 250px;
}

.poster-card.card-landscape .poster-card-thumb {
    aspect-ratio: 16 / 9;
}

.continue-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
}

.continue-progress-fill {
    height: 100%;
    background: var(--primary-red);
}

/* Top 10 Ranqueamento Metálico */
.top10-card-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    cursor: pointer;
}

.top10-big-number {
    font-family: var(--font-heading);
    font-size: 90px;
    font-weight: 900;
    line-height: 1;
    color: #1E293B;
    -webkit-text-stroke: 2px #475569;
    letter-spacing: -6px;
    width: 60px;
    text-align: right;
    user-select: none;
}

.top10-card-box:nth-child(1) .top10-big-number { color: #854D0E; -webkit-text-stroke: 2px var(--accent-gold); }
.top10-card-box:nth-child(2) .top10-big-number { color: #334155; -webkit-text-stroke: 2px #CBD5E1; }
.top10-card-box:nth-child(3) .top10-big-number { color: #7C2D12; -webkit-text-stroke: 2px #F97316; }

/* ==========================================================================
   3. TV AO VIVO (LAYOUT 4 PAINÉIS IDÊNTICO A V_WEBNEW)
   ========================================================================== */
.live-tv-stage {
    background-color: #050914;
}

.live-tv-quad-container {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Coluna Esquerda: Categorias & Lista de Canais */
.live-channels-sidebar-panel {
    width: 360px;
    background: rgba(8, 14, 30, 0.95);
    border-right: 1.5px solid #162035;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.live-category-switcher-bar {
    height: 48px;
    margin: 12px 14px 6px 14px;
    background: #0F172A;
    border: 1.2px solid #223254;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
}

.cat-nav-arrow-btn {
    width: 44px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8E9EB5;
    font-size: 16px;
}

.cat-nav-arrow-btn:hover {
    background: var(--primary-red);
    color: #fff;
}

.cat-current-name-box {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 6px;
}

.live-channel-search-box {
    position: relative;
    margin: 4px 14px 8px 14px;
    display: flex;
    align-items: center;
}

.live-channel-search-box i {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 12px;
}

.live-channel-search-box input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: #fff;
    font-size: 12.5px;
    outline: none;
}

.live-channels-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-channel-item-card {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.live-channel-item-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-highlight);
}

.live-channel-item-card.active {
    background: rgba(255, 30, 30, 0.25);
    border-color: var(--primary-red);
}

.live-channel-logo-img {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: #000;
    padding: 3px;
    object-fit: contain;
    flex-shrink: 0;
}

.live-channel-info-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.live-channel-name-txt {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-channel-prog-txt {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Coluna Direita: Player + EPG */
.live-player-epg-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    overflow: hidden;
}

.live-preview-player-box {
    flex: 11;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-video-element {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.player-loading-spinner {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 20;
}

.spinner-ring {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--primary-red);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.live-player-osd-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

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

.osd-channel-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #000;
    border-radius: 6px;
    padding: 3px;
}

.live-badge-red {
    font-size: 10px;
    font-weight: 800;
    color: #FF1E1E;
    display: flex;
    align-items: center;
    gap: 4px;
}

.live-player-controls-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 18px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.controls-left, .controls-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-ctrl-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.player-ctrl-btn:hover { background: var(--primary-red); }

.stream-quality-tag {
    font-size: 11px;
    font-weight: 800;
    background: rgba(0, 210, 255, 0.2);
    border: 1px solid rgba(0, 210, 255, 0.4);
    color: var(--accent-cyan);
    padding: 3px 8px;
    border-radius: 4px;
}

/* Painel EPG Inferior */
.live-epg-timeline-box {
    flex: 9;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.live-epg-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.epg-active-channel-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.epg-active-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #000;
    border-radius: 8px;
    padding: 4px;
}

.epg-tags-row { display: flex; gap: 6px; margin-top: 4px; }

.live-current-program-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.current-prog-times {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #fff;
}

.time-separator { color: var(--text-muted); }

.epg-progress-bar-wrap {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.epg-progress-bar-fill {
    height: 100%;
    background: var(--primary-red);
    transition: width 0.3s;
}

.current-prog-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.upcoming-epg-heading {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.upcoming-epg-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upcoming-epg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.upcoming-epg-time { color: var(--accent-cyan); font-weight: 700; font-family: monospace; }
.upcoming-epg-title { color: #fff; font-weight: 600; }

/* ==========================================================================
   4. MÓDULOS FILMES & SÉRIES (Duas Colunas: Categorias + Grade v_webnew)
   ========================================================================== */
.module-two-columns-container {
    flex: 1;
    display: flex;
    padding: 16px 36px 36px 36px;
    gap: 24px;
    overflow: hidden;
}

.module-categories-sidebar {
    width: 260px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

.categories-sidebar-title {
    padding: 18px 20px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--primary-red);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.categories-items-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.module-category-btn {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.15s;
    text-align: left;
}

.module-category-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.module-category-btn.active {
    background: rgba(255, 30, 30, 0.2);
    border-left: 3.5px solid var(--primary-red);
    color: #fff;
}

.module-grid-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.grid-header-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.active-category-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.category-total-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.posters-matrix-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 18px;
    padding-bottom: 40px;
}

/* ==========================================================================
   5. TELA DE BUSCA (SearchScreen v_webnew)
   ========================================================================== */
.search-pro-header {
    padding: 16px 36px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-back-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.search-input-wrapper {
    flex: 1;
    height: 52px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
}

.search-field-icon { font-size: 18px; }

.search-text-field {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    outline: none;
}

.search-clear-btn { color: var(--text-muted); font-size: 18px; }

.search-filters-chips-bar {
    padding: 12px 36px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-chip-btn {
    padding: 8px 18px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-chip-btn.active {
    background: var(--primary-red);
    color: #fff;
    border-color: var(--primary-red);
}

.search-content-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 36px 36px 36px;
    gap: 20px;
    overflow-y: auto;
}

.tv-embedded-keyboard-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 820px;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.kb-key {
    height: 40px;
    min-width: 44px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-subtle);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.kb-key:hover { background: var(--primary-red); }
.kb-key-space { min-width: 140px; }
.kb-key-action { min-width: 80px; background: rgba(255, 255, 255, 0.12); }
.kb-key-enter { min-width: 110px; background: var(--primary-red); }

.search-results-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 18px;
}

/* ==========================================================================
   6. CONFIGURAÇÕES (TVBoxSettingsScreen v_webnew)
   ========================================================================== */
.settings-content-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px 36px 60px 36px;
}

.settings-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.card-header-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
}

.card-description {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 14px;
}

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

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.info-row span { color: var(--text-muted); }

.current-profile-badge-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: var(--radius-md);
}

.avatar-preview-lg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.pix-plans-selector-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.plan-chip-btn {
    flex: 1;
    padding: 10px 8px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.plan-chip-btn.active {
    background: rgba(0, 230, 118, 0.15);
    border-color: var(--accent-green);
    color: #fff;
}

.badge-popular {
    position: absolute;
    top: -8px;
    background: var(--accent-gold);
    color: #000;
    font-size: 8.5px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
}

.pix-qr-render-box {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #fff;
    padding: 14px;
    border-radius: var(--radius-md);
    color: #000;
}

.pix-qr-canvas canvas, .pix-qr-canvas img {
    width: 110px;
    height: 110px;
    display: block;
}

.pix-copy-paste-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pix-copy-paste-box input {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 11px;
    font-family: monospace;
}

.setting-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    font-weight: 600;
}

.switch-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.switch-toggle input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: .3s;
    border-radius: 26px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .slider { background-color: var(--primary-red); }
input:checked + .slider:before { transform: translateX(22px); }

.buffer-options-row, .doh-options-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.buffer-btn, .doh-btn {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.buffer-btn.active, .doh-btn.active {
    background: rgba(0, 210, 255, 0.2);
    border-color: var(--accent-cyan);
    color: #fff;
}

.speedtest-results-box {
    display: flex;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    padding: 14px;
    border-radius: var(--radius-md);
}

.speedtest-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label { font-size: 11px; color: var(--text-muted); }
.stat-val { font-size: 20px; font-weight: 900; font-family: monospace; }

/* ==========================================================================
   7. PLAYER FULLSCREEN DEDICADO (VideoPlayerScreen v_webnew)
   ========================================================================== */
.page-player {
    background-color: #000;
}

.dedicated-player-stage {
    position: fixed;
    inset: 0;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: default;
}

.fullscreen-video-element {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.player-osd-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 24px 36px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 100;
    transition: opacity 0.3s;
}

.player-back-circle-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.player-media-titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-media-titles h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 900;
    color: #fff;
}

.player-osd-badges {
    display: flex;
    gap: 8px;
}

.player-osd-bottombar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 36px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
    transition: opacity 0.3s;
}

.player-scrubber-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scrubber-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

.scrubber-buffer-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
}

.scrubber-played-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--primary-red);
    border-radius: 3px;
}

.scrubber-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px var(--primary-red-glow);
}

.scrubber-time-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: monospace;
    color: var(--text-secondary);
}

.player-buttons-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.strip-left, .strip-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.osd-btn {
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.osd-btn:hover { background: var(--primary-red); }

/* ==========================================================================
   8. MODAIS DO SISTEMA (DetailsModal, Exit, PIN, Perfis)
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.details-modal-box {
    position: relative;
    width: 90%;
    max-width: 1050px;
    max-height: 88vh;
    background: var(--bg-card);
    border: 1.2px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.details-backdrop-hero {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    filter: brightness(0.45);
}

.details-backdrop-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0E1726 0%, rgba(14, 23, 38, 0.9) 45%, rgba(14, 23, 38, 0.3) 100%),
                linear-gradient(180deg, transparent 50%, #0E1726 100%);
}

.details-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.details-modal-content {
    position: relative;
    z-index: 10;
    padding: 36px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.details-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.15;
}

.details-synopsis {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 720px;
}

.details-actions-row {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}

.details-series-wrapper {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.seasons-tabs-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.season-tab-btn {
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

.season-tab-btn.active {
    background: var(--primary-red);
    color: #fff;
    border-color: var(--primary-red);
}

.episodes-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.episode-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.episode-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.episode-thumb-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
}

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

.episode-info {
    padding: 8px 10px;
}

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

.exit-dialog-box, .pin-dialog-box {
    width: 440px;
    background: #0F172A;
    border: 1.2px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
}

.exit-icon-circle, .pin-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.exit-buttons-row {
    display: flex;
    gap: 14px;
    margin-top: 14px;
}

.pin-dots-row {
    display: flex;
    gap: 12px;
    margin: 10px 0;
}

.pin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid var(--border-subtle);
}

.pin-dot.filled {
    background: var(--primary-red);
    border-color: var(--primary-red);
    box-shadow: 0 0 10px var(--primary-red-glow);
}

.pin-keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 260px;
}

.pin-num-btn {
    height: 48px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-subtle);
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-num-btn:hover { background: var(--primary-red); }

/* Responsividade Geral */
@media (max-width: 1024px) {
    .tv-sidebar { width: 60px; }
    .tv-sidebar:hover, .tv-sidebar:focus-within { width: 200px; }
    .platforms-horizontal-list { grid-template-columns: repeat(4, 1fr); }
    .live-channels-sidebar-panel { width: 280px; }
}

@media (max-width: 768px) {
    .platforms-horizontal-list { grid-template-columns: repeat(2, 1fr); }
    .module-two-columns-container { flex-direction: column; }
    .module-categories-sidebar { width: 100%; height: 180px; }
}