:root {
  --bg: #0b1220;
  --panel: #0f1a33;
  --panel-2: #0b142a;
  --text: #e6eefc;
  --muted: rgba(230, 238, 252, .75);
  --border: rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.14);
  --shadow: rgba(0,0,0,.35);
  --primary: #2b6cff;
  --danger: #ff9aa2;
  --success: #9affc0;
}

:root[data-theme="light"] {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-2: #eef2ff;
  --text: #0b1220;
  --muted: rgba(11, 18, 32, .68);
  --border: rgba(11,18,32,.12);
  --border-2: rgba(11,18,32,.18);
  --shadow: rgba(11,18,32,.15);
  --primary: #2b6cff;
  --danger: #c0392b;
  --success: #1e9e58;
}

/* helpers globais */
body {
  margin: 0;
  font-family: system-ui, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}

.card, header {
  background: var(--panel);
  border: 1px solid var(--border);
}

input, pre {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
}

button {
  background: var(--primary);
  color: #fff;
}

button.ghost {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(43,108,255,.52) rgba(255,255,255,.055);
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255,255,255,.055);
}

*::-webkit-scrollbar-thumb {
  border: 2px solid rgba(15,26,51,.9);
  border-radius: 999px;
  background: rgba(43,108,255,.52);
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(43,108,255,.74);
}

/* Ícone/btn do tema */
.theme-toggle {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  border: 1px solid var(--border-2);
  background: var(--panel);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 12px 30px var(--shadow);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.theme-toggle .sun{display:none}
:root[data-theme="light"] .theme-toggle .moon{display:none}
:root[data-theme="light"] .theme-toggle .sun{display:block}

:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]){
  background:var(--panel-2)!important;
  border-color:var(--border-2)!important;
  color:var(--text)!important;
}
:root[data-theme="light"] table th,
:root[data-theme="light"] table td{border-color:rgba(11,18,32,.11)!important}
:root[data-theme="light"] .pill,
:root[data-theme="light"] .muted-box{border-color:var(--border)!important}
:root[data-theme="light"] *{scrollbar-color:rgba(43,108,255,.52) rgba(11,18,32,.08)}
:root[data-theme="light"] *::-webkit-scrollbar-track{background:rgba(11,18,32,.08)}
:root[data-theme="light"] *::-webkit-scrollbar-thumb{border-color:rgba(255,255,255,.92)}

:root[data-theme="light"] .wa-panel,
:root[data-theme="light"] .wa-chat,
:root[data-theme="light"] .wa-modal-card,
:root[data-theme="light"] .campaign-item,
:root[data-theme="light"] .audit-item,
:root[data-theme="light"] .audit-status,
:root[data-theme="light"] .col,
:root[data-theme="light"] .cardItem,
:root[data-theme="light"] .plan-card{
  color:var(--text)!important;
  border-color:var(--border)!important;
  background:var(--panel)!important;
}
:root[data-theme="light"] .wa-chat-head,
:root[data-theme="light"] .wa-composer,
:root[data-theme="light"] .wa-quick-replies,
:root[data-theme="light"] .wa-attach-menu,
:root[data-theme="light"] .wa-emoji-panel{
  color:var(--text)!important;
  border-color:var(--border)!important;
  background:#f8fbff!important;
}
:root[data-theme="light"] .wa-messages{
  color:var(--text)!important;
  background:
    radial-gradient(circle at 18px 22px, rgba(43,108,255,.09) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70px 48px, rgba(16,168,148,.08) 0 1px, transparent 1.5px),
    linear-gradient(135deg, rgba(43,108,255,.035) 25%, transparent 25% 50%, rgba(16,168,148,.03) 50% 75%, transparent 75%),
    #edf4ff!important;
}
:root[data-theme="light"] .wa-item,
:root[data-theme="light"] .wa-empty,
:root[data-theme="light"] .wa-quick-reply-chip,
:root[data-theme="light"] .compact-item,
:root[data-theme="light"] .timeline-item{
  color:var(--text)!important;
  border-color:var(--border)!important;
  background:rgba(255,255,255,.78)!important;
}
:root[data-theme="light"] .wa-item:hover,
:root[data-theme="light"] .wa-item.active{
  color:var(--text)!important;
  border-color:rgba(43,108,255,.42)!important;
  background:rgba(43,108,255,.11)!important;
}
:root[data-theme="light"] .wa-preview,
:root[data-theme="light"] .wa-time{
  color:rgba(11,18,32,.72)!important;
}
:root[data-theme="light"] .wa-preview.human{
  color:#006c98!important;
}
:root[data-theme="light"] .wa-msg.in{background:#fff!important;color:#13233d!important}
:root[data-theme="light"] .wa-msg.out{background:#d9f5ef!important;color:#073d38!important}
:root[data-theme="light"] .wa-attach-menu button,
:root[data-theme="light"] .wa-emoji-tabs button,
:root[data-theme="light"] .wa-emoji-grid button{color:var(--text)!important}
:root[data-theme="light"] .dropZone{
  color:var(--text)!important;
  border-color:var(--border-2)!important;
  background:rgba(43,108,255,.045)!important;
}
:root[data-theme="light"] .chip,
:root[data-theme="light"] .kbadge,
:root[data-theme="light"] .attRow{
  color:var(--text)!important;
  border-color:var(--border)!important;
  background:rgba(43,108,255,.06)!important;
}
:root[data-theme="light"] .cardDesc,
:root[data-theme="light"] .attMeta{
  color:rgba(11,18,32,.72)!important;
  opacity:1!important;
}
:root[data-theme="light"] .audit-meta,
:root[data-theme="light"] .modalCard{
  color:var(--text)!important;
  border-color:var(--border)!important;
  background:var(--panel-2)!important;
}
:root[data-theme="light"] .tabBtn,
:root[data-theme="light"] .btn{
  color:var(--text)!important;
  border-color:var(--border-2)!important;
  background:rgba(43,108,255,.07)!important;
}
:root[data-theme="light"] .tabBtn.active,
:root[data-theme="light"] .btn.primary{
  border-color:rgba(43,108,255,.32)!important;
  background:rgba(43,108,255,.14)!important;
}
:root[data-theme="light"] select.inp,
:root[data-theme="light"] .inp{
  color:var(--text)!important;
  border-color:var(--border-2)!important;
  background:var(--panel-2)!important;
}
:root[data-theme="light"] select.inp option{color:var(--text)!important;background:#fff!important}