/* ════════════════════════════════════════════════════════════════════════════
 * iTrade Design System — Component Atoms
 * (cloned from wes_theme/css/wes-components.css on 2026-05-17 — design tokens
 * and class prefix rebranded; atom inventory + invariant unchanged.)
 *
 * SOURCE OF TRUTH for visual primitives across every Drupal module.
 * Every page composes these atoms in markup — no per-feature CSS for visuals.
 *
 * INVARIANT (anh chốt 2026-04-28):
 *   1. New UI MUST compose atoms below. Do NOT create new BEM-prefixed CSS
 *      for visuals (.itrade-cwiz-*, .itrade-camp-*, .itrade-loctax-*, etc. were the
 *      anti-pattern this file replaces).
 *   2. If you need a primitive that doesn't exist here, ADD A NEW ATOM to
 *      this file with rationale comment, then use it. Don't fork into a
 *      per-feature class.
 *   3. Per-feature CSS files are allowed ONLY for irreducible feature glue
 *      (e.g., the iPhone-bezel preview frame, slideshow image positioning).
 *      They MUST stay <100 lines and reference these atoms by name in a
 *      header comment.
 *
 * Loaded by: itrade_theme/global library (auto-injected on every iTrade page).
 *
 * Tokens consumed from theme.css:
 *   --itrade-red, --itrade-red-2, --itrade-red-soft
 *   --itrade-bg, --itrade-bg-alt
 *   --itrade-fg, --itrade-fg-muted, --itrade-fg-soft
 *   --itrade-border, --itrade-card
 *   --itrade-shadow-sm/md/lg
 *
 * Status semantic colors (intentional duplicates with admin.css; safe to share):
 *   --itrade-success: #008f4e   --itrade-success-soft: rgba(25,167,116,0.08)
 *   --itrade-warn:    #b76e00   --itrade-warn-soft:    rgba(183,110,0,0.08)
 *   --itrade-info:    #1e63d9   --itrade-info-soft:    rgba(30,99,217,0.08)
 *   --itrade-purple:  #7c3aed   --itrade-purple-soft:  rgba(124,58,237,0.08)
 * ════════════════════════════════════════════════════════════════════════════ */

