:root {
      --black:    #0a0a0a;
      --panel:    #0d0d0d;
      --panel2:   #101010;
      --border:   #1e1e1e;
      --border2:  #2a2a2a;
      --amber:    #ffb800;
      --amber2:   #cc9200;
      --green:    #00ff41;
      --green2:   #00cc33;
      --red:      #ff3b3b;
      --red2:     #cc2222;
      --blue:     #3399ff;
      --grey:     #666666;
      --text:     #b8b8b8;
      --dim:      #444444;
      --dim2:     #333333;
      --online:   #00ff41;
      --stopped:  #ff3b3b;
      --warn:     #ffb800;
      --mono: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, 'SF Mono', Menlo, Monaco, Consolas, monospace;
    }

    .resize-handle {
      height: 6px;
      background: transparent;
      cursor: row-resize;
      flex-shrink: 0;
      position: relative;
      z-index: 10;
    }
    .resize-handle:hover, .resize-handle.active {
      background: var(--amber);
      opacity: 0.4;
    }
    .resize-handle::after {
      content: '···';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 8px;
      color: var(--dim);
      letter-spacing: 2px;
    }

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

    html, body {
      height: 100%;
      overflow: hidden;
      background: var(--black);
      color: var(--text);
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.35;
      -webkit-font-smoothing: antialiased;
    }

    /* ─── SCROLLBARS ──────────────────────────────────── */
    ::-webkit-scrollbar { width: 3px; height: 3px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 1px; }
    ::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

    /* ─── LOGIN ───────────────────────────────────────── */
    #login-screen {
      position: fixed; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--black);
      z-index: 9999;
    }
    #login-screen.hidden { display: none; }

    .login-box {
      border: 1px solid var(--amber);
      padding: 36px 44px;
      min-width: 340px;
      text-align: center;
      position: relative;
    }
    .login-box::before {
      content: '';
      position: absolute;
      inset: -1px;
      border: 1px solid var(--amber);
      opacity: 0.15;
      transform: translate(3px, 3px);
      pointer-events: none;
    }
    .login-eagle {
      font-size: 32px; margin-bottom: 8px; display: block;
      filter: sepia(1) saturate(3) hue-rotate(5deg);
    }
    .login-box h1 {
      font-size: 16px; color: var(--amber); letter-spacing: 4px;
      margin-bottom: 2px; font-weight: 700;
    }
    .login-box .tagline { color: var(--dim2); font-size: 9px; letter-spacing: 2px; margin-bottom: 28px; color: var(--grey); }
    .login-box input {
      display: block; width: 100%; padding: 8px 12px;
      background: #000; border: 1px solid var(--border2);
      color: var(--text); font-family: var(--mono); font-size: 12px;
      margin-bottom: 10px; outline: none;
    }
    .login-box input:focus { border-color: var(--amber); box-shadow: 0 0 8px rgba(255,184,0,0.1); }
    .login-box button {
      width: 100%; padding: 9px; background: var(--amber); color: #000;
      border: none; font-family: var(--mono); font-size: 11px; font-weight: 700;
      cursor: pointer; letter-spacing: 3px; text-transform: uppercase;
    }
    .login-box button:hover { background: #ffc933; }
    .login-error { color: var(--red); font-size: 9px; margin-top: 8px; min-height: 14px; letter-spacing: 1px; }

    /* ─── TERMINAL ────────────────────────────────────── */
    #terminal {
      display: flex; flex-direction: column;
      height: 100vh; overflow: hidden;
    }
    #terminal.hidden { display: none; }

    /* ─── TOP BAR ─────────────────────────────────────── */
    #topbar {
      flex: 0 0 32px;
      display: flex; align-items: center;
      background: var(--panel);
      border-bottom: 1px solid var(--amber);
      padding: 0 10px; gap: 0; overflow: hidden;
    }
    .tb-logo {
      color: var(--amber); font-weight: 700; font-size: 12px;
      letter-spacing: 2px; white-space: nowrap; margin-right: 14px;
      text-shadow: 0 0 12px rgba(255,184,0,0.4);
    }
    .tb-sep { color: var(--dim2); margin: 0 8px; font-size: 9px; }
    .tb-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: 14px; }
    .tb-label { color: var(--dim); font-size: 9px; letter-spacing: 0.5px; }
    .tb-val { color: var(--text); font-size: 11px; }
    .tb-val.amber  { color: var(--amber); }
    .tb-val.green  { color: var(--green); }
    .tb-val.red    { color: var(--red); }
    .tb-val.pos    { color: var(--green); }
    .tb-val.neg    { color: var(--red); }
    .tb-spacer { flex: 1; }
    .ws-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--stopped); display: inline-block;
      transition: background 0.3s;
    }
    .ws-dot.connected { background: var(--green); box-shadow: 0 0 4px var(--green); }
    .ws-status { font-size: 9px; color: var(--dim); letter-spacing: 0.5px; }

    /* ─── MAIN GRID ───────────────────────────────────── */
    #main-grid {
      flex: 1 1 0;
      display: flex;
      flex-direction: row;
      overflow: hidden;
    }
    .col {
      display: flex; flex-direction: column;
      overflow: hidden; border-right: 1px solid var(--border);
      min-width: 180px;
    }
    .col:last-child { border-right: none; }
    .col-left { width: 268px; flex-shrink: 0; }
    .col-center { flex: 1 1 0; min-width: 300px; }
    .col-right { width: 310px; flex-shrink: 0; }

    /* Drag resize handles between columns */
    .col-resize {
      width: 8px;
      cursor: col-resize;
      background: rgba(255,184,0,0.15);
      flex-shrink: 0;
      position: relative;
      z-index: 10;
      transition: background 0.2s;
    }
    .col-resize::after {
      content: '⋮';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--dim);
      font-size: 14px;
      pointer-events: none;
    }
    .col-resize:hover, .col-resize.active {
      background: rgba(255,184,0,0.4);
    }

    /* ─── PANELS ──────────────────────────────────────── */
    .panel {
      display: flex; flex-direction: column;
      overflow: hidden; flex: 1 1 50%;
      border-bottom: 1px solid var(--border);
    }
    .panel:last-child { border-bottom: none; }

    .panel-hdr {
      flex: 0 0 20px;
      display: flex; align-items: center;
      background: #090909;
      border-bottom: 1px solid var(--amber2);
      padding: 0 7px; gap: 5px;
    }
    .panel-hdr-title {
      color: var(--amber); font-size: 9px; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
    }
    .panel-hdr-badge {
      font-size: 8px; color: var(--dim);
      background: #181818; padding: 0px 4px; border-radius: 2px;
      border: 1px solid var(--dim2);
    }
    .panel-hdr-spacer { flex: 1; }
    .panel-hdr-ts { font-size: 8px; color: var(--dim); letter-spacing: 0.3px; }

    .panel-body {
      flex: 1 1 0; overflow-y: auto; overflow-x: hidden;
      padding: 1px 0;
    }

    /* ─── TABLES ──────────────────────────────────────── */
    .bt {
      width: 100%; border-collapse: collapse; table-layout: fixed;
    }
    .bt th {
      font-size: 8px; color: var(--dim); text-transform: uppercase;
      padding: 2px 5px; text-align: right; font-weight: 400;
      border-bottom: 1px solid var(--border); white-space: nowrap;
      letter-spacing: 0.5px; position: sticky; top: 0;
      background: #0a0a0a; z-index: 1;
    }
    .bt th:first-child { text-align: left; }
    #movers-table th { background: var(--black); color: var(--dim); }
    #movers-table td { border-bottom-color: var(--border); }
    #movers-table tr:hover td { background: rgba(255,184,0,0.03) !important; }
    .bt td {
      font-size: 10px; padding: 2px 5px; text-align: right;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      border-bottom: 1px solid #111;
    }
    .bt td:first-child { text-align: left; }
    .bt tr:hover td { background: rgba(255,184,0,0.03); }

    @keyframes rowflash {
      0%   { background: rgba(0,255,65,0.2); }
      100% { background: transparent; }
    }
    @keyframes rowflash-red {
      0%   { background: rgba(255,59,59,0.2); }
      100% { background: transparent; }
    }
    .bt tr.flash-row td { animation: rowflash 0.8s ease; }
    .bt tr.flash-red td { animation: rowflash-red 0.8s ease; }
    @keyframes cell-flash-green { 0% { background: rgba(0,255,65,0.35); } 100% { background: transparent; } }
    @keyframes cell-flash-red { 0% { background: rgba(255,59,59,0.35); } 100% { background: transparent; } }
    .cell-up { animation: cell-flash-green 0.6s ease; }
    .cell-down { animation: cell-flash-red 0.6s ease; }

    /* ─── TICKER PANEL ────────────────────────────────── */
    .tk-sym    { color: var(--amber); font-weight: 700; font-size: 10px; }
    .tk-price  { color: var(--text); font-variant-numeric: tabular-nums; }
    .tk-chg    { font-variant-numeric: tabular-nums; }
    .tk-chg.pos { color: var(--green); }
    .tk-chg.neg { color: var(--red); }
    .tk-chg.neu { color: var(--grey); }
    .tk-fund   { color: var(--dim); font-size: 9px; }
    .tk-fund.high { color: var(--warn); }

    /* ─── POSITIONS PANEL ─────────────────────────────── */
    .pos-side-long  { color: var(--green); font-weight: 700; font-size: 9px; }
    .pos-side-short { color: var(--red);   font-weight: 700; font-size: 9px; }
    .pos-upl { font-variant-numeric: tabular-nums; }
    .pos-upl.pos { color: var(--green); }
    .pos-upl.neg { color: var(--red); }
    .pos-total {
      padding: 3px 7px; border-top: 1px solid var(--border2);
      display: flex; justify-content: space-between; align-items: center;
      font-size: 9px; color: var(--dim); flex: 0 0 auto;
      background: #090909;
    }
    .pos-total .val { font-weight: 700; font-size: 10px; }
    .pos-empty { padding: 10px 7px; color: var(--dim); font-size: 9px; text-align: center; letter-spacing: 1px; }
    .close-pos-btn { background:#440000; color:#f55; border:1px solid #600; font-size:9px; padding:1px 5px; cursor:pointer; border-radius:2px; }
    .close-pos-btn:hover { background:#660000; color:#ff3333; }

    /* ─── RADAR PANEL ─────────────────────────────────── */
    .radar-tabs {
      display: flex; border-bottom: 1px solid var(--border);
      background: #090909; flex: 0 0 auto;
    }
    .radar-tab {
      padding: 3px 10px; font-size: 8px; cursor: pointer;
      color: var(--dim); border-right: 1px solid var(--border);
      letter-spacing: 1px; text-transform: uppercase;
      transition: color 0.1s;
    }
    .radar-tab:hover { color: var(--text); }
    .radar-tab.active { color: var(--amber); background: #0e0e0e; }
    .radar-score  { color: var(--amber); font-size: 9px; }
    .radar-reason { color: var(--dim); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .radar-type   { color: var(--blue); font-size: 9px; }

    /* ─── WHALE PANEL ─────────────────────────────────── */
    .whale-buy  { color: var(--green); font-size: 9px; font-weight: 700; }
    .whale-sell { color: var(--red);   font-size: 9px; font-weight: 700; }
    .whale-val  { color: var(--amber); font-variant-numeric: tabular-nums; }
    .whale-ts   { color: var(--dim); font-size: 9px; }

    /* ─── ENGINE PANEL ────────────────────────────────── */
    .eng-row td { font-size: 10px; }
    .eng-dot {
      display: inline-block; width: 5px; height: 5px;
      border-radius: 50%; margin-right: 4px; vertical-align: middle;
      flex-shrink: 0;
    }
    .eng-dot.online   { background: var(--online); box-shadow: 0 0 3px var(--online); }
    .eng-dot.stopped  { background: var(--stopped); }
    .eng-dot.errored  { background: var(--warn); box-shadow: 0 0 3px var(--warn); }
    .eng-dot.launching{ background: var(--blue); }
    .eng-name-cell { display: flex; align-items: center; }
    .eng-name  { color: var(--text); overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
    .eng-status        { font-size: 8px; letter-spacing: 0.5px; }
    .eng-status.online   { color: var(--green); }
    .eng-status.stopped  { color: var(--red); }
    .eng-status.errored  { color: var(--warn); }
    .eng-status.launching{ color: var(--blue); }
    .eng-mem   { color: var(--dim); font-size: 8px; }
    .eng-btns  { display: flex; gap: 2px; justify-content: flex-end; }
    .eng-btn {
      font-family: var(--mono); font-size: 8px; padding: 1px 5px;
      border: 1px solid var(--dim2); background: transparent; color: var(--dim);
      cursor: pointer; letter-spacing: 0.5px; line-height: 1.4;
    }
    .eng-btn:hover { border-color: var(--amber); color: var(--amber); }
    .eng-btn.start  { border-color: #1a2e1a; color: #2a4a2a; }
    .eng-btn.start:hover  { border-color: var(--green); color: var(--green); }
    .eng-btn.stop   { border-color: #2e1a1a; color: #4a2a2a; }
    .eng-btn.stop:hover   { border-color: var(--red); color: var(--red); }
    .eng-btn.restart { border-color: #1a1e2e; color: #2a304a; }
    .eng-btn.restart:hover { border-color: var(--blue); color: var(--blue); }

    /* ─── NEWS PANEL ──────────────────────────────────── */
    .news-item {
      padding: 3px 7px; border-bottom: 1px solid #0f0f0f;
      cursor: pointer;
    }
    .news-item:hover { background: rgba(255,184,0,0.025); }
    .news-item.expanded .news-text { white-space: normal; }
    .news-text {
      font-size: 10px; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .news-meta { display: flex; gap: 5px; margin-top: 1px; align-items: center; }
    .news-src  { font-size: 8px; color: var(--dim); }
    .news-ts   { font-size: 8px; color: var(--dim); }
    .news-sent      { font-size: 8px; }
    .news-sent.bull { color: var(--green); }
    .news-sent.bear { color: var(--red); }
    .news-sent.neut { color: var(--dim); }

    /* ─── BOTTOM BAR: ACCOUNTS ────────────────────────── */
    #bottombar {
      flex: 0 0 48px;
      display: flex; align-items: stretch;
      background: var(--panel);
      border-top: 1px solid var(--amber);
      overflow: hidden;
    }
    .acct-block {
      flex: 1 1 0; display: flex; flex-direction: column;
      justify-content: center; padding: 3px 10px;
      border-right: 1px solid var(--border);
    }
    .acct-block:last-child { border-right: none; }
    .acct-title { font-size: 8px; color: var(--amber); letter-spacing: 1.5px; margin-bottom: 3px; text-transform: uppercase; }
    .acct-row   { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .acct-item  { display: flex; flex-direction: column; }
    .acct-item .lbl { font-size: 7px; color: var(--dim); letter-spacing: 0.5px; }
    .acct-item .val { font-size: 10px; color: var(--text); font-variant-numeric: tabular-nums; }
    .acct-item .val.pos   { color: var(--green); }
    .acct-item .val.neg   { color: var(--red); }
    .acct-item .val.amber { color: var(--amber); }

    /* ─── TRADE LOG ───────────────────────────────────── */
    #tradelog-wrap {
      flex: 0 0 0; overflow: hidden;
      transition: flex-basis 0.2s ease;
      border-top: 1px solid var(--border);
    }
    #tradelog-wrap.open { flex-basis: 170px; }
    #tradelog-panel { height: 100%; display: flex; flex-direction: column; }
    .trade-win  { color: var(--green); font-variant-numeric: tabular-nums; }
    .trade-loss { color: var(--red);   font-variant-numeric: tabular-nums; }
    .trade-side-long  { color: var(--green); }
    .trade-side-short { color: var(--red); }

    /* ─── COMMAND BAR ─────────────────────────────────── */
    #cmdbar {
      flex: 0 0 0; overflow: hidden;
      border-top: 1px solid var(--amber);
      background: var(--panel);
      transition: flex-basis 0.12s ease;
    }
    #cmdbar.open { flex-basis: 26px; }
    #cmd-inner {
      display: flex; align-items: center;
      height: 26px; padding: 0 10px; gap: 8px;
    }
    #cmd-prompt { color: var(--amber); font-size: 13px; font-weight: 700; }
    #cmd-input {
      flex: 1; background: transparent; border: none; outline: none;
      color: var(--green); font-family: var(--mono); font-size: 11px;
      caret-color: var(--green);
    }
    #cmd-hint { font-size: 9px; color: var(--dim); white-space: nowrap; }

    /* ─── AUTOCOMPLETE ────────────────────────────────── */
    #cmd-suggest {
      position: fixed; bottom: 28px; left: 0; right: 0;
      background: #0b0b0b; border-top: 1px solid var(--amber2);
      display: flex; gap: 0; z-index: 100;
      max-height: 80px; overflow-y: auto; overflow-x: hidden;
    }
    #cmd-suggest.hidden { display: none; }
    .suggest-item {
      padding: 3px 10px; cursor: pointer; font-size: 9px;
      color: var(--dim); border-right: 1px solid var(--border);
      white-space: nowrap;
    }
    .suggest-item:hover, .suggest-item.sel { background: #111; color: var(--amber); }
    .suggest-item .cmd-name { color: var(--amber); }
    .suggest-item .cmd-desc { color: var(--dim); margin-left: 5px; }

    /* ─── TOAST ───────────────────────────────────────── */
    #toast {
      position: fixed; top: 38px; right: 10px;
      background: #0e0e0e; border: 1px solid var(--amber);
      padding: 4px 12px; font-size: 9px; color: var(--amber);
      z-index: 1000; letter-spacing: 0.5px;
      opacity: 0; transition: opacity 0.15s; pointer-events: none;
    }
    #toast.show  { opacity: 1; }
    #toast.error { border-color: var(--red); color: var(--red); }

    /* ─── MISC ────────────────────────────────────────── */
    .txt-dim  { color: var(--dim); }
    .txt-pos  { color: var(--green); }
    .txt-neg  { color: var(--red); }
    .txt-amb  { color: var(--amber); }
    .txt-blu  { color: var(--blue); }
    .no-data  { padding: 8px 7px; color: var(--dim); font-size: 9px; text-align: center; letter-spacing: 0.5px; }

    /* ═══════════════════════════════════════════════════ */
    /* ─── V2 ADDITIONS ──────────────────────────────── */
    /* ═══════════════════════════════════════════════════ */

    .v2-badge {
      font-size: 7px; color: #000; background: var(--amber);
      padding: 1px 5px; border-radius: 8px; font-weight: 700;
      letter-spacing: 0.5px; text-transform: uppercase; flex-shrink: 0;
    }

    /* ─── CENTER TABS ─────────────────────────────────── */
    .center-tabs {
      display: flex; flex: 0 0 36px;
      background: #080808; border-bottom: 1px solid var(--amber2);
      overflow-x: auto; overflow-y: hidden;
    }
    .center-tabs::-webkit-scrollbar { height: 4px; }
    .center-tabs::-webkit-scrollbar-thumb { background: var(--amber2); border-radius: 2px; }
    .center-tab {
      padding: 4px 10px; font-size: 11px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
      color: #bbb; border-right: 1px solid var(--border);
      letter-spacing: 1px; text-transform: uppercase;
      white-space: nowrap; display: flex; align-items: center; gap: 4px;
      transition: color 0.1s; flex-shrink: 0; height: 100%;
    }
    .center-tab:hover { color: #fff; }
    .center-tab.active { color: var(--amber); background: #0e0e0e; }
    @media (max-width: 768px) {
      .center-tabs { flex: 0 0 44px; }
      .center-tab { padding: 6px 12px; font-size: 12px; }
    }

    /* ─── CENTER PANES ────────────────────────────────── */
    .center-pane {
      flex: 1 1 0; overflow-y: auto; overflow-x: hidden;
      flex-direction: column;
    }
    .center-pane::-webkit-scrollbar { width: 6px; }
    .center-pane::-webkit-scrollbar-track { background: #111; }
    .center-pane::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
    .center-pane::-webkit-scrollbar-thumb:hover { background: #666; }
    @media (max-width: 768px) {
      .center-pane {
        overflow: auto !important;
        min-height: 300px !important;
        flex: 1 1 auto !important;
      }
    }

    /* ─── FUNDING PANEL ───────────────────────────────── */
    .fund-sym  { color: var(--amber); font-weight: 700; font-size: 10px; }
    .fund-rate { font-variant-numeric: tabular-nums; font-weight: 700; }
    .fund-rate.extreme-high { color: var(--red); }
    .fund-rate.extreme-low  { color: var(--green); }
    .fund-rate.normal-pos   { color: var(--text); }
    .fund-rate.normal-neg   { color: var(--text); }
    .fund-bar-wrap { display: inline-block; width: 56px; height: 5px; background: #1a1a1a; border-radius: 1px; vertical-align: middle; position: relative; overflow: hidden; }
    .fund-bar-fill { height: 100%; position: absolute; top: 0; left: 0; border-radius: 1px; }
    .fund-dir { font-size: 9px; }
    .fund-dir.pays-long  { color: var(--red); }
    .fund-dir.pays-short { color: var(--green); }
    .fund-dir.neutral    { color: var(--dim); }
    .fund-ann { color: var(--dim); font-size: 9px; }
    .fund-legend {
      padding: 4px 8px; font-size: 8px; color: var(--dim);
      border-top: 1px solid var(--border); flex: 0 0 auto;
      background: #090909;
    }

    /* ─── NARRATIVE PANEL ─────────────────────────────── */
    .narr-item {
      padding: 7px 8px; border-bottom: 1px solid #0f0f0f;
    }
    .narr-item:hover { background: rgba(255,184,0,0.015); }
    .narr-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
    .narr-name { color: var(--amber); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; flex: 0 0 auto; }
    .narr-trend { font-size: 9px; flex: 0 0 auto; }
    .narr-trend.up   { color: var(--green); }
    .narr-trend.down { color: var(--red); }
    .narr-trend.flat { color: var(--dim); }
    .narr-strength-wrap { flex: 1; height: 4px; background: #1a1a1a; border-radius: 1px; }
    .narr-strength-fill { height: 100%; border-radius: 1px; transition: width 0.5s; }
    .narr-pct { font-size: 9px; font-weight: 700; min-width: 28px; text-align: right; }
    .narr-assets { font-size: 9px; color: var(--dim); margin-top: 2px; }
    .narr-assets span { color: var(--text); }
    .narr-desc { font-size: 9px; color: var(--dim); margin-top: 2px; font-style: italic; }
    .narr-sentiment { font-size: 7px; padding: 1px 5px; border-radius: 1px; letter-spacing: 0.5px; font-weight: 700; text-transform: uppercase; }
    .narr-sentiment.bullish { background: rgba(0,255,65,0.15); color: var(--green); border: 1px solid rgba(0,255,65,0.3); }
    .narr-sentiment.bearish { background: rgba(255,59,59,0.15); color: var(--red); border: 1px solid rgba(255,59,59,0.3); }
    .narr-sentiment.neutral { background: rgba(255,184,0,0.15); color: var(--amber); border: 1px solid rgba(255,184,0,0.3); }
    .narr-badge { font-size: 7px; padding: 1px 5px; border-radius: 1px; letter-spacing: 1px; font-weight: 700; }
    .narr-badge.live { background: var(--green); color: #000; }
    .narr-badge.cached { background: var(--amber2); color: #000; }
    .narr-pill { font-size: 8px; padding: 1px 4px; background: #1a1a1a; border: 1px solid var(--border2); color: var(--text); display: inline-block; margin: 1px 1px 0 0; }
    @keyframes pulse-text { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
    .narr-detecting { animation: pulse-text 1.2s ease-in-out infinite; color: var(--amber); font-size: 10px; padding: 20px; text-align: center; letter-spacing: 2px; }
    @keyframes fund-flash { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
    .fund-extreme-flash { animation: fund-flash 1.2s ease-in-out infinite; }

    /* ─── SCENARIO CARDS ──────────────────────────────── */
    .scen-cards { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
    .scen-card {
      border: 1px solid var(--border2); padding: 9px; border-radius: 1px;
    }
    .scen-card.bull { border-color: #1f3f1f; background: rgba(0,255,65,0.015); }
    .scen-card.base { border-color: #3f2f00; background: rgba(255,184,0,0.015); }
    .scen-card.bear { border-color: #3f1f1f; background: rgba(255,59,59,0.015); }
    .scen-card-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .scen-type { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
    .scen-type.bull { color: var(--green); }
    .scen-type.base { color: var(--amber); }
    .scen-type.bear { color: var(--red); }
    .scen-prob { font-size: 20px; font-weight: 700; margin-left: auto; line-height: 1; }
    .scen-prob.bull { color: var(--green); }
    .scen-prob.base { color: var(--amber); }
    .scen-prob.bear { color: var(--red); }
    .scen-desc { font-size: 10px; color: var(--text); margin-bottom: 5px; line-height: 1.5; }
    .scen-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
    .scen-label { font-size: 8px; color: var(--dim); letter-spacing: 0.5px; }
    .scen-tag {
      font-size: 8px; padding: 1px 5px; border-radius: 2px;
      border: 1px solid var(--border2); color: var(--text);
      background: #0e0e0e; letter-spacing: 0.3px;
    }
    .scen-watch { font-size: 9px; color: var(--blue); }

    /* ─── MARKET AGENTS ───────────────────────────────── */
    .agent-card {
      padding: 7px 8px; border-bottom: 1px solid #0f0f0f;
    }
    .agent-card:hover { background: rgba(255,184,0,0.015); }
    .agent-hdr { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
    .agent-name { font-size: 10px; color: var(--amber); font-weight: 700; flex: 1; }
    .agent-bias {
      font-size: 8px; font-weight: 700; letter-spacing: 1px;
      padding: 1px 7px; border-radius: 2px;
    }
    .agent-bias.bullish { color: var(--green); border: 1px solid #1a3a1a; background: rgba(0,255,65,0.05); }
    .agent-bias.bearish { color: var(--red);   border: 1px solid #3a1a1a; background: rgba(255,59,59,0.05); }
    .agent-bias.neutral { color: var(--amber); border: 1px solid #2a1800; background: rgba(255,184,0,0.05); }
    .agent-conv-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
    .agent-conv-label { font-size: 8px; color: var(--dim); min-width: 58px; }
    .agent-conv-bar  { flex: 1; height: 3px; background: #1a1a1a; border-radius: 1px; }
    .agent-conv-fill { height: 100%; border-radius: 1px; }
    .agent-conv-fill.bullish { background: var(--green); }
    .agent-conv-fill.bearish { background: var(--red); }
    .agent-conv-fill.neutral { background: var(--amber); }
    .agent-conv-pct { font-size: 8px; color: var(--dim); min-width: 26px; text-align: right; }
    .agent-behavior { font-size: 9px; color: var(--dim); line-height: 1.4; }

    /* ─── REPORTS PANEL ───────────────────────────────── */
    .report-btns {
      padding: 7px 8px; display: flex; flex-wrap: wrap; gap: 5px;
      border-bottom: 1px solid var(--border); flex: 0 0 auto;
      background: #090909;
    }
    .report-btn {
      font-family: var(--mono); font-size: 8px; padding: 4px 10px;
      border: 1px solid var(--dim2); background: transparent; color: var(--dim);
      cursor: pointer; letter-spacing: 1px; text-transform: uppercase;
      transition: all 0.1s;
    }
    .report-btn:hover { border-color: var(--amber); color: var(--amber); }
    .report-btn.active { border-color: var(--amber); color: var(--amber); background: rgba(255,184,0,0.07); }
    .report-content {
      flex: 1 1 0; overflow-y: auto; padding: 10px;
    }
    .report-placeholder { color: var(--dim); font-size: 10px; text-align: center; padding: 20px; letter-spacing: 1px; }
    .report-generating { color: var(--amber); font-size: 10px; letter-spacing: 1px; padding: 4px 0; }
    .report-text {
      font-size: 10px; color: var(--text); line-height: 1.7;
      white-space: pre-wrap; letter-spacing: 0.2px;
    }

    /* ─── BRAIN CONSENSUS PANEL ──────────────────────── */
    .brain-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px; padding: 5px;
    }
    .brain-card {
      border: 1px solid var(--border2); padding: 7px 8px;
      background: #090909; position: relative; border-radius: 1px;
    }
    .brain-card.trade-active { border-color: var(--amber); background: rgba(255,184,0,0.025); }
    @keyframes brain-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(255,184,0,0.08); }
      50%      { box-shadow: 0 0 10px 2px rgba(255,184,0,0.22); }
    }
    .brain-card.trade-active { animation: brain-pulse 2.4s ease-in-out infinite; }
    .brain-sym   { color: var(--amber); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
    .brain-price { color: var(--dim); font-size: 9px; margin-left: 5px; }
    .brain-voters { display: flex; gap: 3px; margin: 4px 0 3px; flex-wrap: wrap; }
    .brain-pill {
      font-size: 7px; padding: 1px 4px; border-radius: 2px;
      font-weight: 700; letter-spacing: 0.3px; cursor: default;
    }
    .brain-pill.LONG    { background: rgba(0,255,65,0.15); color: var(--green); border: 1px solid rgba(0,255,65,0.3); }
    .brain-pill.SHORT   { background: rgba(255,59,59,0.15); color: var(--red); border: 1px solid rgba(255,59,59,0.3); }
    .brain-pill.NEUTRAL { background: #141414; color: #444; border: 1px solid #1e1e1e; }
    .brain-dir    { font-size: 15px; position: absolute; top: 5px; right: 7px; line-height: 1; }
    .brain-result { font-size: 9px; font-weight: 700; }
    .brain-reason { font-size: 8px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

    /* ─── CHARTS PANEL ───────────────────────────────── */
    .chart-controls {
      display: flex; align-items: center; gap: 7px; padding: 4px 7px;
      border-bottom: 1px solid var(--border); flex: 0 0 auto; background: #090909;
    }
    .chart-sym-sel {
      background: #0d0d0d; border: 1px solid var(--border2); color: var(--text);
      font-family: var(--mono); font-size: 9px; padding: 2px 5px; outline: none; cursor: pointer;
    }
    .chart-sym-sel:focus { border-color: var(--amber); }
    .chart-tf-btn {
      font-family: var(--mono); font-size: 8px; padding: 1px 6px;
      border: 1px solid var(--border2); background: transparent; color: #444;
      cursor: pointer; letter-spacing: 0.5px;
    }
    .chart-tf-btn.active { border-color: var(--amber); color: var(--amber); }
    .chart-tf-btn:hover  { color: var(--text); border-color: #444; }
    #chart-container     { flex: 1 1 0; overflow: hidden; min-height: 500px; position: relative; }

    /* ─── REFRESH COUNTDOWN ──────────────────────────── */
    .refresh-countdown { font-size: 8px; color: #444; letter-spacing: 0.3px; }
    .narr-age { font-size: 8px; color: var(--dim); margin-left: 2px; }

    /* ─── OPEN INTEREST PANEL ─────────────────────────── */
    .oi-item { padding: 3px 7px; border-bottom: 1px solid #111; display: flex; align-items: center; gap: 5px; }
    .oi-sym { color: var(--amber); font-weight: 700; font-size: 10px; min-width: 44px; flex-shrink: 0; }
    .oi-bar-wrap { flex: 1; height: 5px; background: #1a1a1a; border-radius: 1px; position: relative; overflow: hidden; }
    .oi-bar-fill { height: 100%; position: absolute; top: 0; left: 0; border-radius: 1px; transition: width 0.4s; }
    .oi-val { color: var(--dim); font-size: 9px; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
    .oi-chg { font-size: 9px; font-weight: 700; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
    .oi-chg.pos { color: var(--green); }
    .oi-chg.neg { color: var(--red); }

    /* ─── LIQUIDATIONS FEED ───────────────────────────── */
    .liq-item { padding: 3px 7px; border-bottom: 1px solid #111; display: flex; align-items: center; gap: 5px; }
    .liq-item.long-liq  { background: rgba(255,59,59,0.06); }
    .liq-item.short-liq { background: rgba(0,255,65,0.04); }
    .liq-side       { font-size: 9px; font-weight: 700; min-width: 74px; flex-shrink: 0; }
    .liq-side.long  { color: var(--red); }
    .liq-side.short { color: var(--green); }
    .liq-sym { color: var(--amber); font-size: 9px; min-width: 34px; flex-shrink: 0; }
    .liq-val { color: var(--text); font-size: 9px; flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
    .liq-ts  { color: var(--dim); font-size: 8px; min-width: 28px; text-align: right; flex-shrink: 0; }

    /* ─── SECTORS ─────────────────────────────────────── */
    .sector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; }
    .sector-card { border: 1px solid var(--border2); padding: 7px 8px; background: #090909; }
    .sector-card.best  { border-color: var(--amber2); box-shadow: 0 0 8px rgba(204,146,0,0.15); }
    .sector-card.worst { border-color: #2a1010; opacity: 0.7; }
    .sector-name { color: var(--amber); font-size: 10px; font-weight: 700; letter-spacing: 1px; margin-bottom: 3px; }
    .sector-avg { font-size: 14px; font-weight: 700; margin-bottom: 5px; line-height: 1; }
    .sector-avg.pos { color: var(--green); }
    .sector-avg.neg { color: var(--red); }
    .sector-coins { display: flex; flex-wrap: wrap; gap: 2px; }
    .sector-coin { font-size: 8px; padding: 1px 4px; background: #141414; border: 1px solid var(--border); }
    .sector-coin.top { color: var(--green); border-color: #1a3a1a; }
    .sector-coin.bot { color: var(--red);   border-color: #3a1a1a; }
    .sector-coin.mid { color: var(--dim); }
    .sector-hdr-desc { font-size: 8px; color: var(--dim); padding: 4px 8px; border-bottom: 1px solid var(--border); flex: 0 0 auto; letter-spacing: 0.5px; }

    /* ─── MULTI CHART ─────────────────────────────────── */
    .multi-chart-cell {
      border: 1px solid var(--border2);
      background: #090909;
      display: flex; flex-direction: column;
      cursor: pointer;
      min-height: 0;
      overflow: hidden;
    }
    .multi-chart-cell:hover { border-color: var(--amber2); }
    .multi-cell-header {
      display: flex; align-items: center; gap: 6px;
      padding: 3px 7px; background: #0a0a0a;
      border-bottom: 1px solid var(--border);
      flex: 0 0 auto;
    }
    .multi-sym { color: var(--amber); font-size: 10px; font-weight: 700; }
    .multi-price { color: var(--text); font-size: 10px; font-variant-numeric: tabular-nums; }
    .multi-chg { font-size: 9px; font-variant-numeric: tabular-nums; margin-left: auto; }
    .multi-chg.pos { color: var(--green); }
    .multi-chg.neg { color: var(--red); }
    .multi-chg.neu { color: var(--grey); }

    /* ─── SOUND TOGGLE ────────────────────────────────── */
    #sound-toggle {
      background: transparent; border: 1px solid var(--dim2);
      color: var(--dim); font-family: var(--mono); font-size: 10px;
      padding: 1px 6px; cursor: pointer; letter-spacing: 0.5px;
      transition: all 0.1s;
    }
    #sound-toggle:hover { border-color: var(--amber); color: var(--amber); }
    #sound-toggle.enabled { border-color: var(--green); color: var(--green); }

    /* ─── MOBILE RESPONSIVE ───────────────────────────── */
    #hamburger-btn {
      display: none; background: transparent; border: none;
      color: var(--amber); font-size: 16px; cursor: pointer;
      padding: 0 8px; flex-shrink: 0;
    }

    @media (max-width: 768px) {
      html, body { overflow: auto; font-size: 13px; }

      #hamburger-btn { display: block; }

      #topbar {
        flex: 0 0 auto; flex-wrap: wrap; height: auto;
        padding: 4px 6px; gap: 0;
      }
      .tb-logo { font-size: 11px; margin-right: 8px; }
      .tb-item { margin-right: 8px; }
      .tb-val { font-size: 13px; }
      .tb-sep { display: none; }

      #main-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        overflow: visible;
        height: auto;
      }

      /* Hide column resize handles on mobile */
      .col-resize { display: none !important; }
      .resize-handle { display: block !important; height: 12px; touch-action: none; }

      /* Show right hamburger on mobile */
      #hamburger-right-btn { display: inline-block !important; }

      /* Left col: slide-over panel */
      .col-left, #col-left,
      #main-grid > .col:first-child {
        display: none !important;
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 8000;
        background: var(--black) !important;
        border-right: 1px solid var(--border);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        flex-direction: column !important;
      }
      .col-left.mobile-open, #col-left.mobile-open,
      #main-grid > .col:first-child.mobile-open {
        display: flex !important;
      }
      /* Left panels: fill nicely */
      .col-left.mobile-open .panel,
      #col-left.mobile-open .panel,
      #main-grid > .col:first-child.mobile-open .panel {
        flex: none !important;
        min-height: 120px;
        max-height: none;
        overflow-y: auto;
      }
      /* Positions panel: expandable on mobile */
      #col-left.mobile-open #positions-panel,
      .col-left.mobile-open #positions-panel {
        min-height: 150px;
        max-height: none;
      }

      /* Mobile positions panel below charts */
      #mobile-positions-panel {
        display: block !important;
        width: 100%;
        order: 3;
      }

      /* Collapse chart indicators on mobile */
      #chart-ind-toggle { display: inline-block !important; }
      #chart-ind-row { display: none !important; }
      #chart-ind-row.show { display: flex !important; }
      #chart-ema-legend { display: none !important; }
      /* Show mobile zoom buttons */
      #mobile-zoom-btns { display: inline-flex !important; }
      /* Top movers table: compact on mobile */
      #movers-table { font-size: 8px !important; }
      #movers-table th, #movers-table td {
        padding: 3px 2px !important;
        font-size: 8px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* Shrink MOM column on mobile */
      #movers-table th:nth-child(7),
      #movers-table td:nth-child(7) {
        max-width: 20px !important;
        padding: 3px 1px !important;
      }
      /* VOL column: remove extra space */
      #movers-table th:nth-child(8),
      #movers-table td:nth-child(8) {
        padding-right: 4px !important;
      }

      /* Positions table: compact on mobile */
      #positions-table { font-size: 8px !important; }
      #positions-table th, #positions-table td {
        padding: 3px 2px !important;
        font-size: 8px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* Hide LIQ and VALUE columns on mobile (3rd and 7th col) */
      #positions-table th:nth-child(3),
      #positions-table td:nth-child(3),
      #positions-table th:nth-child(7),
      #positions-table td:nth-child(7) {
        display: none !important;
      }
      /* Shrink QTY column */
      #positions-table th:nth-child(4),
      #positions-table td:nth-child(4) {
        max-width: 45px;
      }

      /* Resize handles on mobile — all panels */
      #chart-resize-handle, #mobile-pos-resize {
        display: block !important;
        height: 16px !important;
        background: #111 !important;
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
        position: relative;
      }
      #chart-resize-handle::after, #mobile-pos-resize::after {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #555;
        border-radius: 2px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* Center col: full width, main content — ensure visible height */
      #main-grid > .col:nth-child(2) {
        order: 2; width: 100% !important;
        border-right: none;
        min-height: 400px !important;
        display: flex !important;
        flex-direction: column !important;
      }
      .col-center .panel { flex: 1 1 auto !important; min-height: 200px !important; }

      /* Right col: slide-over panel from right */
      .col-right, #col-right,
      #main-grid > .col:last-child {
        display: none !important;
        position: fixed !important;
        top: 0; right: 0; bottom: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 8000;
        background: var(--black) !important;
        border-left: none;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        flex-direction: column !important;
      }
      .col-right.mobile-open, #col-right.mobile-open,
      #main-grid > .col:last-child.mobile-open {
        display: flex !important;
      }
      .col-right.mobile-open .panel,
      #col-right.mobile-open .panel,
      #main-grid > .col:last-child.mobile-open .panel {
        flex: 1 1 auto !important;
        min-height: 200px;
        max-height: none;
        overflow-y: auto;
      }
      /* Right col: scrollable full height on mobile */
      .col-right.mobile-open, #col-right.mobile-open,
      #main-grid > .col:last-child.mobile-open {
        padding-bottom: 60px;
      }
      /* Show close buttons on mobile */
      #mobile-close-left, #mobile-close-right {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 100;
      }

      /* Dark overlay when panel is open */
      #mobile-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 7999;
      }
      #mobile-overlay.show { display: block; }

      /* Tab bar: sticky, scrollable, touch-friendly */
      .center-tabs {
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        position: sticky; top: 0; z-index: 40;
        background: var(--panel);
        border-bottom: 2px solid var(--amber);
        scrollbar-width: none;
      }
      .center-tabs::-webkit-scrollbar { display: none; }
      .center-tab {
        height: 44px; font-size: 13px;
        padding: 4px 14px; min-width: 60px;
        color: #ccc !important;
        white-space: nowrap;
        font-weight: bold;
      }
      .center-tab.active {
        color: var(--amber) !important;
        border-bottom: 2px solid var(--amber);
      }

      /* Charts: full width, taller on mobile */
      #chart-container { min-height: 300px; height: 50vh; }
      canvas { max-width: 100%; }
      /* Chart controls: wrap nicely */
      #chart-container + div, .chart-controls {
        flex-wrap: wrap !important;
        gap: 2px !important;
      }
      /* TF + overlay buttons: touch-friendly */
      .chart-tf-btn {
        min-height: 36px !important;
        min-width: 36px;
        font-size: 10px !important;
        padding: 4px 6px !important;
      }

      /* Hamburger: always visible on mobile */
      #hamburger-btn { display: block !important; }

      /* Bottom bar: stack items in 2 cols */
      #bottombar {
        flex-wrap: wrap; height: auto; flex: 0 0 auto;
        padding: 4px;
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 16px));
      }
      /* Native APK bottom nav bar offset — added via JS when BeastAndroid detected */
      body.beast-apk #bottombar {
        margin-bottom: 80px;
      }
      body.beast-apk #mobile-positions-panel {
        margin-bottom: 80px;
      }
      .acct-block { flex: 1 1 48%; min-width: 140px; padding: 2px 6px !important; }
      .acct-title { font-size: 7px; margin-bottom: 1px !important; }
      .acct-row { gap: 3px; }
      .acct-item .lbl { font-size: 6px; }
      .acct-item .val { font-size: 9px; }

      /* Quick trade panel: fill remaining screen on mobile */
      #qt-panel {
        min-height: 50vh !important;
        flex: 1 1 auto !important;
        position: sticky; bottom: 0; z-index: 50;
        background: var(--panel);
        border-top: 2px solid var(--amber);
      }

      /* Buttons: min touch size (44px iOS guideline) */
      button, .eng-btn, .report-btn, .radar-tab,
      .close-pos-btn {
        min-height: 36px;
      }
      .eng-btn { min-height: 28px; }

      /* Inputs: readable, no zoom on focus */
      input, select { font-size: 16px !important; }

      /* Tables: compact but readable */
      table { font-size: 10px; }
      td, th { padding: 3px 4px; }
      /* Ticker table: wider touch targets */
      .bt tr { min-height: 32px; }
      .bt td:first-child { padding-left: 6px; }

      /* Multi chart grid: single column */
      #multi-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 200px); }

      /* Trade log */
      #tradelog-wrap.open { flex-basis: 200px; }

      /* Market overview grid: 2 cols */
      .ti-market-grid { grid-template-columns: repeat(2, 1fr); }

      /* Sector grid: 1 col */
      .sector-grid { grid-template-columns: 1fr; }

      /* Login box: full width */
      .login-box { min-width: 0; width: 90vw; max-width: 360px; padding: 24px 20px; }
      .login-box h1 { font-size: 18px; }

      /* Top bar: compact */
      .topbar { flex-wrap: wrap; height: auto; padding: 4px 6px; gap: 4px; }
      .tb-item { flex: 0 1 auto; }

      /* Panel body: horizontal scroll when needed */
      .panel-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

      /* Alpha tab: full width, readable */
      #alpha-body { font-size: 10px; }

      /* Position close buttons: bigger touch target */
      .close-pos-btn { min-width: 32px; min-height: 32px; font-size: 14px; }

      /* Allow scroll on mobile for the full page */
      body { overflow: visible; height: auto; }
      #terminal { overflow-y: auto; overflow-x: hidden; height: auto; min-height: 100vh; }
      #login-screen { position: fixed; }

      /* Smooth scrolling */
      * { -webkit-overflow-scrolling: touch; }
    }

    /* Small phones (< 400px) */
    @media (max-width: 400px) {
      .tb-logo { font-size: 10px; }
      .tb-val { font-size: 11px; }
      .center-tab { font-size: 8px; padding: 0 5px; min-width: 36px; height: 36px; }
      .chart-tf-btn { min-height: 32px !important; min-width: 30px; font-size: 9px !important; }
      #chart-container { min-height: 250px; height: 40vh; }
      .acct-block { flex: 1 1 100%; }
      td, th { padding: 2px 3px; font-size: 9px; }
    }

    /* ─── TRADE CONFIRM MODAL ────────────────────────── */
    @keyframes tcm-spin { to { transform:rotate(360deg); } }
    #trade-confirm-modal.show { display:flex !important; }
    .tcm-row {
      display:flex; justify-content:space-between; align-items:center;
      font-size:9px; padding:2px 0;
    }
    .tcm-lbl { color:var(--dim); letter-spacing:0.5px; }
    .tcm-val { color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
    @keyframes tcm-flash-green {
      0%  { background:rgba(0,255,65,0.25); border-color:var(--green); }
      100%{ background:#0d0d0d; border-color:#2a2a2a; }
    }
    @keyframes tcm-flash-red {
      0%  { background:rgba(255,59,59,0.25); border-color:var(--red); }
      100%{ background:#0d0d0d; border-color:#2a2a2a; }
    }
    #tcm-box.flash-success { animation:tcm-flash-green 1s ease; }
    #tcm-box.flash-error   { animation:tcm-flash-red 1s ease; }

    /* ─── QT SYM DROPDOWN ────────────────────────────── */
    .qt-sym-item {
      padding:4px 8px; font-size:9px; cursor:pointer;
      color:var(--dim); border-bottom:1px solid #111;
      display:flex; align-items:center; gap:6px; letter-spacing:0.5px;
    }
    .qt-sym-item:hover, .qt-sym-item.sel { background:#111; color:var(--amber); }
    .qt-sym-item .qs-price { margin-left:auto; color:var(--text); font-variant-numeric:tabular-nums; }

    /* ─── TOKEN INFO PANEL ────────────────────────────── */
    .ti-header { display:flex; align-items:center; gap:10px; padding:8px; background:#0d0d0d; border:1px solid var(--border2); margin-bottom:8px; }
    .ti-logo { width:36px; height:36px; border-radius:50%; background:#111; object-fit:cover; flex-shrink:0; border:1px solid #333; }
    .ti-logo-placeholder { width:36px; height:36px; border-radius:50%; background:#1a1a1a; border:1px solid #333; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; }
    .ti-name-block { flex:1; }
    .ti-name { color:var(--amber); font-size:13px; font-weight:700; letter-spacing:1px; }
    .ti-sym-label { color:var(--dim); font-size:9px; letter-spacing:0.5px; }
    .ti-rank-badge { font-size:8px; font-weight:700; padding:2px 7px; border-radius:2px; letter-spacing:1px; flex-shrink:0; }
    .ti-rank-gold   { background:rgba(255,184,0,0.2); color:var(--amber); border:1px solid var(--amber2); }
    .ti-rank-silver { background:rgba(180,180,180,0.12); color:#aaa; border:1px solid #555; }
    .ti-rank-gray   { background:rgba(80,80,80,0.2); color:#666; border:1px solid #333; }
    .ti-price-row { display:flex; gap:6px; flex-wrap:wrap; padding:6px 8px; background:#0d0d0d; border:1px solid var(--border2); margin-bottom:6px; align-items:center; }
    .ti-price-main { color:var(--text); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
    .ti-chg-pill { font-size:9px; font-weight:700; padding:2px 6px; border-radius:2px; font-variant-numeric:tabular-nums; }
    .ti-chg-pos { background:rgba(0,255,65,0.1); color:var(--green); border:1px solid rgba(0,255,65,0.25); }
    .ti-chg-neg { background:rgba(255,59,59,0.1); color:var(--red); border:1px solid rgba(255,59,59,0.25); }
    .ti-chg-neu { background:#1a1a1a; color:var(--dim); border:1px solid #2a2a2a; }
    .ti-ath-label { font-size:8px; color:var(--dim); margin-left:auto; }
    .ti-ath-val { font-size:9px; color:var(--text); }
    .ti-market-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:6px; }
    .ti-metric-card { background:#0d0d0d; border:1px solid var(--border2); padding:5px 8px; }
    .ti-metric-label { font-size:7.5px; color:var(--dim); letter-spacing:0.5px; text-transform:uppercase; }
    .ti-metric-val { font-size:10px; color:var(--text); font-variant-numeric:tabular-nums; margin-top:1px; }
    .ti-social-row { display:flex; gap:5px; flex-wrap:wrap; padding:6px 0; margin-bottom:6px; }
    .ti-social-link { display:inline-flex; align-items:center; gap:4px; font-size:9px; padding:3px 8px; border-radius:2px; text-decoration:none; cursor:pointer; border:1px solid var(--border2); color:var(--dim); background:#0d0d0d; white-space:nowrap; }
    .ti-social-link:hover { border-color:var(--amber); color:var(--amber); }
    .ti-social-twitter { border-color:#1da1f2; color:#1da1f2; background:rgba(29,161,242,0.05); }
    .ti-social-twitter:hover { background:rgba(29,161,242,0.12); }
    .ti-social-telegram { border-color:#0088cc; color:#0088cc; background:rgba(0,136,204,0.05); }
    .ti-social-reddit   { border-color:#ff4500; color:#ff4500; background:rgba(255,69,0,0.05); }
    .ti-social-discord  { border-color:#5865f2; color:#5865f2; background:rgba(88,101,242,0.05); }
    .ti-social-github   { border-color:#6e7681; color:#6e7681; background:rgba(110,118,129,0.05); }
    .ti-social-web      { border-color:var(--amber2); color:var(--amber2); background:rgba(204,146,0,0.05); }
    .ti-social-explorer { border-color:#9b59b6; color:#9b59b6; background:rgba(155,89,182,0.05); }
    .ti-section-title { font-size:8px; color:var(--amber); letter-spacing:2px; text-transform:uppercase; margin:8px 0 4px; font-weight:700; }
    .ti-desc { font-size:9px; color:var(--dim); line-height:1.6; padding:6px 8px; background:#0a0a0a; border:1px solid #181818; border-radius:1px; margin-bottom:6px; }
    .ti-desc span { color:var(--text); }
    .ti-news-table { width:100%; border-collapse:collapse; font-size:9px; }
    .ti-news-table td { padding:4px 6px; border-bottom:1px solid #111; vertical-align:top; }
    .ti-news-table td:first-child { white-space:nowrap; color:var(--dim); width:55px; }
    .ti-news-headline { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:400px; display:block; }
    .ti-news-headline:hover { color:var(--amber); text-decoration:none; }
    .ti-news-source { color:var(--dim); font-size:8px; }
    .ti-loading { text-align:center; padding:30px; color:var(--dim); font-size:10px; letter-spacing:2px; }
    @keyframes ti-spin { to { transform:rotate(360deg); } }
    .ti-spinner { display:inline-block; width:12px; height:12px; border:2px solid var(--border2); border-top-color:var(--amber); border-radius:50%; animation:ti-spin 0.8s linear infinite; vertical-align:middle; margin-right:6px; }

/* ─── EXTRA STYLES ─── */
  .ctx-item:hover { background:rgba(255,184,0,0.08); }
  #sltp-modal.show { display:flex !important; }
  .sltp-pct-btn { background:#1a1a1a; border:1px solid #333; color:#888; padding:5px; font-family:monospace; font-size:9px; cursor:pointer; border-radius:3px; }
  .sltp-pct-btn:hover { border-color:#666; color:#ccc; }
  .sltp-pct-btn.active { border-color:var(--green); color:var(--green); background:rgba(0,255,65,0.1); }
/* ─── FLOW PANEL RESIZE HANDLES ─── */
.flow-resize-handle {
  flex: 0 0 4px;
  background: var(--border);
  cursor: row-resize;
  transition: background 0.2s;
  margin: 0;
}
.flow-resize-handle:hover, .flow-resize-handle.active {
  background: var(--amber);
}

/* ─── Balance hiding ─── */
.balance-hidden .tb-balance-item,
.balance-hidden .acct-block .val.amber,
.balance-hidden #ba-main-eq,
.balance-hidden #ba-sub-eq,
.balance-hidden #ba-main-av,
.balance-hidden #ba-sub-av,
.balance-hidden #ba-main-upl,
.balance-hidden #ba-sub-upl,
.balance-hidden #ba-tot-eq,
.balance-hidden #ba-open-pnl,
.balance-hidden #ba-day-pnl,
.balance-hidden #tb-equity,
.balance-hidden #tb-upl {
  filter: blur(6px) !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* ─── Mobile: Positions bigger, Quick Trade at bottom ─── */
@media (max-width: 768px) {
  #col-left {
    display: flex !important;
    flex-direction: column !important;
  }
  #positions-panel {
    max-height: 50% !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }
  #qt-panel {
    order: 99 !important;
    flex: 0 0 auto !important;
  }
}

/* ─── Mobile: Bigger positions panel ─── */
@media (max-width: 768px) {
  #col-left > .panel:nth-child(2) {
    flex: 1 1 auto !important;
    min-height: 200px !important;
    max-height: none !important;
  }
  #col-left > .panel:first-child {
    flex: 0 0 auto !important;
    max-height: 35vh !important;
  }
}


/* ─── Non-admin: hide sensitive data ─── */
body.user-role-trader .admin-only-tab { display: none !important; }
body.user-role-trader #admin-tab-btn { display: none !important; }
body.user-role-trader .admin-sensitive {
  display: none !important;
}

/* Fix: Bottom toggle panels overlay on desktop instead of expanding flex */
@media (min-width: 769px) {
  #tradelog-wrap.beast-open, #open-orders-wrap.beast-open, #order-history-wrap.beast-open {
    display: block !important;
    position: fixed !important;
    bottom: 28px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 8000 !important;
    height: 300px !important;
    max-height: 300px !important;
    flex-basis: 300px !important;
    overflow-y: auto !important;
    overflow: auto !important;
    background: #080a0f !important;
    border-top: 2px solid var(--amber) !important;
  }
}

/* Hide command bar on mobile — not useful on phones */
@media (max-width: 768px) {
  #cmdbar, #cmd-suggest { display: none !important; }
  #tradelog-wrap.beast-open, #open-orders-wrap.beast-open, #order-history-wrap.beast-open {
    display: block !important;
    height: auto !important;
    max-height: 300px !important;
    flex-basis: 300px !important;
    overflow-y: auto !important;
    overflow: auto !important;
    background: #080a0f !important;
    border-top: 2px solid var(--amber) !important;
  }
}

/* ─── POP-OUT BUTTONS ──────────────────────────────── */
.popout-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; font-size: 11px; cursor: pointer;
  opacity: 0; transition: opacity 0.15s;
  color: #888; padding: 1px 3px; border-radius: 2px;
  vertical-align: middle;
}
.center-tab:hover .popout-btn { opacity: 0.7; }
.popout-btn:hover { opacity: 1 !important; color: var(--amber); background: rgba(255,170,0,0.1); }
.center-tab.popped-out {
  opacity: 0.45; border-bottom: 2px solid #666;
}
.center-tab.popped-out::after {
  content: ' ⧉'; font-size: 9px; color: #888;
}
.popout-placeholder {
  display: flex; align-items: center; justify-content: center;
}

/* ─── POP-OUT MODE (window with ?popout=tab) ────────── */
.popout-bar {
  display: none;
  align-items: center; justify-content: space-between;
  padding: 6px 14px; background: #111; border-bottom: 1px solid #333;
  position: sticky; top: 0; z-index: 9999;
  font-size: 13px; font-weight: 600; color: var(--amber);
}
.popout-bar-left {
  display: flex; align-items: center; gap: 8px;
}
.popout-dock-btn {
  background: #222; color: #eee; border: 1px solid #444;
  padding: 4px 14px; border-radius: 4px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  transition: all 0.15s;
}
.popout-dock-btn:hover { background: #ff4444; border-color: #ff4444; color: #fff; }

body.popout-mode .popout-bar { display: flex; }
body.popout-mode #topbar,
body.popout-mode #macro-alert-banner,
body.popout-mode .center-tabs,
body.popout-mode .col-left,
body.popout-mode .col-right,
body.popout-mode .col-resize,
body.popout-mode #bottombar,
body.popout-mode #mobile-overlay,
body.popout-mode #mobile-close-left { display: none !important; }
body.popout-mode #terminal {
  display: flex !important; flex-direction: column !important;
  height: 100vh !important;
}
body.popout-mode .popout-bar {
  flex: 0 0 32px !important;
}
body.popout-mode #main-grid {
  display: flex !important; flex: 1 1 0 !important;
  min-height: 0 !important;
}
body.popout-mode .col-center {
  width: 100% !important; max-width: 100% !important;
  flex: 1 1 0 !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important;
}
body.popout-mode .center-pane {
  flex: 1 1 0 !important; min-height: 0 !important;
  overflow-y: auto !important;
}