html { accent-color: var(--accent); color-scheme: dark; scrollbar-width: thin; scrollbar-color: var(--t6) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--t6); border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }

.app::before,
.app::after,
body:has(.app)::before,
body:has(.app)::after {
  display: none !important;
  content: none !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

:root {
  --header-h: 56px;
  --sidebar-w: 88px;
  --sidebar-c: 64px;
  --r-panel: 14px;
  --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.28);
  --bg: #0d0f11;
  --bg2: #121416;
  --bg3: #23272c;
  --bg4: #23272c;
  --bg5: #222836;
  --border: rgba(255, 255, 255, 0.06);
  --border-h: rgba(255, 255, 255, 0.10);
  --line: var(--border);
  --line-2: var(--border-h);
  --accent: #a78bfa;
  --accent-s: rgba(167, 139, 250, 0.14);
  --accent-m: rgba(167, 139, 250, 0.22);
  --accent-h: rgba(167, 139, 250, 0.38);
  --accent-hot: #a78bfa;
  --accent-deep: #8b5cf6;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --ok: var(--green);
  --warn: var(--amber);
  --bad: var(--red);
  --ok-mute: rgba(34, 197, 94, 0.12);
  --warn-mute: rgba(245, 158, 11, 0.12);
  --bad-mute: rgba(239, 68, 68, 0.12);
  --t1: #f3f1ea;
  --t2: #c8c5bc;
  --t3: #9a968c;
  --t4: #6f6c65;
  --t5: #3e4050;
  --t6: rgba(255, 255, 255, 0.12);
  --t7: rgba(255, 255, 255, 0.06);
  --ink: var(--t1);
  --ink-2: var(--t2);
  --ink-3: var(--t3);
  --ink-4: var(--t4);
  --on-accent: #fff;
  --p1: var(--accent-hot);
  --sd-ff: "Inter", ui-sans-serif, system-ui, sans-serif;
  --sd-fm: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --ff: var(--sd-ff);
  --fm: var(--sd-fm);
  --font: var(--ff);
  --mono: var(--fm);
}

html.light {
  color-scheme: light;
  --bg: #f5f5f7;
  --bg2: #f3f1ea;
  --bg3: #e4e4e8;
  --bg4: #d8d8dd;
  --bg5: #cdcdd3;
  --border: #c8c5bc;
  --border-h: #b8b8c0;
  --accent: #a78bfa;
  --accent-s: rgba(167, 139, 250, 0.12);
  --accent-m: rgba(167, 139, 250, 0.18);
  --accent-h: rgba(167, 139, 250, 0.32);
  --accent-hot: #a78bfa;
  --accent-deep: #8b5cf6;
  --t1: #23272c;
  --t2: #3a3a4e;
  --t3: #6a6a7e;
  --t4: #9a968c;
  --t5: #b0b0be;
  --t6: rgba(0, 0, 0, 0.10);
  --t7: rgba(0, 0, 0, 0.05);
  --on-accent: #0b0912;
}

body,
.app,
.app .main,
body .content {
  background: var(--bg) !important;
  color: var(--t2);
  font-family: var(--ff);
}
body .content { padding: 16px 20px 28px; }

