:root {
    color-scheme: light;
    --mode-bg: #f4f7f5;
    --mode-bg-soft: #f8fafc;
    --mode-surface: #ffffff;
    --mode-surface-raised: #ffffff;
    --mode-surface-muted: #f1f5f9;
    --mode-text: #10251a;
    --mode-text-soft: #475569;
    --mode-muted: #64748b;
    --mode-border: #dce6df;
    --mode-overlay: rgba(2, 18, 10, .58);
    --mode-shadow: 0 18px 50px rgba(7, 43, 24, .09);
}

html[data-color-mode="dark"] {
    color-scheme: dark;
    --mode-bg: #07110c;
    --mode-bg-soft: #0b1710;
    --mode-surface: #101d15;
    --mode-surface-raised: #14251a;
    --mode-surface-muted: #1a2d20;
    --mode-text: #edf8f0;
    --mode-text-soft: #c7d8cc;
    --mode-muted: #9bb0a2;
    --mode-border: #294334;
    --mode-overlay: rgba(0, 0, 0, .72);
    --mode-shadow: 0 20px 55px rgba(0, 0, 0, .34);
}

html,
body,
button,
input,
select,
textarea {
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

body {
    background-color: var(--mode-bg);
    color: var(--mode-text);
}

.color-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 42px;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--mode-border);
    border-radius: 999px;
    background: var(--mode-surface);
    color: var(--mode-text);
    font: 700 12px/1 Inter, system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    z-index: 1100;
}

