/* Reset visual do painel */
        *, *::before, *::after { box-sizing: border-box; }
        body {
            font-family: 'Inter', sans-serif;
            background-color: #F5F5F0;
            min-height: 100vh;
            padding-top: env(safe-area-inset-top);
            margin: 0;
        }
        .font-serif { font-family: 'Playfair Display', serif; }

        /* ══ LAYOUT BODY — Holk Master ══════════════════════════════════ */
        .holk-layout {
            display: flex;
            min-height: 100vh;
        }

        /* ══ SIDEBAR DESKTOP ════════════════════════════════════════════ */
        .holk-sidebar {
            width: 240px;
            flex-shrink: 0;
            background: #fff;
            border-right: 1px solid rgba(0,0,0,0.06);
            padding: 28px 16px;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            display: none;
            flex-direction: column;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        @media (min-width: 768px) {
            .holk-sidebar { display: flex; }
        }
        .sidebar-brand {
            font-family: 'Playfair Display', serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: #5A5A40;
            margin-bottom: 4px;
        }
        .sidebar-brand-sub {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgba(26,26,26,0.35);
            font-weight: 600;
        }
        .sidebar-nav { 
            margin-top: 24px; 
            flex: 1;
            padding: 0;
        }
        .sidebar-nav a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 14px;
            color: rgba(26,26,26,0.55);
            font-size: 0.875rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s;
            margin-bottom: 2px;
            min-height: 44px;
            justify-content: flex-start;
        }
        .sidebar-nav a svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            stroke-width: 1.5;
        }
        .sidebar-nav a:hover {
            background: rgba(90,90,64,0.06);
            color: #5A5A40;
        }
        .sidebar-nav a:focus-visible {
            outline: 2px solid #5A5A40;
            outline-offset: 2px;
        }
        .sidebar-nav a.active {
            background: #5A5A40;
            color: #fff;
            box-shadow: 0 8px 16px rgba(90,90,64,0.25);
            font-weight: 600;
        }
        .sidebar-nav a.active svg { stroke: #fff; }
        .sidebar-divider {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: rgba(26,26,26,0.25);
            font-weight: 700;
            padding: 12px 14px 4px;
        }
        .sidebar-footer {
            border-top: 1px solid rgba(0,0,0,0.06);
            padding-top: 16px;
            margin-top: auto;
        }
        .sidebar-user {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 14px;
            background: rgba(90,90,64,0.05);
            min-height: 44px;
        }
        .sidebar-user-avatar {
            width: 36px; height: 36px;
            background: rgba(90,90,64,0.12);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            color: #5A5A40; flex-shrink: 0;
        }
        .sidebar-user-name { 
            font-size: 0.825rem; 
            font-weight: 600; 
            color: #1A1A1A;
            line-height: 1.2;
        }
        .sidebar-user-role { 
            font-size: 0.7rem; 
            color: rgba(26,26,26,0.4);
            line-height: 1.2;
        }

        /* ══ CONTEÚDO PRINCIPAL ═════════════════════════════════════════ */
        .holk-main {
            flex: 1;
            padding: 32px 28px;
            min-width: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        @media (max-width: 767px) {
            .holk-main { 
                padding: 20px 16px; 
                padding-bottom: 110px;
                overflow-y: auto;
            }
        }

        /* ══ BOTTOM NAV MOBILE — 6 itens ════════════════════════════════ */
        .bottom-nav {
            display: none;
            position: fixed;
            bottom: 0; left: 0; right: 0;
            background: #fff;
            border-top: 1px solid rgba(0,0,0,0.07);
            z-index: 1020;
            padding-bottom: env(safe-area-inset-bottom);
            box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
        }
        @media (max-width: 767px) { 
            .bottom-nav { display: flex; } 
        }
        .bottom-nav a,
        .bottom-nav .mobile-more-button {
            flex: 1 1 20%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 8px 4px;
            min-height: 64px;
            color: rgba(26,26,26,0.42);
            text-decoration: none;
            font-size: clamp(8px, 2.25vw, 10px);
            font-weight: 700;
            text-transform: none;
            letter-spacing: 0;
            line-height: 1.1;
            text-align: center;
            white-space: normal;
            overflow-wrap: anywhere;
            transition: color .2s, background .2s;
        }
        .bottom-nav a:active,
        .bottom-nav a.active,
        .bottom-nav .mobile-more-button:active {
            color: #5A5A40;
            background: rgba(90,90,64,0.06);
        }
        .bottom-nav a:hover,
        .bottom-nav .mobile-more-button:hover { color: #5A5A40; }
        .bottom-nav a:focus-visible,
        .bottom-nav .mobile-more-button:focus-visible { outline: 2px solid #5A5A40; outline-offset: -3px; }
        .bottom-nav a i,
        .bottom-nav .mobile-more-button i { width: 21px; height: 21px; flex: 0 0 auto; }
        .bottom-nav a span,
        .bottom-nav .mobile-more-button span { line-height: 1.1; max-width: 100%; }
        .mobile-menu-trigger { display: none; }
        .mobile-menu-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(26,26,26,.42); backdrop-filter: blur(3px); }
        .mobile-menu-overlay.open { display: block; }
        .mobile-menu-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(88vw, 390px); background: #fff; padding: calc(22px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; box-shadow: -12px 0 40px rgba(0,0,0,.18); }
        .mobile-menu-close { width: 44px; height: 44px; border: 0; border-radius: 14px; background: #F5F5F0; color: #5A5A40; font-size: 24px; cursor: pointer; }
        .mobile-menu-heading { margin: 24px 0 8px; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,26,26,.35); }
        .mobile-menu-link { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 12px 14px; margin: 4px 0; border-radius: 15px; color: rgba(26,26,26,.68); text-decoration: none; font-weight: 600; font-size: .9rem; }
        .mobile-menu-link.active, .mobile-menu-link:active { color: #5A5A40; background: rgba(90,90,64,.09); }
        .mobile-menu-link:focus-visible, .mobile-menu-close:focus-visible { outline: 2px solid #5A5A40; outline-offset: 2px; }
        @media (max-width: 767px) { .mobile-menu-trigger { display: inline-flex; position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 1500; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; border-radius: 14px; background: #fff; color: #5A5A40; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.10); } }

        /* ══ UTILITÁRIOS GERAIS ═════════════════════════════════════════ */
        .btn-primary-holk {
            background: #5A5A40;
            color: #fff;
            padding: 11px 24px;
            border-radius: 14px;
            font-weight: 700;
            font-size: 0.825rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            min-height: 44px;
            justify-content: center;
        }
        .btn-primary-holk:hover {
            background: #4a4a34;
            box-shadow: 0 8px 20px rgba(90,90,64,0.3);
            transform: translateY(-1px);
            color: #fff;
        }
        .btn-primary-holk:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }
        .btn-primary-holk:active {
            transform: translateY(0);
        }

        .btn-ghost-holk {
            background: transparent;
            color: rgba(26,26,26,0.55);
            padding: 11px 24px;
            border-radius: 14px;
            font-weight: 600;
            font-size: 0.825rem;
            border: 1.5px solid rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            min-height: 44px;
            justify-content: center;
        }
        .btn-ghost-holk:hover {
            border-color: #5A5A40;
            color: #5A5A40;
            background: rgba(90,90,64,0.02);
        }
        .btn-ghost-holk:focus-visible {
            outline: 2px solid #5A5A40;
            outline-offset: 2px;
        }

        .btn-danger-holk {
            background: #ef4444;
            color: #fff;
            padding: 10px 18px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.8rem;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 44px;
        }
        .btn-danger-holk:hover { 
            background: #dc2626;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
        }
        .btn-danger-holk:focus-visible {
            outline: 2px solid #7f1d1d;
            outline-offset: 2px;
        }

        .holk-card {
            background: #fff;
            border-radius: 2.5rem;
            border: 1px solid rgba(0,0,0,0.05);
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: box-shadow 0.2s;
            padding: 24px;
        }
        @media (max-width: 767px) {
            .holk-card {
                padding: 16px;
                border-radius: 2rem;
            }
        }
        .holk-card:hover { 
            box-shadow: 0 6px 24px rgba(0,0,0,0.08); 
        }

        .holk-input {
            width: 100%;
            padding: 11px 16px;
            border: 1.5px solid rgba(0,0,0,0.1);
            border-radius: 14px;
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            color: #1A1A1A;
            transition: all 0.2s;
            background: #fff;
            outline: none;
            min-height: 44px;
        }
        .holk-input:focus {
            border-color: #5A5A40;
            box-shadow: 0 0 0 3px rgba(90,90,64,0.1);
        }
        .holk-label {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(26,26,26,0.4);
            display: block;
            margin-bottom: 8px;
        }
        .holk-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            min-height: 24px;
            white-space: nowrap;
        }
        .badge-active   { background: #dcfce7; color: #16a34a; }
        .badge-warning  { background: #fef9c3; color: #ca8a04; }
        .badge-critical { background: #fee2e2; color: #dc2626; }
        .badge-expired  { background: #f1f5f9; color: #64748b; }
        .badge-unknown  { background: #f3f4f6; color: #9ca3af; }

        .page-header { margin-bottom: 2rem; }
        @media (max-width: 767px) {
            .page-header { margin-bottom: 1.5rem; }
        }

        .page-title {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 700;
            color: #1A1A1A;
            margin: 0 0 4px 0;
            line-height: 1.2;
        }
        @media (max-width: 767px) {
            .page-title {
                font-size: 1.5rem;
            }
        }

        .page-subtitle {
            color: rgba(26,26,26,0.4);
            font-size: 0.9rem;
            font-weight: 500;
            line-height: 1.4;
        }
        @media (max-width: 767px) {
            .page-subtitle {
                font-size: 0.85rem;
            }
        }

        /* Modal */
        .holk-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1060;
            align-items: center;
            justify-content: center;
        }
        .holk-modal.open { display: flex; }
        .holk-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(4px);
        }
        .holk-modal-box {
            position: relative;
            background: #fff;
            border-radius: 2.5rem;
            padding: 2rem;
            width: 100%;
            max-width: 500px;
            margin: 16px;
            box-shadow: 0 25px 60px rgba(0,0,0,0.2);
            max-height: 90vh;
            overflow-y: auto;
        }
        @media (max-width: 767px) {
            .holk-modal-box {
                padding: 1.5rem;
                border-radius: 2rem;
            }
        }
        .holk-modal-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        /* Table */
        .holk-table { 
            width: 100%; 
            border-collapse: collapse; 
            font-size: 0.9rem;
        }
        @media (max-width: 767px) {
            .holk-table {
                font-size: 0.85rem;
            }
        }
        .holk-table th {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgba(26,26,26,0.4);
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }
        @media (max-width: 767px) {
            .holk-table th {
                padding: 10px 12px;
                font-size: 0.6rem;
            }
        }
        .holk-table td {
            padding: 16px;
            border-bottom: 1px solid rgba(0,0,0,0.04);
            font-size: 0.9rem;
            color: #1A1A1A;
            vertical-align: middle;
        }
        @media (max-width: 767px) {
            .holk-table td {
                padding: 12px;
                font-size: 0.85rem;
            }
        }
        .holk-table tr:last-child td { border-bottom: none; }
        .holk-table tr:hover td { background: rgba(90,90,64,0.02); }

        /* Stat card */
        .stat-card {
            background: #fff;
            border-radius: 2.5rem;
            border: 1px solid rgba(0,0,0,0.05);
            padding: 2rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: all 0.2s;
        }
        @media (max-width: 767px) {
            .stat-card {
                padding: 1.25rem;
                border-radius: 2rem;
            }
        }
        .stat-card:hover { 
            box-shadow: 0 8px 24px rgba(0,0,0,0.08); 
            transform: translateY(-2px);
        }
        .stat-icon {
            width: 48px; height: 48px;
            border-radius: 16px;
            display: flex; 
            align-items: center; 
            justify-content: center;
            margin-bottom: 1.5rem;
            flex-shrink: 0;
        }
        @media (max-width: 767px) {
            .stat-icon {
                width: 40px;
                height: 40px;
                margin-bottom: 1rem;
            }
        }
        .stat-icon-olive { background: rgba(90,90,64,0.1); color: #5A5A40; }
        .stat-icon-green { background: #dcfce7; color: #16a34a; }
        .stat-icon-red   { background: #fee2e2; color: #dc2626; }
        .stat-icon-blue  { background: #dbeafe; color: #2563eb; }
        .stat-icon-yellow{ background: #fef9c3; color: #ca8a04; }
        .stat-label {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgba(26,26,26,0.4);
            margin-bottom: 8px;
        }
        @media (max-width: 767px) {
            .stat-label {
                font-size: 0.6rem;
                margin-bottom: 6px;
            }
        }
        .stat-value {
            font-family: 'Playfair Display', serif;
            font-size: 2.2rem;
            font-weight: 700;
            color: #1A1A1A;
            line-height: 1;
        }
        @media (max-width: 767px) {
            .stat-value {
                font-size: 1.5rem;
            }
        }

        /* ══ ACESSIBILIDADE — Focus Visible ════════════════════════════ */
        *:focus-visible {
            outline: 2px solid #5A5A40;
            outline-offset: 2px;
        }

        /* ══ RESPONSIVIDADE EXTRA MOBILE ════════════════════════════════ */
        @media (max-width: 360px) {
            .holk-card {
                padding: 12px;
                border-radius: 1.5rem;
            }
            .stat-card {
                padding: 1rem;
            }
            .btn-primary-holk,
            .btn-ghost-holk {
                padding: 10px 16px;
                font-size: 0.75rem;
            }
        }

        /* ══ LANDSCAPE MODE ═════════════════════════════════════════════ */
        @media (max-height: 500px) and (orientation: landscape) {
            .page-title {
                font-size: 1.25rem;
                margin-bottom: 0;
            }
            .page-subtitle {
                font-size: 0.75rem;
            }
            .stat-card {
                padding: 1rem;
            }
        }

        /* ══ SAFE AREAS (iPhone Notch) ══════════════════════════════════ */
        body {
            padding-top: env(safe-area-inset-top);
        }

        .holk-main {
            padding-right: env(safe-area-inset-right);
            padding-left: env(safe-area-inset-left);
        }

        @media (max-width: 767px) {
            .holk-main {
                padding-bottom: calc(110px + env(safe-area-inset-bottom));
            }
        }

        .bottom-nav {
            padding-bottom: env(safe-area-inset-bottom);
        }

        /* ══ PRINT STYLE ════════════════════════════════════════════════ */
        @media print {
            .bottom-nav,
            .holk-sidebar {
                display: none;
            }
            .holk-main {
                padding-bottom: 20px;
            }
        }

/* Theme system */
:root {
    color-scheme: light;
    --bg: #F5F5F0;
    --surface: #FFFFFF;
    --surface-soft: #FAFAF7;
    --text: #1A1A1A;
    --muted: rgba(26,26,26,.55);
    --border: rgba(0,0,0,.08);
    --accent: #5A5A40;
    --accent-hover: #4a4a34;
    --focus: rgba(90,90,64,.18);
}
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #151612;
    --surface: #20221c;
    --surface-soft: #292b23;
    --text: #F5F5F0;
    --muted: rgba(245,245,240,.64);
    --border: rgba(245,245,240,.13);
    --accent: #b8bb83;
    --accent-hover: #d0d39a;
    --focus: rgba(184,187,131,.28);
}
body { background: var(--bg); color: var(--text); transition: background-color .25s ease, color .25s ease; }
.holk-sidebar, .bottom-nav, .mobile-menu-panel, .holk-card, .stat-card { background: var(--surface); color: var(--text); border-color: var(--border); }
.sidebar-brand, .sidebar-user-name, .stat-value, .holk-table td, .holk-input { color: var(--text); }
.sidebar-brand-sub, .sidebar-user-role, .stat-label, .holk-label { color: var(--muted); }
.sidebar-nav a, .bottom-nav a, .bottom-nav .mobile-more-button { color: var(--muted); }
.sidebar-nav a:hover, .bottom-nav a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.holk-input, textarea.holk-input, select.holk-input { background: var(--surface-soft); border-color: var(--border); }
.holk-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.holk-table th { background: var(--surface-soft); color: var(--muted); }
.holk-table td { border-color: var(--border); }
.holk-table tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mobile-menu-close, .mobile-menu-link { background: var(--surface-soft); color: var(--text); }
.mobile-menu-heading { color: var(--muted); }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.08); transition:all .2s ease; }
.theme-toggle:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.theme-toggle-wrap { position:fixed; top:16px; right:70px; z-index:1490; }
@media (min-width:768px) { .theme-toggle-wrap { top:20px; right:24px; } }
@media print { .theme-toggle-wrap { display:none; } }


/* Premiumm client cards */
.premiumm-client-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1rem;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 6px 18px rgba(0,0,0,.035);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.premiumm-client-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 10px 24px rgba(0,0,0,.07); transform: translateY(-1px); }
.premiumm-client-card-missing { border-color: #e7bd68; background: color-mix(in srgb, #fff8e7 82%, var(--surface)); }
[data-theme="dark"] .premiumm-client-card-missing { background: color-mix(in srgb, #60491f 35%, var(--surface)); border-color: #b88d3e; }
.premiumm-field-label { display:flex; align-items:center; gap:.4rem; margin-bottom:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.03em; color:var(--muted); }
.premiumm-phone-required { border-color:#d69b2d !important; box-shadow:0 0 0 3px rgba(214,155,45,.12); }
@media (max-width: 639px) {
    .premiumm-client-card { padding: .9rem; border-radius: 1rem; }
    .premiumm-client-card .holk-input { min-height: 44px; font-size: .95rem; }
}

/* Integrações — acabamento visual */
.integrations-page { max-width: 1180px; }
.integration-page-heading h1 { margin: 0; color: var(--text); font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.35rem, 5vw, 4.25rem); line-height: .98; letter-spacing: -.04em; }
.integration-page-heading p:not(.integration-eyebrow) { max-width: 560px; margin-top: .7rem; color: var(--muted); font-size: .96rem; line-height: 1.55; }
.integration-eyebrow { margin: 0 0 .65rem; color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.integration-key-field { position: relative; display: flex; align-items: center; gap: .55rem; }
.integration-key-field .holk-input { min-width: 0; flex: 1; }
.integration-key-status { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; border-radius: 999px; padding: .5rem .7rem; background: #e8f7ed; color: #19713c; font-size: .7rem; font-weight: 800; }
.integration-help { margin-top: .45rem; color: var(--muted); font-size: .72rem; line-height: 1.45; }
[data-theme="dark"] .integration-key-status { background: #193d29; color: #a4e5ba; }
@media (max-width: 767px) {
    .integrations-page { padding-left: 1rem; padding-right: 1rem; padding-top: 5.2rem; }
    .integration-page-heading h1 { font-size: 2.8rem; }
    .integration-key-field { align-items: stretch; flex-direction: column; }
    .integration-key-status { width: fit-content; }
    .integrations-page .holk-card { border-radius: 1.4rem; padding: 1.15rem; }
}

/* Aprovação manual de pagamentos */
.pending-payments-card { padding: 1.35rem; }
.pending-payments-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.pending-payments-heading h3 { margin:.1rem 0 0; color:var(--text); font-family:'Playfair Display',Georgia,serif; font-size:1.55rem; }
.pending-payments-heading p { margin-top:.35rem; color:var(--muted); font-size:.82rem; line-height:1.45; }
.pending-payments-list { display:grid; gap:.7rem; margin-top:1.2rem; }
.pending-payment-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:1rem; padding:.85rem; border:1px solid var(--border); border-radius:1rem; background:var(--surface-soft); }
.pending-payment-client { display:flex; min-width:0; align-items:center; gap:.7rem; }
.pending-payment-client strong, .pending-payment-client span, .pending-payment-meta strong, .pending-payment-meta span { display:block; }
.pending-payment-client strong { overflow:hidden; color:var(--text); text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; }
.pending-payment-client span, .pending-payment-meta span { margin-top:.2rem; color:var(--muted); font-size:.72rem; }
.pending-payment-avatar { display:flex; width:2.3rem; height:2.3rem; flex-shrink:0; align-items:center; justify-content:center; border-radius:.8rem; background:var(--accent); color:#fff; font-weight:800; }
.pending-payment-meta { text-align:right; }
.pending-payment-meta strong { color:var(--text); font-size:.9rem; }
.btn-approve-payment { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:2.55rem; border:0; border-radius:.8rem; padding:.65rem .9rem; background:#19713c; color:#fff; font-size:.76rem; font-weight:800; cursor:pointer; transition:filter .2s ease, transform .2s ease; }
.btn-approve-payment:hover { filter:brightness(1.08); transform:translateY(-1px); }
@media (max-width: 639px) {
    .pending-payments-card { padding:1rem; }
    .pending-payments-heading { flex-direction:column; }
    .pending-payment-row { grid-template-columns:1fr auto; gap:.75rem; }
    .pending-payment-client { grid-column:1 / -1; }
    .pending-payment-meta { text-align:left; }
    .pending-payment-row form { justify-self:stretch; }
    .btn-approve-payment { width:100%; }
}

/* Pagamentos — compatibilidade com a tela legada e tema global */
.page-header { margin: 0 0 1.5rem; }
.page-title { margin: 0; color: var(--text); font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 4vw, 3.15rem); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.page-subtitle { margin: .55rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.payments-page .holk-card, .page-header + .holk-card { background: var(--surface); color: var(--text); border-color: var(--border); }
.payments-page h3, .payments-page label, .payments-page span, .payments-page p { color: inherit; }
.payments-page .text-\[\#1A1A1A\], .payments-page .text-\[\#1A1A1A\]\/40, .payments-page .text-\[\#1A1A1A\]\/60 { color: var(--text) !important; }
[data-theme="dark"] .page-header + .holk-card .bg-blue-50 { background: #1e304b; }
[data-theme="dark"] .page-header + .holk-card .bg-green-50 { background: #183a27; }
@media (max-width: 639px) {
    .page-header { margin-bottom: 1rem; padding: 0 .25rem; }
    .page-title { font-size: 2.25rem; }
    .page-subtitle { max-width: 34rem; font-size: .84rem; }
}

/* Tema global para páginas públicas e autenticação */
html { background: var(--bg); }
.auth-page { min-height:100vh; background:var(--bg) !important; color:var(--text); transition:background-color .25s ease,color .25s ease; }
.auth-page main, .auth-page .auth-card { background:var(--surface) !important; color:var(--text) !important; border-color:var(--border) !important; }
.auth-page h1, .auth-page h2, .auth-page h3, .auth-page label, .auth-page strong { color:var(--text) !important; }
.auth-page p, .auth-page .muted, .auth-page small { color:var(--muted) !important; }
.auth-page input, .auth-page select, .auth-page textarea { background:var(--surface-soft) !important; color:var(--text) !important; border-color:var(--border) !important; }
.auth-page input::placeholder, .auth-page textarea::placeholder { color:var(--muted) !important; }
.auth-page a:not(.btn-primary-holk) { color:var(--accent) !important; }
.auth-page .theme-toggle-wrap { position:fixed; top:1rem; right:1rem; z-index:20; }
.auth-page .theme-toggle { background:var(--surface); color:var(--text); }
.auth-page .bg-red-50 { background:color-mix(in srgb, #ef4444 12%, var(--surface)) !important; }
.auth-page .text-red-700 { color:#dc2626 !important; }
.auth-page .bg-green-50 { background:color-mix(in srgb, #22c55e 12%, var(--surface)) !important; }
.auth-page .text-green-700 { color:#15803d !important; }
[data-theme="dark"] .auth-page .text-red-700 { color:#fca5a5 !important; }
[data-theme="dark"] .auth-page .text-green-700 { color:#86efac !important; }
[data-theme="dark"] .auth-page .shadow-sm, [data-theme="dark"] .auth-page .shadow { box-shadow:0 18px 45px rgba(0,0,0,.28) !important; }

/* Compatibilidade global para classes Tailwind e estilos legados */
[data-theme="dark"] [class~="text-[#1A1A1A]"],
[data-theme="dark"] [class*="text-[#1A1A1A]/"] { color: var(--text) !important; }
[data-theme="dark"] [class~="text-black"],
[data-theme="dark"] [class*="text-black/"] { color: var(--text) !important; }
[data-theme="dark"] [class~="bg-white"],
[data-theme="dark"] [class~="bg-[#FAFAF7]"],
[data-theme="dark"] [class~="bg-[#F5F5F0]"] { background-color: var(--surface) !important; }
[data-theme="dark"] [class~="border-black/5"],
[data-theme="dark"] [class~="border-black/10"],
[data-theme="dark"] [class~="border-black/8"] { border-color: var(--border) !important; }
[data-theme="dark"] input[style*="background:#F5F5F0"],
[data-theme="dark"] textarea[style*="background:#F5F5F0"],
[data-theme="dark"] select[style*="background:#F5F5F0"],
[data-theme="dark"] div[style*="background:#F5F5F0"] { background: var(--surface-soft) !important; color: var(--text) !important; }
[data-theme="dark"] [style*="color:rgba(26,26,26"] { color: var(--muted) !important; }
[data-theme="dark"] .holk-table th, [data-theme="dark"] .holk-table td { color: var(--text); }
[data-theme="dark"] .holk-table th { background: var(--surface-soft); }
[data-theme="dark"] .modal-content, [data-theme="dark"] .modal, [data-theme="dark"] .modal-box { background: var(--surface) !important; color: var(--text) !important; }
[data-theme="dark"] .alert, [data-theme="dark"] .toast { color: var(--text); }

/* Sistema visual unificado — tokens semânticos */
:root {
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-soft: #eef1f6;
    --surface-raised: #ffffff;
    --text: #172033;
    --muted: #637084;
    --border: #dfe5ee;
    --accent: #5867d8;
    --accent-hover: #4655c4;
    --accent-soft: #e9ecff;
    --success: #168457;
    --success-soft: #e3f6ed;
    --warning: #b77912;
    --warning-soft: #fff3d8;
    --danger: #c43d4b;
    --danger-soft: #fde8eb;
    --info: #2775c9;
    --info-soft: #e4f0ff;
    --focus: #8390ff;
    color-scheme: light;
}
html[data-theme="dark"] {
    --bg: #0e1524;
    --surface: #172238;
    --surface-soft: #202d45;
    --surface-raised: #1c2940;
    --text: #edf2ff;
    --muted: #a9b7cd;
    --border: #30415e;
    --accent: #aab4ff;
    --accent-hover: #c0c7ff;
    --accent-soft: #2d3764;
    --success: #62d39d;
    --success-soft: #183d35;
    --warning: #f0c56a;
    --warning-soft: #493b20;
    --danger: #ff8995;
    --danger-soft: #4d2934;
    --info: #82baff;
    --info-soft: #203c5d;
    --focus: #b8c0ff;
    color-scheme: dark;
}
html, body { background: var(--bg); color: var(--text); }
body, .holk-layout, .holk-main { transition: background-color .2s ease, color .2s ease; }
.holk-sidebar, .bottom-nav, .mobile-menu-panel { background: var(--surface) !important; border-color: var(--border) !important; }
.sidebar-brand, .sidebar-user-avatar { color: var(--accent) !important; }
.sidebar-brand-sub, .sidebar-divider, .sidebar-user-role { color: var(--muted) !important; }
.sidebar-user-name { color: var(--text) !important; }
.sidebar-nav a, .bottom-nav a, .bottom-nav .mobile-more-button { color: var(--muted) !important; }
.sidebar-nav a:hover, .bottom-nav a:hover, .bottom-nav .mobile-more-button:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.sidebar-nav a.active { background: var(--accent) !important; color: #fff !important; }
.sidebar-nav a.active svg { stroke: #fff !important; }
.holk-card, .card, .modal-content, .modal-box { background: var(--surface) !important; color: var(--text); border-color: var(--border) !important; }
.holk-card h1, .holk-card h2, .holk-card h3, .holk-card h4, .card h1, .card h2, .card h3, .card h4 { color: var(--text); }
.holk-card p, .card p, .description, .help-text, .text-muted { color: var(--muted); }
.holk-input, .holk-select, .holk-textarea, input, select, textarea { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
.holk-input::placeholder, input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.holk-input:focus, .holk-select:focus, .holk-textarea:focus, input:focus, select:focus, textarea:focus { border-color: var(--focus) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); outline: none; }
.holk-table, table { color: var(--text); border-color: var(--border); }
.holk-table th, table th { background: var(--surface-soft); color: var(--muted); border-color: var(--border); }
.holk-table td, table td { color: var(--text); border-color: var(--border); }
.holk-table tr:hover, table tr:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
svg, [data-lucide] { color: currentColor; }
.text-success, .status-success { color: var(--success) !important; }
.text-warning, .status-warning { color: var(--warning) !important; }
.text-danger, .status-danger { color: var(--danger) !important; }
.bg-success-soft { background: var(--success-soft) !important; }
.bg-warning-soft { background: var(--warning-soft) !important; }
.bg-danger-soft { background: var(--danger-soft) !important; }
.bg-info-soft { background: var(--info-soft) !important; }
[data-theme="dark"] [class~="bg-white"], [data-theme="dark"] [class~="bg-[#FAFAF7]"], [data-theme="dark"] [class~="bg-[#F5F5F0]"] { background-color: var(--surface) !important; }
[data-theme="dark"] [class~="text-[#1A1A1A]"], [data-theme="dark"] [class*="text-[#1A1A1A]/"], [data-theme="dark"] [class~="text-black"], [data-theme="dark"] [class*="text-black/"] { color: var(--text) !important; }
[data-theme="dark"] [class~="border-black/5"], [data-theme="dark"] [class~="border-black/10"], [data-theme="dark"] [class~="border-black/20"] { border-color: var(--border) !important; }
[data-theme="dark"] [style*="background:#F5F5F0"], [data-theme="dark"] [style*="background: #F5F5F0"], [data-theme="dark"] [style*="background-color:#F5F5F0"] { background: var(--surface-soft) !important; }
[data-theme="dark"] [style*="color:rgba(26,26,26"], [data-theme="dark"] [style*="color: #1A1A1A"] { color: var(--muted) !important; }

/* Tema alternativo Aurora */
html[data-theme="aurora"] {
    --bg: #f4f1ff;
    --surface: #ffffff;
    --surface-soft: #eeeaff;
    --surface-raised: #ffffff;
    --text: #241b3a;
    --muted: #6e6384;
    --border: #ded5f3;
    --accent: #7956d8;
    --accent-hover: #6240bf;
    --accent-soft: #eee6ff;
    --success: #14856a;
    --success-soft: #e1f6ef;
    --warning: #aa7211;
    --warning-soft: #fff0d0;
    --danger: #bd3f67;
    --danger-soft: #fde7ef;
    --info: #397ac2;
    --info-soft: #e6f0ff;
    --focus: #9b7bf1;
    color-scheme: light;
}
html[data-theme="aurora"] .holk-sidebar,
html[data-theme="aurora"] .bottom-nav { background: linear-gradient(180deg, #ffffff 0%, #f4f0ff 100%) !important; }
html[data-theme="aurora"] .holk-card { box-shadow: 0 12px 30px rgba(93, 62, 160, .09); }
html[data-theme="aurora"] .sidebar-nav a.active { background: linear-gradient(135deg, #7956d8, #a071e9) !important; }
html[data-theme="aurora"] .theme-toggle { color: #7956d8; border-color: #ded5f3; }
/* Correções finais de contraste para páginas com utilitários antigos */
[data-theme="dark"] .holk-main .text-gray-400, [data-theme="dark"] .holk-main .text-gray-500,
[data-theme="dark"] .holk-main .text-gray-600, [data-theme="dark"] .holk-main .text-slate-400,
[data-theme="dark"] .holk-main .text-slate-500, [data-theme="dark"] .holk-main .text-slate-600 { color: var(--muted) !important; }
[data-theme="dark"] .holk-main .text-gray-700, [data-theme="dark"] .holk-main .text-gray-800,
[data-theme="dark"] .holk-main .text-gray-900, [data-theme="dark"] .holk-main .text-slate-700,
[data-theme="dark"] .holk-main .text-slate-800, [data-theme="dark"] .holk-main .text-slate-900 { color: var(--text) !important; }
[data-theme="dark"] .holk-main .bg-gray-50, [data-theme="dark"] .holk-main .bg-gray-100,
[data-theme="dark"] .holk-main .bg-slate-50, [data-theme="dark"] .holk-main .bg-slate-100 { background: var(--surface-soft) !important; }
[data-theme="aurora"] .holk-main .text-gray-400, [data-theme="aurora"] .holk-main .text-gray-500,
[data-theme="aurora"] .holk-main .text-gray-600, [data-theme="aurora"] .holk-main .text-slate-400,
[data-theme="aurora"] .holk-main .text-slate-500, [data-theme="aurora"] .holk-main .text-slate-600 { color: var(--muted) !important; }
[data-theme="aurora"] .holk-main .text-gray-700, [data-theme="aurora"] .holk-main .text-gray-800,
[data-theme="aurora"] .holk-main .text-gray-900, [data-theme="aurora"] .holk-main .text-slate-700,
[data-theme="aurora"] .holk-main .text-slate-800, [data-theme="aurora"] .holk-main .text-slate-900 { color: var(--text) !important; }
[data-theme="aurora"] .holk-main .bg-gray-50, [data-theme="aurora"] .holk-main .bg-gray-100,
[data-theme="aurora"] .holk-main .bg-slate-50, [data-theme="aurora"] .holk-main .bg-slate-100 { background: var(--surface-soft) !important; }
.shortcut-label, .quick-action-label { color: var(--text) !important; }


/* Holk Master Visual System — camada final de normalização */
:root {
  color-scheme: light;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-soft: #eef2f7;
  --surface-raised: #ffffff;
  --text: #172033;
  --muted: #647187;
  --border: #dce3ed;
  --accent: #4f46c8;
  --accent-hover: #3f37ad;
  --accent-soft: #e9e8ff;
  --success: #168457;
  --success-soft: #dff7eb;
  --warning: #a86d0a;
  --warning-soft: #fff0ca;
  --danger: #bd3549;
  --danger-soft: #fde4e8;
  --info: #276db6;
  --info-soft: #e2efff;
  --focus: #655ce6;
  --shadow: 0 12px 32px rgba(27, 38, 65, .08);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1424;
  --surface: #151f33;
  --surface-soft: #1d2a40;
  --surface-raised: #1a2740;
  --text: #f1f5ff;
  --muted: #aebbd0;
  --border: #31415d;
  --accent: #9b9aff;
  --accent-hover: #b7b5ff;
  --accent-soft: #2d2d59;
  --success: #59d69a;
  --success-soft: #173d31;
  --warning: #f4c667;
  --warning-soft: #493a1c;
  --danger: #ff8795;
  --danger-soft: #4a202b;
  --info: #82b9ff;
  --info-soft: #1a3858;
  --focus: #b5b2ff;
  --shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
html[data-theme="aurora"] {
  color-scheme: light;
  --bg: #f3f1ff;
  --surface: #ffffff;
  --surface-soft: #eeebff;
  --surface-raised: #ffffff;
  --text: #241b3a;
  --muted: #6b6281;
  --border: #ddd5f2;
  --accent: #7556d8;
  --accent-hover: #5f42be;
  --accent-soft: #eee6ff;
  --success: #138260;
  --success-soft: #e0f7ef;
  --warning: #9a650b;
  --warning-soft: #fff0cf;
  --danger: #bd3f67;
  --danger-soft: #fde5ef;
  --info: #3978bc;
  --info-soft: #e4f0ff;
  --focus: #8b72e8;
  --shadow: 0 14px 34px rgba(93, 62, 160, .12);
}
html, body { min-height: 100%; }
body { background: var(--bg) !important; color: var(--text) !important; }
*, *::before, *::after { border-color: var(--border); }
.holk-main, .main-content, main { color: var(--text); }
.holk-card, .stat-card, .card, .modal-content, .panel, .table-card { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; box-shadow: var(--shadow); }
.holk-card p, .stat-card p, .card p, .description, .meta, .text-muted { color: var(--muted); }
input, select, textarea, .holk-input, .holk-select, .holk-textarea { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
input::placeholder, textarea::placeholder { color: var(--muted) !important; opacity: .9; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 38%, transparent); outline-offset: 2px; }
table, .holk-table { color: var(--text) !important; }
table th, .holk-table th { background: var(--surface-soft) !important; color: var(--muted) !important; border-color: var(--border) !important; }
table td, .holk-table td { color: var(--text) !important; border-color: var(--border) !important; }
svg, [data-lucide] { color: currentColor; stroke: currentColor; }
.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.icon-sm { width: 20px; height: 20px; }
.icon-md { width: 19px; height: 19px; }
.icon-lg { width: 24px; height: 24px; }
.text-black, .text-gray-700, .text-gray-800, .text-gray-900, .text-slate-700, .text-slate-800, .text-slate-900, [class*="text-[#1A1A1A]"] { color: var(--text) !important; }
.text-gray-400, .text-gray-500, .text-gray-600, .text-slate-400, .text-slate-500, .text-slate-600 { color: var(--muted) !important; }
.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100 { background-color: var(--surface) !important; }
.border-black\/5, .border-black\/10, .border-black\/20 { border-color: var(--border) !important; }
.shortcut-label, .quick-action-label { color: var(--text) !important; }
.holk-sidebar, .bottom-nav, .mobile-menu-panel { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.sidebar-divider, .sidebar-brand-sub { color: var(--muted) !important; }
.sidebar-nav a, .bottom-nav a, .mobile-menu-nav a { color: var(--text); }
.sidebar-nav a:hover, .bottom-nav a:hover, .mobile-menu-nav a:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.sidebar-nav a.active, .bottom-nav a.active { background: var(--accent) !important; color: #fff !important; }
.sidebar-nav a.active svg, .bottom-nav a.active svg { stroke: currentColor; }
.alert, [role="alert"] { color: var(--text); background: var(--surface-soft); border-color: var(--border); }
@media (max-width: 767px) {
  .holk-main, .main-content, main { padding-bottom: 76px; }
  .holk-table-wrap, .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .holk-card, .stat-card, .card { border-radius: 1.25rem; }
  .action-row, .card-actions { flex-wrap: wrap; gap: .625rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* Compatibilidade de páginas independentes e variáveis legadas */
:root, html[data-theme="light"] {
  --olive: var(--accent);
  --line: var(--border);
  --green: var(--success);
  --amber: var(--warning);
}
html[data-theme="dark"], html[data-theme="aurora"] {
  --olive: var(--accent);
  --line: var(--border);
  --green: var(--success);
  --amber: var(--warning);
}
html[data-theme="dark"] .import-shell .card,
html[data-theme="aurora"] .import-shell .card,
html[data-theme="dark"] .import-shell .card-header,
html[data-theme="aurora"] .import-shell .card-header,
html[data-theme="dark"] .import-shell .form-control,
html[data-theme="aurora"] .import-shell .form-control,
html[data-theme="dark"] .import-shell .btn-outline-secondary,
html[data-theme="aurora"] .import-shell .btn-outline-secondary,
html[data-theme="dark"] .secure-label,
html[data-theme="aurora"] .secure-label { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .import-shell .info-box,
html[data-theme="aurora"] .import-shell .info-box,
html[data-theme="dark"] .import-shell pre,
html[data-theme="aurora"] .import-shell pre,
html[data-theme="dark"] .import-shell .file-input { background: var(--surface-soft) !important; color: var(--text) !important; }
html[data-theme="dark"] .import-shell .alert,
html[data-theme="aurora"] .import-shell .alert { color: var(--text) !important; background: var(--surface-soft) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .page-shell .card,
html[data-theme="aurora"] .page-shell .card { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .page-shell .pill,
html[data-theme="aurora"] .page-shell .pill,
html[data-theme="dark"] .page-shell .summary,
html[data-theme="aurora"] .page-shell .summary { background: var(--surface-soft) !important; color: var(--text) !important; }
html[data-theme="dark"] .page-shell .hero,
html[data-theme="aurora"] .page-shell .hero { background: var(--accent) !important; }
@media (max-width: 639px) {
  .import-shell .row { display: block; }
  .import-shell .row > [class*="col-"] { margin-bottom: 14px; }
}


/* Correção final de utilitários legados e comandos internos não expostos */
[class*="text-black/"] { color: var(--muted) !important; }
[class*="text-gray-"], [class*="text-slate-"] { color: var(--muted) !important; }
[class*="text-[var(--text)]"] { color: var(--text) !important; }
[class*="bg-[#FAFAF7]"], [class*="bg-[#F5F5F0]"], [class*="bg-white"] { background-color: var(--surface) !important; }
[class*="border-black/"] { border-color: var(--border) !important; }
.btn-primary-holk, .btn-primary, button[type="submit"].btn-primary-holk { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.btn-primary-holk:hover, .btn-primary:hover { background: var(--accent-hover) !important; color: #fff !important; }
.btn-ghost-holk { color: var(--text) !important; border-color: var(--border) !important; background: transparent !important; }
.btn-ghost-holk:hover { color: var(--accent) !important; border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.btn-danger-holk { background: var(--danger) !important; color: #fff !important; }
.btn-danger-holk:hover { background: color-mix(in srgb, var(--danger) 82%, #000) !important; }
.system-status-value { display: block; margin-top: .25rem; padding: .6rem .7rem; border-radius: .6rem; background: var(--surface-soft); color: var(--muted); font-size: .75rem; }
html[data-theme="dark"] .text-white\/70, html[data-theme="dark"] .text-white\/60, html[data-theme="dark"] .text-white\/50 { color: rgba(255,255,255,.78) !important; }

/* Evolution instance settings */
.theme-setting{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.theme-setting:hover{border-color:var(--accent);background:var(--surface)}
.theme-setting input{margin-top:.2rem;accent-color:var(--accent)}
.theme-setting strong{display:block;font-size:.82rem;color:var(--text)}
.theme-setting small{display:block;margin-top:.2rem;font-size:.72rem;color:var(--muted);line-height:1.45}
.instance-icon{color:var(--accent);stroke-width:2}
.holk-modal-title .btn-icon-holk{color:var(--muted)}
.holk-modal-title .btn-icon-holk:hover{color:var(--text)}

/* Modal Configurar — switches temáticos para substituir a caixa nativa */
.theme-setting{position:relative;min-height:72px;align-items:center;padding:1rem 1rem 1rem 3.65rem;border-radius:16px;box-shadow:0 1px 0 color-mix(in srgb,var(--border) 45%,transparent);}
.theme-setting input[type="checkbox"]{position:absolute;left:1rem;top:50%;width:38px;height:22px;margin:0;transform:translateY(-50%);appearance:none;-webkit-appearance:none;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s;}
.theme-setting input[type="checkbox"]::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--muted);box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .18s,background .18s;}
.theme-setting input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent);}
.theme-setting input[type="checkbox"]:checked::after{transform:translateX(16px);background:#fff;}
.theme-setting input[type="checkbox"]:focus-visible{outline:3px solid var(--accent-soft);outline-offset:3px;}
.theme-setting:has(input[type="checkbox"]:checked){border-color:color-mix(in srgb,var(--accent) 65%,var(--border));background:color-mix(in srgb,var(--accent-soft) 42%,var(--surface-soft));}
.theme-setting:has(input[type="checkbox"]:checked) strong{color:var(--accent);}
@media (max-width:767px){.theme-setting{min-height:68px;padding-left:3.55rem}.theme-setting small{font-size:.7rem}}

/* ═══════════════════════════════════════════════════════════════════════
   PALETAS DE TEMA
   Cada tema redefine apenas as variáveis; nenhum componente precisa saber
   que o tema existe. Para criar um tema novo basta copiar um bloco abaixo
   e registrar o nome em js/theme.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* Cores semânticas compartilhadas pelos temas claros */
html[data-theme="esmeralda"],
html[data-theme="coral"],
html[data-theme="oceano"],
html[data-theme="sepia"] {
    --success: #168457;
    --success-soft: #e3f6ed;
    --warning: #b77912;
    --warning-soft: #fff3d8;
    --danger: #c43d4b;
    --danger-soft: #fde8eb;
    --info: #2775c9;
    --info-soft: #e4f0ff;
    color-scheme: light;
}

/* Cores semânticas compartilhadas pelos temas escuros */
html[data-theme="onyx"],
html[data-theme="dracula"],
html[data-theme="floresta"],
html[data-theme="vinho"] {
    --success: #62d39d;
    --success-soft: #183d35;
    --warning: #f0c56a;
    --warning-soft: #493b20;
    --danger: #ff8995;
    --danger-soft: #4d2934;
    --info: #82baff;
    --info-soft: #203c5d;
    color-scheme: dark;
}

html[data-theme="esmeralda"] {
    --bg: #f1f8f4;
    --surface: #ffffff;
    --surface-soft: #e4f1ea;
    --surface-raised: #ffffff;
    --text: #0f2620;
    --muted: #5a7568;
    --border: #cfe6da;
    --accent: #0e845b;
    --accent-hover: #0b7050;
    --accent-soft: #dcf3e8;
    --focus: #3fb488;
}

html[data-theme="coral"] {
    --bg: #fdf4f2;
    --surface: #ffffff;
    --surface-soft: #fbe7e3;
    --surface-raised: #ffffff;
    --text: #33201c;
    --muted: #84665f;
    --border: #f3d7d0;
    --accent: #c84657;
    --accent-hover: #b03a4a;
    --accent-soft: #fde4e8;
    --focus: #e87b87;
}

html[data-theme="oceano"] {
    --bg: #eef7fb;
    --surface: #ffffff;
    --surface-soft: #dbedf6;
    --surface-raised: #ffffff;
    --text: #0c2430;
    --muted: #55707e;
    --border: #c9e0ec;
    --accent: #0d7ea8;
    --accent-hover: #0a6689;
    --accent-soft: #daeffa;
    --focus: #3fa9d1;
}

html[data-theme="sepia"] {
    --bg: #f7f2e7;
    --surface: #fffcf5;
    --surface-soft: #efe5d2;
    --surface-raised: #fffcf5;
    --text: #2e2718;
    --muted: #6f6350;
    --border: #e1d5bc;
    --accent: #9a6b18;
    --accent-hover: #855a12;
    --accent-soft: #f3e6cc;
    --focus: #c99a3f;
}

html[data-theme="onyx"] {
    --bg: #000000;
    --surface: #0d0d10;
    --surface-soft: #17171c;
    --surface-raised: #121217;
    --text: #f2f2f5;
    --muted: #9a9aa6;
    --border: #28282f;
    --accent: #8ab4ff;
    --accent-hover: #a8c8ff;
    --accent-soft: #16233a;
    --focus: #9cc0ff;
}

html[data-theme="dracula"] {
    --bg: #1a1626;
    --surface: #241d38;
    --surface-soft: #2e2647;
    --surface-raised: #281f3d;
    --text: #f1ecff;
    --muted: #b0a3cd;
    --border: #3f3560;
    --accent: #c79bff;
    --accent-hover: #d9b8ff;
    --accent-soft: #38295c;
    --focus: #cbaaff;
}

html[data-theme="floresta"] {
    --bg: #0b1712;
    --surface: #132420;
    --surface-soft: #1b322b;
    --surface-raised: #162a25;
    --text: #e8f5ee;
    --muted: #9dbcae;
    --border: #28483e;
    --accent: #6fd7a4;
    --accent-hover: #8fe5ba;
    --accent-soft: #1a4234;
    --focus: #7fdfb0;
}

html[data-theme="vinho"] {
    --bg: #170e12;
    --surface: #251820;
    --surface-soft: #32212b;
    --surface-raised: #2a1b24;
    --text: #fbecf1;
    --muted: #c3a0ae;
    --border: #4a3040;
    --accent: #f08fa8;
    --accent-hover: #f7aec1;
    --accent-soft: #45202f;
    --focus: #f2a0b5;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPATIBILIDADE COM UTILITÁRIOS ANTIGOS
   Várias telas ainda usam classes fixas (bg-white, text-gray-700) e estilos
   inline com as cores originais. Antes essas correções existiam apenas para
   "dark" e "aurora", o que obrigaria a duplicar tudo a cada tema novo.
   Agora valem para qualquer tema diferente do claro padrão.
   ═══════════════════════════════════════════════════════════════════════ */
html:not([data-theme="light"]) [class~="bg-white"],
html:not([data-theme="light"]) [class~="bg-[#FAFAF7]"],
html:not([data-theme="light"]) [class~="bg-[#F5F5F0]"] { background-color: var(--surface) !important; }

html:not([data-theme="light"]) [class~="text-[#1A1A1A]"],
html:not([data-theme="light"]) [class*="text-[#1A1A1A]/"],
html:not([data-theme="light"]) [class~="text-black"],
html:not([data-theme="light"]) [class*="text-black/"] { color: var(--text) !important; }

html:not([data-theme="light"]) [class~="border-black/5"],
html:not([data-theme="light"]) [class~="border-black/8"],
html:not([data-theme="light"]) [class~="border-black/10"],
html:not([data-theme="light"]) [class~="border-black/20"] { border-color: var(--border) !important; }

html:not([data-theme="light"]) [style*="background:#F5F5F0"],
html:not([data-theme="light"]) [style*="background: #F5F5F0"],
html:not([data-theme="light"]) [style*="background-color:#F5F5F0"] { background: var(--surface-soft) !important; }

html:not([data-theme="light"]) [style*="color:rgba(26,26,26"],
html:not([data-theme="light"]) [style*="color: #1A1A1A"] { color: var(--muted) !important; }

html:not([data-theme="light"]) .holk-main .text-gray-400,
html:not([data-theme="light"]) .holk-main .text-gray-500,
html:not([data-theme="light"]) .holk-main .text-gray-600,
html:not([data-theme="light"]) .holk-main .text-slate-400,
html:not([data-theme="light"]) .holk-main .text-slate-500,
html:not([data-theme="light"]) .holk-main .text-slate-600 { color: var(--muted) !important; }

html:not([data-theme="light"]) .holk-main .text-gray-700,
html:not([data-theme="light"]) .holk-main .text-gray-800,
html:not([data-theme="light"]) .holk-main .text-gray-900,
html:not([data-theme="light"]) .holk-main .text-slate-700,
html:not([data-theme="light"]) .holk-main .text-slate-800,
html:not([data-theme="light"]) .holk-main .text-slate-900 { color: var(--text) !important; }

html:not([data-theme="light"]) .holk-main .bg-gray-50,
html:not([data-theme="light"]) .holk-main .bg-gray-100,
html:not([data-theme="light"]) .holk-main .bg-slate-50,
html:not([data-theme="light"]) .holk-main .bg-slate-100 { background: var(--surface-soft) !important; }

/* Ícones coloridos de cards (bg-blue-50 etc.) nos temas escuros */
html[data-theme="onyx"] .bg-blue-50,
html[data-theme="dracula"] .bg-blue-50,
html[data-theme="floresta"] .bg-blue-50,
html[data-theme="vinho"] .bg-blue-50 { background: var(--info-soft) !important; }
html[data-theme="onyx"] .bg-green-50,
html[data-theme="dracula"] .bg-green-50,
html[data-theme="floresta"] .bg-green-50,
html[data-theme="vinho"] .bg-green-50 { background: var(--success-soft) !important; }
html[data-theme="onyx"] .bg-indigo-50,
html[data-theme="dracula"] .bg-indigo-50,
html[data-theme="floresta"] .bg-indigo-50,
html[data-theme="vinho"] .bg-indigo-50 { background: var(--accent-soft) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SELETOR DE TEMAS
   ═══════════════════════════════════════════════════════════════════════ */
.theme-panel {
    position: fixed;
    top: 68px;
    right: 16px;
    width: 268px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(0,0,0,.18);
    padding: 16px;
    z-index: 1495;
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.theme-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
@media (min-width: 768px) {
    .theme-panel { top: 76px; right: 24px; }
}
.theme-panel-heading {
    font-family: 'Playfair Display', serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
}
.theme-panel-group {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--muted);
    margin: 14px 0 8px;
}
.theme-panel-group:first-of-type { margin-top: 0; }
.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.theme-swatch {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: .76rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    min-height: 44px;
    transition: border-color .15s ease, transform .15s ease;
}
.theme-swatch:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-swatch[aria-checked="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
.theme-swatch-dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.12);
    /* Metade fundo, metade cor de destaque: mostra o tema sem precisar aplicá-lo. */
    background: linear-gradient(135deg, var(--sw-bg) 0 50%, var(--sw-accent) 50% 100%);
}
.theme-swatch-name { line-height: 1.2; }
.theme-panel-note {
    font-size: .66rem;
    color: var(--muted);
    margin: 14px 0 0;
    line-height: 1.45;
}
@media print { .theme-panel { display: none; } }

/* Telas com shells próprios (importação, páginas independentes) precisavam de
   regra por tema. Generalizado para qualquer tema que não seja o claro padrão. */
html:not([data-theme="light"]) {
  --olive: var(--accent);
  --line: var(--border);
  --green: var(--success);
  --amber: var(--warning);
}
html:not([data-theme="light"]) .import-shell .card,
html:not([data-theme="light"]) .import-shell .card-header,
html:not([data-theme="light"]) .import-shell .form-control,
html:not([data-theme="light"]) .import-shell .btn-outline-secondary,
html:not([data-theme="light"]) .secure-label { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
html:not([data-theme="light"]) .import-shell .info-box,
html:not([data-theme="light"]) .import-shell pre,
html:not([data-theme="light"]) .import-shell .file-input { background: var(--surface-soft) !important; color: var(--text) !important; }
html:not([data-theme="light"]) .import-shell .alert { color: var(--text) !important; background: var(--surface-soft) !important; border-color: var(--border) !important; }
html:not([data-theme="light"]) .page-shell .card { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
html:not([data-theme="light"]) .page-shell .pill,
html:not([data-theme="light"]) .page-shell .summary { background: var(--surface-soft) !important; color: var(--text) !important; }
html:not([data-theme="light"]) .page-shell .hero { background: var(--accent) !important; }
html[data-theme="dark"] .text-white\/70, html[data-theme="dark"] .text-white\/60, html[data-theme="dark"] .text-white\/50,
html[data-theme="onyx"] .text-white\/70, html[data-theme="onyx"] .text-white\/60, html[data-theme="onyx"] .text-white\/50,
html[data-theme="dracula"] .text-white\/70, html[data-theme="dracula"] .text-white\/60, html[data-theme="dracula"] .text-white\/50,
html[data-theme="floresta"] .text-white\/70, html[data-theme="floresta"] .text-white\/60, html[data-theme="floresta"] .text-white\/50,
html[data-theme="vinho"] .text-white\/70, html[data-theme="vinho"] .text-white\/60, html[data-theme="vinho"] .text-white\/50 { color: rgba(255,255,255,.78) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   TEXTO SOBRE COR SÓLIDA
   Nos temas escuros o --accent é claro (serve de cor de texto sobre fundo
   escuro). Botões e item ativo do menu pintavam esse tom claro com texto
   branco por cima, dando contraste ~2:1 — ilegível. --on-accent define a cor
   que vai EM CIMA do accent e inverte nos temas escuros.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --on-accent: #ffffff; --on-danger: #ffffff; }
html[data-theme="dark"]     { --on-accent: #0e1524; --on-danger: #3a1119; }
html[data-theme="onyx"]     { --on-accent: #06101f; --on-danger: #33101a; }
html[data-theme="dracula"]  { --on-accent: #1a1626; --on-danger: #3a1420; }
html[data-theme="floresta"] { --on-accent: #08150f; --on-danger: #3a1119; }
html[data-theme="vinho"]    { --on-accent: #170e12; --on-danger: #33101a; }

.sidebar-nav a.active { background: var(--accent) !important; color: var(--on-accent) !important; }
.sidebar-nav a.active svg { stroke: var(--on-accent) !important; }
.bottom-nav a.active { color: var(--accent) !important; }
.btn-primary-holk, .btn-primary, button[type="submit"].btn-primary-holk { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
.btn-primary-holk:hover, .btn-primary:hover { background: var(--accent-hover) !important; color: var(--on-accent) !important; }
.btn-primary-holk svg, .btn-primary svg { stroke: var(--on-accent) !important; }
.btn-danger-holk { background: var(--danger) !important; color: var(--on-danger) !important; }
.btn-danger-holk:hover { background: color-mix(in srgb, var(--danger) 82%, #000) !important; color: var(--on-danger) !important; }
html:not([data-theme="light"]) .page-shell .hero { background: var(--accent) !important; color: var(--on-accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MENU LATERAL — GRUPOS RECOLHÍVEIS
   O botão pai usa exatamente a mesma caixa dos links para o menu não
   "pular" visualmente; só ganha a seta à direita.
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar-nav .nav-group-toggle,
.mobile-menu-nav .nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 2px;
    min-height: 44px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.nav-group-toggle > span { flex: 1; min-width: 0; }
.nav-group-toggle svg { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.5; }
.nav-group-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-group-toggle.open { color: var(--accent); background: var(--accent-soft); }
.nav-chevron { transition: transform .2s ease; opacity: .7; }
.nav-group-toggle.open .nav-chevron { transform: rotate(180deg); }

/* Recolhido por padrão. A animação usa grid-template-rows 0fr -> 1fr, que
   anima até a altura real do conteúdo sem precisar chutar um max-height.
   Exige um único filho com overflow:hidden — daí o .nav-sub-inner. */
.nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
    position: relative;
    margin-left: 21px;
}
.nav-sub.open { grid-template-rows: 1fr; }
.nav-sub-inner { overflow: hidden; padding-left: 15px; }
/* Linha vertical do grupo. Fica no elemento externo para não ser cortada
   pelo overflow do wrapper interno. */
.nav-sub::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 16px;
    width: 1px;
    background: var(--border);
    opacity: 0;
    transition: opacity .2s ease;
}
.nav-sub.open::before { opacity: 1; }

.sidebar-nav .nav-sub-link,
.mobile-menu-nav .nav-sub-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    position: relative;
    padding: 9px 12px;
    margin: 2px 0;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--muted) !important;
    text-decoration: none;
    min-height: 40px;
}
/* Tracinho que liga o item à linha vertical do grupo */
.sidebar-nav .nav-sub-link::before,
.mobile-menu-nav .nav-sub-link::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    width: 11px;
    height: 1px;
    background: var(--border);
}
.sidebar-nav .nav-sub-link svg,
.mobile-menu-nav .nav-sub-link svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 1.6; }
.sidebar-nav .nav-sub-link:hover,
.mobile-menu-nav .nav-sub-link:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.sidebar-nav .nav-sub-link.active,
.mobile-menu-nav .nav-sub-link.active {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: 600;
}
.sidebar-nav .nav-sub-link.active svg,
.mobile-menu-nav .nav-sub-link.active svg { stroke: var(--accent) !important; }

/* Gaveta do celular: mesmos blocos, respiro maior para o toque */
.mobile-menu-nav .nav-group-toggle {
    min-height: 50px;
    padding: 12px 14px;
    margin: 4px 0;
    border-radius: 15px;
    background: var(--surface-soft);
    font-weight: 600;
    font-size: .9rem;
}
.mobile-menu-nav .nav-group-toggle.open { background: var(--accent-soft); }
.mobile-menu-nav .nav-group-toggle svg { width: 20px; height: 20px; }
.mobile-menu-nav .nav-group-toggle .nav-chevron { width: 18px; height: 18px; }
.mobile-menu-nav .nav-sub { margin-left: 24px; }
.mobile-menu-nav .nav-sub-inner { padding-left: 16px; }
.mobile-menu-nav .nav-sub-link {
    min-height: 46px;
    padding: 11px 13px;
    font-size: .84rem;
    background: var(--surface-soft);
    margin: 4px 0;
}
.mobile-menu-nav .nav-sub-link svg { width: 17px; height: 17px; }
.mobile-menu-nav .nav-sub-link::before { left: -16px; width: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
   VITRINE DE PLANOS DE REVENDA (tela de login)
   No desktop o painel fica ao lado do formulário; no celular vira um modal
   aberto por botão, para não empurrar o login para baixo da dobra.
   ═══════════════════════════════════════════════════════════════════════ */
.auth-login-page .login-grid {
    display: grid;
    grid-template-columns: minmax(320px, 430px) minmax(360px, 1fr);
    gap: 24px;
    align-items: start;
}
.auth-login-page .plans-panel {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 2rem;
    padding: 24px;
    box-shadow: 0 18px 44px rgba(0,0,0,.10);
}
.auth-login-page .plan-mini-card {
    border: 1px solid var(--border);
    background: var(--surface-soft);
    border-radius: 18px;
    padding: 14px;
    transition: border-color .2s ease, transform .2s ease;
}
.auth-login-page .plan-mini-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.auth-login-page .plans-mobile-button { display: none; }
/* --on-accent inverte nos temas escuros, onde o accent é claro. */
.auth-login-page .plan-cta { background: var(--accent) !important; color: var(--on-accent) !important; border: 0; text-decoration: none; }
.auth-login-page .plan-cta:hover { background: var(--accent-hover) !important; color: var(--on-accent) !important; }
.auth-login-page .plans-mobile-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    padding: 16px;
    align-items: center;
    justify-content: center;
}
.auth-login-page .plans-mobile-modal.open { display: flex; }
.auth-login-page .plans-mobile-box {
    width: 100%;
    max-width: 390px;
    max-height: 88vh;
    overflow: auto;
    border-radius: 24px;
    background: var(--surface);
    color: var(--text);
    padding: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
@media (max-width: 767px) {
    .auth-login-page .login-grid { display: block; }
    .auth-login-page .plans-panel { display: none; }
    .auth-login-page .plans-mobile-button { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAIS — CORREÇÃO DE TEMA
   A camada de tema mirava .modal-box e .modal-content, mas a classe usada no
   HTML é .holk-modal-box. Nenhuma das duas casava, então o fundo branco e o
   título #1A1A1A ficavam fixos: em tema escuro o texto (var(--text), claro)
   caía sobre fundo branco e sumia.
   Vale para os modais de clientes, planos, revendas, instâncias e planos de revenda.
   ═══════════════════════════════════════════════════════════════════════ */
.holk-modal-box {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    box-shadow: 0 25px 60px rgba(0,0,0,.28);
}
.holk-modal-title { color: var(--text) !important; }
.holk-modal-box label,
.holk-modal-box p,
.holk-modal-box span,
.holk-modal-box strong,
.holk-modal-box h1, .holk-modal-box h2, .holk-modal-box h3, .holk-modal-box h4 { color: var(--text); }
.holk-modal-box .holk-label { color: var(--muted) !important; }
.holk-modal-backdrop { background: rgba(0,0,0,.55); }

/* Caixas de seleção: a regra genérica de input pintava fundo e borda nelas,
   transformando o controle nativo num quadrado escuro sem marca visível. */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
/* Exceção: o switch desenhado à mão do modal Configurar continua com o visual próprio. */
.theme-setting input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 38px;
    height: 22px;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
}
.theme-setting input[type="checkbox"]:checked {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Rótulo com caixa de seleção fica alinhado e com respiro */
.holk-modal-box label:has(> input[type="checkbox"]),
.holk-modal-box label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-height: 32px;
}