body .panel,
body .db-panel,
body .dep-panel,
body .sip-panel,
body .rt-panel,
body .p1d-panel,
body .card {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-panel, 14px) !important;
  box-shadow: var(--shadow-panel, 0 8px 24px rgba(0, 0, 0, 0.28)) !important;
  backdrop-filter: none !important;
  filter: none !important;
}
body .panel-head,
body .db-panel-h,
body .dep-panel-h,
body .sip-panel-h,
body .rt-panel-h {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 9px 12px !important;
}
body .panel-head h2,
body .db-panel-h h2,
body .dep-panel-h h2,
body .sip-panel-h h2,
body .rt-panel-h h2 {
  color: var(--t2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
body .panel-head .meta,
body .db-panel-h .meta,
body .dep-panel-h .meta,
body .sip-panel-h .meta,
body .rt-panel-h .meta,
body .page-desc,
body .sub,
body .brand-sub,
body .crumb-kicker,
body .section-desc,
body .panel-sub,
body .field-hint {
  color: var(--t4) !important;
}
body .page-title,
body .db-top h1,
body .sip-top h1,
body .rt-top h1,
body .dep-top h1 {
  color: var(--t1) !important;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 2px !important;
}
body .page-desc { margin: 0; }
body .db-kpi .lab svg,
body .db-quick .ico svg {
  width: 12px !important;
  height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
}

body .sidebar {
  background: var(--bg2) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}
body .sidebar-brand {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg2) !important;
}
body .sidebar-brand .logo,
body .sidebar-brand .brand-mark span,
body .sidebar-brand .brand-name {
  background: none !important;
  -webkit-text-fill-color: var(--t1) !important;
  color: var(--t1) !important;
  text-shadow: none !important;
}
body .sidebar-brand .brand-mark {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: var(--accent-m) !important;
  border: 1px solid var(--accent-h) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
body .sidebar-section-label {
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t5) !important;
  padding: 10px 12px 4px;
}
body .sidebar-nav a,
body .sidebar-nav .nav-item {
  color: var(--t4) !important;
  border-radius: 8px !important;
  position: relative;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 34px;
}
body .sidebar-nav a:hover,
body .sidebar-nav .nav-item:hover {
  background: var(--t7) !important;
  color: var(--t2) !important;
  transform: none !important;
}
body .sidebar-nav a.active,
body .sidebar-nav a[aria-current="page"],
body .sidebar-nav .nav-item.active {
  background: var(--accent-s) !important;
  color: var(--accent) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body .sidebar-nav a.active::before,
body .sidebar-nav a[aria-current="page"]::before,
body .sidebar-nav .nav-item.active::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 0 3px 3px 0;
  background: var(--accent) !important;
  box-shadow: none !important;
}
body .sidebar-nav a.active .icon,
body .sidebar-nav a.active .nav-icon,
body .sidebar-nav .nav-item.active .icon {
  background: var(--accent-m) !important;
  border-color: transparent !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
body .sidebar-nav .icon,
body .sidebar-nav .nav-icon {
  background: var(--bg4) !important;
  border: 1px solid var(--border) !important;
  color: var(--t3) !important;
  box-shadow: none !important;
  border-radius: 7px !important;
}
body .sidebar-nav a:hover .icon { color: var(--t2) !important; }
body .sidebar-foot {
  border-top: 1px solid var(--border) !important;
  background: var(--bg2) !important;
}
body .avatar,
body .profile-avatar {
  background: var(--accent-m) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  border: 1px solid var(--accent-h) !important;
}
body .sidebar-user .name { color: var(--t1) !important; }
body .sidebar-user .company { color: var(--t4) !important; }
body .logout-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--t4) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
body .logout-btn:hover {
  color: var(--red) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
body .collapse-toggle,
body .menu-toggle {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--t3) !important;
  box-shadow: none !important;
}
body .collapse-toggle:hover,
body .menu-toggle:hover {
  border-color: var(--border-h) !important;
  color: var(--t1) !important;
}
body .badge.live {
  background: var(--green) !important;
  color: #041208 !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.45) !important;
  font-size: 9px !important;
  letter-spacing: 0.06em;
}

body .header {
  height: 56px !important;
  min-height: 56px !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  gap: 12px !important;
}
body .header .right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
}

