:root {
    --bg: #05070D;
    --surface: #111827;
    --surface-translucent: rgba(17, 24, 39, 0.7);
    --text: #FFF8F0;
    --text-soft: #D7DEE9;
    --primary: #FF6A00;
    --primary-hover: #FF8126;
    --highlight: #FFB020;
    --danger: #E83D1C;
    --on-accent: #111827;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

body { 
    background-color: var(--bg); 
    color: var(--text); 
    background-image: radial-gradient(circle at top right, rgba(255,106,0,0.05), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(255,176,32,0.03), transparent 40%);
    background-attachment: fixed;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

h1, h2, h3, h4, h5, h6 { font-family: 'Clash Display', sans-serif; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.15; }
h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,106,0,0.5); }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Acessibilidade: Indicador de foco visual WCAG 2.1 AA */
:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* Apple Design: Glassmorphism Inputs & Seletores Unificados */
.input-unified {
    background-color: #141824 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
.input-unified:focus {
    background-color: #192030 !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(255,106,0,0.15) !important;
    outline: none;
}

/* Todos os Seletores (<select>): Fundo cinza com texto nítido em branco */
select.input-unified, select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #141824 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 600;
}
select.input-unified:focus, select:focus {
    background-color: #192030 !important;
    border-color: rgba(255, 106, 0, 0.75) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.18) !important;
    outline: none;
}

/* Seletores Numéricos (Temporada e Episódio) */
#seasonNum, #startEp, select.select-numeric {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-align-last: center !important;
    -webkit-text-align-last: center !important;
    -moz-text-align-last: center !important;
}

/* Ícone discreto nos selects sem wrapper */
select.input-unified:not(#seasonNum):not(#startEp) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.1em 1.1em !important;
    padding-right: 2.2rem !important;
}

/* Itens do Menu (<option>) */
select option {
    background-color: #111622 !important;
    color: #FFFFFF !important;
    font-weight: 500;
}
#seasonNum option, #startEp option, select.select-numeric option {
    background-color: #111622 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.loader {
    border: 2px solid var(--surface);
    border-top: 2px solid var(--text-soft);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.tab-content { display: none; animation: fadeSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.tab-content.active { display: block; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Apple Design: Dynamic Island Nav */
.nav-btn { 
    background-color: transparent; 
    color: var(--text-soft); 
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-btn.active { 
    background: rgba(255,255,255,0.12); 
    color: var(--text); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.nav-btn:hover:not(.active) {
    color: var(--text);
    background: rgba(255,255,255,0.06);
}

/* Apple Design: Spring Buttons */
button, .nav-btn, .glass-panel {
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, opacity 200ms ease, border-color 200ms ease;
}
button:active:not(:disabled) {
    transform: scale(0.97);
}

/* Modal Backdrop */
.glass-panel {
    background: var(--surface-translucent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
}

@keyframes slideIn {
    from { transform: translateY(100%) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.toast { animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); }

.progress-fill { transform-origin: left; }

/* ==========================================================================
   IMPECCABLE ADAPT: ADAPTAÇÕES ERGONÔMICAS & RESPONSIVAS
   ========================================================================== */

/* Barra de Ações de Cards (Catálogo): Suporte a Toque vs Mouse */
.card-action-bar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .card-action-bar {
    opacity: 1;
    pointer-events: auto;
}

/* Dispositivos de toque / Ponteiro Coarse */
@media (pointer: coarse) {
    button, .nav-btn, [role="button"], a {
        touch-action: manipulation;
    }
    .card-action-bar {
        opacity: 0.95 !important;
        pointer-events: auto !important;
    }
    .card-action-bar button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* Prevenção de Auto-Zoom do iOS Safari ao focar inputs/selects */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Ilha de Navegação: Mobile Dock Ancorado vs Ilha Flutuante Desktop */
@media (max-width: 640px) {
    .nav-floating-island {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 8px 8px calc(8px + var(--safe-bottom)) 8px !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        justify-content: space-around !important;
        gap: 2px !important;
        background: rgba(17, 24, 39, 0.94) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.5) !important;
    }
    .nav-floating-island .nav-btn {
        padding: 10px 8px !important;
        min-height: 44px !important;
        min-width: 44px !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }
    .main-content-padded {
        padding-bottom: calc(6.5rem + var(--safe-bottom)) !important;
    }
    #linkModal > div,
    #visualEditorModal > div,
    #reportModal > div,
    #custom-login-modal > div,
    #hfAddAccountModal > div {
        max-height: 92dvh !important;
        width: 100% !important;
        border-radius: 20px !important;
    }
    #visualEditorPlayer {
        max-height: 180px !important;
    }
}

/* Adaptação para Economia de Dados (Data Saver) */
@media (prefers-reduced-data: reduce) {
    body {
        background-image: none !important;
    }
    .glass-panel, .nav-floating-island {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--surface) !important;
    }
}

/* Adaptação para Impressão (Print Optimization) */
@media print {
    nav, .nav-floating-island, #drag-drop-overlay, .card-action-bar, button, #btnSmartSearch {
        display: none !important;
    }
    body {
        background: #FFFFFF !important;
        color: #000000 !important;
        background-image: none !important;
        padding: 0 !important;
    }
    .glass-panel, .bg-zinc-900, .bg-zinc-950 {
        background: transparent !important;
        border-color: #E2E8F0 !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
    h1, h2, h3, p, span {
        color: #000000 !important;
    }
}

/* ==========================================================================
   IMPECCABLE OPTIMIZE: RENDERING & GPU ACCELERATION
   ========================================================================== */

/* Virtualização de renderização CSS para grades e listas longas */
#gridContainer > div {
    content-visibility: auto;
    contain-intrinsic-size: auto 280px;
}

#req-results-container > div {
    content-visibility: auto;
    contain-intrinsic-size: auto 76px;
}

/* Isolamento de layout e pintura para painéis e navegação */
.glass-panel, .nav-floating-island {
    contain: layout style;
}

/* Otimização de renderização de texto e fontes */
body {
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   ACESSIBILIDADE & HARDENING (WCAG 2.1 AAA)
   ========================================================================== */

/* Prevenção de quebra de layout por strings longas / URLs */
.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Respeito à preferência do sistema por redução de movimento */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .tab-content {
        animation: none !important;
    }
    .toast {
        animation: none !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
    button, .nav-btn, .glass-panel {
        transition: background-color 150ms ease, opacity 150ms ease, border-color 150ms ease !important;
        transform: none !important;
    }
    .input-unified {
        transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
    }
    [class*="animate-"], .animate-spin {
        animation: none !important;
    }
}