/* Dark mode — semantic tokens in tokens.css; component bases use theme-aware vars. */

[data-theme="dark"] ::selection {
  background: rgba(20, 184, 166, 0.28);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #374151;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* ---------- Global form primitives ---------- */
[data-theme="dark"] textarea,
[data-theme="dark"] .field textarea {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] textarea::placeholder {
  color: var(--input-placeholder);
}
[data-theme="dark"] .field__label {
  color: var(--text-secondary);
}

/* ---------- Forms & buttons ---------- */
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .ord-search,
[data-theme="dark"] .ord-search__input,
[data-theme="dark"] .yp-search-field,
[data-theme="dark"] .bp-country__search-input,
[data-theme="dark"] .dc-search__input,
[data-theme="dark"] .pd-fp__search-input {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--input-placeholder);
}
[data-theme="dark"] .input--readonly {
  background: var(--surface-muted);
  border-color: var(--border-soft);
  color: var(--text-secondary);
}
[data-theme="dark"] .btn {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* Secondary: brand outline — teal text/border, dark fill. One step below solid primary. */
[data-theme="dark"] .btn--secondary {
  background: transparent;
  border-color: var(--primary-border);
  color: var(--primary-text);
}
[data-theme="dark"] .btn--secondary:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-text);
}
[data-theme="dark"] .btn--secondary:disabled,
[data-theme="dark"] .btn--secondary.is-disabled,
[data-theme="dark"] .btn--secondary:disabled:hover {
  background: transparent;
  border-color: var(--border);
  color: var(--text-disabled);
  opacity: 1;
}
[data-theme="dark"] a.btn--secondary,
[data-theme="dark"] a.btn--secondary:hover,
[data-theme="dark"] a.btn--secondary:visited { color: var(--primary-text); }

/* Utility: neutral navy outline — copy, download, cancel, view. */
[data-theme="dark"] .btn--utility {
  background: var(--surface-interactive);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
[data-theme="dark"] .btn--utility:hover {
  background: var(--hover);
  border-color: #4b5563;
  color: var(--text);
}
[data-theme="dark"] .btn--utility:disabled,
[data-theme="dark"] .btn--utility.is-disabled,
[data-theme="dark"] .btn--utility:disabled:hover {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-disabled);
  opacity: 1;
}
[data-theme="dark"] a.btn--utility,
[data-theme="dark"] a.btn--utility:hover,
[data-theme="dark"] a.btn--utility:visited { color: var(--text-secondary); }

[data-theme="dark"] .btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
[data-theme="dark"] .btn--ghost:hover {
  background: var(--hover);
  color: var(--text);
}
[data-theme="dark"] .icon-btn { color: var(--text-muted); }
[data-theme="dark"] .icon-btn:hover { background: var(--hover); color: var(--text); }

[data-theme="dark"] .btn.is-copied,
[data-theme="dark"] .btn.is-copied:hover {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok-text);
}

[data-theme="dark"] .btn--primary:disabled,
[data-theme="dark"] .btn--primary:disabled:hover {
  opacity: 1;
  background: var(--surface-muted);
  border-color: var(--border-soft);
  color: var(--text-disabled);
}
[data-theme="dark"] .badge--ok {
  background: var(--ok-soft);
  border-color: transparent;
  color: var(--ok-text);
}
[data-theme="dark"] .badge--warn {
  background: var(--warn-soft);
  border-color: transparent;
  color: var(--warn-text);
}
[data-theme="dark"] .badge--danger {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger-text);
}
[data-theme="dark"] .badge--neutral,
[data-theme="dark"] .badge--info {
  background: var(--neutral-soft);
  border-color: transparent;
  color: var(--neutral);
}
[data-theme="dark"] .menu {
  background: var(--surface-elevated);
  border-color: var(--border);
  box-shadow: var(--shadow-overlay);
}
[data-theme="dark"] .menu__item {
  color: var(--text);
}
[data-theme="dark"] .menu__item:hover,
[data-theme="dark"] .menu__item:focus-visible {
  background: var(--primary-soft);
  color: var(--primary-text);
}
[data-theme="dark"] .menu__sep {
  background: var(--divider);
}

