/* ==========================================================================
   ECOSYSTEM PRO — "TERMINAL PRO" THEME LAYER  (loaded AFTER style.css)
   Mục tiêu: hiện đại · tinh gọn · dày dữ liệu nhưng dễ đọc (Bloomberg-like)
   - Không đổi HTML/JS/ID/class: chỉ override token + component.
   - Muốn quay về giao diện cũ: bỏ <link> theme-pro.css trong index.html.
   - Đổi màu thương hiệu: sửa --accent (+ --accent-soft) ở khối token bên dưới.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
    /* Palette Stitch/Romer — khớp tokens trong style.css (v3.4.1) */
    --bg: #131314;
    --surface: #101112;
    --card: #151617;
    --card-hover: #1B1C1E;
    --border: #1B1C1E;
    --border-subtle: #232426;     /* hairline rõ hơn cho bảng/dòng kẻ */
    --control-border: #2F3135;
    --text: #E5E2E3;
    --text-2: #C4C6CB;
    --text-3: #9A9DA3;
    --text-muted: #9A9DA3;

    --accent: #7C87FF;
    --accent-hover: #BEC2FF;
    --accent-soft: rgba(94, 107, 255, .16);
    --up: #3FD6A0;
    --up-soft: rgba(63, 214, 160, .12);
    --down: #FF6B77;
    --down-soft: rgba(255, 107, 119, .12);
    --warn: #FFB689;

    --sidebar-bg: #0D0E0F;
    --sidebar-hover: #161718;
    --sidebar-active: #232426;
    --sidebar-border: #232426;
    --header-bg: #0D0E0F;
    --panel-bg: var(--surface);
    --panel-sub-bg: var(--card);
    --panel-border: var(--border);
    --table-th-bg: #101112;
    --table-border: #1B1C1E;
    --sidepanel-bg: #0D0E0F;
    --sidepanel-header-bg: #151617;

    --radius-card: 8px;
    --radius-btn: 4px;
    --radius-input: 4px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --shadow-sm: none;
    --shadow-md: inset 0 1px 0 rgba(255,255,255,.07);
    --shadow-lg: 0 18px 48px rgba(0,0,0,.55);

    --font-sans: 'Inter', 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-ui: var(--font-sans);
    --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
    --font-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-mono: var(--font-data);

    --sidebar-w: 240px;
    --header-h: 52px;
    --table-row-h: 38px;
    --ease-pro: cubic-bezier(.2, .7, .2, 1);
}

body.theme-light {
    --bg: #F3F5F8;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --card-hover: #F6F8FB;
    --border: #E3E8EF;
    --border-subtle: #EEF1F6;
    --control-border: #D3DAE5;
    --text: #0E1624;
    --text-2: #3B4759;
    --text-3: #6B788C;
    --accent: #4B57D6;
    --accent-hover: #3A45B8;
    --accent-soft: rgba(75, 87, 214, .09);
    --up: #0E9F6E;
    --up-soft: rgba(14, 159, 110, .10);
    --down: #D92D4A;
    --down-soft: rgba(217, 45, 74, .09);
    --sidebar-bg: #FFFFFF;
    --sidebar-hover: #F3F6FA;
    --sidebar-active: #ECEEF5;
    --sidebar-border: #E3E8EF;
    --header-bg: #FFFFFF;
    --panel-border: #E3E8EF;
    --table-th-bg: #F7F9FC;
    --table-border: #EDF0F5;
    --shadow-md: 0 1px 2px rgba(15,23,42,.04);
    --shadow-lg: 0 18px 48px rgba(15,23,42,.14);
}

/* ---------- 2. BASE ---------- */
html, body {
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: -.003em;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv11', 'ss01', 'tnum';
}
body { background: var(--bg); }
* { scrollbar-width: thin; scrollbar-color: var(--control-border) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--control-border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; border: 2px solid transparent; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* số liệu: font mono + căn thẳng cột */
.radar-symbol, .data-table td, .drop-btn-badge, .pop-title, [id$="-nav"], [id*="pnl"], [id*="nav-"] {
    font-variant-numeric: tabular-nums;
}

/* ---------- 3. SIDEBAR ---------- */
.app-sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
}
.sidebar-header { padding: 12px 12px 10px; gap: 10px; border-bottom: 1px solid var(--sidebar-border); }
.brand-logo {
    width: 30px; height: 30px; border-radius: 8px; font-size: 14px;
    background: linear-gradient(145deg, var(--accent), #0A6AA5); color: #04121C;
    box-shadow: none;
}
.brand-name { font-weight: 700; letter-spacing: -.01em; }
.brand-ver { font-family: var(--font-data); font-size: 10px !important; opacity: .7; }
.btn-toggle-sidebar { background: transparent; border: 0; color: var(--text-3); border-radius: 6px; }
.btn-toggle-sidebar:hover { background: var(--sidebar-hover); color: var(--text); }

.sidebar-scroll-area { padding: 6px 8px 8px; }
.group-title {
    padding: 14px 8px 6px; margin: 0;
    font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-3);
}
.group-title:hover { color: var(--text-2); }
.sidebar-menu { gap: 1px; display: flex; flex-direction: column; }
.menu-item {
    position: relative; min-height: 32px; padding: 6px 10px 6px 12px; gap: 10px;
    border: 0; border-radius: 6px; background: transparent;
    font-size: 12.5px; font-weight: 500; color: var(--text-2); text-align: left;
    transition: background .14s var(--ease-pro), color .14s var(--ease-pro);
}
.menu-item i { width: 15px; font-size: 13px; color: var(--text-3); text-align: center; transition: color .14s; }
.menu-item:hover { background: var(--sidebar-hover); color: var(--text); }
.menu-item:hover i { color: var(--text-2); }
.menu-item.active {
    background: var(--sidebar-active); color: var(--text); font-weight: 600;
    box-shadow: none; border: 0;
}
.menu-item.active::before {
    content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2.5px;
    border-radius: 0 3px 3px 0; background: var(--accent);
}
.menu-item.active i { color: var(--accent); }
.menu-item .badge-count,
.menu-item [class*="badge"] {
    margin-left: auto; padding: 1px 6px; min-width: 0; height: auto;
    font-family: var(--font-data); font-size: 10px; font-weight: 600; line-height: 1.5;
    border-radius: 4px; border: 0; background: rgba(148,163,184,.12); color: var(--text-2);
}
.menu-item.active .badge-count { background: var(--accent-soft); color: var(--accent); }
.sidebar-footer { border-top: 1px solid var(--sidebar-border); padding: 10px; }