/* Route + balance: same chrome, same height, same type */
body .hdr-chip,
body .rate-chip,
body .balance-wrap {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 8px 0 8px !important;
  gap: 8px !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--t1) !important;
  line-height: 1 !important;
  transform: none !important;
}
body .rate-chip {
  padding: 0 12px 0 8px !important;
  color: var(--accent-hot) !important;
  text-decoration: none !important;
}
body .balance-wrap {
  padding: 0 4px 0 8px !important;
}
body .rate-chip:hover,
body .hdr-chip:hover {
  border-color: var(--border-h) !important;
  background: var(--bg4) !important;
  transform: none !important;
}
body .hdr-chip-ico,
body .rate-chip-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  color: var(--accent) !important;
  opacity: 1 !important;
}
body .hdr-chip-ico svg,
body .rate-chip-ico svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}
body .hdr-chip-text,
body .rate-chip-text,
body .balance,
body .balance-wrap #headerBalance {
  font-family: var(--fm) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--t1) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap !important;
}
body .rate-chip .hdr-chip-text,
body .rate-chip-text {
  color: var(--accent-hot) !important;
}
body .balance-meta { display: none !important; }
body .balance-wrap .currency { color: var(--t4) !important; font-weight: 650 !important; margin-right: 1px; }
body .breadcrumb .current { color: var(--t1) !important; }
body .breadcrumb .sep { color: var(--t5) !important; }

body .add-funds-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body .add-funds-btn:hover,
body .add-funds-btn.needs-funds {
  background: var(--accent-hot) !important;
  transform: none !important;
  box-shadow: 0 0 0 3px var(--accent-s) !important;
}
body .add-funds-btn svg { color: #fff !important; stroke: #fff !important; width: 12px !important; height: 12px !important; }

body .btn,
body .sip-btn,
body .dep-btn,
body .rt-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px !important;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}
body .btn-sm { height: 28px; padding: 0 10px; font-size: 11px; }
body .btn-primary,
body .sip-btn.primary,
body .dep-btn.primary,
body .rt-btn.primary {
  background: var(--accent) !important;
  border: 0 !important;
  color: #fff !important;
}
body .btn-primary:hover,
body .sip-btn.primary:hover,
body .dep-btn.primary:hover,
body .rt-btn.primary:hover:not(:disabled) {
  background: var(--accent-hot) !important;
  color: #fff !important;
  transform: none !important;
  filter: none !important;
}
body:has(#startCampaignBtn) .btn-primary,
body:has(#startCampaignBtnInline) .btn-primary {
  background: var(--p1) !important;
}
body:has(#startCampaignBtn) .btn-primary:hover,
body:has(#startCampaignBtnInline) .btn-primary:hover {
  background: #b69dfc !important;
}
body .btn-secondary,
body .sip-btn:not(.primary):not(.ghost),
body .dep-btn:not(.primary):not(.ghost),
body .rt-btn:not(.primary) {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--t2) !important;
}
body .btn-secondary:hover,
body .sip-btn:not(.primary):hover,
body .dep-btn:not(.primary):hover,
body .rt-btn:hover:not(:disabled):not(.primary) {
  border-color: var(--border-h) !important;
  color: var(--t1) !important;
  background: var(--bg4) !important;
}
body .btn-ghost,
body .sip-btn.ghost,
body .dep-btn.ghost {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--t3) !important;
  box-shadow: none !important;
}
body .btn-ghost:hover,
body .sip-btn.ghost:hover {
  color: var(--t1) !important;
  border-color: var(--border-h) !important;
  background: var(--t7) !important;
}
body .btn-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: var(--red) !important;
  box-shadow: none !important;
}
body .btn-danger:hover {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}
body .btn:disabled,
body .sip-btn:disabled,
body .rt-btn:disabled { opacity: 0.45; cursor: default; }