/* ---------- Shell ---------- */
[data-theme="dark"] .sidebar {
  background: var(--bg);
  border-right-color: var(--border);
}
[data-theme="dark"] .sidebar__brand {
  background: var(--bg);
  border-bottom-color: var(--border);
  box-shadow: none;
}
[data-theme="dark"] .nav-section__label {
  color: var(--text-muted);
}
[data-theme="dark"] .nav-item.is-active {
  background: var(--primary-soft);
  color: var(--primary-text);
}
[data-theme="dark"] .nav-backdrop {
  background: var(--backdrop);
}
[data-theme="dark"] .topbar {
  box-shadow: none;
  background: var(--topbar-elevated);
  border-bottom-color: var(--topbar-border);
}
[data-theme="dark"] .topbar__brand-mark,
[data-theme="dark"] .brand-mark {
  background: #e8ebef;
  color: #0b1220;
}
[data-theme="dark"] .topbar-balance {
  border-color: var(--topbar-line);
  background: var(--topbar-chip);
}
[data-theme="dark"] .topbar-balance__label {
  color: var(--text-muted);
}
[data-theme="dark"] .topbar-balance__amount {
  color: var(--text);
}
[data-theme="dark"] .topbar-funds {
  background: var(--primary);
  border-color: var(--primary-active);
  color: var(--text-on-primary);
}
[data-theme="dark"] .topbar-funds:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
[data-theme="dark"] .topbar-funds:active {
  background: var(--primary-active);
  border-color: var(--primary-active);
}
[data-theme="dark"] .topbar__cluster,
[data-theme="dark"] .topbar__chrome {
  border-color: var(--topbar-line);
  background: var(--topbar-chip);
}
[data-theme="dark"] .topbar-action,
[data-theme="dark"] .topbar-account {
  color: var(--text-secondary);
}
[data-theme="dark"] .topbar-action:hover,
[data-theme="dark"] .topbar-account:hover {
  background: var(--hover);
  color: var(--text);
}

/* ---------- Page chrome ---------- */
[data-theme="dark"] .page-title,
[data-theme="dark"] .ord .page-title,
[data-theme="dark"] .bill .page-title,
[data-theme="dark"] .set .page-title,
[data-theme="dark"] .ps .page-title,
[data-theme="dark"] .ov-section__title,
[data-theme="dark"] .bp > .page-header .page-title {
  color: var(--text);
}
[data-theme="dark"] .page-desc,
[data-theme="dark"] .ord .page-desc,
[data-theme="dark"] .bill .page-desc,
[data-theme="dark"] .set .page-desc,
[data-theme="dark"] .ps .page-desc,
[data-theme="dark"] .ov-section__desc,
[data-theme="dark"] .bp > .page-header .page-desc {
  color: var(--text-secondary);
}

