:root { --blue: #0047FF; --purple: #9D00FF; --pink: #FF00E5; --bg: #02040a; }
body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background: var(--bg); color: #fff; height: 100vh; overflow: hidden; }

/* HEADER & LOGO - MANTIDOS INTEGRALMENTE */
header { display: flex; justify-content: space-between; padding: 20px 40px; align-items: center; z-index: 10; position: absolute; width: 100%; box-sizing: border-box; }
.logo img { height: 120px; filter: drop-shadow(0 0 10px var(--blue)); }

/* ============================================================
   NOVO: SPLASH SCREEN (TELA DE CARREGAMENTO) - ISOLADO
   ============================================================ */
#splash-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, #0a0e1a 0%, #02040a 100%);
    display: flex; justify-content: center; align-items: center;
    z-index: 11000; transition: opacity 0.8s ease, visibility 0.8s;
}
.splash-content { text-align: center; }
.splash-logo { height: 400px; margin-bottom: 40px; filter: drop-shadow(0 0 20px var(--blue)); animation: splashPulse 2s infinite ease-in-out; }
.loader-circle { width: 45px; height: 45px; border: 3px solid rgba(255, 255, 255, 0.05); border-top: 3px solid var(--blue); border-radius: 50%; margin: 0 auto 20px; animation: loaderSpin 1s linear infinite; box-shadow: 0 0 15px rgba(0, 71, 255, 0.2); }
.splash-loader p { font-size: 13px; letter-spacing: 3px; font-weight: 600; text-transform: uppercase; color: #fff; opacity: 0.6; }
@keyframes loaderSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes splashPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } }

/* TELA DE ATIVAÇÃO - MANTIDA INTEGRALMENTE */
#screen-activation { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: radial-gradient(circle at center, #0a0e1a 0%, #02040a 100%);
    display: none; justify-content: center; align-items: center; z-index: 9999;
}
.activation-card {
    width: 550px; padding: 60px; background: rgba(255,255,255,0.03); 
    border-radius: 40px; border: 2px solid var(--blue); text-align: center;
    backdrop-filter: blur(20px); box-shadow: 0 0 80px rgba(0, 71, 255, 0.2);
}
.activation-card h1 { font-size: 38px; font-weight: 900; margin-bottom: 10px; color: #fff; }
.activation-card p { opacity: 0.7; font-size: 18px; margin-bottom: 40px; }
.mac-display { 
    background: rgba(0,0,0,0.5); padding: 25px; border-radius: 20px; 
    border: 1px solid rgba(255,255,255,0.1); margin-bottom: 40px;
    font-family: monospace; font-size: 22px; color: var(--blue); letter-spacing: 2px; line-height: 1.5;
}
.btn-trial {
    background: var(--blue); color: #fff; padding: 20px 50px; border-radius: 15px;
    border: none; font-weight: 900; font-size: 20px; cursor: pointer; transition: 0.3s;
}

/* DASHBOARD HOME - MANTIDA INTEGRALMENTE */
#screen-home-root { height: 100vh; display: none; flex-direction: column; position: relative; background: radial-gradient(circle at center, #0a0e1a 0%, #02040a 100%); }
.top-nav { display: flex; justify-content: space-between; align-items: center; padding: 25px 50px; margin-top: 10px; }
.nav-left, .nav-right { display: flex; gap: 15px; }
.nav-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 10px 25px; border-radius: 12px; cursor: pointer; font-weight: 600; transition: 0.3s; display: flex; align-items: center; gap: 10px; }
.nav-btn:hover { background: var(--blue); border-color: #fff; box-shadow: 0 0 20px rgba(0, 71, 255, 0.4); }
.nav-btn-circle { width: 45px; height: 45px; padding: 0; justify-content: center; border-radius: 50%; }

#screen-home { flex: 1; display: flex; justify-content: center; align-items: center; gap: 30px; padding: 0 50px; }
.dash-card { width: 250px; height: 380px; background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%); border-radius: 35px; border: 2px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); backdrop-filter: blur(15px); position: relative; }
.dash-card:hover { transform: scale(1.08); background: rgba(255,255,255,0.1); }
.dash-card.live:hover { border-color: var(--blue); box-shadow: 0 0 60px rgba(0, 71, 255, 0.5); }
.dash-card.movies:hover { border-color: var(--purple); box-shadow: 0 0 60px rgba(157, 0, 255, 0.5); }
.dash-card.series:hover { border-color: var(--pink); box-shadow: 0 0 60px rgba(255, 0, 229, 0.5); }
.dash-card.playlists:hover { border-color: #fff; box-shadow: 0 0 60px rgba(255, 255, 255, 0.3); }
.dash-card i { font-size: 80px; margin-bottom: 25px; color: #fff; }
.dash-card span { font-size: 22px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }

.bottom-bar { display: flex; justify-content: space-between; align-items: flex-end; padding: 30px 50px; }
.info-group { background: rgba(0,0,0,0.4); padding: 15px 25px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.05); font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; }
.info-group span { color: #fff; font-weight: 600; }
.clock-widget { text-align: right; }
.clock-time { font-size: 32px; font-weight: 900; }

/* ESTILOS DO CATÁLOGO - MANTIDOS INTEGRALMENTE */
#screen-catalog { display: none; height: 100vh; flex-direction: row; }
aside { width: 320px; background: #080a12; padding: 25px; border-right: 1px solid #222; overflow-y: auto; }
main { flex: 1; padding: 30px; overflow-y: auto; background: radial-gradient(circle at top right, #111, #02040a); position: relative; }

.cat-item { display: flex; justify-content: space-between; padding: 15px; border-radius: 12px; cursor: pointer; color: #888; transition: 0.2s; margin-bottom: 5px; border: 1px solid transparent; }
.cat-item:hover { background: rgba(0, 71, 255, 0.1); color: #fff; }
.cat-item.active { background: var(--blue); color: #fff; font-weight: 800; box-shadow: 0 4px 15px rgba(0, 71, 255, 0.3); }

/* ESTILO DA ABA FAVORITOS NA BARRA LATERAL */
#fav-category-static { border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 15px; color: #ffcc00 !important; font-weight: 900; }
#fav-category-static:hover { background: rgba(255, 204, 0, 0.1) !important; }
#fav-count { background: rgba(255, 204, 0, 0.2); padding: 2px 8px; border-radius: 6px; font-size: 12px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 25px; }
.movie-card { background: #111; border-radius: 15px; overflow: hidden; cursor: pointer; border: 1px solid #222; transition: 0.3s; position: relative; height: fit-content; min-height: 260px; }
.movie-card:hover { transform: scale(1.05); border-color: var(--pink); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.movie-card img { width: 100%; height: 260px; object-fit: cover; display: block; }
.movie-info { padding: 12px; font-size: 13px; text-align: center; font-weight: 600; background: #111; min-height: 40px; display: flex; align-items: center; justify-content: center; }

/* TELA DE DETALHES PREMIUM (FLUIDA E CENTRALIZADA) - MANTIDA INTEGRALMENTE */
#modal-detalhes {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9500; background: #000; overflow-y: auto;
}
#det-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    filter: blur(80px) brightness(0.2) saturate(1.2); z-index: -1; transform: scale(1.1);
}
.label-premium {
    font-size: 14px; color: var(--blue); font-weight: 900;
    letter-spacing: 3px; margin-bottom: 15px; display: block;
    text-shadow: 0 0 10px rgba(0, 71, 255, 0.5);
}
.det-close-area {
    position: absolute; top: 40px; left: 5%; display: flex; align-items: center;
    gap: 15px; cursor: pointer; z-index: 10; opacity: 0.6; transition: 0.3s;
}
.det-close-area:hover { opacity: 1; transform: translateX(-5px); color: var(--blue); }
.det-close-area i { font-size: 24px; }
.det-close-area span { font-weight: 900; letter-spacing: 2px; }
.det-container {
    display: flex; gap: 80px; padding: 120px 5%; width: 100%; 
    box-sizing: border-box; align-items: flex-start; justify-content: center;
}
.det-poster-box { width: clamp(280px, 20vw, 400px); flex-shrink: 0; text-align: center; }
#det-capa {
    width: 100%; border-radius: 25px; box-shadow: 0 30px 60px rgba(0,0,0,0.9);
    border: 1px solid rgba(255,255,255,0.1); transition: 0.4s;
}
.det-stars { margin-top: 20px; color: #ffcc00; font-size: 18px; display: flex; justify-content: center; gap: 8px; align-items: center; }
.stars-gold { filter: drop-shadow(0 0 5px rgba(255,204,0,0.4)); }
#det-nota-valor { margin-left: 10px; color: #fff; font-weight: 900; background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 8px; }
.det-info-box { flex: 1; max-width: 1200px; } 
.det-category-label { color: var(--blue); font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px; display: inline-block; }
#det-titulo { 
    font-size: clamp(32px, 5vw, 75px); font-weight: 900; margin: 0; line-height: 1.1; 
    background: linear-gradient(to bottom, #fff 0%, #aaa 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5); text-transform: uppercase;
}
.det-metadata { display: flex; flex-wrap: wrap; gap: 30px; margin: 30px 0; padding: 25px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.meta-item { font-size: 15px; opacity: 0.9; display: flex; align-items: center; gap: 8px; }
.meta-item strong { color: var(--blue); font-weight: 700; }
.det-synopsis-box { margin-bottom: 40px; }
#det-sinopse { font-size: 18px; line-height: 1.7; opacity: 0.8; }

/* CORREÇÃO: BOTÕES ULTRA PREMIUM (TRANSPARENTES E GLOW) - MANTIDOS */
.det-actions-row { display: flex; gap: 20px; margin-bottom: 50px; }
.btn-ultra-watch { 
    background: rgba(255, 255, 255, 0.1); color: #fff; padding: 18px 50px; 
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); 
    font-weight: 900; font-size: 18px; cursor: pointer; transition: 0.3s; 
    display: flex; align-items: center; gap: 12px; backdrop-filter: blur(10px); text-transform: uppercase;
}
.btn-ultra-watch:hover { transform: scale(1.05); background: var(--blue); border-color: var(--blue); box-shadow: 0 0 30px rgba(0, 71, 255, 0.5); }
.btn-ultra-fav { width: 65px; height: 65px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 24px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.btn-ultra-fav:hover { color: #ff3b3b; background: rgba(255, 59, 59, 0.1); border-color: #ff3b3b; transform: scale(1.1); }
.btn-ultra-fav.active { color: #ff3b3b; background: rgba(255, 59, 59, 0.2); border-color: #ff3b3b; }

/* CAST SECTION & EPISODES LIST - MANTIDOS INTEGRALMENTE */
.cast-row { display: flex; gap: 30px; overflow-x: auto; padding: 10px 0 20px 0; scrollbar-width: none; justify-content: flex-start; }
.cast-item { text-align: center; width: 110px; flex-shrink: 0; transition: 0.4s; }
.cast-img { width: 95px; height: 95px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.1); margin-bottom: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.det-series-box { margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 40px; }
.episodes-premium-list { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.ep-premium-card { display: flex; align-items: center; gap: 25px; background: rgba(255,255,255,0.03); padding: 20px; border-radius: 15px; cursor: pointer; transition: 0.3s; border-left: 4px solid transparent; position: relative; overflow: hidden; }
.ep-premium-card:hover { background: linear-gradient(90deg, rgba(0,71,255,0.15) 0%, transparent 100%); border-left-color: var(--blue); transform: translateX(10px); }
.ep-thumb { width: 240px; height: 135px; border-radius: 12px; object-fit: cover; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }

/* RESPONSIVIDADE TOTAL - MANTIDA */
@media (max-width: 1100px) {
    .det-container { flex-direction: column; align-items: center; padding: 100px 30px; text-align: center; }
    .det-poster-box { width: 240px; }
    #det-titulo { font-size: 38px; }
    .det-metadata, .det-actions-row { justify-content: center; }
    .ep-thumb { width: 160px; height: 90px; }
    .det-close-area { left: 30px; top: 30px; }
}

/* PERFORMANCE - MANTIDA INTEGRALMENTE */
.skeleton-shimmer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%); background-size: 200% 100%; animation: shimmerEffect 1.5s infinite; z-index: 1; }
@keyframes shimmerEffect { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.lazy-img { opacity: 0; transition: opacity 0.8s ease-in-out; }
.lazy-img.loaded { opacity: 1; }

/* PLAYER & CONTROLES - MANTIDOS INTEGRALMENTE */
#player-wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9000; background: #000; }
.v-controls { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.8) 100%); z-index: 10002; transition: opacity 0.5s ease; }
.v-controls.hide { opacity: 0; cursor: none; }
.v-top { padding: 40px 60px; display: flex; justify-content: space-between; align-items: center; }
.v-info h2 { margin: 0; font-size: 28px; font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.v-info span { opacity: 0.6; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.v-btn-exit { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 10px 25px; border-radius: 30px; cursor: pointer; backdrop-filter: blur(10px); font-weight: 600; transition: 0.3s; }
.v-btn-exit:hover { background: #ff0044; border-color: #ff0044; }
.v-bottom { padding: 40px 60px; backdrop-filter: blur(15px); background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.05); }
.v-progress-box { position: relative; width: 100%; height: 6px; margin-bottom: 30px; background: rgba(255,255,255,0.1); border-radius: 10px; cursor: pointer; }
#v-progress-bar { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--pink)); border-radius: 10px; width: 0%; z-index: 1; pointer-events: none; }
#v-progress { width: 100%; position: absolute; top: -5px; left: 0; height: 16px; opacity: 0; cursor: pointer; z-index: 2; }
.v-actions { display: flex; justify-content: space-between; align-items: center; }
.v-actions-left, .v-actions-right { display: flex; align-items: center; gap: 25px; }
.v-ctrl { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; transition: 0.3s; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.v-ctrl:hover { background: rgba(255,255,255,0.1); transform: scale(1.1); text-shadow: 0 0 15px var(--blue); }
.v-time { font-family: monospace; font-size: 16px; opacity: 0.8; margin-left: 10px; }
.v-volume-box { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); padding: 5px 15px; border-radius: 20px; }
#v-volume { width: 80px; cursor: pointer; accent-color: var(--blue); }
#v-live-indicator { display: flex; align-items: center; gap: 8px; color: #ff0044; font-weight: 900; font-size: 14px; background: rgba(255,0,68,0.1); padding: 5px 15px; border-radius: 20px; animation: pulse 2s infinite; }
.v-dot { width: 8px; height: 8px; background: #ff0044; border-radius: 50%; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* TOASTS PREMIUM - MANTIDOS INTEGRALMENTE */
#toast-container { position: fixed; top: 40px; right: 40px; z-index: 12000; display: flex; flex-direction: column; gap: 15px; pointer-events: none; }
.toast { min-width: 350px; background: rgba(10, 14, 26, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 5px solid var(--blue); padding: 20px 25px; border-radius: 15px; backdrop-filter: blur(20px); display: flex; align-items: center; gap: 15px; color: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.6); animation: toastIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; position: relative; overflow: hidden; pointer-events: auto; }
.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: var(--blue); animation: toastProgress 3s linear forwards; }
@keyframes toastIn { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes toastProgress { 0% { width: 100%; } 100% { width: 0%; } }

/* ============================================================
   NOVO: SISTEMA MULTI-PLAYLIST PREMIUM (ESTILO SMARTERS LUXO)
   ============================================================ */
.playlist-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px);
    z-index: 15000; display: flex; justify-content: center; align-items: center;
}

.playlist-container {
    width: 90%; max-width: 900px; background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--blue); border-radius: 40px; padding: 50px;
    box-shadow: 0 0 100px rgba(0, 71, 255, 0.2); position: relative;
}

.playlist-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
}

.playlist-header h2 { font-size: 32px; font-weight: 900; margin: 0; display: flex; align-items: center; gap: 15px; }
.playlist-header h2 i { color: var(--blue); }

.btn-close-playlist {
    background: rgba(255, 255, 255, 0.05); border: none; color: #fff;
    width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
    font-size: 20px; transition: 0.3s;
}
.btn-close-playlist:hover { background: #ff0044; transform: rotate(90deg); }

.playlist-subtitle { opacity: 0.6; font-size: 16px; margin-bottom: 35px; }

.playlist-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px; max-height: 450px; overflow-y: auto; padding-right: 15px;
}

/* Card Individual de Playlist no Modal */
.playlist-card-item {
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
    padding: 25px; cursor: pointer; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center; position: relative; overflow: hidden;
}

.playlist-card-item:hover {
    transform: scale(1.05); border-color: var(--blue);
    background: rgba(0, 71, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 71, 255, 0.3);
}

.playlist-card-item i { font-size: 40px; color: var(--blue); margin-bottom: 15px; display: block; }
.playlist-card-item b { font-size: 18px; display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
.playlist-card-item span { font-size: 12px; opacity: 0.5; }

/* Destaque para a Playlist que está ATIVA no momento */
.playlist-card-item.active-list { border-color: var(--pink); box-shadow: 0 0 20px rgba(255, 0, 229, 0.2); }
.playlist-card-item.active-list::after {
    content: "CONECTADO"; position: absolute; top: 10px; right: -25px;
    background: var(--pink); color: #fff; font-size: 9px; font-weight: 900;
    padding: 3px 30px; transform: rotate(45deg);
}

/* Remove a barra de rolagem em navegadores Chrome, Safari, Edge e Opera */
*::-webkit-scrollbar {
    display: none !important;
}

/* Remove a barra de rolagem no Firefox */
* {
    scrollbar-width: none !important;
}

/* Remove a barra de rolagem no Internet Explorer e versões antigas do Edge */
* {
    -ms-overflow-style: none !important;
}



/* ============================================================
   AJUSTES PARA TV & RESPONSIVIDADE AUTOMÁTICA
   ============================================================ */

/* 1. Mata a linha amarela e contornos fantasmas das TVs */
* { 
    box-sizing: border-box; 
    outline: none !important; /* Remove o contorno amarelo de foco das TVs */
    -webkit-tap-highlight-color: transparent; 
}

/* 2. Barra de Pesquisa Minimalista (Estilo Ícone) */
.search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    width: 50px; /* Largura inicial (só o ícone) */
    overflow: hidden;
}

.search-wrapper i {
    color: var(--blue);
    font-size: 18px;
    min-width: 20px;
}

.search-wrapper input {
    background: transparent;
    border: none;
    color: #fff;
    margin-left: 15px;
    width: 0; /* Escondido por padrão */
    transition: 0.4s;
    font-weight: 600;
}

/* Classe que o JS vai adicionar ao clicar */
.search-wrapper.active {
    width: 300px; /* Estica ao ativar */
    border-color: var(--blue);
    box-shadow: 0 0 15px rgba(0, 71, 255, 0.3);
}

.search-wrapper.active input {
    width: 100%;
}

/* 3. Adaptação Automática para Telas Grandes (TVs) */
@media (min-width: 1600px) {
    .dash-card {
        width: 300px;
        height: 450px;
    }
    .dash-card i { font-size: 100px; }
    .dash-card span { font-size: 26px; }
    
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 35px;
    }
    
    .movie-card img { height: 320px; }
}

/* 4. Ajuste para Celulares (Caso você use no fone tbm) */
@media (max-width: 768px) {
    header { padding: 10px 20px; }
    .logo img { height: 60px; }
    #screen-home { flex-direction: column; padding-top: 100px; overflow-y: auto; }
    .dash-card { width: 90%; height: 120px; flex-direction: row; gap: 20px; }
    .dash-card i { font-size: 40px; margin-bottom: 0; }
}
