/* ============================================================
   DexBoss modal system — shared shell + all modal styles
   ============================================================ */

/* ---------- Shell ---------- */
.dbm-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  pointer-events: none;
}
.dbm-root.is-open { display: block; pointer-events: auto; }

.dbm-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
}
.dbm-root.is-open .dbm-scrim { }

.dbm-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  overflow: auto;
}

.dbm {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-pop);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--t-12);
}

.dbm--md { max-width: 640px; }
.dbm--lg { max-width: 820px; }
.dbm--xl { max-width: 1040px; }
.dbm--narrow { max-width: 440px; }

.dbm__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-1);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  flex-shrink: 0;
}
.dbm__head-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 12px;
  flex-shrink: 0;
}
.dbm__title {
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
}
.dbm__title small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--text-3);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.dbm__head-spacer { flex: 1; }
.dbm__head-chip { /* slot for a header chip */ }
.dbm__close {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  color: var(--text-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.dbm__close:hover { background: var(--bg-3); color: var(--text-1); }

.dbm__body {
  padding: 16px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.dbm__body--tight { padding: 0; }

.dbm__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-1);
  background: var(--bg-1);
  flex-shrink: 0;
}
.dbm__foot-meta {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--text-3);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Drawer variant (slides from right) ---------- */
.dbm-root[data-variant="drawer"] .dbm-stage { padding: 0; }
.dbm-root[data-variant="drawer"] .dbm {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-right: none;
}
.dbm-root[data-variant="drawer"].is-open .dbm { }
.dbm-root[data-variant="drawer"][data-size="wide"] .dbm { width: 620px; }

/* ---------- Popover variant (anchored small card) ---------- */
.dbm-root[data-variant="popover"] .dbm-scrim { background: transparent; backdrop-filter: none; }
.dbm-root[data-variant="popover"] .dbm-stage { padding: 0; place-items: start; }
.dbm-root[data-variant="popover"] .dbm {
  position: absolute;
  max-width: 320px;
  transform: translateY(4px);
}

/* ---------- Notifications dropdown variant ---------- */
.dbm-root[data-variant="dropdown"] .dbm-scrim { background: transparent; backdrop-filter: none; }
.dbm-root[data-variant="dropdown"] .dbm-stage { padding: 0; place-items: start; }
.dbm-root[data-variant="dropdown"] .dbm {
  position: absolute;
  width: 380px;
}

/* ---------- Command palette variant ---------- */
.dbm-root[data-variant="palette"] .dbm-stage { padding-top: 12vh; align-items: start; }
.dbm-root[data-variant="palette"] .dbm {
  max-width: 620px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,255,58,0.06);
}

/* ---------- Form primitives used across modals ---------- */
.dbm-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.dbm-field__label {
  font-size: var(--t-11);
  color: var(--text-2);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dbm-field__label small {
  color: var(--text-3);
  font-weight: 400;
  font-family: var(--font-mono);
  font-size: var(--t-10);
  margin-left: auto;
}
.dbm-field__hint {
  font-size: var(--t-10);
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.dbm-input,
.dbm-select,
.dbm-textarea {
  height: 30px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 0 10px;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: var(--t-12);
  outline: none;
  transition: border-color 80ms;
  width: 100%;
}
.dbm-textarea { height: auto; padding: 8px 10px; font-family: var(--font-mono); resize: vertical; min-height: 60px; }
.dbm-input:focus,
.dbm-select:focus,
.dbm-textarea:focus { border-color: var(--accent); }
.dbm-input--lg { height: 36px; font-size: var(--t-14); }
.dbm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dbm-field-row--3 { grid-template-columns: repeat(3, 1fr); }

.dbm-input-affix {
  display: flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 0 10px;
  gap: 8px;
}
.dbm-input-affix:focus-within { border-color: var(--accent); }
.dbm-input-affix input {
  flex: 1;
  height: 28px;
  background: none;
  border: none;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: var(--t-12);
  outline: none;
  min-width: 0;
}
.dbm-input-affix__suf {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--t-11);
}

/* ---------- Section headings inside a modal ---------- */
.dbm-h {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3);
  font-weight: 700;
  margin: 0 0 8px;
  padding-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dbm-h:not(:first-child) { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-1); }