body .input,
body .select,
body .textarea,
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.rt-search),
body select,
body textarea {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--t1) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 13px;
}
body .input,
body .select,
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.rt-search),
body select {
  height: 34px;
  padding: 0 10px;
}
body .sd-search input,
body .rt-search-wrap input,
body .rt-search {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto;
  padding: 0;
  border-radius: 0 !important;
}
body .textarea { padding: 8px 10px; min-height: 110px; font-family: var(--fm); }
body .input:focus,
body .select:focus,
body .textarea:focus,
body input:focus:not(.rt-search),
body select:focus,
body textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-s) !important;
  outline: none !important;
}
body .sd-search input:focus,
body .rt-search-wrap input:focus,
body .rt-search:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}
body .field-label,
body .filter-label,
body .db-kpi .lab,
body .db-route-item .k,
body .sip-reg-item .k,
body .rt-active .k,
body .kpi-item .label {
  color: var(--t4) !important;
  font-family: var(--fm) !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body .toggle,
body .pd-toggle,
body .p1-toggle {
  width: 36px !important;
  height: 20px !important;
  border-radius: 10px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
body .toggle.active,
body .toggle.on,
body .pd-toggle.on,
body .p1-toggle.on {
  background: var(--accent) !important;
  border-color: transparent !important;
}
body .toggle .knob {
  background: var(--t4) !important;
  box-shadow: none !important;
}
body .toggle.active .knob,
body .toggle.on .knob,
body .toggle.on::after,
body .pd-toggle.on::after,
body .p1-toggle.on::after {
  background: #fff !important;
}
body input[type="range"] { accent-color: var(--accent); }
body input[type="checkbox"],
body input[type="radio"] { accent-color: var(--accent); }

body .db-kpis { gap: 8px !important; }
body .db-kpi,
body .db-route-item,
body .db-quick a,
body .sip-reg-item,
body .stat-card,
body .kpi-item {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body .db-kpi { padding: 10px 12px !important; }
body .db-kpi .val,
body .db-kpi .val.accent,
body .stat-card .value,
body .kpi-item .value,
body .sip-reg-item .v,
body .db-route-item .v,
body .rt-active .v {
  color: var(--t1) !important;
  font-family: var(--fm) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
body .db-kpis .db-kpi:nth-child(1) .lab,
body .db-kpis .db-kpi:nth-child(2) .lab,
body .db-kpis .db-kpi:nth-child(3) .lab,
body .db-kpis .db-kpi:nth-child(4) .lab {
  color: var(--t4) !important;
}
body .db-quick { gap: 8px !important; }
body .db-quick a {
  padding: 10px 12px !important;
}
body .db-quick a:hover,
body .db-kpi:hover {
  border-color: var(--border-h) !important;
  background: var(--bg4) !important;
  transform: none !important;
}
body .db-quick .ico {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-s) !important;
  border: 1px solid var(--accent-h) !important;
  color: var(--accent) !important;
  border-radius: 10px !important;
}
body .db-quick a:nth-child(1) .ico,
body .db-quick a:nth-child(2) .ico,
body .db-quick a:nth-child(3) .ico,
body .db-quick a:nth-child(4) .ico {
  background: var(--accent-s) !important;
  color: var(--accent) !important;
}
body .db-quick .t { color: var(--t1) !important; font-weight: 650; font-size: 12px; }
body .db-icon-btn {
  background: var(--bg4) !important;
  border: 1px solid var(--border) !important;
  color: var(--t3) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

body .kpi-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
body .kpi-item {
  min-width: 72px;
  padding: 8px 10px !important;
  align-items: center;
}
body .kpi-item .value { font-size: 15px; }
body .kpi-item .value.ok { color: var(--green) !important; }
body .kpi-item .value.bad { color: var(--red) !important; }
body .kpi-item .value.accent { color: var(--accent) !important; }

body .xfer-grid { gap: 8px !important; }
body .xfer-card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  text-align: left;
}
body .xfer-card:hover { border-color: var(--border-h) !important; }
body .xfer-card.active {
  background: var(--accent-s) !important;
  border-color: var(--accent) !important;
}
body .xfer-card .title { color: var(--t1) !important; font-weight: 700; font-size: 13px; }
body .xfer-card .desc { color: var(--t4) !important; font-size: 11px; }
body .dtmf-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: none !important;
  width: auto !important;
  grid-template-columns: none !important;
}
body .dtmf-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--t2) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--fm) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
  transform: none !important;
  flex: 0 0 28px !important;
}
body .dtmf-btn::after,
body .dtmf-btn[data-key]::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
}
body .dtmf-btn:hover {
  border-color: var(--border-h) !important;
  background: var(--bg3) !important;
  color: var(--t1) !important;
  transform: none !important;
}
body .dtmf-btn.selected,
body .dtmf-btn[aria-pressed="true"] {
  background: var(--accent-s) !important;
  border-color: var(--accent) !important;
  color: var(--accent-hot) !important;
}
body .dtmf-btn.selected::after,
body .dtmf-btn[aria-pressed="true"]::after { content: none !important; display: none !important; }
body .audio-item,
body .caller-row,
body .failure-item {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
body .audio-item:has(input:checked) {
  border-color: var(--p1) !important;
  background: rgba(167, 139, 250, 0.06) !important;
}
body .audio-item .name { color: var(--t1) !important; font-size: 12px; }
body .p1d-hero {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
body .p1d-hero::before { display: none !important; }
body .p1d-tile,
body .stat-card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body .p1d-tile.connected .p1d-tile-icon,
body .stat-card.running .value { color: var(--green) !important; }
body .p1d-tile.pressed .p1d-tile-icon,
body .stat-card.pressed .value { color: var(--p1) !important; }
body .p1d-tile.failed .p1d-tile-icon,
body .stat-card.failed .value { color: var(--red) !important; }
body .p1d-tile.other .p1d-tile-icon { color: var(--amber) !important; }
body .p1d-tile.connected .p1d-tile-val { color: var(--green) !important; }
body .p1d-tile.pressed .p1d-tile-val { color: var(--p1) !important; }
body .p1d-tile.failed .p1d-tile-val { color: var(--red) !important; }
body .p1d-tile.other .p1d-tile-val { color: var(--amber) !important; }
body .p1d-status.running,
body .badge.running,
body .status-badge[data-state="running"] {
  background: rgba(34, 197, 94, 0.1) !important;
  color: var(--green) !important;
  border-color: rgba(34, 197, 94, 0.28) !important;
}
body .status-badge[data-state="completed"] { color: var(--accent) !important; }
body .status-badge[data-state="stopped"] { color: var(--t4) !important; }
body .status-badge .dot,
body .status-dot.live,
body .tg-status .dot,
body .pref-status .dot {
  background: var(--green) !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5) !important;
}
body .progress-track,
body .p1d-bar,
body .pd-stats-pbar,
body .p1-progress,
body .upload-progress,
body .failure-item .bar-bg {
  background: var(--bg4) !important;
  border-radius: 999px !important;
  overflow: hidden;
  height: 4px;
}
body .progress-fill,
body .upload-progress .bar,
body .p1d-bar-fill,
body .p1-progress-bar,
body .pd-stats-pbar-fill,
body .failure-item .fill {
  background: linear-gradient(90deg, var(--accent), var(--green)) !important;
  box-shadow: none !important;
}
body .running-pill strong,
body .lead-count strong,
body .progress-top .of { color: var(--t1) !important; font-family: var(--fm); }
body .pill.calling,
body .pill.ringing { background: rgba(167, 139, 250, 0.12); color: var(--accent); border: 1px solid var(--accent-h); }
body .pill.live { background: rgba(34, 197, 94, 0.12); color: var(--green); }
body .pill.no_answer,
body .pill.voicemail,
body .pill.no_press { background: var(--bg4); color: var(--t4); }

body .sip-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
}
body .sip-tab {
  height: 28px;
  padding: 0 10px;
  border: 0 !important;
  background: transparent !important;
  color: var(--t4) !important;
  border-radius: 6px !important;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none !important;
}
body .sip-tab:hover { color: var(--t2) !important; background: var(--t7) !important; }
body .sip-tab.on {
  color: var(--accent) !important;
  background: var(--accent-s) !important;
}
body .sip-connect-bar,
body .sip-tools,
body .sip-tool {
  gap: 8px;
}
body .sip-msg { font-size: 12px; color: var(--t3); }
body .route-card.selected,
body .rt-card.on,
body .rt-table tr.is-on td {
  background: var(--accent-s) !important;
  border-color: var(--accent) !important;
}
body .rt-tag {
  background: var(--accent-s) !important;
  border: 1px solid var(--accent-h) !important;
  color: var(--accent) !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body .rt-search-wrap {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  height: 44px !important;
  min-height: 44px !important;
}
body .rt-search-wrap:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-s) !important;
}

