* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        body.light-mode {
            background: radial-gradient(circle at top right, #f8fafc, #ffffff 70%);
            color: #0f172a;
        }
        
        body.dark-mode {
            background: radial-gradient(circle at top right, #1a2a3a, #0a0f14 70%);
            color: #f1f5f9;
        }
        
        .custom-select-container select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
        }
        
        .modal.active {
            display: flex !important;
            align-items: center;
            justify-content: center;
        }
        
        /* Dark mode classes - CORRIGIDO */
        .dark-mode .bg-white,
        .dark-mode header > div,
        .dark-mode footer > div > span,
        .dark-mode #settingsModal > div {
            background-color: #1c262f !important;
        }
        
        .dark-mode .bg-white\/80 {
            background-color: rgba(0,0,0,0.4) !important;
        }
        
        .dark-mode .bg-white\/60 {
            background-color: rgba(255,255,255,0.05) !important;
        }
        
        .dark-mode .bg-white\/40 {
            background-color: rgba(255,255,255,0.05) !important;
        }
        
        .dark-mode h1,
        .dark-mode .text-slate-900 {
            color: #ffffff !important;
        }
        
        .dark-mode .text-slate-700,
        .dark-mode select {
            color: #cbd5e1 !important;
        }
        
        .dark-mode .text-slate-500,
        .dark-mode p {
            color: #94a3b8 !important;
        }
        
        .dark-mode .text-slate-400,
        .dark-mode span.text-slate-400 {
            color: #64748b !important;
        }
        
        .dark-mode .text-slate-600 {
            color: #94a3b8 !important;
        }
        
        .dark-mode .border-slate-200,
        .dark-mode .border-slate-200\/50 {
            border-color: rgba(255,255,255,0.1) !important;
        }
        
        .dark-mode .bg-slate-100,
        .dark-mode button.bg-slate-100 {
            background-color: #1c262f !important;
        }
        
        .dark-mode .bg-slate-50 {
            background-color: rgba(255,255,255,0.05) !important;
        }
        
        .dark-mode .border-slate-300 {
            border-color: rgba(255,255,255,0.1) !important;
        }
        
        .dark-mode .hover\:bg-slate-100:hover {
            background-color: rgba(255,255,255,0.1) !important;
        }
        
        .dark-mode .hover\:bg-slate-200:hover {
            background-color: #25323d !important;
        }
        
        .dark-mode .hover\:bg-slate-100:hover {
            background-color: rgba(255,255,255,0.1) !important;
        }
        
        .dark-mode .shadow-xl {
            box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
        }
        
        .dark-mode input {
            color: #f1f5f9 !important;
            background-color: #0a0f14 !important;
        }
        
        .dark-mode input::placeholder {
            color: #475569 !important;
        }
        
        .dark-mode .group-hover\:text-slate-900:hover {
            color: #ffffff !important;
        }
        
        .dark-mode label {
            color: #cbd5e1 !important;
        }
        
        .dark-mode #settingsModalContent {
            background-color: #1c262f !important;
            border-color: rgba(255,255,255,0.1) !important;
        }
        
        .dark-mode #addShortcutModalContent {
            background-color: #1c262f !important;
            border-color: rgba(255,255,255,0.1) !important;
        }
        
        .dark-mode #cityInput,
        .dark-mode #shortcutName,
        .dark-mode #shortcutUrl {
            background-color: #0a0f14 !important;
            border-color: rgba(255,255,255,0.1) !important;
            color: #f1f5f9 !important;
        }
        
        .dark-mode .shortcut-item p {
            color: #cbd5e1 !important;
        }
        
        .dark-mode .shortcut-item .text-slate-500 {
            color: #94a3b8 !important;
        }
        
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 8px;
        }
        
        .icon-option {
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }
        
        .icon-option:hover {
            border-color: #006adc;
            background: #f0f9ff;
        }
        
        .icon-option.selected {
            border-color: #006adc;
            background: #006adc;
            color: white;
        }
        
        .dark-mode .icon-option {
            border-color: rgba(255,255,255,0.1);
            background: #0a0f14;
        }
        
        .dark-mode .icon-option:hover {
            border-color: #006adc;
            background: rgba(0,106,220,0.1);
        }
        
        .dark-mode .icon-option.selected {
            background: #006adc;
            color: white;
        }
        
        .shortcut-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            margin-bottom: 8px;
        }
        
        .dark-mode .shortcut-item {
            border-color: rgba(255,255,255,0.1);
            background: #0a0f14;
        }
        
        .delete-shortcut {
            color: #ef4444;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .delete-shortcut:hover {
            background: #fee2e2;
        }
        
        .dark-mode .delete-shortcut:hover {
            background: rgba(239,68,68,0.1);
        }
        /* =============================================
           INPUT DE BUSCA - DARK MODE CONSISTENTE
           ============================================= */
        
        .dark-mode .bg-white {
            background-color: #0f172a !important;          /* slate-900 mais suave */
        }
        
        .dark-mode #searchForm .relative {
            background-color: #1e293b !important;          /* slate-800 - fundo do input */
            border-color: #334155 !important;              /* slate-700 */
        }
        
        .dark-mode #searchForm input {
            color: #f1f5f9 !important;                     /* slate-100 - texto legível */
            background-color: transparent !important;
        }
        
        .dark-mode #searchForm input::placeholder {
            color: #64748b !important;                     /* slate-500 - placeholder visível */
        }
        
        .dark-mode #searchForm .text-slate-400,
        .dark-mode #searchForm .group-focus-within\:text-primary {
            color: #94a3b8 !important;                     /* slate-400 mais suave */
        }
        
        /* Ícone de busca dentro do input */
        .dark-mode #searchForm .material-symbols-outlined {
            color: #94a3b8 !important;
        }
        
        /* Foco / ring no dark mode */
        .dark-mode #searchForm .focus-within\:border-primary {
            border-color: #3b82f6 !important;              /* blue-500 mais vivo */
        }
        
        .dark-mode #searchForm .focus-within\:ring-primary\/10 {
            --tw-ring-color: rgba(59, 130, 246, 0.2) !important;
        }