.dbm-h .line { flex: 1; height: 1px; background: var(--line-1); }
.dbm-h__count { color: var(--text-3); font-family: var(--font-mono); font-weight: 500; }

/* ---------- Step indicator (used by wizards) ---------- */
.dbm-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--text-3);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-2);
}
.dbm-steps__pip {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-3);
  display: grid; place-items: center;
  font-weight: 700;
  border: 1px solid var(--line-2);
  font-size: 9px;
  flex-shrink: 0;
}
.dbm-steps__pip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dbm-steps__pip.is-done { background: var(--up-bg); color: var(--up); border-color: rgba(25,210,124,0.4); }
.dbm-steps__line { flex: 1; height: 1px; background: var(--line-1); min-width: 12px; }
.dbm-steps__lbl { font-weight: 500; white-space: nowrap; }
.dbm-steps__lbl.is-active { color: var(--text-1); font-weight: 600; }

/* ---------- Body sub-tabs (for multi-tab modals) ---------- */
.dbm-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-1);
  padding: 0 14px;
  flex-shrink: 0;
}
.dbm-tab {
  position: relative;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: var(--t-12);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.dbm-tab:hover { color: var(--text-1); }
.dbm-tab.is-active { color: var(--text-1); }
.dbm-tab.is-active::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.dbm-tab__count {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  color: var(--text-3);
}

.dbm-tab-panel { display: none; }
.dbm-tab-panel.is-active { display: block; }

/* ---------- Toggle (small switch) ---------- */
.dbm-toggle {
  width: 30px; height: 16px;
  background: var(--bg-4);
  border-radius: var(--r-pill);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms;
}
.dbm-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--text-2);
  border-radius: 50%;
  transition: transform 120ms, background 120ms;
}
.dbm-toggle.on { background: var(--accent); }
.dbm-toggle.on::after { transform: translateX(14px); background: var(--accent-ink); }

/* Compatibility for existing .toggle in page markup */
.toggle {
  width: 30px; height: 16px;
  background: var(--bg-4);
  border-radius: var(--r-pill);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-block;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--text-2);
  border-radius: 50%;
  transition: transform 120ms, background 120ms;
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(14px); background: var(--accent-ink); }

/* ---------- Selectable cards (used by Quick Trade, Connect Wallet, Channels) ---------- */
.dbm-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color 80ms, background 80ms;
}
.dbm-pick:hover { background: var(--bg-3); border-color: var(--line-2); }
.dbm-pick.is-active {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.dbm-pick__ico {
  width: 28px; height: 28px;
  border-radius: var(--r-2);
  background: var(--bg-3);
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.dbm-pick__nm { font-size: var(--t-12); font-weight: 600; line-height: 1.2; }
.dbm-pick__sub { font-size: var(--t-10); color: var(--text-3); font-family: var(--font-mono); margin-top: 2px; }
.dbm-pick__right { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-10); color: var(--text-3); }

.dbm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dbm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- Key/value list (review screens) ---------- */
.dbm-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: var(--t-12);
  border-bottom: 1px dashed var(--line-1);
}
.dbm-kv:last-child { border-bottom: none; }
.dbm-kv__k { color: var(--text-3); }
.dbm-kv__v { color: var(--text-1); font-family: var(--font-mono); font-weight: 600; }
.dbm-kv__v.up { color: var(--up); }
.dbm-kv__v.down { color: var(--down); }
.dbm-kv__v.accent { color: var(--accent); }

