/* ================================================================
   RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ================================================================
   DARK THEME — TradeBotX style
   ================================================================ */
:root {
  --sb-bg:       #0b1120;
  --sb-border:   rgba(255,255,255,0.05);
  --sb-text:     #8b9ab5;
  --sb-active:   #00d2ae;
  --sb-hover:    rgba(0,210,174,0.08);
  --sb-width:    264px;   /* đủ rộng để hiện ĐỦ tên bot dài nhất + pip, không cắt "..." */

  --bg:          #111827;
  --surface:     #161d2d;
  --card:        #1a2336;
  --card-hover:  #1f2a40;
  --border:      rgba(255,255,255,0.06);
  --border-soft: rgba(255,255,255,0.10);
  --shadow:      0 4px 24px rgba(0,0,0,0.40);

  --text:        #dde6f0;
  --muted:       #6b7fa3;
  --dim:         #3d4e68;

  --accent:  #00d2ae;
  --blue:    #3b82f6;
  --green:   #00d2ae;
  --red:     #ff4060;
  --yellow:  #f59e0b;
  --purple:  #8b5cf6;

  --row-pos: rgba(0,210,174,0.05);
  --row-neg: rgba(255,64,96,0.05);
  --row-open:rgba(245,158,11,0.05);

  --grad-accent: linear-gradient(135deg,#00d2ae 0%,#0098c8 100%);
  --grad-red:    linear-gradient(135deg,#ff4060 0%,#c62a47 100%);
  --grad-blue:   linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);
  --grad-yellow: linear-gradient(135deg,#f59e0b 0%,#d97706 100%);

  --font:      'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius:    12px;
  --radius-lg: 16px;

  --inp-bg:     rgba(255,255,255,0.04);
  --inp-border: rgba(255,255,255,0.12);
}

/* ================================================================
   LIGHT THEME — sidebar + main content đều đổi màu
   ================================================================ */
[data-theme="light"] {
  /* sidebar */
  --sb-bg:     #ffffff;
  --sb-border: rgba(30,50,90,0.09);
  --sb-text:   #64748b;
  --sb-active: #0096a0;
  --sb-hover:  rgba(0,150,160,0.08);

  /* main */
  --bg:          #f0f4f8;
  --surface:     #e8edf5;
  --card:        #ffffff;
  --card-hover:  #f4f7fb;
  --border:      rgba(30,50,90,0.07);
  --border-soft: rgba(30,50,90,0.13);
  --shadow:      0 4px 20px rgba(30,50,90,0.10);

  --text:  #1e293b;
  --muted: #64748b;
  --dim:   #94a3b8;

  --green:    #059669;
  --red:      #dc2626;
  --yellow:   #d97706;
  --accent:   #0096a0;
  --blue:     #2563eb;

  --row-pos: rgba(5,150,105,0.05);
  --row-neg: rgba(220,38,38,0.05);
  --row-open:rgba(217,119,6,0.05);

  --inp-bg:     rgba(30,50,90,0.04);
  --inp-border: rgba(30,50,90,0.15);

  /* gradient overrides cho light mode */
  --grad-accent: linear-gradient(135deg,#00b89c 0%,#0087b0 100%);
  --grad-red:    linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);
  --grad-blue:   linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
  --grad-yellow: linear-gradient(135deg,#d97706 0%,#b45309 100%);
}

/* Sidebar light mode — các element có màu hardcode */
[data-theme="light"] .sb-logo-name   { color: #1e293b; }
[data-theme="light"] .sb-logo-sub    { color: #94a3b8; }
[data-theme="light"] .sb-section     { color: #94a3b8; }
[data-theme="light"] .sb-version     { color: #cbd5e1; }
[data-theme="light"] .sb-theme-btn   {
  border-color: rgba(30,50,90,0.10);
  background: rgba(30,50,90,0.03);
  color: #64748b;
}
[data-theme="light"] .sb-theme-btn:hover { background: rgba(30,50,90,0.07); color: #1e293b; }
[data-theme="light"] .nav-item:hover      { color: #1e293b; }
[data-theme="light"] .nav-item.active     { background: rgba(0,150,160,0.10); color: var(--sb-active); }
[data-theme="light"] .nav-item-icon       { background: rgba(30,50,90,0.05); }
[data-theme="light"] .nav-item.active .nav-item-icon { background: rgba(0,150,160,0.12); }
[data-theme="light"] .sb-logo            { border-bottom-color: rgba(30,50,90,0.09); }
[data-theme="light"] .sb-footer          { border-top-color: rgba(30,50,90,0.09); }
[data-theme="light"] .sb-logo-mark       { background: radial-gradient(ellipse at 45% 30%, #0E1E38, #04101E); box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 0 1px rgba(80,110,180,0.25); }

/* Table header light */
[data-theme="light"] thead th { background: var(--card); }

/* ================================================================
   THEME TRANSITIONS
   .panel và .stat-card bị loại khỏi đây — chúng tự quản lý transition
   để tránh xung đột với hover và animation
   ================================================================ */
.main-wrapper, .topbar,
.dl-btn, .filter-btn, td, th, main,
.sidebar, .sb-logo, .sb-footer, .sb-theme-btn,
.nav-item, .nav-item-icon, .sb-logo-name,
.sb-logo-sub, .sb-section, .sb-version {
  transition: background-color 0.28s ease, color 0.18s ease,
              border-color 0.22s ease;
}

/* ================================================================
   SCROLLBARS
   ================================================================ */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.12); border-radius: 99px; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(30,50,90,0.18); }

/* ================================================================
   BASE
   ================================================================ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sb-width);
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
}

/* Logo */
.sb-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px;
  border-bottom: 1px solid var(--sb-border);
}
.sb-logo-mark {
  width: 50px; height: 56px;
  border-radius: 10px;
  background: radial-gradient(ellipse at 45% 30%, #0E1E38, #040D1C);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,0.7), 0 0 0 1px rgba(80,110,180,0.2);
}
.sb-logo-name {
  font-size: 15px; font-weight: 700;
  color: #e2e8f0; letter-spacing: 0.5px;
}
.sb-logo-sub {
  font-size: 10px; color: #4a6080;
  letter-spacing: 0.5px; margin-top: 1px;
}

/* Section label */
.sb-section {
  padding: 20px 20px 8px;
  font-size: 10px; font-weight: 600;
  color: #3d4e68; letter-spacing: 2px;
  text-transform: uppercase;
}

/* Nav items */
#sb-nav { flex: 1; padding: 4px 12px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--sb-text);
  font-size: 13.5px; font-weight: 500;
  margin-bottom: 3px;
  transition: all 0.18s ease;
  position: relative;
}
.nav-item:hover {
  background: var(--sb-hover);
  color: #c8d5e8;
  transform: translateX(4px);
}
.nav-item.active {
  background: rgba(0,210,174,0.12);
  color: var(--sb-active);
  box-shadow: 0 0 16px rgba(0,210,174,0.10);
}
[data-theme="light"] .nav-item:hover { color: #1e293b; }
[data-theme="light"] .nav-item.active {
  background: rgba(0,150,160,0.10);
  box-shadow: 0 0 16px rgba(0,150,160,0.10);
}
.nav-item-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  transition: background 0.15s;
}
.nav-item.active .nav-item-icon { background: rgba(0,210,174,0.15); }
/* Hiện ĐỦ tên bot trên 1 dòng (không "..."); sidebar đã nới đủ rộng.
   min-width:0 + overflow:hidden + text-overflow:clip = phòng hờ tên cực dài thì
   cắt lặng (không hiện dấu ...) và pip (flex-shrink:0) vẫn luôn thấy. */
.nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.nav-item-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sb-active);
  flex-shrink: 0;            /* pip không bao giờ bị co/cắt dù tên dài */
  /* Ẩn bằng display (animation pulse chỉnh opacity nên KHÔNG dùng opacity để ẩn) */
  display: none;
  animation: pulse 2s infinite;
}
/* Pip chỉ hiện khi group có lệnh đang mở (class .has-open) */
.nav-item.has-open .nav-item-pip { display: block; }
/* Đổi màu pip theo lãi/lỗ: mặc định XANH (dương/hòa), ĐỎ khi lệnh đang ÂM (class .pip-neg) */
.nav-item.has-open.pip-neg .nav-item-pip { background: #f85149; }

/* Sidebar footer */
.sb-footer {
  padding: 16px 12px;
  border-top: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-theme-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: #8b9ab5;
  font-family: var(--font);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.sb-theme-btn:hover { background: rgba(255,255,255,0.07); color: #c8d5e8; }
.sb-theme-icon { font-size: 15px; }
.sb-version {
  font-size: 10px; color: #2d3d55;
  text-align: center; letter-spacing: 1px;
  padding-bottom: 2px;
}

/* Sidebar overlay for mobile */
.sb-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
}
.sb-overlay.show { display: block; }

/* ================================================================
   MAIN WRAPPER
   ================================================================ */
.main-wrapper {
  margin-left: var(--sb-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.mobile-menu-btn {
  display: none;
  width: 34px; height: 34px;
  background: transparent; border: none;
  color: var(--muted); font-size: 20px;
  cursor: pointer; align-items: center; justify-content: center;
  border-radius: 8px;
}
.mobile-menu-btn:hover { background: var(--card); }
#page-title {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.2px;
}
/* PAPER ⇄ REAL: bấm tên bot để đổi. REAL = chữ đỏ + nhãn "REAL" nhỏ góc trên phải
   (::after inline + vertical-align, KHÔNG absolute — mobile có overflow:hidden sẽ cắt mất) */
#page-title.mode-switchable { cursor: pointer; user-select: none; }
#page-title.mode-switchable:hover { text-decoration: underline dotted; text-underline-offset: 4px; }
#page-title.mode-real { color: var(--red); }
#page-title[data-mode-tag]::after {
  content: attr(data-mode-tag);
  display: inline-block; vertical-align: super;
  margin-left: 3px; padding: 0 4px; border-radius: 3px;
  font-size: 9px; font-weight: 800; line-height: 13px; letter-spacing: 0.5px;
  color: #fff; background: var(--red);
}
#page-title.mode-pending::after { background: #e3a008; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.live-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  background: rgba(0,210,174,0.1);
  border: 1px solid rgba(0,210,174,0.2);
  font-size: 11px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.5px;
}
[data-theme="light"] .live-pill {
  background: rgba(0,150,160,0.08);
  border-color: rgba(0,150,160,0.20);
  color: var(--accent);
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}
#clock {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--muted);
  background: var(--card);
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--border);
  letter-spacing: 1px;
}

@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes fadeUp  {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes spin    { to { transform:rotate(360deg); } }

/* ================================================================
   MAIN CONTENT
   ================================================================ */
main#main-content {
  padding: 24px 28px;
  flex: 1;
}

/* ================================================================
   SUB-TAB BAR (tab con của group trong cửa sổ chính)
   Đồng bộ ngôn ngữ thiết kế với .nav-item ở sidebar (pill bo tròn +
   tint accent khi active + icon trong ô bo tròn).
   ================================================================ */
.sub-tabbar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* FREEZE: dính ngay dưới topbar khi cuộn nội dung — áp dụng mọi bot.
     --topbar-h do JS đo topbar THẬT rồi ghi vào :root (index.html) -> topbar cao bao
     nhiêu (mobile xuống dòng thành 2-3 hàng) thanh này vẫn neo đúng, không đè lên nhau.
     60px = giá trị dự phòng khi JS chưa kịp chạy. */
  position: sticky; top: var(--topbar-h, 60px); z-index: 99;
}
/* Mirror .nav-item của sidebar (đồng bộ), nhưng kích thước nhỏ gọn hơn */
.sub-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--sb-text);
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  transition: all 0.18s ease;
  position: relative;
}
.sub-tab:hover {
  background: var(--sb-hover);
  color: #c8d5e8;
  transform: translateX(3px);
}
[data-theme="light"] .sub-tab:hover { color: #1e293b; }
.sub-tab.active {
  background: rgba(0,210,174,0.12);
  color: var(--sb-active);
  box-shadow: 0 0 16px rgba(0,210,174,0.10);
}
[data-theme="light"] .sub-tab.active {
  background: rgba(0,150,160,0.10);
  box-shadow: 0 0 16px rgba(0,150,160,0.10);
}
.sub-tab-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  transition: background 0.15s;
}
[data-theme="light"] .sub-tab-icon { background: rgba(30,50,90,0.05); }
.sub-tab.active .sub-tab-icon { background: rgba(0,210,174,0.15); }
[data-theme="light"] .sub-tab.active .sub-tab-icon { background: rgba(0,150,160,0.15); }
.sub-tab-label { flex: 1; }
.sub-tab-pip {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sb-active);
  /* Ẩn bằng display (animation pulse chỉnh opacity nên KHÔNG dùng opacity để ẩn) */
  display: none;
  animation: pulse 2s infinite;
}
/* Pip chỉ hiện khi group có lệnh đang mở */
.sub-tab.has-open .sub-tab-pip { display: block; }
.sub-tab.has-open.pip-neg .sub-tab-pip { background: #f85149; }

/* ================================================================
   TAB HEADER BAR
   ================================================================ */
.tab-header-bar {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}
.tab-title { font-size: 20px; font-weight: 700; }
.tab-sub   { font-size: 12px; color: var(--muted); margin-top: 3px; }
/* UserTrade_Guard: nút "＋ Nhận quản lý" (đầu tab Trading) + nút "↩" trả coin trên mỗi dòng */
.td-adopt-bar { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.td-adopt-btn { padding: 6px 14px; font-size: 12.5px; }
.td-release-btn { padding: 3px 8px; font-size: 11px; margin-left: 4px; }
/* UserTrade_Guard: nút ⏸/▶ tạm TẮT / BẬT LẠI TP/SL — vàng cam khi đang TẮT (coin không có lớp chặn lỗ) */
.td-pause-btn { padding: 3px 8px; font-size: 11px; margin-left: 4px; }
.td-pause-btn.is-paused { color: #d29922; border-color: rgba(210,153,34,0.6); background: rgba(210,153,34,0.12); }
/* UserTrade_Guard: bảng CHỌN coin khi bấm "＋ Nhận quản lý" (dùng khung .ob-overlay/.ob-dialog) */
.td-adopt-dialog { max-width: 460px; }
.td-adopt-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; max-height: 55vh; overflow-y: auto; }
.td-adopt-item { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; text-align: left;
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border-soft, #2d3645);
  background: transparent; color: var(--text, #e6edf3); font-family: var(--font); font-size: 14px; cursor: pointer; }
.td-adopt-item:hover { background: rgba(88,166,255,0.12); border-color: var(--accent, #58a6ff); }
.td-adopt-item.is-managed { opacity: 0.45; cursor: default; }
.td-adopt-item.is-managed:hover { background: transparent; border-color: var(--border-soft, #2d3645); }
.td-adopt-qty { color: var(--muted); font-size: 12px; }
.td-adopt-val { font-weight: 600; min-width: 70px; text-align: right; }
.td-adopt-other { display: flex; gap: 8px; border-top: 1px solid var(--border-soft, #2d3645); padding-top: 12px; }
.td-adopt-other input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-soft, #2d3645);
  background: var(--bg, #0d1117); color: var(--text, #e6edf3); font-size: 14px; text-transform: uppercase; }
.dl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  border: 1px solid var(--border-soft); border-radius: 8px;
  background: var(--card); color: var(--muted);
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  text-decoration: none; cursor: pointer; flex-shrink: 0;
  transition: all 0.2s;
}
.dl-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,210,174,0.06); }
[data-theme="light"] .dl-btn:hover { background: rgba(0,150,160,0.06); }

/* ================================================================
   STAT CARDS
   ================================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px,1fr));
  gap: 14px; margin-bottom: 22px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  cursor: default;
  will-change: transform;

  /* Entry animation — dùng 'both' để from-keyframe kiểm soát trạng thái ban đầu,
     tránh conflict với transform của hover */
  animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;

  /* Hover transition — cubic-bezier(0.34, 1.15, 0.64, 1): float lên nhẹ có spring
     Không dùng !important để tránh race condition với animation */
  transition:
    transform    0.38s cubic-bezier(0.34, 1.15, 0.64, 1),
    box-shadow   0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.28s ease,
    border-color     0.26s ease;
}

.stat-card:hover {
  transform: translateY(-7px);
  background: var(--card-hover);
  border-color: var(--border-soft);
}

/* Glow theo màu — shadow phát sáng từ phía dưới */
.stat-card.c-green:hover  { box-shadow: 0 14px 36px -4px rgba(0,210,174,0.30), 0 4px 12px rgba(0,0,0,0.25); }
.stat-card.c-red:hover    { box-shadow: 0 14px 36px -4px rgba(255,64,96,0.28),  0 4px 12px rgba(0,0,0,0.25); }
.stat-card.c-blue:hover   { box-shadow: 0 14px 36px -4px rgba(59,130,246,0.28), 0 4px 12px rgba(0,0,0,0.25); }
.stat-card.c-yellow:hover { box-shadow: 0 14px 36px -4px rgba(245,158,11,0.28), 0 4px 12px rgba(0,0,0,0.25); }
.stat-card.c-purple:hover { box-shadow: 0 14px 36px -4px rgba(139,92,246,0.28), 0 4px 12px rgba(0,0,0,0.25); }

[data-theme="light"] .stat-card.c-green:hover  { box-shadow: 0 12px 32px -4px rgba(5,150,105,0.22),  0 3px 8px rgba(30,50,90,0.10); }
[data-theme="light"] .stat-card.c-red:hover    { box-shadow: 0 12px 32px -4px rgba(220,38,38,0.20),  0 3px 8px rgba(30,50,90,0.10); }
[data-theme="light"] .stat-card.c-blue:hover   { box-shadow: 0 12px 32px -4px rgba(37,99,235,0.20),  0 3px 8px rgba(30,50,90,0.10); }
[data-theme="light"] .stat-card.c-yellow:hover { box-shadow: 0 12px 32px -4px rgba(217,119,6,0.20),  0 3px 8px rgba(30,50,90,0.10); }
[data-theme="light"] .stat-card.c-purple:hover { box-shadow: 0 12px 32px -4px rgba(109,40,217,0.20), 0 3px 8px rgba(30,50,90,0.10); }

/* Viền top — dày lên mượt khi hover */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: height 0.38s cubic-bezier(0.34, 1.15, 0.64, 1);
}
.stat-card:hover::before { height: 3px; }
.stat-card.c-green::before  { background: var(--grad-accent); }
.stat-card.c-red::before    { background: var(--grad-red); }
.stat-card.c-blue::before   { background: var(--grad-blue); }
.stat-card.c-yellow::before { background: var(--grad-yellow); }
.stat-card.c-purple::before { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }

.stat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 12px;
}
.stat-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 5px;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 600; line-height: 1;
  margin-bottom: 3px;
}
.stat-sub { font-size: 11.5px; color: var(--muted); }

.v-green  { color: var(--green); }
.v-red    { color: var(--red);   }
.v-accent { color: var(--accent);}
.v-yellow { color: var(--yellow);}
.v-blue   { color: var(--blue);  }

/* ================================================================
   PANELS / CHARTS
   ================================================================ */
.row       { display: grid; gap: 14px; margin-bottom: 22px; }
.col-2     { grid-template-columns: 1fr 1fr; }
.col-3-1   { grid-template-columns: 3fr 1fr; }
.col-ms    { grid-template-columns: 1fr 280px; }

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  will-change: transform;
  transition:
    transform    0.34s cubic-bezier(0.34, 1.1, 0.64, 1),
    box-shadow   0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.28s ease,
    border-color     0.26s ease;
}
.panel:hover {
  transform: translateY(-4px);
  border-color: var(--border-soft);
  box-shadow: 0 14px 40px -6px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.20);
}
[data-theme="light"] .panel:hover {
  box-shadow: 0 14px 36px -6px rgba(30,50,90,0.16), 0 3px 8px rgba(30,50,90,0.08);
}
.panel-head {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 16px;
}
.panel-title { font-size: 14px; font-weight: 600; }
.panel-sub   { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Bộ lọc ngày cho chart "Phân Phối PNL" */
.pnl-range {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end;
}
.pnl-range-lb {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted); font-family: var(--font);
}
.pnl-date {
  padding: 3px 7px;
  border: 1px solid var(--border-soft); border-radius: 6px;
  background: var(--card); color: var(--text);
  font-family: var(--font); font-size: 11.5px;
  outline: none; transition: border-color 0.18s, box-shadow 0.18s;
}
.pnl-date:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,210,174,0.15); }
.pnl-range-reset {
  padding: 4px 11px;
  border: 1px solid var(--border-soft); border-radius: 6px;
  background: transparent; color: var(--muted);
  font-family: var(--font); font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.pnl-range-reset:hover { border-color: var(--accent); color: var(--text); }

/* Lịch flatpickr theo theme của app */
.flatpickr-calendar {
  background: var(--card);
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--card); }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--card); }
.flatpickr-months, .flatpickr-weekdays, .flatpickr-weekday { background: transparent; }
.flatpickr-month, .flatpickr-current-month, .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year, .flatpickr-weekday { color: var(--text); fill: var(--text); }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--text); }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--accent); }
.flatpickr-day {
  color: var(--text);
  border-radius: 6px;
}
.flatpickr-day:hover { background: rgba(0,210,174,0.14); border-color: transparent; }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--accent); border-color: var(--accent); color: #04121a;
}
.flatpickr-day.today { border-color: var(--border-soft); }
/* Ngày không có lệnh: bôi mờ, không chọn được */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed {
  color: var(--muted);
  opacity: 0.28;
  background: transparent;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ================================================================
   CHART RULER PLUGIN
   ================================================================ */
.cr-tip {
  position: absolute; z-index: 20; display: none;
  background: rgba(12,16,24,0.92); border: 1px solid rgba(100,120,160,0.4);
  border-radius: 5px; padding: 3px 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; font-weight: 600; pointer-events: none;
  white-space: nowrap; letter-spacing: 0.02em;
}
[data-theme="light"] .cr-tip { background: rgba(255,255,255,0.95); }
.ruler-bar { display: flex; gap: 4px; align-items: center; margin-left: auto; flex-shrink: 0; }
.ruler-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 26px;
  border: 1px solid var(--border-soft); border-radius: 6px;
  background: transparent; color: var(--muted);
  cursor: pointer; transition: all 0.15s; padding: 0; flex-shrink: 0;
}
.ruler-btn:hover  { border-color: var(--accent); color: var(--text); }
.ruler-btn.active { background: rgba(0,210,174,0.14); border-color: var(--accent); color: var(--accent); }
[data-theme="light"] .ruler-btn.active { background: rgba(0,150,160,0.10); }