/* ---------- 4. TOP HEADER ---------- */
.top-header {
    height: var(--header-h); min-height: var(--header-h);
    background: var(--header-bg); border-bottom: 1px solid var(--sidebar-border);
    padding: 0 14px; gap: 10px; box-shadow: none;
}
.compact-drop-btn, .btn-header-tool, .top-header button:not(.btn-sidebar-expand-header) {
    height: 30px; border-radius: 6px; font-size: 12px; font-weight: 500;
    background: transparent; border: 1px solid var(--control-border); color: var(--text-2);
    transition: background .14s var(--ease-pro), border-color .14s, color .14s;
}
.compact-drop-btn:hover, .btn-header-tool:hover, .top-header button:hover { background: var(--card-hover); color: var(--text); border-color: var(--text-3); }
.drop-btn-badge { font-family: var(--font-data); font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); border: 0; }
.dropdown-popover, .popover {
    border: 1px solid var(--control-border); border-radius: 10px;
    background: var(--surface); box-shadow: var(--shadow-lg);
}

/* ---------- 5. MAIN CANVAS & PANELS ---------- */
.main-content, .app-main { background: var(--bg); }
.panel-card, .card, .glass-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: none; backdrop-filter: none;
}
.panel-card:hover { border-color: var(--control-border); }
.panel-card .panel-header, .panel-header { border-bottom: 1px solid var(--border-subtle); padding: 12px 16px; }
.panel-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }

/* ---------- 6. COCKPIT RADAR ---------- */
#radar-main-card { overflow: hidden; }
.radar-search-input {
    height: 30px; border-radius: 6px; background: var(--bg); border: 1px solid var(--control-border);
    color: var(--text); font-size: 12px; transition: border-color .14s, box-shadow .14s;
}
.radar-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: 0; }
.select-terminal-clean, select {
    height: 30px; border-radius: 6px; background-color: var(--bg); border: 1px solid var(--control-border);
    color: var(--text); font-size: 12px; font-weight: 500;
}

/* category pills → segmented, nhẹ */
.radar-category-pills-bar, .radar-sub-pills-bar { gap: 4px; padding-top: 4px; padding-bottom: 4px; }
.radar-cat-pill {
    height: 26px; padding: 0 11px; border-radius: 5px; font-size: 12px; font-weight: 500;
    background: transparent; border: 1px solid transparent; color: var(--text-3);
    transition: background .14s, color .14s;
}
.radar-cat-pill:hover { background: var(--card-hover); color: var(--text); }
.radar-cat-pill.active, body.theme-light .radar-cat-pill.active {
    background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; box-shadow: none;
}