/* ---------- Audit row ---------- */
.dbm-audit-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  margin-bottom: 4px;
  font-size: var(--t-12);
}
.dbm-audit-row__ic {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.dbm-audit-row.ok .dbm-audit-row__ic { background: var(--up-bg); color: var(--up); }
.dbm-audit-row.warn .dbm-audit-row__ic { background: var(--warn-bg); color: var(--warn); }
.dbm-audit-row.fail .dbm-audit-row__ic { background: var(--down-bg); color: var(--down); }
.dbm-audit-row__label { font-weight: 500; color: var(--text-1); }
.dbm-audit-row__sub { font-size: var(--t-10); color: var(--text-3); font-family: var(--font-mono); margin-top: 1px; }
.dbm-audit-row__val {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--text-2);
  text-align: right;
}

/* ---------- Quick Trade ---------- */
.dbm-trade__amt {
  position: relative;
  margin-bottom: 8px;
}
.dbm-trade__amt input {
  width: 100%;
  height: 56px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: 0 90px 0 16px;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 24px;
  outline: none;
  letter-spacing: -0.01em;
}
.dbm-trade__amt input:focus { border-color: var(--accent); }
.dbm-trade__cur {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  font-weight: 600;
}
.dbm-trade__cur-ico {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
  background: var(--sol-purple);
  color: white;
}
.dbm-trade__quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.dbm-trade__quick button {
  height: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  cursor: pointer;
}
.dbm-trade__quick button:hover { background: var(--bg-3); color: var(--text-1); }
.dbm-trade__receive {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: 10px 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dbm-trade__receive .v {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-18);
}
.dbm-trade__receive .sub {
  font-size: var(--t-10);
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.dbm-trade__route {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ---------- Buy / Sell toggle for Quick Trade ---------- */
.dbm-bs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 2px;
  margin-bottom: 10px;
}
.dbm-bs__btn {
  height: 28px;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--t-12);
  font-weight: 700;
  border-radius: var(--r-2);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.dbm-bs__btn.is-buy.is-active { background: var(--up-bg-strong); color: var(--up); }
.dbm-bs__btn.is-sell.is-active { background: var(--down-bg-strong); color: var(--down); }

/* ---------- Notifications list ---------- */
.dbm-noti {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-1);
  cursor: pointer;
  align-items: start;
}
.dbm-noti:hover { background: var(--bg-2); }
.dbm-noti__ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
}
.dbm-noti__title { font-size: var(--t-12); font-weight: 500; line-height: 1.3; }
.dbm-noti__title b { color: var(--accent); font-weight: 600; }
.dbm-noti__sub {
  font-size: var(--t-10);
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-top: 3px;
}
.dbm-noti__time {
  font-size: var(--t-10);
  color: var(--text-3);
  font-family: var(--font-mono);
}
.dbm-noti.unread { background: rgba(200,255,58,0.025); }
.dbm-noti.unread::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  position: absolute;
  margin-left: -10px;
  margin-top: 8px;
}

/* ---------- Command palette ---------- */
.dbm-cmd-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-1);
}
.dbm-cmd-search input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-1);
  font-size: var(--t-14);
  outline: none;
}
.dbm-cmd-list {
  max-height: 360px;
  overflow: auto;
  padding: 4px 0;
}
.dbm-cmd-group {
  padding: 8px 16px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dbm-cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: var(--t-12);
}
.dbm-cmd-item:hover, .dbm-cmd-item.is-active {
  background: var(--accent-glow);
  color: var(--accent);
}
.dbm-cmd-item__ic {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--bg-3);
  border-radius: var(--r-2);
  font-size: 11px;
  color: var(--text-2);
}
.dbm-cmd-item:hover .dbm-cmd-item__ic, .dbm-cmd-item.is-active .dbm-cmd-item__ic {
  background: var(--accent);
  color: var(--accent-ink);
}
.dbm-cmd-item__main { flex: 1; }
.dbm-cmd-item__sub {
  font-size: var(--t-10);
  color: var(--text-3);
  font-family: var(--font-mono);
}
.dbm-cmd-item__shortcut {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--text-3);
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
}