/* ---------- Overview ---------- */
[data-theme="dark"] .ov-metric,
[data-theme="dark"] .ov-product,
[data-theme="dark"] .ov-action {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .ov-metric.is-balance {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}
[data-theme="dark"] .ov-product__name,
[data-theme="dark"] .ov-product__stat,
[data-theme="dark"] .ov-metric__value,
[data-theme="dark"] .ov-action__title {
  color: var(--text);
}
[data-theme="dark"] .ov-product__meta,
[data-theme="dark"] .ov-metric__hint,
[data-theme="dark"] .ov-action__desc {
  color: var(--text-secondary);
}
[data-theme="dark"] .ov-product__manage {
  background: var(--primary-soft);
  color: var(--primary-text);
}
[data-theme="dark"] .ov-product.is-empty {
  background: var(--surface-muted);
}

/* ---------- Orders ---------- */
[data-theme="dark"] .ord-panel {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}
[data-theme="dark"] .ord-toolbar {
  background: var(--surface-header);
  border-bottom-color: var(--border-soft);
}
[data-theme="dark"] .ord-table th {
  background: var(--surface-muted);
  border-bottom-color: var(--border-soft);
  color: var(--text-muted);
}
[data-theme="dark"] .ord-table td {
  border-bottom-color: var(--divider);
  color: var(--text);
}
[data-theme="dark"] .ord-table tbody tr:hover td {
  background: var(--surface-row-hover);
}
[data-theme="dark"] .ord-product__name,
[data-theme="dark"] .ord-order-id,
[data-theme="dark"] .ord-amount,
[data-theme="dark"] .ord-drawer__product,
[data-theme="dark"] .ord-drawer__row strong,
[data-theme="dark"] .ord-drawer__row--total span {
  color: var(--text);
}
[data-theme="dark"] .ord-product__action,
[data-theme="dark"] .ord-details,
[data-theme="dark"] .ord-drawer__summary,
[data-theme="dark"] .ord-drawer__row span {
  color: var(--text-secondary);
}
[data-theme="dark"] .ord-badge--ok {
  background: var(--ok-soft);
  color: var(--ok-text);
}
[data-theme="dark"] .ord-badge--warn {
  background: var(--warn-soft);
  color: var(--warn-text);
}
[data-theme="dark"] .ord-badge--danger {
  background: var(--danger-soft);
  color: var(--danger-text);
}
[data-theme="dark"] .ord-badge--neutral {
  background: var(--neutral-soft);
  color: var(--neutral);
}
[data-theme="dark"] .ord-pager,
[data-theme="dark"] .ord-drawer__meta,
[data-theme="dark"] .ord-drawer__row--total {
  border-color: var(--divider);
}
[data-theme="dark"] .ord-pager__num.is-active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}
[data-theme="dark"] .ord-drawer-backdrop {
  background: var(--backdrop);
}
[data-theme="dark"] .ord-drawer {
  background: var(--surface-elevated);
  border-left-color: var(--border);
}
[data-theme="dark"] .ord-card,
[data-theme="dark"] .ord-empty,
[data-theme="dark"] .ord-error {
  border-color: var(--border);
  background: var(--surface);
}
[data-theme="dark"] .ord-skel__bar,
[data-theme="dark"] .ord-skel__row {
  background: var(--surface-muted);
}

