/* ============================================================================
   KoraFlix — CSS Unificado  ·  Premium Edition
   Fusão de: main.css + fixes.css
   Conflitos resolvidos:
     1. .card-badge     → sistema único [data-quality] + gradientes do fixes
     2. .search-bar     → regra única sem duplicata de especificidade
     3. .card-overlay   → display:none substituído por opacity+pointer-events
     4. .card-overlay-title → removido do main (estava morto), display:none mantido
     5. .card-overlay-meta  → mesclado em uma regra só
     6. .right-sidebar @768px → propriedades unificadas no mesmo breakpoint
     7. .card-title     → font-size único (13px → 14px, adotando fixes)
     8. var(--transition-base) → substituída pelas vars corretas do design system
   Fonts: Outfit (display) + DM Sans (body)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */
:root {
    /* Brand -> Red UI (paleta admin-core.css) */
    --primary-red: #E63946;
    --primary-red-hover: #ff5a66;
    --primary-red-light: #ff5a66;
    --primary-red-glow: rgba(230, 57, 70, 0.35);

    /* Accent */
    --accent-blue: #F5653D;
    --accent-green: #30D98A;
    --accent-yellow: #F5C94D;
    --accent-purple: #ff5a66;

    /* Surfaces */
    --bg-body: #0B1018;
    --bg-surface: #111A25;
    --bg-sidebar: #111A25;
    --bg-card: #182636;
    --bg-input: #111A25;

    /* Text */
    --text-main: #FFFFFF;
    --text-secondary: #D7DEE8;
    --text-muted: #8E98A5;
    --text-light: #FFFFFF;

    /* Borders */
    --border-soft: #1B2A38;
    --border-medium: #223548;
    --border-card: #1B2A38;

    /* Red Brand Tokens (paleta admin-core.css) */
    --primary: #E63946;
    --primary-hover: #c42d3a;
    --primary-dark: #c42d3a;
    --secondary: #F5653D;
    --accent: #E63946;
    --surface-elevated: #182636;
    --divider: #1B2A38;
    --shadow: rgba(0,0,0,.55);
    --shadow-btn: rgba(0,0,0,.30);
    --glow: rgba(230,57,70,.35);

    /* Paleta de apoio Hero (vermelho) */
    --azul-petroleo: #3d1418;
    --azul-oceano: #6e1a22;
    --azul-premium: #a4293a;
    --azul-neon: #E63946;
    --cyan-glow: #ff5a66;
    --preto-profundo: #05080D;

    /* Tipografia Hero */
    --headline: #ff8a94;
    --hero-body: #DCE5EF;
    --hero-muted: #8D99A6;
    --logo-red: #E5303B;

    /* Radii */
    --radius-xs: 8px;
    --radius-s: 12px;
    --radius-m: 18px;
    --radius-l: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-hover: 0 12px 32px rgba(230, 57, 70, 0.15);
    --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.55);
    --shadow-red: 0 8px 28px rgba(230, 57, 70, 0.35);
    --shadow-red-lg: 0 16px 40px rgba(230, 57, 70, 0.35);

    /* Typography */
    --font-display: 'Outfit', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 150ms;
    --dur-base: 240ms;
    --dur-slow: 380ms;

    /* Z-index */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-overlay: 800;
    --z-modal: 900;
}

/* ============================================================================
   CORREÇÃO ESPECÍFICA PARA A HERO-NAV (HEADER SUPERIOR DESKTOP)
   ============================================================================ */
@media (min-width: 900px) {
    header.hero-nav {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        height: 84px !important;
        padding: 0 40px !important;
        background: transparent !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    header.hero-nav .nav-links {
        display: flex !important;
    }

    header.hero-nav .install-btn {
        display: flex !important;
    }

    header.hero-nav .desktop-search {
        display: flex !important;
    }

    header.hero-nav .hamburger {
        display: none !important;
    }
}

/* ============================================================================
   RESET
   ============================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    background: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-in-out);
}

a:hover {
    color: var(--primary-red);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-main);
}

img {
    display: block;
    max-width: 100%;
}

button {
    font-family: var(--font-body);
    cursor: pointer;
}

/* ============================================================================
   DECORATIVE BACKGROUND
   ============================================================================ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
}

.deco-corner {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 260px;
    pointer-events: none;
    z-index: 1;
}

.deco-corner svg {
    width: 100%;
    height: 100%;
}

.deco-corner-br {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 260px;
    height: 260px;
    pointer-events: none;
    z-index: 1;
    transform: rotate(180deg);
}

.gold-rule {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #B8943F 30%, #d4af60 50%, #B8943F 70%, transparent 100%);
    opacity: 0;
    animation: ruleReveal 1.2s 0.2s var(--ease-out) forwards;
    z-index: 10;
}

.gold-rule-bottom {
    top: auto;
    bottom: 0;
}

@keyframes ruleReveal {
    from {
        opacity: 0;
        transform: scaleX(0.3);
    }

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

/* ============================================================================
   APP SHELL
   ============================================================================ */
.app {
    width: 96%;
    max-width: 1700px;
    height: 94vh;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft), 0 0 0 1px var(--border-soft);
    display: grid;
    grid-template-columns: 76px 1fr 360px;
    overflow: hidden;
    position: relative;
    z-index: var(--z-base);
    margin: auto;
}

/* ============================================================================
   BOTTOM FLOATING NAVIGATION DOCK (.sidebar)
   ============================================================================ */
.sidebar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-full);
    background: rgba(17, 26, 37, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 900;
    transition: all var(--dur-slow);
}

.sidebar-logo-img {
    width: 40px;
    height: auto;
    margin-bottom: 24px;
    transition: transform var(--dur-base) var(--ease-spring);
}

.sidebar-logo-img:hover {
    transform: scale(1.08) rotate(-3deg);
}

.sidebar-logo-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
    transition: transform var(--dur-base) var(--ease-spring);
    cursor: default;
}

.sidebar-logo-brand:hover {
    transform: scale(1.05) rotate(-2deg);
}