/* ================================================================
   FILTER BAR
   ================================================================ */
.ob-search-bar {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
}
.ob-search-bar::before {
  content: '';
  position: absolute;
  left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
.ob-search-input {
  display: block;
  width: 260px;
  padding: 6px 14px 6px 34px;
  border: 1px solid var(--border-soft); border-radius: 7px;
  background: var(--card); color: var(--text);
  font-family: var(--font); font-size: 13px;
  outline: none; transition: border-color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
}
.ob-search-input::placeholder { color: var(--muted); }
.ob-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,210,174,0.15); }

.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filter-btn {
  padding: 4px 13px;
  border: 1px solid var(--border-soft); border-radius: 6px;
  background: transparent; color: var(--muted);
  font-family: var(--font); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.filter-btn:hover  { border-color: var(--accent); color: var(--text); }
.filter-btn.active {
  background: rgba(0,210,174,0.14);
  border-color: var(--accent); color: var(--accent); font-weight: 600;
}
[data-theme="light"] .filter-btn.active {
  background: rgba(0,150,160,0.10);
}
/* Lọc theo MODE (REAL/PAPER) — nhãn + vạch ngăn với nhóm lọc trạng thái */
.filter-mode-lb  { font-size: 11px; color: var(--muted); align-self: center; margin-right: 2px; }
.filter-mode-sep { display: inline-block; width: 1px; height: 18px; background: var(--border); margin: 0 6px; align-self: center; }
/* Badge REAL/PAPER cạnh symbol (khi xem "Cả 2") */
.ob-mode-tag   { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; vertical-align: middle; font-family: var(--font-mono); }
.ob-mode-real  { color: #f85149; background: rgba(248,81,73,0.14); }
.ob-mode-paper { color: #8b93a7; background: rgba(139,147,167,0.14); }

/* Nút chuyển %/USDT trong khung "Phân Phối PNL" (dùng chung mọi bot) */
.pnl-mode-toggle { display: inline-flex; gap: 0; flex-shrink: 0; }
.pnl-mode-btn {
  padding: 3px 11px;
  border: 1px solid var(--border-soft);
  background: transparent; color: var(--muted);
  font-family: var(--font); font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.pnl-mode-btn:first-child { border-radius: 6px 0 0 6px; }
.pnl-mode-btn:last-child  { border-radius: 0 6px 6px 0; border-left: none; }
.pnl-mode-btn:hover { color: var(--text); }
.pnl-mode-btn.active {
  background: rgba(0,210,174,0.14);
  border-color: var(--accent); color: var(--accent);
}
[data-theme="light"] .pnl-mode-btn.active { background: rgba(0,150,160,0.10); }

/* ================================================================
   TABLE — standard wrap (horizontal scroll only)
   ================================================================ */
.table-wrap { overflow-x: auto; }

/* TABLE — scrollable body (order book list) */
.table-scroll {
  overflow-y: auto;
  overflow-x: auto;
  max-height: 460px;
}
.table-scroll::-webkit-scrollbar       { width: 5px; height: 5px; }
.table-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 99px; }
[data-theme="light"] .table-scroll::-webkit-scrollbar-thumb { background: rgba(30,50,90,0.15); }

/* Tham số có ghi chú hover (tab Bot Settings > Settings) */
.param-key-help { cursor: help; border-bottom: 1px dotted var(--muted); }
.param-help-i { font-size: 10px; color: var(--muted); opacity: 0.7; }

/* ── MASTER SWITCH: bật/tắt đồng loạt bot (tab Bot Settings) ── */
.master-panel {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.02);
}
[data-theme="light"] .master-panel { background: rgba(30,50,90,0.03); }
.master-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.master-btn {
  min-width: 92px;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: background .15s, border-color .15s, color .15s;
}
.master-btn.master-on  { background: rgba(63,185,80,0.18);  color: #3fb950; border-color: #3fb95066; }
.master-btn.master-on:hover  { background: rgba(63,185,80,0.28); }
.master-btn.master-off { background: rgba(248,81,73,0.16);  color: #f85149; border-color: #f8514966; }
.master-btn.master-off:hover { background: rgba(248,81,73,0.26); }
.master-info { flex: 1; min-width: 180px; }
.master-title { font-weight: 700; font-size: 14px; }
.master-options { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-soft); }
.master-opt-row { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.master-delay-input {
  width: 72px; padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--border-soft); background: transparent;
  color: inherit; font-family: var(--font-mono);
}
.master-order-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--border-soft);
  border-radius: 8px; margin-bottom: 6px;
}
.master-order-idx { width: 20px; text-align: center; font-family: var(--font-mono); color: var(--muted); font-size: 12px; }
.master-order-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(160,160,160,0.4); flex: none; }
.master-order-name { flex: 1; font-size: 13px; }
.master-order-ctrl { display: flex; gap: 4px; }
.master-ord-btn { padding: 2px 9px; font-size: 12px; }
.master-ord-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Nút ✕ xoá lệnh treo trong tab Trading (cạnh nút TP/SL) */
.td-clear-btn {
  padding: 3px 8px;
  font-size: 11px;
  margin-left: 5px;
  color: var(--muted);
  border-color: rgba(120,120,120,0.45);
}
.td-clear-btn:hover {
  color: #f85149;
  border-color: #f8514973;
}