/* ---------- Billing ---------- */
[data-theme="dark"] .bill-card,
[data-theme="dark"] .bill-panel {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
[data-theme="dark"] .bill-card h2,
[data-theme="dark"] .bill-card__hint,
[data-theme="dark"] .bill-card__desc,
[data-theme="dark"] .bill-split__label,
[data-theme="dark"] .bill-panel__head p,
[data-theme="dark"] .bill-empty,
[data-theme="dark"] .bill-txn__foot span:first-child {
  color: var(--text-muted);
}
[data-theme="dark"] .bill-split__value,
[data-theme="dark"] .bill-panel__head h2,
[data-theme="dark"] .bill-card__value,
[data-theme="dark"] .bill-txn__top span:first-child {
  color: var(--text);
}
[data-theme="dark"] .bill-panel__head,
[data-theme="dark"] .bill-table th,
[data-theme="dark"] .bill-table td,
[data-theme="dark"] .bill-txn {
  border-color: var(--border);
}
[data-theme="dark"] .bill-table th {
  background: var(--surface);
  color: var(--text-muted);
}
[data-theme="dark"] .bill-desc {
  color: var(--text-secondary);
}
[data-theme="dark"] .bill-amount {
  color: var(--text);
}
[data-theme="dark"] .bill-amount.is-credit {
  color: var(--ok-text);
}

/* ---------- Settings / Account ---------- */
[data-theme="dark"] .set-tabs {
  background: var(--surface-muted);
  border-color: var(--border-soft);
}
[data-theme="dark"] .set-tabs__item {
  color: var(--text-secondary);
}
[data-theme="dark"] .set-tabs__item:hover,
[data-theme="dark"] .set-tabs__item.is-active {
  background: var(--surface-interactive);
  color: var(--primary-text);
  box-shadow: none;
}
[data-theme="dark"] .set-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
[data-theme="dark"] .set-card__title,
[data-theme="dark"] .set-email-value,
[data-theme="dark"] .set-auth-row__title,
[data-theme="dark"] .set-auth-row__meta {
  color: var(--text);
}
[data-theme="dark"] .set-card__desc,
[data-theme="dark"] .set-field__hint,
[data-theme="dark"] .set-auth-row__hint {
  color: var(--text-muted);
}
[data-theme="dark"] .set-form__foot,
[data-theme="dark"] .set-email-block {
  border-top-color: var(--divider);
}
[data-theme="dark"] .set-email-panel,
[data-theme="dark"] .set-auth-row {
  background: var(--surface-muted);
  border-color: var(--border-soft);
}
[data-theme="dark"] .set-auth-row__icon {
  background: var(--surface-interactive);
  border-color: var(--border-soft);
}
[data-theme="dark"] .set-theme-opt {
  background: var(--surface-muted);
  border-color: var(--border-soft);
  color: var(--text-secondary);
}
[data-theme="dark"] .set-theme-opt:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
[data-theme="dark"] .set-theme-opt.is-active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

/* ---------- Payments (modals) ---------- */
[data-theme="dark"] .pay-overlay {
  background: var(--backdrop);
}
[data-theme="dark"] .pay-modal {
  background: var(--surface-elevated);
  border-color: var(--border);
  box-shadow: var(--shadow-overlay);
}
[data-theme="dark"] .pay-modal__head {
  border-bottom-color: var(--divider);
}
[data-theme="dark"] .pay-modal__foot {
  border-top-color: var(--divider);
}
[data-theme="dark"] .pay-modal h2,
[data-theme="dark"] .pay-rows dd,
[data-theme="dark"] .pay-method__title,
[data-theme="dark"] .pay-summary-card strong {
  color: var(--text);
}
[data-theme="dark"] .pay-modal__head p,
[data-theme="dark"] .pay-rows dt,
[data-theme="dark"] .pay-method__desc,
[data-theme="dark"] .pay-hint,
[data-theme="dark"] .pay-summary-card__line,
[data-theme="dark"] .pay-summary-card__meta,
[data-theme="dark"] .pay-summary-card__total dt {
  color: var(--text-secondary);
}
[data-theme="dark"] .pay-kicker,
[data-theme="dark"] .pay-method__fine,
[data-theme="dark"] .pay-rows--muted dt,
[data-theme="dark"] .pay-rows--muted dd {
  color: var(--text-muted);
}
[data-theme="dark"] .pay-modal__x {
  color: var(--text-muted);
}
[data-theme="dark"] .pay-modal__x:hover {
  color: var(--text);
  background: var(--hover);
}
[data-theme="dark"] .pay-summary-card,
[data-theme="dark"] .pay-confirm-card {
  background: var(--surface-muted);
  border-color: var(--border-soft);
}
[data-theme="dark"] .pay-summary-card__total {
  border-top-color: var(--divider);
}
[data-theme="dark"] .pay-method,
[data-theme="dark"] .pay-amount {
  background: var(--surface-interactive);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .pay-method:hover:not(.is-active) {
  background: var(--hover);
  border-color: var(--border-strong);
}
[data-theme="dark"] .pay-method__icon {
  background: var(--surface-muted);
  color: var(--text-secondary);
}
[data-theme="dark"] .pay-method.is-active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.12);
}
[data-theme="dark"] .pay-method.is-active .pay-method__icon {
  background: rgba(20, 184, 166, 0.14);
  color: var(--primary-text);
}
[data-theme="dark"] .pay-amount.is-active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}
[data-theme="dark"] .pay-badge {
  background: transparent;
  border-color: var(--border-soft);
  color: var(--text-muted);
}