.sidebar-logo-brand .brand-wordmark {
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1;
    color: white;
    text-shadow: 0 1px 0 rgba(201, 146, 58, 0.6), 0 3px 10px rgba(229, 9, 20, 0.35);
}

.sidebar-logo-brand .brand-wordmark span {
    color: var(--red);
}

.sidebar-logo-brand .brand-sub {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 6px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.sidebar-logo-brand .gold-line {
    width: 20px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--gold, #c9923a), var(--gold-light, #e8b86d), transparent);
    margin-top: 4px;
    border-radius: 1px;
}

.nav-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-s);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 21px;
    transition: all var(--dur-base) var(--ease-out);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.nav-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-s);
    background: rgba(229, 9, 20, 0.08);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}

.nav-btn i {
    position: relative;
    z-index: 1;
    transition: transform var(--dur-base) var(--ease-spring);
}

.nav-btn:hover::before,
.nav-btn.active::before {
    opacity: 1;
    transform: scale(1);
}

.nav-btn:hover,
.nav-btn.active {
    color: white;
}

.nav-btn.active {
    background: var(--primary-red);
}

.nav-btn:hover i {
    transform: scale(1.1);
}

.sidebar-toggle,
.sidebar .sidebar-toggle {
    display: none !important;
}

.sidebar .spacer {
    width: 1px;
    height: 24px;
    background: var(--border-medium);
    margin: 0 6px;
    flex: none;
}

/* ============================================================================
   MAIN CONTENT
   ============================================================================ */
.main {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    scroll-behavior: smooth;
    gap: 0;
    padding: 0;
}

.main::-webkit-scrollbar {
    width: 6px;
}

.main::-webkit-scrollbar-track {
    background: transparent;
}

.main::-webkit-scrollbar-thumb {
    background: var(--text-light);
    border-radius: var(--radius-full);
}

.main::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================================================
   HEADER
   ============================================================================ */
.header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 28px;
    gap: 12px;
    flex-shrink: 0;
}

/* ============================================================================
   SEARCH BAR
   ============================================================================ */
.search-bar {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    padding: 10px 22px;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1.5px solid var(--border-soft);
    width: 320px;
    gap: 12px;
    transition: all var(--dur-base) var(--ease-spring);
    cursor: text;
    position: relative;
    z-index: 10;
}

.search-bar:hover {
    border-color: var(--border-medium);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.search-bar:focus-within {
    box-shadow: var(--shadow-red);
    border-color: var(--primary-red);
    transform: translateY(-2px);
    width: 360px;
}

.search-bar i {
    color: var(--text-muted);
    font-size: 18px;
    flex-shrink: 0;
    transition: all var(--dur-fast) ease;
}

.search-bar:focus-within i {
    color: var(--primary-red);
    transform: scale(1.1);
}

.search-bar input {
    border: none;
    outline: none;
    width: 100%;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    background: transparent;
}

.search-bar input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.search-modal-overlay {
    z-index: 9999;
}

.mobile-search-btn {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--primary-red);
    font-size: 20px;
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out);
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.mobile-search-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.mobile-search-btn:active {
    transform: scale(0.95);
}

.mobile-menu-btn {
    display: none;
    background: var(--bg-card);
    border: 1.5px solid var(--border-soft);
    color: var(--text-main);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-s);
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all var(--dur-fast);
    box-shadow: var(--shadow-xs);
}

.mobile-menu-btn:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
}

/* ============================================================================
   SECTIONS
   ============================================================================ */
.section {
    margin-bottom: 40px;
    padding: 0 40px;
    animation: sectionFade var(--dur-slow) var(--ease-out) both;
}

@media (max-width: 768px) {
    .section {
        padding: 0 16px;
    }
}

@keyframes sectionFade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 20px;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section h3 i {
    font-size: 20px;
    color: var(--primary-red);
}

.see-all-link {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-red);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--dur-fast) var(--ease-spring);
    white-space: nowrap;
}

.see-all-link:hover {
    gap: 8px;
    color: var(--primary-red-hover);
}

/* ============================================================================
   ROW SCROLL
   ============================================================================ */
.row-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    gap: 12px;
    padding-bottom: 16px;
    padding-left: 0px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--text-light) transparent;
}

.row-scroll::-webkit-scrollbar {
    height: 5px;
}

.row-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.row-scroll::-webkit-scrollbar-thumb {
    background: var(--text-light);
    border-radius: var(--radius-full);
}

.row-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Canais ao Vivo: CSS próprio em live-channels.css (2026-09-04) */

/* ============================================================================
   SMALL CARD
   ============================================================================ */
.card-wrapper {
    width: 155px;
    flex-shrink: 0;
}

.small-card {
    min-width: 155px;
    width: 155px;
    border-radius: var(--radius-m);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--dur-slow) var(--ease-out);
    display: block;
    position: relative;
    box-shadow: var(--shadow-card);
    flex-shrink: 0;
    background: var(--bg-card);
    aspect-ratio: 2/3;
    height: 0;
    padding-bottom: 150%;
}

.small-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease-out);
}

/* ============================================================================
   CONTENT-GRID
   ============================================================================ */
.content-grid>div {
    display: flex;
    flex-direction: column;
    animation: cardReveal var(--dur-slow) var(--ease-out) both;
}

.content-grid>div .card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--radius-m);
}

.content-grid .small-card {
    position: relative !important;
    width: 100% !important;
    min-width: unset !important;
    aspect-ratio: 2 / 3 !important;
    height: 0 !important;
    padding-bottom: 150% !important;
    overflow: hidden;
    border-radius: var(--radius-m);
    display: block;
    align-self: flex-start;
    flex-grow: 0;
    flex-shrink: 0;
}

.small-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-hover);
    z-index: 10;
}

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

/* ============================================================================
   CARD BADGE
   ============================================================================ */
.card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 5px;
    z-index: 5;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.7);
}

@supports (backdrop-filter: blur(1px)) {
    .card-badge {
        backdrop-filter: blur(10px);
    }
}