.color-mode-toggle:hover,
.color-mode-toggle:focus-visible {
    color: var(--primary, #2b9348);
    border-color: var(--primary, #2b9348);
    outline: none;
    transform: translateY(-1px);
}

.color-mode-toggle :is(i, .color-mode-glyph) {
    font-size: 16px;
    color: var(--primary, #2b9348);
}

.color-mode-toggle-floating {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
}

.color-mode-toggle-admin {
    width: 100%;
    margin-bottom: 12px;
    color: #fff;
    border-color: rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .07);
}

.color-mode-toggle-admin :is(i, .color-mode-glyph) {
    color: var(--primary, #55a630);
}

.color-mode-toggle-inline .color-mode-toggle-label,
.color-mode-toggle-blog .color-mode-toggle-label {
    display: none;
}

html[data-color-mode="dark"] body:not(.client-portal) {
    background: var(--mode-bg) !important;
    color: var(--mode-text);
}

html[data-color-mode="dark"] body {
    --white: var(--mode-surface);
    --light: var(--mode-surface-muted);
    --gray: var(--mode-muted);
    --border: var(--mode-border);
    --background: var(--mode-bg);
    --bg: var(--mode-bg);
    --surface: var(--mode-surface);
    --text: var(--mode-text);
    --muted: var(--mode-muted);
}

html[data-color-mode="dark"] :is(
    .card,
    .stat-card,
    .stat-item,
    .filter-bar,
    .filters-bar,
    .modal-content,
    .modal-box,
    .content-card,
    .dashboard-card,
    .dashboard-header,
    .chart-card,
    .table-card,
    .summary-card,
    .alerts-container,
    .notifications-dropdown,
    .service-card,
    .activation-card,
    .transaction-card,
    .recharge-card,
    .recharge-container,
    .profile-card,
    .profile-container,
    .security-card,
    .security-actions form,
    .api-card,
    .favorite-card,
    .alert-card,
    .alerts-card,
    .stats-summary,
    .quick-actions,
    .page-header,
    .empty-state,
    .empty-results,
    .table-container,
    .table-wrapper,
    .historico-table,
    .logs-section,
    .form-card,
    .settings-card,
    .settings-section,
    .gateway-card,
    .metodo-pagamento,
    .provider-card,
    .provider-selector,
    .service-badge,
    .operator-item,
    .historico-tabs,
    .credential-box,
    .checkbox-group,
    .catalog-stat,
    .catalog-item,
    .pais-item,
    .info-section,
    .markups-panel,
    .markup-card,
    .serp-preview,
    .rich-editor,
    .editor-toolbar,
    .client-card,
    .affiliate-card,
    .loyalty-card,
    .login-card,
    .register-card,
    .reset-card,
    .auth-card,
    .contact-card,
    .contact-container,
    .info-card,
    .legal-card,
    .terms-container,
    .privacy-container,
    .doc-card,
    .endpoint,
    .sidebar-card,
    .svc-card,
    .feat-card,
    .price-card,
    .app-download-card,
    .mobile-menu
) {
    background-color: var(--mode-surface) !important;
    color: var(--mode-text);
    border-color: var(--mode-border) !important;
    box-shadow: var(--mode-shadow);
}

html[data-color-mode="dark"] :is(
    input,
    select,
    textarea,
    .form-control,
    .search-input,
    .filter-select,
    .input-group,
    .search-box input,
    .credential-value code,
    .pix-code
) {
    color: var(--mode-text) !important;
    background-color: var(--mode-surface-raised) !important;
    border-color: var(--mode-border) !important;
}

html[data-color-mode="dark"] input::placeholder,
html[data-color-mode="dark"] textarea::placeholder {
    color: var(--mode-muted);
    opacity: .9;
}

html[data-color-mode="dark"] option {
    color: var(--mode-text);
    background: var(--mode-surface);
}

html[data-color-mode="dark"] :is(
    .table th,
    table th,
    .card-header,
    .modal-header,
    .modal-actions,
    .tabs,
    .filter-header,
    .dropdown-menu,
    .popup-content
) {
    background-color: var(--mode-surface-muted) !important;
    color: var(--mode-text);
    border-color: var(--mode-border) !important;
}

html[data-color-mode="dark"] :is(.table td, table td, hr) {
    border-color: var(--mode-border) !important;
}

html[data-color-mode="dark"] :is(
    .filter-btn,
    .btn-outline,
    .action-btn,
    .lang-btn,
    .currency-btn,
    .provider-option,
    .operator-option,
    .btn-modal-cancel,
    .blog-tab,
    .editor-toolbar button,
    .seo-tab,
    .notifications-btn,
    .catalog-pagination a,
    .catalog-pagination span
) {
    color: var(--mode-text-soft);
    background-color: var(--mode-surface-raised) !important;
    border-color: var(--mode-border) !important;
}

html[data-color-mode="dark"] :is(
    .filter-btn.active,
    .provider-option.active,
    .operator-option.active,
    .tabs .active,
    .historico-tab.active,
    .pagination a.active,
    .pagination .active,
    .catalog-pagination .active,
    .blog-tab.active,
    .seo-tab.active,
    .service-badge.active
) {
    color: #fff;
    background-color: var(--primary, #2b9348) !important;
    border-color: var(--primary, #2b9348) !important;
}

html[data-color-mode="dark"] .operator-item.selected {
    background-color: rgba(85, 166, 48, .13) !important;
    border-color: var(--primary, #2b9348) !important;
}

html[data-color-mode="dark"] :is(.table tr:hover td, table tr:hover td) {
    background-color: rgba(85, 166, 48, .08) !important;
}

html[data-color-mode="dark"] :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .stat-value,
    .card-title,
    .page-title,
    .modal-title
) {
    color: var(--mode-text);
}

html[data-color-mode="dark"] :is(
    .client-portal .dashboard-main,
    .client-portal .main-content,
    .admin-content,
    .content-wrapper
) :is(h1, h2, h3, h4, h5, h6, .section-title, .purchase-price, .op-name) {
    color: var(--mode-text) !important;
}

html[data-color-mode="dark"] :is(
    p,
    small,
    label,
    .text-muted,
    .meta,
    .subtitle,
    .description,
    .stat-label
) {
    border-color: var(--mode-border);
}

html[data-color-mode="dark"] :is(
    .pagination a,
    .pagination span,
    .dropdown-content,
    .lang-dropdown,
    .currency-dropdown
) {
    color: var(--mode-text);
    background-color: var(--mode-surface) !important;
    border-color: var(--mode-border) !important;
}

html[data-color-mode="dark"] code:not(pre code) {
    color: #b7f7c8;
    background-color: rgba(85, 166, 48, .12);
}

html[data-color-mode="dark"] pre {
    border-color: #31513d;
}

html[data-color-mode="dark"] :is(
    .alert-warning,
    .recovery-box,
    .alert-item
) {
    color: #fde68a;
    background-color: rgba(245, 158, 11, .12) !important;
    border-color: rgba(245, 158, 11, .55) !important;
}

html[data-color-mode="dark"] :is(
    .mfa-secret,
    .recovery-grid code
) {
    color: var(--mode-text);
    background: var(--mode-surface-muted) !important;
}

html[data-color-mode="dark"] .mfa-qr {
    background: #fff !important;
    border-color: #dbe5de !important;
}

html[data-color-mode="dark"] :is(.toast, .popup-content) {
    color: var(--mode-text);
    background-color: var(--mode-surface-raised) !important;
    border-color: var(--mode-border) !important;
}

html[data-color-mode="dark"] .modal {
    background: var(--mode-overlay);
}

/* Área do cliente */
html[data-color-mode="dark"] body.client-portal {
    --portal-surface: var(--mode-surface);
    --portal-background: var(--mode-bg);
    --portal-text: var(--mode-text);
    --portal-muted: var(--mode-muted);
    --portal-border: var(--mode-border);
    --portal-shadow: var(--mode-shadow);
    background:
        radial-gradient(circle at 92% 0, rgba(var(--primary-rgb), .14), transparent 28rem),
        var(--portal-background);
}

html[data-color-mode="dark"] .client-portal :is(
    .lang-card,
    .currency-card,
    .lang-dropdown,
    .currency-dropdown,
    .color-mode-toggle-inline
) {
    color: var(--portal-text);
    background: rgba(16, 29, 21, .97) !important;
    border-color: var(--portal-border);
}

html[data-color-mode="dark"] .client-portal :is(.dashboard-main, .main-content) {
    color: var(--portal-text);
}

html[data-color-mode="dark"] .client-portal .toast {
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}

/* Administração */
html[data-color-mode="dark"] body .dashboard-main {
    color: var(--mode-text);
}

html[data-color-mode="dark"] body .btn-outline {
    color: var(--mode-text-soft);
    border-color: var(--mode-border);
}

html[data-color-mode="dark"] :is(.badge-secondary, .metodo-tag) {
    color: var(--mode-text-soft);
    background: var(--mode-surface-muted);
}

html[data-color-mode="dark"] .slider {
    background: #385443;
}

/* Blog */
html[data-color-mode="dark"] :is(
    .blog-header,
    .blog-language > button,
    .blog-language-menu,
    .blog-mobile-menu,
    .blog-card,
    .blog-sidebar-card,
    .blog-category-pill,
    .blog-empty,
    .blog-pagination a,
    .blog-pagination span,
    .article-content,
    .article-share a,
    .blog-search
) {
    color: var(--mode-text);
    background-color: var(--mode-surface) !important;
    border-color: var(--mode-border) !important;
}

html[data-color-mode="dark"] :is(
    .blog-card p,
    .blog-card-meta,
    .blog-recent span,
    .article-breadcrumb,
    .article-lead,
    .article-meta
) {
    color: var(--mode-muted);
}

html[data-color-mode="dark"] .article-content blockquote {
    color: var(--mode-text-soft);
    background: var(--mode-surface-muted);
}

html[data-color-mode="dark"] .blog-recent {
    border-color: var(--mode-border);
}

/* Documentação */
html[data-color-mode="dark"] body.docs-page,
html[data-color-mode="dark"] .docs-shell {
    --background: var(--mode-bg);
    --surface: var(--mode-surface);
    --surface-soft: var(--mode-surface-muted);
    --text: var(--mode-text);
    --muted: var(--mode-muted);
    --border: var(--mode-border);
    --code: #08110c;
}

html[data-color-mode="dark"] .docs-page :is(.sidebar, .topbar, .language-selector) {
    color: var(--mode-text);
    background-color: var(--mode-surface) !important;
    border-color: var(--mode-border) !important;
}

@media (max-width: 720px) {
    .color-mode-toggle-floating {
        right: 12px;
        bottom: 12px;
    }

    .color-mode-toggle-label {
        display: none;
    }

    .color-mode-toggle {
        width: 42px;
        padding: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body,
    button,
    input,
    select,
    textarea {
        transition: none !important;
    }
}