:root{
  color-scheme: dark;
}

html[data-theme="light"]{
  color-scheme: light;
}

#themeToggle{
  position:fixed;
  top:16px;
  right:16px;
  z-index:1200;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #3a3836;
  background:rgba(33,31,30,.92);
  color:#CCD9DC;
  backdrop-filter:blur(8px);
  font:500 12px 'Hanken Grotesk','Helvetica Neue',sans-serif;
  letter-spacing:.5px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:all .18s ease;
}

#themeToggle:hover{
  border-color:#658589;
  color:#F5EFE8;
  transform:translateY(-1px);
}

#themeToggle .theme-icon{
  font-size:13px;
  line-height:1;
}

html[data-theme="light"] body{
  background:#f6f1ea !important;
  color:#312d28 !important;
}

html[data-theme="light"] .brand,
html[data-theme="light"] .brand a{
  color:#9a583e !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] .title,
html[data-theme="light"] .strategy-title,
html[data-theme="light"] .kpi-value,
html[data-theme="light"] .cat-occ,
html[data-theme="light"] .stat-v,
html[data-theme="light"] .tp,
html[data-theme="light"] .beo-title{
  color:#231f1b !important;
}

html[data-theme="light"] .sub,
html[data-theme="light"] .section-hdr,
html[data-theme="light"] .stat-l,
html[data-theme="light"] .kpi-label,
html[data-theme="light"] .kpi-card-label,
html[data-theme="light"] .chart-title,
html[data-theme="light"] .range-label,
html[data-theme="light"] .cat-label,
html[data-theme="light"] .detail-table th,
html[data-theme="light"] .source-card h3,
html[data-theme="light"] .label,
html[data-theme="light"] .strategy-kicker{
  color:#6b7e82 !important;
}

html[data-theme="light"] .section,
html[data-theme="light"] .section-hdr{
  color:#6b7e82 !important;
  background:transparent !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat,
html[data-theme="light"] .occ-chart,
html[data-theme="light"] .cat-card,
html[data-theme="light"] .source-card,
html[data-theme="light"] .detail-panel,
html[data-theme="light"] .guest-wrap,
html[data-theme="light"] .notes,
html[data-theme="light"] .tw,
html[data-theme="light"] .strategy-card,
html[data-theme="light"] .kpi-wrap,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .chart-wrap,
html[data-theme="light"] .data-table-wrap,
html[data-theme="light"] .device-card,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .de-modal,
html[data-theme="light"] .tgt-modal,
html[data-theme="light"] .source-bar-bg,
html[data-theme="light"] .meta-card,
html[data-theme="light"] .answer,
html[data-theme="light"] .example,
html[data-theme="light"] .tc,
html[data-theme="light"] .de-list,
html[data-theme="light"] .fetch-spinner-inner{
  background:#fffdfa !important;
  border-color:#ddd3c7 !important;
  color:#312d28 !important;
  box-shadow:none !important;
}

html[data-theme="light"] .stats,
html[data-theme="light"] .tier-row{
  background:#ddd3c7 !important;
}

html[data-theme="light"] .tab-nav,
html[data-theme="light"] .tab-row,
html[data-theme="light"] .guest-table thead th,
html[data-theme="light"] .data-table thead th,
html[data-theme="light"] .kpi-table thead th,
html[data-theme="light"] .detail-row td,
html[data-theme="light"] .guest-table tbody tr.expanded-row td,
html[data-theme="light"] .guest-table tbody tr:hover td,
html[data-theme="light"] .data-table tbody tr:hover td,
html[data-theme="light"] .kpi-table tbody tr:hover td{
  background:#f5efe6 !important;
}

html[data-theme="light"] .guest-table tbody td,
html[data-theme="light"] .data-table tbody td,
html[data-theme="light"] .kpi-table tbody td,
html[data-theme="light"] .detail-inner,
html[data-theme="light"] .tgt-label,
html[data-theme="light"] .conn-label,
html[data-theme="light"] .conn-desc,
html[data-theme="light"] .conn-masked,
html[data-theme="light"] .test-msg,
html[data-theme="light"] .source-label,
html[data-theme="light"] .source-val,
html[data-theme="light"] .chart-legend-item,
html[data-theme="light"] .device-label,
html[data-theme="light"] .device-sessions,
html[data-theme="light"] .helper,
html[data-theme="light"] .meta-card pre,
html[data-theme="light"] .card p,
html[data-theme="light"] .sub,
html[data-theme="light"] .stat-c,
html[data-theme="light"] .cat-detail,
html[data-theme="light"] .detail-note,
html[data-theme="light"] .strategy-sub{
  color:#6c6660 !important;
}

html[data-theme="light"] input[type="date"],
html[data-theme="light"] .date-input,
html[data-theme="light"] .week-date-input,
html[data-theme="light"] .overview-date-input{
  color-scheme:light !important;
}

html[data-theme="light"] .count-badge,
html[data-theme="light"] .count-badge.green{
  background:transparent !important;
  border:1px solid #ddd3c7 !important;
}

html[data-theme="light"] .count-badge{
  color:#9a583e !important;
}

html[data-theme="light"] .count-badge.green{
  color:#7d8f5d !important;
}

html[data-theme="light"] .section-rule{
  border-top-color:#ddd3c7 !important;
}

html[data-theme="light"] .top-table thead th,
html[data-theme="light"] .top-scroll{
  background:#fffdfa !important;
}

html[data-theme="light"] .dow-card,
html[data-theme="light"] .chart-shell{
  background:#fffdfa !important;
  border:1px solid #ddd3c7 !important;
  box-shadow:none !important;
}

html[data-theme="light"] .dow-card h3,
html[data-theme="light"] .chart-title{
  color:#6b7e82 !important;
}

html[data-theme="light"] .dow-label{
  color:#6c6660 !important;
}

html[data-theme="light"] .dow-val{
  color:#312d28 !important;
}

html[data-theme="light"] .dow-bar-bg{
  background:#f1e8dc !important;
}

html[data-theme="light"] .top-table tbody td,
html[data-theme="light"] .top-table tbody td.name-cell,
html[data-theme="light"] .top-table tbody td.membership-cell,
html[data-theme="light"] .tn2,
html[data-theme="light"] .tc2{
  color:#3d3832 !important;
}

html[data-theme="light"] .top-table tbody tr:hover td{
  background:#f0e8dc !important;
  color:#312d28 !important;
}

html[data-theme="light"] .top-table tbody tr:hover td.membership-cell{
  color:#708052 !important;
}

html[data-theme="light"] .top-table tbody tr:hover td.rank{
  color:#7a6f63 !important;
}

html[data-theme="light"] td.tc2{
  color:#5f6d70 !important;
  font-weight:500 !important;
}

html[data-theme="light"] td.sl{
  color:#544d46 !important;
}

html[data-theme="light"] td.cl{
  background:#f2ebe2 !important;
  color:#8f877d !important;
}

html[data-theme="light"] a:hover{
  color:#231f1b !important;
}

html[data-theme="light"] .rbtn,
html[data-theme="light"] .tbtn,
html[data-theme="light"] .cbtn,
html[data-theme="light"] .date-btn,
html[data-theme="light"] .week-btn,
html[data-theme="light"] .range-btn,
html[data-theme="light"] .refresh-btn,
html[data-theme="light"] .btn,
html[data-theme="light"] .fbtn,
html[data-theme="light"] .rtbtn,
html[data-theme="light"] .beo-btn,
html[data-theme="light"] .send-btn{
  background:#fffdfa !important;
  color:#5a5550 !important;
  border-color:#d7cdc1 !important;
}

html[data-theme="light"] .rbtn.on,
html[data-theme="light"] .tbtn.on,
html[data-theme="light"] .cbtn.on,
html[data-theme="light"] .date-btn.on,
html[data-theme="light"] .week-btn.active,
html[data-theme="light"] .range-btn.active,
html[data-theme="light"] .tab-btn.active,
html[data-theme="light"] .tab-btn.on,
html[data-theme="light"] .fbtn.on,
html[data-theme="light"] .rtbtn.on{
  background:rgba(181,104,80,.10) !important;
  color:#9a583e !important;
  border-color:#c98b71 !important;
}

html[data-theme="light"] .btn-primary,
html[data-theme="light"] .send-btn{
  background:#658589 !important;
  color:#fffdfa !important;
  border-color:#658589 !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .date-input,
html[data-theme="light"] .week-date-input,
html[data-theme="light"] .overview-date-input,
html[data-theme="light"] .manual-input,
html[data-theme="light"] .tgt-input{
  background:#fffdfa !important;
  color:#2d2a27 !important;
  border-color:#d7cdc1 !important;
}

html[data-theme="light"] .loading,
html[data-theme="light"] .empty-msg,
html[data-theme="light"] .footer,
html[data-theme="light"] .note{
  color:#847d74 !important;
}

html[data-theme="light"] .error-msg,
html[data-theme="light"] .error{
  background:rgba(181,104,80,.08) !important;
  border-color:rgba(181,104,80,.28) !important;
  color:#9a583e !important;
}

html[data-theme="light"] #themeToggle{
  background:rgba(255,253,250,.94);
  color:#312d28;
  border-color:#d7cdc1;
}

html[data-theme="light"] #themeToggle:hover{
  color:#111;
  border-color:#9fb3b7;
}