/* BrokersHUB AI Trading — Web Console (app.brokershub.co)
 * Dark, mobile-first, brand orange. Plain CSS (không qua Tailwind/Vite) —
 * class cố định, không bị purge. Xem docs/WEB-CONSOLE-PLAYBOOK.md. */

:root {
  --bg: #0b0f17;
  --bg-grad-1: #0d1320;
  --surface: #131a26;
  --surface-2: #182234;
  --surface-3: #1e2a3e;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --text: #eaf0f8;
  --text-soft: #c3cede;
  --muted: #8a99b0;
  --brand: #F46D00;
  --brand-soft: rgba(244, 109, 0, .14);
  --brand-border: rgba(244, 109, 0, .35);
  --pos: #22c55e;
  --neg: #f4555b;
  --warn: #f6b23d;
  --radius: 16px;
  --radius-sm: 11px;
  --radius-pill: 999px;
  --sp: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Plus Jakarta Sans", sans-serif;
  --shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

/* Chuyển trang mượt (MPA cross-document View Transitions — Chrome 126+/Safari 18.2+,
   trình duyệt cũ bỏ qua êm). Tôn trọng reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}

html, body { margin: 0; padding: 0; }

.c-body {
  font-family: var(--font);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(244, 109, 0, .07) 0%, transparent 42%),
    linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg) 30%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.c-app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(14px, 4vw, 22px);
  padding-top: env(safe-area-inset-top);
}

/* ── Topbar ── */
.c-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 12px;
  background: linear-gradient(180deg, var(--bg) 55%, transparent);
  backdrop-filter: blur(6px);
}
.c-brand { display: flex; align-items: center; gap: 10px; }
.c-brand-mark { border-radius: 8px; display: block; }
.c-brand-text { font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.c-brand-text b { color: var(--brand); font-weight: 800; }
.c-topbar-actions { margin: 0; }
.c-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-soft); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.c-iconbtn:hover { background: var(--surface-2); color: var(--text); }

.c-main { flex: 1 1 auto; padding-bottom: 28px; }

.c-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 0 calc(18px + env(safe-area-inset-bottom));
  color: var(--muted); font-size: 12px;
}
.c-footer-dot { opacity: .5; }

/* ── Headings / page ── */
.c-page { display: flex; flex-direction: column; gap: 18px; }
.c-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.c-h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.c-h2 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; }
.c-page-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; word-break: break-word; }

.c-back {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: 14px; font-weight: 600; width: fit-content;
  padding: 8px 4px 8px 0; min-height: 40px;
}
.c-back:hover { color: var(--text); }