/* Define the semantic-color tokens here (only ones not already in theme.css) */
:root {
  --itrade-success:      #008f4e;
  --itrade-success-2:    #006e3c;
  --itrade-success-soft: rgba(25, 167, 116, 0.08);
  --itrade-warn:         #b76e00;
  --itrade-warn-2:       #8b5400;
  --itrade-warn-soft:    rgba(183, 110, 0, 0.08);
  --itrade-info:         #1e63d9;
  --itrade-info-soft:    rgba(30, 99, 217, 0.08);
  --itrade-purple:       #7c3aed;
  --itrade-purple-soft:  rgba(124, 58, 237, 0.08);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 1. CARDS
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-card {
  background: var(--itrade-card, #fff);
  border: 1px solid var(--itrade-border, #e6e9f0);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--itrade-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
  font-family: 'UTM Avo', system-ui, sans-serif;
  color: var(--itrade-fg, #1a1a1a);
}

/* Sub-card variant (lower-contrast for nested groups, e.g., quote summary) */
.itrade-card.itrade-card--inset {
  background: var(--itrade-bg-alt, #fafbfd);
  box-shadow: none;
  padding: 14px;
}

/* Sticky card for sidebar previews */
.itrade-card.itrade-card--sticky {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}

/* Tighter card padding */
.itrade-card.itrade-card--compact { padding: 14px; }

/* Card head row — title + CTA on opposite ends */
.itrade-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--itrade-border, #e6e9f0);
  margin-bottom: 14px;
}

/* Section title (use for card heads or top-of-page H2) */
.itrade-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--itrade-fg, #1a1a1a);
  letter-spacing: 0.01em;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 2. BUTTONS
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--itrade-fg, #1a1a1a);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.itrade-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.itrade-btn--primary {
  background: var(--itrade-red, #DC1C1C);
  color: #fff;
}
.itrade-btn--primary:not(:disabled):hover { background: var(--itrade-red-2, #B01010); }

.itrade-btn--secondary {
  background: #e5e7eb;
  color: #374151;
}
.itrade-btn--secondary:not(:disabled):hover { background: #d1d5db; }

.itrade-btn--ghost {
  background: #fff;
  border-color: var(--itrade-border, #e6e9f0);
  color: var(--itrade-fg-muted, #666);
}
.itrade-btn--ghost:not(:disabled):hover {
  color: var(--itrade-fg, #1a1a1a);
  border-color: var(--itrade-fg-soft, #888);
}

.itrade-btn--danger-outline {
  background: #fff;
  border-color: var(--itrade-red, #DC1C1C);
  color: var(--itrade-red, #DC1C1C);
}
.itrade-btn--danger-outline:not(:disabled):hover {
  background: var(--itrade-red-soft, rgba(220,28,28,0.08));
}

.itrade-btn--success {
  background: var(--itrade-success);
  color: #fff;
}
.itrade-btn--success:not(:disabled):hover { background: var(--itrade-success-2); }

.itrade-btn--warning {
  background: var(--itrade-warn);
  color: #fff;
}
.itrade-btn--warning:not(:disabled):hover { background: var(--itrade-warn-2); }

.itrade-btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--itrade-border, #e6e9f0);
  background: #fff;
  color: var(--itrade-fg-muted, #666);
}
.itrade-btn--icon:not(:disabled):hover {
  color: var(--itrade-red, #DC1C1C);
  border-color: var(--itrade-red, #DC1C1C);
}

.itrade-btn--sm { padding: 5px 12px; font-size: 0.78rem; }
.itrade-btn--lg { padding: 12px 28px; font-size: 1rem; }
.itrade-btn--block { width: 100%; }

/* ────────────────────────────────────────────────────────────────────────────
 * 3. FORMS
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.itrade-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.itrade-field--full { grid-column: 1 / -1; }

.itrade-field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.itrade-field-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 720px) {
  .itrade-field-grid-2,
  .itrade-field-grid-3 { grid-template-columns: 1fr; }
}

.itrade-label {
  font-size: 0.78rem;
  color: var(--itrade-fg-muted, #666);
  font-weight: 600;
}
.itrade-label small {
  color: var(--itrade-fg-soft, #888);
  font-weight: 400;
  margin-left: 4px;
}

.itrade-input,
.itrade-textarea,
.itrade-select {
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--itrade-border, #e6e9f0);
  border-radius: 8px;
  color: var(--itrade-fg, #1a1a1a);
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.itrade-textarea { resize: vertical; min-height: 70px; }
.itrade-input:focus,
.itrade-textarea:focus,
.itrade-select:focus { border-color: var(--itrade-red, #DC1C1C); }

.itrade-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--itrade-red, #DC1C1C);
  cursor: pointer;
}

.itrade-help-text {
  color: var(--itrade-fg-soft, #888);
  font-size: 0.74rem;
  line-height: 1.4;
}

.itrade-meta {
  color: var(--itrade-fg-muted, #666);
  font-size: 0.85rem;
}
.itrade-meta strong { color: var(--itrade-fg, #1a1a1a); }

/* Status-color modifiers — used inline as second class on .itrade-meta
 * for inline error / success hints (subscribe modal, future status rows). */
.itrade-bad { color: var(--itrade-red, #DC1C1C) !important; }
.itrade-ok  { color: var(--itrade-success, #008f4e) !important; }

/* Subscribe modal — surfaced when the chart Auto Trade button is
 * clicked while the user is logged-in + has a strategy but no active
 * subscription. Composes from existing atoms (.itrade-btn--*,
 * .itrade-meta) plus a small per-feature layout grid. */
.itrade-sub-modal {
  display: flex; flex-direction: column; gap: 18px;
  min-width: 320px;
}
.itrade-sub-balance {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 16px;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border);
  border-radius: 10px;
}
.itrade-sub-balance strong {
  font-size: 1.25rem; font-weight: 700; color: var(--itrade-fg, #1a1a1a);
}
.itrade-sub-plans {
  display: flex; flex-direction: column; gap: 8px;
}
.itrade-sub-plan {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--itrade-border);
  border-radius: 10px;
  background: #fff;
}
.itrade-sub-plan.is-disabled {
  background: var(--itrade-bg-alt, #fafbfd);
  opacity: 0.85;
}
/* User's current plan — visually pinned so they don't accidentally
 * "subscribe" to the same tier from the Upgrade modal. */
.itrade-sub-plan.is-current {
  background: var(--itrade-bg-alt, #fafbfd);
  border-color: var(--itrade-success, #008f4e);
  box-shadow: 0 0 0 1px var(--itrade-success, #008f4e) inset;
}
/* Upgrade banner — shown at the top of the subscribe modal when
 * opened because the user hit their plan's trading cap. */
.itrade-sub-upgrade-banner {
  padding: 10px 14px;
  border: 1px solid rgba(183,110,0,0.35);
  border-radius: 10px;
  background: var(--itrade-warn-soft, rgba(183,110,0,0.10));
  color: var(--itrade-warn, #b76e00);
}
.itrade-sub-upgrade-banner strong { color: var(--itrade-warn, #b76e00); }
.itrade-sub-upgrade-banner p { margin: 4px 0 0; line-height: 1.4; }
.itrade-sub-plan-meta {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
}
.itrade-sub-plan-meta strong { font-size: 0.95rem; }
.itrade-sub-plan-price {
  font-weight: 700; font-size: 1rem; color: var(--itrade-fg, #1a1a1a);
  min-width: 80px; text-align: right;
}
.itrade-sub-plan-price .itrade-meta { font-size: 0.75rem; margin-left: 2px; }
.itrade-sub-plan .itrade-btn { flex: 0 0 auto; }
.itrade-sub-deposit {
  padding: 14px 16px;
  border: 1px dashed var(--itrade-border);
  border-radius: 10px;
  background: var(--itrade-bg-alt, #fafbfd);
}
.itrade-sub-deposit-head {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 10px;
}
.itrade-sub-deposit-qr {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 0;
  margin-bottom: 8px;
}
.itrade-sub-deposit-qr canvas {
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 16px rgba(220, 28, 28, 0.10);
}
.itrade-sub-deposit-addr {
  display: flex; align-items: center; gap: 8px;
}
.itrade-sub-deposit-addr code {
  flex: 1 1 auto;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--itrade-border);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  word-break: break-all;
  user-select: all;
}

@media (max-width: 520px) {
  .itrade-sub-plan {
    flex-wrap: wrap;
  }
  .itrade-sub-plan-price { text-align: left; }
  .itrade-sub-plan .itrade-btn { width: 100%; }
}

/* ── Connected-state avatar + account dropdown menu ───────────────
 * Replaces the "Connect Wallet" text button with a circular avatar
 * chip (identicon SVG by default, uploaded image once anh sets one).
 * Click the chip → fixed-position dropdown anchored under the chip.
 * Atomic-doctrine compliant: composes from .itrade-btn / .itrade-meta;
 * only structural layout lives here. */

.itrade-avatar-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 6px 2px 2px;
  border-radius: 999px;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.itrade-avatar-chip:hover { background: var(--itrade-red-soft, rgba(220, 28, 28, 0.06)); border-color: var(--itrade-red, #DC1C1C); }
.itrade-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--itrade-bg-alt, #fafbfd);
}
.itrade-avatar svg, .itrade-avatar-img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.itrade-avatar-caret {
  font-size: 0.7rem;
  color: var(--itrade-fg-muted, #666);
  padding-right: 4px;
}

/* Override the existing .itrade-page-connect-btn defaults when in
 * connected-avatar mode — strip padding/background so the chip
 * styles take over. */
.itrade-page-connect-btn.is-avatar,
.itrade-wc-cta.is-avatar {
  padding: 0; background: transparent; border: 0; box-shadow: none;
}

.itrade-account-menu {
  position: fixed; z-index: 1300;
  min-width: 280px; max-width: 320px;
  background: #fff;
  border: 1px solid var(--itrade-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  font-size: 0.88rem;
  overflow: hidden;
}
.itrade-account-menu-head {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px;
  background: var(--itrade-bg-alt, #fafbfd);
  border-bottom: 1px solid var(--itrade-border);
}
.itrade-account-menu-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: #fff;
}
.itrade-account-menu-avatar svg,
.itrade-account-menu-avatar img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.itrade-account-menu-meta {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  flex: 1 1 auto;
}
.itrade-account-menu-name {
  font-weight: 700; font-size: 0.95rem;
  color: var(--itrade-fg, #1a1a1a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.itrade-account-menu-wallet {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--itrade-fg-muted, #666);
}
.itrade-account-menu-link {
  align-self: flex-start;
  background: none; border: 0; padding: 2px 0; margin-top: 2px;
  color: var(--itrade-red, #DC1C1C);
  font: inherit; font-size: 0.78rem; font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.itrade-account-menu-link:hover { color: var(--itrade-red-2, #B01010); }
.itrade-account-menu-balance {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--itrade-border);
}
.itrade-account-menu-balance strong {
  font-size: 1rem; font-weight: 700;
  color: var(--itrade-fg, #1a1a1a);
}
.itrade-account-menu-actions {
  padding: 10px 16px;
  border-bottom: 1px solid var(--itrade-border);
}
.itrade-account-menu-list {
  list-style: none; padding: 4px 0; margin: 0;
}
.itrade-account-menu-list li { margin: 0; padding: 0; }
.itrade-account-menu-item {
  display: block; width: 100%;
  padding: 9px 16px;
  background: transparent; border: 0;
  text-align: left; cursor: pointer;
  font: inherit; color: var(--itrade-fg, #1a1a1a);
}
.itrade-account-menu-item:hover {
  background: var(--itrade-red-soft, rgba(220, 28, 28, 0.06));
  color: var(--itrade-red, #DC1C1C);
}
.itrade-account-menu-item--danger {
  color: var(--itrade-red, #DC1C1C);
  font-weight: 600;
}
.itrade-account-menu-item--danger:hover {
  background: rgba(220, 28, 28, 0.10);
}

/* ── Brand confirm modal body ──────────────────────────────────── */
.itrade-confirm-modal {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 280px; max-width: 380px;
}
.itrade-confirm-body {
  margin: 0;
  color: var(--itrade-fg, #1a1a1a);
  line-height: 1.45;
}
.itrade-confirm-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ── Setting modal (2-tab shell) ───────────────────────────────── */
.itrade-setting-modal {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 360px;
}
.itrade-setting-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--itrade-border);
}
.itrade-setting-tab {
  background: transparent; border: 0;
  padding: 10px 16px;
  font: inherit; font-weight: 600;
  color: var(--itrade-fg-muted, #666);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.itrade-setting-tab:hover { color: var(--itrade-fg, #1a1a1a); }
.itrade-setting-tab.is-active {
  color: var(--itrade-red, #DC1C1C);
  border-bottom-color: var(--itrade-red, #DC1C1C);
}
.itrade-setting-panel {
  min-height: 160px;
}
.itrade-setting-form {
  display: flex; flex-direction: column; gap: 14px;
}
.itrade-setting-field {
  display: flex; flex-direction: column; gap: 4px;
}
.itrade-setting-label {
  font-size: 0.78rem; font-weight: 700;
  color: var(--itrade-fg-muted, #666);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.itrade-setting-value {
  font-size: 0.95rem;
  color: var(--itrade-fg, #1a1a1a);
}
.itrade-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--itrade-border);
  border-radius: 8px;
  font: inherit; font-size: 0.95rem;
  background: #fff;
  color: var(--itrade-fg, #1a1a1a);
}
.itrade-input:focus {
  outline: none;
  border-color: var(--itrade-red, #DC1C1C);
  box-shadow: 0 0 0 3px rgba(220, 28, 28, 0.12);
}
.itrade-input:disabled {
  background: var(--itrade-bg-alt, #fafbfd);
  color: var(--itrade-fg-muted, #666);
  cursor: not-allowed;
}
.itrade-setting-check {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--itrade-fg, #1a1a1a);
  cursor: pointer;
  user-select: none;
}
.itrade-setting-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--itrade-border);
}

/* Avatar editor inside Profile tab — circular preview on the left,
 * action stack on the right. */
.itrade-avatar-edit {
  display: flex; align-items: center; gap: 14px;
}
.itrade-avatar-edit-preview {
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border);
}
.itrade-avatar-edit-preview svg,
.itrade-avatar-edit-preview img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.itrade-avatar-edit-actions {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto; min-width: 0;
}
.itrade-avatar-edit-actions p { margin: 4px 0 0; }

/* Referred list tab — F1/F2/F3 grouped tier blocks. */
.itrade-referred-summary {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border);
  border-radius: 10px;
}
.itrade-referred-summary strong {
  font-size: 1.4rem; font-weight: 700;
  color: var(--itrade-success, #008f4e);
}
.itrade-referred-tier { margin-bottom: 16px; }
.itrade-referred-tier:last-child { margin-bottom: 0; }
.itrade-referred-tier-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 0;
}
.itrade-referred-tier-head strong {
  color: var(--itrade-red, #DC1C1C);
  font-size: 0.95rem;
}

/* Nested-tab variant for sub-tabs inside a parent setting tab (used by
 * My Referrals → Tier 1/2/3). Same atom as .itrade-setting-tab but
 * shorter padding + smaller font + lighter border so anh sees it as
 * a nested layer, not a peer of the top-level Profile/Referrals tabs. */
.itrade-setting-tabs--inner {
  margin-bottom: 12px;
}
.itrade-setting-tabs--inner .itrade-setting-tab {
  padding: 6px 12px;
  font-size: 0.85rem;
}
.itrade-setting-tabs--inner .itrade-setting-tab .itrade-meta {
  font-size: 0.7rem;
  margin-left: 4px;
}
.itrade-referred-tier-meta {
  padding: 4px 0 10px;
}
.itrade-referred-tier-meta strong {
  color: var(--itrade-success, #008f4e);
}
.itrade-referred-tier-panel {
  min-height: 80px;
}

/* Bots tab + Exchanges tab — list with status badges + actions, plus a
 * 'create new' section below. Reuses .itrade-referred-table for the
 * grid (table atom is generic enough — name reflects the first
 * consumer but layout is product-neutral). */
.itrade-bots-list {
  margin-bottom: 16px;
}
.itrade-bot-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.itrade-bot-badge--running { background: rgba(0, 143, 78, 0.15); color: var(--itrade-success, #008f4e); }
.itrade-bot-badge--paused  { background: rgba(220, 153, 0, 0.18); color: #b07a00; }
.itrade-bot-badge--draft   { background: rgba(0, 0, 0, 0.06); color: var(--itrade-fg-muted, #666); }
.itrade-bot-badge--stopped { background: rgba(0, 0, 0, 0.12); color: var(--itrade-fg-muted, #666); }
.itrade-bot-badge--error   { background: rgba(220, 28, 28, 0.15); color: var(--itrade-red, #DC1C1C); }
.itrade-bot-badge--live    { background: var(--itrade-red, #DC1C1C); color: #fff; }
.itrade-bot-badge--paper   { background: rgba(0, 0, 0, 0.06); color: var(--itrade-fg-muted, #666); }
.itrade-bot-actions {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.itrade-bot-create, .itrade-exch-add {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--itrade-border);
}
.itrade-bot-create h4, .itrade-exch-add h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--itrade-fg, #1a1a1a);
}
.itrade-referred-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.82rem;
}
.itrade-referred-table th,
.itrade-referred-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--itrade-border);
}
.itrade-referred-table th {
  font-weight: 700; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--itrade-fg-muted, #666);
}
.itrade-referred-table td { color: var(--itrade-fg, #1a1a1a); }

/* Right-click indicator menu (chart canvas contextmenu). Single shared
 * element appended to <body>; position:fixed at the mouse coords by JS,
 * shown only while .is-open. Each row is a button so keyboard-tab works
 * inside the menu. Active indicators get a green check + 'is-active'
 * tint so a single glance shows what's already overlaid. */
.itrade-chart-ctxmenu {
  position: fixed; z-index: 1300;
  display: none;
  min-width: 240px; max-width: 320px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--itrade-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  font-size: 0.85rem;
}
.itrade-chart-ctxmenu.is-open { display: block; }
.itrade-chart-ctxmenu-head {
  padding: 4px 14px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--itrade-fg-muted, #666);
  border-bottom: 1px solid var(--itrade-border);
  margin-bottom: 4px;
}
.itrade-chart-ctxmenu-list {
  max-height: 60vh;
  overflow-y: auto;
}
.itrade-chart-ctxmenu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--itrade-fg, #1a1a1a);
  font: inherit;
}
.itrade-chart-ctxmenu-item:hover {
  background: var(--itrade-red-soft, rgba(220, 28, 28, 0.06));
}
.itrade-chart-ctxmenu-item.is-active {
  background: var(--itrade-success-soft, rgba(25, 167, 116, 0.08));
}
.itrade-chart-ctxmenu-item.is-active:hover {
  background: rgba(25, 167, 116, 0.16);
}
.itrade-chart-ctxmenu-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: var(--itrade-success, #008f4e);
  font-weight: 700;
}
.itrade-chart-ctxmenu-lbl {
  flex: 1 1 auto;
}
/* Group separator headers — split overlays (drawn on the candle
 * pane) from sub-pane indicators (separate panel below). Helps
 * anh see at-a-glance how many lines are about to be stacked on
 * top of the price action. */
.itrade-chart-ctxmenu-group-head {
  padding: 8px 14px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--itrade-fg-muted, #666);
}
.itrade-chart-ctxmenu-group-head:not(:first-of-type) {
  border-top: 1px solid var(--itrade-border);
  margin-top: 4px;
}
/* Color swatches per indicator — preview the line colors that will
 * land on the chart so anh can pick non-clashing combos. Each
 * swatch is a 10px square pulled from meta.styles.lines. */
.itrade-chart-ctxmenu-swatches {
  display: inline-flex;
  gap: 2px;
  width: 36px;
  flex: 0 0 auto;
}
.itrade-chart-ctxmenu-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.itrade-chart-ctxmenu-foot {
  border-top: 1px solid var(--itrade-border);
  margin-top: 4px;
  padding-top: 4px;
}
.itrade-chart-ctxmenu-clear {
  display: block; width: 100%;
  padding: 7px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--itrade-red, #DC1C1C);
  font: inherit;
  font-size: 0.82rem;
}
.itrade-chart-ctxmenu-clear:hover {
  background: var(--itrade-red-soft, rgba(220, 28, 28, 0.06));
}

.itrade-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--itrade-border, #e6e9f0);
}

/* Input with prefix/suffix wrap (e.g., amount input + "USDT" suffix) */
.itrade-input-wrap { position: relative; }
.itrade-input-wrap .itrade-input { padding-right: 44px; }
.itrade-input-wrap__suffix {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--itrade-fg-soft, #888);
  font-size: 0.8rem;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 4. TABLES
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.itrade-table thead th {
  text-align: left;
  color: var(--itrade-fg-muted, #666);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--itrade-border, #e6e9f0);
}
.itrade-table tbody td {
  padding: 12px;
  color: var(--itrade-fg, #1a1a1a);
  border-bottom: 1px solid var(--itrade-border, #e6e9f0);
  vertical-align: middle;
}
.itrade-table tbody tr:hover { background: var(--itrade-red-soft, rgba(220,28,28,0.08)); }
.itrade-table tbody tr.is-archived td { opacity: 0.5; }

.itrade-table--compact thead th { padding: 6px 10px; font-size: 0.7rem; }
.itrade-table--compact tbody td { padding: 8px 10px; font-size: 0.82rem; }

.itrade-table-wrap { overflow-x: auto; }

.itrade-table-loading {
  color: var(--itrade-fg-soft, #888);
  text-align: center;
  padding: 40px !important;
}
.itrade-table-loading.is-error { color: var(--itrade-red, #DC1C1C); }

/* Inline code within table cells */
.itrade-table code,
.itrade-code {
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border, #e6e9f0);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--itrade-fg-muted, #666);
  font-family: 'SF Mono', Consolas, monospace;
}

/* Cell action button group */
.itrade-cell-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Read-only label inside cell (small italic muted) */
.itrade-readonly {
  color: var(--itrade-fg-soft, #888);
  font-size: 0.78rem;
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 5. CHIPS (multi-select pills)
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.itrade-chip {
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--itrade-border, #e6e9f0);
  border-radius: 999px;
  color: var(--itrade-fg-muted, #666);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.itrade-chip:hover { color: var(--itrade-fg, #1a1a1a); border-color: var(--itrade-fg-soft, #888); }
.itrade-chip.is-active {
  background: var(--itrade-red-soft, rgba(220,28,28,0.08));
  border-color: var(--itrade-red, #DC1C1C);
  color: var(--itrade-red, #DC1C1C);
  font-weight: 600;
}
.itrade-chip small {
  color: var(--itrade-fg-soft, #888);
  margin-left: 3px;
  font-size: 0.68rem;
}

/* Larger card-style chip (e.g., creative-kind selector) */
.itrade-chip--card {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  background: var(--itrade-bg-alt, #fafbfd);
  text-align: left;
  font-size: 0.85rem;
}
.itrade-chip--card.is-active {
  background: var(--itrade-red-soft, rgba(220,28,28,0.08));
}
.itrade-chip--card small {
  color: var(--itrade-fg-soft, #888);
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 400;
}

/* Stacked-layout chip for duration buttons (label + sub-label) */
.itrade-chip--stack {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--itrade-bg-alt, #fafbfd);
}
.itrade-chip__label   { font-weight: 600; font-size: 0.82rem; }
.itrade-chip__sublabel { font-size: 0.72rem; color: var(--itrade-success); }

/* ────────────────────────────────────────────────────────────────────────────
 * 6. TABS
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--itrade-border, #e6e9f0);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.itrade-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--itrade-fg-muted, #666);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.itrade-tab:hover { color: var(--itrade-fg, #1a1a1a); }
.itrade-tab.is-active {
  color: var(--itrade-red, #DC1C1C);
  border-bottom-color: var(--itrade-red, #DC1C1C);
}

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

/* Compact tabs (e.g., device picker phone/tablet/laptop) */
.itrade-tabs--compact { border: none; gap: 4px; margin-bottom: 8px; }
.itrade-tabs--compact .itrade-tab {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 0;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border, #e6e9f0);
  font-size: 0.72rem;
}
.itrade-tabs--compact .itrade-tab.is-active {
  background: var(--itrade-red-soft, rgba(220,28,28,0.08));
  border-color: var(--itrade-red, #DC1C1C);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 7. STATUS BADGES (pill-shaped, color-coded)
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #f1f3f5;
  color: var(--itrade-fg-muted, #666);
}
.itrade-status--draft           { background: #f1f3f5;        color: #666; }
.itrade-status--review,
.itrade-status--awaiting-review { background: var(--itrade-warn-soft);   color: var(--itrade-warn); }
.itrade-status--approved,
.itrade-status--running         { background: var(--itrade-success-soft);color: var(--itrade-success); }
.itrade-status--suspended       { background: var(--itrade-purple-soft); color: var(--itrade-purple); }
.itrade-status--completed       { background: var(--itrade-info-soft);   color: var(--itrade-info); }
.itrade-status--rejected,
.itrade-status--error           { background: var(--itrade-red-soft);    color: var(--itrade-red); }
.itrade-status--unknown         { background: #f1f3f5;        color: #888; }

/* ────────────────────────────────────────────────────────────────────────────
 * 8. STEP INDICATOR (multi-step wizards)
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-steps {
  display: flex;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--itrade-border, #e6e9f0);
  margin-bottom: 16px;
}
.itrade-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border, #e6e9f0);
  border-radius: 8px;
  color: var(--itrade-fg-muted, #666);
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.itrade-step.is-done {
  color: var(--itrade-red, #DC1C1C);
  border-color: var(--itrade-red, #DC1C1C);
}
.itrade-step.is-active {
  color: #fff;
  background: var(--itrade-red, #DC1C1C);
  border-color: var(--itrade-red, #DC1C1C);
}
.itrade-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--itrade-border, #e6e9f0);
  color: var(--itrade-fg, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
}
.itrade-step.is-done   .itrade-step__num { background: var(--itrade-red, #DC1C1C); color: #fff; }
.itrade-step.is-active .itrade-step__num { background: #fff; color: var(--itrade-red, #DC1C1C); }

/* ────────────────────────────────────────────────────────────────────────────
 * 9. OVERLAYS / MODALS / LIGHTBOXES
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.itrade-overlay--lightbox { background: rgba(26, 26, 46, 0.80); }
.itrade-overlay--scroll {
  /* `safe center` keeps the card vertically centred while content fits, and
   * falls back to top-align only when the card is taller than the viewport
   * (so the head doesn't get clipped above the scroll origin). */
  align-items: safe center;
  padding: 30px 20px;
  overflow-y: auto;
}

.itrade-overlay__card {
  background: var(--itrade-card, #fff);
  border: 1px solid var(--itrade-border, #e6e9f0);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  color: var(--itrade-fg, #1a1a1a);
  box-shadow: var(--itrade-shadow-lg, 0 12px 48px rgba(0, 0, 0, 0.10));
  display: flex;
  flex-direction: column;
}
.itrade-overlay__card.is-success { border-color: var(--itrade-success); }
.itrade-overlay__card.is-error   { border-color: var(--itrade-red, #DC1C1C); }
.itrade-overlay__card--wide   { max-width: 1100px; }
.itrade-overlay__card--xwide  { max-width: 1300px; }

.itrade-overlay__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--itrade-border, #e6e9f0);
}
.itrade-overlay__head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--itrade-fg, #1a1a1a);
}
.itrade-overlay__body { padding: 22px; }
.itrade-overlay__body p { color: var(--itrade-fg-muted, #666); font-size: 0.9rem; line-height: 1.5; }

.itrade-overlay__close {
  background: #fff;
  border: 1px solid var(--itrade-border, #e6e9f0);
  color: var(--itrade-fg-muted, #666);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.itrade-overlay__close:hover {
  color: var(--itrade-red, #DC1C1C);
  border-color: var(--itrade-red, #DC1C1C);
}

.itrade-overlay__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--itrade-border, #e6e9f0);
}

/* Inline danger / muted text helpers (use on <strong>, <small>, <span>) */
.itrade-bad   { color: var(--itrade-red, #DC1C1C); }
.itrade-tbd   { color: var(--itrade-warn); font-style: italic; font-weight: 400; font-size: 0.78rem; }

/* Definition list inside overlays (e.g., quote summary, success card) */
.itrade-deflist {
  background: var(--itrade-bg-alt, #fafbfd);
  border-radius: 8px;
  padding: 12px;
  margin: 14px 0;
}
.itrade-deflist > div {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.85rem;
  border-bottom: 1px dotted var(--itrade-border, #e6e9f0);
}
.itrade-deflist > div:last-child { border-bottom: none; }
.itrade-deflist span { color: var(--itrade-fg-muted, #666); }
.itrade-deflist strong { color: var(--itrade-fg, #1a1a1a); }
.itrade-deflist .itrade-bad { color: var(--itrade-red, #DC1C1C); }

/* ────────────────────────────────────────────────────────────────────────────
 * 10. DROP ZONES (file upload)
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  min-height: 160px;
  padding: 22px 14px;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1.5px dashed var(--itrade-border, #e6e9f0);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  color: var(--itrade-fg-muted, #666);
  font-size: 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}
.itrade-dropzone:hover { border-color: var(--itrade-red, #DC1C1C); }
.itrade-dropzone.is-filled {
  border-color: var(--itrade-success);
  border-style: solid;
  cursor: default;
}
.itrade-dropzone__icon { font-size: 2rem; margin-bottom: 6px; }
.itrade-dropzone small {
  color: var(--itrade-fg-soft, #888);
  font-size: 0.72rem;
  display: block;
  margin-top: 4px;
}

/* Image-grid drop slots (4-image slideshow etc.) */
.itrade-dropslot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.itrade-dropslot {
  aspect-ratio: 16 / 9;
  background-color: var(--itrade-bg-alt, #fafbfd);
  background-size: cover;
  background-position: center;
  border: 1.5px dashed var(--itrade-border, #e6e9f0);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--itrade-fg-soft, #888);
  font-size: 0.85rem;
  text-align: center;
  position: relative;
  transition: border-color 0.15s;
}
.itrade-dropslot:hover { border-color: var(--itrade-red, #DC1C1C); }
.itrade-dropslot.is-filled {
  border-color: var(--itrade-success);
  border-style: solid;
}
.itrade-dropslot__num { font-weight: 600; color: var(--itrade-fg-muted, #666); }
.itrade-dropslot__name {
  position: absolute;
  bottom: 4px; left: 4px; right: 4px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--itrade-success);
  font-size: 0.65rem;
  padding: 3px 6px;
  border-radius: 4px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid rgba(25, 167, 116, 0.2);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 11. QR / ADDRESS DISPLAY
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-qr-wrap {
  background: var(--itrade-bg-alt, #fafbfd);
  padding: 14px;
  border-radius: 8px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.itrade-qr {
  background: #fff;
  padding: 8px;
  border-radius: 6px;
  box-shadow: var(--itrade-shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
}
.itrade-addr {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.75rem;
  color: var(--itrade-fg, #1a1a1a);
  background: #fff;
  border: 1px solid var(--itrade-border, #e6e9f0);
  padding: 6px 10px;
  border-radius: 4px;
  word-break: break-all;
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 12. STATUS ROW (inline result feedback below forms)
 * ──────────────────────────────────────────────────────────────────────────── */

.itrade-status-row {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.83rem;
  color: var(--itrade-success);
  background: var(--itrade-success-soft);
  min-height: 1.4em;
}
.itrade-status-row.is-error {
  color: var(--itrade-red, #DC1C1C);
  background: var(--itrade-red-soft, rgba(220,28,28,0.08));
}
.itrade-status-row.is-warn {
  color: var(--itrade-warn);
  background: var(--itrade-warn-soft);
}
.itrade-status-row.is-info {
  color: var(--itrade-info);
  background: var(--itrade-info-soft);
}

/* ════════════════════════════════════════════════════════════════════════════
 * Landing — hero + 3-card grid + footer (anh chốt 2026-05-17)
 * Single-page anonymous homepage uses these atoms; logged-in dashboard
 * pages reuse the .itrade-page wrapper but render their own grids.
 * ════════════════════════════════════════════════════════════════════════════ */

.itrade-landing-main {
  max-width: var(--itrade-content-max, 1280px);
  margin: 0 auto;
  padding: 48px var(--itrade-page-pad-x, 32px);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.itrade-hero {
  display: grid;
  gap: 16px;
  padding: 48px 0 24px;
}
.itrade-hero p { font-size: 16px; color: var(--itrade-fg-muted); margin: 0; max-width: 60ch; }
.itrade-hero h1 { font-size: 56px; line-height: 1.05; margin: 0; letter-spacing: -1px; }
.itrade-kicker {
  margin: 0; padding: 4px 12px; display: inline-block;
  background: var(--itrade-red-soft); color: var(--itrade-red);
  border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  align-self: start;
}
.itrade-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.itrade-button {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--itrade-red), var(--itrade-red-2));
  color: #fff; border: 0; border-radius: 999px;
  padding: 12px 22px; font-size: 14px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(220,28,28,0.25);
  transition: transform 100ms, box-shadow 200ms;
}
.itrade-button:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(220,28,28,0.35); }
.itrade-button--secondary {
  background: #fff; color: var(--itrade-fg);
  border: 1px solid var(--itrade-border); box-shadow: none;
}
.itrade-button--secondary:hover { border-color: var(--itrade-red); color: var(--itrade-red); box-shadow: none; }

.itrade-grid { display: grid; gap: 16px; }
.itrade-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.itrade-grid article {
  background: var(--itrade-card, #fff);
  border: 1px solid var(--itrade-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--itrade-shadow-sm);
}
.itrade-grid article h2 { font-size: 18px; margin: 0 0 8px; color: var(--itrade-fg); }
.itrade-grid article p { font-size: 14px; color: var(--itrade-fg-muted); margin: 0; }

@media (max-width: 980px) {
  .itrade-landing-main { padding: 24px var(--itrade-page-pad-mobile, 16px); gap: 32px; }
  .itrade-hero h1 { font-size: 40px; }
  .itrade-grid--three { grid-template-columns: 1fr; }
}

/* Footer — copyright + Privacy + FAQ Colorbox triggers */
.itrade-landing-footer {
  border-top: 1px solid var(--itrade-border);
  background: var(--itrade-bg-alt, #fafbfd);
  padding: 24px var(--itrade-page-pad-x, 32px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.itrade-footer-copy {
  font-size: 13px; color: var(--itrade-fg-soft);
}
.itrade-footer-nav { display: flex; gap: 20px; }
.itrade-footer-nav a {
  color: var(--itrade-fg-muted); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: color 200ms;
}
.itrade-footer-nav a:hover { color: var(--itrade-red); }

@media (max-width: 600px) {
  .itrade-landing-footer {
    justify-content: center;
    gap: 8px 12px;
    padding: 12px 14px;
  }
  .itrade-footer-copy {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
  }
  .itrade-footer-nav {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 10px;
    white-space: nowrap;
  }
  .itrade-footer-nav a { font-size: 12px; }
}

@media (max-width: 360px) {
  .itrade-landing-footer {
    gap: 6px 8px;
    padding-inline: 10px;
  }
  .itrade-footer-nav { gap: 8px; }
  .itrade-footer-copy,
  .itrade-footer-nav a { font-size: 11px; }
}

/* Inline Colorbox pane wrapper — hidden in-page; cloned into the lightbox
 * by the cbx-init.js binder. Pane content sits inside .cboxLoadedContent
 * (Colorbox's wrapper) at runtime so we override that for typography. */
.itrade-cbx-pane { display: none; }
#cboxLoadedContent .itrade-cbx-pane {
  display: block !important;
  padding: 24px 8px 8px;
  font-family: 'UTM Avo', system-ui, sans-serif;
  color: var(--itrade-fg);
  line-height: 1.55;
}
#cboxLoadedContent .itrade-cbx-pane h2 { color: var(--itrade-red); font-size: 22px; }
#cboxLoadedContent .itrade-cbx-pane p  { font-size: 14px; margin: 0 0 12px; }
#cboxLoadedContent .itrade-cbx-pane a  { color: var(--itrade-red); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════════
 * Admin /admin/users page — filters row + roster table + pager.
 * Mirrors the .itrade-form / .itrade-table atoms but tightens the filter
 * layout so search + role + status + page-size + button sit on one line on
 * desktop and stack cleanly on mobile.
 * ════════════════════════════════════════════════════════════════════════════ */
.itrade-admin-users-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin-bottom: 16px;
}
.itrade-admin-users-filters label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--itrade-fg-muted);
  min-width: 140px;
}
.itrade-admin-users-filters input,
.itrade-admin-users-filters select {
  padding: 8px 10px; border: 1px solid var(--itrade-border);
  border-radius: 8px; font-size: 13px; background: #fff;
}
.itrade-admin-users-filters button { align-self: flex-end; }
.itrade-admin-users-meta { margin: 8px 0 12px; font-size: 12px; }
.itrade-admin-users-pager {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  margin-top: 16px;
}
.itrade-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; padding: 2px 6px;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border);
  border-radius: 6px;
}
/* Reuse .itrade-status atom with role + auth status variants. */
.itrade-status.itrade-status--role  { background: var(--itrade-red-soft); color: var(--itrade-red); }
.itrade-status.itrade-status--active    { background: rgba(25,167,116,0.10); color: var(--itrade-success, #008f4e); }
.itrade-status.itrade-status--suspended { background: var(--itrade-warn-soft, rgba(183,110,0,0.10)); color: var(--itrade-warn, #b76e00); }
.itrade-status.itrade-status--closed    { background: rgba(0,0,0,0.06); color: var(--itrade-fg-muted, #666); }
.itrade-status.itrade-status--unknown   { background: rgba(0,0,0,0.04); color: var(--itrade-fg-soft, #888); }

@media (max-width: 720px) {
  .itrade-admin-users-filters label { min-width: 100%; }
  .itrade-admin-users-filters button { width: 100%; }
  .itrade-admin-users-pager { flex-wrap: wrap; }
}

/* Settings → Admin tab: global risk controls form (kill switch +
 * max capital + symbol whitelist). Mirrors itrade-setting-field /
 * itrade-setting-actions atoms; adds a single warn banner atom. */
.itrade-admin-panel {
  display: flex; flex-direction: column; gap: 14px;
}
.itrade-admin-warn {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--itrade-warn-soft, rgba(183,110,0,0.10));
  color: var(--itrade-warn, #b76e00);
  border: 1px solid rgba(183,110,0,0.25);
  font-size: 0.88rem; line-height: 1.4;
}
.itrade-admin-warn strong { color: var(--itrade-warn, #b76e00); }

/* ════════════════════════════════════════════════════════════════════════════
 * Landing — trader-first layout (anh chốt 2026-05-17 v2): live Bybit
 * candlestick chart fills the viewport, a "+ New Connection" pill floats
 * over the top-right of the chart, and the footer stays anchored to the
 * bottom.
 * ════════════════════════════════════════════════════════════════════════════ */
/* Flex cascade — chart frame fills 100% width AND exactly the remaining
 * height between header and footer (anh chốt 2026-05-17). Restricted to
 * .itrade-landing wrapper so dashboard / credit / billing pages keep
 * their normal block layout. */
html, body { height: 100%; }
.itrade-shell {
  display: flex; flex-direction: column;
  min-height: 100vh;
}
.itrade-shell > .itrade-page-header { flex: 0 0 auto; }
.itrade-shell > .itrade-page-body   { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.itrade-shell > .itrade-page-footer { flex: 0 0 auto; }

/* Landing-only chain. Drupal wraps the controller output in an extra
 * unclassed <div> (from the region-content render path), so we use
 * descendant :has() and turn EVERY div on the chain into a flex-grow
 * column. Restricted to pages that actually contain .itrade-landing so
 * dashboard / billing pages keep their normal block layout. */
.itrade-page-body:has(.itrade-landing) > .itrade-page-main,
.itrade-page-main:has(.itrade-landing) {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0;
}
.itrade-page-main:has(.itrade-landing) > div {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  width: 100%;
}
.itrade-page-main:has(.itrade-landing) > a {
  flex: 0 0 auto;
}
.itrade-page-main .itrade-landing {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  width: 100%;
}

.itrade-landing-main--chart {
  /* Override the .itrade-landing-main base atom: full-bleed, no
   * max-width clamp, no gap, no centering margin. */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
}
.itrade-chart-frame {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--itrade-bg-alt, #fafbfd);
  border-top: 1px solid var(--itrade-border);
  border-bottom: 1px solid var(--itrade-border);
  overflow: hidden;
}
.itrade-landing-footer { flex: 0 0 auto; }
/* Chart host: absolute-fill the chart-frame, internally split into a
 * thin toolbar (symbol + interval picker + status) and the canvas that
 * lightweight-charts mounts into. */
.itrade-chart-host {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.itrade-chart-toolbar {
  flex: 0 0 auto;
  display: flex; gap: 12px; align-items: center;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid var(--itrade-border);
  font-size: 12px;
}
/* Bare picker selects — no field label wrapper (anh chốt 2026-05-17:
 * gain horizontal room; aria-label on the select keeps a11y intact). */
.itrade-chart-select {
  padding: 4px 8px;
  border: 1px solid var(--itrade-border);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  min-width: 100px;
}
.itrade-chart-select:focus {
  outline: 0;
  border-color: var(--itrade-red);
  box-shadow: 0 0 0 2px var(--itrade-red-soft);
}
/* .itrade-chart-status removed from toolbar (anh chốt 2026-05-17). */

/* Live price chip — sits between the picker controls and the status
 * text. Background flashes green/red for one tick per up/down move so
 * the eye catches the direction even when the chart itself is busy. */
.itrade-chart-price {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--itrade-fg);
  min-width: 110px;
  text-align: right;
  transition: background-color 600ms ease-out, color 600ms ease-out;
}
.itrade-chart-price[data-dir="up"]   { color: var(--itrade-success, #008f4e); }
.itrade-chart-price[data-dir="down"] { color: var(--itrade-red); }
.itrade-chart-price[data-flash="up"]   { animation: itrade-flash-up   600ms ease-out; }
.itrade-chart-price[data-flash="down"] { animation: itrade-flash-down 600ms ease-out; }

@keyframes itrade-flash-up {
  0%   { background-color: rgba(0, 143, 78, 0.35); }
  100% { background-color: var(--itrade-bg-alt, #fafbfd); }
}
@keyframes itrade-flash-down {
  0%   { background-color: rgba(220, 28, 28, 0.30); }
  100% { background-color: var(--itrade-bg-alt, #fafbfd); }
}

@media (max-width: 720px) {
  .itrade-chart-price {
    font-size: 12px;
    min-width: 52px;
    max-width: 64px;
    padding: 3px 6px;
  }
}

@media (max-width: 420px) {
  .itrade-chart-price {
    font-size: 11px;
    min-width: 46px;
    max-width: 56px;
    padding: 3px 5px;
  }
}

/* Auto-trade toggle — sits to the right of the live price chip. Default
 * idle = green (Auto Trade), active = red (Stop). State is per-tab and
 * persisted in localStorage; flips on click. Backend wiring lands when
 * the strategy-engine endpoint ships — UI toggle is the contract today. */
.itrade-chart-autotrade {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid #008f4e;
  background: #008f4e;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.itrade-chart-autotrade:hover { background: #007a42; border-color: #007a42; }
.itrade-chart-autotrade:focus-visible { outline: 2px solid rgba(0, 143, 78, 0.45); outline-offset: 2px; }
.itrade-chart-autotrade[aria-pressed="true"] {
  background: var(--itrade-red);
  border-color: var(--itrade-red);
}
.itrade-chart-autotrade[aria-pressed="true"]:hover { background: #b21717; border-color: #b21717; }
.itrade-chart-autotrade[aria-pressed="true"]:focus-visible { outline-color: rgba(220, 28, 28, 0.45); }
.itrade-chart-autotrade:disabled {
  opacity: 0.55; cursor: not-allowed;
  background: #9aa3b2; border-color: #9aa3b2;
}
.itrade-chart-autotrade-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.itrade-chart-autotrade[aria-pressed="true"] .itrade-chart-autotrade-dot {
  animation: itrade-autotrade-pulse 1.2s ease-in-out infinite;
}
@keyframes itrade-autotrade-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
}

@media (max-width: 720px) {
  .itrade-chart-autotrade {
    justify-content: center;
    min-width: 86px;
    min-height: 32px;
    gap: 5px;
    font-size: 11px;
    padding: 5px 7px;
  }
  .itrade-chart-autotrade-dot {
    width: 10px;
    height: 10px;
  }
  .itrade-chart-autotrade-lbl {
    display: inline;
    line-height: 1;
    white-space: nowrap;
  }
}

/* CEX pill row — lives INLINE inside .itrade-acct-strip (anh chốt
 * 2026-05-17). Click pill → switch active CEX → indicators (Equity /
 * Positions / Orders) re-pull data for that CEX via account-overlay
 * refresh(). Pills compact (24 px row height) so they fit horizontally
 * next to the indicator badges without breaking the single-row strip. */
.itrade-chart-cex-tabs {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  /* margin-left:auto pushes the pill group + everything after it to
   * the right end of the acct-strip flex row. The sibling Connect
   * chip (also margin-left:auto via .itrade-acct-strip rule) loses
   * the race — its 8 px gap from a previous rule still applies via
   * the .itrade-chart-cex-tabs + .itrade-page-connect-btn selector
   * below. */
}
.itrade-chart-cex-tab {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--itrade-border);
  border-radius: 999px;
  background: #fff;
  color: var(--itrade-fg-muted, #666);
  font: inherit; font-size: 11px; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.itrade-chart-cex-tab:hover {
  background: var(--itrade-red-soft, rgba(220, 28, 28, 0.06));
  color: var(--itrade-red, #DC1C1C);
  border-color: var(--itrade-red, #DC1C1C);
}
.itrade-chart-cex-tab.is-active {
  background: var(--itrade-red, #DC1C1C);
  color: #fff;
  border-color: var(--itrade-red, #DC1C1C);
}
.itrade-chart-cex-tab--add {
  background: transparent;
  border-style: dashed;
}
.itrade-chart-cex-tab--placeholder {
  cursor: default;
  opacity: 0.7;
}
.itrade-chart-cex-tab--placeholder:hover {
  background: #fff;
  color: var(--itrade-fg-muted, #666);
  border-color: var(--itrade-border);
}
.itrade-acct-strip > .itrade-chart-cex-tabs + .itrade-page-connect-btn {
  margin-left: 8px;
}

/* Single-row chart toolbar — Symbol + Interval pinned left (always
 * visible, never close), tab list middle (horizontal scroll on
 * overflow), live price chip pinned right. */
.itrade-chart-tabs {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border-bottom: 1px solid var(--itrade-border);
  overflow: hidden;
}
.itrade-chart-tabs-pinned {
  display: flex; gap: 6px; flex: 0 0 auto;
  padding-right: 8px;
  border-right: 1px solid var(--itrade-border);
}
.itrade-chart-tabs-list {
  display: flex; gap: 6px; flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}
.itrade-chart-tabs-list:empty::after {
  content: 'No open tabs';
  color: var(--itrade-fg-soft, #888);
  font-size: 12px;
  align-self: center;
  padding: 0 8px;
}
.itrade-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--itrade-border);
  border-radius: 999px;
  background: var(--itrade-bg-alt, #fafbfd);
  color: var(--itrade-fg-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.itrade-tab:hover { background: var(--itrade-red-soft); color: var(--itrade-red); }
.itrade-tab.is-active {
  background: linear-gradient(135deg, var(--itrade-red), var(--itrade-red-2));
  border-color: var(--itrade-red-2);
  color: #fff;
}
.itrade-tab .itrade-tab-sym { font-weight: 700; }
.itrade-tab .itrade-tab-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 14px; line-height: 1;
  color: inherit; opacity: 0.6;
}
.itrade-tab .itrade-tab-x:hover { background: rgba(255,255,255,0.25); opacity: 1; }
.itrade-tab:not(.is-active) .itrade-tab-x:hover { background: rgba(220,28,28,0.15); color: var(--itrade-red); }
.itrade-chart-tabs-list .itrade-tab {
  position: relative;
  flex: 0 0 auto;
  justify-content: center;
  min-width: 92px;
  max-width: 128px;
  min-height: 28px;
  padding: 4px 26px;
  text-align: center;
}
.itrade-chart-tabs-list .itrade-tab .itrade-tab-sym {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
.itrade-chart-tabs-list .itrade-tab .itrade-tab-x {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}

/* Canvases container — stacks chart instances; only active one is
 * visible (rest visibility:hidden). Each child .itrade-chart-canvas
 * absolutely fills the container so layout stays identical when
 * switching tabs. !important + viewport-based min-height is the
 * belt-and-suspenders backup for when the flex chain above us
 * collapses (e.g., during preprocess flicker or theme override). */
/* Chart canvases wrapper — gains a subtle red-tinted gradient + iTrade
 * logo watermark behind the candle layer (anh chốt 2026-05-18: chart
 * looked too plain). klinecharts paints into a transparent canvas
 * (default), so the wrapper bg shows through the empty grid cells.
 * Watermark sits at ~6% opacity center, no pointer events so it never
 * intercepts crosshair / wheel-zoom. */
.itrade-chart-canvases {
  /* Anh chốt 2026-05-21 v2 — flex:1 1 auto (back to auto basis,
   * 1 1 0 caused chart to collapse on some layouts). Keep min-height
   * 360px as floor for tiny viewports; flex still takes remaining
   * space when parent has room. Position+z-index ensures strategies
   * panel below doesn't overlap. */
  flex: 1 1 auto !important;
  min-height: 360px !important;
  position: relative !important;
  z-index: 1;
  width: 100%;
  display: block !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(220, 28, 28, 0.05) 0%, rgba(255, 255, 255, 1) 60%),
    linear-gradient(180deg, #fefefe 0%, #fafafa 100%);
}

/* Strategies-on-this-pair panel — appears below the chart canvas when
 * the active (CEX × pair) combination has at least 1 bot row OR the
 * user authenticated. Anh chốt 2026-05-19: multi-strategy-per-tab
 * support — 1 (CEX × pair) can carry N strategies; each row is its
 * own bot in DB with own cap + loss limit. */
.itrade-chart-strategies {
  border-top: 1px solid var(--itrade-border, #e7e7eb);
  padding: 10px 14px 14px;
  background: #ffffff;
  /* Anh chốt 2026-05-20 — chart-canvases có min-height calc(100vh - 320px)
   * + flex:1 nên có thể tràn xuống đè lên panel khi viewport tight. Add
   * flex-shrink:0 + position+z-index để panel luôn đứng riêng dưới chart
   * canvas, không bị overlap. */
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.itrade-chart-strategies[hidden] { display: none !important; }
.itrade-chart-strategies-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.itrade-chart-strategies-title { font-size: 13px; }
.itrade-chart-strategies-cap {
  font-size: 12px;
  color: var(--itrade-meta, #777);
  flex: 1 1 auto;
}
.itrade-chart-strategies-cap.is-warn { color: #cc6600; font-weight: 500; }
/* Strategies list — responsive grid (anh chốt 2026-05-20):
 *   desktop/laptop ≥ 1024px → 3 cols, ≥ 720px tablet → 2 cols,
 *   mobile < 720px → 1 col stack. Uses auto-fit + minmax for fluid
 *   columns instead of fixed media-query breakpoints. */
.itrade-chart-strategies-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 6px;
}
.itrade-chart-strategy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;     /* anh chốt — thấp xuống từ 8px 10px */
  border: 1px solid var(--itrade-border, #e7e7eb);
  border-radius: 6px;
  background: #fafafb;
  font-size: 12px;
  line-height: 1.3;
  min-height: 30px;
}
.itrade-chart-strategy-row.is-running { border-color: #2ea44f; background: #f2fcf5; }
.itrade-chart-strategy-row.is-error   { border-color: #d73a49; background: #fff5f5; }
.itrade-chart-strategy-row.is-selected { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.12); }
.itrade-chart-strategy-row.has-orphan-position {
  border-color: #f59e0b;
  background: #fffbeb;
}
.itrade-chart-strategy-pos {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  margin-left: 6px;
}
.itrade-chart-strategy-pos--warn {
  color: #b45309;
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}

/* Grid ladder modal (anh chốt 2026-05-21 Phase 3 UI). */
.itrade-grid-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  padding: 10px;
  background: #f7f7f9;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}
.itrade-grid-summary strong { font-size: 14px; }
.itrade-grid-counts {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.itrade-grid-status {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: capitalize;
}
.itrade-grid-status--pending   { background: #fff3d6; color: #946800; }
.itrade-grid-status--placed    { background: #d6e4ff; color: #1d4ed8; }
.itrade-grid-status--filled    { background: #d4f7dd; color: #1a7c30; }
.itrade-grid-status--cancelled { background: #eaeaef; color: #555; }
.itrade-grid-status--failed    { background: #ffe5e5; color: #b91c1c; }
.itrade-chart-strategy-pick {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.itrade-chart-strategy-pick input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #2563eb;
  margin: 0;
}
.itrade-chart-strategy-name {
  font-weight: 500;
  min-width: 0;        /* grid cell can shrink — name truncates */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
  max-width: 40%;
}
.itrade-chart-strategy-meta {
  color: var(--itrade-meta, #777);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}
/* Mobile fallback (< 720px) — single column stack with slightly larger
 * tap targets since the row spans full width again. */
@media (max-width: 720px) {
  .itrade-chart-strategies-list {
    grid-template-columns: 1fr;
  }
  .itrade-chart-strategy-row {
    padding: 7px 10px;
    font-size: 13px;
    min-height: 36px;
  }
  .itrade-chart-strategy-name { max-width: 55%; }
}
.itrade-chart-strategy-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: #eaeaef;
  color: #555;
}
.itrade-chart-strategy-badge--running { background: #d4f7dd; color: #1a7c30; }
.itrade-chart-strategy-badge--paused  { background: #fff3d6; color: #946800; }
.itrade-chart-strategy-badge--draft   { background: #eef0f4; color: #777; }
.itrade-chart-strategy-badge--stopped { background: #f3f3f7; color: #888; }
.itrade-chart-strategy-badge--error   { background: #ffd6d6; color: #b71c1c; }
.itrade-chart-strategy-actions { display: flex; gap: 6px; }
.itrade-chart-strategies-empty {
  color: var(--itrade-meta, #777);
  font-size: 13px;
  padding: 10px 4px;
}
/* First-time-user welcome variant — bigger CTA, friendlier layout
 * with an icon column + body column. Renders only when user has 0
 * bots across all CEXs/pairs. Anh chốt 2026-05-19. */
.itrade-chart-strategies-welcome {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(220, 28, 28, 0.04), rgba(255, 200, 100, 0.06));
  border: 1px solid var(--itrade-border, #e7e7eb);
  border-radius: 8px;
  padding: 16px 18px;
  color: var(--itrade-fg, #222);
  font-size: 14px;
  line-height: 1.5;
}
.itrade-welcome-icon { font-size: 38px; line-height: 1; }
.itrade-welcome-body { flex: 1; }
.itrade-welcome-cta  { margin-top: 10px; }
.itrade-chart-canvases::before {
  content: '';
  position: absolute; inset: 0;
  /* Cache-bust query mints a fresh CDN URL after logo.svg got the
   * circular clip-path on 2026-05-18 — CF edge held the old square
   * SVG (cache-control max-age=10yr, cf-cache-status HIT). Bump
   * suffix on any future logo.svg edit. */
  background-image: url('/themes/custom/itrade_theme/logo.svg?v=2026.05.18-r1');
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(220px, 30%);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
.itrade-chart-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

/* Account-state strip — above the chart toolbar, below the page header.
 * Shows the credentials source (admin demo vs user live) + key wallet
 * stats (equity, position count, open orders) so a trader sees the
 * actual context of the chart they're looking at. */
.itrade-acct-strip {
  flex: 0 0 auto;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid var(--itrade-border);
  font-size: 12px;
}
/* When the Connect Wallet button lives inside the acct-strip (after
 * header was removed 2026-05-17), push it to the right end of the
 * row. syncWalletUi morphs it into the avatar chip on sign-in but
 * keeps the same selector + position. */
.itrade-acct-strip > .itrade-page-connect-btn { margin-left: auto; }
.itrade-acct-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.itrade-acct-badge[data-source="user"]  { background: rgba(0,143,78,0.12); color: var(--itrade-success, #008f4e); }
.itrade-acct-badge[data-source="admin"] { background: var(--itrade-red-soft); color: var(--itrade-red); }
.itrade-acct-badge[data-source="none"]  { background: rgba(0,0,0,0.06); color: var(--itrade-fg-muted); }
/* Legacy inline stat atom — kept for back-compat with any surface
 * still using it (was the only acct-strip layout pre-2026-05-17). */
.itrade-acct-stat {
  display: inline-flex; flex-direction: column;
}
.itrade-acct-stat-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--itrade-fg-muted);
}
.itrade-acct-stat strong {
  font-size: 13px; font-weight: 700; color: var(--itrade-fg);
}
.itrade-acct-stat strong[data-kind="active"] { color: var(--itrade-success, #008f4e); }
.itrade-acct-stat strong[data-kind="idle"]   { color: var(--itrade-fg-muted); }

/* Card variant (anh chốt 2026-05-17 — 4 indicator cards: Equity /
 * Positions / Orders / Unreal P&L). Bordered pill-rectangle with the
 * label on a dimmer row above the value. PnL card uses a semantic
 * data-pnl attr ('pos' green, 'neg' red, '0' neutral). */
.itrade-acct-card {
  display: inline-flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border: 1px solid var(--itrade-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  min-width: 90px;
  text-align: center;
}
.itrade-acct-card-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--itrade-fg-muted, #666);
}
.itrade-acct-card strong {
  font-size: 13px; font-weight: 700;
  color: var(--itrade-fg, #1a1a1a);
  white-space: nowrap;
}
.itrade-acct-card strong[data-kind="active"] { color: var(--itrade-success, #008f4e); }
.itrade-acct-card strong[data-kind="idle"]   { color: var(--itrade-fg-muted, #666); }
.itrade-equity-sparkline {
  display: block;
  margin-top: 4px;
  width: 80px;
  height: 20px;
  opacity: 0.9;
}

/* Clickable variant — Open orders / Open positions cards open the
 * detail modal on click. Anh chốt 2026-05-19 — "hiện giờ không
 * thấy đang giao dịch cái gì". Em strip button defaults so the
 * card looks identical to non-clickable siblings, only cursor +
 * hover background change to signal affordance. */
.itrade-acct-card--clickable {
  background: none;
  border: 0;
  padding: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.15s ease;
}
.itrade-acct-card--clickable:hover {
  background: rgba(220, 28, 28, 0.04);
}
.itrade-acct-card--clickable::after {
  content: '🔍';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.itrade-acct-card--clickable:hover::after {
  opacity: 1;
}

/* Performance breakdown — closed_trades / win_rate / profit_factor /
 * best/worst trade / avg win/loss. Grid auto-flows so the layout
 * stays compact on narrow viewports while presenting 8 cards on
 * desktop. Anh chốt 2026-05-19 — bot detail completion. */
.itrade-bot-advanced-perf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.itrade-bot-perf-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--itrade-border, #e7e7eb);
  border-radius: 6px;
  background: #fafafb;
}
.itrade-bot-perf-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--itrade-meta, #777);
}
.itrade-bot-perf-val {
  font-size: 16px;
  font-weight: 600;
}
.itrade-bot-perf-val.itrade-pnl-pos { color: var(--itrade-success, #008f4e); }
.itrade-bot-perf-val.itrade-pnl-neg { color: var(--itrade-danger, #d73a49); }
.itrade-bot-perf-sub {
  font-size: 11px;
  color: var(--itrade-meta, #777);
}

/* Open Orders modal sub-tabs (Pending | Recent fills) + paginator.
 * Anh chốt 2026-05-19 — market-order bots fill instantly so the
 * Pending tab is usually empty; Fills tab is the practical view. */
.itrade-orders-tabs {
  display: flex;
  gap: 4px;
  margin: -10px -10px 12px;
  padding: 0 10px;
  border-bottom: 1px solid var(--itrade-border, #e7e7eb);
}
.itrade-orders-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font: inherit;
  color: var(--itrade-meta, #777);
  cursor: pointer;
}
.itrade-orders-tab.is-active {
  border-bottom-color: var(--itrade-red, #dc1c1c);
  color: var(--itrade-fg, #222);
  font-weight: 500;
}
.itrade-fills-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--itrade-border, #e7e7eb);
}
.itrade-fills-pager button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.itrade-acct-card strong[data-pnl="pos"] { color: var(--itrade-success, #008f4e); }
.itrade-acct-card strong[data-pnl="neg"] { color: var(--itrade-red, #DC1C1C); }
.itrade-acct-card strong[data-pnl="0"]   { color: var(--itrade-fg-muted, #666); }

@media (max-width: 720px) {
  /* Acct-strip on mobile: cards scroll horizontally, CEX pills + Connect
   * chip move to a second row pinned right. Saves vertical room vs
   * letting flex-wrap stack cards into many rows. */
  .itrade-acct-strip {
    gap: 6px; padding: 8px 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .itrade-acct-stat-lbl { font-size: 9px; }
  .itrade-acct-stat strong { font-size: 12px; }
  .itrade-acct-card {
    padding: 4px 8px;
    min-width: 0;
    flex: 1 1 calc(25% - 6px);
  }
  .itrade-acct-card-lbl { font-size: 8px; letter-spacing: 0.3px; }
  .itrade-acct-card strong { font-size: 11px; }
  .itrade-acct-strip.is-anonymous .itrade-acct-card {
    display: none;
  }
  /* CEX pills row pushed to its own line on mobile so the 4 cards
   * stay on row 1. Connect button compact pill, no margin-auto race. */
  .itrade-acct-strip > .itrade-chart-cex-tabs {
    flex: 1 1 auto;
    margin-left: 0;
    order: 99;
    overflow-x: auto;
  }
  .itrade-acct-strip > .itrade-page-connect-btn {
    order: 100;
    margin-left: auto;
    padding: 6px 12px;
    font-size: 12px;
    box-shadow: 0 1px 4px rgba(220,28,28,0.20);
  }
  .itrade-acct-strip > .itrade-chart-cex-tabs + .itrade-page-connect-btn {
    margin-left: auto;
  }
  /* Connected-state avatar chip already overrides padding via
   * .itrade-page-connect-btn.is-avatar → no extra rule needed. */

  /* Mobile chart toolbar: controls stay reachable on the first row;
   * pair tabs get their own swipe row so many pairs never overlay. */
  .itrade-chart-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "symbol interval price autotrade"
      "pairs pairs pairs pairs";
    align-items: center;
    row-gap: 6px;
    column-gap: 6px;
    padding: 6px 8px;
  }
  .itrade-chart-tabs-pinned {
    display: contents;
  }
  .itrade-chart-tabs-pinned .itrade-chart-select,
  .itrade-chart-price,
  .itrade-chart-autotrade {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 32px;
    min-height: 32px;
    border-radius: 8px;
    justify-self: stretch;
  }
  .itrade-chart-tabs-pinned .itrade-chart-select {
    min-width: 0;
    padding: 0 6px;
    font-size: 11px;
    text-align: center;
    text-align-last: center;
  }
  .itrade-chart-tabs-pinned [data-itrade-chart-symbol] {
    grid-area: symbol;
  }
  .itrade-chart-tabs-pinned [data-itrade-chart-interval] {
    grid-area: interval;
  }
  .itrade-chart-tabs-list {
    grid-area: pairs;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }
  .itrade-chart-price {
    grid-area: price;
    margin-left: 0;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .itrade-chart-autotrade {
    grid-area: autotrade;
    padding: 0 6px;
  }
  .itrade-chart-tabs-list .itrade-tab {
    font-size: 11px;
    min-width: 78px;
    max-width: 106px;
    min-height: 26px;
    padding: 3px 22px;
  }
}

@media (max-width: 480px) {
  /* Phone portrait — cards become 2×2 grid (more readable than 4
   * cramped slivers). CEX pills + Connect on row 3. */
  .itrade-acct-card { flex: 1 1 calc(50% - 6px); }
  .itrade-chart-cex-tab { font-size: 10px; padding: 2px 8px; }
  .itrade-chart-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .itrade-chart-autotrade {
    font-size: 10px;
    gap: 4px;
  }
  .itrade-chart-autotrade-dot {
    display: none;
  }
}
.itrade-chart-actions {
  position: absolute;
  top: 12px; right: 12px;
  /* Sit above any chart-internal toolbars so the + New Connection pill
   * is always reachable. */
  z-index: 200;
  display: flex; gap: 8px;
}
/* When chart-actions lives inside the acct-strip (anh chốt 2026-05-17
 * — moved next to Open orders), reset the absolute-overlay positioning
 * back to inline flex so it sits in the strip like any other badge. */
.itrade-acct-strip > .itrade-chart-actions {
  position: static;
  top: auto; right: auto; z-index: auto;
  margin-left: auto;
}
/* Connect Wallet (or post-sign-in avatar chip) still sits at the
 * far-right end — sibling margin-left:auto already applied at
 * .itrade-acct-strip rule. Both auto-margins compete; the LAST one in
 * source order wins (the Connect button) so chart-actions falls
 * naturally to the left of the Connect chip with the row stat group. */
.itrade-acct-strip > .itrade-chart-actions + .itrade-page-connect-btn {
  margin-left: 8px;
}
.itrade-chart-add {
  background: linear-gradient(135deg, var(--itrade-red, #DC1C1C), var(--itrade-red-2, #B01010)) !important;
  color: #fff !important; border: 0 !important; border-radius: 999px !important;
  padding: 10px 18px !important; font-size: 13px !important; font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(220,28,28,0.30);
  transition: transform 100ms, box-shadow 200ms;
}
.itrade-chart-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(220,28,28,0.40);
}

/* Defensive hide for any Drupal-rendered <h1>/title block above the
 * landing wrapper — the hook_block_access in itrade_core.module is the
 * primary guard, this catches edge cases where page_title_block is
 * placed by a different theme config snapshot. */
.itrade-page-main > h1,
.itrade-page-main > .block-page-title-block,
.itrade-page-main > div:has(> .page-title) {
  display: none !important;
}
@media (max-width: 720px) {
  /* Flex cascade handles height automatically; just keep the chart from
   * collapsing below ~360px on tiny viewports. */
  .itrade-chart-frame { min-height: 360px; }
  .itrade-chart-actions { top: 8px; right: 8px; }
  .itrade-chart-add { padding: 8px 14px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * In-page modal (vanilla replacement for Colorbox). Two triggers fire it:
 *   [data-itrade-modal="<paneId>"]  primary
 *   [data-itrade-cbx="<paneId>"]    legacy alias (back-compat)
 * The matching <div id="<paneId>" class="itrade-cbx-pane"> is hidden in the
 * page; itrade-modal.js clones its innerHTML into .itrade-modal-body.
 * ════════════════════════════════════════════════════════════════════════════ */
.itrade-cbx-pane { display: none; }
html.itrade-modal-scroll-lock,
html.itrade-modal-scroll-lock body { overflow: hidden; }
.itrade-modal-overlay {
  position: fixed; inset: 0; z-index: 99998;
  display: none;
  align-items: center; justify-content: center;
}
.itrade-modal-overlay.is-open { display: flex; }
.itrade-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}
.itrade-modal-card {
  position: relative; z-index: 1;
  background: #fff;
  border-radius: 16px;
  width: min(640px, 92vw);
  max-height: 90vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22);
  font-family: 'UTM Avo', system-ui, sans-serif;
}
.itrade-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--itrade-border);
}
.itrade-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--itrade-fg);
}
.itrade-modal-close {
  background: none; border: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--itrade-fg-muted);
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.itrade-modal-close:hover {
  background: var(--itrade-red-soft);
  color: var(--itrade-red);
}
.itrade-modal-body {
  padding: 20px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.55;
  color: var(--itrade-fg);
}
.itrade-modal-body h2 { color: var(--itrade-red); font-size: 18px; margin: 0 0 8px; }
.itrade-modal-body p  { margin: 0 0 12px; }
.itrade-modal-body a  { color: var(--itrade-red); font-weight: 600; }

/* CEX-API form fields inside the modal */
.itrade-modal-body .itrade-form { display: flex; flex-direction: column; gap: 12px; }
.itrade-modal-body .itrade-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--itrade-fg-muted); }
.itrade-modal-body .itrade-form input,
.itrade-modal-body .itrade-form select {
  padding: 10px 12px; border: 1px solid var(--itrade-border);
  border-radius: 8px; font-size: 14px; background: #fff;
}
.itrade-modal-body .itrade-form input:focus,
.itrade-modal-body .itrade-form select:focus {
  outline: 0;
  border-color: var(--itrade-red);
  box-shadow: 0 0 0 3px var(--itrade-red-soft);
}
.itrade-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.itrade-form-status { font-size: 13px; color: var(--itrade-fg-muted); }
.itrade-form-status[data-kind="success"] { color: var(--itrade-success, #008f4e); }
.itrade-form-status[data-kind="error"]   { color: var(--itrade-red); }
.itrade-form-status[data-kind="info"]    { color: var(--itrade-info, #1e63d9); }

/* ════════════════════════════════════════════════════════════════════════════
 * /bot/{id} user-facing detail page (shipped 2026-05-18).
 *
 * Layout: header (title + status/mode pills + back link) → 4-card
 * performance strip (reuses .itrade-acct-card) → 3 stacked panels
 * (positions, orders, activity log). Reuses .itrade-referred-table
 * + .itrade-status atoms; only adds the page-level wrapper + log-list
 * atoms below.
 * ════════════════════════════════════════════════════════════════════════════ */
.itrade-bot-detail {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 1100px; margin: 0 auto; padding: 16px;
}
.itrade-bot-detail__head {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: flex-start;
}
.itrade-bot-detail__title h2 {
  margin: 0 0 6px; font-size: 1.4rem;
}
.itrade-bot-detail__pills {
  display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.itrade-bot-detail__cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.itrade-bot-detail__section h3 {
  margin: 0 0 10px; font-size: 1rem;
  color: var(--itrade-fg-muted, #666);
  text-transform: uppercase; letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .itrade-bot-detail__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itrade-bot-detail { padding: 12px; }
}

/* Side colour atoms shared by Bot Detail orders + positions tables. */
.itrade-pnl-pos { color: var(--itrade-success, #008f4e); font-weight: 600; }
.itrade-pnl-neg { color: var(--itrade-red, #DC1C1C); font-weight: 600; }

/* Parallel hedge pair surface (Bot Detail). The active pair block
 * sits in its own card-like region; the history table reuses the
 * existing .itrade-referred-table atom with a 1px top spacer. */
.itrade-pair-active {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border);
  border-radius: 8px;
  margin-bottom: 12px;
}
.itrade-pair-state {
  font-size: 13px;
  color: var(--itrade-fg, #1a1a1a);
}
.itrade-pair-history { margin-top: 4px; }

/* Bybit symbol autocomplete on the Bots create form. Wraps a single
 * text input; the suggestion list pops down absolutely-positioned
 * beneath it. Status line under the input shows "Searching…",
 * "✓ valid pair", or "No match for X on spot". */
.itrade-symbol-ac {
  position: relative;
  display: block;
}
.itrade-symbol-ac-list {
  list-style: none;
  margin: 0; padding: 4px 0;
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--itrade-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  max-height: 240px; overflow-y: auto;
  z-index: 10;
}
.itrade-symbol-ac-list[hidden] { display: none; }
.itrade-symbol-ac-item {
  padding: 6px 12px;
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--itrade-fg, #1a1a1a);
}
.itrade-symbol-ac-item:hover {
  background: var(--itrade-bg-alt, #fafbfd);
  color: var(--itrade-red, #DC1C1C);
}
.itrade-symbol-ac-status {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  min-height: 1.2em;
}
.itrade-symbol-ac-status.itrade-ok  { color: var(--itrade-success, #008f4e); }
.itrade-symbol-ac-status.itrade-bad { color: var(--itrade-red, #DC1C1C); }

/* Bots create form — DSL rule editor (custom_dsl strategy). Code-
 * style textarea + collapsible operator reference. */
.itrade-input--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
  overflow-x: auto;
}
.itrade-dsl-hint {
  margin-top: 4px;
  font-size: 12px;
}
.itrade-dsl-hint summary {
  cursor: pointer;
  color: var(--itrade-info, #1e63d9);
  user-select: none;
}
.itrade-dsl-hint pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--itrade-bg-alt, #fafbfd);
  border: 1px solid var(--itrade-border);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  overflow-x: auto;
  color: var(--itrade-fg, #1a1a1a);
}

/* Pre-flight checklist — row inserted directly under each bot in
 * the Settings → Bots table. Compact pill list summarising whether
 * the bot is plan-ready / exchange-ready / live-ready / hedge-mode
 * aware. Right-end shows a single "Ready to trade" or "Action
 * needed" badge. */
.itrade-preflight-row > td {
  padding: 6px 12px 12px;
  background: var(--itrade-bg-alt, #fafbfd);
  border-top: 0;
}
.itrade-preflight-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.itrade-preflight-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.itrade-preflight-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.3;
  border: 1px solid transparent;
}
.itrade-preflight-pill--ok {
  background: rgba(25,167,116,0.10);
  color: var(--itrade-success, #008f4e);
  border-color: rgba(25,167,116,0.25);
}
.itrade-preflight-pill--bad {
  background: rgba(220,28,28,0.10);
  color: var(--itrade-red, #DC1C1C);
  border-color: rgba(220,28,28,0.25);
}
.itrade-preflight-pill--warn {
  background: var(--itrade-warn-soft, rgba(183,110,0,0.10));
  color: var(--itrade-warn, #b76e00);
  border-color: rgba(183,110,0,0.25);
}
.itrade-preflight-pill--info {
  background: rgba(30,99,217,0.10);
  color: var(--itrade-info, #1e63d9);
  border-color: rgba(30,99,217,0.25);
}
.itrade-preflight-summary {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.itrade-preflight-summary--ok {
  background: var(--itrade-success, #008f4e); color: #fff;
}
.itrade-preflight-summary--bad {
  background: var(--itrade-red, #DC1C1C); color: #fff;
}

/* Settings → Bots list — name cell button that opens the detail
 * modal (was a /bot/{id} <a> until 2026-05-18 colorbox-only pivot).
 * Styled like a link so the affordance reads the same. */
.itrade-bot-name-link {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; text-align: left;
  color: var(--itrade-fg, #1a1a1a);
  font-weight: 600;
  border-bottom: 1px dotted var(--itrade-border);
}
.itrade-bot-name-link:hover,
.itrade-bot-name-link:focus-visible {
  color: var(--itrade-red, #DC1C1C);
  border-bottom-color: var(--itrade-red, #DC1C1C);
  outline: none;
}

/* Activity-log list — chronological feed of bot_run_logs rows.
 * Each item: time-ago · level pill · event_type · human message. */
.itrade-log-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 360px; overflow-y: auto;
}
.itrade-log-item {
  display: grid;
  grid-template-columns: 80px 60px minmax(120px, 200px) 1fr;
  gap: 10px; align-items: baseline;
  padding: 6px 8px; border-radius: 6px;
  background: var(--itrade-bg-alt, #fafbfd);
  font-size: 13px;
}
.itrade-log-time {
  color: var(--itrade-fg-muted, #666); font-variant-numeric: tabular-nums;
}
.itrade-log-level {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  text-align: center;
}
.itrade-log-level--info { background: rgba(30,99,217,0.12); color: var(--itrade-info, #1e63d9); }
.itrade-log-level--warn { background: var(--itrade-warn-soft, rgba(183,110,0,0.12)); color: var(--itrade-warn, #b76e00); }
.itrade-log-level--err  { background: rgba(220,28,28,0.12); color: var(--itrade-red, #DC1C1C); }
.itrade-log-event {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--itrade-fg-muted, #666);
}
.itrade-log-msg {
  color: var(--itrade-fg, #1a1a1a);
}
@media (max-width: 720px) {
  .itrade-log-item {
    grid-template-columns: 80px 60px 1fr;
  }
  .itrade-log-event { grid-column: 3 / 4; }
  .itrade-log-msg { grid-column: 1 / -1; }
}