.card-badge:empty {
    display: none;
}

.card-badge[data-quality="4k"],
.card-badge[data-quality="uhd"] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
}

.card-badge[data-quality="fhd"],
.card-badge[data-quality="1080p"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.card-badge[data-quality="hd"],
.card-badge[data-quality="720p"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: rgba(255, 255, 255, 0.95);
}

.card-badge[data-quality="sd"] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   CARD OVERLAY
   ============================================================================ */
.small-card .card-overlay {
    display: none;
}

.small-card[data-type="movie"] .card-overlay,
.small-card[data-type="series"] .card-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 36px 12px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.23s ease, transform 0.23s var(--ease-out);
    z-index: 3;
    pointer-events: none;
}

.small-card:hover .card-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.card-overlay-title {
    display: none;
}

.card-overlay-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
}

.card-overlay-meta:empty {
    display: none;
}

.card-overlay-year {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    font-variant-numeric: tabular-nums;
}

.card-overlay-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(0, 0, 0, 0.5);
    padding: 3px 7px;
    border-radius: var(--radius-full);
}

.card-overlay-rating i {
    font-size: 9px;
}

.card-quick-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--dur-base) var(--ease-out);
    z-index: 5;
}

.small-card:hover .card-quick-actions {
    opacity: 1;
    transform: translateY(0);
}

.card-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: none;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast) var(--ease-out);
}

.card-action-btn:hover {
    background: white;
    transform: scale(1.1);
}

.card-action-btn i {
    font-size: 16px;
}

.card-meta {
    margin-top: 10px;
    padding: 0 4px;
    min-width: 0;
}

.card-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
    line-height: 1.3;
    transition: color var(--dur-fast);
}

.card-title:hover {
    color: var(--primary-red);
}

.card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-body);
}

.rating-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.05);
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
}

.star-icon {
    color: var(--accent-yellow);
    font-size: 10px;
}

/* ============================================================================
   CHANNEL EPG CARDS
   (.channel-epg-card, .channel-epg-time e .channel-epg-progress-fill
   moveram pra live-channels.css — eram sobrescritos mais abaixo neste
   mesmo arquivo de qualquer forma; ver comentário lá.)
   ============================================================================ */
.channel-epg-link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.channel-logo-container {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--border-soft);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast);
}

.channel-epg-card:hover .channel-logo-container {
    border-color: rgba(229, 9, 20, 0.25);
}

.channel-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.channel-epg-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.channel-epg-name {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.channel-epg-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

.channel-epg-title-slider {
    display: inline-block;
    padding-right: 20px;
    transition: transform var(--dur-base) var(--ease-out);
}

.channel-epg-card:hover .channel-epg-title-slider.is-overflowing {
    animation: premium-slider 6s linear infinite alternate;
}

@media (max-width: 768px) {
    .channel-epg-title-slider.is-overflowing {
        animation: premium-slider 6s linear infinite alternate;
    }
}

@keyframes premium-slider {
    0%, 15% { transform: translateX(0); }
    85%, 100% { transform: translateX(calc(-100% + 140px)); }
}

.channel-epg-category {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.channel-epg-progress-bar {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: 4px;
}

.channel-quality-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: white;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    backdrop-filter: blur(4px);
}

/* ============================================================================
   CATEGORY FILTER TAGS
   ============================================================================ */
.cat-tag {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 16px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-spring);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    text-decoration: none;
}

.cat-tag:hover {
    background: var(--primary-red);
    color: white;
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: var(--shadow-red);
}

.cat-tag.active {
    background: var(--primary-red) !important;
    color: white !important;
    border-color: var(--primary-red) !important;
    box-shadow: var(--shadow-red);
}

/* ============================================================================
   CONTENT GRID
   ============================================================================ */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 16px;
    margin-top: 4px;
    align-items: start;
}

.content-grid>div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    animation: cardReveal var(--dur-slow) var(--ease-out) both;
}

@media (min-width: 1025px) {
    .content-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.content-grid .channel-epg-card,
.channels-grid .channel-epg-card,
.content-grid .small-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0;
}

.channels-grid .channel-epg-link {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 16px 12px;
    position: relative;
}

.channels-grid .channel-epg-time {
    position: absolute;
    top: 12px;
    left: 12px;
    margin: 0;
    align-self: auto;
}

.channels-grid .channel-logo-container {
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.channels-grid .channel-epg-info {
    align-items: center;
    width: 100%;
}

.channels-grid .channel-epg-title,
.channels-grid .channel-epg-category {
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 100%;
}

.channels-grid .channel-epg-title { -webkit-line-clamp: 2; }
.channels-grid .channel-epg-category { -webkit-line-clamp: 1; }

.content-grid>div:nth-child(1) { animation-delay: 0ms; }
.content-grid>div:nth-child(2) { animation-delay: 30ms; }
.content-grid>div:nth-child(3) { animation-delay: 60ms; }
.content-grid>div:nth-child(4) { animation-delay: 90ms; }
.content-grid>div:nth-child(5) { animation-delay: 120ms; }
.content-grid>div:nth-child(6) { animation-delay: 150ms; }
.content-grid>div:nth-child(n+7) { animation-delay: 180ms; }

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.page-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-section-header h3 {
    font-size: 22px;
    margin: 0;
}

.content-count-badge {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1.5px solid var(--border-soft);
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

/* ============================================================================
   CHANNELS PAGE
   ============================================================================ */
.channel-tile {
    background: var(--bg-card);
    border-radius: var(--radius-m);
    border: 1.5px solid var(--border-card);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: all var(--dur-base) var(--ease-spring);
    animation: cardReveal var(--dur-slow) var(--ease-out) both;
}

.channel-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(229, 9, 20, 0.2);
}

.channel-tile a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 12px 16px;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.channel-tile-logo {
    width: 68px;
    height: 68px;
    object-fit: contain;
    border-radius: 50%;
    padding: 8px;
    background: #f8f9fb;
    border: 2px solid var(--border-soft);
    transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}

.channel-tile:hover .channel-tile-logo {
    border-color: rgba(229, 9, 20, 0.3);
    transform: scale(1.06);
}

.channel-tile-name {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.channel-tile-quality {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 800;
    color: var(--text-muted);
    background: var(--bg-body);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.live-dot {
    width: 7px;
    height: 7px;
    background: var(--primary-red);
    border-radius: 50%;
    display: inline-block;
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.4);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.8);
        box-shadow: 0 0 0 4px rgba(229, 9, 20, 0);
    }
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(229, 9, 20, 0.1);
    color: var(--primary-red);
    border: 1px solid rgba(229, 9, 20, 0.2);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-state i {
    font-size: 72px;
    color: var(--text-light);
    margin-bottom: 20px;
    display: block;
}

.empty-state h4 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.empty-state p {
    color: var(--text-muted);
    font-size: 14px;
    max-width: 300px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
    padding: 12px 26px;
    border-radius: var(--radius-s);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: var(--primary-red);
    color: white;
    box-shadow: var(--shadow-red);
}

.btn-primary:hover {
    background: var(--primary-red-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-red-lg);
}

.btn-primary:active {
    transform: translateY(0) scale(0.97);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.28);
    color: white;
}