/* ---------- Slippage / Priority preset buttons ---------- */
.dbm-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 2px;
}
.dbm-presets button {
  height: 22px;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  border-radius: var(--r-2);
  cursor: pointer;
}
.dbm-presets button.is-active { background: var(--bg-4); color: var(--text-1); }
.dbm-presets--accent button.is-active { background: var(--accent); color: var(--accent-ink); }

/* ---------- Column picker rows ---------- */
.dbm-col-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  margin-bottom: 4px;
  font-size: var(--t-12);
}
.dbm-col-row__handle {
  color: var(--text-3);
  cursor: grab;
  font-family: var(--font-mono);
  letter-spacing: -0.05em;
}
.dbm-col-row__name { flex: 1; font-weight: 500; }
.dbm-col-row.is-locked { opacity: 0.5; }
.dbm-col-row.is-locked .dbm-col-row__handle { cursor: not-allowed; }

/* ---------- Filter builder rule rows ---------- */
.dbm-rule {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 1fr 24px;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.dbm-rule__join {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-align: center;
  background: var(--accent-glow);
  border: 1px solid rgba(200,255,58,0.2);
  border-radius: var(--r-2);
  height: 26px;
  display: grid; place-items: center;
}
.dbm-rule__del {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--r-2);
}
.dbm-rule__del:hover { background: var(--down-bg); color: var(--down); }
.dbm-rule .dbm-input,
.dbm-rule .dbm-select { height: 26px; font-size: var(--t-11); }

/* ---------- Trade detail (drawer) sections ---------- */
.dbm-td-hero {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-2);
}
.dbm-td-side {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.dbm-td-side.buy { background: var(--up-bg-strong); color: var(--up); }
.dbm-td-side.sell { background: var(--down-bg-strong); color: var(--down); }

.dbm-td-flow {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: 6px;
  align-items: center;
  margin-top: 14px;
}
.dbm-td-flow__cell {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 8px 10px;
  text-align: center;
}
.dbm-td-flow__amt {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-14);
}
.dbm-td-flow__lbl {
  font-size: var(--t-10);
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.dbm-td-flow__arrow {
  text-align: center;
  color: var(--accent);
  font-size: 18px;
}

/* ---------- Wallet mini-card (popover) ---------- */
.dbm-wmini-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-1);
}
.dbm-wmini-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  border: 1px solid var(--line-2);
}
.dbm-wmini__nm { font-size: var(--t-13); font-weight: 700; }
.dbm-wmini__addr { font-family: var(--font-mono); font-size: var(--t-10); color: var(--text-3); }

.dbm-wmini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  border-bottom: 1px solid var(--line-1);
}
.dbm-wmini-stats > div {
  padding: 10px 6px;
  border-right: 1px solid var(--line-1);
}
.dbm-wmini-stats > div:last-child { border-right: none; }
.dbm-wmini-stats .lbl {
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dbm-wmini-stats .val {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  font-weight: 700;
  margin-top: 3px;
}

/* ---------- Tier plans / Upgrade ---------- */
.dbm-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dbm-plan {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dbm-plan:hover { border-color: var(--line-2); }
.dbm-plan.is-active {
  border-color: var(--accent);
  background: var(--bg-1);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.dbm-plan__tier {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3);
  font-weight: 700;
}
.dbm-plan.is-active .dbm-plan__tier { color: var(--accent); }
.dbm-plan__price {
  font-family: var(--font-mono);
  font-size: var(--t-18);
  font-weight: 700;
  line-height: 1.1;
}
.dbm-plan__price small { font-size: var(--t-11); color: var(--text-3); font-weight: 400; }
.dbm-plan__sub {
  font-size: var(--t-10);
  color: var(--text-3);
  font-family: var(--font-mono);
}
.dbm-plan-feats {
  list-style: none;
  padding: 0; margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dbm-plan-feats li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-11);
  color: var(--text-2);
  padding: 4px 6px;
  border-radius: var(--r-2);
}
.dbm-plan-feats li.dim { color: var(--text-3); opacity: 0.6; }
.dbm-plan-feats .ck {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--up-bg);
  color: var(--up);
  display: grid; place-items: center;
  font-size: 8px;
  font-weight: 700;
  flex-shrink: 0;
}
.dbm-plan-feats li.dim .ck { background: var(--bg-3); color: var(--text-3); }