/* Sentinel nạp-dần cuối sổ lệnh (render theo khối, chống lag khi click tab) */
/* CLOSE REASON có 2 bản trong DOM: .ob-r-full (mặc định) và .ob-r-short (mobile).
   Đổi bằng CSS chứ không bằng JS để xoay ngang/dọc không phải dựng lại bảng. */
.ob-r-short { display: none; }
.ob-h-short { display: none; }

.ob-more {
  padding: 10px 12px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { border-bottom: 1px solid var(--border-soft); }
th {
  text-align: left; padding: 9px 13px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.8px;
  color: var(--muted); white-space: nowrap; text-transform: uppercase;
  background: var(--card);
}
/* Sticky header inside scrollable container */
.table-scroll thead th { position: sticky; top: 0; z-index: 2; }

td {
  padding: 10px 13px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  white-space: nowrap; color: var(--text);
  font-family: var(--font-mono); font-size: 12.5px;
}
[data-theme="light"] td { border-bottom-color: rgba(30,50,90,0.04); }

tbody tr { transition: background 0.1s; }
tbody tr:last-child td { border-bottom: none; }

/* Row tinting by status/PNL */
tr.row-pos  { background: var(--row-pos); }
tr.row-neg  { background: var(--row-neg); }
tr.row-open { background: var(--row-open); }

tbody tr:hover td { filter: brightness(1.08); }
[data-theme="light"] tbody tr:hover td { filter: brightness(0.96); }

/* Order Book: lệnh ĐÃ ĐÓNG click được — hover NẨY LÊN mượt như card */
tbody tr.ob-click { cursor: pointer; position: relative;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; }
tbody tr.ob-click:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.45); z-index: 3; }
tbody tr.ob-click:hover td { background: rgba(88,166,255,0.12); filter: none; }
tbody tr.ob-click:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent, #58a6ff); }