/* ============================================================================
   RIGHT SIDEBAR
   ============================================================================ */
.right-sidebar {
    background: var(--bg-sidebar);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    overflow-y: auto;
    border-left: 1px solid var(--border-soft);
}

.right-sidebar::-webkit-scrollbar {
    width: 5px;
}

.right-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.right-sidebar::-webkit-scrollbar-thumb {
    background: var(--text-light);
    border-radius: var(--radius-full);
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    color: white;
    font-size: 17px;
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.22);
    flex-shrink: 0;
    overflow: hidden;
}

.side-section-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.side-section-title i {
    font-size: 14px;
    color: var(--primary-red);
}

.widget-card {
    background: var(--bg-card);
    border-radius: var(--radius-m);
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    box-shadow: var(--shadow-xs);
    border: 1.5px solid var(--border-card);
    position: relative;
    margin-bottom: 10px;
    transition: all var(--dur-base) var(--ease-out);
    text-decoration: none;
    color: inherit;
}

.widget-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    border-color: rgba(229, 9, 20, 0.15);
}

.widget-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xs);
    object-fit: cover;
    flex-shrink: 0;
}

.badge-new {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: var(--primary-red);
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.progress-track {
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: var(--radius-full);
    margin-top: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-red), #ff5c64);
    border-radius: var(--radius-full);
    transition: width var(--dur-slow);
}

.notification-card {
    background: var(--bg-card);
    border-radius: var(--radius-m);
    padding: 14px 16px;
    border: 1.5px solid var(--border-card);
    box-shadow: var(--shadow-xs);
    transition: all var(--dur-base);
    width: 100%;
    box-sizing: border-box;
}

.notification-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.widget-carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.widget-carousel {
    display: flex;
    transition: transform 0.5s var(--ease-in-out);
}

.widget-slide {
    min-width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ============================================================================
   MODALS
   ============================================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: 20px;
}

.modal-backdrop.show {
    display: flex;
    animation: modalBackdropIn 0.28s ease forwards;
}

/* [2026-09-14] Fechamento animado — antes closeModal() só trocava
   display:none na hora, sem nenhuma transição (abria suave via
   modalPop, mas fechava com um "corte seco"). .closing toca o reverso
   de modalPop/modalBackdropIn; o JS (openModal/closeModal em
   shell-bottom.php) espera a animação terminar antes de aplicar
   display:none de verdade. */
.modal-backdrop.closing {
    display: flex;
    animation: modalBackdropOut 0.22s ease forwards;
}
.modal-backdrop.closing .modal {
    animation: modalPopOut 0.22s cubic-bezier(.4, 0, 1, 1) forwards;
}

@keyframes modalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalBackdropOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.modal {
    background: var(--bg-card);
    max-width: 500px;
    width: 100%;
    border-radius: var(--radius-l);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
    animation: modalPop 0.32s var(--ease-spring);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-soft);
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.93) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@keyframes modalPopOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.93) translateY(12px);
    }
}

.modal-header {
    padding: 22px 28px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 10;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-body {
    padding: 28px;
    overflow-y: auto;
}

.close-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    background: var(--bg-body);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 17px;
    cursor: pointer;
    transition: all var(--dur-fast);
}

.close-btn:hover {
    background: var(--primary-red);
    color: white;
    border-color: var(--primary-red);
}

.form-group {
    margin-bottom: 18px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-input,
.form-select,
.form-textarea,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-s);
    border: 2px solid var(--border-soft);
    background: var(--bg-body);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-main);
    transition: all var(--dur-base);
    outline: none;
    margin-bottom: 0;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-red);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--primary-red-glow);
}

.form-textarea,
.form-group textarea {
    resize: vertical;
    min-height: 90px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 850;
    pointer-events: none;
    cursor: default;
}

.sidebar-overlay.active {
    display: block;
    pointer-events: auto;
    cursor: pointer;
}

/* ============================================================================
   PROFILE MODAL
   ============================================================================ */
.profile-grid-modal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.profile-card-modal {
    background: var(--bg-body);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-m);
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-spring);
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-card-modal:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    border-color: var(--primary-red);
}

.profile-card-modal.active {
    border: 2px solid var(--primary-red);
    background: rgba(229, 9, 20, 0.03);
    box-shadow: 0 0 0 3px var(--primary-red-glow);
}

.profile-stats-mini {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 10px;
    color: var(--text-muted);
}