body .dep-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
body .dep-chips button {
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  color: var(--t2) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
body .dep-chips button:hover,
body .dep-chips button.on,
body .dep-chips button.active {
  background: var(--accent-s) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
body .dep-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
body .dep-asset {
  text-align: left;
  padding: 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  box-shadow: none !important;
}
body .dep-asset.on {
  background: var(--accent-s) !important;
  border-color: var(--accent) !important;
}
body .dep-crypto {
  font-family: var(--fm);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--t1) !important;
}
body .dep-copy .val {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-family: var(--fm) !important;
  font-size: 11px !important;
  color: var(--t1) !important;
}
body .dep-qr {
  padding: 8px !important;
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
body .dep-qr svg,
body .dep-qr img { width: 132px; height: 132px; display: block; }
body .dep-qr-cap {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t4);
  text-align: center;
  font-family: var(--fm);
}
body .dep-status {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-transform: uppercase;
}
body .dep-status.waiting,
body .dep-status.confirming { color: var(--amber); border-color: rgba(245, 158, 11, 0.35); }
body .dep-status.finished,
body .dep-status.confirmed { color: var(--green); border-color: rgba(34, 197, 94, 0.35); }
body .dep-status.failed,
body .dep-status.expired,
body .dep-status.refunded { color: var(--red); border-color: rgba(239, 68, 68, 0.35); }
body .dep-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 12px;
}
body .dep-pay-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