/* ---------- Buy Proxies ---------- */
[data-theme="dark"] .bp-product-card {
  background: var(--surface-interactive);
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="dark"] .bp-product-card:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}
[data-theme="dark"] .bp-product-card.is-active,
[data-theme="dark"] .bp-product-card.is-active:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}
[data-theme="dark"] .bp-product-card__icon {
  background: var(--surface-muted);
  color: var(--text-muted);
}
[data-theme="dark"] .bp-product-card.is-active .bp-product-card__icon {
  background: var(--primary-soft);
  color: var(--primary-text);
}
[data-theme="dark"] .bp-panel,
[data-theme="dark"] .bp-summary,
[data-theme="dark"] .bp-msum,
[data-theme="dark"] .bp-rsum,
[data-theme="dark"] .bp-isum,
[data-theme="dark"] .bp-confirm__card,
[data-theme="dark"] .bp-toast {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .bp-msum {
  background: var(--surface-muted);
}
[data-theme="dark"] .bp-option,
[data-theme="dark"] .bp-mpick,
[data-theme="dark"] .bp-tpack,
[data-theme="dark"] .bp-rauth,
[data-theme="dark"] .bp-iperiod,
[data-theme="dark"] .bp-proto,
[data-theme="dark"] .bp-qpreset,
[data-theme="dark"] .bp-country__trigger {
  background: var(--surface-interactive);
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="dark"] .bp-option:hover,
[data-theme="dark"] .bp-mpick:hover,
[data-theme="dark"] .bp-tpack:hover,
[data-theme="dark"] .bp-rauth:hover,
[data-theme="dark"] .bp-iperiod:hover,
[data-theme="dark"] .bp-proto:hover,
[data-theme="dark"] .bp-qpreset:hover,
[data-theme="dark"] .bp-country__trigger:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}
[data-theme="dark"] .bp-option.is-active,
[data-theme="dark"] .bp-mpick.is-active,
[data-theme="dark"] .bp-tpack.is-active,
[data-theme="dark"] .bp-rauth.is-active,
[data-theme="dark"] .bp-iperiod.is-active,
[data-theme="dark"] .bp-proto.is-active,
[data-theme="dark"] .bp-qpreset.is-active,
[data-theme="dark"] .bp-country.is-open .bp-country__trigger {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}
[data-theme="dark"] .bp-country__pop {
  background: var(--surface-elevated);
  border-color: var(--border);
  box-shadow: var(--shadow-overlay);
}
[data-theme="dark"] .bp-country__item:hover {
  background: var(--hover);
}
[data-theme="dark"] .bp-country__item.is-active {
  background: var(--primary-soft);
}
[data-theme="dark"] .bp-stepper {
  background: var(--input-bg);
  border-color: var(--border);
}
[data-theme="dark"] .bp-stepper__value {
  color: var(--text);
}
[data-theme="dark"] .bp-country__skel-flag,
[data-theme="dark"] .bp-country__skel-name {
  background: var(--surface-muted);
}
[data-theme="dark"] .bp-confirm {
  background: var(--backdrop);
}

/* ---------- My Proxies list ---------- */
[data-theme="dark"] .yp .page-title {
  color: var(--text);
}
[data-theme="dark"] .yp .page-desc {
  color: var(--text-secondary);
}
[data-theme="dark"] .yp-controls,
[data-theme="dark"] .yp-table-wrap,
[data-theme="dark"] .px-card,
[data-theme="dark"] .pd-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
[data-theme="dark"] .yp-tab-card {
  background: var(--surface-interactive);
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="dark"] .yp-tab-card:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--hover);
}
[data-theme="dark"] .yp-tab-card.is-active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
  box-shadow: inset 0 0 0 1px var(--primary-border);
}
[data-theme="dark"] .yp-tab-card.is-active .yp-tab-card__icon,
[data-theme="dark"] .yp-tab-card.is-active .yp-tab-card__label {
  color: var(--primary-text);
}
[data-theme="dark"] .yp-tab-card__count {
  background: var(--surface-muted);
  color: var(--text-secondary);
}
[data-theme="dark"] .yp-tab-card.is-active .yp-tab-card__count {
  background: rgba(20, 184, 166, 0.18);
  color: var(--primary-text);
}
[data-theme="dark"] .yp-search-field,
[data-theme="dark"] .yp-filter-card {
  background: var(--input-bg);
  border-color: var(--border);
}
[data-theme="dark"] .yp-filter-card:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}
[data-theme="dark"] .yp-search-field__input {
  color: var(--text);
}
[data-theme="dark"] .yp-search-field__input::placeholder {
  color: var(--input-placeholder);
}
[data-theme="dark"] .yp-table th {
  background: var(--surface-muted);
  border-bottom-color: var(--border-soft);
  color: var(--text-muted);
}
[data-theme="dark"] .yp-table td {
  border-bottom-color: var(--divider);
  color: var(--text);
}
[data-theme="dark"] .yp-table tbody tr:hover td {
  background: var(--surface-row-hover);
}
[data-theme="dark"] .yp-table .yp-muted {
  color: var(--text-secondary);
}

/* ---------- Proxy details (Mobile / ISP / DC / Residential shared .pd) ---------- */
/* Inset matched page bg (#0B1220); panels inside cards use interactive instead. */
[data-theme="dark"] .pd {
  --pd-panel: var(--surface-interactive);
}
[data-theme="dark"] .res {
  --res-panel: var(--surface-interactive);
}
[data-theme="dark"] .dc {
  --dc-panel: var(--surface-interactive);
}