/* Modal vẽ chart lệnh */
.ob-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center; padding: 30px 16px; overflow-y: auto; }
.ob-dialog { background: var(--card, #161b22); border: 1px solid var(--border-soft, #2d3645);
  border-radius: 14px; width: 100%; max-width: 960px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.ob-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ob-modal-head .ob-x { margin-left: auto; cursor: pointer; background: transparent; border: 1px solid var(--border-soft,#2d3645);
  color: var(--text, #e6edf3); border-radius: 8px; width: 30px; height: 30px; font-size: 15px; }
.ob-modal-head .ob-x:hover { background: rgba(248,81,73,0.15); }

/* ================================================================
   PNL COLORS — vivid, distinct
   ================================================================ */
.pnl-pos {
  color: var(--green);
  font-weight: 600;
}
.pnl-neg {
  color: var(--red);
  font-weight: 600;
}
.txt-accent { color: var(--accent); font-weight: 600; }
.txt-muted  { color: var(--muted); }

/* ================================================================
   BADGES
   ================================================================ */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px;
  font-family: var(--font); text-transform: uppercase;
}
.badge-open    { background: rgba(245,158,11,0.14); color: var(--yellow); border: 1px solid rgba(245,158,11,0.30); }
.badge-closed  { background: rgba(0,210,174,0.10);  color: var(--green);  border: 1px solid rgba(0,210,174,0.25); }
.badge-overdue { background: rgba(255,64,96,0.12);  color: var(--red);    border: 1px solid rgba(255,64,96,0.30); }
[data-theme="light"] .badge-closed { background: rgba(5,150,105,0.10); border-color: rgba(5,150,105,0.25); }
[data-theme="light"] .badge-open   { background: rgba(217,119,6,0.10);  border-color: rgba(217,119,6,0.25);  }

/* ================================================================
   STATES
   ================================================================ */
#loading {
  display: flex; align-items: center; justify-content: center;
  height: 220px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: 2px;
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 12px;
}
.state-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px; color: var(--muted);
  font-size: 13px; text-align: center; gap: 12px;
}
.state-empty .icon { font-size: 32px; opacity: 0.4; }

/* ================================================================
   TAB "AUTOPILOT REPORTS" (Momentum_AutoPilot — js/renderers/autopilot_reports.js)
   Danh sách ngày bên trái + nội dung Markdown bên phải; mobile: ô chọn ở trên.
   ================================================================ */
.ap-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: start; }
.ap-list-col { padding: 6px; max-height: calc(100vh - 190px); overflow-y: auto; }
.ap-item {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; margin-bottom: 4px;
  color: var(--text); cursor: pointer; font: inherit;
}
.ap-item:hover { background: var(--card-hover); }
.ap-item.active { border-color: var(--accent); background: var(--card-hover); }
.ap-item-date { font-weight: 600; font-size: 13px; }
.ap-item-sum { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ap-select { display: none; width: 100%; margin-bottom: 10px; padding: 8px;
  background: var(--card); color: var(--text); border: 1px solid var(--border-soft); border-radius: 8px; }
.ap-body { padding: 14px 18px; max-height: calc(100vh - 190px); overflow-y: auto; line-height: 1.55; font-size: 13px; color: var(--text); }
.ap-meta { font-size: 11px; margin-bottom: 8px; }
.ap-body .ap-h { margin: 16px 0 8px; color: var(--accent); }
.ap-body h2.ap-h { font-size: 18px; margin-top: 4px; }
.ap-body h3.ap-h { font-size: 15px; }
.ap-body h4.ap-h, .ap-body h5.ap-h, .ap-body h6.ap-h { font-size: 13px; }
.ap-body .ap-p { margin: 6px 0; }
.ap-body .ap-list { margin: 6px 0; padding-left: 20px; }
.ap-body .ap-list li { margin: 3px 0; }
.ap-body code { background: var(--surface); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.ap-body .ap-pre { background: var(--surface); padding: 10px; border-radius: 8px; overflow-x: auto; font-size: 12px; }
.ap-body .ap-quote { border-left: 3px solid var(--accent); margin: 8px 0; padding: 4px 10px; color: var(--muted); }
.ap-body .table-scroll { overflow-x: auto; margin: 8px 0; }
.ap-table { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.ap-table th, .ap-table td { border: 1px solid var(--border-soft); padding: 4px 8px; text-align: left; white-space: nowrap; }
.ap-table th { background: var(--surface); }
.ap-body hr { border: 0; border-top: 1px solid var(--border-soft); margin: 12px 0; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
  .col-ms { grid-template-columns: 1fr; }
  .col-3-1{ grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --sb-width: 264px; }
  .main-wrapper  { margin-left: 0; }
  .sidebar       { transform: translateX(-100%); transition: transform 0.25s; }
  .sidebar.open  { transform: translateX(0); }
  .mobile-menu-btn { display: flex; }
  main#main-content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .col-2  { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
}

/* ================================================================
   CHANGE PASSWORD MODAL
   ================================================================ */
.pw-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: overlayIn 0.18s ease;
}
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }

.pw-modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px 28px 24px;
  width: 100%; max-width: 400px; margin: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
  animation: modalIn 0.22s cubic-bezier(0.34,1.1,0.64,1);
  transition: background-color 0.28s ease, border-color 0.22s ease;
}
@keyframes modalIn { from { opacity:0; transform:translateY(14px) scale(0.97); } to { opacity:1; transform:none; } }

.pw-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.pw-header span { font-size: 16px; font-weight: 600; color: var(--text); }
.pw-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-sub); font-size: 18px; line-height: 1;
  padding: 4px 6px; border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.pw-close:hover { color: var(--red); background: rgba(255,64,96,0.08); }

.pw-field { margin-bottom: 14px; }
.pw-field label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.pw-inp-wrap { position: relative; }
.pw-field input {
  width: 100%; background: var(--inp-bg);
  border: 1px solid var(--inp-border);
  border-radius: 9px; padding: 10px 38px 10px 13px;
  font-size: 14px; color: var(--text); font-family: inherit; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pw-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,210,174,0.12);
}
.pw-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-sub);
  font-size: 15px; padding: 2px; border-radius: 4px; line-height: 1;
  transition: color 0.15s ease;
}
.pw-eye:hover { color: var(--text); }