body .table,
body .cdr-table,
body .db-table,
body .dep-table,
body .sip-table,
body .rt-table {
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg2) !important;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
body .table thead,
body .cdr-table thead,
body .db-table thead,
body .dep-table thead,
body .sip-table thead,
body .rt-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
body .db-table th,
body .dep-table th,
body .sip-table th,
body .cdr-table th,
body .rt-table th,
body .table th {
  background: var(--bg4) !important;
  color: var(--t4) !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 10px !important;
}
body .db-table td,
body .dep-table td,
body .sip-table td,
body .cdr-table td,
body .rt-table td,
body .table td {
  color: var(--t2) !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  padding: 8px 10px !important;
  font-size: 12px;
}
body .db-table tbody tr:hover td,
body .dep-table tbody tr:hover td,
body .sip-table tbody tr:hover td,
body .cdr-table tbody tr:hover td,
body .rt-table tr:hover td,
body .table tbody tr:hover td {
  background: var(--bg4) !important;
}
body .db-table-wrap,
body .sip-table-wrap,
body .rt-table-wrap,
body .table-scroll {
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  overflow: auto;
}

body .badge,
body .status-pill,
body .cdr-method,
body .billing-badge,
body .chip-accent {
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none !important;
}
body .chip-accent {
  background: var(--accent-s) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-h) !important;
}
body .dropdown,
body .menu,
body .lang-menu,
body .rh-lang-menu {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}
body .toast {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--t1) !important;
  backdrop-filter: none !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  border-radius: 10px !important;
}
body .toast.ok,
body .toast.success { border-color: rgba(34, 197, 94, 0.35) !important; }
body .toast.err,
body .toast.error { border-color: rgba(239, 68, 68, 0.35) !important; }
body .filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
body .pager { gap: 6px; }
body .privacy-note,
body .xfer-privacy,
body .billing-note,
body .amd-hint,
body .audio-empty,
body .failure-empty,
body .sip-empty,
body .rt-empty,
body .dep-pay.empty {
  color: var(--t4) !important;
  font-size: 12px;
}
body .settings-stack .panel { margin-bottom: 10px; }
body .input-ico .ico { color: var(--t4) !important; }
body .msg-box { font-size: 12px; color: var(--t3); }
body .head-ico { color: var(--accent) !important; width: 14px; height: 14px; }