.stat-badge {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ============================================================================
   SKELETON / UTILITY
   ============================================================================ */
.skeleton {
    background: linear-gradient(90deg, #efefef 25%, #e3e3e3 50%, #efefef 75%);
    background-size: 200% 100%;
    animation: shimmer 1.6s var(--ease-in-out) infinite;
    border-radius: var(--radius-xs);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================================
   RESPONSIVE — ≤1280px
   ============================================================================ */
@media (max-width: 1280px) {
    .app {
        grid-template-columns: 76px 1fr 320px;
    }

    .right-sidebar {
        padding: 28px 20px;
    }

    .glass-player {
        width: 250px;
    }
}

/* ============================================================================
   RESPONSIVE — ≤1024px (tablet)
   ============================================================================ */
@media (max-width: 1024px) {
    .app {
        grid-template-columns: 76px 1fr;
    }

    .right-sidebar {
        position: fixed;
        top: 0;
        right: -340px;
        width: 320px;
        height: 100vh;
        z-index: 900;
        padding: 28px 22px;
        pointer-events: none;
        transition: right var(--dur-slow) var(--ease-out), box-shadow var(--dur-base);
        box-shadow: none;
        overflow-y: auto;
    }

    .right-sidebar.active {
        right: 0;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18);
        pointer-events: auto;
    }

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

    .main {
        padding: 28px 32px 28px 28px;
    }
}

/* ============================================================================
   RESPONSIVE — ≤768px (mobile)
   ============================================================================ */
@media (max-width: 768px) {
    html,
    body {
        overflow: auto;
        height: auto;
    }

    .app {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        margin: 0;
        border-radius: 0;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        box-shadow: none;
    }

    .sidebar {
        flex-direction: row;
        width: 100%;
        height: 64px;
        order: 2;
        padding: 0 8px;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid var(--border-soft);
        border-right: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-fixed);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.07);
        gap: 0;
    }

    .sidebar-logo-brand,
    .sidebar-logo-img,
    .sidebar .spacer {
        display: none;
    }

    .nav-btn {
        width: 52px;
        height: 52px;
    }

    .main {
        padding: 18px 16px 90px;
    }

    .header {
        margin-bottom: 20px;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .search-bar {
        flex: 1;
        width: auto;
        padding: 9px 14px;
    }

    .search-bar:focus-within {
        width: auto;
    }

    .search-bar input {
        font-size: 16px;
    }

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

    .mobile-search-btn {
        display: flex;
    }

    .card-quick-actions {
        display: none;
    }

    .right-sidebar {
        position: fixed;
        width: 85%;
        max-width: 340px;
        right: -100%;
        padding: 24px 20px 80px;
        z-index: 900;
        pointer-events: none;
        transition: right var(--dur-slow) var(--ease-out);
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .right-sidebar.active {
        right: 0;
        pointer-events: auto;
        z-index: 999 !important;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    }

    .section {
        margin-bottom: 30px;
    }

    .section h3 {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .card-wrapper {
        width: 132px;
    }

    .small-card {
        min-width: 132px;
        width: 132px;
    }

    .row-scroll {
        gap: 10px;
        padding-bottom: 12px;
    }

    .content-grid {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        gap: 14px;
    }

    .content-grid .small-card {
        min-width: unset;
        width: 100%;
    }

    .channels-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .channel-tile a {
        padding: 16px 8px 12px;
    }

    .channel-tile-logo {
        width: 52px;
        height: 52px;
    }

    .channel-tile-name {
        font-size: 11px;
    }

    .channel-epg-card {
        width: 248px;
    }

    .channel-epg-link {
        padding: 13px;
        gap: 11px;
    }

    .page-section-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .page-section-header h3 {
        font-size: 18px;
    }

    .filter-bar {
        gap: 6px;
    }

    .cat-tag {
        font-size: 11px;
        padding: 6px 12px;
    }

    .card-badge {
        font-size: 9px;
        padding: 3px 6px;
    }

    .deco-corner,
    .deco-corner-br,
    .gold-rule,
    .gold-rule-bottom {
        display: none;
    }
}

/* ============================================================================
   RESPONSIVE — ≤480px (small mobile)
   ============================================================================ */
@media (max-width: 480px) {
    .main {
        padding: 14px 12px 84px;
    }

    .card-wrapper {
        width: 118px;
    }

    .small-card {
        min-width: unset;
        width: 100%;
    }

    .content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .channels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .channel-tile a {
        padding: 14px 6px 10px;
    }

    .channel-tile-logo {
        width: 46px;
        height: 46px;
    }

    .section h3 {
        font-size: 15px;
    }

    .card-badge {
        font-size: 8px;
        padding: 2px 5px;
    }

    .modal {
        border-radius: var(--radius-l) var(--radius-l) 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        margin: 0;
    }

    .modal-header {
        border-radius: var(--radius-l) var(--radius-l) 0 0;
    }

    .modal-backdrop {
        padding: 0;
        align-items: flex-end;
    }
}

/* ============================================================================
   RESPONSIVE — Tablet médio (769px–1024px)
   ============================================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .card-action-btn {
        width: 28px;
        height: 28px;
    }

    .card-action-btn i {
        font-size: 13px;
    }
}

/* ============================================================================
   TV / LARGE SCREEN SYSTEM
   ============================================================================ */
@media (min-width: 1440px) {
    .app {
        width: 97%;
        max-width: 1920px;
        height: 95vh;
        grid-template-columns: 88px 1fr 380px;
    }

    .sidebar {
        padding: 32px 0;
        gap: 14px;
    }

    .nav-btn {
        width: 54px;
        height: 54px;
        font-size: 23px;
    }

    .main {
        padding: 40px 52px 40px 44px;
    }

    .section h3 {
        font-size: 22px;
    }

    .card-wrapper {
        width: 168px;
    }

    .small-card {
        min-width: 168px;
        width: 168px;
    }

    .content-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 18px;
    }

    .card-title {
        font-size: 14.5px;
    }

    .channel-epg-card {
        width: 240px;
    }

    .right-sidebar {
        padding: 40px 30px;
        gap: 30px;
    }

    .side-section-title {
        font-size: 12px;
    }

    .card-action-btn {
        width: 36px;
        height: 36px;
    }

    .card-action-btn i {
        font-size: 17px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 17px;
    }

    .app {
        width: 97%;
        max-width: 2200px;
        height: 95vh;
        grid-template-columns: 96px 1fr 420px;
    }

    .sidebar {
        padding: 36px 0;
        gap: 16px;
    }

    .nav-btn {
        width: 60px;
        height: 60px;
        font-size: 25px;
        border-radius: 16px;
    }

    .sidebar-logo-brand .brand-wordmark {
        font-size: 16px;
    }

    .main {
        padding: 44px 60px 44px 52px;
    }

    .header {
        margin-bottom: 36px;
    }

    .search-bar {
        width: 360px;
        padding: 13px 22px;
        font-size: 15px;
    }

    .search-bar:focus-within {
        width: 420px;
    }

    .section {
        margin-bottom: 52px;
    }

    .section h3 {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .see-all-link {
        font-size: 14px;
    }

    .card-wrapper {
        width: 185px;
    }

    .small-card {
        min-width: 185px;
        width: 185px;
    }

    .row-scroll {
        gap: 22px;
        padding-bottom: 20px;
        padding-right: 8px;
    }

    .content-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 22px;
    }

    .card-title {
        font-size: 15px;
    }

    .card-info {
        font-size: 12px;
    }

    .card-badge {
        font-size: 11px;
        padding: 5px 10px;
    }

    .card-overlay-year,
    .card-overlay-rating {
        font-size: 12px;
    }

    .channel-epg-card {
        width: 280px;
        margin-right: 4px;
        flex-shrink: 0;
    }

    .channel-epg-link {
        padding: 18px;
        gap: 16px;
    }

    .channel-epg-title {
        font-size: 15px;
    }

    .channel-logo-container {
        width: 62px;
        height: 62px;
    }

    .cat-tag {
        font-size: 13px;
        padding: 8px 18px;
    }

    .right-sidebar {
        padding: 36px 26px 36px 26px;
        gap: 26px;
    }

    .side-section-title {
        font-size: 12.5px;
        letter-spacing: 0.14em;
        margin-bottom: 14px;
    }

    .widget-card {
        padding: 14px 16px;
        gap: 13px;
        margin-bottom: 8px;
    }

    .widget-thumb {
        width: 54px;
        height: 54px;
    }

    .notification-card {
        padding: 14px 16px;
    }

    .avatar {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .card-action-btn {
        width: 40px;
        height: 40px;
    }

    .card-action-btn i {
        font-size: 18px;
    }

    .nav-btn:focus-visible,
    .card-action-btn:focus-visible,
    .cat-tag:focus-visible,
    .small-card:focus-visible {
        outline: 3px solid var(--primary-red);
        outline-offset: 3px;
    }
}

@media (min-width: 2560px) {
    html {
        font-size: 19px;
    }

    .app {
        width: 96%;
        max-width: 3000px;
        height: 94vh;
        grid-template-columns: 110px 1fr 500px;
        border-radius: 36px;
    }

    .sidebar {
        padding: 40px 0;
        gap: 18px;
    }

    .nav-btn {
        width: 72px;
        height: 72px;
        font-size: 29px;
        border-radius: 18px;
    }

    .sidebar-logo-brand .brand-wordmark {
        font-size: 18px;
    }

    .main {
        padding: 52px 72px 52px 60px;
    }

    .search-bar {
        width: 420px;
        padding: 15px 26px;
        border-radius: 40px;
    }

    .search-bar:focus-within {
        width: 500px;
    }

    .search-bar input {
        font-size: 16px;
    }

    .section {
        margin-bottom: 64px;
    }

    .section h3 {
        font-size: 28px;
        margin-bottom: 28px;
    }

    .card-wrapper {
        width: 220px;
    }

    .small-card {
        min-width: 220px;
        width: 220px;
    }

    .row-scroll {
        gap: 20px;
        padding-bottom: 22px;
    }

    .content-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 26px;
    }

    .card-title {
        font-size: 16px;
    }

    .card-badge {
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 7px;
    }

    .channel-epg-card {
        width: 310px;
    }

    .channel-logo-container {
        width: 70px;
        height: 70px;
    }

    .cat-tag {
        font-size: 14px;
        padding: 10px 22px;
    }

    .right-sidebar {
        padding: 52px 40px;
        gap: 40px;
    }

    .side-section-title {
        font-size: 13px;
    }

    .widget-card {
        padding: 20px 22px;
        border-radius: 20px;
    }

    .widget-thumb {
        width: 66px;
        height: 66px;
        border-radius: 14px;
    }

    .avatar {
        width: 58px;
        height: 58px;
        font-size: 23px;
    }

    .card-action-btn {
        width: 48px;
        height: 48px;
    }

    .card-action-btn i {
        font-size: 22px;
    }

    .nav-btn:focus-visible,
    .small-card:focus-visible,
    .cat-tag:focus-visible {
        outline: 4px solid var(--primary-red);
        outline-offset: 4px;
    }
}

@media (min-width: 3840px) {
    html {
        font-size: 24px;
    }

    .app {
        width: 95%;
        max-width: 4200px;
        height: 93vh;
        grid-template-columns: 130px 1fr 600px;
        border-radius: 44px;
    }

    .sidebar {
        padding: 48px 0;
        gap: 22px;
    }

    .nav-btn {
        width: 88px;
        height: 88px;
        font-size: 36px;
        border-radius: 22px;
    }

    .main {
        padding: 64px 90px 64px 72px;
    }

    .search-bar {
        width: 520px;
        padding: 18px 32px;
    }

    .search-bar:focus-within {
        width: 620px;
    }

    .section {
        margin-bottom: 80px;
    }

    .section h3 {
        font-size: 34px;
        margin-bottom: 34px;
    }

    .card-wrapper {
        width: 280px;
    }

    .small-card {
        min-width: 280px;
        width: 280px;
    }

    .row-scroll {
        gap: 26px;
    }

    .content-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 32px;
    }

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

    .channel-epg-card {
        width: 380px;
    }

    .channel-logo-container {
        width: 86px;
        height: 86px;
    }

    .cat-tag {
        font-size: 16px;
        padding: 12px 28px;
    }

    .right-sidebar {
        padding: 64px 52px;
        gap: 52px;
    }

    .side-section-title {
        font-size: 14px;
    }

    .widget-card {
        padding: 26px 28px;
        border-radius: 24px;
    }

    .widget-thumb {
        width: 80px;
        height: 80px;
        border-radius: 16px;
    }

    .avatar {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .card-action-btn {
        width: 58px;
        height: 58px;
    }

    .card-action-btn i {
        font-size: 27px;
    }

    .nav-btn:focus-visible,
    .small-card:focus-visible,
    .cat-tag:focus-visible,
    .card-action-btn:focus-visible {
        outline: 5px solid var(--primary-red);
        outline-offset: 5px;
    }
}

/* ============================================================================
   NOVO DOCK E DARK MODE UNIVERSAL
   ============================================================================ */
body.dark {
    --bg-body: #0c0d11;
    --bg-surface: #111318;
    --bg-sidebar: #0e0f14;
    --bg-card: #191b22;
    --bg-card-2: #1e2029;
    --bg-input: rgba(255, 255, 255, 0.06);
    --text-main: #f0f2f8;
    --text-secondary: #a8afc8;
    --text-muted: #565d7a;
    --text-light: #2e3249;
    --border-soft: rgba(255, 255, 255, 0.06);
    --border-medium: rgba(255, 255, 255, 0.10);
    --border-card: rgba(255, 255, 255, 0.07);

    --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.60);
    --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.50);
    color-scheme: dark;
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
}

