:root { --surface: #101827; --surface-raised: #172136; --surface-soft: #202d45; --border: #31415d; --text: #f7f9fc; --muted: #b2bfd3; --accent: #35b8a5; --buy: #23bd8a; --sell: #ef6d7a; --warning: #efb54b; --focus: #9bd7ff; --radius: 12px; }
* { box-sizing: border-box; } html { overflow-x: hidden; background: #0b1220; } body { min-width: 0; min-height: 100vh; margin: 0; overflow-x: hidden; background: #0b1220; color: var(--text); font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.4; } button, input, select { min-height: 44px; font: inherit; } button { cursor: pointer; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .hidden { display: none !important; }.muted { color: var(--muted); }.message { min-height: 22px; margin: 8px 0 0; }.full-width { width: 100%; }.eyebrow { margin: 0 0 2px; color: var(--accent); font-size: .74rem; font-weight: 800; letter-spacing: .1em; }
.auth-screen { display: grid; min-height: 100vh; padding: 20px; place-items: center; }.auth-card { width: min(100%, 460px); padding: clamp(20px, 4vw, 32px); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 70px rgba(0,0,0,.28); }.auth-card h1 { margin: 24px 0 6px; font-size: clamp(1.4rem, 4vw, 1.8rem); }.stack { display: grid; gap: 10px; margin-top: 18px; }.stack label, .form-grid label, .filters label { display: grid; gap: 6px; color: var(--muted); font-size: .9rem; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 1.05rem; font-weight: 800; letter-spacing: .07em; text-decoration: none; }.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: linear-gradient(135deg, var(--accent), #3b82c4); color: #07141a; font-size: .76rem; letter-spacing: 0; }.btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; padding: 6px 13px; font-weight: 750; }.btn-primary { background: var(--accent); color: #06201c; }.btn-primary:hover { background: #64d4c2; }.btn-secondary { background: var(--surface-soft); color: var(--text); border-color: var(--border); }.btn-quiet { background: transparent; color: var(--muted); border-color: var(--border); }.btn-quiet:hover, .btn-secondary:hover { color: var(--text); border-color: var(--accent); } input, select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; background: #0c1423; color: var(--text); }
.app-shell { width: min(1480px, 100%); margin: 0 auto; padding: 0 16px 80px; }.topbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); }.account-summary { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }.account-email { max-width: 230px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }.tier-badge, .status-chip, .mode-chip { display: inline-flex; min-height: 24px; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; font-size: .74rem; font-weight: 750; }.tier-badge { color: #8ae9dc; border-color: var(--accent); text-transform: uppercase; }.status-online, .mode-demo { color: var(--buy); border-color: color-mix(in srgb, var(--buy), transparent 45%); }.status-offline, .mode-live { color: #ffbd6e; border-color: color-mix(in srgb, var(--warning), transparent 45%); }.status-neutral, .mode-neutral { color: var(--muted); }
.workspace { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 14px; padding-top: 14px; }.sidebar, .content { min-width: 0; }.sidebar { display: grid; align-content: start; gap: 12px; }.content { display: grid; align-content: start; gap: 12px; }.panel { min-width: 0; padding: clamp(12px, 1.6vw, 18px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }.panel h1, .panel h2, .panel h3 { margin: 0; line-height: 1.25; }.panel h1, .panel h2 { font-size: 1.12rem; }.panel h3 { font-size: .95rem; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }.panel-heading.compact { align-items: center; }.status-list { display: grid; gap: 8px; margin: 10px 0; }.status-list div { display: grid; gap: 2px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }.status-list dt { color: var(--muted); font-size: .8rem; }.status-list dd { margin: 0; font-weight: 700; }.safety-panel { color: var(--muted); }.safety-panel h2 { margin-bottom: 8px; color: var(--text); }
.signal-total { display: grid; min-width: 120px; grid-template-columns: 1fr 1fr; gap: 2px 10px; color: var(--muted); font-size: .8rem; text-align: right; }.signal-total b { color: var(--text); font-size: .98rem; }.signal-total .sig-buy, .signal-total .sig-buy b { color: var(--buy); }.signal-total .sig-sell, .signal-total .sig-sell b { color: var(--sell); }.signal-total small { grid-column: 1 / -1; }.signal-action { margin-bottom: 10px; border-left: 3px solid var(--accent); padding: 6px 10px; background: rgba(53,184,165,.1); color: #c3f2ea; }.signal-action.buy { border-color: var(--buy); }.signal-action.sell { border-color: var(--sell); }
.section-nav, .segmented { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }.section-tab, .segmented button { min-height: 38px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; background: var(--surface); color: var(--muted); font-weight: 750; }.section-tab.active, .segmented button.active { border-color: var(--accent); background: rgba(53,184,165,.16); color: #bff6ec; }.filters { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }.filters label { width: min(180px, 100%); }.table-wrap { width: 100%; overflow-x: auto; }.orders-table { width: 100%; min-width: 780px; border-collapse: collapse; }.orders-table th, .orders-table td { padding: 7px 9px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }.orders-table td { font-size: .92rem; }.orders-table th { color: var(--muted); font-size: .76rem; }.empty { color: var(--muted); text-align: center !important; }.buy, .positive { color: var(--buy); font-weight: 800; }.sell, .negative { color: var(--sell); font-weight: 800; }.st-open, .st-closed { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 750; line-height: 1.5; }.st-open { color: #34e8a0; background: rgba(52,232,160,.13); }.st-closed { color: var(--muted); background: rgba(148,163,184,.14); }.order-cards { display: none; gap: 10px; }.order-card { display: grid; gap: 6px; padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); }.order-card-head, .order-card-row { display: flex; justify-content: space-between; gap: 12px; }.order-card-row { color: var(--muted); }.order-card-row b { color: var(--text); text-align: right; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.upgrade-callout { margin: 12px 0; padding: 11px; border: 1px solid rgba(53,184,165,.5); border-radius: 9px; background: rgba(53,184,165,.08); }.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }.plan { display: grid; gap: 8px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-raised); }.plan-price { font-size: 1.4rem; font-weight: 850; }.plan ul { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: var(--muted); }.payment-card { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }.payment-grid { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; align-items: start; }.payment-network { display: grid; width: 116px; height: 116px; place-items: center; border: 1px solid var(--accent); border-radius: 12px; background: rgba(53,184,165,.12); color: #c3f2ea; font-size: .85rem; font-weight: 900; line-height: 1.2; text-align: center; }.wallet { overflow-wrap: anywhere; border-radius: 8px; padding: 10px; background: #0a111e; font-family: ui-monospace, Consolas, monospace; }.signal-viz-shell { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.signal-viz-card { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-raised); }.signal-viz-card h3 { margin: 0 0 7px; color: var(--muted); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }.signal-viz-frame { position: relative; }.signal-chart { height: 208px; }.viz-scanline { position: absolute; right: 0; left: 0; top: 50%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(53,184,165,.4), transparent); animation: viz-scan 3.4s ease-in-out infinite; } @keyframes viz-scan { 0%, 100% { transform: translateY(-104px); opacity: 0; } 50% { transform: translateY(104px); opacity: 1; } }.channel-legend { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }.channel-chip { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); }.channel-chip i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(53,184,165,.55); }.channel-chip.telemetry i { background: #a978ff; box-shadow: 0 0 8px rgba(169,120,255,.5); }.channel-chip span { min-width: 0; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.channel-chip b { margin-left: auto; font-size: .82rem; font-weight: 800; }.mobile-nav { display: none; }
@media (max-width: 1100px) { .workspace { grid-template-columns: 1fr; }.sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }.signal-viz-shell { grid-template-columns: repeat(2,minmax(0,1fr)); }.channel-legend { grid-template-columns: repeat(4,minmax(0,1fr)); } } @media (max-width: 700px) { .app-shell { padding: 0 12px 84px; }.topbar { min-height: 54px; }.account-summary { display: none; }.workspace { padding-top: 14px; }.sidebar { grid-template-columns: 1fr; }.safety-panel { display: none; }.panel-heading { flex-direction: column; }.panel-heading.compact { align-items: flex-start; }.signal-total { width: 100%; text-align: left; }.signal-viz-shell { grid-template-columns: 1fr; }.channel-legend { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 8px; }.signal-chart { height: 250px; }.section-nav { display: none; }.form-grid { grid-template-columns: 1fr; }.orders-table { display: none; }.table-wrap { overflow: visible; }.order-cards { display: grid; }.mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); background: rgba(16,24,39,.98); box-shadow: 0 -8px 28px rgba(0,0,0,.22); }.mobile-nav button { min-height: 58px; border: 0; border-top: 3px solid transparent; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 750; }.mobile-nav button.active { border-top-color: var(--accent); color: #c3f2ea; }.payment-grid { grid-template-columns: 1fr; }.payment-network { width: 100%; height: 90px; }.filters label { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }.viz-scanline { display: none; } }

.panel-toggle-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.panel-toggle-head > div { min-width: 0; }.panel-toggle, .dock-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--muted); line-height: 1; }.panel-toggle span, .dock-toggle span { display: block; font-size: .95rem; transition: transform .18s ease; }.panel-toggle:hover, .dock-toggle:hover { border-color: var(--accent); color: var(--text); }.panel-toggle-head .eyebrow { margin: 2px 0 4px; }.collapse-body { min-width: 0; }.panel.collapsed { width: 60px; padding: 6px; }.panel.collapsed .collapse-body { display: none; }.panel.collapsed .panel-toggle-head { margin-bottom: 0; }.panel.collapsed .panel-toggle-head > div { display: none; }.panel.collapsed .panel-toggle span { transform: rotate(-90deg); }.workspace.rail-all { grid-template-columns: 60px minmax(0, 1fr); }@media (max-width: 1100px) { .workspace.rail-all { grid-template-columns: 1fr; } }
.perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; }.perf-tile { display: grid; gap: 2px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); }.perf-label { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.perf-tile b { overflow: hidden; font-size: 1.1rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }.perf-tile small { color: var(--muted); font-size: .78rem; }.filter-row { display: flex; align-items: end; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 4px; }.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }.chip { border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; background: var(--surface); color: var(--muted); font-weight: 750; }.chip:hover { border-color: var(--accent); color: var(--text); }.chip.active { border-color: var(--accent); background: rgba(53,184,165,.16); color: #bff6ec; }.filter-row .filters { margin-bottom: 0; }.stats-line { min-height: 24px; margin: 8px 0 10px; padding: 5px 10px; border-left: 3px solid var(--accent); border-radius: 7px; background: rgba(53,184,165,.07); font-size: .86rem; }.pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }.pager .btn { min-height: 32px; padding: 4px 10px; }.pager label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }.pager select { width: auto; min-width: 88px; }.hint { margin: 0 0 10px; font-size: .82rem; }@media (max-width: 700px) { .perf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.filter-row { align-items: stretch; flex-direction: column; }.filter-chips { order: 2; }.pager { justify-content: center; }.pager .btn { flex: 1 1 auto; } }
.perf-head { gap: 10px; }.perf-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }.perf-actions .btn { min-height: 32px; padding: 3px 11px; }.perf-clock { min-width: 82px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); color: #bff6ec; font-family: ui-monospace, Consolas, monospace; font-size: .86rem; font-variant-numeric: tabular-nums; text-align: center; }.perf-clock.idle { color: var(--muted); }@media (max-width: 700px) { .perf-actions { width: 100%; justify-content: space-between; }.perf-clock { flex: 1 1 auto; } }@media (max-width: 700px) { input, select { font-size: 16px; }.segmented button { min-height: 44px; }.panel-toggle, .dock-toggle { width: 44px; height: 44px; } }@media (min-width: 701px) { button, input, select, .section-tab, .segmented button { min-height: 34px; }.panel-toggle, .dock-toggle { width: 34px; height: 34px; border-radius: 9px; }.panel-toggle-head .eyebrow { margin: 0 0 2px; }.filter-row { flex-wrap: nowrap; }.filters { flex-wrap: nowrap; }.filters label { width: 124px; }.filters input { min-height: 30px; padding: 3px 8px; }.filters .btn { padding: 2px 11px; border-radius: 999px; font-size: .86rem; } }.btn-danger { background: #d64550; color: #fff; }.btn-danger:hover { background: #e05a61; color: #fff; }
.head-group { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; }.head-group > .btn { white-space: nowrap; }.open-total { display: inline-flex; align-items: center; min-height: 30px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; background: var(--surface-raised); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }.open-total.positive { color: #34e8a0; border-color: color-mix(in srgb, var(--buy), transparent 45%); }.open-total.negative { color: #ff8a94; border-color: color-mix(in srgb, var(--sell), transparent 45%); }
.workspace.with-dock { grid-template-columns: 264px minmax(0, 1fr) 300px; }
/* Cả 2 panel sidebar thu gọn (rail 60px) + dock mở → phần giữa + dock phóng
   gần full màn hình; rule này đứng SAU .with-dock nên thắng specificity bằng nhau. */
.workspace.rail-all.with-dock { grid-template-columns: 60px minmax(0, 1fr) 300px; }
.side-dock { display: flex; min-width: 0; flex-direction: column; gap: 8px; align-self: start; position: sticky; top: 14px; }
.dock-chip { display: inline-flex; min-height: 34px; align-items: center; justify-content: flex-start; border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; background: var(--surface-raised); color: var(--muted); font-weight: 800; font-size: .8rem; white-space: nowrap; }.dock-chip:hover, .dock-chip:focus-visible { border-color: var(--accent); color: #c3f2ea; }
.dock-mini { width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }.dock-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--border); background: var(--surface-raised); }.dock-mini-head b { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }.dock-mini-head .btn { min-height: 28px; padding: 2px 10px; border-radius: 999px; font-size: .76rem; }.dock-mini-head .dock-mini-total { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; margin-left: auto; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }.dock-mini-total[hidden] { display: none; }.dock-mini-head .dock-mini-total.positive { color: #34e8a0; border-color: color-mix(in srgb, var(--buy), transparent 45%); }.dock-mini-head .dock-mini-total.negative { color: #ff8a94; border-color: color-mix(in srgb, var(--sell), transparent 45%); }
.dock-mini-list { display: grid; max-height: 24vh; overflow-y: auto; margin: 0; padding: 0; list-style: none; }.dock-mini-list .dock-empty { padding: 8px 10px; color: var(--muted); font-size: .78rem; }.dock-mini-group { min-width: 0; }.dock-mini-group + .dock-mini-group { border-top: 1px solid var(--border); }.dock-mini-title { display: block; padding: 6px 10px 1px; font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.dock-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 8px; padding: 5px 10px; border-bottom: 1px solid var(--border); font-size: .78rem; }.dock-row:last-child { border-bottom: 0; }.dock-row .dir { font-weight: 850; }.dock-row .meta { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }.dock-row .val { text-align: right; font-variant-numeric: tabular-nums; }
/* Ô "Open orders" (lệnh đang mở, PnL nổi) nổi bật hơn "Closed orders": nền tint
   accent + viền khung + nội dung sáng — phân biệt rõ lệnh mở với lệnh đã đóng. */
.dock-mini-group[data-dock-group="open"] { background: linear-gradient(180deg, rgba(53, 184, 165, .18), rgba(53, 184, 165, .06)); box-shadow: inset 0 0 0 1px rgba(53, 184, 165, .38); }.dock-mini-group[data-dock-group="open"] + .dock-mini-group { border-top-color: rgba(53, 184, 165, .4); }.dock-mini-group[data-dock-group="open"] .dock-mini-title { color: #bff6ec; }.dock-mini-group[data-dock-group="open"] .dock-row { border-left: 2px solid rgba(53, 184, 165, .55); }.dock-mini-group[data-dock-group="open"] .dock-row .meta { color: #cbd6e8; }.dock-mini-group[data-dock-group="open"] .dock-row .val:not(.positive):not(.negative) { color: #7de3c6; font-weight: 800; }
@media (max-width: 1100px) { .workspace.with-dock { grid-template-columns: 1fr; }.workspace.rail-all.with-dock { grid-template-columns: 1fr; }.side-dock { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; max-height: 46vh; flex-direction: row; flex-wrap: wrap; align-content: start; overflow-y: auto; padding: 8px; border-top: 1px solid var(--border); background: rgba(13, 20, 34, .98); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }.dock-mini { flex: 1 1 min(320px, 100%); } }
@media (max-width: 700px) { .side-dock { bottom: 60px; } }

/* The dock is hidden via the hidden attribute when nothing is minimized;
   author display:flex would override the UA [hidden] rule, so guard it. */
.side-dock[hidden] { display: none; }
/* Orders thu nhỏ → card bó CAO THEO NỘI DUNG, không giãn hết cột khi ít lệnh:
   nhóm Open cao đúng số lệnh đang mở (nhiều lệnh tới mức chạm trần → tự cuộn
   nội bộ, KHÔNG đẩy mất nhóm Closed); Closed luôn bó gọn 6 lệnh đóng gần nhất
   cuối card (JS đã slice(0, 6) — scroll chỉ để phòng màn hình quá thấp). */
@media (min-width: 1101px) {
  .side-dock.has-orders { height: calc(100vh - 28px); }
  .side-dock.has-orders .dock-chip { flex: 0 0 auto; }
  .side-dock.has-orders .dock-mini[data-dock-name="orders"] { display: flex; flex: 0 1 auto; min-height: 0; max-height: 100%; flex-direction: column; }
  .side-dock.has-orders .dock-mini[data-dock-name="orders"] .dock-mini-group { display: flex; min-height: 0; flex-direction: column; }
  .side-dock.has-orders .dock-mini[data-dock-name="orders"] .dock-mini-group[data-dock-group="open"] { flex: 0 1 auto; }
  .side-dock.has-orders .dock-mini[data-dock-name="orders"] .dock-mini-group[data-dock-group="closed"] { flex: 0 0 auto; }
  .side-dock.has-orders .dock-mini[data-dock-name="orders"] .dock-mini-list { flex: 1 1 auto; min-height: 0; max-height: none; }
  .side-dock.has-orders .dock-mini[data-dock-name="orders"] [data-dock-group="closed"] .dock-mini-list { flex: 0 0 auto; max-height: 168px; }
}

/* ─── Đăng ký / xác nhận email / lưu đăng nhập ─── */
.check-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.check-row input { width: auto; min-height: 0; flex: 0 0 auto; }
.captcha-row b { color: var(--text); font-size: 1rem; letter-spacing: .04em; }
.verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warning), transparent 40%); border-left: 4px solid var(--warning); border-radius: 10px; background: rgba(239,181,75,.1); color: #ffe1b0; font-size: .9rem; }
.verify-banner b { color: #fff; }
.verify-banner a { color: var(--focus); }
.btn-small { min-height: 32px; padding: 3px 11px; font-size: .84rem; }
/* Mất tín hiệu: băng đỏ + đồ thị xám & đứng im (không còn tia quét chạy). */
.signal-lost { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--sell), transparent 40%); border-left: 4px solid var(--sell); border-radius: 10px; background: rgba(239,109,122,.12); color: #ffd7db; font-size: .86rem; }
.signal-lost b { color: #fff; letter-spacing: .08em; }
/* Băng "xem trễ" — KHÁC hẳn băng mất tín hiệu (đỏ). Trễ là trạng thái bình
   thường của tài khoản chưa có gói, không phải sự cố; để chung màu đỏ sẽ khiến
   user tưởng hệ thống hỏng. */
.signal-delay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--warn, #f0b429), transparent 40%); border-left: 4px solid var(--warn, #f0b429); border-radius: 10px; background: rgba(240, 180, 41, .12); color: #ffe9bf; font-size: .86rem; }
.signal-delay b { color: #fff; letter-spacing: .08em; }
.btn-inline { padding: 2px 10px; font-size: .8rem; }
.signal-viz-frame.offline { filter: grayscale(.55) brightness(.85); }
.signal-viz-frame.offline .viz-scanline { animation: none; }