/* ══════════════════════════════════════════════════════════
   THEME SWITCHER / LIGHT MODE
══════════════════════════════════════════════════════════ */
html { color-scheme: dark; }

html[data-theme="light"] {
  color-scheme: light;
  --bg:       #edf8f1;
  --bg2:      #e3f2e9;
  --surface:  #f8fdf9;
  --surface2: #f0f8f2;
  --border:   #cfe4d5;
  --border2:  #b8d5c1;
  --green:    #16a34a;
  --green2:   #15803d;
  --green-dim:#dcfce7;
  --green-glow: rgba(22, 163, 74, .14);
  --amber:    #d97706;
  --red:      #dc2626;
  --blue:     #2563eb;
  --text:     #0f172a;
  --text2:    #475569;
  --text3:    #64748b;
}

body,
.sidebar,
.topbar,
.card,
.inp,
.sel,
.btn,
.nav-item,
.wpp-pill,
.sb-empresa {
  transition: background-color .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 14% -10%, rgba(34, 197, 94, .12), transparent 34%),
    radial-gradient(circle at 86% 2%, rgba(37, 99, 235, .10), transparent 32%),
    linear-gradient(180deg, #f3fbf5 0%, var(--bg) 45%, #e9f6ee 100%);
}

/* ── Toggle ─────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 999px;
  color: var(--text2);
  background: rgba(34, 197, 94, .08);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: rgba(34, 197, 94, .36);
  background: rgba(34, 197, 94, .13);
}

.theme-toggle-icon {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: 11px;
}

html[data-theme="light"] .theme-toggle {
  color: #166534;
  background: rgba(22, 163, 74, .10);
  box-shadow: 0 10px 26px rgba(22, 163, 74, .10);
}

html[data-theme="light"] .theme-toggle-icon { background: rgba(250, 255, 251, .94); }

/* ── Base light surfaces ────────────────────────────────── */
html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar,
html[data-theme="light"] .card,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .chat-list,
html[data-theme="light"] .chat-view,
html[data-theme="light"] .clientes-toolbar,
html[data-theme="light"] .clientes-list-panel,
html[data-theme="light"] .clientes-detail-panel,
html[data-theme="light"] .funil-board-main,
html[data-theme="light"] .funil-create-card,
html[data-theme="light"] .funil-tips-card,
html[data-theme="light"] .cfg-card,
html[data-theme="light"] .teste-card,
html[data-theme="light"] .ia-card,
html[data-theme="light"] .ia-preset-card,
html[data-theme="light"] .func-board-main,
html[data-theme="light"] .func-side-card,
html[data-theme="light"] .atalhos-panel,
html[data-theme="light"] .midias-card,
html[data-theme="light"] .atendentes-card,
html[data-theme="light"] .atendentes-grid-card {
  background: rgba(250, 255, 251, .90);
  border-color: var(--border);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

html[data-theme="light"] .topbar {
  background: rgba(250, 255, 251, .88);
  backdrop-filter: blur(16px);
}

html[data-theme="light"] .sidebar { background: rgba(250, 255, 251, .94); }
html[data-theme="light"] .sb-empresa,
html[data-theme="light"] .wpp-pill,
html[data-theme="light"] .inp,
html[data-theme="light"] .sel,
html[data-theme="light"] .toggle-row,
html[data-theme="light"] .num-item {
  background: #f4fbf6;
  border-color: var(--border);
}

html[data-theme="light"] .nav-item:hover { background: #eef8f1; }
html[data-theme="light"] .nav-item.active {
  background: rgba(22, 163, 74, .10);
  border-color: rgba(22, 163, 74, .20);
}

html[data-theme="light"] .btn-ghost {
  background: #edf8f1;
  color: var(--text2);
  border-color: var(--border);
}
html[data-theme="light"] .btn-ghost:hover { background: #dff2e6; color: var(--text); }
html[data-theme="light"] .badge-blue { color: var(--blue); }

/* ── Premium sections on light theme ────────────────────── */
html[data-theme="light"] .dashboard-hero,
html[data-theme="light"] .chat-hero,
html[data-theme="light"] .clientes-hero,
html[data-theme="light"] .funil-hero,
html[data-theme="light"] .cfg-hero,
html[data-theme="light"] .teste-hero,
html[data-theme="light"] .ia-hero,
html[data-theme="light"] .func-hero,
html[data-theme="light"] .midias-hero,
html[data-theme="light"] .atalhos-hero,
html[data-theme="light"] .atendentes-hero {
  background:
    radial-gradient(circle at 8% 2%, rgba(34, 197, 94, .18), transparent 36%),
    radial-gradient(circle at 78% 0%, rgba(37, 99, 235, .12), transparent 32%),
    linear-gradient(135deg, rgba(250, 255, 251, .98), rgba(229, 246, 235, .94));
  border-color: rgba(22, 163, 74, .18);
  box-shadow: 0 28px 76px rgba(15, 23, 42, .10);
}

html[data-theme="light"] .dashboard-grid-glow,
html[data-theme="light"] .clientes-hero::after,
html[data-theme="light"] .cfg-hero::after,
html[data-theme="light"] .teste-hero::before,
html[data-theme="light"] .ia-hero::after,
html[data-theme="light"] .func-hero::before,
html[data-theme="light"] .midias-hero::after {
  background-image:
    linear-gradient(rgba(15, 23, 42, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .055) 1px, transparent 1px);
}

html[data-theme="light"] .dashboard-status-card,
html[data-theme="light"] .chat-stat-card,
html[data-theme="light"] .clientes-stat-card,
html[data-theme="light"] .funil-stat-card,
html[data-theme="light"] .cfg-hero-panel,
html[data-theme="light"] .teste-hero-panel,
html[data-theme="light"] .ia-hero-console,
html[data-theme="light"] .func-stat-card,
html[data-theme="light"] .midias-stat-card,
html[data-theme="light"] .atalhos-stat-card,
html[data-theme="light"] .atendentes-stat-card {
  background: rgba(248, 253, 249, .78);
  border-color: rgba(148, 163, 184, .28);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

html[data-theme="light"] .metric-card,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .chat-list,
html[data-theme="light"] .chat-view,
html[data-theme="light"] .clientes-toolbar,
html[data-theme="light"] .clientes-table-card,
html[data-theme="light"] .midias-library,
html[data-theme="light"] .atendentes-panel {
  background: linear-gradient(180deg, rgba(250, 255, 251, .96), rgba(240, 248, 242, .94));
}

html[data-theme="light"] .metric-card:hover,
html[data-theme="light"] .dashboard-card:hover {
  background: linear-gradient(180deg, #fbfffc, #edf8f1);
}

html[data-theme="light"] .dashboard-status-list div,
html[data-theme="light"] .dashboard-funnel-summary div,
html[data-theme="light"] .dashboard-insight-list button,
html[data-theme="light"] .funil-card,
html[data-theme="light"] .etapa-row,
html[data-theme="light"] .funil-tip,
html[data-theme="light"] .chat-item,
html[data-theme="light"] .clientes-card,
html[data-theme="light"] .cliente-detail-empty,
html[data-theme="light"] .midias-item,
html[data-theme="light"] .atalhos-card,
html[data-theme="light"] .atendente-row {
  background: rgba(242, 250, 244, .88);
  border-color: var(--border);
}

html[data-theme="light"] th { background: #f0f8f2; }
html[data-theme="light"] tr:hover td { background: rgba(22, 163, 74, .035); }

html[data-theme="light"] .funil-card:hover,
html[data-theme="light"] .etapa-row:hover,
html[data-theme="light"] .dashboard-insight-list button:hover,
html[data-theme="light"] .chat-item:hover {
  background: rgba(236, 253, 245, .72);
}

html[data-theme="light"] .funil-card-bar { background: rgba(15, 23, 42, .08); }
html[data-theme="light"] .dashboard-empty-state,
html[data-theme="light"] .funil-empty-state {
  background: rgba(242, 250, 244, .78);
  border-color: var(--border2);
}

/* ── Auth light mode ─────────────────────────────────────── */
html[data-theme="light"] #auth-screen {
  background:
    radial-gradient(circle at 18% 14%, rgba(34, 197, 94, .18), transparent 34%),
    radial-gradient(circle at 76% 8%, rgba(37, 99, 235, .14), transparent 34%),
    radial-gradient(circle at 54% 86%, rgba(20, 184, 166, .10), transparent 34%),
    linear-gradient(135deg, #f8fffb 0%, #edf8f1 48%, #eaf3ff 100%);
}

html[data-theme="light"] .auth-right {
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(241,248,244,.68));
  border-left-color: rgba(15, 23, 42, .08);
  box-shadow: -34px 0 120px rgba(15, 23, 42, .10);
}

html[data-theme="light"] .auth-form-wrap,
html[data-theme="light"] .auth-tabs,
html[data-theme="light"] .auth-feat,
html[data-theme="light"] .auth-stat,
html[data-theme="light"] .auth-hero-label {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(22, 101, 52, .14);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

html[data-theme="light"] .auth-brand-name,
html[data-theme="light"] .auth-hero h1,
html[data-theme="light"] .auth-form-title,
html[data-theme="light"] .auth-stat strong {
  color: #0f172a;
}

html[data-theme="light"] .auth-brand-sub,
html[data-theme="light"] .auth-hero p,
html[data-theme="light"] .auth-form-sub,
html[data-theme="light"] .auth-stat span,
html[data-theme="light"] .auth-feat,
html[data-theme="light"] .auth-footer-text,
html[data-theme="light"] .auth-switch-text {
  color: #475569;
}

html[data-theme="light"] .field label { color: #64748b; }
html[data-theme="light"] .field input {
  color: #0f172a;
  background: rgba(255,255,255,.82);
  border-color: rgba(15, 23, 42, .12);
}

@media (max-width: 760px) {
  .theme-toggle span:last-child { display: none; }
  .theme-toggle { padding-right: 6px; }
}

.auth-theme-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
}

/* ── Light mode cleanup: remove hardcoded dark islands ───── */
html[data-theme="light"] .chat-list,
html[data-theme="light"] .chat-view,
html[data-theme="light"] .cv-header,
html[data-theme="light"] .cv-input-area,
html[data-theme="light"] .chat-search .inp,
html[data-theme="light"] .cv-input-row textarea {
  background: rgba(250, 255, 251, .92);
  border-color: var(--border);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

html[data-theme="light"] .cv-header {
  background:
    radial-gradient(circle at 12% 0%, rgba(34,197,94,.13), transparent 38%),
    rgba(250, 255, 251, .90);
}

html[data-theme="light"] .cv-msgs {
  background:
    radial-gradient(circle at 0 0, rgba(34,197,94,.075), transparent 30%),
    radial-gradient(circle at 100% 70%, rgba(37,99,235,.065), transparent 30%),
    #f0f8f2;
}

html[data-theme="light"] .msg {
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

html[data-theme="light"] .msg-user {
  background: #fbfffc;
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="light"] .msg-bot {
  background: linear-gradient(135deg, rgba(22,163,74,.14), rgba(22,163,74,.06));
  border-color: rgba(22,163,74,.20);
  color: var(--text);
}

html[data-theme="light"] .cv-input-row textarea:focus {
  background: #fbfffc;
  border-color: rgba(22,163,74,.48);
}

html[data-theme="light"] .chat-item:hover,
html[data-theme="light"] .chat-item.sel {
  border-color: rgba(22,163,74,.24);
}

html[data-theme="light"] .chat-list-empty,
html[data-theme="light"] .chat-empty,
html[data-theme="light"] .clientes-empty,
html[data-theme="light"] .midias-empty,
html[data-theme="light"] .atalhos-empty,
html[data-theme="light"] .atendentes-empty {
  background: rgba(242, 250, 244, .84);
  border-color: var(--border);
}

html[data-theme="light"] .send-btn-icon {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #f0fdf4;
  border-color: rgba(22, 163, 74, .28);
  box-shadow: 0 10px 22px rgba(22, 163, 74, .16);
}

/* Other tabs with hardcoded dark cards/panels */
html[data-theme="light"] .clientes-stage-card,
html[data-theme="light"] .clientes-client-card,
html[data-theme="light"] .cliente-card,
html[data-theme="light"] .cliente-row,
html[data-theme="light"] .cliente-memory,
html[data-theme="light"] .teste-info-card,
html[data-theme="light"] .teste-allow-card,
html[data-theme="light"] .ia-console-line,
html[data-theme="light"] .ia-status-card,
html[data-theme="light"] .ia-rule-box,
html[data-theme="light"] .func-card,
html[data-theme="light"] .func-row,
html[data-theme="light"] .midias-upload-card,
html[data-theme="light"] .midias-preview,
html[data-theme="light"] .midias-dropzone,
html[data-theme="light"] .atalhos-form-card,
html[data-theme="light"] .atalhos-item,
html[data-theme="light"] .atalhos-media-card,
html[data-theme="light"] .atendentes-form-card,
html[data-theme="light"] .atendente-card,
html[data-theme="light"] .cfg-field-card,
html[data-theme="light"] .cred-card {
  background: rgba(242, 250, 244, .90);
  border-color: var(--border);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

html[data-theme="light"] .menus-card,
html[data-theme="light"] .menus-editor-card,
html[data-theme="light"] .menus-list-card,
html[data-theme="light"] .menus-panel,
html[data-theme="light"] .menus-flow-sidebar,
html[data-theme="light"] .menus-flow-canvas,
html[data-theme="light"] .menus-flow-inspector,
html[data-theme="light"] .menus-flow-node,
html[data-theme="light"] .menus-option-card,
html[data-theme="light"] .menus-message-card,
html[data-theme="light"] .menus-coleta-card,
html[data-theme="light"] .menus-reusable-card {
  background: rgba(250, 255, 251, .90) !important;
  border-color: var(--border) !important;
  color: var(--text);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

html[data-theme="light"] .menus-flow-canvas {
  background-image:
    linear-gradient(rgba(15, 23, 42, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .06) 1px, transparent 1px),
    linear-gradient(145deg, #fbfffc, #e3f2e9 62%) !important;
}

/* ── Full light sweep for remaining tabs ───────────────────
   These tabs have many nested components with hardcoded dark rgba values.
   Keep this block near the end so light mode wins without touching dark mode. */
html[data-theme="light"] :is(
  #tab-clientes,
  #tab-atendentes,
  #tab-teste,
  #tab-atalhos,
  #tab-midias,
  #tab-menus,
  #tab-ia,
  #tab-funcionalidades,
  #tab-configuracoes
) :is(
  [class*="-card"],
  [class*="-panel"],
  [class*="-box"],
  [class*="-board"],
  [class*="-toolbar"],
  [class*="-list"],
  [class*="-item"],
  [class*="-row"],
  [class*="-block"],
  [class*="-preview"],
  [class*="-option"],
  [class*="-editor"],
  [class*="-drawer"],
  [class*="-palette"],
  [class*="-canvas"],
  [class*="-workbench"],
  [class*="-inspector"],
  [class*="-message"],
  [class*="-coleta"],
  [class*="-field"],
  [class*="-empty"],
  [class*="-note"],
  [class*="-example"],
  [class*="-search"],
  [class*="-media"],
  [class*="-credential"],
  [class*="-account"],
  [class*="-vault"],
  [class*="-health"],
  [class*="-flow"],
  [class*="-chain"],
  [class*="-param"],
  [class*="-rule"],
  [class*="-tone"],
  [class*="-template"]
) {
  background-color: rgba(250, 255, 251, .90) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

html[data-theme="light"] :is(
  #tab-clientes,
  #tab-atendentes,
  #tab-teste,
  #tab-atalhos,
  #tab-midias,
  #tab-menus,
  #tab-ia,
  #tab-funcionalidades,
  #tab-configuracoes
) :is(
  [class*="-card"],
  [class*="-panel"],
  [class*="-box"],
  [class*="-board"],
  [class*="-toolbar"],
  [class*="-list"],
  [class*="-item"],
  [class*="-editor"],
  [class*="-drawer"],
  [class*="-palette"],
  [class*="-canvas"],
  [class*="-workbench"],
  [class*="-inspector"],
  [class*="-flow"]
) {
  box-shadow: 0 14px 36px rgba(15, 23, 42, .07);
}

html[data-theme="light"] :is(
  #tab-clientes,
  #tab-atendentes,
  #tab-teste,
  #tab-atalhos,
  #tab-midias,
  #tab-menus,
  #tab-ia,
  #tab-funcionalidades,
  #tab-configuracoes
) :is(
  [class*="-hero"],
  [class*="-orb"],
  [class*="-glow"],
  [class*="-dot"],
  [class*="-icon"],
  [class*="-avatar"],
  [class*="-status"],
  [class*="-actions"],
  [class*="-btn"],
  [class*="-remove"],
  [class*="-delete"],
  [class*="-danger"],
  [class*="-toggle-ui"],
  [class*="-radar"],
  [class*="-core"],
  [class*="-count"],
  [class*="-badge"],
  [class*="-kicker"],
  [class*="-eyebrow"],
  [class*="-muted"]
) {
  box-shadow: none;
}

html[data-theme="light"] :is(
  #tab-clientes,
  #tab-atendentes,
  #tab-teste,
  #tab-atalhos,
  #tab-midias,
  #tab-menus,
  #tab-ia,
  #tab-funcionalidades,
  #tab-configuracoes
) :is(
  [class*="-hero"],
  [class*="-orb"],
  [class*="-glow"],
  [class*="-dot"],
  [class*="-icon"],
  [class*="-avatar"],
  [class*="-btn"],
  [class*="-remove"],
  [class*="-delete"],
  [class*="-danger"],
  [class*="-toggle-ui"],
  [class*="-radar"],
  [class*="-core"],
  [class*="-badge"],
  [class*="-kicker"],
  [class*="-eyebrow"]
) {
  background-color: initial !important;
}

html[data-theme="light"] :is(
  #tab-clientes,
  #tab-atendentes,
  #tab-teste,
  #tab-atalhos,
  #tab-midias,
  #tab-menus,
  #tab-ia,
  #tab-funcionalidades,
  #tab-configuracoes
) :is(.inp, .sel, textarea, input, select) {
  background: #fbfffc !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}

html[data-theme="light"] :is(
  #tab-clientes,
  #tab-atendentes,
  #tab-teste,
  #tab-atalhos,
  #tab-midias,
  #tab-menus,
  #tab-ia,
  #tab-funcionalidades,
  #tab-configuracoes
) :is(.btn-primary, .send-btn, .midias-upload-btn, .teste-add-btn) {
  background: linear-gradient(135deg, var(--green), var(--green2)) !important;
  color: #f0fdf4 !important;
}

html[data-theme="light"] :is(
  #tab-clientes,
  #tab-atendentes,
  #tab-teste,
  #tab-atalhos,
  #tab-midias,
  #tab-menus,
  #tab-ia,
  #tab-funcionalidades,
  #tab-configuracoes
) :is(.btn-ghost, .btn-warn, .btn-danger, .filt-btn, .atendentes-filter, .midias-filter, .atalhos-media-filter, .menus-mode-tab, .menus-tool-btn) {
  background: #edf8f1 !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] #tab-menus :is(.menus-flow-stage, .menus-canvas, .menus-flow-canvas, .menus-workbench) {
  background:
    linear-gradient(rgba(15, 23, 42, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .055) 1px, transparent 1px),
    linear-gradient(145deg, #fbfffc, #e0f1e6 62%) !important;
}

html[data-theme="light"] #tab-ia :is(.func-modal, .func-modal-card) {
  background: rgba(250, 255, 251, .96) !important;
  border-color: var(--border) !important;
}

/* ── Strong light reset for remaining dark gradients ────────
   Some tab components use the full `background:` shorthand with dark
   gradients; overriding only background-color is not enough because the
   background-image layer remains visible. */
html[data-theme="light"] :is(
  #tab-clientes,
  #tab-atendentes,
  #tab-teste,
  #tab-atalhos,
  #tab-midias,
  #tab-menus,
  #tab-ia,
  #tab-funcionalidades,
  #tab-configuracoes
) :is(
  .card,
  .toggle-row,
  .num-item,
  [class*="-card"],
  [class*="-panel"],
  [class*="-box"],
  [class*="-board"],
  [class*="-toolbar"],
  [class*="-list"],
  [class*="-item"],
  [class*="-row"],
  [class*="-block"],
  [class*="-preview"],
  [class*="-option"],
  [class*="-editor"],
  [class*="-drawer"],
  [class*="-palette"],
  [class*="-canvas"],
  [class*="-workbench"],
  [class*="-inspector"],
  [class*="-message"],
  [class*="-coleta"],
  [class*="-field"],
  [class*="-empty"],
  [class*="-note"],
  [class*="-example"],
  [class*="-search"],
  [class*="-media"],
  [class*="-credential"],
  [class*="-account"],
  [class*="-vault"],
  [class*="-health"],
  [class*="-flow"],
  [class*="-chain"],
  [class*="-param"],
  [class*="-rule"],
  [class*="-tone"],
  [class*="-template"]
):not([class*="-hero"]):not([class*="-orb"]):not([class*="-glow"]):not([class*="-avatar"]):not([class*="-icon"]):not([class*="-dot"]):not([class*="-btn"]):not([class*="-remove"]):not([class*="-delete"]):not([class*="-danger"]):not([class*="-badge"]):not([class*="-kicker"]):not([class*="-eyebrow"]) {
  background: linear-gradient(180deg, rgba(250, 255, 251, .96), rgba(238, 249, 242, .92)) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

html[data-theme="light"] :is(
  #tab-clientes,
  #tab-atendentes,
  #tab-teste,
  #tab-atalhos,
  #tab-midias,
  #tab-menus,
  #tab-ia,
  #tab-funcionalidades,
  #tab-configuracoes
) :is(
  [class*="-head"],
  [class*="-top"],
  [class*="-footer"],
  [class*="-body"],
  [class*="-content"],
  [class*="-wrap"],
  [class*="-grid"],
  [class*="-layout"],
  [class*="-stack"],
  [class*="-strip"],
  [class*="-stage"],
  [class*="-main"],
  [class*="-side"]
):not([class*="-hero"]):not([class*="-orb"]):not([class*="-glow"]):not([class*="-avatar"]):not([class*="-icon"]):not([class*="-btn"]):not([class*="-kicker"]):not([class*="-eyebrow"]) {
  background-color: transparent !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] :is(
  #tab-clientes,
  #tab-atendentes,
  #tab-teste,
  #tab-atalhos,
  #tab-midias,
  #tab-menus,
  #tab-ia,
  #tab-funcionalidades,
  #tab-configuracoes
) :is(.inp, .sel, input, select, textarea, pre, code) {
  background: #fbfffc !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}

html[data-theme="light"] #tab-menus :is(
  .menus-flow-stage,
  .menus-canvas,
  .menus-canvas-wrap,
  .menus-flow-canvas,
  .menus-flow-zoom-space,
  .menus-workbench,
  .menus-workbench-backdrop
) {
  background:
    linear-gradient(rgba(15, 23, 42, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .055) 1px, transparent 1px),
    linear-gradient(145deg, #fbfffc, #e0f1e6 62%) !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] #tab-menus :is(.menus-flow-card, .menus-flow-node, .menus-item, .menus-option-editor, .menus-message-row, .menus-coleta-row, .menus-chain-action) {
  background: #fbfffc !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] #tab-ia :is(.func-modal) {
  background: rgba(15, 23, 42, .20) !important;
}

html[data-theme="light"] #tab-ia :is(.func-modal-card) {
  background: #fbfffc !important;
  border-color: var(--border) !important;
}

/* ── Targeted final pass: tabs still showing dark fragments ──
   Reset the exact high-level structures of Teste, Mídias, Menus, IA and
   Funcionalidades. These components use dark `background:` shorthands on
   wrappers/head/body elements, so they need a full background override. */
html[data-theme="light"] :is(
  .teste-banner-top,
  .teste-hero-panel,
  .teste-hero-metrics > div,
  .teste-card,
  .teste-guide-card,
  .teste-allow-card,
  .teste-list,
  .teste-empty,
  .teste-example,
  .teste-master-toggle,
  .teste-panel-top,
  .teste-status-pill,
  .teste-input-wrap,
  .teste-add-row,
  .teste-count-badge,
  .midias-uploader-card,
  .midias-library-card,
  .midia-card,
  .midia-preview,
  .midias-dropzone,
  .midias-tips,
  .midias-control-bar,
  .midias-status,
  .midias-empty,
  .midias-search,
  .midias-filters,
  .midias-card-head,
  .midias-library-head,
  .menus-main,
  .menus-side,
  .menus-layout,
  .menus-layout-visual,
  .menus-head,
  .menus-lista,
  .menus-item,
  .menus-editor,
  .menus-editor-footer,
  .menus-empty,
  .menus-example,
  .menus-help,
  .menus-muted,
  .menus-message-row,
  .menus-option-editor,
  .menus-option-field,
  .menus-coleta-editor,
  .menus-coleta-row,
  .menus-coleta-question,
  .menus-coleta-finalizer,
  .menus-chain-action,
  .menus-action-fields,
  .menus-param-fields,
  .menus-advanced-json,
  .menus-mini-json,
  .menus-palette,
  .menus-palette-top,
  .menus-palette-list,
  .menus-palette-item,
  .menus-inspector,
  .menus-inspector-head,
  .menus-inspector-section,
  .menus-drawer-head,
  .menus-workbench,
  .menus-flow-stage,
  .menus-flow-card,
  .menus-flow-options,
  .menus-flow-option-row,
  .ia-hero-console,
  .ia-console-body,
  .ia-console-line,
  .ia-panel-card,
  .ia-side-card,
  .ia-save-card,
  .ia-preview-card,
  .ia-preset-card,
  .ia-rule-box,
  .ia-tone-block,
  .ia-template-row,
  .ia-active-banner,
  .ia-media-card,
  .ia-media-item,
  .ia-media-empty,
  .ia-status-msg,
  .ia-key-row,
  .ia-field,
  .ia-flow-note,
  .ia-prompt-preview,
  .func-board,
  .func-categories-board,
  .func-category-card,
  .func-category-section,
  .func-category-row,
  .func-category-head,
  .func-row,
  .func-row-main,
  .func-row-meta,
  .func-search-wrap,
  .func-empty-state,
  .func-modal-card,
  .func-modal-section,
  .func-param-chip
) {
  background: linear-gradient(180deg, rgba(250, 255, 251, .98), rgba(237, 248, 241, .94)) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

html[data-theme="light"] :is(
  .teste-shell,
  .teste-grid,
  .teste-hero-content,
  .teste-card-head,
  .midias-shell,
  .midias-layout,
  .midias-grid,
  .midias-form,
  .midias-card-kicker,
  .menus-workbench-backdrop,
  .menus-form-grid,
  .menus-message-grid,
  .menus-option-head,
  .menus-coleta-finalizer-head,
  .menus-inspector-title,
  .menus-flow-zoom-space,
  .ia-shell,
  .ia-layout,
  .ia-main-stack,
  .ia-side-stack,
  .ia-form-grid,
  .ia-rules-grid,
  .ia-provider-grid,
  .ia-tone-grid,
  .ia-params-grid,
  .ia-console-top,
  .func-shell,
  .func-board-head,
  .func-list,
  .func-categories-list,
  .func-category-rows,
  .func-row-title,
  .func-modal-top,
  .func-param-grid
) {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] :is(
  .teste-hero,
  .midias-hero,
  .ia-hero,
  .func-hero
) {
  background:
    radial-gradient(circle at 8% 2%, rgba(34, 197, 94, .18), transparent 36%),
    radial-gradient(circle at 78% 0%, rgba(37, 99, 235, .12), transparent 32%),
    linear-gradient(135deg, rgba(250, 255, 251, .98), rgba(229, 246, 235, .94)) !important;
}

html[data-theme="light"] :is(
  .menus-canvas,
  .menus-canvas-wrap,
  .menus-flow-canvas,
  .menus-flow-stage,
  .menus-workbench
) {
  background:
    linear-gradient(rgba(15, 23, 42, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .055) 1px, transparent 1px),
    linear-gradient(145deg, #fbfffc, #e0f1e6 62%) !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] :is(
  .teste-input-wrap .inp,
  .midias-field .inp,
  .midias-search .inp,
  .menus-message-field .inp,
  .menus-option-field .inp,
  .menus-palette-search .inp,
  .menus-inspector .inp,
  .menus-inspector .sel,
  .ia-field .inp,
  .ia-field .sel,
  .ia-textarea,
  .func-search-wrap .inp,
  .func-code-wrap,
  .func-modal-card .inp
) {
  background: #fbfffc !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}

html[data-theme="light"] :is(
  .menus-flow-delete,
  .menus-option-remove,
  .menus-danger-btn,
  .func-modal-close,
  .func-row-action,
  .ia-key-link,
  .ia-choice,
  .midias-filter,
  .teste-add-btn
) {
  border-color: var(--border) !important;
}