.pw-msg {
  display: none; border-radius: 9px; padding: 9px 13px;
  font-size: 13px; margin-bottom: 14px; line-height: 1.5;
}
.pw-msg.show { display: block; }
.pw-msg.err  { background: rgba(255,64,96,0.10);  border: 1px solid rgba(255,64,96,0.25);  color: #ff6080; }
.pw-msg.ok   { background: rgba(0,210,174,0.10);  border: 1px solid rgba(0,210,174,0.25);  color: #00d2ae; }

.pw-btn {
  width: 100%; margin-top: 4px; padding: 12px;
  background: linear-gradient(135deg, #00d2ae 0%, #0098c8 100%);
  border: none; border-radius: 9px; color: #fff;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  letter-spacing: 0.04em; box-shadow: 0 6px 20px rgba(0,210,174,0.22);
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.pw-btn:hover:not(:disabled) { opacity: 0.87; transform: translateY(-1px); }
.pw-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.pw-spin {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  border-radius: 50%; animation: pw-rotate 0.7s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
@keyframes pw-rotate { to { transform: rotate(360deg); } }

/* ================================================================
   BOT SETTINGS TAB
   ================================================================ */
.bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.bot-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  will-change: transform;
  transition:
    transform         0.38s cubic-bezier(0.34, 1.15, 0.64, 1),
    box-shadow        0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color  0.28s ease,
    border-color      0.26s ease;
}
.bot-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 14px 36px -4px rgba(0,210,174,0.22), 0 4px 12px rgba(0,0,0,0.25);
  border-color: var(--border-soft);
  background: var(--card-hover);
}

.bot-card-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 16px;
}
.bot-card-title { display: flex; align-items: center; gap: 11px; }
.bot-icon       { font-size: 28px; line-height: 1; }
.bot-name       { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }

.bot-mode-live {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255,64,96,0.13); color: #ff6080;
  border: 1px solid rgba(255,64,96,0.22);
}
.bot-mode-demo {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(59,130,246,0.13); color: #60a5fa;
  border: 1px solid rgba(59,130,246,0.22);
}

.bot-info {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0; margin-bottom: 14px;
}
.bot-info-row {
  display: flex; align-items: center; justify-content: space-between; padding: 3px 0;
}
.bot-lbl   { font-size: 12px; color: var(--muted); }
.bot-val   { font-size: 13px; color: var(--text); font-weight: 500; }
.bot-mono  { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }

.bot-actions { display: flex; gap: 8px; }
.bot-btn {
  flex: 1; padding: 8px 6px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 8px; color: var(--muted);
  font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer;
  transition: background-color 0.18s ease, color 0.15s ease, border-color 0.18s ease;
}
.bot-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); border-color: var(--border-soft); }
[data-theme="light"] .bot-btn { background: rgba(30,50,90,0.04); }
[data-theme="light"] .bot-btn:hover { background: rgba(30,50,90,0.09); }
.bot-btn-accent { background: rgba(0,210,174,0.08); border-color: rgba(0,210,174,0.20); color: var(--accent); }
.bot-btn-accent:hover { background: rgba(0,210,174,0.16); border-color: rgba(0,210,174,0.35); }

/* Toggle switch */
.bot-toggle {
  position: relative; display: inline-block; flex-shrink: 0;
  width: 44px; height: 24px; cursor: pointer;
}
.bot-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.bot-toggle-track {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.10); border: 1px solid var(--border); border-radius: 12px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
[data-theme="light"] .bot-toggle-track { background: rgba(30,50,90,0.10); }
.bot-toggle input:checked + .bot-toggle-track { background: var(--accent); border-color: var(--accent); }
.bot-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; background: #fff;
  border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.30);
  transition: transform 0.28s cubic-bezier(0.34, 1.15, 0.64, 1);
}
.bot-toggle input:checked + .bot-toggle-track .bot-toggle-thumb { transform: translateX(20px); }

/* Toast */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 22px;
  font-size: 13px; color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 8888; pointer-events: none;
  animation: toastIn 0.22s cubic-bezier(0.34, 1.1, 0.64, 1);
}
@keyframes toastIn {
  from { opacity:0; transform: translateX(-50%) translateY(10px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}

/* ================================================================
   BOT PARAMS MODAL
   ================================================================ */
.bp-modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; width: 100%; max-width: 580px; margin: 16px;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
  animation: modalIn 0.22s cubic-bezier(0.34, 1.1, 0.64, 1);
  transition: background-color 0.28s ease, border-color 0.22s ease;
}

.bp-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.bp-title { font-size: 15px; font-weight: 600; color: var(--text); }
.bp-sub   { font-size: 11px; color: var(--muted); font-family: var(--font-mono); margin-top: 4px; }

.bp-body  { overflow-y: auto; padding: 18px 24px 20px; flex: 1; }

/* Param rows */
.param-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 5px 0; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.param-row:last-child { border-bottom: none; }
.param-key { font-size: 12px; color: var(--muted); font-family: var(--font-mono); flex-shrink: 0; }
.param-val { font-size: 13px; font-weight: 500; text-align: right; word-break: break-all; }
.param-num  { color: var(--accent); font-family: var(--font-mono); }
.param-true  { color: var(--green); font-family: var(--font-mono); font-size: 12px; }
.param-false { color: var(--red);   font-family: var(--font-mono); font-size: 12px; }
.param-str  { color: var(--text); }
.param-arr  { color: var(--yellow); font-family: var(--font-mono); font-size: 12px; }
.param-null { color: var(--muted); font-style: italic; }

/* Param sections (nested objects) */
.param-section {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 12px; overflow: hidden;
}
[data-theme="light"] .param-section { background: rgba(30,50,90,0.02); }

.param-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); padding: 7px 14px;
  background: rgba(0,210,174,0.05); border-bottom: 1px solid var(--border);
}
.param-section-body { padding: 2px 14px 6px; }

.param-section-nested {
  margin: 6px 0 2px; background: rgba(255,255,255,0.02);
  border-color: var(--border);
}
[data-theme="light"] .param-section-nested { background: rgba(30,50,90,0.02); }
.param-section-nested .param-section-title { color: var(--muted); background: transparent; font-size: 9px; }

/* ================================================================
   TAB: TRADING — KPI cards + table colors
   (Trước đây inject inline qua _tdInjectStyle JS — đã chuyển vào đây)
   ================================================================ */
.pos { color: #16c784; font-weight: 600; }
.neg { color: #ef4444; font-weight: 600; }

.td-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.td-kpi {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 18px; min-width: 140px;
}
.td-kpi .l { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.td-kpi .v { font-size: 22px; font-weight: 700; margin-top: 2px; }

#td-table td.td-price { font-variant-numeric: tabular-nums; }

/* ── Panel chart + accordion (B3) ──────────────────────────────────
   Tiêu đề panel là <button>: bấm để thu gọn/mở lại. Thu gọn = JS huỷ chart + đóng
   WebSocket nến của panel đó (xem _tdSetPanel trong trading.js), không chỉ ẩn bằng CSS. */
.td-panel { padding: 14px; margin-bottom: 16px; }
.td-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.td-acc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; padding: 0; margin: 0;
  color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 700;
  text-align: left; cursor: pointer; min-width: 0;
}
.td-acc-btn:hover { color: var(--accent); }
.td-acc-ic { color: var(--muted); font-size: 11px; width: 12px; flex-shrink: 0; }
/* Ô chọn coin: tự vẽ theo theme (select mặc định của trình duyệt ra nền TRẮNG,
   chói và lạc tông trên nền tối, đặc biệt trên iOS) */
.td-coin-sel {
  margin-left: auto; padding: 6px 10px; border-radius: 8px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border-soft);
  font-family: var(--font); font-size: 13px;
}
.td-chart-lg { height: 360px; }
.td-chart-sm { height: 260px; }
.td-chart[hidden] { display: none; }

/* ── Thanh dính coin + PnL (B5) — chỉ bật ở mobile/màn thấp (media query bên dưới) ── */
.td-sticky { display: none; }

/* ── Nút phóng to / thu nhỏ chart (+ / −) ──────────────────────────
   Overlay góc DƯỚI-TRÁI trong khung chart: chừa cột giá bên phải (che mất số giá) và
   chừa cả trục thời gian bên dưới; vùng này chỉ có mép trái biểu đồ volume.
   Mặc định ẨN: desktop đã zoom được bằng cuộn chuột — chỉ bật ở mobile (khối @media
   cuối file). Bấm luôn neo mép phải => nến hiện tại luôn nằm trong khung (_tdShowLastBars). */
.td-zoom { position: absolute; left: 8px; bottom: 30px; z-index: 20; display: none; gap: 6px; }
.td-zoom-btn {
  width: 34px; height: 34px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: 8px;
  font-family: var(--font); font-size: 18px; font-weight: 700;
  cursor: pointer; opacity: 0.88; -webkit-tap-highlight-color: transparent;
}
.td-zoom-btn:hover { border-color: var(--accent); color: var(--accent); }
.td-zoom-btn:active { transform: scale(0.94); }

/* ── Nhãn % (so với đường ENTRY) của các đường TP/SL ────────────────
   LightweightCharts chỉ vẽ `title` của price line ở MÉP PHẢI, nên % phải là overlay DOM
   riêng đặt BÊN TRÁI, tự bám theo toạ độ y của giá (xem _tdSyncPct trong trading.js).
   Màu chữ do JS đặt inline theo màu đường; viền dùng currentColor để khớp màu đó. */
.td-pct-lbl {
  /* left 38px (không phải 0): chừa chỗ cho "tay nắm" ◄► của Move-by-User — nó neo ở
     left:6px, rộng ~26px, và nằm ĐÚNG trên đường exit nên sẽ đè lên nhãn % nếu sát mép. */
  position: absolute; left: 38px; z-index: 14; display: none;
  transform: translateY(-50%); pointer-events: none; white-space: nowrap;
  padding: 2px 5px; border-radius: 4px;
  border: 1px solid currentColor; background: rgba(12, 16, 24, 0.82);
  font: 700 10.5px/1 monospace;
}
[data-theme="light"] .td-pct-lbl { background: rgba(255, 255, 255, 0.92); }

/* Thanh nút ẨN/HIỆN đường chỉ báo trên chart nến (plugin js/plugins/chart-lines.js) —
   dùng cho tab Trading và modal Order Book. Màu chữ/viền của từng nút do JS đặt = màu đường.
   Nằm góc TRÊN-TRÁI; tooltip OHLC đã dời xuống top:32px để không đè lên thanh này. */
.chart-lines-bar {
  position: absolute; left: 8px; top: 6px; z-index: 16;
  display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 90px);
}
.chart-lines-btn {
  cursor: pointer; border: 1px solid; border-radius: 4px; padding: 0 6px;
  font: 600 11px/1.6 monospace; background: rgba(12, 16, 24, 0.78);
}
.chart-lines-btn:hover { filter: brightness(1.2); }
[data-theme="light"] .chart-lines-btn { background: rgba(255, 255, 255, 0.92); }

