/* ========================================================
   ZYPLIA THEME SYSTEM - MODO CLARO (DIA ☀️)
   Design System Ultra Moderno: Apple / Linear / Notion / Stripe
   Garante contraste perfeito, superfícies ricas, hierarquia clara e harmonia visual.
   ======================================================== */

/* 1. Raiz e Plano de Fundo Global */
html.theme-light,
html.theme-light body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Grids pontilhados de estúdio e painéis */
html.theme-light .studio-grid,
html.theme-light .admin-grid,
html.theme-light .vsl-grid,
html.theme-light [class*="radial-gradient"] {
    background-color: #f8fafc !important;
    background-image: radial-gradient(rgba(100, 116, 139, 0.2) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
}

/* 2. Cabeçalho Global (Header) */
html.theme-light header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light header h1,
html.theme-light header h2,
html.theme-light header a.font-black,
html.theme-light header span.font-extrabold {
    color: #0f172a !important;
}

/* Badge PRO / AI PRO no Header */
html.theme-light header h1 span,
html.theme-light header h2 span,
html.theme-light header a.font-black span,
html.theme-light header .font-extrabold span {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 800 !important;
}

html.theme-light header p,
html.theme-light header .text-slate-400 {
    color: #64748b !important;
}

/* Container de Navegação em Pílula (Abas) */
html.theme-light header nav,
html.theme-light header .bg-\[\#101524\],
html.theme-light header .bg-\[\#121826\],
html.theme-light header [class*="bg-[#121826]"],
html.theme-light header [class*="bg-[#101524]"] {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

/* Links Inativos do Header - Sempre transparentes com texto suave cinza */
html.theme-light header nav a:not([class*="from-blue-600"]):not(.active-tab),
html.theme-light header [class*="bg-[#121826]"] a:not([class*="from-blue-600"]):not(.active-tab),
html.theme-light header [class*="bg-[#101524]"] a:not([class*="from-blue-600"]):not(.active-tab),
html.theme-light header a.text-slate-400 {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

html.theme-light header nav a:not([class*="from-blue-600"]):not(.active-tab) span,
html.theme-light header [class*="bg-[#121826]"] a:not([class*="from-blue-600"]):not(.active-tab) span,
html.theme-light header [class*="bg-[#101524]"] a:not([class*="from-blue-600"]):not(.active-tab) span,
html.theme-light header a.text-slate-400 span {
    color: #475569 !important;
}

html.theme-light header nav a:not([class*="from-blue-600"]):not(.active-tab):hover,
html.theme-light header [class*="bg-[#121826]"] a:not([class*="from-blue-600"]):not(.active-tab):hover,
html.theme-light header [class*="bg-[#101524]"] a:not([class*="from-blue-600"]):not(.active-tab):hover,
html.theme-light header a.text-slate-400:hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}

html.theme-light header nav a:not([class*="from-blue-600"]):not(.active-tab):hover span,
html.theme-light header [class*="bg-[#121826]"] a:not([class*="from-blue-600"]):not(.active-tab):hover span,
html.theme-light header [class*="bg-[#101524]"] a:not([class*="from-blue-600"]):not(.active-tab):hover span,
html.theme-light header a.text-slate-400:hover span {
    color: #0f172a !important;
}

/* ABA ATIVA NO HEADER - Destaque Azul Royal com texto 100% Branco Nítido */
html.theme-light header nav a[class*="from-blue-600"],
html.theme-light header [class*="bg-[#121826]"] a[class*="from-blue-600"],
html.theme-light header [class*="bg-[#101524]"] a[class*="from-blue-600"],
html.theme-light header a.active-tab {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    font-weight: 800 !important;
}

html.theme-light header nav a[class*="from-blue-600"] span,
html.theme-light header [class*="bg-[#121826]"] a[class*="from-blue-600"] span,
html.theme-light header [class*="bg-[#101524]"] a[class*="from-blue-600"] span,
html.theme-light header a.active-tab span {
    color: #ffffff !important;
}

/* Botão Saldo de Créditos no Header */
html.theme-light header #header-credits-btn {
    background: #fef3c7 !important;
    border: 1px solid #fcd34d !important;
    color: #92400e !important;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15) !important;
    font-weight: 800 !important;
}

html.theme-light header #header-credits-btn span {
    color: #92400e !important;
}

/* Botão de Perfil do Usuário no Header */
html.theme-light header #user-profile-menu-container button,
html.theme-light header #header-auth-slot button {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    font-weight: 700 !important;
}

html.theme-light header #user-profile-menu-container button span,
html.theme-light header #header-auth-slot button span {
    color: #0f172a !important;
}