html.light .btn-primary,
html.light .sip-btn.primary,
html.light .dep-btn.primary,
html.light .rt-btn.primary,
html.light .add-funds-btn { color: #fff !important; }
html.light .dep-qr { background: #fff !important; }

body .sidebar-nav .icon,
body .sidebar-nav .nav-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex: 0 0 22px !important;
}
body .sidebar-nav .icon svg,
body .sidebar-nav .nav-icon svg,
body .sidebar-nav a svg,
body .logout-btn svg,
body .collapse-toggle svg,
body .menu-toggle svg,
body .rate-chip-ico svg,
body .add-funds-btn svg,
body .btn svg,
body .icon-btn svg,
body .copy-btn svg,
body .db-icon-btn svg,
body .db-quick .ico svg,
body .db-kpi .lab svg,
body .privacy-note svg,
body .xfer-privacy svg,
body .rt-search-wrap svg,
body .header svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  min-width: 0;
  display: block !important;
  flex: none !important;
}
body .add-funds-btn svg {
  width: 11px !important;
  height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;
}
body .btn-sm svg {
  width: 12px !important;
  height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
}
body .dep-qr svg,
body .dep-qr img {
  width: 196px !important;
  height: 196px !important;
  max-width: 196px !important;
  max-height: 196px !important;
}
body .sidebar-brand .brand-mark {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
body .sidebar-brand .brand-mark span {
  font-family: var(--fm) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  color: var(--accent) !important;
}
body .sidebar-brand .logo,
body .sidebar-brand .brand-name {
  font-family: var(--ff) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--t1) !important;
}
body .sidebar-brand .brand-sub {
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  color: var(--t5) !important;
}
body .sidebar-nav a,
body .sidebar-nav .nav-item {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 8px 0 10px !important;
  gap: 9px !important;
  font-size: 13px !important;
  font-weight: 550 !important;
}
body .sidebar-nav a .nav-label {
  font-size: 13px !important;
  font-weight: 550 !important;
  letter-spacing: -0.01em !important;
}
body .sidebar-nav a .badge.live {
  height: 16px !important;
  padding: 0 6px !important;
  font-size: 8px !important;
  border-radius: 999px !important;
  line-height: 16px !important;
}
body .sidebar-user .avatar,
body .avatar {
  width: 26px !important;
  height: 26px !important;
  font-size: 10px !important;
  border-radius: 7px !important;
}
body .logout-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}
body .icon-btn {
  width: 24px !important;
  height: 24px !important;
  transform: none !important;
}
body .icon-btn:hover { transform: none !important; }
body .db-quick a:hover .ico,
body .sidebar-nav a:hover .icon { transform: none !important; }

body .p1d-hero {
  padding: 12px !important;
  border-radius: 10px !important;
  background: var(--bg2) !important;
  box-shadow: none !important;
}
body .p1d-hero::before,
body .p1d-hero::after { display: none !important; content: none !important; }
body .p1d-hero-title {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  color: var(--t4) !important;
  font-weight: 700 !important;
}
body .p1d-hero-counts .big { font-size: 22px !important; line-height: 1 !important; }
body .p1d-tile,
body .p1d-tile:hover {
  padding: 8px 9px !important;
  border-radius: 8px !important;
  transform: none !important;
  box-shadow: none !important;
  animation: none !important;
}
body .p1d-tile::before,
body .p1d-tile::after { display: none !important; content: none !important; width: 0 !important; }
body .p1d-tile-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 20px !important;
}
body .p1d-tile-icon svg,
body .p1d-tile svg {
  width: 11px !important;
  height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  display: block !important;
}
body .p1d-tile-val { font-size: 15px !important; }
body .p1d-tile-lbl { font-size: 10px !important; }
body .p1d-status {
  height: 22px !important;
  padding: 0 8px !important;
  font-size: 9px !important;
  backdrop-filter: none !important;
}
body .p1d-status-ico {
  width: 6px !important;
  height: 6px !important;
  box-shadow: none !important;
}
body .p1-ops .progress-track { height: 4px !important; }
body #startCampaignBtn svg,
body #startCampaignBtnInline svg,
body #stopCampaignBtn svg,
body #stopCampaignBtnInline svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
}