/* ================================================================
   TAB "ML SHADOW BOOK" (ExitML) — renderer js/renderers/exitml_shadow.js
   Header đứng yên khi cuộn: .table-scroll có sticky thead; cho khung cao hơn 460px.
   Cặp cột ML|BOT tô nền nhạt khác nhau để mắt gióng cặp so sánh.
   ================================================================ */
#ml-table { max-height: 70vh; }
#ml-table thead th { z-index: 3; }
.ml-table th.ml-pair-ml, .ml-table td.ml-pair-ml   { background-color: rgba(0,210,174,0.06); }
.ml-table th.ml-pair-bot, .ml-table td.ml-pair-bot { background-color: rgba(120,140,255,0.06); }
.ml-table th.ml-pair-ml  { background-image: linear-gradient(rgba(0,210,174,0.10), rgba(0,210,174,0.10)); background-color: var(--card); }
.ml-table th.ml-pair-bot { background-image: linear-gradient(rgba(120,140,255,0.10), rgba(120,140,255,0.10)); background-color: var(--card); }
.ml-table td.ml-delta, .ml-table th.ml-delta { border-right: 1px solid var(--border-soft); }
.ml-table tr.ml-late td { opacity: 0.6; }
.ml-table th { cursor: help; }
.ml-badge { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.ml-exit   { background: rgba(255,170,0,0.16); color: #ffaa00; }
.ml-hold   { background: rgba(140,150,170,0.14); color: var(--muted); }
.ml-late-b { background: rgba(255,90,90,0.12); color: #ff7a7a; }
.ml-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ml-chip { border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; cursor: help; }
.ml-chip .l { font-size: 10.5px; color: var(--muted); letter-spacing: 0.4px; }
.ml-chip .v { font-size: 15px; font-weight: 700; font-family: var(--font-mono); }
.ml-legend { margin: 0 0 12px; font-size: 12.5px; color: var(--text); }
.ml-legend summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 12px; }
.ml-legend dl { margin: 8px 0 0; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 8px; }
.ml-legend dt { font-weight: 700; margin-top: 6px; }
.ml-legend dt:first-child { margin-top: 0; }
.ml-legend dd { margin: 2px 0 0 0; color: var(--muted); line-height: 1.5; }

/* ================================================================
   !! CÁC KHỐI @media DƯỚI ĐÂY PHẢI LUÔN NẰM CUỐI FILE !!
   Media query KHÔNG cộng thêm độ ưu tiên (specificity). Rule trong @media chỉ thắng khi
   nó đứng SAU rule base cùng độ ưu tiên. Đặt nhầm lên trên phần base (vd khối "TAB
   TRADING" ở cuối file) là mất hiệu lực âm thầm — đã dính đúng lỗi này khi làm B3/B5:
   .td-kpi{flex:...} ăn nhưng min-width/padding thì không.
   ================================================================ */

/* ================================================================
   MÀN NHỎ / CẢM ỨNG — dùng chung cho điện thoại DỌC (≤600px) và điện thoại NGANG
   (màn thấp ≤520px). Gồm: tap target ≥40px, sàn font, bỏ cuộn lồng, panel/chart gọn
   lại, thanh dính coin+PnL (B5), tách nút bật/tắt bot ra xa nút ☰.
   KHÔNG đụng logic bot — thuần CSS. Chi tiết: docs/INVARIANTS.md.
   ================================================================ */
@media (max-width: 600px), (max-height: 520px) and (orientation: landscape) {
  /* Topbar: cho XUỐNG DÒNG để hiện ĐỦ chữ (tên bot + nguồn data + số dư) thay vì cắt
     cụt. Neo của .sub-tabbar/.td-sticky đã chuyển sang --topbar-h đo thật (index.html)
     nên topbar cao lên không làm các thanh dính đè nhau nữa.
     Nút bật/tắt bot bị đẩy về cuối cụm trái -> cách nút ☰ gần trọn chiều ngang, hết bấm nhầm.
     !important: 2 span dưới có white-space:nowrap ghi INLINE trong index.html. */
  .topbar { height: auto; min-height: 46px; flex-wrap: wrap; row-gap: 4px; }
  .topbar-left { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 8px; }
  .topbar-right { min-width: 0; flex-wrap: wrap; gap: 8px; }
  #topbar-bot-toggle { order: 9; margin-left: auto; }
  /* Cho chữ TỰ XUỐNG DÒNG trong ô của nó (white-space:normal) thay vì đẩy cả ô sang
     hàng mới — màn ngang vẫn đủ rộng để đứng cùng hàng với tên bot, chỉ cao thêm 1 dòng. */
  #topbar-datasource {
    order: 1; flex: 1 1 200px;
    margin-left: 0 !important; white-space: normal !important;
    font-size: 11.5px; line-height: 1.35;
  }
  #topbar-balance {
    margin-right: 0 !important; white-space: normal !important;
    font-size: 11.5px; line-height: 1.35;
  }
  /* Điện thoại đã có đồng hồ trên thanh trạng thái -> nhường chỗ cho tên bot/nguồn data */
  #clock { display: none; }

  /* Tap target ≥40px cho ngón tay (trước đây nút TP/SL/ruler nhỏ, khó bấm chính xác) */
  .mobile-menu-btn { width: 40px; height: 40px; }
  .ruler-btn { width: 40px; height: 40px; }
  /* Ngón tay không cuộn-chuột được -> nút +/- là cách zoom chính trên điện thoại. */
  .td-zoom { display: flex; }
  .td-pct-lbl { font-size: 11px; padding: 3px 6px; }
  .bot-btn, .td-clear-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 10px 14px !important; font-size: 13px !important;
  }
  .dl-btn, .filter-btn, .pnl-mode-btn, .master-ord-btn { min-height: 40px; }

  /* Sàn font đọc được ~12px cho phần dữ liệu hay nhìn nhất trên phone (Trading/Order
     Book + control chung); không đụng modal cài đặt/đăng nhập (ít soi trên phone). */
  th, .panel-sub, .stat-sub, .stat-label, .td-kpi .l, .badge, .ob-mode-tag {
    font-size: 12px;
  }
  td { font-size: 13px !important; }   /* !important: vài <td> có inline font-size riêng */

  /* Bỏ vùng cuộn dọc lồng trong trang (dễ "kẹt scroll" khi ngón tay vừa định cuộn
     trang vừa chạm phải bảng) — để bảng cao tự nhiên, cuộn theo trang luôn. */
  .table-scroll { max-height: none; }
  .table-scroll thead th { position: static; }   /* sticky theo container cũ không còn ý nghĩa khi bỏ max-height */

  /* NGOẠI LỆ — "Danh Sách Lệnh" (Order Book): dòng tiêu đề ID|SYMBOL|ENTRY… phải ĐỨNG YÊN
     khi cuộn xem lịch sử lệnh. <th> sticky chỉ bám được khi có vùng cuộn riêng, nên trả
     lại max-height CHỈ cho bảng này — cao gần trọn màn hình, và vì đây là khối cuối trang
     nên khi cuộn hết trang, đầu bảng vẫn nằm trong khung nhìn (không bị topbar che).
     Cố tình KHÔNG dùng var(--topbar-h) ở đây: biến đó do JS đo, nếu trượt một nhịp (font
     web tải xong làm topbar đổi chiều cao) thì bảng co lại thấy rõ; 66vh không phụ thuộc
     gì cả, ra chiều cao hợp lý ở cả dọc (~560px) lẫn ngang (~260px).
     dvh: trên iOS thanh công cụ trình duyệt co/giãn, vh tính dư -> dùng dvh nếu có. */
  #ob-table {
    /* Bản thân KHUNG danh sách cũng dính ngay dưới topbar + sub-tab: nếu không, khi cuộn
       hết trang (nhất là màn ngang thấp) mép trên khung trôi lên dưới thanh sub-tab và
       che mất chính dòng tiêu đề vừa freeze. */
    position: sticky;
    top: calc(var(--topbar-h, 60px) + var(--subtab-h, 0px));
    z-index: 1;          /* trên nội dung panel, dưới sub-tabbar (99) và topbar (100) */
    max-height: 66vh;
    max-height: 66dvh;   /* iOS: trừ đúng phần thanh công cụ trình duyệt */
    min-height: 240px;
  }
  #ob-table thead th { position: sticky; top: 0; z-index: 2; }
  /* Tab ML Shadow Book: header cũng phải đứng yên trên mobile — cùng cơ chế với #ob-table. */
  #ml-table {
    position: sticky;
    top: calc(var(--topbar-h, 60px) + var(--subtab-h, 0px));
    z-index: 1;
    max-height: 66vh;
    max-height: 66dvh;
    min-height: 240px;
  }
  #ml-table thead th { position: sticky; top: 0; z-index: 3; }

  /* Thẻ/panel/chart bớt rỗng: giảm padding, thu gọn icon, KPI xếp kín 2 cột */
  .panel { padding: 12px 14px; }
  .stats-grid { gap: 10px; margin-bottom: 16px; }
  .stat-card { padding: 12px; }
  .stat-icon { width: 32px; height: 32px; font-size: 15px; margin-bottom: 8px; }
  .stat-value { font-size: 21px; }
  /* 4 thẻ KPI trên CÙNG 1 HÀNG: grid 4 cột bằng nhau thay cho flex 2x2.
     Đổi lại phải nhường chỗ: nhãn bỏ IN HOA (hẹp hơn ~10% mà vẫn đọc được) và
     đơn vị " USDT" của Tổng PnL ẩn đi (.v .u) — con số mới là thứ cần đọc nhanh.
     Đây là NGOẠI LỆ CÓ CHỦ Ý của sàn font 12px ở khối B1 phía trên. */
  .td-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
  .td-kpi { min-width: 0; padding: 8px 6px; text-align: center; }
  .td-kpi .l {
    font-size: 10px; text-transform: none; letter-spacing: 0;
    line-height: 1.15; overflow-wrap: anywhere;
  }
  .td-kpi .v { font-size: 16px; line-height: 1.2; margin-top: 3px; }
  .td-kpi .v .u { display: none; }
  .td-panel { padding: 10px 12px; margin-bottom: 12px; }
  /* Đầu panel gọn lại: hàng 1 tiêu đề (bấm để thu gọn), hàng 2 regime, hàng 3 ô chọn
     coin + thước đo — thay vì mỗi thứ một dòng lệch lạc do margin-left:auto của desktop */
  .td-panel-head { gap: 8px; margin-bottom: 8px; }
  .td-acc-btn { font-size: 13px; flex: 1 1 100%; order: 0; }
  .td-panel-head #td-regime-badge { flex: 1 1 100%; order: 1; }
  /* Ô chọn coin ở đầu panel chart: thanh dính đã có dải card coin làm việc này
     -> ẩn để đỡ chật. Vẫn nằm trong DOM nên tradingSelectCoin() gán .value bình thường. */
  .td-coin-sel { display: none; }
  .td-panel-head .ruler-bar { order: 3; margin-left: auto; }

  /* B5 — thanh dính: coin đang xem + giá + PnL luôn thấy khi cuộn qua các chart.
     Neo dưới topbar + sub-tabbar bằng chiều cao THẬT do JS đo (index.html). */
  .td-sticky {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px;
    position: sticky; top: calc(var(--topbar-h, 60px) + var(--subtab-h, 0px)); z-index: 90;
    margin: 0 0 12px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    font-family: var(--font-mono);
    /* Nhiều lệnh mở cùng lúc thì thanh dính không được ăn hết màn hình */
    max-height: 34vh; overflow-y: auto;
  }
  /* 1 card / 1 coin, MỖI CARD TRỌN 1 HÀNG. Đã thử 2 card/hàng (168px): tên coin bị
     cắt còn "AAAUS…" vì chỗ cho nút tên chỉ còn ~45px -> không đọc được tên, hỏng mục
     đích của card. Trọn hàng thì nút tên có ~218px, thoải mái cho cả tên coin dài. */
  .td-cc {
    flex: 1 1 100%;
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 4px;
    background: var(--card); border: 1px solid var(--border-soft); border-radius: 8px;
    cursor: pointer;
  }
  .td-cc.active { border-color: var(--accent, #3fb950); box-shadow: inset 0 0 0 1px var(--accent, #3fb950); }
  /* Tên coin = NÚT chốt lời (tdManualClose, có hộp xác nhận) -> phải nhìn ra là bấm được */
  .td-cc-name {
    flex: 0 1 auto; min-width: 0; min-height: 36px; padding: 4px 8px;
    background: transparent; color: var(--text);
    border: 1px solid var(--border-soft); border-radius: 6px;
    font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
    text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .td-cc-pnl { margin-left: auto; font-size: 14px; font-weight: 700; }
  /* Màu lãi/lỗ dùng chung .pos/.neg toàn web — KHÔNG định nghĩa màu riêng ở đây,
     để card coin và bảng chi tiết luôn cùng một sắc xanh/đỏ. */
  .td-cc-pct { font-size: 12px; color: var(--muted); }
}

/* ================================================================
   ĐIỆN THOẠI NGANG (màn thấp) — chiều cao mới là thứ khan hiếm:
   topbar/sub-tab dẹp lại, chart cao theo vh để lấp trọn màn, không dư khoảng trống.
   ================================================================ */
@media (max-height: 520px) and (orientation: landscape) {
  .topbar { padding: 5px 14px; }
  #page-title { font-size: 15px; }
  .sub-tabbar { padding: 6px 14px; }
  .sub-tab { padding: 5px 9px; }
  main#main-content { padding: 10px 14px; }
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .tab-header-bar { margin-bottom: 12px; }
  /* Vừa đúng phần màn còn lại sau topbar + sub-tab + đầu panel -> chart lấp gần trọn
     khung nhìn mà không phải cuộn, cũng không để dải trống bên dưới */
  .td-chart-lg { height: 56vh; min-height: 200px; }
  .td-chart-sm { height: 48vh; min-height: 180px; }
  /* Màn ngang chỉ cao ~393px: khung danh sách lệnh phải thấp hơn nữa, nếu không khi cuộn
     hết trang mép trên khung (kèm dòng tiêu đề freeze) sẽ chui xuống dưới thanh sub-tab. */
  #ob-table { max-height: 56vh; max-height: 56dvh; min-height: 200px; }
}

/* ================================================================
   ĐIỆN THOẠI DỌC (≤600px) — bảng Trading -> card, topbar xuống dòng cho đủ chữ.
   ================================================================ */
@media (max-width: 600px) {
  main#main-content { padding: 10px; }
  .sub-tabbar { padding: 8px 10px; }
  .tab-header-bar { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

  /* Dọc 393px: không đủ chỗ cho cụm trái và cụm phải đứng cạnh nhau -> mỗi cụm 1 hàng
     riêng (hàng 1: ☰ + tên bot + nút bật/tắt, hàng 2: nguồn data, hàng 3: số dư + LIVE) */
  .topbar { min-height: 52px; padding: 7px 10px; column-gap: 8px; }
  .topbar-left { flex: 1 1 100%; }
  .topbar-right { flex: 1 1 100%; justify-content: flex-start; }
  #topbar-datasource { order: 10; flex: 1 1 100%; }   /* dọc: hẹp quá -> cho hẳn 1 hàng riêng */
  #page-title { flex: 0 1 auto; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #topbar-balance { flex: 1 1 auto; }
  .live-pill { padding: 3px 9px; font-size: 10.5px; }

  /* Thẻ lẻ cuối cùng trải hết hàng -> hết ô trống lửng bên cạnh (vd 5 thẻ KPI) */
  .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Chart cao theo màn để lấp trọn khung nhìn, không để dải trống dưới chart */
  .td-chart-lg { height: 46vh; min-height: 250px; }
  .td-chart-sm { height: 34vh; min-height: 200px; }
  .td-sticky { margin: 0 0 12px; }

  /* ── ORDER BOOK trên màn DỌC: rút từ 13 cột xuống 7 cột ──────────────
     Thứ tự yêu cầu: SYMBOL · Peak % · PNL · PNL % · VOL RATIO · BODY % · CLOSE REASON.
     DOM vốn đã đúng thứ tự đó nên chỉ cần ẨN các cột còn lại — KHÔNG đảo thứ tự bằng
     CSS (đảo trong <table> sẽ phá việc các cột gióng thẳng hàng giữa các dòng).
     Ẩn theo CLASS `ob-c-*`, không theo nth-child: layout Org (không có SIDE/STATUS)
     và layout thường lệch nhau 2 cột.
     Order Book vẫn GIỮ dạng bảng + cuộn ngang (không đổi thành card như tab Trading):
     dòng tiêu đề freeze ở đây là thứ người dùng đang dựa vào để đọc cột. */
  #ob-table .ob-c-id,
  #ob-table .ob-c-side,
  #ob-table .ob-c-status,
  #ob-table .ob-c-entry,
  #ob-table .ob-c-exit,
  #ob-table .ob-c-qty,
  #ob-table .ob-c-hold,
  #ob-table .ob-c-fee,
  #ob-table .ob-c-otime { display: none; }

  /* 7 cột trên ~375-430px: NGOẠI LỆ CÓ CHỦ Ý của sàn font 12px (khối B1 phía trên).
     11.5px là mức thấp nhất còn đọc thoải mái; thấp hơn nữa thì chữ bắt đầu dính.
     !important vì B1 có `td { font-size: 13px !important }`. */
  /* width:auto + min-width:100%: bảng ĐƯỢC PHÉP rộng hơn màn khi có coin tên dài —
     cuộn ngang vẫn còn đó làm van an toàn, thay vì bóp cột tới mức cắt cụt chữ. */
  #ob-table table { width: auto; min-width: 100%; table-layout: auto; }
  #ob-table td {
    font-size: 11px !important;
    padding: 6px 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;   /* chữ số cùng bề rộng -> cột thẳng hàng */
  }
  /* Nhãn cột dùng bản NGẮN (COIN/PEAK%/PNL/VOL/BODY/THOÁT) và ở nguyên 1 dòng:
     nhãn đầy đủ rộng hơn cả dữ liệu bên dưới nên nó mới là thứ ăn mất chỗ. */
  #ob-table th {
    font-size: 10px;
    padding: 6px 4px;
    white-space: nowrap;
    letter-spacing: 0;
  }
  #ob-table .ob-h-full  { display: none; }
  #ob-table .ob-h-short { display: inline; }
  /* Tên coin là cột co giãn duy nhất; 6 cột còn lại giữ đúng bề rộng nội dung. */
  #ob-table .ob-c-sym { max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
  #ob-table .ob-mode-tag { display: none; }   /* badge REAL/PAPER: đã lọc theo mode ở trên */
  /* CLOSE REASON: dùng nhãn rút gọn (Chandelier / TP floor / Khóa lãi …) */
  #ob-table .ob-r-full  { display: none; }
  #ob-table .ob-r-short { display: inline; }

  /* ── B2: bảng OPEN tab Trading (#td-table, 11 cột) -> THẺ LƯỚI ──
     Chỉ áp cho #td-table. Order Book giữ nguyên bảng cuộn ngang.
     Kỹ thuật: ẩn <thead>; mỗi <tr> thành 1 thẻ `display:grid` 6 cột; mỗi <td> là 1 ô
     "nhãn nhỏ ở TRÊN + số ở DƯỚI" chiếm 2–3 cột => 2–3 thông tin/hàng thay vì 1.
     Vì sao 6 cột: bội chung của 2 và 3, nên vừa xếp được 2 ô/hàng (span 3) vừa xếp
     được 3 ô/hàng (span 2) mà không phải đổi grid-template giữa chừng.
     KHÔNG đổi id/class JS đang query (#tdr-SYMBOL, .td-price, .td-pnl, .td-pnlpct,
     #tdbtn-SYMBOL) nên tick giá realtime / nút TP/SL vẫn chạy y hệt. */
  #td-table thead { display: none; }
  #td-table, #td-table tbody { display: block; width: 100%; }
  #td-table tr {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px; align-items: start;
    border: 1px solid var(--border); border-radius: 14px;
    margin-bottom: 12px; padding: 12px 14px;
    background: var(--card); box-shadow: var(--shadow);
  }
  /* MỌI ô đều gióng theo ĐÚNG 3 cột đó và đều căn TRÁI. Trước đây lưới 6 cột với ô
     span 2/3/4 lẫn lộn + vài ô căn phải -> mỗi hàng bắt đầu ở một mốc khác nhau, nhìn
     rất lệch. Nay chỉ có 2 bề rộng: 1 cột (1/3) hoặc 2 cột (2/3) -> mọi mốc trùng nhau. */
  #td-table td {
    grid-column: span 1;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 0; border-bottom: none; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;     /* chữ số cùng bề rộng -> cột số thẳng hàng */
  }
  #td-table td::before {
    content: attr(data-th); color: var(--muted);
    font-size: 10px; letter-spacing: 0.2px; text-transform: none;
    font-weight: 400; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }

  /* Hàng 1 — tên coin (2/3) + Side (1/3) */
  #td-table td.td-symbol { grid-column: span 2; order: -5; }
  #td-table td.td-symbol::before { display: none; }
  #td-table td.td-symbol b { font-size: 19px; }
  #td-table td.td-side { order: -4; }

  /* Hàng 2 — PnL (2/3) + PnL % (1/3): thứ cần liếc thấy đầu tiên nên để số to,
     tách bằng viền đứt. !important vì khối @media phía trên có
     `td { font-size: 13px !important }` (sàn font mobile). */
  #td-table td.td-pnl,
  #td-table td.td-pnlpct {
    font-size: 20px !important; font-weight: 700;
    border-bottom: 1px dashed var(--border-soft); padding-bottom: 10px;
  }
  #td-table td.td-pnl { grid-column: span 2; order: -3; }
  #td-table td.td-pnlpct { order: -2; }

  /* Hàng 3 — Entry | Giá now | Vốn (thông tin vị thế)
     Hàng 4 — Vol Ratio | Body % | Mở lúc (thông tin cây nến vào lệnh + thời điểm).
     Đặt `order` TƯỜNG MINH: thứ tự <td> trong HTML là thứ tự của BẢNG desktop, để mặc
     định thì Vol Ratio bị kéo lên nằm cạnh Giá now, đọc không thành nhóm. */
  #td-table td.td-entry   { order: 1; }
  #td-table td.td-price   { order: 2; }
  #td-table td.td-cap     { order: 3; }
  #td-table td.td-vr      { order: 4; }
  #td-table td.td-bodypct { order: 5; }
  #td-table td.td-time    { order: 6; }
  /* "Mở lúc" được xuống dòng (ngày trên, giờ dưới) thay vì bị cắt cụt trong 1/3 bề ngang */
  #td-table td.td-time {
    font-size: 11px !important; white-space: normal; line-height: 1.3;
  }

  /* Hàng cuối — nút TP/SL + xoá lệnh treo, trải hết bề ngang cho dễ bấm */
  #td-table td.td-actions {
    grid-column: span 3; order: 99;
    flex-direction: row; align-items: stretch; gap: 8px; padding-top: 3px;
  }
  #td-table td.td-actions::before { display: none; }
  #td-table td.td-actions .bot-btn:not(.td-clear-btn) { flex: 1; }
  #td-table td.td-actions .td-clear-btn { flex: 0 0 44px; margin-left: 0; }

  /* Mỗi coin đã có 1 card gọn trên thanh dính -> phần CHI TIẾT chỉ hiện của coin
     đang chọn (bấm card coin khác thì thẻ chi tiết đổi theo). Quy tắc này CỐ Ý
     nằm sau khối B2 ở trên: cùng độ ưu tiên thì rule sau thắng.
     Chỉ áp ở ≤600px (chế độ card); điện thoại NGANG vẫn là bảng, giữ đủ dòng. */
  #td-table tbody tr.td-row:not(.td-active) { display: none; }

  /* ML Shadow Book dọc (CỐ Ý đặt cuối khối: test_ob_mobile_columns.js dò `display: none;`
     đầu tiên sau #ob-table): chỉ COIN · PNL ML · PNL BOT · Δ · ML PRED (các cột khác class ml-hm). */
  .ml-table .ml-hm { display: none; }
  .ml-table th, .ml-table td { padding: 8px 8px; }
  /* Hàng nút lọc bot: 1 hàng cuộn ngang thay vì 6 hàng nút 40px đẩy bảng xuống tận đáy. */
  .ml-botbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ml-botbar .filter-btn, .ml-botbar .filter-mode-lb { flex: 0 0 auto; white-space: nowrap; }
}

/* Tab AutoPilot Reports trên màn hẹp — đặt CUỐI file (luật @media ở INVARIANTS §3).
   Viết 'screen and' (cùng nghĩa) để test_ob_mobile_columns.js vẫn tìm đúng khối mobile của
   Order Book — test lấy khối 600px CUỐI CÙNG theo chuỗi chính xác. */
@media screen and (max-width: 600px) {
  .ap-wrap { grid-template-columns: 1fr; }
  .ap-list-col { display: none; }
  .ap-select { display: block; }
  .ap-body { max-height: none; padding: 10px 12px; }
}