/* Dropdown do Perfil */
html.theme-light header #user-profile-dropdown {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12) !important;
}

html.theme-light header #user-profile-dropdown p.text-white,
html.theme-light header #user-profile-dropdown .text-white {
    color: #0f172a !important;
}

html.theme-light header #user-profile-dropdown .text-gray-400 {
    color: #64748b !important;
}

html.theme-light header #user-profile-dropdown button.profile-menu-item,
html.theme-light header #user-profile-dropdown a.profile-menu-item {
    color: #334155 !important;
}

html.theme-light header #user-profile-dropdown button.profile-menu-item:hover,
html.theme-light header #user-profile-dropdown a.profile-menu-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.theme-light header #user-profile-dropdown .bg-white\/\[0\.04\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Botão Alternar Tema Dia / Noite */
html.theme-light header #theme-toggle-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    font-weight: 700 !important;
}

html.theme-light header #theme-toggle-btn span {
    color: #0f172a !important;
}

/* Seletor de Idioma */
html.theme-light header select#lang-select {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.theme-light header #prod-counter {
    color: #0f172a !important;
}

/* 3. Tipografia e Títulos Globais */
html.theme-light h1:not(.slide *),
html.theme-light h2:not(.slide *),
html.theme-light h3:not(.slide *),
html.theme-light h4:not(.slide *),
html.theme-light h5:not(.slide *),
html.theme-light h6:not(.slide *) {
    color: #0f172a !important;
}