body.dark::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 1;
}

body.dark .app {
    box-shadow: 0 0 0 1px var(--border-soft), 0 8px 32px rgba(0, 0, 0, 0.5), 0 32px 80px rgba(0, 0, 0, 0.6);
}

.app {
    border-radius: var(--radius-xl);
    height: 94vh;
    margin-top: 3vh;
    background: var(--bg-surface) !important;
}

.main {
    padding: 36px 44px 110px !important;
}

.brand-wordmark {
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--text-main);
    flex-shrink: 0;
}

.brand-wordmark span {
    color: var(--primary-red);
}

.search-bar {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    padding: 11px 20px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-soft);
    width: 300px;
    gap: 10px;
    flex-direction: row;
}

.search-bar input {
    border: none;
    outline: none;
    width: 100%;
    background: transparent;
    color: var(--text-main);
}

body.dark .search-bar {
    backdrop-filter: blur(12px);
}

/* DOCK DE NAVEGAÇÃO INFERIOR HORIZONTAL */
.sidebar {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 12px 24px !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-full) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    z-index: 100 !important;
    transition: all var(--dur-slow);
    width: auto !important;
    height: auto !important;
}

body.dark .sidebar {
    background: rgba(14, 15, 20, 0.85) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    border-color: var(--border-medium) !important;
}