/* ── Cards / grid ── */
.c-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.c-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.c-account { display: flex; flex-direction: column; gap: 14px; transition: border-color .15s ease, transform .12s ease; }
.c-account:hover { border-color: var(--brand-border); }
.c-account:active { transform: scale(.995); }
.c-account-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-account-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-account-num { font-size: 17px; font-weight: 800; letter-spacing: .2px; }
.c-account-broker { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-account-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-figure { display: flex; flex-direction: column; gap: 3px; }
.c-figure-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.c-figure-value { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.c-account-foot { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Connection pill ── */
.c-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.c-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.c-pill-online { color: var(--pos); background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .25); }
.c-pill-online .c-pill-dot { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: c-pulse 1.8s infinite; }
.c-pill-stale { color: var(--warn); background: rgba(246, 178, 61, .12); border-color: rgba(246, 178, 61, .25); }
.c-pill-offline { color: #9aa7ba; background: rgba(154, 167, 186, .1); border-color: rgba(154, 167, 186, .2); }
.c-pill-never { color: #9aa7ba; background: rgba(154, 167, 186, .08); border-color: rgba(154, 167, 186, .18); }
@keyframes c-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ── Chips ── */
.c-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
  background: var(--surface-3); color: var(--text-soft);
  border: 1px solid var(--border);
}

/* ── Tone (P&L) ── */
.c-tone-pos { color: var(--pos); }
.c-tone-neg { color: var(--neg); }
.c-tone-zero { color: var(--text-soft); }

/* ── Stat grid (account detail) ── */
.c-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.c-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.c-stat-value { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Sections ── */
.c-section { display: flex; flex-direction: column; gap: 12px; }
.c-section-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.c-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; margin-left: 4px;
  border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand);
  font-size: 12px; font-weight: 800;
}
.c-updated { font-size: 12px; color: var(--muted); }
.c-updated > span { white-space: nowrap; } /* gãy dòng giữa 2 vế, không gãy giữa số */

/* ── Positions ── */
.c-poslist { display: flex; flex-direction: column; gap: 8px; }
/* Khi 1 lệnh đang gửi (control.js): khoá cả danh sách để poll re-render không
   bật lại nút Đóng giữa chừng (chống gửi trùng). */
.c-poslist-busy { pointer-events: none; opacity: .55; }
.c-pos {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.c-pos-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.c-pos-side { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 7px; letter-spacing: .03em; }
.c-pos-buy { color: var(--pos); background: rgba(34, 197, 94, .14); }
.c-pos-sell { color: var(--neg); background: rgba(244, 85, 91, .14); }
.c-pos-na { color: var(--muted); background: var(--surface-3); }
.c-pos-symbol { font-weight: 700; font-size: 14px; }
.c-pos-vol { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-pos-pnl { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Mobile hẹp: symbol+vol+PnL+nút Đóng không đủ 1 hàng → cột phải xếp dọc
   (PnL trên, Đóng dưới), phần trái giữ nguyên + detail được wrap. */
@media (max-width: 480px) {
  .c-pos { flex-wrap: wrap; align-items: flex-start; }
  .c-pos-right { flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
}

/* ── Today ── */
.c-today { display: flex; flex-direction: column; gap: 8px; }
.c-today-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.c-today-ccy { color: var(--muted); font-weight: 600; }

/* ── Deals list ── */
.c-deals { display: flex; flex-direction: column; gap: 8px; }
.c-deal {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.c-deal-l { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.c-deal-top { display: flex; align-items: center; gap: 9px; }
.c-deal-symbol { font-weight: 700; font-size: 14px; }
.c-deal-vol { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-deal-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-deal-pnl { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Pager ── */
.c-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.c-pager-info { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* [hidden] phải thắng display:flex (trap đã ghi ở modal) — filter Hoạt động. */
.c-feed-item[hidden] { display: none; }

/* ── Segment control ── */
.c-segment {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); width: 100%;
}
.c-segment-item {
  flex: 1; text-align: center; padding: 11px 12px; min-height: 40px; border-radius: var(--radius-pill);
  background: transparent; border: none; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--muted); transition: background .15s ease, color .15s ease;
}
.c-segment-item.is-active { background: var(--brand-soft); color: var(--brand); }
.c-segment-item:hover:not(.is-active) { color: var(--text); }

/* ── Stat card (stats page) ── */
.c-statcard { display: flex; flex-direction: column; gap: 14px; }
.c-statcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-statcard-net { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.c-statcard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 640px) { .c-statcard-grid { grid-template-columns: repeat(4, 1fr); } }
.c-mini {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 12px;
}
.c-mini-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.c-mini-value { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Buttons ── */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
  transition: filter .15s ease, background .15s ease, border-color .15s ease; white-space: nowrap;
}
.c-btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.c-btn-primary:hover { filter: brightness(1.06); }
.c-btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.c-btn-ghost:hover { border-color: var(--border-strong); background: var(--surface-2); }
.c-btn-danger { background: var(--neg); color: #fff; border-color: var(--neg); }
.c-btn-danger:hover { filter: brightness(1.06); }
.c-btn-block { width: 100%; }
.c-btn-disabled { opacity: .4; pointer-events: none; }

/* ── Forms ── */
.c-form { display: flex; flex-direction: column; gap: 16px; }
.c-filter { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.c-filter .c-input { flex: 1 1 180px; }
.c-field { display: flex; flex-direction: column; gap: 7px; }
.c-label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.c-input {
  width: 100%; min-height: 48px; padding: 0 15px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text); font-size: 16px;
  font-family: var(--font); outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.c-input::placeholder { color: #62718a; }
.c-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }

/* ── Alerts ── */
.c-alert { padding: 13px 15px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; border: 1px solid transparent; }
.c-alert b { font-weight: 700; }
.c-alert-error { background: rgba(244, 85, 91, .12); border-color: rgba(244, 85, 91, .3); color: #ffb4b7; }
.c-alert-warn { background: rgba(246, 178, 61, .1); border-color: rgba(246, 178, 61, .28); color: #ffd899; }

/* ── Empty / note ── */
.c-empty {
  text-align: center; padding: 40px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.c-empty-icon {
  width: 66px; height: 66px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted); margin-bottom: 4px;
}
.c-empty-title { margin: 0; font-size: 17px; font-weight: 800; }
.c-empty-text { margin: 0; color: var(--muted); font-size: 14px; max-width: 40ch; line-height: 1.6; }
.c-note { margin: 0; color: var(--text-soft); font-size: 14px; padding: 14px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); line-height: 1.55; }
.c-note-muted { color: var(--muted); font-size: 12.5px; background: none; border: none; padding: 4px 2px; }

/* ── Auth (login) ── */
.c-auth { min-height: calc(100dvh - 40px); display: flex; align-items: center; justify-content: center; padding: 24px 0 40px; }
.c-auth-card {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border); border-radius: 22px; padding: 26px 22px;
  box-shadow: var(--shadow);
}
.c-auth-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; }
.c-auth-mark { display: block; }
/* Thông báo lỗi đăng nhập đứng giữa head và form — cần khoảng thở với field dưới. */
.c-auth-card .c-alert { margin-bottom: 16px; }
.c-auth-title { margin: 6px 0 0; font-size: 20px; font-weight: 800; }
.c-auth-title b { color: var(--brand); }
.c-auth-sub { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 32ch; }
.c-auth-foot { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.c-link { color: var(--brand); font-weight: 700; }
.c-link:hover { text-decoration: underline; }

/* ── Data refresh flash ── */
[data-bind] { transition: color .25s ease; }
.c-flash { animation: c-flash 1s ease; }
@keyframes c-flash { 0% { background: var(--brand-soft); } 100% { background: transparent; } }

/* ── Control panel (W2) ── */
.c-ctrl { display: flex; flex-direction: column; gap: 12px; }
.c-ctrl-group { display: flex; flex-direction: column; gap: 10px; }
.c-ctrl-sub { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.c-pos-right { display: flex; align-items: center; gap: 6px; }
/* Khoá điều khiển khi EA offline (control.js bật class theo poll trạng thái) */
body.console-offline .c-cmd,
body.console-offline .c-seg-btn,
body.console-offline .c-pos-close { opacity: .4; pointer-events: none; }
.c-ctrl-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px;
}
.c-ctrl-toggle-label { font-size: 14px; font-weight: 600; }
.c-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.c-seg-btn {
  min-height: 40px; padding: 0 18px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; font-family: var(--font);
  transition: background .15s ease, color .15s ease;
}
.c-seg-btn-on:hover { color: var(--pos); }
.c-seg-btn-off:hover { color: var(--neg); }
.c-seg-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Phía đang chọn của toggle (armed) — sáng theo trạng thái thật từ heartbeat. */
.c-seg-btn-on.is-active { background: rgba(34, 197, 94, .16); color: var(--pos); }
.c-seg-btn-off.is-active { background: rgba(244, 85, 91, .16); color: var(--neg); }
.c-cmdrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-cmd {
  min-height: 46px; padding: 0 14px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 700; font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
.c-cmd:hover { background: var(--surface-2); }
.c-cmd:disabled { opacity: .45; cursor: not-allowed; }
.c-cmd-success { color: var(--pos); border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); }
.c-cmd-warning { color: var(--warn); border-color: rgba(246,178,61,.3); background: rgba(246,178,61,.08); }
.c-cmd-danger { color: var(--neg); border-color: rgba(244,85,91,.32); background: rgba(244,85,91,.1); }
.c-cmd-block { grid-column: 1 / -1; }
.c-ctrl-locked {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(154,167,186,.08); border: 1px dashed var(--border-strong); color: var(--muted); font-size: 13px; line-height: 1.5;
}
.c-collapse > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; font-size: 15px; font-weight: 700;
}
.c-collapse > summary::-webkit-details-marker { display: none; }
.c-collapse > summary::after { content: '⌄'; color: var(--muted); font-size: 18px; transition: transform .2s ease; }
.c-collapse[open] > summary::after { transform: rotate(180deg); }
.c-pos-close {
  min-height: 40px; padding: 0 14px; border-radius: 10px; cursor: pointer; margin-left: 10px;
  border: 1px solid rgba(244,85,91,.3); background: rgba(244,85,91,.08); color: var(--neg);
  font-size: 12px; font-weight: 700; font-family: var(--font); white-space: nowrap;
}
.c-pos-close:hover { background: rgba(244,85,91,.16); }
.c-pos-close:disabled { opacity: .45; cursor: not-allowed; }

/* ── Confirm modal ── */
.c-modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(4,7,12,.72); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
/* Thuộc tính [hidden] phải thắng display:flex ở trên (nếu không modal hiện mặc định, che trang). */
.c-modal-backdrop[hidden] { display: none; }
.c-modal {
  width: 100%; max-width: 440px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-strong); border-radius: 22px; padding: 22px; box-shadow: var(--shadow);
}
.c-modal-title { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.c-modal-body { margin: 0 0 18px; color: var(--text-soft); font-size: 14px; line-height: 1.6; }
.c-modal-body b { color: var(--text); }
.c-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Command toast ── */
.c-toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 90;
  max-width: min(440px, calc(100vw - 32px)); padding: 13px 16px; border-radius: 14px;
  background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--text);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  display: flex; align-items: center; gap: 9px;
}
.c-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.c-toast-spin { width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--brand); border-radius: 50%; animation: c-spin .7s linear infinite; flex: 0 0 auto; }
.c-toast-ok { color: var(--pos); }
@keyframes c-spin { to { transform: rotate(360deg); } }

@media (min-width: 560px) {
  .c-modal-backdrop { align-items: center; }
}

/* ── Bottom tab bar (trang trong phạm vi 1 tài khoản) ── */
.c-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: center; gap: 4px;
  padding: 6px clamp(14px, 4vw, 22px) calc(6px + env(safe-area-inset-bottom));
  background: rgba(11, 15, 23, .92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.c-tab {
  flex: 1; max-width: 224px; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: var(--radius-sm); color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  transition: color .15s ease, background .15s ease;
}
.c-tab:hover { color: var(--text); }
.c-tab.is-active { color: var(--brand); background: var(--brand-soft); }
/* Desktop: tab bar full-width làm 5 tab lọt thỏm giữa màn rộng → co thành
   "dock" nổi giữa đáy (bo pill + viền + bóng), đúng ngữ pháp desktop app. */
@media (min-width: 768px) {
  .c-tabbar {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: 14px; padding: 6px 10px;
    border: 1px solid var(--border); border-top: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  }
  .c-tab { min-width: 96px; padding: 0 10px; border-radius: var(--radius-pill); }
}
/* Chừa chỗ cho tab bar: nội dung + toast không bị che. */
.has-tabbar .c-main { padding-bottom: 96px; }
.has-tabbar .c-footer { display: none; }
.has-tabbar .c-toast { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* ── Thuê bao ── */
.c-subrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-soft);
}
.c-subrow-soon { border-color: rgba(246, 178, 61, .35); background: rgba(246, 178, 61, .08); color: #ffd899; }
.c-subrow-expired { border-color: rgba(244, 85, 91, .35); background: rgba(244, 85, 91, .08); color: #ffb4b7; }
.c-btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.c-chip-warn { color: var(--warn); border-color: rgba(246, 178, 61, .3); background: rgba(246, 178, 61, .1); }
.c-chip-danger { color: var(--neg); border-color: rgba(244, 85, 91, .3); background: rgba(244, 85, 91, .1); }

/* ── Biểu đồ vốn (SVG inline) ── */
.c-chartcard {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.c-chartcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-chartcard-title { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.c-chartcard-delta { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.c-chart { width: 100%; height: 120px; display: block; }
.c-chart-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.c-chart-area { stroke: none; opacity: .16; }
.c-chart-pos .c-chart-line { stroke: var(--pos); }
.c-chart-pos .c-chart-area { fill: var(--pos); }
.c-chart-neg .c-chart-line { stroke: var(--neg); }
.c-chart-neg .c-chart-area { fill: var(--neg); }
.c-chart-zero .c-chart-line { stroke: var(--brand); }
.c-chart-zero .c-chart-area { fill: var(--brand); }
.c-chartcard-range { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Vị thế: dòng chi tiết ── */
.c-pos-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c-pos-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 2px; }
/* Detail Vào/SL/TP là thông tin ra quyết định — WRAP khi hẹp, KHÔNG cắt cụt. */
.c-pos-detail { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.5; }

/* ── Hoạt động (feed) ── */
.c-feed { display: flex; flex-direction: column; gap: 8px; }
.c-feed-item {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.c-feed-icon {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.c-feed-icon-cmd { color: var(--brand); background: var(--brand-soft); }
.c-feed-icon-open { color: #7fb2ff; background: rgba(127, 178, 255, .12); }
.c-feed-icon-win { color: var(--pos); background: rgba(34, 197, 94, .12); }
.c-feed-icon-loss { color: var(--neg); background: rgba(244, 85, 91, .12); }
.c-feed-icon-info { color: var(--muted); background: var(--surface-3); }
.c-feed-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.c-feed-line { font-size: 13.5px; font-weight: 600; line-height: 1.45; word-break: break-word; }
.c-feed-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-feed-status {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--muted);
}
.c-feed-status-completed { color: var(--pos); background: rgba(34, 197, 94, .12); }
.c-feed-status-failed { color: var(--neg); background: rgba(244, 85, 91, .12); }
.c-feed-status-pending, .c-feed-status-executing { color: var(--warn); background: rgba(246, 178, 61, .12); }
.c-feed-result { font-size: 12px; color: var(--muted); word-break: break-word; }
.c-feed-time { font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; padding-top: 2px; }

/* ── P&L theo ngày ── */
.c-days { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--border); padding-top: 12px; }
.c-days-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.c-day { display: flex; align-items: center; gap: 10px; }
.c-day-date { flex: 0 0 40px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-day-bar { flex: 1 1 auto; height: 8px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.c-day-fill { display: block; height: 100%; border-radius: 5px; }
.c-day-fill-pos { background: var(--pos); }
.c-day-fill-neg { background: var(--neg); }
.c-day-fill-zero { background: var(--muted); }
.c-day-net { flex: 0 0 auto; min-width: 88px; text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Biểu đồ giá (TradingView) ── */
/* WRAP thay vì cuộn ngang (lesson §17: cuộn ngang giấu chip không affordance). */
.c-symbols { display: flex; gap: 8px; row-gap: 8px; flex-wrap: wrap; }
.c-symbol-chip {
  flex: 0 0 auto; padding: 8px 14px; min-height: 38px; display: inline-flex; align-items: center;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-soft); font-size: 13px; font-weight: 700;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.c-symbol-chip:hover { color: var(--text); border-color: var(--border-strong); }
.c-symbol-chip.is-active { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-border); }
.c-tvwrap {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); height: min(62vh, 560px);
}
.c-tv { width: 100%; height: 100%; }
.c-tv-fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 14px; padding: 20px; text-align: center; }
@media (min-width: 640px) { .c-tvwrap { height: 520px; } }

/* 5 tab: chữ gọn hơn chút cho vừa 390px; nhãn không xuống dòng (lệch icon ở ≤340px). */
.c-tab { font-size: 10.5px; }
.c-tab span { white-space: nowrap; }
@media (max-width: 340px) { .c-tab { font-size: 9.5px; } }

/* Khung thời gian chart sàn */
.c-tf { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); margin-bottom: 10px; }
.c-tf-btn {
  min-height: 40px; padding: 0 18px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; font-family: var(--font);
  transition: background .15s ease, color .15s ease;
}
.c-tf-btn:hover { color: var(--text); }
.c-tf-btn.is-active { background: var(--brand-soft); color: var(--brand); }
.c-tvwrap { position: relative; }
.c-chart-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13.5px; background: var(--surface); padding: 20px; text-align: center;
}
.c-chart-status[hidden] { display: none; }
.c-chart-status.is-busy::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--border-strong); border-top-color: var(--brand);
  animation: c-spin .7s linear infinite; margin-right: 10px;
}

/* ── Thanh công cụ biểu đồ (tín hiệu / vẽ) ──
   WRAP xuống dòng thay vì cuộn ngang: cuộn ngang giấu nút (không affordance),
   user không biết còn Price Action/Vẽ phía sau. Chip gọn để 2 hàng là hết. */
.c-charttools { display: flex; align-items: center; gap: 6px; row-gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.c-tt-group { display: contents; }
.c-tt-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-right: 1px; }
.c-tt-btn {
  flex: 0 0 auto; min-height: 30px; padding: 0 9px; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  font-size: 11px; font-weight: 700; font-family: var(--font); white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.c-tt-btn:hover { color: var(--text); }
.c-tt-btn.is-active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }

/* Badge giá trực tiếp góc trái trên biểu đồ */
.c-chart-live {
  position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 64px); overflow: hidden; white-space: nowrap;
  padding: 4px 9px; border-radius: var(--radius-pill); background: rgba(11,15,23,.72);
  border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px); pointer-events: none;
}
.c-chart-live[hidden] { display: none; }

/* OHLC readout khi crosshair chạm nến */
.c-chart-ohlc {
  position: absolute; top: 44px; left: 8px; z-index: 3;
  padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(11,15,23,.92);
  border: 1px solid var(--border); color: var(--text-soft);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: pre;
  backdrop-filter: blur(4px); pointer-events: none;
}
.c-chart-ohlc[hidden] { display: none; }

/* Nút phóng to + chế độ toàn màn hình (pseudo-fullscreen CSS) */
.c-chart-fsbtn {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(11,15,23,.72); border: 1px solid var(--border); color: var(--muted);
  backdrop-filter: blur(4px);
}
.c-chart-fsbtn::after { content: ''; position: absolute; inset: -4px; } /* hit-area 48px */
.c-chart-fsbtn:hover { color: var(--text); }
#bh-chart-wrap.c-fs {
  position: fixed; inset: 0; z-index: 150; background: var(--bg);
  padding: 10px clamp(10px, 3vw, 20px) calc(10px + env(safe-area-inset-bottom));
  margin: 0; display: flex; flex-direction: column;
}
/* Chart chiếm TRỌN phần còn lại — không magic number (hàng chip wrap 2-3 hàng
   trên mobile làm calc cố định cắt mất trục thời gian). */
#bh-chart-wrap.c-fs .c-tvwrap { flex: 1 1 auto; height: auto; min-height: 0; }
#bh-chart-wrap.c-fs .c-note { display: none; }
body.c-fs-lock { overflow: hidden; }

/* Spinner trong nút (đăng nhập) */
.c-btn .c-toast-spin { display: inline-block; vertical-align: -2px; margin-right: 7px; border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.c-live-cd { color: var(--brand); font-weight: 800; }
.c-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: c-live-pulse 1.8s ease-out infinite; }
@keyframes c-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .c-live-dot { animation: none; } }

/* ── Tổng hợp danh mục (dashboard ≥2 tài khoản) ── */
.c-portfolio {
  display: flex; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px;
}
.c-portfolio-cell { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 110px; }
.c-portfolio-value { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text); }
.c-portfolio-value b { font-weight: 800; }
.c-portfolio-value small { color: var(--muted); font-size: 11px; font-weight: 700; }

/* ── Cảnh báo rủi ro (account) ── */
.c-risklist { display: flex; flex-direction: column; gap: 6px; }
.c-risk {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; line-height: 1.45;
  border: 1px solid transparent;
}
.c-risk svg { flex: 0 0 auto; }
.c-risk-warn { background: rgba(246, 178, 61, .09); border-color: rgba(246, 178, 61, .26); color: #ffd899; }
.c-risk-danger { background: rgba(244, 85, 91, .1); border-color: rgba(244, 85, 91, .28); color: #ffb4b7; }

/* ── Tin kinh tế hôm nay (chart) ── */
.c-cal-list { display: flex; flex-direction: column; gap: 6px; }
.c-cal-row {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.c-cal-row.is-past { opacity: .55; }
.c-cal-time { font-weight: 800; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.c-cal-ccy { color: var(--muted); font-weight: 700; flex: 0 0 auto; white-space: nowrap; }
.c-cal-title { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
.c-cal-meta { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.c-cal-impact {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 800; padding: 2px 8px;
  border-radius: var(--radius-pill); letter-spacing: .02em; align-self: center;
}
.c-cal-impact-high { color: var(--neg); background: rgba(244, 85, 91, .12); }
.c-cal-impact-medium { color: var(--warn); background: rgba(246, 178, 61, .12); }

/* ── Tổng kết bộ lọc lịch sử ── */
.c-histsum { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Phản hồi chạm (IxD): nút lún nhẹ khi bấm ── */
@media (prefers-reduced-motion: no-preference) {
  .c-btn:active, .c-tt-btn:active, .c-tf-btn:active, .c-seg-btn:active,
  .c-cmd:active, .c-pos-close:active, .c-symbol-chip:active, .c-segment-item:active { transform: scale(.96); }
  .c-btn, .c-tt-btn, .c-tf-btn, .c-seg-btn, .c-cmd, .c-pos-close, .c-symbol-chip, .c-segment-item { transition-property: background, color, border-color, transform, filter; transition-duration: .15s; }
}

/* ── Focus bàn phím (a11y) ── */
:focus { outline: none; }
/* KHÔNG set border-radius ở đây — nó áp lên CHÍNH element (không phải outline),
   bo méo card/pill/nút khi focus bàn phím. outline-offset đã ôm đúng góc thật. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.c-input:focus-visible { outline: none; }

/* ── Desktop ── */
@media (min-width: 640px) {
  .c-grid { grid-template-columns: 1fr 1fr; }
  .c-h1 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}