/* Converte classes text-white e text-slate claras para escuro (exceto botões com cor sólida e slides de preview) */
html.theme-light main .text-white:not(button[class*="bg-blue"] *):not(button[class*="bg-gradient"] *):not(button[class*="bg-emerald"] *):not(button[class*="bg-red"] *):not(a[class*="bg-blue"] *):not(a[class*="bg-gradient"] *):not(a[class*="bg-emerald"] *):not(a[class*="bg-purple"] *):not(.slide *):not(#download-btn *):not(#btn-submit *):not(.btn-keep-white *):not(#tweet-card *):not(.reel-container *),
html.theme-light main .text-slate-100:not(.slide *):not(#tweet-card *):not(.reel-container *),
html.theme-light main .text-slate-200:not(.slide *):not(#tweet-card *):not(.reel-container *),
html.theme-light main .text-slate-300:not(.slide *):not(#tweet-card *):not(.reel-container *),
html.theme-light aside .text-white:not(button[class*="bg-blue"] *):not(button[class*="bg-gradient"] *):not(button[class*="bg-emerald"] *):not(button[class*="bg-red"] *):not(.slide *):not(#download-btn *):not(.btn-keep-white *):not(#tweet-card *):not(.reel-container *):not(.tpl-btn.border-blue-500 *):not(.fmt-btn.border-blue-500 *),
html.theme-light aside .text-slate-100:not(.slide *),
html.theme-light aside .text-slate-200:not(.slide *),
html.theme-light aside .text-slate-300:not(.slide *),
html.theme-light header .text-white:not(a[class*="from-blue-600"] *):not(a[class*="bg-gradient"] *):not(button[class*="bg-gradient"] *):not(.active-tab *),
html.theme-light header .text-slate-100,
html.theme-light header .text-slate-200,
html.theme-light header .text-slate-300 {
    color: #0f172a !important;
}

/* Textos secundários / subtítulos */
html.theme-light main .text-slate-400:not(.slide *):not(#tweet-card *):not(.reel-container *),
html.theme-light main .text-slate-500:not(.slide *):not(#tweet-card *):not(.reel-container *),
html.theme-light main .text-gray-400:not(.slide *):not(#tweet-card *):not(.reel-container *),
html.theme-light main .text-gray-500:not(.slide *):not(#tweet-card *):not(.reel-container *),
html.theme-light aside .text-slate-400:not(.slide *):not(.tpl-btn.border-blue-500 *):not(.fmt-btn.border-blue-500 *),
html.theme-light aside .text-slate-500:not(.slide *):not(.tpl-btn.border-blue-500 *):not(.fmt-btn.border-blue-500 *),
html.theme-light aside .text-gray-400:not(.slide *),
html.theme-light aside .text-gray-500:not(.slide *) {
    color: #475569 !important;
}

/* Mantém gradientes vibrantes no título */
html.theme-light .text-transparent {
    color: transparent !important;
}

/* 4. Barra Lateral (Sidebar) & Controles */
html.theme-light aside {
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.03) !important;
    color: #0f172a !important;
}

/* Seções principais na Sidebar */
html.theme-light aside section,
html.theme-light aside [class*="bg-[#101728]"],
html.theme-light aside [class*="bg-[#0d1322]"],
html.theme-light aside [class*="bg-[#101625]"],
html.theme-light aside [class*="bg-[#0a0e17]"],
html.theme-light aside [class*="bg-[#111827]"]:not(.slide) {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

/* Sub-containers internos, linhas de inputs e cards de configuração */
html.theme-light aside [class*="bg-[#0b0f19]"],
html.theme-light aside [class*="bg-[#161c28]"],
html.theme-light aside [class*="bg-[#0e1320]"],
html.theme-light aside [class*="bg-[#151c2e]"],
html.theme-light aside [class*="bg-[#1e293b]"],
html.theme-light aside [class*="bg-[#0c111c]"],
html.theme-light aside [class*="bg-[#090d16]"],
html.theme-light aside .bg-gray-800,
html.theme-light aside .bg-gray-900,
html.theme-light aside .bg-gray-800\/90,
html.theme-light aside .bg-gray-900\/90 {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

/* 5. BOTÕES DE TEMPLATE (.tpl-btn) & FORMATO (.fmt-btn) - MODO CLARO */
html.theme-light .tpl-btn,
html.theme-light .fmt-btn {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light .tpl-btn:hover,
html.theme-light .fmt-btn:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .tpl-btn span,
html.theme-light .fmt-btn span {
    color: #0f172a !important;
}

html.theme-light .tpl-btn span[class*="text-slate-400"],
html.theme-light .tpl-btn span[class*="text-slate-500"],
html.theme-light .fmt-btn span[class*="text-slate-400"],
html.theme-light .fmt-btn span[class*="text-slate-500"] {
    color: #64748b !important;
}

/* Template e Formato Selecionados (Destaque Azul Suave com Borda 2px) */
html.theme-light .tpl-btn.border-blue-500,
html.theme-light .tpl-btn[class*="bg-blue-500"],
html.theme-light .fmt-btn.border-blue-500,
html.theme-light .fmt-btn[class*="bg-blue-500"] {
    background-color: #eff6ff !important;
    border: 2px solid #2563eb !important;
    box-shadow: 0 0 0 1px #2563eb, 0 4px 14px rgba(37, 99, 235, 0.15) !important;
}

html.theme-light .tpl-btn.border-blue-500 span,
html.theme-light .tpl-btn[class*="bg-blue-500"] span {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

html.theme-light .tpl-btn.border-blue-500 span[class*="text-slate-400"],
html.theme-light .tpl-btn[class*="bg-blue-500"] span[class*="text-slate-400"] {
    color: #3b82f6 !important;
    font-weight: 500 !important;
}

html.theme-light .fmt-btn.border-blue-500 span:first-of-type,
html.theme-light .fmt-btn[class*="bg-blue-500"] span:first-of-type {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

html.theme-light .fmt-btn.border-blue-500 span:last-of-type,
html.theme-light .fmt-btn[class*="bg-blue-500"] span:last-of-type {
    color: #3b82f6 !important;
    font-weight: 500 !important;
}

/* Mini visualizador nos botões de template */
html.theme-light .tpl-btn > div:first-child {
    border: 1px solid #cbd5e1 !important;
}

/* 6. Inputs, Textareas, Selects e Sliders */
html.theme-light input[type="text"]:not(#tweet-card *):not(.reel-container *):not(.slide *),
html.theme-light input[type="url"]:not(#tweet-card *):not(.reel-container *):not(.slide *),
html.theme-light input[type="number"]:not(#tweet-card *):not(.reel-container *):not(.slide *),
html.theme-light textarea:not(#tweet-card *):not(.reel-container *):not(.slide *),
html.theme-light select:not(#tweet-card *):not(.reel-container *):not(.slide *),
html.theme-light .glass-input,
html.theme-light aside input[type="text"],
html.theme-light aside input[type="url"],
html.theme-light aside input[type="number"],
html.theme-light aside textarea,
html.theme-light aside select,
html.theme-light [class*="bg-[#1F2937]"]:not(.slide):not(#slides-editor-container > div),
html.theme-light [class*="bg-[#111827]"]:not(.slide) {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder,
html.theme-light .glass-input::placeholder {
    color: #94a3b8 !important;
}

html.theme-light input:focus,
html.theme-light textarea:focus,
html.theme-light select:focus,
html.theme-light .glass-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
    outline: none !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Range Slider */
html.theme-light input[type=range] {
    background: #e2e8f0 !important;
}

html.theme-light input[type=range]:hover {
    background: #cbd5e1 !important;
}

html.theme-light input[type=range]::-webkit-slider-thumb {
    background: #2563eb !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}

/* 6. Cards Universais & Superfícies (Glass Card / Glass Panel) */
html.theme-light .glass-card,
html.theme-light .glass-panel,
html.theme-light [class*="bg-[#0d121f]"],
html.theme-light [class*="bg-[#0b0f1a]"],
html.theme-light [class*="bg-[#121929]"],
html.theme-light [class*="bg-[#1F2937]"]:not(.slide),
html.theme-light [class*="bg-[#111827]"]:not(.slide) {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
}

html.theme-light .glass-card:hover,
html.theme-light .glass-panel:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08) !important;
}

/* 7. DASHBOARD (dashboard.html) - Estilização Premium Completa */

/* Hero Banner */
html.theme-light main > section:first-of-type,
html.theme-light main [class*="bg-[#0d121f]"] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05) !important;
}

/* Badge Plano Starter Free */
html.theme-light [data-i18n="heroGreeting"],
html.theme-light h2.text-2xl.font-black,
html.theme-light h2.font-black {
    color: #0f172a !important;
}

html.theme-light main section:first-of-type span.bg-white\/\[0\.04\],
html.theme-light main section:first-of-type span.bg-white\/\[0\.05\],
html.theme-light main section:first-of-type span[class*="text-amber-300"],
html.theme-light main section:first-of-type span[class*="text-amber-400"] {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-weight: 700 !important;
}

/* Cards de Quick Stats no Hero */
html.theme-light main [class*="bg-[#0d121f]"] .rounded-2xl {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light main [class*="bg-[#0d121f]"] .rounded-2xl span {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.theme-light main [class*="bg-[#0d121f]"] .rounded-2xl .text-slate-400 {
    color: #64748b !important;
    font-weight: 600 !important;
}

/* Studio Copilot IA (Card do Chat) */
html.theme-light main [class*="bg-[#0b0f1a]"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05) !important;
}

/* Chips de ideias rápidas */
html.theme-light [class*="bg-[#0b0f1a]"] button {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    font-weight: 600 !important;
}

html.theme-light [class*="bg-[#0b0f1a]"] button:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Área de mensagens do Copilot */
html.theme-light #ai-chat-messages {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px;
    padding: 16px;
}

html.theme-light .chat-bubble-ai {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light .chat-bubble-ai p,
html.theme-light .chat-bubble-ai strong,
html.theme-light #initial-ai-greeting,
html.theme-light #initial-ai-desc {
    color: #0f172a !important;
}

html.theme-light .chat-bubble-user {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* Input do Chat Copilot */
html.theme-light #ai-chat-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.theme-light #ai-send-btn {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
}

/* Cards do Hub de Criação (Reels, Carrossel, Downloader) - ALTO IMPACTO & CONTRASTE */
html.theme-light [onclick*="location.href='/reels.html'"],
html.theme-light [onclick*="location.href='/carrossel.html'"],
html.theme-light [onclick*="location.href='/downloader.html'"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.06) !important;
}

html.theme-light [onclick*="location.href='/reels.html'"]:hover,
html.theme-light [onclick*="location.href='/carrossel.html'"]:hover,
html.theme-light [onclick*="location.href='/downloader.html'"]:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.12) !important;
    transform: translateY(-2px) !important;
}

/* Ícone & Badge: REELS (Azul / Royal) */
html.theme-light [onclick*="location.href='/reels.html'"] .w-12.h-12 {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    border: 1px solid #bfdbfe !important;
}
html.theme-light [onclick*="location.href='/reels.html'"] span[class*="tracking-wider"] {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 800 !important;
}
html.theme-light [onclick*="location.href='/reels.html'"] a {
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
    font-weight: 800 !important;
}
html.theme-light [onclick*="location.href='/reels.html'"] a span {
    color: #ffffff !important;
}

/* Ícone & Badge: CARROSSEL (Roxo / Púrpura) */
html.theme-light [onclick*="location.href='/carrossel.html'"] .w-12.h-12 {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff) !important;
    border: 1px solid #e9d5ff !important;
}
html.theme-light [onclick*="location.href='/carrossel.html'"] span[class*="tracking-wider"] {
    background: #faf5ff !important;
    color: #7e22ce !important;
    border: 1px solid #e9d5ff !important;
    font-weight: 800 !important;
}
html.theme-light [onclick*="location.href='/carrossel.html'"] a {
    background: #7c3aed !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25) !important;
    font-weight: 800 !important;
}
html.theme-light [onclick*="location.href='/carrossel.html'"] a span {
    color: #ffffff !important;
}

/* Ícone & Badge: DOWNLOADER (Esmeralda / Verde) */
html.theme-light [onclick*="location.href='/downloader.html'"] .w-12.h-12 {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    border: 1px solid #a7f3d0 !important;
}
html.theme-light [onclick*="location.href='/downloader.html'"] span[class*="tracking-wider"] {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 800 !important;
}
html.theme-light [onclick*="location.href='/downloader.html'"] a {
    background: #059669 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
    font-weight: 800 !important;
}
html.theme-light [onclick*="location.href='/downloader.html'"] a span {
    color: #ffffff !important;
}

/* Tags pequenas dos cards do Hub */
html.theme-light .glass-card span.bg-white\/\[0\.05\] {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-weight: 600 !important;
}

/* Cards das Redes Sociais no Dashboard */
html.theme-light [id^="dash-social-card-"],
html.theme-light [class*="bg-[#121929]"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

html.theme-light [id^="dash-social-card-"] p.text-white,
html.theme-light [class*="bg-[#121929]"] p.text-white {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.theme-light [id^="dash-social-card-"] p.text-slate-400,
html.theme-light [class*="bg-[#121929]"] p.text-slate-400 {
    color: #64748b !important;
}

html.theme-light [id^="dash-social-badge-"] {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    font-weight: 700 !important;
}

html.theme-light [id^="dash-social-btn-"] {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 700 !important;
}

html.theme-light [id^="dash-social-btn-"]:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

/* Melhores Horários (Cards de Horário) */
html.theme-light main .glass-card [class*="bg-white/[0.03]"] {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
html.theme-light main .glass-card [class*="bg-white/[0.03]"] span {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* 8. DOWNLOADER (downloader.html) - Estilização Limpa & Contraste */

/* Hero Title & Description */
html.theme-light main h2[data-i18n="heroTitle"],
html.theme-light main h2[data-i18n="heroTitle"] span:not(.text-transparent) {
    color: #0f172a !important;
}

html.theme-light main p[data-i18n="heroDesc"] {
    color: #475569 !important;
}

/* Search Glass Panel */
html.theme-light main .glass-panel {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.08) !important;
}

/* Input de URL do Downloader */
html.theme-light main #video-url-input {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.theme-light main #video-url-input::placeholder {
    color: #94a3b8 !important;
}

/* Botão Principal de Download */
html.theme-light main #download-btn {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
    font-weight: 800 !important;
}

html.theme-light main #download-btn span {
    color: #ffffff !important;
}

/* Plataformas Suportadas (Pills) */
html.theme-light main .glass-panel .bg-white\/\[0\.04\],
html.theme-light main .glass-panel .bg-white\/\[0\.05\],
html.theme-light main .glass-panel .border-white\/\[0\.08\] {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-weight: 700 !important;
}

/* Grid de Benefícios / Features */
html.theme-light main .grid.grid-cols-1.md\:grid-cols-3 .glass-panel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light main .grid.grid-cols-1.md\:grid-cols-3 .glass-panel h4 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.theme-light main .grid.grid-cols-1.md\:grid-cols-3 .glass-panel p {
    color: #475569 !important;
}

/* 9. CARROSSEL & REELS (carrossel.html e reels.html) */

/* Controles de Estilo */
html.theme-light aside .bg-gray-800,
html.theme-light aside .bg-gray-800\/90,
html.theme-light aside [class*="bg-[#1e293b]"],
html.theme-light aside [class*="bg-[#161f33]"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* Segmented Buttons & Grupos */
html.theme-light .bg-black\/40,
html.theme-light [class*="bg-black/"] {
    background-color: #eef2f6 !important;
    border-color: #cbd5e1 !important;
}

html.theme-light .align-btn.text-gray-400,
html.theme-light .pos-btn.text-gray-400,
html.theme-light .imgpos-btn.text-gray-400 {
    color: #475569 !important;
}

html.theme-light .align-btn.text-gray-400:hover,
html.theme-light .pos-btn.text-gray-400:hover,
html.theme-light .imgpos-btn.text-gray-400:hover {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

/* Cards do Editor de Slides no Carrossel */
html.theme-light #slides-editor-container > div {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light #slides-editor-container h3 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.theme-light #slides-editor-container textarea {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* Caixa de IA Pro dentro do slide */
html.theme-light #slides-editor-container [class*="bg-black/30"] {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}

html.theme-light #slides-editor-container button.bg-white\/5 {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

/* Botão Adicionar Novo Slide */
html.theme-light button#add-slide-btn,
html.theme-light button[onclick="addSlide()"],
html.theme-light aside button.border-dashed {
    background-color: #eff6ff !important;
    border: 2px dashed #3b82f6 !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

html.theme-light button#add-slide-btn:hover,
html.theme-light button[onclick="addSlide()"]:hover,
html.theme-light aside button.border-dashed:hover {
    background-color: #dbeafe !important;
    border-color: #2563eb !important;
}

/* Phone Bezel no Editor de Vídeos */
html.theme-light .phone-bezel {
    box-shadow: 0 30px 90px -20px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.1), inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important;
}

/* Sombra dos Slides no Canvas de Preview */
html.theme-light .slide {
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}

/* Fila de Reels Dinâmica (reels.html) */
html.theme-light #reels-container > div {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light #reels-container > div.border-blue-500\/80,
html.theme-light #reels-container > div[class*="border-blue-500"] {
    background-color: #ffffff !important;
    border: 2px solid #2563eb !important;
    box-shadow: 0 4px 16px -2px rgba(37, 99, 235, 0.15) !important;
}

html.theme-light #reels-container h3,
html.theme-light #reels-container span.font-black {
    color: #0f172a !important;
}

html.theme-light #reels-container p {
    color: #64748b !important;
}

html.theme-light #reels-container [class*="bg-[#0b0f19]"],
html.theme-light #reels-container [class*="bg-[#161c28]"] {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

/* Botão Adicionar Novo Reel na Fila */
html.theme-light button[onclick="addReel()"] {
    background-color: #eff6ff !important;
    border: 2px dashed #93c5fd !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

html.theme-light button[onclick="addReel()"]:hover {
    background-color: #dbeafe !important;
    border-color: #2563eb !important;
}

/* Presets Salvos do Usuário (reels.html) */
html.theme-light aside button[onclick*="applyTemplate"] {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    font-weight: 700 !important;
}

html.theme-light aside button[onclick*="applyTemplate"]:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.theme-light aside button[onclick*="saveTemplate"] {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

html.theme-light aside button[onclick*="saveTemplate"]:hover {
    background: #dbeafe !important;
}

html.theme-light aside button[onclick*="deleteTemplate"] {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
}

/* Controles de Zoom Flutuantes no Canvas (reels.html) */
html.theme-light .absolute.bottom-6.right-6 {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(12px) !important;
}

html.theme-light .absolute.bottom-6.right-6 button {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.theme-light .absolute.bottom-6.right-6 button:hover {
    background-color: #e2e8f0 !important;
    color: #000000 !important;
}

html.theme-light .absolute.bottom-6.right-6 button:last-child {
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
}

html.theme-light .absolute.bottom-6.right-6 button:last-child:hover {
    background-color: #dbeafe !important;
    color: #1e40af !important;
}

/* Controles de Zoom no Canvas (carrossel.html) */
html.theme-light .fixed.bottom-6.right-6 button {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .fixed.bottom-6.right-6 button:hover {
    background-color: #f1f5f9 !important;
    color: #000000 !important;
    border-color: #94a3b8 !important;
}

/* Modal Biblioteca B-Roll (reels.html) */
html.theme-light #broll-modal > div,
html.theme-light #broll-modal [class*="bg-[#0e1422]"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
}

html.theme-light #broll-modal h3,
html.theme-light #broll-modal span {
    color: #0f172a !important;
}

html.theme-light #broll-modal p {
    color: #475569 !important;
}

html.theme-light #broll-modal button.rounded-full {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

html.theme-light #broll-modal input[type="url"] {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* 10. PAINEL DE ADMINISTRAÇÃO (admin.html) */
html.theme-light thead {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
}

html.theme-light thead th {
    color: #475569 !important;
}

html.theme-light tbody tr:hover {
    background-color: #f8fafc !important;
}

html.theme-light tbody td {
    border-color: #f1f5f9 !important;
    color: #334155 !important;
}

html.theme-light #modal-sql pre {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

/* 11. MODAIS (Créditos, Conexão, Auth) */
html.theme-light #modal-credits-root .bg-\[\#090d18\],
html.theme-light [id^="modal-"] .glass-card,
html.theme-light [id*="modal"] .rounded-3xl.bg-\[\#090d18\],
html.theme-light [id*="modal"] .rounded-3xl.bg-\[\#0e1424\] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
}

html.theme-light #modal-credits-root .text-white,
html.theme-light [id*="modal"] .text-white {
    color: #0f172a !important;
}

html.theme-light #modal-credits-root .bg-\[\#111827\] {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

/* 12. Barra de Rolagem & Toggle */
html.theme-light ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
}

html.theme-light ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

html.theme-light .slider-toggle {
    background-color: #cbd5e1 !important;
}

html.theme-light .modern-toggle input:checked + .slider-toggle {
    background-color: #2563eb !important;
}

#theme-toggle-btn {
    user-select: none;
    -webkit-user-select: none;
}

/* ALAVANCA / TOGGLE SWITCH PARA MODO DIA / NOITE */
.zyplia-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  vertical-align: middle;
}
.zyplia-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.zyplia-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #334155;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.zyplia-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.zyplia-toggle-switch input:checked + .zyplia-toggle-slider {
  background-color: #2563eb;
  border-color: #3b82f6;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}
.zyplia-toggle-switch input:checked + .zyplia-toggle-slider:before {
  transform: translateX(20px);
}
html.theme-light .zyplia-toggle-slider {
  background-color: #cbd5e1;
  border-color: #94a3b8;
}
html.theme-light .zyplia-toggle-switch input:checked + .zyplia-toggle-slider {
  background-color: #2563eb;
  border-color: #1d4ed8;
}

/* 13. LANDING PAGE & VSL (index.html) */
html.theme-light .vsl-frame {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.12), 0 0 40px -10px rgba(59, 130, 246, 0.15) !important;
}

html.theme-light details.glass-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

html.theme-light details.glass-card summary {
    color: #0f172a !important;
}

html.theme-light details.glass-card p {
    color: #475569 !important;
}

/* 14. REMAP DE CORES SEMÂNTICAS (Alto Contraste Global no Modo Dia) */
html.theme-light .text-blue-400,
html.theme-light .text-blue-300 {
    color: #1d4ed8 !important;
}

html.theme-light .text-purple-400,
html.theme-light .text-purple-300 {
    color: #7e22ce !important;
}

html.theme-light .text-emerald-400,
html.theme-light .text-emerald-300 {
    color: #047857 !important;
}

html.theme-light .text-amber-400,
html.theme-light .text-amber-300 {
    color: #b45309 !important;
}

html.theme-light .text-red-400,
html.theme-light .text-red-300 {
    color: #dc2626 !important;
}

html.theme-light .text-cyan-400,
html.theme-light .text-cyan-300 {
    color: #0e7490 !important;
}

/* Backgrounds com opacidade remapeados para superfícies suaves e nítidas */
html.theme-light .bg-blue-500\/10,
html.theme-light .bg-blue-500\/15,
html.theme-light .bg-blue-500\/20 {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
}

html.theme-light .bg-purple-500\/10,
html.theme-light .bg-purple-500\/15,
html.theme-light .bg-purple-500\/20 {
    background-color: #faf5ff !important;
    border-color: #e9d5ff !important;
}

html.theme-light .bg-emerald-500\/10,
html.theme-light .bg-emerald-500\/15,
html.theme-light .bg-emerald-500\/20 {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

html.theme-light .bg-amber-500\/10,
html.theme-light .bg-amber-500\/15,
html.theme-light .bg-amber-500\/20 {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
}

html.theme-light .bg-red-500\/10,
html.theme-light .bg-red-500\/15,
html.theme-light .bg-red-500\/20 {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
}

/* ========================================================
   MODERN MOBILE NAVIGATION & STUDIO SWITCHER (LIGHT MODE)
   ======================================================== */
html.theme-light nav.fixed.bottom-0 {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06) !important;
}

html.theme-light nav.fixed.bottom-0 a span.text-slate-400,
html.theme-light nav.fixed.bottom-0 a.text-slate-400 {
    color: #64748b !important;
}

html.theme-light nav.fixed.bottom-0 a:hover {
    color: #0f172a !important;
}

html.theme-light #mobile-menu-drawer {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html.theme-light #mobile-menu-drawer a {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

html.theme-light #mobile-menu-drawer a:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}

html.theme-light .md\:hidden.flex.items-center.justify-between.bg-\[\#090d16\] {
    background-color: #ffffff !important;
    border-bottom-color: #e2e8f0 !important;
}

html.theme-light #mob-fab-preview,
html.theme-light #mob-fab-car-preview {
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4) !important;
}