[data-theme="dark"] .pd-top,
[data-theme="dark"] .pd-card,
[data-theme="dark"] .dc-top,
[data-theme="dark"] .dc-card,
[data-theme="dark"] .res-top,
[data-theme="dark"] .res-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .pd-card__head,
[data-theme="dark"] .dc-card__head,
[data-theme="dark"] .dc-proxies-head,
[data-theme="dark"] .res-card__head,
[data-theme="dark"] .res-stats__head {
  background: var(--surface-header);
  border-bottom-color: var(--border-soft);
}
[data-theme="dark"] .pd-card h2,
[data-theme="dark"] .dc-card__head h2,
[data-theme="dark"] .dc-proxies-head h2,
[data-theme="dark"] .res-card h2,
[data-theme="dark"] .pd-top__title h1,
[data-theme="dark"] .dc-top__title h1,
[data-theme="dark"] .res-top__title h1 {
  color: var(--text);
}
[data-theme="dark"] .pd-panel,
[data-theme="dark"] .pd-stat,
[data-theme="dark"] .pd-kv,
[data-theme="dark"] .res-rows,
[data-theme="dark"] .res-traffic__foot,
[data-theme="dark"] .res-wl,
[data-theme="dark"] .dc-plan-col,
[data-theme="dark"] .dc-mcard,
[data-theme="dark"] .dc-table th {
  border-color: var(--border-soft);
}
[data-theme="dark"] .pd-panel,
[data-theme="dark"] .pd-stat,
[data-theme="dark"] .dc-plan-col,
[data-theme="dark"] .dc-mcard {
  background: var(--surface-interactive);
}
[data-theme="dark"] .pd-kv,
[data-theme="dark"] .res-rows,
[data-theme="dark"] .res-traffic__foot,
[data-theme="dark"] .res-wl {
  background: var(--surface-interactive);
}
[data-theme="dark"] .dc-table-wrap {
  background: var(--surface);
  border-color: var(--border-soft);
}
[data-theme="dark"] .pd-protos {
  background: var(--surface-muted);
  border-color: var(--border-soft);
}
[data-theme="dark"] .pd-proto.is-active,
[data-theme="dark"] .pd-proto.is-active:hover {
  background: var(--surface-interactive);
  border-color: var(--border);
  color: var(--primary-text);
}
[data-theme="dark"] .pd-field__label,
[data-theme="dark"] .pd-field__value,
[data-theme="dark"] .pd-stat__value,
[data-theme="dark"] .dc-plan-col__value,
[data-theme="dark"] .dc-cell-val .mono {
  color: var(--text);
}
[data-theme="dark"] .pd-hint,
[data-theme="dark"] .pd-field__label,
[data-theme="dark"] .pd-stat__label,
[data-theme="dark"] .dc-plan-col__label {
  color: var(--text-muted);
}
[data-theme="dark"] .pd-ipopt {
  background: var(--surface-interactive);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .pd-ipopt.is-active {
  background: var(--primary-soft);
  border-color: var(--primary-border);
}
[data-theme="dark"] .pd-fp__btn {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .pd-fp__pop {
  background: var(--surface-elevated);
  border-color: var(--border);
}
[data-theme="dark"] .pd-modal-backdrop,
[data-theme="dark"] .pd-modal-host .pd-modal-backdrop {
  background: var(--backdrop);
}
[data-theme="dark"] .pd-modal {
  background: var(--surface-elevated);
  border-color: var(--border);
}
[data-theme="dark"] .pd-toast {
  background: var(--ok-soft);
  border-color: rgba(50, 198, 117, 0.4);
  color: var(--ok-text);
}
[data-theme="dark"] .dc-table th {
  background: var(--surface-muted);
  color: var(--text-muted);
}
[data-theme="dark"] .dc-table tbody tr:hover {
  background: var(--surface-row-hover);
}
[data-theme="dark"] .res-wl-table th {
  background: var(--surface-muted);
  color: var(--text-muted);
}
[data-theme="dark"] .res-wl-table td {
  color: var(--text);
  border-color: var(--divider);
}
[data-theme="dark"] .res-ts__dot {
  fill: var(--surface-interactive);
}