.sidebar .nav-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted) !important;
    font-size: 21px !important;
    transition: all var(--dur-base) var(--ease-out) !important;
    position: relative !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
}

.sidebar .nav-btn.active,
.sidebar .nav-btn:hover {
    color: var(--primary-red) !important;
    background: rgba(229, 9, 20, 0.08) !important;
    transform: scale(1.1) !important;
}

.sidebar .spacer {
    width: 1px !important;
    height: 24px !important;
    background: var(--border-medium) !important;
    flex: none !important;
    margin: 0 4px !important;
    opacity: 0.5 !important;
}

.profile-trigger {
    border: 2px solid var(--border-soft) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    color: var(--text-main) !important;
}

.profile-trigger:hover {
    border-color: var(--primary-red) !important;
    box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.22) !important;
    color: var(--primary-red) !important;
}

/* RIGHT SIDEBAR COMO FLOATING SIDEBAR */
.right-sidebar {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(calc(-50% + 60px), -50%) scale(0.95) !important;
    opacity: 0;
    visibility: hidden;
    width: 90% !important;
    max-width: 400px !important;
    max-height: 85vh !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    padding: 24px 28px !important;
}

.right-sidebar.active {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.right-sidebar::-webkit-scrollbar {
    width: 5px;
}

.right-sidebar::-webkit-scrollbar-thumb {
    background: var(--text-light);
    border-radius: var(--radius-full);
}

.sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 900 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.24s !important;
    display: block !important;
}

.sidebar-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 4K & TV Adjustments */
@media (min-width: 1920px) {
    .sidebar {
        bottom: 50px !important;
        padding: 18px 36px !important;
        gap: 12px !important;
    }

    .sidebar .nav-btn {
        width: 64px !important;
        height: 64px !important;
        font-size: 28px !important;
    }

    .sidebar .spacer {
        height: 36px !important;
    }

    .profile-trigger {
        width: 56px !important;
        height: 56px !important;
    }

    .right-sidebar {
        max-width: 500px !important;
        padding: 36px 42px !important;
    }
}

@media (max-width: 768px) {

    html,
    body {
        overflow: auto !important;
        height: auto !important;
    }

    .app {
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr auto !important;
        box-shadow: none !important;
        border: none !important;
    }

    .main {
        padding: 18px 16px 90px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .sidebar {
        bottom: 16px !important;
        width: calc(100% - 32px) !important;
        justify-content: space-between !important;
        padding: 10px 16px !important;
        gap: 0 !important;
    }

    .sidebar .nav-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 20px !important;
    }

    .sidebar .spacer {
        display: none !important;
    }

    .profile-trigger {
        width: 38px !important;
        height: 38px !important;
    }

    .right-sidebar {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: translate(0, 100%) scale(1) !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        border: none !important;
        border-top: 1px solid var(--border-medium) !important;
        max-height: 88vh !important;
    }

    .right-sidebar.active {
        transform: translate(0, 0) scale(1) !important;
    }
}

/* ── Ajuste de espaçamento entre seções da home (2026-09-04) ──────
   As seções de descoberta (Em Alta Hoje, Séries Populares, Mais
   Avaliados, Novos Episódios e Lançamentos, Categorias) ficam mais
   próximas entre si. O espaçamento de Canais ao Vivo (margin-top,
   maior que o das outras) mudou pra live-channels.css junto com o
   resto do CSS próprio dessa seção. */