/* ---------- Misc ---------- */
.dbm-callout {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-2);
  font-size: var(--t-11);
  line-height: 1.5;
  background: var(--accent-glow);
  border: 1px solid rgba(200,255,58,0.2);
  color: var(--text-2);
}
.dbm-callout.warn { background: var(--warn-bg); border-color: rgba(255,182,39,0.2); }
.dbm-callout.info { background: var(--info-bg); border-color: rgba(78,168,255,0.2); }
.dbm-callout.down { background: var(--down-bg); border-color: rgba(255,77,99,0.2); }
.dbm-callout__ic { color: var(--accent); font-weight: 700; }
.dbm-callout.warn .dbm-callout__ic { color: var(--warn); }
.dbm-callout.info .dbm-callout__ic { color: var(--info); }
.dbm-callout.down .dbm-callout__ic { color: var(--down); }

.dbm-spinner {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  animation: dbmSpin 700ms linear infinite;
  display: inline-block;
}
@keyframes dbmSpin { to { transform: rotate(360deg); } }

/* ---------- 2FA QR + code ---------- */
.dbm-qr {
  width: 160px; height: 160px;
  background:
    repeating-linear-gradient(0deg, var(--text-1) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, var(--text-1) 0 4px, transparent 4px 8px),
    var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  margin: 0 auto;
  position: relative;
  background-blend-mode: difference;
  image-rendering: pixelated;
}
.dbm-qr::before, .dbm-qr::after {
  content: '';
  position: absolute;
  width: 36px; height: 36px;
  border: 6px solid var(--text-1);
  background: var(--bg-1);
}
.dbm-qr::before { top: 8px; left: 8px; }
.dbm-qr::after { top: 8px; right: 8px; }

.dbm-backup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-12);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 10px 14px;
}

/* ---------- API key reveal ---------- */
.dbm-keyshow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: var(--r-2);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 10px 0;
}
.dbm-keyshow code { flex: 1; word-break: break-all; }

/* ---------- Channel test ---------- */
.dbm-test {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  margin-top: 8px;
}
.dbm-test__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 6px var(--up);
}
.dbm-test__txt { font-size: var(--t-11); color: var(--text-2); flex: 1; }

/* ---------- Buttons reused inside modals ---------- */
.dbm-btn-row { display: flex; gap: 8px; margin-top: 4px; }
.dbm-btn-row > .btn { flex: 1; justify-content: center; }

/* ---------- Compact dashed list (route, fees) ---------- */
.dbm-route {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--text-2);
}
.dbm-route__hop {
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  padding: 2px 6px;
  border-radius: var(--r-2);
}
.dbm-route__arrow { color: var(--text-3); }

/* ---------- Confirm tx countdown bar ---------- */
.dbm-countdown {
  height: 3px;
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.dbm-countdown__fill {
  height: 100%;
  background: var(--accent);
  width: 100%;
  transition: width 1s linear;
}

/* ---------- Tag chips inside modals ---------- */
.dbm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  background: var(--bg-3);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: 500;
  color: var(--text-2);
}
.dbm-chip--up { color: var(--up); background: var(--up-bg); }
.dbm-chip--down { color: var(--down); background: var(--down-bg); }
.dbm-chip--accent { color: var(--accent); background: var(--accent-glow); }
.dbm-chip--warn { color: var(--warn); background: var(--warn-bg); }
.dbm-chip--info { color: var(--info); background: var(--info-bg); }

/* ---------- Share/export ---------- */
.dbm-share-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: var(--t-11);
}
.dbm-share-link code { flex: 1; color: var(--text-2); word-break: break-all; }

/* Provide alerts.html .toggle compatibility via the toggle class above */