/* bảng dữ liệu */
.table-wrap { border: 0; }
.data-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.data-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--table-th-bg); color: var(--text-3);
    font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    padding: 9px 12px; border-top: 1px solid var(--table-border); border-bottom: 1px solid var(--control-border);
    white-space: nowrap;
}
.data-table tbody td {
    height: var(--table-row-h); padding: 4px 12px; border: 0; border-bottom: 1px solid var(--table-border);
    font-size: 12.5px; color: var(--text); vertical-align: middle;
}
.data-table tbody tr { background: transparent; transition: background .12s; }
.data-table tbody tr:nth-child(even) { background: transparent; }
.data-table tbody tr:hover { background: var(--card-hover); }
.data-table tbody tr.radar-clickable-row { cursor: pointer; }
.data-table tbody tr.radar-clickable-row:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* số: mono, canh phải */
.data-table td:nth-child(3), .data-table td:nth-child(4), .data-table td:nth-child(5),
.data-table th:nth-child(3), .data-table th:nth-child(4), .data-table th:nth-child(5) { text-align: right; }
.data-table td:nth-child(3), .data-table td:nth-child(4), .data-table td:nth-child(5) {
    font-family: var(--font-data); font-weight: 600; font-size: 12.5px;
}
.symbol-cell-top { display: flex; align-items: center; gap: 8px; }
.radar-symbol { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.radar-name { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; color: var(--text-3); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-up { color: var(--up) !important; }
.text-down { color: var(--down) !important; }
.unit-muted { color: var(--text-3); font-weight: 500; }

/* thẻ loại tài sản: chữ nhỏ, nền mờ, không viền */
.radar-sector-tag {
    padding: 1px 6px; border-radius: 4px; border: 0;
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.6;
    background: rgba(148,163,184,.12); color: var(--text-2);
}
.radar-sector-tag.tag-crypto { background: rgba(240,180,41,.12); color: #F0B429; }
.radar-sector-tag.tag-cme { background: rgba(167,139,250,.14); color: #A78BFA; }
.radar-sector-tag.tag-us { background: rgba(56,189,248,.13); color: #38BDF8; }
body.theme-light .radar-sector-tag.tag-crypto { color: #B7791F; }
body.theme-light .radar-sector-tag.tag-cme { color: #6D4FD6; }
body.theme-light .radar-sector-tag.tag-us { color: #4B57D6; }

/* tín hiệu: chip nhỏ, tint thay vì viền */
.sig-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 4px; border: 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; box-shadow: none;
}
.sig-badge-long { background: var(--up-soft); color: var(--up); }
.sig-badge-short { background: var(--down-soft); color: var(--down); }
.sig-badge-standby, .sig-badge-blocked { background: rgba(148,163,184,.12); color: var(--text-2); }

.cpcv-clean-val { font-family: var(--font-data); font-weight: 600; color: var(--text-2); }
.btn-radar-detail, .radar-clickable-row button {
    height: 24px; padding: 0 10px; border-radius: 5px; font-size: 11px; font-weight: 600;
    background: transparent; border: 1px solid var(--control-border); color: var(--accent);
}
.radar-clickable-row button:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ---------- 7. BUTTONS / MODALS / DRAWER ---------- */
.btn-primary { border-radius: 6px; font-weight: 600; box-shadow: none; }
.btn-secondary { border-radius: 6px; }
.modal-overlay, .radar-slidein-overlay { backdrop-filter: blur(6px); background: rgba(3,5,9,.62); }
body.theme-light .modal-overlay { background: rgba(15,23,42,.35); }
.radar-slidein-drawer, .app-sidepanel {
    background: var(--sidepanel-bg); border-left: 1px solid var(--control-border); box-shadow: var(--shadow-lg);
}

/* ---------- 8. MOTION (tôn trọng reduce-motion) ---------- */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- 9. FIXES TỪ BẢN XEM THỬ #1 ---------- */
.menu-item > span:first-of-type:not([class*="badge"]) { flex: 1 1 auto; min-width: 0; line-height: 1.25; text-align: left; }
.menu-item .badge-count, .menu-item [class*="badge"] {
    display: inline-flex; flex-direction: row; align-items: center; gap: 3px; white-space: nowrap; flex: 0 0 auto;
}
/* header: thu nhãn nút khi màn hình hẹp để không tràn ngang */
.header-system, .header-tools-group { min-width: 0; gap: 6px; }
@media (max-width: 1840px) {
    .top-header .tool-label { display: none; }
    .top-header .btn-header-tool { padding: 0 9px; }
}
@media (max-width: 1700px) {
    #status-market-badge { display: none; }   /* chỉ báo PAPER/LIVE luôn hiển thị (an toàn) */
}

.menu-item { gap: 9px; }
.menu-item .badge-count, .menu-item [class*="badge"] { font-size: 9.5px; padding: 1px 5px; }

/* ---------- 10. ROMER STYLE (theo thiết kế Stitch): phẳng · viền mảnh · tiết chế màu ---------- */
/* Tiêu đề: Manrope, chữ siết nhẹ */
.brand-name, .panel-title, .card-title, .modal-title, h1, h2, h3, .kpi-value, .stat-value {
    font-family: var(--font-display); letter-spacing: -.02em;
}
.panel-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.brand-logo { background: transparent; border: 1px solid var(--text-3); color: var(--text); border-radius: 50%; width: 28px; height: 28px; }

/* điều hướng: mục đang chọn = nền xám phẳng, không vạch màu */
.menu-item.active { background: var(--sidebar-active); color: var(--text); }
.menu-item.active::before { display: none; }
.menu-item.active i { color: var(--text); }
.menu-item .badge-count, .menu-item [class*="badge"] { background: var(--border-subtle); color: var(--text-3); }
.menu-item.active .badge-count { background: rgba(255,255,255,.08); color: var(--text-2); }
body.theme-light .menu-item.active i { color: var(--accent); }

/* thẻ: viền mảnh + vệt sáng trên cùng như Romer */
.panel-card, .card { box-shadow: none; }

/* nút: chính = trắng chữ đen (Romer) hoặc indigo; phụ = xám phẳng viền mảnh */
.btn-primary { background: #5E6BFF; color: #fff; border: 0; border-radius: 4px; }
.btn-primary:hover { background: #7482FF; }
.btn-secondary, .top-header button:not(.btn-sidebar-expand-header) {
    background: #151618; border: 1px solid var(--border); border-radius: 4px;
}
body.theme-light .btn-secondary, body.theme-light .top-header button:not(.btn-sidebar-expand-header) { background: #fff; border-color: var(--control-border); }
.compact-drop-btn:hover, .btn-header-tool:hover, .top-header button:hover { border-color: var(--control-border); background: #1B1C1F; }

/* bảng: tiêu đề cột chữ thường, mờ — dịu hơn chữ HOA */
.data-table thead th {
    text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 600; color: var(--text-3);
    border-top: 0; border-bottom: 1px solid var(--border);
}
.data-table tbody tr:hover { background: #18191B; }
body.theme-light .data-table tbody tr:hover { background: #F6F8FB; }
.data-table tbody tr.radar-clickable-row:hover td:first-child { box-shadow: inset 2px 0 0 #5E6BFF; }

/* pills danh mục: viền mảnh, đang chọn = xám phẳng */
.radar-cat-pill { border: 1px solid var(--border); border-radius: 4px; color: var(--text-2); }
.radar-cat-pill:hover { background: #151618; }
.radar-cat-pill.active, body.theme-light .radar-cat-pill.active { background: #232426; color: var(--text); border-color: #2F3135; }
body.theme-light .radar-cat-pill.active { background: #ECEEF5; color: var(--accent); border-color: transparent; }

/* chip loại tài sản trung tính hơn (bớt màu) */
.radar-sector-tag { background: #1B1C1E; color: var(--text-2); }
.radar-sector-tag.tag-crypto { background: rgba(255,182,137,.12); color: #FFB689; }
.radar-sector-tag.tag-cme { background: rgba(190,194,255,.12); color: #BEC2FF; }
.radar-sector-tag.tag-us { background: rgba(80,216,233,.12); color: #50D8E9; }
body.theme-light .radar-sector-tag { background: #EEF0F5; }

/* ---------- 11. ĐÈ RULE CŨ CÓ ĐỘ ƯU TIÊN CAO ---------- */
.app-sidebar .sidebar-menu .menu-item.active {
    background: var(--sidebar-active); border: 0; box-shadow: none; color: var(--text);
}
.app-sidebar .sidebar-menu .menu-item.active i:first-child { color: var(--text); }
body.theme-light .app-sidebar .sidebar-menu .menu-item.active { background: var(--sidebar-active); color: var(--accent); }
body.theme-light .app-sidebar .sidebar-menu .menu-item.active i:first-child { color: var(--accent); }
.radar-category-pills-bar .radar-cat-pill.active { background: #232426; color: var(--text); border: 1px solid #2F3135; box-shadow: none; }
body.theme-light .radar-category-pills-bar .radar-cat-pill.active { background: #ECEEF5; color: var(--accent); border-color: transparent; }

/* ==========================================================================
   12. PHẲNG HOÁ TOÀN BỘ — bỏ bóng, glow, gradient, blur. Tách lớp bằng sắc độ nền + viền mảnh.
   ========================================================================== */
.panel-card, .card, .glass-panel, .workspace-hero-card, .workspace-kpi-card, .workspace-chart-panel,
.workspace-detail-panel, .detail-section-card, .bento-card, .stream-card, .guide-card,
.compact-drop-btn, .btn-header-tool, .radar-slidein-drawer, .app-sidepanel, .app-sidebar {
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.workspace-hero-card, .workspace-kpi-card, .workspace-chart-panel, .workspace-detail-panel, .detail-section-card, .bento-card {
    background: var(--surface) !important; background-image: none !important;
    border: 1px solid var(--border) !important; border-radius: var(--radius-card) !important;
}
body.theme-light .workspace-hero-card, body.theme-light .workspace-kpi-card, body.theme-light .workspace-chart-panel,
body.theme-light .workspace-detail-panel, body.theme-light .detail-section-card { background: #fff !important; }

/* tiêu đề khu vực: HOA, giãn chữ */
.workspace-kpi-title, .workspace-meta-label, .group-title, .section-title, .panel-subtitle,
.modal-box h2, .modal-box h3, .modal-title, .drawer-title, .sidepanel-title, .detail-section-title, .guide-section-header {
    text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.workspace-kpi-title, .workspace-meta-label { font-size: 10.5px; color: var(--text-3); }

/* ---------- Symbol Workspace ---------- */
.workspace-hero-price { font-family: var(--font-data); font-weight: 600; letter-spacing: -.03em; }
.workspace-meta-val, .workspace-kpi-value { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.workspace-price-change-pill { border-radius: 3px !important; border: 0 !important; font-family: var(--font-data); }
.workspace-price-change-pill.down { background: var(--down-soft) !important; color: var(--down) !important; }
.workspace-price-change-pill.up { background: var(--up-soft) !important; color: var(--up) !important; }
.workspace-badge-market, .badge-confluence { border-radius: 3px !important; border: 0 !important; background: var(--border-subtle) !important; color: var(--text-2) !important;
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.workspace-kpi-grid { gap: 12px; }
.workspace-kpi-card .bar, .workspace-kpi-sub .bar, [id$="ai-bar"] { border-radius: 2px; }

/* tab con: gạch chân thay cho "viên thuốc" */
.workspace-pill-nav { display: flex; gap: 2px; padding: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; overflow-x: auto; scrollbar-width: none; }
.workspace-pill-nav::-webkit-scrollbar { display: none; }
.workspace-pill-btn {
    position: relative; padding: 10px 14px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    color: var(--text-3) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.workspace-pill-btn:hover { color: var(--text) !important; }
.workspace-pill-btn.active { color: var(--text) !important; }
.workspace-pill-btn.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: #5E6BFF; }
.detail-tab-btn { border-radius: 3px !important; letter-spacing: .06em; }
.detail-tab-btn.active { background: var(--border-subtle) !important; color: var(--text) !important; box-shadow: none !important; }

/* ---------- Màn chào mừng / splash ---------- */
.quant-startup-loader { background: var(--bg) !important; backdrop-filter: none !important; }
.quant-startup-card { background: var(--surface) !important; background-image: none !important; border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: none !important; }
.quant-startup-glow-orb { display: none !important; }
.quant-startup-emblem-wrap { width: 64px !important; height: 64px !important; background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: none !important; }
.quant-startup-brand { font-family: var(--font-display); font-size: 13px !important; font-weight: 700; letter-spacing: .2em !important; color: var(--text) !important; }
.quant-startup-brand * { color: inherit !important; }
.quant-startup-badge { background: var(--border-subtle) !important; border: 0 !important; border-radius: 3px !important; color: var(--text-2) !important; letter-spacing: .1em; }
.quant-startup-status { color: var(--text-2) !important; }
.quant-startup-progress-track { height: 2px !important; background: var(--border-subtle) !important; border-radius: 0 !important; }
.quant-startup-progress-fill { background: #5E6BFF !important; border-radius: 0 !important; box-shadow: none !important; }
.quant-startup-step-tag { letter-spacing: .12em; text-transform: uppercase; color: var(--text-3) !important; }
.quant-startup-pct { color: var(--text-2) !important; }
.quant-startup-node { background: transparent !important; border: 1px solid var(--border) !important; border-radius: 4px !important; color: var(--text-3) !important; box-shadow: none !important; }
.quant-startup-node.active { background: var(--border-subtle) !important; border-color: transparent !important; color: var(--text) !important; }
.quant-startup-node.active i { color: var(--up) !important; }
.quant-startup-skip-btn { background: #5E6BFF !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-weight: 600; box-shadow: none !important; }
.quant-startup-skip-btn:hover { filter: brightness(1.12); }
.quant-tab-loader-pill { box-shadow: none !important; backdrop-filter: none !important; border-radius: 4px !important; }

/* ---------- Popup Trợ lý AI (nhiều style inline → cần !important) ---------- */
#mcp-chat-box { background: var(--surface) !important; background-image: none !important; border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: 0 16px 48px rgba(0,0,0,.45) !important; backdrop-filter: none !important; }
#mcp-chat-box .chat-widget-header { background: transparent !important; border-bottom: 1px solid var(--border) !important; }
#mcp-chat-box .chat-widget-header h3 { font-family: var(--font-display); font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--text) !important; }
#mcp-chat-box .chat-widget-header > div:first-child > div:first-child { background: var(--card) !important; border: 0 !important; border-radius: 6px !important; }
#mcp-chat-box .chat-widget-header i.fa-brain { color: #9AA3FF !important; }
#chat-mcp-status-chip { background: var(--up-soft) !important; color: var(--up) !important; border-radius: 3px !important; letter-spacing: .06em; text-transform: uppercase; font-size: 9px !important; }
#chat-active-symbol-badge { color: var(--text) !important; font-family: var(--font-data); }
#mcp-chat-box .btn-chat-header-action { color: var(--text-3) !important; border-radius: 4px !important; }
#mcp-chat-box .btn-chat-header-action:hover { background: var(--card-hover) !important; color: var(--text) !important; }
/* 4 playbook: cùng một tông trung tính thay vì 4 màu */
#mcp-chat-box .chat-quick-prompts { background: transparent !important; border-bottom: 1px solid var(--border) !important; }
#mcp-chat-box .quick-prompt { background: var(--card) !important; border: 1px solid var(--border) !important; color: var(--text-2) !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 600 !important; box-shadow: none !important; white-space: nowrap; }
#mcp-chat-box .quick-prompt:hover { border-color: var(--control-border) !important; color: var(--text) !important; }
#chat-pinned-disclaimer { background: transparent !important; border-bottom: 1px solid var(--border) !important; color: var(--text-3) !important; }
#chat-pinned-disclaimer strong { color: var(--text-2); }
#chat-pinned-disclaimer i { color: var(--warn) !important; }
#chat-messages { background: var(--bg) !important; }
#chat-messages .chat-message { background: var(--card) !important; border: 0 !important; border-radius: 6px !important; color: var(--text) !important; }
#chat-messages .chat-msg-assistant > div:first-child { color: #9AA3FF !important; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
#chat-messages .chat-msg-user { background: rgba(94,107,255,.16) !important; }
#chat-typing-indicator { background: var(--bg) !important; color: var(--text-3) !important; }
#mcp-chat-box .chat-widget-footer { background: transparent !important; border-top: 1px solid var(--border) !important; }
#mcp-chat-input { background: var(--card) !important; border: 1px solid transparent !important; border-radius: 4px !important; color: var(--text) !important; box-shadow: none !important; }
#mcp-chat-input:focus { border-color: #9AA3FF !important; outline: 0; }
#btn-send-chat { background: #5E6BFF !important; background-image: none !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; color: #fff !important; }
#btn-attach-image { background: var(--card) !important; border: 0 !important; border-radius: 4px !important; color: var(--text-2) !important; }
#chat-model-select, #chat-thinking-select { background: var(--card) !important; border: 0 !important; border-radius: 4px !important; color: var(--text-2) !important; }
#floating-ai-copilot-btn { background: #5E6BFF !important; background-image: none !important; border: 0 !important; box-shadow: none !important; }
#floating-ai-copilot-btn:hover { filter: brightness(1.12); }
body.theme-light #mcp-chat-box { box-shadow: 0 16px 48px rgba(15,23,42,.16) !important; }
body.theme-light #chat-messages { background: var(--bg) !important; }
body.theme-light #chat-messages .chat-message { background: #fff !important; }
body.theme-light #mcp-chat-box .quick-prompt, body.theme-light #mcp-chat-input, body.theme-light #chat-model-select,
body.theme-light #chat-thinking-select, body.theme-light #btn-attach-image { background: #F3F4F7 !important; }

/* ---------- Modal chung ---------- */
.modal-backdrop { background: rgba(3,3,4,.66) !important; backdrop-filter: none !important; }
body.theme-light .modal-backdrop { background: rgba(15,18,30,.4) !important; }
.modal-box { background: var(--surface) !important; background-image: none !important; border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: 0 16px 48px rgba(0,0,0,.5) !important; }
body.theme-light .modal-box { box-shadow: 0 16px 48px rgba(15,23,42,.18) !important; }
.modal-box .modal-header, .modal-box .modal-top { border-bottom: 1px solid var(--border) !important; background: transparent !important; }
.modal-box .modal-bottom { border-top: 1px solid var(--border) !important; background: transparent !important; }
input, select, textarea { border-radius: 4px; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="search"], textarea {
    background: var(--card); border: 1px solid var(--control-border); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: #9AA3FF; box-shadow: none; }
body.theme-light input[type="text"], body.theme-light input[type="password"], body.theme-light input[type="number"], body.theme-light textarea { background: #fff; }

/* Toast / dropdown phẳng */
.bloomberg-toast { border-radius: 6px !important; box-shadow: 0 8px 24px rgba(0,0,0,.4) !important; }
.dropdown-popover, .popover { box-shadow: 0 12px 32px rgba(0,0,0,.45) !important; }

/* ==========================================================================
   13. BỔ SUNG PHẲNG HOÁ (từ bản xem thử #2)
   ========================================================================== */
button { background-color: transparent; color: inherit; }          /* nút không class không còn "trắng" trên nền tối */
.detail-tab-btn { background: var(--card) !important; color: var(--text-2) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; box-shadow: none !important; }
.detail-tab-btn:hover { color: var(--text) !important; border-color: var(--control-border) !important; }
body.theme-light .detail-tab-btn { background: #fff !important; }
.quant-startup-brand { background: none !important; -webkit-text-fill-color: currentColor !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--text) !important; }
.quant-startup-brand * { background: none !important; -webkit-text-fill-color: currentColor !important; }
#mcp-chat-box .chat-quick-prompts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; overflow: visible !important; }
#mcp-chat-box .quick-prompt { white-space: normal !important; line-height: 1.25; padding: 6px 8px !important; }

/* ==========================================================================
   14. RESPONSIVE — Tablet (≤1100px) & Điện thoại (≤767px)
   ========================================================================== */
.m-bottomnav, .m-scrim { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
    #kpi-block-balance, #kpi-divider-balance { display: none; }
    #radar-table-container th:nth-child(7), #radar-table-container td:nth-child(7),
    #radar-table-container th:nth-child(8), #radar-table-container td:nth-child(8) { display: none; }   /* CPCV, xu hướng 15m */
    .workspace-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .workspace-body-split { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 1100px) {
    /* thanh trái: mặc định là thanh icon; bấm menu → trượt ra đè lên nội dung */
    .app-sidebar.user-expanded { position: fixed; left: 0; top: 0; bottom: 0; z-index: 1000; width: min(280px, 86vw) !important; border-right: 1px solid var(--border); }
    .m-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(3,3,4,.66); }
    body.m-sidebar-open .m-scrim { display: block; }
}
@media (max-width: 900px) { .top-header .kpi-block, .top-header .kpi-divider { display: none; } }

/* ---------- Điện thoại ---------- */
@media (max-width: 767px) {
    :root { --header-h: 48px; --m-nav-h: 58px; --table-row-h: 52px; }
    html, body { overflow: hidden; }
    .app-layout { height: 100dvh; }
    .app-main { height: 100dvh; padding-bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px)); }
    .app-terminal-footer { display: none; }
    .workspace-body { padding: 10px !important; }

    /* header: giữ nút menu + danh mục + icon công cụ */
    .top-header { padding: 0 10px; gap: 6px; }
    .top-header .kpi-block, .top-header .kpi-divider,
    #dropdown-status, #dropdown-tools, #btn-header-mcp-status, #btn-header-admin-perms,
    #safety-badge, .top-header .tool-label { display: none !important; }
    .header-system { gap: 4px; margin-left: auto; }
    .header-financial { min-width: 0; }
    #portfolio-btn-active .drop-btn-title { max-width: 84px; overflow: hidden; text-overflow: ellipsis; }

    /* sidebar off-canvas + scrim */
    .app-sidebar, .app-sidebar.collapsed { width: min(300px, 86vw) !important; background: var(--sidebar-bg); border-right: 1px solid var(--border); box-shadow: none !important; }

    /* thanh điều hướng dưới */
    .m-bottomnav {
        display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        height: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--sidebar-bg); border-top: 1px solid var(--border);
    }
    .m-bottomnav button {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        color: var(--text-3); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 0; background: transparent;
    }
    .m-bottomnav button i { font-size: 17px; }
    .m-bottomnav button[aria-current="page"] { color: var(--text); }
    .m-bottomnav button[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; background: #5E6BFF; }

    /* Radar: bảng gọn 4 cột (mã · giá · 24h · tín hiệu) */
    #radar-table-container th:nth-child(1), #radar-table-container td:nth-child(1),
    #radar-table-container th:nth-child(5), #radar-table-container td:nth-child(5),
    #radar-table-container th:nth-child(7), #radar-table-container td:nth-child(7),
    #radar-table-container th:nth-child(8), #radar-table-container td:nth-child(8),
    #radar-table-container th:nth-child(9), #radar-table-container td:nth-child(9) { display: none; }
    #radar-table-container .radar-name { display: none; }
    #radar-table-container th, #radar-table-container td { padding-left: 6px !important; padding-right: 6px !important; }
    #radar-table-container .symbol-cell-top { flex-wrap: wrap; gap: 2px 6px; }
    #radar-table-container th { font-size: 9px; letter-spacing: .06em; }
    body:has(#mcp-chat-box:not([style*="display: none"])) #floating-ai-copilot-btn { display: none !important; }
    #radar-main-card .panel-header, #radar-main-card [class*="header"] { flex-wrap: wrap; gap: 8px; }
    .radar-category-pills-bar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .radar-category-pills-bar::-webkit-scrollbar { display: none; }
    .radar-cat-pill { flex: none; }

    /* bảng khác: cuộn ngang mượt thay vì vỡ layout */
    .table-wrap, .table-responsive-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 560px; }
    #radar-table-container .data-table { min-width: 0; }

    /* Symbol Workspace */
    .workspace-hero-card { padding: 14px !important; flex-direction: column !important; align-items: stretch !important; gap: 14px; }
    .workspace-hero-left { width: 100%; }
    .workspace-meta-stats { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; gap: 12px 16px !important; }
    .workspace-ticker-row { flex-wrap: wrap; }
    #btn-header-ai-chat { display: none !important; }
    .workspace-hero-price { font-size: 30px !important; }
    .workspace-kpi-grid { grid-template-columns: 1fr !important; }
    .workspace-body-split { grid-template-columns: minmax(0, 1fr) !important; }

    /* ngăn chi tiết bên phải (Radar) → bảng trượt từ dưới lên */
    .radar-slidein-drawer { width: 100% !important; top: auto !important; height: 88dvh; border-left: 0 !important; border-top: 1px solid var(--control-border); border-radius: 12px 12px 0 0;
        transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .radar-slidein-drawer.open { transform: translateY(0) !important; }

    /* popup AI → toàn chiều rộng, nằm trên thanh dưới */
    #mcp-chat-box:not(.ai-chat-expanded) { left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; max-width: 100% !important; bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
        height: calc(100dvh - var(--m-nav-h) - 8dvh) !important; max-height: none !important; border-radius: 12px 12px 0 0 !important; }
    #floating-ai-copilot-btn { bottom: calc(var(--m-nav-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; }

    /* modal → bảng trượt từ dưới lên */
    .modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
    .modal-box, .modal-box-lg, .modal-box-xl, .modal-box-xxl { width: 100% !important; max-width: 100% !important; max-height: 92dvh !important; border-radius: 12px 12px 0 0 !important; }

    /* tap target ≥ 40px cho nút & ô nhập */
    .top-header button, .btn-primary, .btn-secondary, select, input[type="text"], input[type="password"], input[type="search"] { min-height: 38px; }
}

/* ---------- Theme sáng: chỉnh nốt các điểm lệch ---------- */
body.theme-light #ws-tradingview-wrapper { --text: #E5E2E3; --text-3: #9A9DA3; --text-2: #C4C6CB; }  /* khung biểu đồ luôn tối → chữ trong khung phải sáng */
body.theme-light #chat-pinned-disclaimer { background: transparent !important; color: var(--text-3) !important; }
body.theme-light #chat-pinned-disclaimer strong { color: var(--text-2); }

/* ---------- Tab con (R&D Lab, Quản trị, Backtest…): gạch chân thay cho nhiều màu ---------- */
.rd-subtabs-bar, .admin-subtabs-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; background: transparent !important; }
.rd-subtabs-bar::-webkit-scrollbar, .admin-subtabs-bar::-webkit-scrollbar { display: none; }
.rd-subtabs-bar .btn-terminal-pill, .admin-subtabs-bar .btn-terminal-pill {
    position: relative; flex: none; padding: 10px 14px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    color: var(--text-3) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase;
}
.rd-subtabs-bar .btn-terminal-pill i, .admin-subtabs-bar .btn-terminal-pill i { color: inherit !important; }
.rd-subtabs-bar .btn-terminal-pill:hover, .admin-subtabs-bar .btn-terminal-pill:hover { color: var(--text) !important; }
.rd-subtabs-bar .btn-terminal-pill.active, .admin-subtabs-bar .btn-terminal-pill.active { color: var(--text) !important; }
.rd-subtabs-bar .btn-terminal-pill.active::after, .admin-subtabs-bar .btn-terminal-pill.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: #5E6BFF; }

/* nút chính: một màu indigo phẳng (không áp lên nút đã có màu riêng bằng style inline) */
.btn-primary:not([style*="background"]) { background: #5E6BFF !important; background-image: none !important; border: 0 !important; color: #fff !important; box-shadow: none !important; }
.btn-primary:not([style*="background"]):hover { background: #7482FF !important; }
.btn-primary:disabled { opacity: .45; }
.rd-subtabs-bar, .admin-subtabs-bar { flex-wrap: nowrap !important; }

.btn-primary-neon { background: #5E6BFF !important; background-image: none !important; border: 0 !important; color: #fff !important; box-shadow: none !important; text-shadow: none !important; }
.btn-primary-neon:hover { background: #7482FF !important; }


/* ==========================================================================
   15. RAIL · WORKSPACES · PHÂN KHU MỚI (Control Center, R&D, What-If, khóa quyền…)
   ========================================================================== */
body.theme-light { --border-strong: #D3DAE5; --violet: #6D4FD6; }

/* ----- RAIL: thanh trái thu gọn = icon + nhãn nhỏ (mặc định); bấm logo để mở rộng ----- */
.app-sidebar.sidebar-rail.collapsed, .app-sidebar.sidebar-rail:not(.user-expanded) { width: var(--rail-w) !important; }
.app-sidebar.sidebar-rail.collapsed .sidebar-header { flex-direction: column !important; align-items: center; padding: 12px 0 8px !important; gap: 6px; }
.app-sidebar.sidebar-rail.collapsed .brand-info, .app-sidebar.sidebar-rail.collapsed .btn-toggle-sidebar { display: none !important; }
.app-sidebar.sidebar-rail.collapsed .sidebar-group { padding: 2px 6px !important; border-bottom: 0 !important; }
.app-sidebar.sidebar-rail.collapsed .group-title { display: none !important; }
.app-sidebar.sidebar-rail.collapsed .menu-item { flex-direction: column !important; justify-content: center !important; align-items: center; gap: 4px !important; width: 60px !important; height: 56px; min-height: 0; padding: 6px 0 !important; margin: 0 auto 2px; font-size: 8.5px !important; line-height: 1.15 !important; overflow: visible !important; }
.app-sidebar.sidebar-rail.collapsed .menu-item i { font-size: 17px !important; width: auto; }
.app-sidebar.sidebar-rail.collapsed .menu-item > span:not(.badge-count) { display: block !important; visibility: visible !important; width: auto !important; height: auto !important; overflow: visible !important; max-width: 58px; font-size: 8.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.15; text-align: center; white-space: normal; flex: none; }
.app-sidebar.sidebar-rail.collapsed .menu-item .badge-count { display: none !important; }
.app-sidebar.sidebar-rail.collapsed .sidebar-group + .sidebar-group { margin-top: 8px; border-top: 1px solid var(--border-subtle) !important; padding-top: 8px !important; }
.brand-logo { font: 700 14px var(--font-display); }
.brand-mode-tag { font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 1px 5px; border-radius: 3px; background: var(--warn-soft, rgba(240,180,41,.14)); color: var(--warn); }
.app-sidebar .brand-ver { font: 500 10px var(--font-data); opacity: .7; }

.btn-sidebar-expand-header { background: transparent; border-color: var(--border-subtle); color: var(--text-2); }
.btn-sidebar-expand-header.collapsed-state { background: transparent; color: var(--text-2); border-color: var(--border-subtle); }

/* ----- Workspace: canvas & thanh phân khu ----- */
.workspace-body { padding: 20px 24px; }
.quant-subnav-bar { top: var(--header-h); }
.workspace-subnav-bar .ws-subnav-btn i { margin-right: 6px; opacity: .8; }
.cockpit-docked-inspector { top: calc(var(--header-h) + 8px); max-height: calc(100vh - var(--header-h) - 24px); }
.rd-docked-inspector { top: calc(var(--header-h) + 56px); }
.ws-subpane { position: relative; }
.ws-subpane.is-locked { min-height: 380px; overflow: hidden; }
.ws-subpane.is-locked > :not(.ws-lock) { pointer-events: none; user-select: none; }
.ws-lock { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding-top: 96px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(3px); }
.ws-lock-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 28px; text-align: center; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 8px; }
.ws-lock-card i { font-size: 22px; color: var(--warn); }
.ws-lock-card strong { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.ws-lock-card code { font: 600 11.5px var(--font-data); color: var(--text-2); }

/* ----- Control Center ----- */
.settings-card { background: var(--surface); }
.settings-card .popover-gdrive-card { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.settings-card .popover-gdrive-card strong { font-size: 13px !important; }
.cc-system-card { background: var(--card); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cc-system-card .sys-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.btn-secondary.btn-sm { padding: 4px 10px; font-size: 11px; }
.whatif-card { margin-top: 16px; }
.whatif-body { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; padding: 14px 16px 16px; }
.whatif-form { display: flex; flex-direction: column; gap: 12px; }
.whatif-field { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.whatif-field input[type="text"] { text-transform: none; letter-spacing: 0; font-size: 13px; padding: 7px 10px; }
.whatif-slider input[type="range"] { accent-color: var(--primary); width: 100%; }
.dna-popover { position: fixed; z-index: 10050; width: 320px; max-height: 280px; overflow: auto; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 8px; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.dna-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.dna-head button { border: 0; background: transparent; color: var(--text-2); font-size: 18px; cursor: pointer; }
.kill-alert { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; padding: 16px; background: rgba(120, 10, 20, .72); }
.kill-alert-card { max-width: 440px; text-align: center; padding: 28px; background: var(--surface); border: 1px solid var(--down); border-radius: 8px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.kill-alert-card i { font-size: 32px; color: var(--down); } .kill-alert-card h2 { margin: 0; font-size: 16px; letter-spacing: .1em; }
.footer-feed-chip { margin-left: 16px; font-size: 11px; color: var(--text-3); }
.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ----- Phản hồi nhẹ cho Inspector / RD ----- */
.cockpit-docked-inspector, .rd-docked-inspector { color: var(--text); }
.ci-chart-card canvas { border-radius: 4px; }
.rd-signal:hover, .rd-approvals-table tbody tr:hover { background: var(--card-hover); }
.rd-log-success time { color: var(--up); } .rd-log-warning time { color: var(--warn); } .rd-log-error time { color: var(--down); }

/* ----- Điện thoại / tablet cho phần mới ----- */
@media (max-width: 1100px) {
    .app-sidebar.sidebar-rail.collapsed { width: var(--rail-w) !important; }
    .app-sidebar.sidebar-rail.user-expanded { width: min(280px, 86vw) !important; }
    .app-sidebar.sidebar-rail.user-expanded .menu-item { flex-direction: row !important; width: auto !important; height: auto !important; padding: 8px 10px !important; margin: 0 !important; justify-content: flex-start !important; font-size: 12.5px !important; }
    .app-sidebar.sidebar-rail.user-expanded .menu-item > span:not(.badge-count) { display: inline !important; max-width: none !important; font-size: 12.5px; text-transform: none; letter-spacing: 0; text-align: left; flex: 1 1 auto !important; }
    .app-sidebar.sidebar-rail.user-expanded .sidebar-header { flex-direction: row !important; padding: 12px !important; }
    .app-sidebar.sidebar-rail.user-expanded .brand-info, .app-sidebar.sidebar-rail.user-expanded .group-title, .app-sidebar.sidebar-rail.user-expanded .badge-count { display: flex !important; }
    .whatif-body { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .workspace-body { padding: 10px !important; }
    .cockpit-split-layout { display: block; }
    .app-sidebar.sidebar-rail { width: min(300px, 86vw) !important; }
    .app-sidebar.sidebar-rail .menu-item { flex-direction: row !important; width: auto !important; height: auto !important; padding: 9px 12px !important; margin: 0 !important; justify-content: flex-start !important; }
    .app-sidebar.sidebar-rail .menu-item > span:not(.badge-count) { display: inline !important; max-width: none !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; text-align: left !important; flex: 1 1 auto !important; }
    .app-sidebar.sidebar-rail .brand-info, .app-sidebar.sidebar-rail .group-title { display: flex !important; }
    .app-sidebar.sidebar-rail .badge-count { display: inline-flex !important; }
    .app-sidebar.sidebar-rail .sidebar-header { flex-direction: row !important; padding: 12px !important; }
    .ws-lock { padding-top: 40px; }
}

/* ----- Header điện thoại: gọn lại để không tràn ngang ----- */
@media (max-width: 767px) {
    #portfolio-btn-active .drop-btn-badge, #btn-header-auth-status .tool-label, #btn-header-auth-status > span { display: none !important; }
    #btn-settings, #btn-header-mcp-status { display: none !important; }
    .top-header .header-system { gap: 4px; }
    #btn-header-kill { color: var(--down); }
}


/* ---------- Chỉ báo PAPER / LIVE: luôn thấy được ở mọi cỡ màn hình ---------- */
.trading-mode-badge { flex: 0 0 auto; white-space: nowrap; }
/* lớp "nút header trung tính" ở trên ghi đè màu của chip: đặt lại để PAPER = xanh, LIVE (tiền thật) = đỏ + nhấp nháy nhẹ (chế độ sáng giữ luật !important cũ trong style.css) */
.top-header #trading-mode-capsule .trading-mode-badge.mode-paper { background: rgba(16,185,129,.12); color: #10B981; border-color: rgba(16,185,129,.35); }
.top-header #trading-mode-capsule .trading-mode-badge.mode-live { background: rgba(239,68,68,.18); color: #EF4444; border-color: rgba(239,68,68,.55); animation: livePulse 2s infinite; }
@media (prefers-reduced-motion: reduce) { .top-header #trading-mode-capsule .trading-mode-badge.mode-live { animation: none; } }
@media (max-width: 1400px) {
    /* style.css cũ chỉ để lại chấm màu: thêm chữ PAPER / LIVE ngắn để không phải đoán màu */
    #trading-mode-capsule .trading-mode-badge::after { content: attr(data-mode); letter-spacing: .06em; font-size: 10px; }
    #trading-mode-capsule .trading-mode-badge { padding: 3px 8px; }
}
@media (max-width: 767px) {
    #trading-mode-capsule { display: flex !important; margin-right: 0; }
}
.brand-mode-tag.is-live { background: var(--down-soft, rgba(240,76,76,.16)); color: var(--down, #F04C4C); }

/* ---------- Công tắc Cơ bản / Nâng cao (radar) ---------- */
.mode-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; margin-left: 8px; vertical-align: middle; }
.mode-switch button { height: 26px; padding: 0 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: transparent; border: 0; cursor: pointer; }
.mode-switch button + button { border-left: 1px solid var(--border-strong); }
.mode-switch button.active { background: rgba(94,107,255,.18); color: #AEB5FF; }
body.theme-light .mode-switch button.active { background: rgba(94,107,255,.12); color: var(--primary); }
.mode-switch button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Huy hiệu trạng thái trong Inspector (#ci-pos-badge): lớp .badge-status-pill trước đây chưa có luật CSS ---------- */
.badge-status-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--card); border: 1px solid var(--border-strong); color: var(--text-2); }