body .db-kpi,
body .db-quick a,
body .sip-card,
body .route-card,
body .dep-asset,
body .dep-card {
  transform: none !important;
  box-shadow: none !important;
}
body .db-kpi:hover,
body .db-quick a:hover,
body .sip-card:hover,
body .route-card:hover,
body .dep-asset:hover,
body .p1d-tile:hover {
  transform: none !important;
}
body .db-kpi::before,
body .stat-card::before { display: none !important; }

body .input:focus,
body .select:focus,
body .textarea:focus,
body .sip-input:focus,
body .rt-search-wrap:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-s) !important;
  outline: none !important;
}

body .crumb-kicker {
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--t5) !important;
}
body .breadcrumb { font-size: 13px !important; }
body .breadcrumb a { color: var(--t4) !important; }
body .header .nav-left { gap: 10px; }
body .menu-toggle {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}

body .kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body .kpi-item {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  box-shadow: none !important;
  min-width: 110px;
}
body .kpi-item .label,
body .kpi-item .lab {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--t4) !important;
}
body .kpi-item .value,
body .kpi-item .val {
  font-family: var(--fm) !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  color: var(--t1) !important;
  font-variant-numeric: tabular-nums;
}

body .empty-state svg,
body .db-empty svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  color: var(--t5) !important;
}

html.light body .p1d-tile-icon { background: #e4e4e8 !important; }

@media (max-width: 900px) {
  body .dep-stage,
  body .dep-pay-body { grid-template-columns: 1fr; }
  body .content { padding: 12px 12px 24px; }
}
html, body {
  background: #0d0f11 !important;
  color: #c8c5bc !important;
}
body .skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  z-index: 10000 !important;
}
body .skip-link:focus,
body .skip-link:focus-visible {
  left: 12px !important;
  top: 12px !important;
  overflow: visible !important;
  color: #fff !important;
  background: var(--accent) !important;
}
body .app {
  display: grid !important;
  grid-template-columns: var(--sidebar-w) 1fr !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  background: var(--bg) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body .app.sidebar-collapsed,
body .app:has(.sidebar.collapsed) {
  grid-template-columns: 64px 1fr !important;
}
body .sidebar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #121416 !important;
}
body .main {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #0d0f11 !important;
}
body .header {
  --header-h: 56px;
  height: 56px !important;
  min-height: 56px !important;
  align-items: center !important;
}
body .header .nav-left {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 36px !important;
}
body .header .crumb-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
  line-height: 1 !important;
}
body .header .right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
  flex: 0 0 auto !important;
}
body .hdr-chip,
body a.rate-chip,
body .rate-chip,
body .balance-wrap {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  gap: 8px !important;
  margin: 0 !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}
body a.rate-chip,
body .rate-chip {
  padding: 0 12px 0 10px !important;
  color: var(--accent-hot) !important;
  text-decoration: none !important;
}
body .balance-wrap {
  padding: 0 4px 0 10px !important;
}
body .hdr-chip-ico,
body .rate-chip-ico,
body .balance-wrap > .hdr-chip-ico {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--accent) !important;
}
body .hdr-chip-text,
body .rate-chip-text,
body .balance-wrap .balance,
body .balance-wrap #headerBalance {
  display: inline-flex !important;
  align-items: center !important;
  height: 16px !important;
  font-family: var(--fm) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap !important;
}
body .rate-chip-text,
body .rate-chip .hdr-chip-text {
  color: var(--accent-hot) !important;
}
body .balance-wrap .balance,
body .balance-wrap #headerBalance {
  color: var(--t1) !important;
}
body .add-funds-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 7px !important;
  margin: 0 !important;
  flex: 0 0 26px !important;
}
body .hdr-chip:hover,
body a.rate-chip:hover,
body .rate-chip:hover,
body .balance-wrap:hover {
  transform: none !important;
  border-color: var(--border-h) !important;
}
body a.rate-chip:focus-visible,
body .add-funds-btn:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}