.stat-card .stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--bs-secondary-color)}
.stat-card .stat-value{font-size:1.25rem;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.stat-card .stat-sub{font-size:.72rem;color:var(--bs-secondary-color)}
.log-box{overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.5}
.log-box .l-err{color:#b02a37}
.log-box .l-warn{color:#997404}
.log-line{border-bottom:1px solid var(--bs-border-color-translucent);padding:2px 0}
.up{color:#0f8a3c !important}      /* Vietnamese convention: green = up */
.down{color:#d92d20 !important}   /* red = down */
.flat{color:var(--bs-secondary-color) !important}
.table>thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--bs-secondary-color);font-weight:600;white-space:nowrap}
.table td{white-space:nowrap;font-variant-numeric:tabular-nums}

/* live board */
.watch-scroll{max-height:calc(var(--row-h) * 10 + 2.3rem);overflow-y:auto;overflow-x:hidden}
.watch-table thead th{position:sticky;top:0;background:var(--bs-body-bg);z-index:2}
.watch-table thead th{border-bottom:1px solid var(--bs-border-color);cursor:pointer;user-select:none}
.watch-table tbody tr{cursor:default}
.watch-table tbody tr.held{background:rgba(13,110,253,.07)}
.watch-table tbody tr.held td:first-child{box-shadow:inset 3px 0 0 #0d6efd}
.watch-table td{padding-top:.25rem;padding-bottom:.25rem}
.watch-table tbody tr{height:var(--row-h)}
.watch-table .sym{font-weight:600}
.held-dot{display:inline-block;width:.4rem;height:.4rem;border-radius:50%;background:#0d6efd;margin-left:.3rem;vertical-align:middle}
@keyframes flashUp{0%{background:rgba(15,138,60,.28)}100%{background:transparent}}
@keyframes flashDown{0%{background:rgba(217,45,32,.28)}100%{background:transparent}}
tr.flash-up{animation:flashUp .7s ease-out}
tr.flash-down{animation:flashDown .7s ease-out}

/* live indicator */
.live-dot{width:.55rem;height:.55rem;border-radius:50%;background:#198754;display:inline-block;box-shadow:0 0 0 0 rgba(25,135,84,.6);animation:pulse 2s infinite}
.live-dot.stale{background:#dc3545;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(25,135,84,.55)}70%{box-shadow:0 0 0 .5rem rgba(25,135,84,0)}100%{box-shadow:0 0 0 0 rgba(25,135,84,0)}}

canvas{max-width:100%}
@media (max-width:575.98px){
  .stat-card .stat-value{font-size:1.05rem}
  .table td,.table th{font-size:.8rem}
  .watch-scroll{max-height:18.5rem}
}

/* price chart */
.chart-tv{position:relative;height:380px;width:100%}
@media (max-width:575.98px){.chart-tv{height:260px}}
#chartHost{overflow:hidden}
#tfGroup .btn{padding:.15rem .45rem;font-size:.75rem}
#tfGroup .btn.active{background:var(--bs-secondary);border-color:var(--bs-secondary);color:#fff}
.watch-table tbody tr{cursor:pointer}
.watch-table tbody tr.selected{background:rgba(13,110,253,.16)}
.watch-table tbody tr.selected td:first-child{box-shadow:inset 3px 0 0 #0d6efd}
.entry-legend{opacity:.85}

/* tv legend, candle timer, floating pnl */
.chart-shell{position:relative}
.tv-legend{position:absolute;top:6px;left:8px;z-index:4;display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem;font-size:.74rem;line-height:1.2;pointer-events:none;font-variant-numeric:tabular-nums}
.tv-legend .tv-tf{font-weight:700;letter-spacing:.03em;color:#495057}
.tv-legend .tv-ohlc{color:#6c757d}
.tv-legend .tv-ohlc b{color:#343a40;font-weight:600}
.tv-legend .tv-ohlc b.up{color:#0f8a3c}
.tv-legend .tv-ohlc b.down{color:#d92d20}
.tv-timer{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem;
  background:rgba(13,110,253,.10);color:#0d6efd;border:1px solid rgba(13,110,253,.25);
  border-radius:.25rem;padding:0 .3rem}
/* countdown sits at the top of the right price scale, like TradingView */
.tv-timer-axis{position:absolute;z-index:5;text-align:right;transform:translateY(-50%);
  border-radius:.22rem 0 0 .22rem;border-right:0;padding:1px .3rem;line-height:1.25;
  font-variant-numeric:tabular-nums;pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tv-timer.closed{background:rgba(108,117,125,.12);color:#6c757d;border-color:rgba(108,117,125,.25)}
.tv-pnl{position:absolute;right:76px;z-index:4;transform:translateY(-50%);
  font-size:.7rem;font-weight:600;padding:.05rem .35rem;border-radius:.25rem;
  white-space:nowrap;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.18);
  font-variant-numeric:tabular-nums}
.tv-pnl.pos{background:rgba(15,138,60,.92);color:#fff}
.tv-pnl.neg{background:rgba(217,45,32,.92);color:#fff}
.tv-pnl.neu{background:rgba(108,117,125,.9);color:#fff}
@media (max-width:575.98px){.tv-pnl{right:62px;font-size:.65rem}}

/* ------------------------------------------------ dark theme refinements */
[data-bs-theme="dark"] body{background:#0f1218}
[data-bs-theme="dark"] .card{border-color:#242a36;background:#161b24}
[data-bs-theme="dark"] .card-header,[data-bs-theme="dark"] .card-footer{
  background:#131820;border-color:#242a36}
[data-bs-theme="dark"] .table{--bs-table-bg:transparent;--bs-table-color:#c9ced8;
  --bs-table-hover-bg:rgba(255,255,255,.035);--bs-table-border-color:#242a36}
[data-bs-theme="dark"] .watch-table thead th{background:#131820}
[data-bs-theme="dark"] .stat-card .stat-value{color:#e8ecf3}
[data-bs-theme="dark"] .navbar.bg-dark{background:#0b0e14 !important}

/* trading colours (brighter for dark backgrounds) */
[data-bs-theme="dark"] .up{color:#2ee06a !important}
[data-bs-theme="dark"] .down{color:#ff5d5d !important}
[data-bs-theme="dark"] .flat{color:#8b93a3 !important}
[data-bs-theme="dark"] .watch-table tbody tr.held{background:rgba(96,165,250,.10)}
[data-bs-theme="dark"] .watch-table tbody tr.selected{background:rgba(96,165,250,.22)}

/* countdown + pnl pills */
[data-bs-theme="dark"] .tv-timer{background:rgba(96,165,250,.18);color:#93c5fd;
  border-color:rgba(96,165,250,.38);box-shadow:none}
[data-bs-theme="dark"] .tv-timer.closed{background:rgba(148,163,184,.15);color:#94a3b8;
  border-color:rgba(148,163,184,.32)}
[data-bs-theme="dark"] .tv-pnl.pos{background:rgba(22,163,74,.95)}
[data-bs-theme="dark"] .tv-pnl.neg{background:rgba(220,38,38,.95)}
[data-bs-theme="dark"] .tv-pnl.neu{background:rgba(100,116,139,.95)}
[data-bs-theme="dark"] .tv-legend .tv-tf{color:#cbd5e1}
[data-bs-theme="dark"] .tv-legend .tv-ohlc{color:#94a3b8}
[data-bs-theme="dark"] .tv-legend .tv-ohlc b{color:#e2e8f0}
[data-bs-theme="dark"] .tv-legend .tv-ohlc b.up{color:#2ee06a}
[data-bs-theme="dark"] .tv-legend .tv-ohlc b.down{color:#ff5d5d}

/* log */
[data-bs-theme="dark"] .log-box .l-err{color:#ff8a8a}
[data-bs-theme="dark"] .log-box .l-warn{color:#fbbf24}
[data-bs-theme="dark"] .log-line{border-color:#242a36}

/* flashes */
@keyframes flashUpDark{0%{background:rgba(46,224,106,.22)}100%{background:transparent}}
@keyframes flashDownDark{0%{background:rgba(255,93,93,.22)}100%{background:transparent}}
[data-bs-theme="dark"] tr.flash-up{animation:flashUpDark .7s ease-out}
[data-bs-theme="dark"] tr.flash-down{animation:flashDownDark .7s ease-out}

/* ------------------------------------------------- every panel shows 10 rows */
:root{--row-h:2.05rem}                /* one table row */
.rows-scroll{max-height:calc(var(--row-h) * 10 + 2.3rem);overflow-y:auto;overflow-x:auto}
.rows-scroll table{margin-bottom:0}
.rows-scroll thead th{position:sticky;top:0;z-index:2;background:var(--bs-body-bg)}
[data-bs-theme="dark"] .rows-scroll thead th{background:#131820}
.rows-scroll tbody tr{height:var(--row-h)}
.rows-scroll tbody td{vertical-align:middle}

/* log: exactly ten lines visible */
.log-box{max-height:calc(0.78rem * 1.5 * 10 + 1.1rem);overflow-y:auto}
@media (max-width:575.98px){
  .rows-scroll{max-height:calc(var(--row-h) * 10 + 2rem)}
}

/* ---------------------------------------------------- performance metrics */
.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.35rem .9rem}
.metric{padding:.15rem 0}
.metric .m-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--bs-secondary-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric .m-value{font-size:.92rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25}
.metric .m-sub{font-size:.66rem;color:var(--bs-secondary-color)}
@media (max-width:575.98px){
  .metrics{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .metric .m-value{font-size:.84rem}
}