.trending-section,
.platforms-section,
.mais-avaliados-section,
.lancamentos-section,
.categorias-section {
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .trending-section,
    .platforms-section,
    .mais-avaliados-section,
    .lancamentos-section,
    .categorias-section {
        margin-bottom: 12px;
    }
}

@media (min-width: 1440px) {
    .trending-section,
    .platforms-section,
    .mais-avaliados-section,
    .lancamentos-section,
    .categorias-section {
        margin-bottom: 20px;
    }
}

@media (min-width: 1920px) {
    .trending-section,
    .platforms-section,
    .mais-avaliados-section,
    .lancamentos-section,
    .categorias-section {
        margin-bottom: 24px;
    }
}

@media (min-width: 2560px) {
    .trending-section,
    .platforms-section,
    .mais-avaliados-section,
    .lancamentos-section,
    .categorias-section {
        margin-bottom: 30px;
    }
}

/* ============================================================================
   CAROUSEL BUTTONS — Shared across all carousel containers
   ============================================================================ */

.cw-carousel-container {
    position: relative;
    width: 100%;
}

.cw-row-scroll {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

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

.carousel-btn {
    position: absolute;
    top: 0;
    bottom: 12px;
    width: 60px;
    background: rgba(15, 15, 15, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    color: rgba(255, 255, 255, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
}

.carousel-btn svg {
    width: 28px;
    height: 28px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s;
}

.carousel-btn.left {
    left: 0;
    border-radius: 12px 0 0 12px;
}

.carousel-btn.right {
    right: 0;
    border-radius: 0 12px 12px 0;
}

@media (min-width: 768px) {
    .carousel-btn {
        display: flex;
    }

    .cw-carousel-container:hover .carousel-btn,
    .trending-carousel-container:hover .carousel-btn {
        opacity: 1;
        pointer-events: auto;
    }

    .carousel-btn.disabled {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .trending-carousel-container .carousel-btn {
        top: 0;
        bottom: 0;
        height: auto;
        border-radius: 0;
        transform: none;
        z-index: 9999 !important;
    }

    .trending-carousel-container .carousel-btn.left {
        left: -32px;
        border-radius: 12px 0 0 12px;
    }

    .trending-carousel-container .carousel-btn.right {
        right: -32px;
        border-radius: 0 12px 12px 0;
    }
}

.carousel-btn:hover {
    background: rgba(17, 19, 24, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
}

.carousel-btn:active {
    background: #111318;
}

.carousel-btn.left:hover svg {
    transform: scale(1.15) translateX(-2px);
}

.carousel-btn.right:hover svg {
    transform: scale(1.15) translateX(2px);
}

.carousel-btn.left:active svg {
    transform: scale(0.95) translateX(-4px);
}

.carousel-btn.right:active svg {
    transform: scale(0.95) translateX(4px);
}

.cw-card-wrapper {
    scroll-snap-align: start;
    position: relative;
}

.cw-card-wrapper img {
    transition: transform 0.5s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.cw-card-wrapper:hover img {
    transform: scale(1.05);
}

.cw-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cw-card-wrapper:hover .cw-remove-btn {
    opacity: 1;
}

.cw-play-overlay {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.92);
    opacity: 0.7;
    transition: transform 0.25s cubic-bezier(0.34, 1.15, 0.64, 1), opacity 0.2s;
    box-shadow: none;
}

.cw-card-wrapper:hover .cw-play-overlay {
    transform: scale(1.0);
    opacity: 1;
}

/* ============================================================================
   VENCE-HOJE — Expiry notification banner
   ============================================================================ */

.vence-hoje-container {
    max-width: 1100px;
    margin: 20px auto;
    width: 95%;
    animation: slideDown 0.5s ease-out;
}

.vence-hoje-card {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hero-rating-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.hero-rating-chip {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-rating-chip i {
    color: #ffc107;
    font-size: 12px;
}

.hero-age-chip {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    min-width: 28px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-age-chip[data-age="l"] { background: #00a651; }
.hero-age-chip[data-age="10"] { background: #00adef; }
.hero-age-chip[data-age="12"] { background: #f7941d; }
.hero-age-chip[data-age="14"] { background: #f37021; }
.hero-age-chip[data-age="16"] { background: #ed1c24; }
.hero-age-chip[data-age="18"] { background: #000000; }

@media (max-width: 768px) {
    .vence-hoje-container { margin: 12px auto; }

    .vence-hoje-card {
        padding: 12px 16px;
        border-radius: 16px;
    }

    .vence-hoje-content {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }

    .vence-hoje-text-group {
        flex: 1;
        min-width: 180px;
    }

    .vence-hoje-btn-wrap { width: 100%; }

    .vence-hoje-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 20px !important;
        margin-top: 4px;
    }

    .vence-hoje-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .vence-hoje-title {
        font-size: 14px !important;
        margin-bottom: 0px !important;
    }

    .vence-hoje-desc { font-size: 11px !important; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   PROFILE MODAL GRID
   ============================================================================ */

.profile-grid-modal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.profile-card-modal {
    background: #f9fafb;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.profile-card-modal:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-red);
}

.profile-card-modal.active {
    border: 2px solid var(--primary-red);
    background: rgba(229, 9, 20, 0.02);
}

.profile-stats-mini {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 10px;
    color: var(--text-muted);
}

.stat-badge {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* EPG CARD — Canais ao Vivo: CSS próprio movido pra live-channels.css (2026-09-04) */

.koraflix-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.koraflix-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    background-color: #1a1a1a;
    color: #fff;
    border: 1px solid #333;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.koraflix-page-btn:hover {
    background-color: #2a2a2a;
    border-color: #555;
    color: #fff;
}

.koraflix-page-btn.active {
    background-color: #222;
    border: 2px solid #fff;
    font-weight: 800;
}

.koraflix-page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.koraflix-page-dots {
    color: #888;
    font-weight: bold;
    padding: 0 4px;
}