/**
 * Tema Escuro Completo - Rede SX
 * Aplica tema escuro em TODOS os componentes do sistema
 */

/* ==================== ELEMENTOS BASE ==================== */
:root[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Feed page - Background preto puro */
:root[data-theme="dark"] .feed-page {
    background-color: #000000 !important;
}

:root[data-theme="dark"] * {
    scrollbar-color: var(--cinza-400) var(--cinza-200);
}

/* ==================== TEXTOS E LINKS ==================== */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
    color: var(--text-primary);
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] span,
:root[data-theme="dark"] div,
:root[data-theme="dark"] label {
    color: var(--text-primary);
}

:root[data-theme="dark"] a {
    color: var(--roxo-claro);
}

:root[data-theme="dark"] a:hover {
    color: var(--roxo-principal);
}

/* ==================== HEADER E FOOTER ==================== */
:root[data-theme="dark"] .app-header {
    background-color: var(--bg-primary);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .header-container {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .header-btn {
    color: var(--text-primary);
}

:root[data-theme="dark"] .header-btn:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .app-footer {
    background-color: var(--bg-primary);
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .footer-nav button {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .footer-nav button.active {
    color: var(--roxo-claro);
}

/* ==================== FEED ==================== */
:root[data-theme="dark"] .feed-container,
:root[data-theme="dark"] .app-content {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .story-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .post-header,
:root[data-theme="dark"] .post-content,
:root[data-theme="dark"] .post-footer {
    background-color: transparent;
    color: var(--text-primary);
}

:root[data-theme="dark"] .post-author-name {
    color: var(--text-primary);
}

:root[data-theme="dark"] .post-time {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .post-text {
    color: var(--text-primary);
}

:root[data-theme="dark"] .post-actions button {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .post-actions button:hover {
    color: var(--roxo-claro);
    background-color: var(--bg-tertiary);
}

/* ==================== STORIES ==================== */
:root[data-theme="dark"] .stories-container {
    background-color: var(--bg-primary);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .story-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .story-item.viewed {
    background-color: transparent;
    opacity: 0.5;
}

:root[data-theme="dark"] .story-username {
    color: var(--text-primary);
}

:root[data-theme="dark"] .story-viewer {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .story-viewer-content {
    background-color: var(--bg-primary);
}

/* ==================== FILTROS DO FEED ==================== */
:root[data-theme="dark"] .filters-section {
    background-color: transparent;
}

:root[data-theme="dark"] .filters-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .filters-header {
    background-color: transparent;
    color: var(--text-primary);
}

:root[data-theme="dark"] .filters-title {
    color: var(--text-primary);
}

:root[data-theme="dark"] .filters-title span {
    color: var(--text-primary);
}

:root[data-theme="dark"] .filters-summary {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .filters-summary span {
    color: var(--text-secondary);
}

:root[data-theme="dark"] #filtersChevron {
    stroke: var(--text-secondary);
}

:root[data-theme="dark"] .filters-content {
    background-color: var(--card-bg);
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .filter-select {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .filter-select:hover {
    background-color: var(--bg-elevated);
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .filter-select:focus {
    border-color: var(--roxo-principal);
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .filter-select option {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .filter-toggle {
    background-color: transparent;
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .filter-toggle:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .filter-toggle.active {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
    border-color: var(--roxo-principal);
    color: #FFFFFF;
}

:root[data-theme="dark"] .filter-toggle svg {
    stroke: currentColor;
}

/* Banners Section */
:root[data-theme="dark"] .banners-section {
    background-color: transparent;
}

:root[data-theme="dark"] .banner-skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
}

:root[data-theme="dark"] .stories-section {
    background-color: transparent;
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .stories-header {
    color: var(--text-primary);
}

:root[data-theme="dark"] .stories-title {
    color: var(--text-primary);
}

:root[data-theme="dark"] .stories-subtitle {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .story-name {
    color: var(--text-primary);
}

:root[data-theme="dark"] .add-story {
    background-color: var(--card-bg);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .add-avatar {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
}

:root[data-theme="dark"] .add-icon {
    background-color: #FFFFFF;
}

/* ==================== CREATE POST SECTION ==================== */
:root[data-theme="dark"] .create-post-section {
    background-color: transparent;
}

:root[data-theme="dark"] .create-post-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .create-post-header {
    background-color: transparent;
}

:root[data-theme="dark"] .user-avatar-post {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
}

:root[data-theme="dark"] .avatar-placeholder-post {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
    color: #FFFFFF;
}

:root[data-theme="dark"] .create-post-input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .create-post-input span {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .create-post-input:hover {
    background-color: var(--bg-elevated);
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .create-post-actions {
    background-color: transparent;
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .post-action-btn {
    color: var(--text-primary);
    background-color: transparent;
}

:root[data-theme="dark"] .post-action-btn:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .post-action-btn span {
    color: var(--text-primary);
}

:root[data-theme="dark"] .post-limit-info {
    background-color: var(--bg-tertiary);
    border-top-color: var(--border-light);
    color: var(--text-secondary);
}

/* CREATE POST MODAL - Dark Theme */
:root[data-theme="dark"] .create-post-modal .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.85);
}

:root[data-theme="dark"] .create-post-modal .modal-content {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
}

:root[data-theme="dark"] .create-post-modal .modal-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .create-post-modal .modal-header h3 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .create-post-modal .modal-back {
    color: var(--text-primary);
    background-color: transparent;
}

:root[data-theme="dark"] .create-post-modal .modal-back:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .create-post-modal .modal-back:active {
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .create-post-modal .modal-post-btn {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
}

:root[data-theme="dark"] .create-post-modal .modal-body {
    background-color: var(--card-bg);
}

:root[data-theme="dark"] .create-post-modal .modal-user-name {
    color: var(--text-primary);
}

:root[data-theme="dark"] .create-post-modal #modalPostText {
    background-color: transparent;
    color: var(--text-primary);
}

:root[data-theme="dark"] .create-post-modal #modalPostText::placeholder {
    color: var(--text-tertiary);
}

:root[data-theme="dark"] .create-post-modal .tagged-chip {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
    color: #FFFFFF;
}

:root[data-theme="dark"] .create-post-modal .tagged-location {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-light);
}

:root[data-theme="dark"] .create-post-modal .location-name {
    color: var(--text-primary);
}

:root[data-theme="dark"] .create-post-modal .location-address {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .create-post-modal .location-remove {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

:root[data-theme="dark"] .create-post-modal .location-remove:hover {
    background-color: var(--border-medium);
}

:root[data-theme="dark"] .create-post-modal .modal-footer {
    background-color: var(--card-bg);
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .create-post-modal .modal-cancel-btn {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .create-post-modal .modal-cancel-btn:hover {
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .create-post-modal .modal-action-btn {
    background-color: transparent;
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .create-post-modal .modal-action-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .create-post-modal .modal-action-btn.active {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: var(--amarelo);
    color: #1F2937;
}

/* ==================== NOTIFICAÇÕES ==================== */
:root[data-theme="dark"] .notifications-dropdown {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .notifications-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .notifications-header h3 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .mark-all-read {
    color: var(--roxo-claro);
}

:root[data-theme="dark"] .notification-item {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .notification-item:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .notification-item.unread {
    background-color: var(--bg-secondary);
}

:root[data-theme="dark"] .notification-text {
    color: var(--text-primary);
}

:root[data-theme="dark"] .notification-time {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .notifications-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .notifications-footer a {
    color: var(--roxo-claro);
}

/* NOTIFICAÇÕES PAGE - Complete Styling */
:root[data-theme="dark"] .notificacoes-page {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .notificacoes-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .notificacoes-header h2 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .notificacoes-actions {
    background-color: transparent;
}

:root[data-theme="dark"] .btn-marcar-lidas,
:root[data-theme="dark"] .btn-limpar-notificacoes {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-marcar-lidas:hover,
:root[data-theme="dark"] .btn-limpar-notificacoes:hover {
    background-color: var(--bg-elevated);
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .btn-limpar-notificacoes:hover {
    background-color: var(--vermelho);
    border-color: var(--vermelho);
    color: #FFFFFF;
}

:root[data-theme="dark"] .notificacoes-list {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .notificacoes-empty {
    background-color: var(--card-bg);
    color: var(--text-secondary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .notificacao-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    border-bottom: 1px solid #0A0A0A;
}

:root[data-theme="dark"] .notificacao-item:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .notificacao-item.unread {
    background-color: var(--bg-secondary);
}

:root[data-theme="dark"] .notificacao-avatar {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
    border-radius: 50%;
}

:root[data-theme="dark"] .notificacao-avatar img {
    border-radius: 50%;
}

:root[data-theme="dark"] .notificacao-avatar-link .notificacao-avatar {
    border-radius: 50%;
}

:root[data-theme="dark"] .notificacao-titulo {
    color: var(--text-primary);
}

:root[data-theme="dark"] .notificacao-desc {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .notificacao-time {
    color: var(--text-tertiary);
}

:root[data-theme="dark"] .notificacao-dot {
    background-color: var(--roxo-principal);
}

/* ==================== CHAT / DIRECT ==================== */
:root[data-theme="dark"] .chat-container,
:root[data-theme="dark"] .conversations-container {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .conversation-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .conversation-item:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .conversation-item.active {
    background-color: var(--bg-secondary);
}

:root[data-theme="dark"] .conversation-name {
    color: var(--text-primary);
}

:root[data-theme="dark"] .conversation-last-message {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .conversation-time {
    color: var(--text-tertiary);
}

:root[data-theme="dark"] .chat-messages {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .message-bubble {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .message-bubble.sent {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
    color: white;
}

/* Chat Page - Complete Styling */
:root[data-theme="dark"] .chat-page {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .chat-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .chat-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

:root[data-theme="dark"] .conversas-list {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .conversas-empty {
    background-color: var(--card-bg);
    color: var(--text-secondary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .conversa-item-wrapper {
    background-color: transparent;
}

:root[data-theme="dark"] .conversa-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    border-bottom: 1px solid #0A0A0A;
}

:root[data-theme="dark"] .conversa-item:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .conversa-item.unread {
    background-color: var(--bg-secondary);
    border-left-color: var(--roxo-principal);
}

:root[data-theme="dark"] .conversa-avatar {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
    border-radius: 50%;
}

:root[data-theme="dark"] .conversa-avatar img {
    border-radius: 50%;
}

:root[data-theme="dark"] .avatar-placeholder {
    background: linear-gradient(135deg, #1F1F1F, #2A2A2A);
    color: var(--text-secondary);
    border-radius: 50%;
}

:root[data-theme="dark"] .status-indicator.online {
    background-color: var(--verde);
    border-color: var(--card-bg);
}

:root[data-theme="dark"] .status-indicator.offline {
    background-color: var(--cinza-400);
    border-color: var(--card-bg);
}

:root[data-theme="dark"] .conversa-nome {
    color: var(--text-primary);
}

:root[data-theme="dark"] .conversa-time {
    color: var(--text-tertiary);
}

:root[data-theme="dark"] .conversa-preview {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .sent-indicator {
    color: var(--text-tertiary);
}

:root[data-theme="dark"] .conversa-badge {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
    color: #FFFFFF;
}

:root[data-theme="dark"] .btn-delete-conversa {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

:root[data-theme="dark"] .btn-delete-conversa:hover {
    background-color: var(--vermelho);
    color: #FFFFFF;
}

/* Modal de Exclusão */
:root[data-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.85);
}

:root[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
}

:root[data-theme="dark"] .modal-content h3 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .modal-content p {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .btn-modal-cancel {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-modal-cancel:hover {
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .btn-modal-confirm {
    background-color: var(--vermelho);
    color: #FFFFFF;
}

:root[data-theme="dark"] .btn-modal-confirm:hover {
    background-color: var(--vermelho-claro);
}

:root[data-theme="dark"] .message-bubble.received {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .chat-input-container {
    background-color: var(--bg-primary);
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .chat-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

:root[data-theme="dark"] .chat-input::placeholder {
    color: var(--input-placeholder);
}

/* ==================== FORMS E INPUTS ==================== */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--input-placeholder);
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
    border-color: var(--input-focus-border);
    background-color: var(--input-bg);
}

:root[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

:root[data-theme="dark"] .form-help {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .form-error {
    color: var(--vermelho-claro);
}

/* ==================== BOTÕES ==================== */
:root[data-theme="dark"] .btn {
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-ghost {
    background-color: transparent;
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-ghost:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--bg-elevated);
}

/* ==================== CARDS ==================== */
:root[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .card-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .card-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

:root[data-theme="dark"] .card-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-light);
}

/* ==================== MODALS ==================== */
:root[data-theme="dark"] .modal-overlay {
    background-color: var(--bg-overlay);
}

:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .modal-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .modal-header h2,
:root[data-theme="dark"] .modal-header h3 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .modal-body {
    background-color: var(--card-bg);
}

:root[data-theme="dark"] .modal-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .modal-close {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .modal-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* ==================== DROPDOWNS ==================== */
:root[data-theme="dark"] .dropdown,
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

:root[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-light);
}

/* ==================== LISTAS ==================== */
:root[data-theme="dark"] .list-group {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-tertiary);
}

/* ==================== PERFIL ==================== */
:root[data-theme="dark"] .profile-header {
    background-color: var(--bg-primary);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .profile-info {
    background-color: var(--card-bg);
}

:root[data-theme="dark"] .profile-name {
    color: var(--text-primary);
}

:root[data-theme="dark"] .profile-bio {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .profile-stats {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .stat-value {
    color: var(--text-primary);
}

:root[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

/* ==================== TABS ==================== */
:root[data-theme="dark"] .tabs {
    background-color: var(--bg-primary);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .tab {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .tab:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .tab.active {
    color: var(--roxo-claro);
    border-bottom-color: var(--roxo-claro);
}

/* ==================== BADGES ==================== */
:root[data-theme="dark"] .badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .badge-primary {
    background: var(--gradient-primary);
    color: white;
}

/* ==================== ALERTAS ==================== */
:root[data-theme="dark"] .alert {
    background-color: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

:root[data-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: var(--azul);
    color: var(--azul-claro);
}

:root[data-theme="dark"] .alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: var(--verde);
    color: var(--verde-claro);
}

:root[data-theme="dark"] .alert-warning {
    background-color: rgba(234, 179, 8, 0.1);
    border-color: var(--amarelo);
    color: var(--amarelo-claro);
}

:root[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--vermelho);
    color: var(--vermelho-claro);
}

/* ==================== LOADING / SPINNER ==================== */
:root[data-theme="dark"] .spinner,
:root[data-theme="dark"] .loading {
    border-color: var(--border-medium);
    border-top-color: var(--roxo-claro);
}

/* ==================== SEPARADORES ==================== */
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .divider {
    border-color: var(--border-light);
}

/* ==================== TOOLTIPS ==================== */
:root[data-theme="dark"] .tooltip {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

/* ==================== SIDEBAR / MENU ==================== */
:root[data-theme="dark"] .sidebar {
    background-color: var(--bg-primary);
    border-right-color: var(--border-light);
}

:root[data-theme="dark"] .menu-item {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .menu-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .menu-item.active {
    background-color: var(--bg-secondary);
    color: var(--roxo-claro);
}

/* ==================== SEARCH / BUSCA ==================== */
:root[data-theme="dark"] .search-container {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .search-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

:root[data-theme="dark"] .search-results {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .search-result-item {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .search-result-item:hover {
    background-color: var(--bg-tertiary);
}

/* ==================== CONFIGURAÇÕES PAGE ==================== */
:root[data-theme="dark"] .config-container {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .config-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .config-header h1 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-back {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-back:hover {
    background-color: var(--bg-elevated) !important;
}

:root[data-theme="dark"] .config-main {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .config-section {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .section-header {
    background-color: transparent;
}

:root[data-theme="dark"] .section-icon {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .section-icon.gray {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .section-title {
    color: var(--text-primary);
}

:root[data-theme="dark"] .section-desc {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .config-options {
    background-color: transparent;
}

:root[data-theme="dark"] .config-option {
    background-color: transparent !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary);
}

:root[data-theme="dark"] .config-option:hover {
    background-color: var(--bg-tertiary) !important;
}

:root[data-theme="dark"] .config-option.logout {
    background-color: transparent !important;
}

:root[data-theme="dark"] .config-option.logout:hover {
    background-color: rgba(220, 38, 38, 0.1) !important;
}

:root[data-theme="dark"] .option-icon {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .option-icon.indigo,
:root[data-theme="dark"] .option-icon.purple,
:root[data-theme="dark"] .option-icon.orange,
:root[data-theme="dark"] .option-icon.green {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .option-icon.logout {
    background-color: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}

:root[data-theme="dark"] .option-title {
    color: var(--text-primary);
}

:root[data-theme="dark"] .option-desc {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .version-text {
    color: var(--text-tertiary);
}

/* Modals da página de configurações */
:root[data-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

:root[data-theme="dark"] .modal-overlay .modal-content {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .modal-overlay .modal-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .modal-overlay .modal-header h3 {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .modal-close {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

:root[data-theme="dark"] .modal-close:hover {
    background-color: var(--bg-tertiary) !important;
}

:root[data-theme="dark"] .modal-overlay .modal-body {
    background-color: var(--card-bg) !important;
}

:root[data-theme="dark"] .modal-overlay .form-group label {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .modal-overlay .form-group input {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .modal-overlay .form-group input::placeholder {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .modal-overlay .form-group input:focus {
    border-color: var(--roxo-principal) !important;
    background-color: var(--bg-elevated) !important;
}

:root[data-theme="dark"] .btn-modal-submit {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink)) !important;
}

/* Privacy Options */
:root[data-theme="dark"] .privacy-option {
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .privacy-title {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .privacy-desc {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .switch {
    background-color: var(--bg-tertiary) !important;
}

:root[data-theme="dark"] .switch.active {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink)) !important;
}

/* Blocked Users List */
:root[data-theme="dark"] .blocked-user {
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .blocked-name {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .blocked-date {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .btn-unblock {
    background-color: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    color: #dc2626 !important;
}

:root[data-theme="dark"] .btn-unblock:hover {
    background-color: rgba(220, 38, 38, 0.2) !important;
}

/* Financial Section */
:root[data-theme="dark"] .plan-card {
    background: var(--bg-tertiary) !important;
}

:root[data-theme="dark"] .plan-desc {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .finance-section h4 {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .payment-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .payment-desc {
    color: var(--text-primary);
}

:root[data-theme="dark"] .payment-date {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .payment-value {
    color: var(--text-primary);
}

/* Modal Actions */
:root[data-theme="dark"] .modal-actions {
    border-top-color: var(--border-light) !important;
}

:root[data-theme="dark"] .modal-actions button {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .modal-btn.cancel {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .modal-btn.danger {
    background-color: #dc2626 !important;
    color: white !important;
}

/* Toast */
:root[data-theme="dark"] .toast {
    background-color: var(--card-bg) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

/* Empty States */
:root[data-theme="dark"] .empty-state {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .loading-spinner {
    color: var(--text-secondary);
}

/* VIP Countdown */
:root[data-theme="dark"] #vip-countdown-container {
    background: linear-gradient(135deg, rgba(147,51,234,0.15), rgba(124,58,237,0.2)) !important;
    border-color: rgba(147,51,234,0.3) !important;
}

:root[data-theme="dark"] .settings-section {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .settings-item {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .settings-label {
    color: var(--text-primary);
}

:root[data-theme="dark"] .settings-description {
    color: var(--text-secondary);
}

/* ==================== PERFIL PAGE ==================== */
:root[data-theme="dark"] .perfil-page {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .perfil-skeleton {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .skeleton-card {
    background-color: var(--card-bg) !important;
    box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .skeleton-capa {
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
}

:root[data-theme="dark"] .skeleton-foto {
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    border-color: var(--card-bg);
}

:root[data-theme="dark"] .skeleton-line {
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
}

:root[data-theme="dark"] .skeleton-stats {
    border-top-color: var(--border-light);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .skeleton-stat-num,
:root[data-theme="dark"] .skeleton-stat-label {
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
}

:root[data-theme="dark"] .skeleton-item {
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
}

:root[data-theme="dark"] .perfil-card-main {
    background-color: var(--card-bg) !important;
    box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .foto-capa-bg {
    background-color: var(--bg-secondary);
}

:root[data-theme="dark"] .capa-overlay {
    background: rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .btn-camera-capa,
:root[data-theme="dark"] .btn-camera-perfil {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

:root[data-theme="dark"] .foto-perfil-box {
    border-color: var(--card-bg);
}

:root[data-theme="dark"] .dados-card {
    background-color: var(--card-bg) !important;
    box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .sx-number {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .user-name {
    color: var(--text-primary);
}

:root[data-theme="dark"] .badge-tipo {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
    color: white;
}

:root[data-theme="dark"] .btn-location {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .btn-location:hover {
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .orientacao-box {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .stats-row {
    border-top-color: var(--border-light);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .stat-number {
    color: var(--text-primary);
}

:root[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .stat-divider {
    background-color: var(--border-light);
}

:root[data-theme="dark"] .btn-action {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .btn-action:hover {
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .btn-pink {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink)) !important;
    color: white !important;
}

:root[data-theme="dark"] .menu-section {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .menu-item {
    background-color: transparent;
    border-bottom-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .menu-item:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .menu-icon {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .menu-label {
    color: var(--text-primary);
}

:root[data-theme="dark"] .menu-desc {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .error-state {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .error-icon {
    background-color: rgba(239, 68, 68, 0.15);
}

:root[data-theme="dark"] .error-state h2 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .error-state p {
    color: var(--text-secondary);
}

/* Hoje Eu Quero Section */
:root[data-theme="dark"] .hoje-eu-quero-wrapper {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .hoje-eu-quero-title {
    color: var(--text-primary);
}

:root[data-theme="dark"] .hoje-eu-quero-chip {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .hoje-eu-quero-chip.active {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
    color: white;
}

/* Tabs Section */
:root[data-theme="dark"] .tabs-card {
    background-color: var(--card-bg) !important;
    box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .tabs-nav {
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .tab-button {
    color: var(--text-secondary);
    background-color: transparent;
}

:root[data-theme="dark"] .tab-button:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .tab-button.active {
    color: var(--roxo-principal);
    background-color: rgba(147, 51, 234, 0.1);
}

:root[data-theme="dark"] .tab-button.active::after {
    background: var(--roxo-principal);
}

:root[data-theme="dark"] .tab-panel {
    background-color: var(--card-bg);
}

:root[data-theme="dark"] .tab-panel.active {
    background-color: var(--card-bg);
}

/* Sobre Tab Content */
:root[data-theme="dark"] .sobre-section {
    background-color: transparent;
}

:root[data-theme="dark"] .sobre-row {
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .sobre-label {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .sobre-value {
    color: var(--text-primary);
}

/* Orientacao Row */
:root[data-theme="dark"] .orientacao-row .label {
    color: var(--text-primary);
}

:root[data-theme="dark"] .orientacao-row .value {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .orientacao-row .sep {
    color: var(--text-tertiary);
}

:root[data-theme="dark"] .orientacao-row .age {
    color: var(--text-secondary);
}

/* Badge Types */
:root[data-theme="dark"] .badge-vip {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

:root[data-theme="dark"] .badge-free {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Status Dots */
:root[data-theme="dark"] .status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

:root[data-theme="dark"] .status-dot.offline {
    background: #ef4444;
}

/* Posts Grid */
:root[data-theme="dark"] .posts-grid {
    background-color: transparent;
}

:root[data-theme="dark"] .post-thumbnail {
    background-color: var(--bg-secondary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .post-thumbnail:hover {
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .empty-posts {
    background-color: transparent;
    color: var(--text-secondary);
}

:root[data-theme="dark"] .empty-posts h3 {
    color: var(--text-primary);
}

/* Fotos e Videos Tabs */
:root[data-theme="dark"] .fotos-grid,
:root[data-theme="dark"] .videos-grid {
    background-color: transparent;
}

:root[data-theme="dark"] .foto-item,
:root[data-theme="dark"] .video-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .foto-item:hover,
:root[data-theme="dark"] .video-item:hover {
    border-color: var(--border-medium);
}

/* VIP Badge */
:root[data-theme="dark"] .vip-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1F2937;
}

/* Verified Badge */
:root[data-theme="dark"] .verified-badge {
    background: #10b981;
}

/* ==================== SKELETON LOADERS ==================== */
:root[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 0%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 100%
    );
    background-size: 200% 100%;
}

/* ==================== EMPTY STATES ==================== */
:root[data-theme="dark"] .empty-state {
    background-color: var(--bg-secondary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .empty-state-text {
    color: var(--text-secondary);
}

/* ==================== TIMESTAMP / HORA ==================== */
:root[data-theme="dark"] .timestamp,
:root[data-theme="dark"] .time,
:root[data-theme="dark"] .date {
    color: var(--text-secondary);
}

/* ==================== TAGS (INTERESTS, FETICHES) ==================== */
:root[data-theme="dark"] .tags-list {
    background-color: transparent !important;
}

:root[data-theme="dark"] .tag {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

:root[data-theme="dark"] .tag-pink {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink)) !important;
    color: white !important;
    border: none !important;
}

/* ==================== QUEM TE VISITOU ==================== */
:root[data-theme="dark"] .visitou-block {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .visitou-lista {
    background-color: transparent !important;
}

:root[data-theme="dark"] .visitou-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
}

:root[data-theme="dark"] .visitou-item:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-medium) !important;
}

:root[data-theme="dark"] .visitou-avatar {
    border-color: var(--border-medium) !important;
}

:root[data-theme="dark"] .visitou-nome {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .visitou-tempo {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .visitou-blur-box {
    background-color: rgba(23, 23, 23, 0.95) !important;
    backdrop-filter: blur(10px);
}

:root[data-theme="dark"] .visitou-blur-text {
    color: var(--text-primary) !important;
}

/* ==================== HOJE CARDS ==================== */
:root[data-theme="dark"] .hoje-card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .hoje-card-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .hoje-card-body {
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
}

:root[data-theme="dark"] .hoje-card-titulo {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .hoje-card-desc {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .hoje-card-alterar {
    color: var(--roxo-principal) !important;
}

/* ==================== IMAGENS E MEDIA ==================== */
:root[data-theme="dark"] img {
    opacity: 0.95;
}

:root[data-theme="dark"] .image-container {
    background-color: var(--bg-secondary);
    border-color: var(--border-light);
}

/* ==================== CÓDIGOS ==================== */
:root[data-theme="dark"] code,
:root[data-theme="dark"] pre {
    background-color: var(--bg-tertiary);
    color: var(--roxo-claro);
    border-color: var(--border-medium);
}

/* ==================== TABLES ==================== */
:root[data-theme="dark"] table {
    background-color: var(--card-bg);
    border-color: var(--border-light);
}

:root[data-theme="dark"] th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] td {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] tr:hover {
    background-color: var(--bg-tertiary);
}

/* ==================== SWITCH / TOGGLE ==================== */
:root[data-theme="dark"] .switch {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .switch:checked {
    background-color: var(--roxo-principal);
}

/* ==================== PROGRESS BAR ==================== */
:root[data-theme="dark"] .progress {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .progress-bar {
    background: var(--gradient-primary);
}

/* ==================== BREADCRUMB ==================== */
:root[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-secondary);
}

:root[data-theme="dark"] .breadcrumb-item {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-primary);
}

/* ==================== PAGINATION ==================== */
:root[data-theme="dark"] .pagination {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .page-item {
    background-color: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

:root[data-theme="dark"] .page-item:hover {
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .page-item.active {
    background: var(--gradient-primary);
    color: white;
}

/* ==================== CONVERSATION PAGE ==================== */
:root[data-theme="dark"] .conversa-page {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .conversa-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .mensagem.received .mensagem-bubble {
    background-color: #242424;
    color: var(--text-primary);
}

:root[data-theme="dark"] .mensagem.sent .mensagem-bubble {
    background: var(--gradient-primary);
    color: white;
}

:root[data-theme="dark"] .mensagem-input-container {
    background-color: #000000;
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .mensagem-input {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .mensagem-input::placeholder {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .mensagem-time {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .mensagem-status {
    color: var(--text-secondary);
}

/* ==================== BUSCA PAGE ==================== */
:root[data-theme="dark"] .busca-page {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .busca-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .busca-container {
    background-color: transparent;
}

:root[data-theme="dark"] .busca-input {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: transparent;
}

:root[data-theme="dark"] .busca-input:focus {
    background-color: var(--bg-elevated);
    box-shadow: 0 0 0 2px var(--roxo-principal);
}

:root[data-theme="dark"] .busca-input::placeholder {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .busca-icon {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .btn-clear-search {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .btn-clear-search:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .btn-toggle-filters {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .btn-toggle-filters:hover,
:root[data-theme="dark"] .btn-toggle-filters.active {
    background: var(--gradient-primary);
    color: white;
}

:root[data-theme="dark"] .btn-toggle-filters.has-filters {
    background: var(--gradient-primary);
    color: white;
}

:root[data-theme="dark"] .busca-status {
    color: var(--text-primary);
}

:root[data-theme="dark"] .busca-count {
    color: var(--text-primary);
}

:root[data-theme="dark"] .count-num {
    color: var(--roxo-claro);
}

:root[data-theme="dark"] .btn-clear-filters {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .btn-clear-filters:hover {
    background-color: var(--vermelho);
    color: white;
}

/* Filters Panel */
:root[data-theme="dark"] .filters-panel {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .filter-group {
    border-color: var(--border-light);
}

:root[data-theme="dark"] .filter-label {
    color: var(--text-primary);
}

:root[data-theme="dark"] .filter-btn {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .filter-btn:hover {
    background-color: var(--bg-elevated);
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .filter-btn.active {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--roxo-principal);
}

:root[data-theme="dark"] .filter-select {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .filter-select:focus {
    border-color: var(--roxo-principal);
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .filter-select option {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .filter-checkbox {
    color: var(--text-primary);
}

:root[data-theme="dark"] .checkmark {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .filter-checkbox input:checked ~ .checkmark {
    background: var(--gradient-primary);
    border-color: var(--roxo-principal);
}

:root[data-theme="dark"] .btn-apply-filters {
    background: var(--gradient-primary);
    color: white;
}

:root[data-theme="dark"] .vip-filters-section {
    background-color: transparent;
}

:root[data-theme="dark"] .vip-filters-overlay {
    background-color: rgba(10, 10, 10, 0.7);
}

:root[data-theme="dark"] .vip-lock-badge {
    background: var(--gradient-primary);
    color: white;
}

:root[data-theme="dark"] .vip-badge-small {
    background: var(--gradient-primary);
    color: white;
}

/* Results */
:root[data-theme="dark"] .busca-results {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .empty-state {
    background-color: transparent;
    color: var(--text-secondary);
}

:root[data-theme="dark"] .empty-state h3 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .empty-icon {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .loading-state {
    background-color: transparent;
}

:root[data-theme="dark"] .skeleton-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .skeleton-avatar {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
}

:root[data-theme="dark"] .skeleton-line {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
}

:root[data-theme="dark"] .results-list {
    background-color: transparent;
}

:root[data-theme="dark"] .user-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .user-card:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .user-avatar {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink));
    border-color: var(--card-border);
}

:root[data-theme="dark"] .user-avatar.no-photo {
    background: linear-gradient(135deg, #1F1F1F, #2A2A2A);
    color: var(--text-secondary);
}

:root[data-theme="dark"] .avatar-inicial {
    color: var(--text-primary);
}

:root[data-theme="dark"] .online-dot {
    background-color: var(--verde);
    border-color: var(--card-bg);
}

:root[data-theme="dark"] .user-name {
    color: var(--text-primary);
}

:root[data-theme="dark"] .user-tipo,
:root[data-theme="dark"] .user-location,
:root[data-theme="dark"] .user-age {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .user-meta {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .meta-dot {
    color: var(--text-tertiary);
}

:root[data-theme="dark"] .user-sx {
    color: var(--roxo-claro);
}

:root[data-theme="dark"] .verified-icon {
    fill: var(--azul);
}

:root[data-theme="dark"] .vip-icon {
    fill: var(--amarelo);
}

:root[data-theme="dark"] .tipo-icon {
    color: var(--text-secondary);
}

/* ==================== BUSCA MAPA PAGE ==================== */
:root[data-theme="dark"] .mapa-page {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .map-hero {
    background: var(--card-bg) !important;
    border-color: var(--card-border);
}

:root[data-theme="dark"] .map-hero * {
    color: var(--text-primary);
}

:root[data-theme="dark"] .map-container,
:root[data-theme="dark"] .map-wrapper,
:root[data-theme="dark"] .map-content {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .map-status-bar {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border);
}

:root[data-theme="dark"] .map-status-bar * {
    color: var(--text-primary);
}

:root[data-theme="dark"] .map-search-bar,
:root[data-theme="dark"] .map-filters,
:root[data-theme="dark"] .map-controls {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border);
}

:root[data-theme="dark"] .chip-btn {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .chip-btn:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--border-medium);
}

:root[data-theme="dark"] .chip-btn.active {
    background: var(--gradient-primary) !important;
    border-color: var(--roxo-principal);
    color: white;
}

:root[data-theme="dark"] .lock-badge {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-light);
    color: var(--text-secondary);
}

:root[data-theme="dark"] .map-loading,
:root[data-theme="dark"] .map-error {
    background: rgba(0, 0, 0, 0.96);
    color: var(--text-primary);
}

:root[data-theme="dark"] .privacy-banner {
    background: var(--card-bg) !important;
    border-color: var(--card-border);
    color: var(--text-primary);
}

:root[data-theme="dark"] .list-type-filters {
    background: var(--bg-tertiary) !important;
}

:root[data-theme="dark"] .mapa-container {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .mapa-sidebar {
    background-color: var(--card-bg);
    border-right-color: var(--border-light);
}

:root[data-theme="dark"] .mapa-user-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-light);
}

:root[data-theme="dark"] .mapa-user-item:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .mapa-user-name {
    color: var(--text-primary);
}

:root[data-theme="dark"] .mapa-user-distance {
    color: var(--text-secondary);
}

/* ==================== CONFIGURAÇÕES PAGE ==================== */
:root[data-theme="dark"] .configuracoes-page {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .config-section {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .config-title {
    color: var(--text-primary);
}

:root[data-theme="dark"] .config-description {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .config-item {
    background-color: transparent;
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .config-item:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .config-label {
    color: var(--text-primary);
}

:root[data-theme="dark"] .config-value {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .config-input,
:root[data-theme="dark"] .config-select,
:root[data-theme="dark"] .config-textarea {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .config-input::placeholder,
:root[data-theme="dark"] .config-textarea::placeholder {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .config-input:focus,
:root[data-theme="dark"] .config-select:focus,
:root[data-theme="dark"] .config-textarea:focus {
    border-color: var(--roxo-principal);
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .config-switch {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .config-switch.active {
    background: var(--gradient-primary);
}

:root[data-theme="dark"] .danger-zone {
    background-color: var(--card-bg);
    border: 1px solid var(--vermelho);
}

:root[data-theme="dark"] .danger-zone-title {
    color: var(--vermelho);
}

/* ==================== STORY CREATOR MODAL ==================== */
:root[data-theme="dark"] .story-creator-modal {
    background-color: rgba(0, 0, 0, 0.9);
}

:root[data-theme="dark"] .story-creator-content {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .story-creator-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .story-creator-header h3 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .story-preview {
    background-color: var(--bg-secondary);
}

:root[data-theme="dark"] .story-text-input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .story-text-input::placeholder {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .story-tools {
    background-color: var(--card-bg);
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .story-tool-btn {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .story-tool-btn:hover {
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .story-tool-btn.active {
    background: var(--gradient-primary);
    color: white;
}

/* ==================== TODOS OS MODAIS GERAIS ==================== */
:root[data-theme="dark"] .modal {
    background-color: rgba(0, 0, 0, 0.85);
}

:root[data-theme="dark"] .modal-dialog {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
}

:root[data-theme="dark"] .modal-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

:root[data-theme="dark"] .modal-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

:root[data-theme="dark"] .modal-footer {
    background-color: var(--card-bg);
    border-top-color: var(--border-light);
}

:root[data-theme="dark"] .modal-close {
    color: var(--text-primary);
}

:root[data-theme="dark"] .modal-close:hover {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .btn-primary {
    background: var(--gradient-primary);
    color: white;
}

:root[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--bg-elevated);
}

:root[data-theme="dark"] .btn-danger {
    background-color: var(--vermelho);
    color: white;
}

/* ==================== SCROLLBARS ==================== */
:root[data-theme="dark"] ::-webkit-scrollbar {
    background-color: var(--bg-secondary);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--cinza-400);
    border-radius: 4px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: var(--cinza-500);
}

/* ==================== SMOOTH TRANSITIONS ==================== */
:root[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
}

/* Exceções para elementos que não devem ter transição */
:root[data-theme="dark"] img,
:root[data-theme="dark"] video,
:root[data-theme="dark"] .no-transition {
    transition: none;
}

/* ==================== EDITAR PERFIL PAGE ==================== */
:root[data-theme="dark"] .editar-perfil-page {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .editar-perfil-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .editar-perfil-header h1 {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .editar-perfil-container {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .form-section {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .form-section-header {
    background-color: transparent;
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .form-section-title {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .form-section-subtitle {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .form-group label {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .form-group select,
:root[data-theme="dark"] .form-group textarea {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .form-group input::placeholder,
:root[data-theme="dark"] .form-group textarea::placeholder {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .form-group input:focus,
:root[data-theme="dark"] .form-group select:focus,
:root[data-theme="dark"] .form-group textarea:focus {
    background-color: var(--bg-elevated) !important;
    border-color: var(--roxo-principal) !important;
}

:root[data-theme="dark"] .form-group input:disabled,
:root[data-theme="dark"] .form-group select:disabled,
:root[data-theme="dark"] .form-group textarea:disabled {
    background-color: var(--bg-secondary) !important;
    color: var(--text-tertiary) !important;
    opacity: 0.6;
}

:root[data-theme="dark"] .form-helper-text {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .form-error {
    color: var(--vermelho) !important;
}

:root[data-theme="dark"] .char-counter {
    color: var(--text-secondary) !important;
}

/* Validation Modal */
:root[data-theme="dark"] .validation-modal-overlay {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

:root[data-theme="dark"] .validation-modal-content {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .validation-modal-header {
    background-color: transparent;
}

:root[data-theme="dark"] .validation-icon {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 146, 60, 0.2)) !important;
}

:root[data-theme="dark"] .validation-modal-header h2 {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .validation-modal-header p {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .validation-modal-body ul {
    background-color: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

:root[data-theme="dark"] .validation-modal-body li {
    color: var(--amarelo) !important;
}

:root[data-theme="dark"] .validation-btn {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink)) !important;
    color: white !important;
}

/* Photo Upload */
:root[data-theme="dark"] .photo-upload-area {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
}

:root[data-theme="dark"] .photo-upload-area:hover {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-medium) !important;
}

:root[data-theme="dark"] .upload-icon {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .upload-text {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .upload-hint {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .photo-preview {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
}

:root[data-theme="dark"] .btn-remove-photo {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: var(--vermelho) !important;
}

:root[data-theme="dark"] .btn-remove-photo:hover {
    background-color: var(--vermelho) !important;
    color: white !important;
}

/* Tag Selection */
:root[data-theme="dark"] .tags-selector {
    background-color: transparent;
}

:root[data-theme="dark"] .tag-item {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .tag-item:hover {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-medium) !important;
}

:root[data-theme="dark"] .tag-item.selected {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink)) !important;
    border-color: var(--roxo-principal) !important;
    color: white !important;
}

:root[data-theme="dark"] .selected-tags {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
}

:root[data-theme="dark"] .selected-tag {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-remove-tag {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .btn-remove-tag:hover {
    color: var(--vermelho) !important;
}

/* ==================== LUGARES/LOCAIS PAGE ==================== */
:root[data-theme="dark"] .lugares-page,
:root[data-theme="dark"] .locais-page {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .lugares-header,
:root[data-theme="dark"] .locais-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .lugar-card,
:root[data-theme="dark"] .local-card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .lugar-card:hover,
:root[data-theme="dark"] .local-card:hover {
    background-color: var(--bg-tertiary) !important;
}

:root[data-theme="dark"] .lugar-nome,
:root[data-theme="dark"] .local-nome {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .lugar-endereco,
:root[data-theme="dark"] .local-endereco {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .lugar-stats,
:root[data-theme="dark"] .local-stats {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .visitantes-list {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .visitante-item {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .visitante-item:hover {
    background-color: var(--bg-tertiary) !important;
}

:root[data-theme="dark"] .visitante-nome {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .visitante-time {
    color: var(--text-secondary) !important;
}

/* ==================== PAQUERAS PAGE ==================== */
:root[data-theme="dark"] .paqueras-page {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .paqueras-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .paquera-card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .paquera-card:hover {
    background-color: var(--bg-tertiary) !important;
}

:root[data-theme="dark"] .paquera-status {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .paquera-status.match {
    color: var(--verde) !important;
}

:root[data-theme="dark"] .paquera-status.pending {
    color: var(--amarelo) !important;
}

:root[data-theme="dark"] .paquera-nome {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .paquera-time {
    color: var(--text-secondary) !important;
}

/* ==================== ASSINATURA/VIP PAGE ==================== */
:root[data-theme="dark"] .assinatura-page,
:root[data-theme="dark"] .vip-page {
    background-color: var(--bg-primary) !important;
}

:root[data-theme="dark"] .planos-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .plano-card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .plano-card:hover {
    border-color: var(--roxo-principal) !important;
}

:root[data-theme="dark"] .plano-card.destaque {
    border-color: var(--roxo-principal) !important;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(219, 39, 119, 0.1)) !important;
}

:root[data-theme="dark"] .plano-nome {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .plano-preco {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .plano-features {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .plano-features li {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-assinar {
    background: linear-gradient(135deg, var(--roxo-principal), var(--rosa-pink)) !important;
    color: white !important;
}

:root[data-theme="dark"] .vip-benefits {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .benefit-item {
    border-bottom-color: var(--border-light) !important;
}

:root[data-theme="dark"] .benefit-title {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .benefit-desc {
    color: var(--text-secondary) !important;
}

/* ==================== BOTÃO DE TEMA NA PÁGINA DE LOGIN ==================== */
.theme-toggle-auth {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.theme-toggle-auth:hover {
    transform: scale(1.1);
    border-color: var(--roxo-principal);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

.theme-toggle-auth:active {
    transform: scale(0.95);
}

.theme-toggle-auth svg {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Tema claro: mostrar lua (moon) */
:root[data-theme="light"] .theme-toggle-auth .sun-icon {
    opacity: 0;
    transform: rotate(180deg);
    position: absolute;
}

:root[data-theme="light"] .theme-toggle-auth .moon-icon {
    opacity: 1;
    transform: rotate(0deg);
    color: var(--text-primary);
}

/* Tema escuro: mostrar sol (sun) */
:root[data-theme="dark"] .theme-toggle-auth .moon-icon {
    opacity: 0;
    transform: rotate(-180deg);
    position: absolute;
}

:root[data-theme="dark"] .theme-toggle-auth .sun-icon {
    opacity: 1;
    transform: rotate(0deg);
    color: #fbbf24;
}

:root[data-theme="dark"] .theme-toggle-auth {
    background: var(--card-bg);
    border-color: var(--border-medium);
}

/* Mobile */
@media (max-width: 640px) {
    .theme-toggle-auth {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }
}

/* ==================== HEADER THEME TOGGLE ==================== */
.header-theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tema claro: mostrar lua */
:root[data-theme="light"] .header-theme-toggle .sun-icon,
:root:not([data-theme]) .header-theme-toggle .sun-icon {
    display: none;
}

:root[data-theme="light"] .header-theme-toggle .moon-icon,
:root:not([data-theme]) .header-theme-toggle .moon-icon {
    display: block;
    color: #6b7280;
}

/* Tema escuro: mostrar sol */
:root[data-theme="dark"] .header-theme-toggle .moon-icon {
    display: none;
}

:root[data-theme="dark"] .header-theme-toggle .sun-icon {
    display: block;
    color: #fbbf24;
}

/* ==================== GENERIC CONTAINERS AND WRAPPERS ==================== */
/* Força todos os containers e wrappers genéricos a terem fundo escuro */
:root[data-theme="dark"] .container,
:root[data-theme="dark"] .wrapper,
:root[data-theme="dark"] .content,
:root[data-theme="dark"] .main,
:root[data-theme="dark"] .section,
:root[data-theme="dark"] .page-container,
:root[data-theme="dark"] .main-content,
:root[data-theme="dark"] .content-wrapper,
:root[data-theme="dark"] .content-area,
:root[data-theme="dark"] .central-container,
:root[data-theme="dark"] .page-wrapper,
:root[data-theme="dark"] .app-container,
:root[data-theme="dark"] .layout-container,
:root[data-theme="dark"] .inner-container,
:root[data-theme="dark"] .outer-container {
    background-color: var(--bg-primary) !important;
}

/* Containers de cards e painéis */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .widget,
:root[data-theme="dark"] .module,
:root[data-theme="dark"] .block,
:root[data-theme="dark"] .item-container,
:root[data-theme="dark"] .list-container,
:root[data-theme="dark"] .grid-container {
    background-color: var(--card-bg) !important;
}

/* Seções de conteúdo */
:root[data-theme="dark"] .content-section,
:root[data-theme="dark"] .page-section,
:root[data-theme="dark"] .section-wrapper,
:root[data-theme="dark"] .section-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Areas principais */
:root[data-theme="dark"] main,
:root[data-theme="dark"] .main-area,
:root[data-theme="dark"] article,
:root[data-theme="dark"] .article-container {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Áreas de conteúdo específicas */
:root[data-theme="dark"] .feed-container,
:root[data-theme="dark"] .timeline-container,
:root[data-theme="dark"] .posts-container,
:root[data-theme="dark"] .results-container,
:root[data-theme="dark"] .search-results,
:root[data-theme="dark"] .items-wrapper {
    background-color: var(--bg-primary) !important;
}

/* Grids e flexbox containers */
:root[data-theme="dark"] .row,
:root[data-theme="dark"] .col,
:root[data-theme="dark"] .flex-container,
:root[data-theme="dark"] .grid,
:root[data-theme="dark"] .flex-wrapper {
    background-color: transparent !important;
}

/* Body e HTML */
:root[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Wrappers de página inteira */
:root[data-theme="dark"] #app,
:root[data-theme="dark"] #root,
:root[data-theme="dark"] .app-wrapper,
:root[data-theme="dark"] .site-wrapper {
    background-color: var(--bg-primary) !important;
}

/* Divs genéricas com classes comuns de background branco */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .white-bg,
:root[data-theme="dark"] .light-bg,
:root[data-theme="dark"] .bg-light {
    background-color: var(--bg-primary) !important;
}

/* Containers de formulário */
:root[data-theme="dark"] .form-container,
:root[data-theme="dark"] .form-wrapper,
:root[data-theme="dark"] form {
    background-color: var(--card-bg) !important;
}

/* Tables e listas */
:root[data-theme="dark"] table,
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table-wrapper {
    background-color: var(--card-bg) !important;
    color: var(--text-primary);
}

:root[data-theme="dark"] ul,
:root[data-theme="dark"] ol,
:root[data-theme="dark"] .list {
    background-color: transparent !important;
}

/* Headers e footers de seção */
:root[data-theme="dark"] .section-header,
:root[data-theme="dark"] .section-footer,
:root[data-theme="dark"] .content-header,
:root[data-theme="dark"] .content-footer {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border);
    color: var(--text-primary);
}

/* Overlays e backgrounds */
:root[data-theme="dark"] .overlay,
:root[data-theme="dark"] .backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Separadores */
:root[data-theme="dark"] .divider,
:root[data-theme="dark"] hr {
    border-color: var(--border-light) !important;
    background-color: var(--border-light) !important;
}