:root {
      --bg: #08090f;
      --bg2: #0d0f1a;
      --bg3: #131625;
      --border: #1e2235;
      --accent: #00e5a0;
      --accent2: #0091ff;
      --accent3: #ff4d6b;
      --accent4: #ffc240;
      --text: #f2f3f9;
      --text2: #aab0cc;
      --text3: #7a82ab;
      --buy: #00e5a0;
      --sell: #ff4d6b;
      --hold: #ffc240;
      --mono: 'IBM Plex Mono', monospace;
      --sans: 'Be Vietnam Pro', sans-serif;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      min-height: 100vh;
      overflow-x: hidden
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: linear-gradient(rgba(0, 229, 160, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 160, .02) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 0
    }

    /* HEADER */
    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(8, 9, 15, .92);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      padding: 0 20px;
      display: flex;
      align-items: center;
      gap: 20px;
      height: 54px
    }

    .logo {
      font-family: var(--mono);
      font-weight: 600;
      font-size:15.5px;
      color: var(--accent);
      letter-spacing: .05em;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap
    }

    .logo-dot {
      width: 8px;
      height: 8px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse 2s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .4;
        transform: scale(.7)
      }
    }

    nav {
      display: flex;
      gap: 3px;
      flex: 1
    }

    nav button {
      background: none;
      border: none;
      color: var(--text2);
      font-family: var(--sans);
      font-size:13px;
      font-weight: 500;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all .15s
    }

    nav button:hover {
      background: var(--bg3);
      color: var(--text)
    }

    nav button.active {
      background: rgba(0, 229, 160, .12);
      color: var(--accent)
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto
    }

    .refresh-timer {
      font-family: var(--mono);
      font-size:12px;
      color: var(--text3);
      display: flex;
      align-items: center;
      gap: 6px
    }

    .countdown-ring {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      animation: spin 1s linear infinite;
      display: none
    }

    .countdown-ring.spinning {
      display: inline-block
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    select.interval-sel {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text3);
      font-size:11px;
      font-family: var(--mono);
      padding: 2px 5px;
      cursor: pointer;
      outline: none
    }

    .live-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: var(--mono);
      font-size:12px;
      color: var(--accent);
      background: rgba(0, 229, 160, .08);
      border: 1px solid rgba(0, 229, 160, .2);
      padding: 3px 8px;
      border-radius: 4px;
      transition: color .3s, background .3s, border-color .3s
    }

    .live-badge span {
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse 1.5s infinite;
      transition: background .3s
    }

    .live-badge.closed {
      color: var(--text3);
      background: rgba(74, 80, 112, .08);
      border-color: rgba(74, 80, 112, .2)
    }

    .live-badge.closed span {
      background: var(--text3);
      animation: none
    }

    #refresh-btn {
      background: rgba(0, 145, 255, .1);
      border: 1px solid rgba(0, 145, 255, .3);
      color: var(--accent2);
      font-family: var(--sans);
      font-size:13px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: 5px;
      cursor: pointer;
      transition: all .2s
    }

    #refresh-btn:hover {
      background: rgba(0, 145, 255, .2)
    }

    #refresh-btn.loading {
      opacity: .6;
      pointer-events: none
    }

    .last-update {
      font-family: var(--mono);
      font-size:11px;
      color: var(--text3)
    }

    .lang-switcher {
      display: flex;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 2px;
      margin-left: 12px;
    }

    .lang-btn {
      padding: 4px 8px;
      font-size:11px;
      font-weight: 600;
      color: var(--text3);
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.2s;
    }

    .lang-btn.active {
      background: var(--accent);
      color: var(--bg);
    }

    .lang-btn:hover:not(.active) {
      color: var(--text);
      background: rgba(255, 255, 255, 0.05);
    }


    /* MAIN */
    main {
      position: relative;
      z-index: 1;
      max-width: 1600px;
      margin: 0 auto;
      padding: 20px
    }

    .view {
      display: none
    }

    .view.active {
      display: block
    }

    /* KPI */
    .kpi-grid {
      display: grid;
      /* 6 cot (bo the Upside 29/08/2026 theo yeu cau user): man rong 1 hang 6 o;
         <=1200px xuong 3 cot = 2 hang deu; <=768px 2 cot = 3 hang deu.
         Neu sau nay them the thi chinh so cot cho khop keo le hang. */
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
      margin-bottom: 20px
    }

    .kpi {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      position: relative;
      overflow: hidden;
      transition: border-color .2s
    }

    .kpi:hover {
      border-color: var(--accent)
    }

    .kpi::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      opacity: .6
    }

    .kpi-label {
      font-size:11px;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 6px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .kpi-value {
      font-family: var(--mono);
      font-size:24px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.02em
    }

    .kpi-sub {
      font-size:11px;
      color: var(--text3);
      margin-top: 3px;
      font-family: var(--mono);
      white-space: nowrap
    }

    .kpi-up {
      color: var(--buy) !important
    }

    .kpi-dn {
      color: var(--sell) !important
    }

    /* GRID */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px
    }

    .three-col {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px
    }

    .full-col {
      margin-bottom: 14px
    }

    /* CARD */
    .card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border)
    }

    .card-title {
      font-size:13px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: .02em
    }

    .card-badge {
      font-family: var(--mono);
      font-size:11px;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(0, 229, 160, .1);
      color: var(--accent);
      border: 1px solid rgba(0, 229, 160, .2)
    }

    .card-body {
      padding: 16px
    }

    .chart-wrap {
      padding: 10px 14px 14px;
      position: relative
    }

    /* TABLE */
    .table-wrap {
      overflow-x: auto;
      overflow-y: auto;
      max-height: calc(100vh - 215px)
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size:13px
    }

    thead th {
      text-align: left;
      padding: 9px 10px;
      color: var(--text2);
      font-size:11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      transition: color .15s;
      position: sticky;
      top: 0;
      background: var(--bg2);
      z-index: 3
    }

    /* Freeze AVG row (first tbody row) */
    #portfolio-table tbody tr:first-child td {
      position: sticky;
      top: 36px;
      background: #0c1d17;
      z-index: 2
    }

    /* Freeze MEDIAN row (second tbody row) */
    #portfolio-table tbody tr:nth-child(2) td {
      position: sticky;
      top: 72px;
      background: #0c1629;
      z-index: 2
    }

    thead th:hover {
      color: var(--accent)
    }

    thead th.sort-asc::after {
      content: ' ↑';
      color: var(--accent)
    }

    thead th.sort-desc::after {
      content: ' ↓';
      color: var(--accent)
    }

    tbody tr {
      border-bottom: 1px solid rgba(30, 34, 53, .5);
      transition: background .1s
    }

    tbody tr:hover {
      background: rgba(0, 229, 160, .03)
    }

    tbody tr.selected {
      background: rgba(0, 229, 160, .06) !important
    }

    tbody td {
      padding: 8px 10px;
      color: var(--text);
      white-space: nowrap
    }

    td.ticker-cell {
      font-family: var(--mono);
      font-weight: 600;
      font-size:13px;
      color: var(--accent2)
    }

    td.num {
      font-family: var(--mono);
      font-size:12px;
      text-align: right
    }

    td.positive {
      color: var(--buy);
      font-family: var(--mono);
      font-size:12px;
      text-align: right
    }

    td.negative {
      color: var(--sell);
      font-family: var(--mono);
      font-size:12px;
      text-align: right
    }

    td.neutral {
      color: var(--hold);
      font-family: var(--mono);
      font-size:12px;
      text-align: right
    }

    .badge {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 4px;
      font-size:11px;
      font-weight: 600;
      font-family: var(--mono);
      letter-spacing: .04em
    }

    .badge-buy {
      background: rgba(0, 229, 160, .12);
      color: var(--buy);
      border: 1px solid rgba(0, 229, 160, .25)
    }

    .badge-sell {
      background: rgba(255, 77, 107, .12);
      color: var(--sell);
      border: 1px solid rgba(255, 77, 107, .25)
    }

    .badge-hold {
      background: rgba(255, 194, 64, .12);
      color: var(--hold);
      border: 1px solid rgba(255, 194, 64, .25)
    }

    .pf-weight-cell {
      cursor: pointer;
    }

    .pf-weight-cell:hover {
      background: rgba(0, 229, 160, .06);
      border-radius: 4px;
    }

    .pf-weight-input {
      width: 52px;
      background: var(--bg3);
      border: 1px solid var(--accent);
      color: var(--text);
      border-radius: 4px;
      padding: 1px 4px;
      font-size:13px;
      font-family: var(--mono);
      text-align: right;
    }

    .pf-remove-btn {
      background: none;
      border: none;
      color: var(--text3);
      cursor: pointer;
      font-size:14.5px;
      padding: 0 2px;
      line-height: 1;
      vertical-align: middle;
    }

    .pf-remove-btn:hover {
      color: var(--accent3);
    }

    #pf-add-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0, 0, 0, .65);
      align-items: center;
      justify-content: center;
    }

    #pf-add-modal.open {
      display: flex;
    }

    #pf-modal-box {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 24px;
      width: 300px;
      max-width: 90vw;
    }

    #pf-weight-total-badge {
      font-size:12px;
      color: var(--text2);
      margin-left: 8px;
    }

    .sector-chip {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 4px;
      font-size:11px;
      font-weight: 500;
      background: var(--bg3);
      color: var(--text2);
      border: 1px solid var(--border)
    }

    .analyst-tag {
      display: inline-block;
      font-size:10px;
      padding: 1px 6px;
      border-radius: 3px;
      font-weight: 600;
      font-family: var(--mono);
      letter-spacing: .04em;
      background: var(--bg3);
      color: var(--text3);
      border: 1px solid var(--border)
    }

    /* CONTROLS */
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      align-items: center
    }

    .search-box {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 7px 12px;
      font-family: var(--mono);
      font-size:13px;
      color: var(--text);
      width: 190px;
      outline: none;
      transition: border-color .2s
    }

    .search-box:focus {
      border-color: var(--accent)
    }

    .search-box::placeholder {
      color: var(--text3)
    }

    select.filter {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 7px 10px;
      font-family: var(--sans);
      font-size:12px;
      color: var(--text);
      outline: none;
      cursor: pointer;
      transition: border-color .2s
    }

    select.filter:focus {
      border-color: var(--accent)
    }

    select.filter option {
      background: var(--bg2)
    }

    /* DETAIL PANEL */
    .detail-panel {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 14px;
      display: none
    }

    .detail-panel.active {
      display: block
    }

    .detail-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 18px 22px 14px;
      border-bottom: 1px solid var(--border)
    }

    .detail-ticker {
      font-family: var(--mono);
      font-size:28.5px;
      font-weight: 600;
      color: var(--accent2)
    }

    .detail-price {
      font-family: var(--mono);
      font-size:24px;
      font-weight: 600;
      color: var(--text)
    }

    .detail-change {
      font-family: var(--mono);
      font-size:14.5px
    }

    .detail-metrics {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0;
      border-bottom: 1px solid var(--border)
    }

    .metric-item {
      padding: 12px 18px;
      border-right: 1px solid var(--border)
    }

    .metric-item:last-child {
      border-right: none
    }

    .metric-label {
      font-size:10px;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 3px;
      font-weight: 600
    }

    .metric-value {
      font-family: var(--mono);
      font-size:16.5px;
      font-weight: 600;
      color: var(--text)
    }

    .detail-charts {
      display: grid;
      grid-template-columns: 1fr 1fr
    }

    .detail-chart-section {
      padding: 14px 18px;
      border-right: 1px solid var(--border)
    }

    .detail-chart-section:last-child {
      border-right: none
    }

    .detail-chart-title {
      font-size:11px;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 10px;
      font-weight: 600
    }

    .close-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--text2);
      width: 26px;
      height: 26px;
      border-radius: 6px;
      cursor: pointer;
      font-size:15.5px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      flex-shrink: 0
    }

    .close-btn:hover {
      border-color: var(--sell);
      color: var(--sell)
    }

    /* HEATMAP */
    .heatmap {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 14px
    }

    .heat-item {
      border-radius: 7px;
      padding: 9px 12px;
      cursor: pointer;
      transition: all .2s;
      border: 1px solid transparent;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 85px
    }

    .heat-item:hover {
      transform: scale(1.04);
      border-color: rgba(255, 255, 255, .2)
    }

    .heat-ticker {
      font-family: var(--mono);
      font-weight: 600;
      font-size:13px
    }

    .heat-val {
      font-family: var(--mono);
      font-size:11px;
      opacity: .85
    }

    /* API STATUS */
    .api-status {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 7px 10px;
      border-radius: 6px;
      font-size:13px;
      margin-bottom: 10px
    }

    .api-status.ok {
      background: rgba(0, 229, 160, .06);
      border: 1px solid rgba(0, 229, 160, .15);
      color: var(--accent)
    }

    .api-status.err {
      background: rgba(255, 77, 107, .06);
      border: 1px solid rgba(255, 77, 107, .15);
      color: var(--sell)
    }

    .api-status.loading {
      background: rgba(255, 194, 64, .06);
      border: 1px solid rgba(255, 194, 64, .15);
      color: var(--hold)
    }

    /* SPINNER */
    .spinner {
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .7s linear infinite
    }

    /* SCROLLBAR */
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px
    }

    ::-webkit-scrollbar-track {
      background: var(--bg)
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px
    }

    /* RESPONSIVE */
    @media(max-width:1200px) {
      .kpi-grid {
        grid-template-columns: repeat(3, 1fr)
      }

      .detail-metrics {
        grid-template-columns: repeat(3, 1fr)
      }

      .detail-charts {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:768px) {

      .two-col,
      .three-col {
        grid-template-columns: 1fr
      }

      .kpi-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    /* ═══════════════════════════════════
   CHART VIEW (Tab: Biểu Đồ)
═══════════════════════════════════ */
    .chart-layout {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 12px;
      margin-bottom: 14px
    }

    .chart-sidebar {
      width: 260px;
      display: flex;
      flex-direction: column;
      gap: 5mm;
      padding: 0;
      background: transparent;
      border: none;
      height: 100%;
      flex-shrink: 0
    }

    .watchlist-mini-wrap,
    .alert-mini-wrap {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column
    }

    .chart-sidebar-hdr {
      background: var(--bg3);
      padding: 8px 12px;
      font-size:11px;
      font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .08em;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .csitem {
      padding: 6px 12px;
      border-bottom: 1px solid rgba(30, 34, 53, .15);
      cursor: pointer;
      transition: all .1s;
      display: grid;
      grid-template-columns: 70px 1fr 65px;
      align-items: center;
      gap: 8px;
    }

    .csitem:hover {
      background: rgba(0, 229, 160, .06)
    }

    .csitem.active {
      background: rgba(0, 229, 160, .12);
      border-left: 3px solid var(--accent);
      box-shadow: inset 4px 0 10px rgba(0, 229, 160, .05)
    }

    .cs-header {
      display: grid;
      grid-template-columns: 70px 1fr 65px;
      gap: 8px;
      padding: 6px 12px;
      font-size:10px;
      font-weight: 700;
      color: var(--text3);
      text-transform: uppercase;
      border-bottom: 1px solid var(--border);
      background: var(--bg3);
    }

    .csitem-tick {
      font-family: var(--mono);
      font-size:12px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    /* Indicator style modal — color pickers grid */
    .ind-style-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px 14px;
      align-items: center;
    }
    .ind-style-grid label {
      font-size:13px;
      color: var(--text);
      font-family: var(--mono);
    }
    .ind-style-grid input[type="color"] {
      width: 38px;
      height: 26px;
      padding: 0;
      border: 1px solid var(--border);
      background: var(--bg3);
      border-radius: 4px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
    }
    .ind-style-grid input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
    .ind-style-grid input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }
    .ind-style-grid input[type="number"] {
      width: 72px;
      height: 26px;
      padding: 0 8px;
      border: 1px solid var(--border);
      background: var(--bg3);
      color: var(--text);
      border-radius: 4px;
      font-size:12px;
      font-family: var(--mono);
      text-align: right;
      outline: none;
    }
    .ind-style-grid input[type="number"]:focus {
      border-color: rgba(0, 229, 160, 0.4);
    }
    .ind-style-hdr {
      font-size:11px;
      color: var(--text2);
      letter-spacing: 0.08em;
      margin: 14px 0 8px;
      text-transform: uppercase;
    }
    .ind-style-hdr:first-child { margin-top: 0; }
    .indtab {
      background: transparent;
      border: none;
      color: var(--text2);
      padding: 10px 14px;
      font-size:13px;
      font-family: var(--mono);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
    }
    .indtab.indtab-active {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }
    .indtab:hover:not(.indtab-active) { color: var(--text); }

    /* Ticker search autocomplete dropdown */
    .ticker-search-wrap input::placeholder { color: var(--text3); }
    .ticker-search-wrap input:focus {
      border-color: rgba(0, 229, 160, 0.4);
      box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.08);
    }
    .ticker-search-dd {
      position: absolute;
      top: 100%;
      left: 8px;
      right: 8px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 5px;
      max-height: 400px;   /* bumped 260→400 2026-05-28 — fits ~6 sector groups */
      overflow-y: auto;
      z-index: 100;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
      margin-top: 2px;
    }
    .ticker-search-dd .tsd-item {
      padding: 7px 10px;
      display: grid;
      grid-template-columns: 56px 1fr 70px;
      gap: 8px;
      align-items: center;
      font-size:12px;
      cursor: pointer;
      border-bottom: 1px solid rgba(30, 34, 53, 0.5);
    }
    .ticker-search-dd .tsd-item:last-child { border-bottom: none; }
    .ticker-search-dd .tsd-item:hover,
    .ticker-search-dd .tsd-item.tsd-active { background: var(--bg3); }
    .ticker-search-dd .tsd-tick {
      font-family: var(--mono);
      font-weight: 700;
      color: var(--accent);
    }
    .ticker-search-dd .tsd-name {
      color: var(--text2);
      font-size:11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ticker-search-dd .tsd-exch {
      font-family: var(--mono);
      font-size:11px;
      color: var(--text3);
      text-align: right;
    }
    .ticker-search-dd .tsd-empty {
      padding: 10px;
      text-align: center;
      color: var(--text3);
      font-size:12px;
      font-style: italic;
    }

    /* MQTT live tick indicator next to each watchlist ticker */
    .csitem-live {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 4px rgba(0, 229, 160, 0.6);
      animation: csitem-live-pulse 1.6s ease-in-out infinite;
      flex-shrink: 0;
    }
    .csitem-live.csitem-live-off {
      background: var(--text3);
      box-shadow: none;
      animation: none;
    }
    @keyframes csitem-live-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .55; transform: scale(1.25); }
    }

    .csitem-price {
      font-family: var(--mono);
      font-size:12px;
      text-align: right;
      color: var(--text);
      font-weight: 500
    }

    .csitem-chg {
      font-family: var(--mono);
      font-size:12px;
      text-align: right;
      font-weight: 600;
    }

    .chart-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    /* Toolbar */
    .chart-toolbar {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      flex-wrap: wrap;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .15)
    }

    .ctick {
      font-family: var(--mono);
      font-size:13px;
      color: var(--accent);
      background: rgba(0, 229, 160, .1);
      padding: 1px 6px;
      border-radius: 4px;
      border: 1px solid rgba(0, 229, 160, .2)
    }

    .cprice {
      font-family: var(--mono);
      font-size:22px;
      font-weight: 600;
      color: var(--text)
    }

    .cchg {
      font-family: var(--mono);
      font-size:15.5px;
      padding: 3px 10px;
      border-radius: 6px;
      font-weight: 600
    }

    .cchg-up {
      background: rgba(0, 229, 160, .15);
      color: var(--buy);
      border: 1px solid rgba(0, 229, 160, .2)
    }

    .cchg-dn {
      background: rgba(255, 77, 107, .15);
      color: var(--sell);
      border: 1px solid rgba(255, 77, 107, .2)
    }

    .sep {
      width: 1px;
      height: 24px;
      background: var(--border);
      margin: 0 5px;
      flex-shrink: 0
    }

    .tf-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--text2);
      font-family: var(--mono);
      font-size:13px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all .15s;
      font-weight: 500
    }

    .tf-btn:hover,
    .tf-btn.active {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(0, 229, 160, .12)
    }

    .tl-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--text2);
      font-family: var(--mono);
      font-size:13px;
      padding: 5px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: all .15s;
      font-weight: 500
    }
    .tl-btn:hover, .tl-btn.active {
      border-color: rgba(0,145,255,.6);
      color: var(--accent2);
      background: rgba(0,145,255,.1)
    }

    #tf-picker-panel {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 600;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      min-width: 210px;
      box-shadow: 0 8px 32px rgba(0,0,0,.5);
      padding: 6px 0 10px;
      user-select: none
    }
    .tf-group-hdr {
      font-family: var(--mono);
      font-size:11px;
      color: var(--text3);
      letter-spacing: .1em;
      padding: 10px 14px 5px;
      text-transform: uppercase
    }
    .tf-group-row {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 0 10px 2px
    }
    .tf-item {
      background: none;
      border: 1px solid var(--border);
      color: var(--text2);
      font-family: var(--mono);
      font-size:13px;
      padding: 4px 0;
      border-radius: 5px;
      cursor: pointer;
      transition: all .15s;
      min-width: 40px;
      text-align: center
    }
    .tf-item:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(0,229,160,.08)
    }
    .tf-item.active {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(0,229,160,.15);
      font-weight: 600
    }

    .chart-type-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--text2);
      padding: 5px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
    }

    .chart-type-btn:hover,
    .chart-type-btn.active {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(0, 229, 160, .12)
    }

    .ind-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--text2);
      font-family: var(--sans);
      font-size:13px;
      font-weight: 600;
      padding: 5px 14px;
      border-radius: 6px;
      cursor: pointer;
      transition: all .15s
    }

    .ind-btn.ind-on {
      background: rgba(0, 145, 255, .15);
      border-color: var(--accent2);
      color: var(--accent2);
      box-shadow: 0 0 10px rgba(0, 145, 255, .1)
    }

    .ind-btn:hover:not(.ind-on) {
      border-color: var(--text2);
      color: var(--text)
    }

    .alert-open-btn {
      background: rgba(255, 194, 64, .1);
      border: 1px solid rgba(255, 194, 64, .3);
      color: var(--hold);
      font-family: var(--sans);
      font-size:12px;
      font-weight: 600;
      padding: 5px 13px;
      border-radius: 5px;
      cursor: pointer;
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all .15s;
      flex-shrink: 0
    }

    .alert-open-btn:hover {
      background: rgba(255, 194, 64, .2)
    }

    .alert-cnt {
      background: var(--sell);
      color: #fff;
      font-size:10px;
      font-family: var(--mono);
      padding: 1px 5px;
      border-radius: 8px;
      min-width: 15px;
      text-align: center;
      display: none
    }

    /* Individual chart cards — KEY FIX: use explicit pixel height on wrapper div */
    .cc {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .2)
    }

    .cc-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 14px;
      border-bottom: 1px solid var(--border);
      background: rgba(19, 22, 37, .7);
      backdrop-filter: blur(5px)
    }

    .cc-label {
      font-family: var(--mono);
      font-size:12px;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .1em;
      font-weight: 600
    }

    .cc-val {
      font-family: var(--mono);
      font-size:14.5px;
      color: var(--text);
      font-weight: 600
    }

    .cc-body {
      padding: 8px;
      box-sizing: border-box;
      background: var(--bg2)
    }

    .cc-body canvas {
      display: block;
      width: 100% !important
    }

    .kn-md-head {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px
    }

    .kn-md-title {
      font-size:18px;
      font-weight: 700
    }

    .kn-md-meta {
      font-size:12px;
      color: var(--text2)
    }

    .kn-md-actions {
      margin-left: auto;
      display: flex;
      gap: 8px
    }

    .kn-md-btn {
      border: 1px solid var(--border);
      border-radius: 5px;
      cursor: pointer;
      font-size:12px;
      padding: 4px 10px
    }

    .kn-md-layout {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .kn-md-section-title {
      font-size:13px;
      font-weight: 700;
      margin: 0 0 8px
    }

    .kn-md-reader {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 18px;
      max-height: 620px;
      min-height: 500px;
      overflow: auto;
      font-size:13px;
      line-height:1.62
    }

    .kn-md-side {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .kn-md-chart-grid,
    .kn-md-evidence-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px
    }

    .kn-md-chart-sections {
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .kn-md-chart-band-title {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      font-size: 12px;
      font-weight: 800;
      margin: 0 0 8px
    }

    .kn-md-chart-band-title::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent2);
      box-shadow: 0 0 12px rgba(0, 145, 255, .45)
    }

    .kn-md-chart-card,
    .kn-md-evidence-card {
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px;
      background: var(--bg2);
      min-width: 0;
      min-height: 214px
    }

    .kn-md-chart-card.kn-md-chart-wide {
      grid-column: span 1
    }

    .kn-md-evidence-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .kn-md-chart-title {
      font-size:12px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .kn-md-chart-meta {
      font-size:11px;
      color: var(--text2);
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .kn-md-chart-plot {
      position: relative;
      height: 156px;
      min-height: 156px
    }

    .kn-md-chart-plot canvas {
      display: block;
      width: 100% !important;
      height: 156px !important
    }

    .kn-md-no-data {
      min-height: 150px;
      display: flex;
      align-items: center;
      color: var(--text2);
      font-size:12px
    }

    .kn-neuron-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: 12px;
      align-items: stretch
    }

    .kn-neuron-main {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: radial-gradient(circle at 50% 45%, rgba(88,166,255,.10), transparent 42%), var(--bg2);
      overflow: hidden
    }

    .kn-neuron-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 10px;
      border-bottom: 1px solid var(--border);
      background: rgba(13, 17, 23, .38)
    }

    .kn-neuron-input,
    .kn-neuron-select {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 5px;
      color: var(--text);
      font-family: var(--mono);
      font-size:12px;
      height: 28px;
      padding: 0 8px
    }

    .kn-neuron-filter {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 28px;
      padding: 0 8px;
      border: 1px solid var(--border);
      border-radius: 14px;
      color: var(--text2);
      font-size:11px;
      cursor: pointer;
      user-select: none
    }

    .kn-neuron-filter input {
      accent-color: var(--accent2)
    }

    .kn-neuron-stage {
      position: relative;
      /* Bố cục đồng tâm dùng viewBox vuông + letterbox => đường kính vòng tròn trên
         màn hình = chiều CAO stage. Kéo cao hơn để vòng to, dễ đọc nhãn. */
      height: 780px;
      min-height: 460px
    }

    .kn-neuron-svg {
      display: block;
      width: 100%;
      height: 100%;
      cursor: grab
    }

    /* Khung chọn vùng (Shift + kéo nền) */
    .kn-band {
      fill: rgba(88, 166, 255, .12);
      stroke: #58a6ff;
      stroke-width: 1.2;
      stroke-dasharray: 4 3;
      pointer-events: none
    }

    /* Node đang được chọn -> viền trắng, kéo 1 cái là cả cụm đi theo */
    .kn-neuron-node.kn-sel circle:not([fill="none"]) {
      stroke: #fff;
      stroke-width: 2.2
    }

    #kn-sel-count {
      color: #58a6ff;
      font-size: 11px;
      font-style: italic
    }

    /* Thanh lọc theo tag (luận điểm / rủi ro chung) */
    .kn-tagbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
      padding: 6px 8px 2px
    }

    .kn-tag-lbl {
      color: var(--text2);
      font-size: 10.5px;
      font-weight: 600;
      margin: 0 4px 0 8px;
      text-transform: uppercase
    }

    .kn-tag-lbl:first-child {
      margin-left: 0
    }

    .kn-tag {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 11px;
      color: var(--text2);
      cursor: pointer;
      font-size: 10.5px;
      padding: 2px 8px
    }

    .kn-tag b {
      opacity: .6;
      margin-left: 3px
    }

    .kn-tag:hover {
      border-color: #58a6ff;
      color: #58a6ff
    }

    .kn-tag.risk:hover {
      border-color: #f85149;
      color: #f85149
    }

    .kn-tag.on {
      background: #58a6ff;
      border-color: #58a6ff;
      color: #fff
    }

    .kn-tag.risk.on {
      background: #f85149;
      border-color: #f85149;
      color: #fff
    }

    .kn-tag.clear {
      border-style: dashed
    }

    /* Backlinks trong panel inspector: chip bấm được để nhảy sang node liên quan */
    .kn-blinks {
      display: flex;
      flex-wrap: wrap;
      gap: 4px
    }

    .kn-blink {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text2);
      cursor: pointer;
      font-size: 10.5px;
      padding: 2px 7px;
      text-align: left
    }

    .kn-blink:hover {
      background: var(--accent2);
      border-color: var(--accent2);
      color: #fff
    }

    .kn-neuron-edge {
      stroke: rgba(139,148,158,.34);
      stroke-width: 1.2;
      cursor: pointer
    }

    .kn-neuron-edge:hover {
      stroke: rgba(88,166,255,.85);
      stroke-width: 2.2
    }

    .kn-neuron-node {
      cursor: pointer
    }

    .kn-neuron-node circle {
      stroke: rgba(255,255,255,.18);
      stroke-width: 1.1
    }

    .kn-neuron-node:hover circle {
      stroke: rgba(255,255,255,.72);
      stroke-width: 1.8
    }

    .kn-neuron-node text {
      pointer-events: none;
      fill: var(--text);
      font-size:10px;
      font-family: var(--mono);
      text-anchor: middle
    }

    .kn-neuron-node text.kn-label-hidden {
      display: none
    }

    .kn-neuron-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px 10px;
      border-top: 1px solid var(--border);
      color: var(--text2);
      font-size:11px
    }

    .kn-neuron-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 4px
    }

    .kn-neuron-inspector {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg2);
      padding: 12px;
      min-width: 0;
      max-height: 620px;
      overflow: auto
    }

    .kn-neuron-inspector-title {
      font-size:14px;
      font-weight: 700;
      margin-bottom: 6px
    }

    .kn-neuron-inspector-row {
      border-top: 1px solid var(--border2);
      padding: 7px 0;
      font-size:12px
    }

    .kn-neuron-inspector-row b {
      display: block;
      color: var(--text2);
      font-weight: 600;
      margin-bottom: 3px
    }

    .kn-neuron-inspector code {
      white-space: normal;
      word-break: break-all
    }

    @media(max-width:1600px) {
      .kn-md-chart-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }
    }

    @media(max-width:1300px) {
      .kn-md-chart-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .kn-md-evidence-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    @media(max-width:760px) {
      .kn-md-actions {
        width: 100%;
        margin-left: 0
      }

      .kn-md-chart-grid,
      .kn-md-evidence-grid {
        grid-template-columns: 1fr
      }

      .kn-md-chart-card.kn-md-chart-wide {
        grid-column: span 1
      }

      .kn-neuron-shell {
        grid-template-columns: 1fr
      }

      .kn-neuron-stage {
        height: 520px
      }
    }

    /* Alert panel */
    .alert-panel {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden
    }

    .alert-panel .card-header {
      padding: 10px 14px
    }

    .alert-list-wrap {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 220px;
      overflow-y: auto
    }

    .ali {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 11px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 7px
    }

    .ali-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .ali.on .ali-dot {
      background: var(--buy);
      animation: pulse 1.5s infinite
    }

    .ali.off .ali-dot {
      background: var(--text3)
    }

    .ali-sym {
      font-family: var(--mono);
      font-weight: 600;
      color: var(--accent2);
      font-size:12px;
      min-width: 36px
    }

    .ali-desc {
      flex: 1;
      color: var(--text2);
      font-size:12px
    }

    .ali-price {
      font-family: var(--mono);
      font-size:12px;
      font-weight: 600;
      color: var(--hold);
      white-space: nowrap
    }

    .ali-tg {
      font-size:13px;
      opacity: .45;
      cursor: default;
    }

    .ali-tg.on {
      opacity: 1;
      color: var(--accent2)
    }

    .ali-tog {
      background: none;
      border: 1px solid var(--border);
      color: var(--text3);
      cursor: pointer;
      font-size:10px;
      font-family: var(--mono);
      padding: 2px 7px;
      border-radius: 4px;
      white-space: nowrap
    }

    .ali-tog:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

    .ali-del {
      background: none;
      border: none;
      color: var(--text3);
      cursor: pointer;
      font-size:14.5px;
      padding: 1px 4px;
      border-radius: 4px
    }

    .ali-del:hover {
      color: var(--sell);
      background: rgba(255, 77, 107, .1)
    }

    /* ═══════════════════
   ALERT MODAL
═══════════════════ */
    .modal-bg {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .78);
      backdrop-filter: blur(6px);
      z-index: 1000;
      align-items: center;
      justify-content: center
    }

    .modal-bg.open {
      display: flex
    }

    .modal {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 520px;
      max-width: 96vw;
      max-height: 92vh;
      overflow-y: auto;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
      animation: minIn .2s ease
    }

    @keyframes minIn {
      from {
        transform: scale(.93) translateY(12px);
        opacity: 0
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    .mhdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--bg3);
      position: sticky;
      top: 0;
      z-index: 2
    }

    .mtitle {
      font-size:15.5px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .mtick-badge {
      font-family: var(--mono);
      font-size:13px;
      color: var(--accent2);
      background: rgba(0, 145, 255, .1);
      border: 1px solid rgba(0, 145, 255, .2);
      padding: 2px 9px;
      border-radius: 5px
    }

    .mbody {
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 13px
    }

    .fg {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .fl {
      font-size:11px;
      color: var(--text2);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em
    }

    .frow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px
    }

    .fsel,
    .finp {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 9px 11px;
      font-family: var(--mono);
      font-size:13px;
      color: var(--text);
      outline: none;
      transition: border-color .2s;
      width: 100%
    }

    .fsel:focus,
    .finp:focus {
      border-color: var(--accent)
    }

    .fsel option {
      background: var(--bg2)
    }

    .sstab-btn {
      padding: 5px 12px; font-size:12px; border-radius: 5px;
      border: 1px solid var(--border); background: transparent;
      color: var(--text2); cursor: pointer; transition: all .15s;
    }
    .sstab-btn:hover { color: var(--text); border-color: var(--accent2); }
    .active-sstab { background: rgba(0,145,255,.15); color: var(--accent2); border-color: var(--accent2); }
    .srange-btn {
      padding: 3px 8px; font-size:11px; border-radius: 4px; font-family: var(--mono);
      border: 1px solid var(--border); background: transparent;
      color: var(--text3); cursor: pointer; transition: all .15s;
    }
    .srange-btn:hover { color: var(--text); border-color: var(--border); }
    .srange-active { background: rgba(0,229,160,.12); color: var(--accent); border-color: rgba(0,229,160,.4); }

    .fin-stmt-table { width: 100%; border-collapse: collapse; font-size:13px; }
    .fin-stmt-table th { font-size:11px; color: var(--text2); font-weight: 500;
      padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
    .fin-stmt-table th:first-child { text-align: left; position: sticky; left: 0; background: var(--bg2); z-index: 4; border-right: 1px solid var(--border); }
    .fin-stmt-table td { padding: 5px 8px; border-bottom: 1px solid rgba(30,34,53,.5);
      font-family: var(--mono); font-size:12px; text-align: right; white-space: nowrap; }
    .fin-stmt-table td:first-child { text-align: left; font-family: 'Be Vietnam Pro', sans-serif; color: var(--text); }
    .fin-stmt-table td:first-child:not([colspan]) { position: sticky; left: 0; background: var(--bg2); z-index: 1; border-right: 1px solid var(--border); }
    .fin-stmt-table tr:hover td { background: var(--bg3); }
    .fin-stmt-table tr:hover td:first-child:not([colspan]) { background: var(--bg3); }
    .fin-stmt-table .row-indent { padding-left: 20px; color: var(--text2); font-size:12px; }
    .fin-stmt-table .row-derived { font-style: italic; color: var(--text2); }
    .fin-stmt-table .yoy-pos { color: var(--accent); font-size:11px; }
    .fin-stmt-table .yoy-neg { color: var(--accent3); font-size:11px; }
    .fin-stmt-table .val-null { color: var(--text3); }
    .heat-good { background: rgba(0,229,160,.12); }
    .heat-ok   { background: rgba(255,194,64,.10); }
    .heat-bad  { background: rgba(255,77,107,.12); }

    .yoy-sub { font-size:11px; padding:2px 8px; border-bottom:1px solid rgba(30,34,53,.7); font-family:var(--mono); }
    .ts-section-hdr { padding:10px 8px 4px; font-size:11px; font-weight:600; letter-spacing:.08em; text-align:left !important; font-family:'Be Vietnam Pro',sans-serif; }
    .stmt-section-hdr {
      font-size:11px; font-weight: 600; letter-spacing: .08em;
      color: var(--accent2); border-left: 3px solid var(--accent2);
      padding: 2px 0 2px 8px; margin-bottom: 10px;
    }

    .conds {
      display: flex;
      gap: 5px;
      flex-wrap: wrap
    }

    .cb {
      padding: 5px 11px;
      border-radius: 6px;
      border: 1px solid var(--border);
      font-size:12px;
      font-family: var(--mono);
      cursor: pointer;
      color: var(--text2);
      background: var(--bg3);
      transition: all .12s;
      user-select: none
    }

    .cb:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

    .cb.active {
      background: rgba(0, 229, 160, .12);
      border-color: var(--accent);
      color: var(--accent)
    }

    /* Telegram section in modal */
    .tg-box {
      background: rgba(0, 145, 255, .04);
      border: 1px solid rgba(0, 145, 255, .15);
      border-radius: 9px;
      padding: 13px
    }

    .tg-title {
      font-size:12px;
      font-weight: 600;
      color: var(--accent2);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .tg-check-row {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 10px
    }

    .tg-check-row input[type=checkbox] {
      accent-color: var(--accent2);
      width: 14px;
      height: 14px;
      cursor: pointer
    }

    .tg-check-row label {
      font-size:13px;
      color: var(--text2);
      cursor: pointer
    }

    .preview-box {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 10px 12px;
      font-size:12px;
      color: var(--text2);
      font-family: var(--mono);
      line-height: 1.6
    }

    .mfoot {
      display: flex;
      gap: 9px;
      padding: 13px 18px;
      border-top: 1px solid var(--border);
      background: var(--bg3);
      justify-content: flex-end;
      position: sticky;
      bottom: 0;
      z-index: 2
    }

    .btn-cancel {
      background: none;
      border: 1px solid var(--border);
      color: var(--text2);
      font-family: var(--sans);
      font-size:14.5px;
      font-weight: 500;
      padding: 7px 17px;
      border-radius: 8px;
      cursor: pointer;
      transition: all .15s
    }

    .btn-cancel:hover {
      border-color: var(--sell);
      color: var(--sell)
    }

    .btn-create {
      background: var(--accent);
      border: none;
      color: #000;
      font-family: var(--sans);
      font-size:14.5px;
      font-weight: 700;
      padding: 7px 22px;
      border-radius: 8px;
      cursor: pointer;
      transition: all .15s
    }

    .btn-create:hover {
      background: #00ffb0
    }

    /* TOAST */
    .toast {
      position: fixed;
      top: 65px;
      right: 16px;
      z-index: 9999;
      background: var(--bg3);
      border: 1px solid var(--hold);
      border-radius: 10px;
      padding: 12px 15px;
      min-width: 280px;
      max-width: 380px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
      display: none
    }

    .toast.show {
      display: block;
      animation: tIn .3s ease
    }

    @keyframes tIn {
      from {
        transform: translateX(20px);
        opacity: 0
      }

      to {
        transform: translateX(0);
        opacity: 1
      }
    }

    .toast-hdr {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 5px
    }

    .toast-title {
      font-size:13px;
      font-weight: 700;
      color: var(--hold);
      flex: 1
    }

    .toast-body {
      font-size:12px;
      color: var(--text2);
      font-family: var(--mono);
      line-height: 1.5
    }

    .toast-tg {
      font-size:11px;
      color: var(--accent2);
      margin-top: 3px
    }

    /* Tooltip */
    [data-tooltip] {
      position: relative;
      cursor: help
    }

    [data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--bg3);
      border: 1px solid var(--border);
      color: var(--text);
      font-size:11px;
      padding: 4px 9px;
      border-radius: 5px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s;
      z-index: 999
    }

    [data-tooltip]:hover::after {
      opacity: 1
    }

    .chart-axis-selector {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 10px;
      font-size:13px;
      color: var(--text2)
    }

    canvas.mini {
      width: 100%
    }

    /* ═══════════════════
   TA / BACKTEST / ORDERS TABS
═══════════════════ */
    .sig-table {
      width: 100%;
      border-collapse: collapse
    }

    .sig-table td {
      padding: 7px 10px;
      border-bottom: 1px solid var(--border);
      font-size:13px
    }

    .sig-table tr:last-child td {
      border-bottom: none
    }

    .sig-table td:first-child {
      color: var(--text2);
      width: 140px
    }

    .sig-badge {
      display: inline-block;
      padding: 2px 9px;
      border-radius: 4px;
      font-family: var(--mono);
      font-size:12px;
      font-weight: 700;
      letter-spacing: .05em
    }

    .sig-badge.buy {
      background: rgba(0, 229, 160, .15);
      color: var(--accent);
      border: 1px solid rgba(0, 229, 160, .3)
    }

    .sig-badge.sell {
      background: rgba(255, 77, 107, .15);
      color: var(--accent3);
      border: 1px solid rgba(255, 77, 107, .3)
    }

    .sig-badge.hold {
      background: rgba(255, 194, 64, .1);
      color: var(--accent4);
      border: 1px solid rgba(255, 194, 64, .2)
    }

    .sig-badge.neutral {
      background: rgba(139, 146, 179, .1);
      color: var(--text2);
      border: 1px solid var(--border)
    }

    .overall-sig {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 14px
    }

    .overall-sig .label {
      font-size:12px;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .08em
    }

    .overall-sig .count {
      font-size:12px;
      color: var(--text2);
      font-family: var(--mono)
    }

    .mcdx-bar-wrap {
      padding: 10px 0
    }

    .mcdx-bar-label {
      font-size:11px;
      color: var(--text2);
      margin-bottom: 4px;
      display: flex;
      justify-content: space-between
    }

    .mcdx-bar {
      height: 16px;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      margin-bottom: 6px
    }

    .mcdx-seg {
      height: 100%;
      transition: width .4s
    }

    .mcdx-seg.banker {
      background: var(--accent)
    }

    .mcdx-seg.hotmoney {
      background: var(--accent4)
    }

    .mcdx-seg.retailer {
      background: var(--accent3)
    }

    /* Strategy cards */
    .strat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 10px;
      margin-bottom: 16px
    }

    .strat-card {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 12px 14px;
      cursor: pointer;
      transition: border-color .15s
    }

    .strat-card:hover,
    .strat-card.active {
      border-color: var(--accent)
    }

    .strat-card.active {
      background: rgba(0, 229, 160, .05)
    }

    .strat-name {
      font-size:14.5px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px
    }

    .strat-stat {
      font-size:12px;
      color: var(--text2);
      font-family: var(--mono);
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .strat-stat span {
      white-space: nowrap
    }

    .strat-stat .ret {
      color: var(--accent)
    }

    .strat-stat .dd {
      color: var(--accent3)
    }

    /* Backtest metrics grid */
    .bt-metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 14px
    }

    .bt-kpi {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 10px 12px;
      text-align: center
    }

    .bt-kpi .bk-label {
      font-size:11px;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 4px
    }

    .bt-kpi .bk-val {
      font-size:17.5px;
      font-weight: 700;
      font-family: var(--mono);
      color: var(--text)
    }

    .bt-kpi .bk-val.pos {
      color: var(--accent)
    }

    .bt-kpi .bk-val.neg {
      color: var(--accent3)
    }

    /* Monthly heatmap */
    .heatmap-wrap {
      overflow-x: auto;
      margin-bottom: 14px
    }

    .heatmap-grid {
      display: grid;
      grid-template-columns: 50px repeat(12, 1fr);
      gap: 2px;
      min-width: 520px
    }

    .hm-cell {
      padding: 4px 2px;
      text-align: center;
      font-size:11px;
      font-family: var(--mono);
      border-radius: 3px;
      font-weight: 600
    }

    .hm-cell.header {
      color: var(--text2);
      background: none;
      font-weight: 400
    }

    .hm-cell.year {
      color: var(--text2);
      font-size:11px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 6px
    }

    /* Orders / DNSE tab */
    .broker-dropdown {
      position: relative;
      margin-bottom: 16px;
      display: inline-block
    }

    .broker-dd-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 140px;
      justify-content: space-between;
      background: var(--bg3);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 600;
      padding: 7px 14px;
      border-radius: 7px;
      cursor: pointer;
      transition: all .15s
    }

    .broker-dd-toggle:hover {
      border-color: var(--accent2);
      color: var(--accent2)
    }

    .broker-dd-caret {
      font-size: 11px;
      color: var(--text2);
      transition: transform .15s
    }

    .broker-dd-menu.open ~ .broker-dd-caret,
    .broker-dropdown:has(.broker-dd-menu.open) .broker-dd-caret {
      transform: rotate(180deg)
    }

    .broker-dd-menu {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      min-width: 140px;
      background: var(--bg2, var(--bg3));
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 4px;
      z-index: 50;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .35)
    }

    .broker-dd-menu.open {
      display: block
    }

    .broker-dd-item {
      display: block;
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      color: var(--text2);
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 600;
      padding: 7px 12px;
      border-radius: 5px;
      cursor: pointer;
      transition: all .12s
    }

    .broker-dd-item:hover {
      background: var(--bg3);
      color: var(--accent2)
    }

    .broker-dd-item.active {
      background: rgba(0, 145, 255, .1);
      color: var(--accent2)
    }

    .session-card {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px;
      margin-bottom: 14px
    }

    .session-status {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px
    }

    .sess-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text3)
    }

    .sess-dot.on {
      background: var(--accent);
      animation: pulse 1.5s infinite
    }

    .sess-dot.partial {
      background: var(--accent4)
    }

    .sess-label {
      font-size:13px;
      font-family: var(--mono)
    }

    .order-step {
      display: none
    }

    .order-step.visible {
      display: block
    }

    .order-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 12px
    }

    .side-btns {
      display: flex;
      gap: 6px
    }

    .side-btn {
      flex: 1;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 7px;
      font-family: var(--mono);
      font-size:13px;
      font-weight: 700;
      cursor: pointer;
      background: var(--bg3);
      color: var(--text2);
      transition: all .15s
    }

    .side-btn.buy.active {
      background: rgba(0, 229, 160, .15);
      border-color: var(--accent);
      color: var(--accent)
    }

    .side-btn.sell.active {
      background: rgba(255, 77, 107, .15);
      border-color: var(--accent3);
      color: var(--accent3)
    }

    .order-log-wrap {
      max-height: 280px;
      overflow-y: auto
    }

    .order-log-table {
      width: 100%;
      border-collapse: collapse;
      font-size:12px
    }

    .order-log-table th {
      padding: 6px 8px;
      border-bottom: 1px solid var(--border);
      color: var(--text2);
      font-weight: 500;
      text-align: left;
      position: sticky;
      top: 0;
      background: var(--bg2)
    }

    .order-log-table td {
      padding: 6px 8px;
      border-bottom: 1px solid rgba(30, 34, 53, .5)
    }

    .order-log-table tr:hover td {
      background: var(--bg3)
    }

    .mkt-badge {
      font-size:11px;
      font-family: var(--mono);
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 700
    }

    .mkt-badge.open {
      background: rgba(0, 229, 160, .12);
      color: var(--accent)
    }

    .mkt-badge.closed {
      background: rgba(139, 146, 179, .08);
      color: var(--text3)
    }

    .mkt-badge.ato,
    .mkt-badge.atc {
      background: rgba(255, 194, 64, .1);
      color: var(--accent4)
    }

    .balance-row {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 10px 14px;
      background: rgba(0, 145, 255, .04);
      border: 1px solid rgba(0, 145, 255, .12);
      border-radius: 7px;
      margin-bottom: 12px;
      font-size:13px
    }

    .balance-row .bal-label {
      color: var(--text2)
    }

    .balance-row .bal-val {
      font-family: var(--mono);
      font-weight: 700;
      color: var(--accent2)
    }

    canvas {
      cursor: crosshair !important;
    }

    /* ── Multi-portfolio tabs ───────────────────────────────────────── */
    .pf-tab {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size:12px;
      color: var(--text2);
      background: var(--bg3);
      border: 1px solid var(--border);
      transition: border-color .15s, color .15s;
      user-select: none;
    }

    .pf-tab:hover {
      border-color: rgba(0, 229, 160, .3);
      color: var(--text);
    }

    .pf-tab.active {
      background: rgba(0, 229, 160, .1);
      border-color: rgba(0, 229, 160, .4);
      color: var(--accent);
    }

    .pf-tab-name {
      font-family: var(--mono);
      font-weight: 600;
    }

    .pf-tab-count {
      font-size:10px;
      color: var(--text3);
      margin-left: 1px;
    }

    .pf-tab.active .pf-tab-count {
      color: rgba(0, 229, 160, .55);
    }

    .pf-tab-del {
      font-size:10px;
      color: var(--text3);
      padding: 0 0 0 4px;
      line-height: 1;
    }

    .pf-tab-del:hover {
      color: var(--accent3) !important;
    }

    .pf-tab-add {
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size:12px;
      color: var(--accent);
      background: rgba(0, 229, 160, .07);
      border: 1px dashed rgba(0, 229, 160, .3);
    }

    .pf-tab-add:hover {
      background: rgba(0, 229, 160, .14);
    }

    /* ── SL/TP mode toggle buttons ──────────────────────────────────── */
    .sltp-btn {
      background: transparent;
      color: var(--text3);
      transition: background .15s, color .15s;
    }

    .sltp-btn.active-sltp {
      background: rgba(74, 80, 112, .5);
      color: var(--text2);
    }

    /* ── Auto Bot (toggle switch + signal feed) ─────────────────────── */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 36px;
      height: 20px;
      flex-shrink: 0;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-switch .slider {
      position: absolute;
      inset: 0;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 20px;
      cursor: pointer;
      transition: .2s;
    }

    .toggle-switch .slider::before {
      content: '';
      position: absolute;
      width: 14px;
      height: 14px;
      left: 2px;
      top: 2px;
      background: var(--text3);
      border-radius: 50%;
      transition: .2s;
    }

    .toggle-switch input:checked+.slider {
      background: rgba(0, 229, 160, .15);
      border-color: var(--accent);
    }

    .toggle-switch input:checked+.slider::before {
      background: var(--accent);
      transform: translateX(16px);
    }

    .signal-feed {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      max-height: 200px;
      overflow-y: auto;
      font-size:12px;
      font-family: var(--mono);
      margin-top: 12px;
    }

    .signal-feed .signal-row {
      padding: 3px 0;
      border-bottom: 1px solid rgba(30, 34, 53, .4);
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .signal-feed .signal-row:last-child {
      border-bottom: none;
    }

    .signal-feed .signal-ts {
      color: var(--text3);
      min-width: 56px;
    }

    .signal-feed-empty {
      color: var(--text3);
      text-align: center;
      padding: 16px 0;
    }

    /* ── Auth Cover ─────────────────────────────────────────────── */
    #auth-cover {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      background: var(--bg);
      font-family: var(--sans);
    }

    #auth-left {
      width: 42%;
      background: linear-gradient(135deg, #081a15 0%, #040e0b 100%);
      border-right: 1px solid rgba(0, 229, 160, .12);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 48px;
      position: relative;
      overflow: hidden;
    }

    #auth-left::before {
      content: '';
      position: absolute;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 229, 160, .07) 0%, transparent 68%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    #auth-left::after {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0, 229, 160, .03) 39px, rgba(0, 229, 160, .03) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0, 229, 160, .03) 39px, rgba(0, 229, 160, .03) 40px);
      pointer-events: none;
    }

    .auth-logo {
      font-family: var(--mono);
      font-size:20px;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 4px;
      margin-bottom: 56px;
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;
      z-index: 1;
    }

    .auth-logo-diamond {
      width: 10px;
      height: 10px;
      background: var(--accent);
      transform: rotate(45deg);
      flex-shrink: 0;
    }

    .auth-quote-wrap {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 340px;
    }

    .auth-quote-icon {
      font-size:39.5px;
      color: rgba(0, 229, 160, .25);
      line-height: 1;
      margin-bottom: 16px;
      font-family: Georgia, serif;
    }

    .auth-quote {
      font-size:15.5px;
      color: var(--text2);
      line-height: 1.8;
      font-style: italic;
      transition: opacity .3s;
    }

    .auth-quote-author {
      margin-top: 14px;
      font-size:12px;
      color: var(--accent);
      font-family: var(--mono);
      letter-spacing: 1.5px;
      transition: opacity .3s;
    }

    .auth-tagline {
      margin-top: 56px;
      font-size:11px;
      color: var(--text3);
      text-align: center;
      letter-spacing: 0.5px;
      line-height: 1.8;
      position: relative;
      z-index: 1;
    }

    .auth-tagline-sep {
      width: 32px;
      height: 1px;
      background: rgba(0, 229, 160, .2);
      margin: 12px auto 0;
    }

    #auth-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 48px;
    }

    .auth-form-box {
      width: 100%;
      max-width: 380px;
    }

    .auth-title {
      font-size:24px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
      font-family: var(--mono);
    }

    .auth-subtitle {
      font-size:14.5px;
      color: var(--text2);
      margin-bottom: 28px;
    }

    .auth-subtitle a {
      color: var(--accent);
      cursor: pointer;
      text-decoration: none;
    }

    .auth-subtitle a:hover {
      text-decoration: underline;
    }

    .auth-field {
      margin-bottom: 14px;
    }

    .auth-label {
      font-size:11px;
      color: var(--text2);
      margin-bottom: 6px;
      display: block;
      letter-spacing: 0.8px;
      text-transform: uppercase;
    }

    .auth-input {
      width: 100%;
      padding: 11px 14px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size:14.5px;
      font-family: var(--sans);
      box-sizing: border-box;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }

    .auth-input:focus {
      border-color: rgba(0, 229, 160, .45);
      box-shadow: 0 0 0 3px rgba(0, 229, 160, .07);
    }

    .auth-input::placeholder {
      color: var(--text3);
    }

    .auth-pw-wrap {
      position: relative;
    }

    .auth-pw-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: var(--text3);
      font-size:16.5px;
      user-select: none;
      line-height: 1;
    }

    .auth-pw-toggle:hover {
      color: var(--text2);
    }

    .auth-btn {
      width: 100%;
      padding: 12px;
      background: var(--accent);
      border: none;
      border-radius: 8px;
      color: #05100d;
      font-size:15.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--sans);
      margin-top: 6px;
      transition: opacity .2s, transform .1s;
      letter-spacing: 0.5px;
    }

    .auth-btn:hover {
      opacity: .88;
    }

    .auth-btn:active {
      transform: scale(.98);
    }

    .auth-btn:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    .auth-forgot {
      text-align: right;
      margin-top: 8px;
    }

    .auth-forgot a {
      font-size:12px;
      color: var(--accent2);
      cursor: pointer;
    }

    .auth-forgot a:hover {
      text-decoration: underline;
    }

    .auth-error {
      color: var(--accent3);
      font-size:13px;
      margin-top: 10px;
      min-height: 18px;
      text-align: center;
    }

    .auth-success {
      color: var(--accent);
      font-size:13px;
      margin-top: 10px;
      min-height: 18px;
      text-align: center;
    }

    .auth-user-badge {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 4px 12px 4px 10px;
      background: rgba(0, 229, 160, .07);
      border: 1px solid rgba(0, 229, 160, .18);
      border-radius: 20px;
      font-size:12px;
      color: var(--accent);
      font-family: var(--mono);
      cursor: pointer;
      transition: background .15s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .auth-user-badge:hover {
      background: rgba(0, 229, 160, .13);
    }

    .auth-avatar {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(0, 229, 160, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:10px;
      font-weight: 700;
      color: var(--accent);
      flex-shrink: 0;
    }

    /* ── Signal List Tab ────────────────────────────────────── */
    .sl-toolbar { display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap; }
    .sl-seg-btns button, .sl-sig-btns button {
      background:var(--bg3);border:1px solid var(--border);color:var(--text2);
      border-radius:6px;padding:4px 11px;font-size:12px;cursor:pointer;
      font-family:'Be Vietnam Pro',sans-serif;transition:all .15s; }
    .sl-seg-btns button.active { color:var(--accent2);border-color:rgba(0,145,255,.4);background:rgba(0,145,255,.08); }
    .sl-sig-btns button.active { color:var(--text);border-color:rgba(139,146,179,.4); }
    .sl-sig-btns button.active.buy  { color:var(--accent);border-color:rgba(0,229,160,.4);background:rgba(0,229,160,.08); }
    .sl-sig-btns button.active.sell { color:var(--accent3);border-color:rgba(255,77,107,.4);background:rgba(255,77,107,.08); }
    .sl-summary-bar { display:flex;gap:24px;padding:8px 20px;border-bottom:1px solid var(--border);font-size:12px;font-family:'IBM Plex Mono',monospace; }
    .sl-table-wrap { overflow:auto;max-height:calc(100vh - 192px); }
    .sl-tbl { width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap; }
    .sl-tbl th { padding:7px 10px;text-align:right;color:var(--text2);border-bottom:2px solid var(--border);
      position:sticky;top:0;background:var(--bg2);z-index:1;cursor:pointer;user-select:none; }
    .sl-tbl th:first-child { text-align:left; }
    .sl-tbl th:hover { color:var(--text); }
    .sl-tbl th.sl-sort-asc::after  { content:' ↑';color:var(--accent2); }
    .sl-tbl th.sl-sort-desc::after { content:' ↓';color:var(--accent2); }
    .sl-tbl td { padding:6px 10px;border-bottom:1px solid rgba(30,34,53,.5);text-align:right;font-family:'IBM Plex Mono',monospace; }
    .sl-tbl td:first-child { text-align:left; }
    .sl-tbl tr:hover td { background:rgba(255,255,255,.025);cursor:pointer; }
    .sl-ticker { color:var(--text);font-weight:700; }
    .sl-ticker:hover { color:var(--accent2); }
    .sl-ret-pos { color:var(--accent); }
    .sl-ret-neg { color:var(--accent3); }
    .sl-ret-flat { color:var(--text3); }
    .sl-badge { display:inline-block;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.5px; }
    .sl-badge.buy  { color:var(--accent);background:rgba(0,229,160,.12); }
    .sl-badge.sell { color:var(--accent3);background:rgba(255,77,107,.12); }
    .sl-badge.neu  { color:var(--text3); }
    .sl-dot-buy  { color:var(--accent);font-size:16.5px;line-height:1; }
    .sl-dot-sell { color:var(--accent3);font-size:16.5px;line-height:1; }
    .sl-dot-none { color:var(--text3);font-size:12px; }
    .sl-sig-buy  { background:rgba(255,194,64,.18);color:#ffc240;padding:2px 8px;border-radius:4px;font-weight:700;font-size:12px; }
    .sl-sig-sell { background:rgba(255,77,107,.18);color:var(--accent3);padding:2px 8px;border-radius:4px;font-weight:700;font-size:12px; }
    /* Signal Parameters Panel */
    .sl-params-panel { padding:10px 20px 12px;border-bottom:1px solid var(--border);background:var(--bg3);font-size:12px; }
    .sl-params-panel .pgrp { display:flex;gap:32px;flex-wrap:wrap; }
    .sl-params-panel .pgrp-title { font-size:11px;color:var(--text2);font-weight:600;margin-bottom:8px;letter-spacing:.5px;text-transform:uppercase; }
    .sl-param-row { display:flex;align-items:center;gap:5px;margin-bottom:5px;color:var(--text2);cursor:pointer;white-space:nowrap; }
    .sl-param-row input[type="checkbox"],.sl-param-row input[type="radio"] { accent-color:var(--accent2);cursor:pointer; }
    .sl-param-num { width:38px;background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:1px 4px;font-size:11px;text-align:center;font-family:'IBM Plex Mono',monospace; }
    /* View sub-tab strip */
    .view-subtab-strip { display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 16px;background:var(--bg2);flex-shrink:0; }
    .vst-btn { background:none;border:none;border-bottom:2px solid transparent;color:var(--text2);font-size:13px;padding:7px 14px 8px;cursor:pointer;font-family:'Be Vietnam Pro',sans-serif;transition:all .15s;margin-bottom:-1px; }
    .vst-btn.active { color:var(--accent2);border-bottom-color:var(--accent2); }
    .vst-btn:hover:not(.active) { color:var(--text); }

    /* ═══════════════════════════════════════════════════════════════════
       MOBILE SHELL — Phase 1 Milestone A (bottom tab bar, chips, header)
       Every rule lives behind @media(max-width:768px) except the default
       display:none — desktop is pixel-identical.
       z-index 150 < #auth-cover's 200 → the bar is auto-hidden at login.
    ═══════════════════════════════════════════════════════════════════ */
    #mobile-tabbar { display: none; }

    @media (max-width: 768px) {

      /* 1) Bottom tab bar */
      #mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 150;
        background: var(--bg2);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
      }
      #mobile-tabbar button {
        flex: 1 1 0;
        min-width: 0;
        background: none;
        border: none;
        color: var(--text3);
        font-family: var(--sans);
        font-size: 10px;
        line-height: 1.2;
        min-height: 52px;
        padding: 7px 2px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        cursor: pointer;
      }
      #mobile-tabbar button svg { width: 20px; height: 20px; }
      #mobile-tabbar button.active { color: var(--accent); }
      #mobile-tabbar button span {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* Content clearance — the fixed bar must never cover page bottoms.
         On .view only (body would double-count when the page scrolls). */
      .view { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

      /* 2) Desktop nav hidden — bottom bar replaces it */
      header nav { display: none; }

      /* 3) Compact header: keep logo + LIVE + stream + user + lang,
         drop the interval selector / refresh button / last-update. */
      .refresh-timer, #refresh-btn, .last-update { display: none; }
      header { padding-left: 10px; padding-right: 10px; gap: 8px; }
      .logo { font-size: 13px; letter-spacing: .04em; }

      /* 4) Sub-tab strips → swipeable chip row */
      .view-subtab-strip {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: 0 10px;
      }
      .view-subtab-strip::-webkit-scrollbar { display: none; }
      .vst-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 44px;
        white-space: nowrap;
      }
      /* Financial's sub-tab row is an inline-styled flex div (predates
         .view-subtab-strip) — give it the same swipe treatment. Its 484px
         natural width was expanding the mobile layout viewport to ~505px,
         zooming the whole page out. */
      #view-financial > div:has(> #ftab-overview) {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      #view-financial > div:has(> #ftab-overview)::-webkit-scrollbar { display: none; }
      #view-financial > div:has(> #ftab-overview) > button {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 44px;
      }
      /* Shell hygiene: never let stray wide content expand the layout
         viewport (which shrinks the whole page). Inner scroll containers
         (tables, chip rows) keep their own overflow-x:auto. Per-tab
         content fixes land in Milestones B/C. */
      html, body { overflow-x: hidden; }

      /* 5) Backend badge (fixed bottom-right) sits above the tab bar */
      #api-backend-badge {
        bottom: calc(64px + env(safe-area-inset-bottom)) !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════════
       MOBILE — Phase 1 Milestone B (login stack, grid stacking, inputs)
    ═══════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* 1) Login: form FIRST (top), brand/quote panel below.
         column-reverse flips the DOM order (#auth-left quote, #auth-right
         form) so the form lands on top without touching markup. */
      #auth-cover {
        flex-direction: column-reverse;
        overflow-y: auto;
      }
      #auth-left {
        width: 100%;
        flex: 0 0 auto;
        border-right: none;
        border-top: 1px solid rgba(0, 229, 160, .12);
        padding: 28px 20px 40px;
      }
      #auth-left .auth-logo { margin-bottom: 24px; }
      #auth-right {
        width: 100%;
        flex: 0 0 auto;
        padding: 36px 20px 28px;
      }

      /* 2) iOS zooms the page when focusing inputs with font-size <16px —
         a top "app feels broken" trigger. 16px kills the auto-zoom. */
      input, select, textarea { font-size: 16px; }

      /* 3) Stack desktop-oriented side-by-side grids. Markets (and some
         other views) build chart/table pairs with INLINE
         grid-template-columns (2.2fr 1fr, 1.4fr 1fr…) — on 375px each
         column is unusably narrow ("VN-Index bị nhỏ"). Inline style wins
         specificity, hence !important. :has(canvas/table) limits the
         collapse to chart/table grids — small KPI text grids keep their
         columns. */
      .view div[style*="grid-template-columns"]:has(canvas),
      .view div[style*="grid-template-columns"]:has(table) {
        grid-template-columns: 1fr !important;
      }
      /* Grid/flex children must be allowed to shrink below content size,
         or canvases force overflow inside the stacked column. */
      .view .card { min-width: 0; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       MOBILE — Phase 1 Milestone C (TA sidebar, Lệnh forms, data tables)
    ═══════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* 1) Chiến lược TA: sidebar (watchlist + alerts, fixed 260px) was
         forcing horizontal overflow / crushing the chart on 375px.
         Stack instead, chart FIRST via CSS order (sidebar is first in the
         DOM — reordering visually avoids touching chart-init JS that may
         assume DOM order). Sidebar becomes a bounded, internally
         scrollable panel below the chart instead of a full-height column. */
      .chart-layout {
        grid-template-columns: 1fr;
      }
      .chart-sidebar {
        width: 100%;
        order: 2;
        max-height: 340px;
      }
      .chart-main { order: 1; }
      .watchlist-mini-wrap, .alert-mini-wrap { max-height: 300px; }

      /* 2) Lệnh (Order Book) broker login/order forms: 2-col → 1-col. */
      .order-form-grid { grid-template-columns: 1fr; }

      /* 3) Data tables (LHCDF/LHBF/LHFCF holdings — up to 22 columns —
         Statements, Order Book history…): rather than rewriting the JS
         table generators (many carry live-patch DOM ids, e.g.
         lhsub-${fund}-mv, touched every SSE tick — a rewrite risks
         breaking that), keep the table and make it comfortable to use:
         confirmed horizontal scroll + the FIRST column sticks to the left
         edge while scrolling, like a spreadsheet frozen pane, so context
         (which row am I looking at) is never lost. */
      .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .table-wrap table th:first-child,
      .table-wrap table td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--bg2);
        box-shadow: 2px 0 4px rgba(0,0,0,.35);
      }
      /* Header's sticky cell needs to win over the thead's own
         position:sticky/top + z-index:2 (see _lhcdfHoldingsTable) so the
         corner cell stays opaque when both axes are pinned. */
      .table-wrap table thead th:first-child { z-index: 3; }

      /* LHCDF/LHBF/LHFCF holdings + bonds tables (#lhcdf-sections, shared
         by all 3 funds) lead with a throwaway "#" row-index column
         (_lhcdfHoldingsTable/_lhcdfHoldingRow) — pinning THAT is useless.
         Hide it and pin TICKER (2nd column) instead. Scoped to this one
         container so other .table-wrap tables (Statements, Order history)
         keep the generic first-column pin above, which is correct there.
         Header row (<th>) is separate from body rows on purpose: the
         SAME <thead> also holds the colspan-based Subtotal row (<td>s,
         see _lhcdfHoldingsTable) and tbody holds a colspan-based
         "Không có …" empty-state row — both are single/merged cells, NOT
         a "#" + TICKER pair, so touching :first-child there would delete
         the Subtotal label / hide the empty-state message. Scoping to
         `thead th` (never a colspan cell here) + `tbody td:not(:only-child)`
         (excludes the lone colspan empty-state <td>) keeps both intact. */
      #lhcdf-sections .table-wrap table thead th:first-child { display: none; }
      #lhcdf-sections .table-wrap table thead th:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 3;
        background: var(--bg2);
        box-shadow: 2px 0 4px rgba(0,0,0,.35);
      }
      #lhcdf-sections .table-wrap table tbody td:first-child:not(:only-child) { display: none; }
      #lhcdf-sections .table-wrap table tbody td:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--bg2);
        box-shadow: 2px 0 4px rgba(0,0,0,.35);
      }
    }