:root {
    --bg0: #0a0b0e;
    --bg1: #111318;
    --bg2: #181c24;
    --bg3: #1e2330;
    --border: #252d3d;
    --border2: #2e3850;
    --text0: #e8eaf0;
    --text1: #9da8bc;
    --text2: #c2c4c9;
    --green: #26a69a;
    --green2: #0d6b65;
    --red: #ef5350;
    --red2: #8b2320;
    --blue: #2196f3;
    --blue2: #1565c0;
    --amber: #ff9800;
    --purple: #9c27b0;
    --accent: #4eedff;
    --bggreen: #085250;
    --bgred: #f32121;
    --bgred2: #ff8484;
    --font: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { height:100%; background:var(--bg0); color:var(--text0); font-family:var(--font); font-size:12px; overflow:hidden; }

  /* LAYOUT */
  #app { display:flex; flex-direction:column; height:100vh; }
  #topbar { display:flex; align-items:center; gap:0; height:40px; background:var(--bg1); border-bottom:1px solid var(--border); flex-shrink:0; }
  #main { display:flex; flex:1; overflow:hidden; }
  #sidebar { width:220px; background:var(--bg1); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
  #center { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
  #right-panel { width:320px; background:var(--bg1); border-left:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; transition:width .2s; }
  #right-panel.collapsed { width:0; overflow:hidden; }
  #bottombar { height:28px; background:var(--bg1); border-top:1px solid var(--border); display:flex; align-items:center; padding:0 12px; gap:16px; flex-shrink:0; }

  /* TOPBAR */
  .logo { padding:0 16px; font-size:15px; font-weight:700; color:var(--accent); letter-spacing:2px; border-right:1px solid var(--border); height:100%; display:flex; align-items:center; }
  .symbol-display { display:flex; align-items:center; gap:8px; padding:0 16px; border-right:1px solid var(--border); height:100%; cursor:pointer; }
  .symbol-display:hover { background:var(--bg2); }
  .sym-name { font-size:14px; font-weight:700; color:var(--text0); }
  .sym-price { font-size:14px; font-weight:600; }
  .sym-change { font-size:11px; }
  .up { color:var(--green); }
  .dn { color:var(--red); }
  .topbar-stats { display:flex; gap:0; padding:0 8px; overflow:hidden; }
  .tstat { padding:0 12px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--border); }
  .tstat-label { font-size:9px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; }
  .tstat-val { font-size:11px; color:var(--text1); font-weight:600; }
  .tstat-basis-row { display:flex; align-items:center; gap:6px; }
  .basis-ai-btn { font-size:8px; font-weight:700; letter-spacing:.5px; padding:1px 5px; border-radius:3px; border:1px solid var(--blue); background:var(--blue2); color:#fff; cursor:pointer; line-height:1.4; transition:filter .12s; }
  .basis-ai-btn:hover { filter:brightness(1.2); }
  .basis-ai-btn:active { transform:translateY(1px); }
  .basis-pop { position:fixed; top:52px; right:16px; z-index:300; width:320px; max-width:calc(100vw - 32px); background:var(--bg2); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.5); overflow:hidden; }
  .basis-pop-head { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border); }
  .basis-pop-title { font-size:10px; font-weight:700; color:var(--text0); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .basis-pop-verdict { font-size:10px; font-weight:700; letter-spacing:.5px; padding:2px 8px; border-radius:4px; flex-shrink:0; }
  .basis-pop-verdict.long { background:var(--green2); color:var(--green); }
  .basis-pop-verdict.short { background:var(--bgred2); color:var(--red); }
  .basis-pop-verdict.wait { background:var(--bg3); color:var(--text1); }
  .basis-pop-spin { font-size:12px; color:var(--text2); flex-shrink:0; }
  .basis-pop-close { background:none; border:none; color:var(--text2); cursor:pointer; font-size:12px; line-height:1; padding:0 2px; flex-shrink:0; }
  .basis-pop-close:hover { color:var(--red); }
  .basis-pop-body { padding:10px; font-size:11px; line-height:1.5; color:var(--text1); white-space:pre-wrap; word-break:break-word; max-height:50vh; overflow-y:auto; }
  .basis-pop-foot { padding:6px 10px; border-top:1px dashed var(--border2); font-size:8px; color:var(--text2); }
  .topbar-right { margin-left:auto; display:flex; align-items:center; gap:0; height:100%; }
  .tb-btn { padding:0 14px; height:100%; display:flex; align-items:center; gap:6px; cursor:pointer; border-left:1px solid var(--border); font-size:11px; color:var(--text1); background:none; border-top:none; border-right:none; border-bottom:none; transition:all .15s; }
  .tb-btn:hover { background:var(--bg2); color:var(--text0); }
  .tb-btn.active { color:var(--accent); }
  .tb-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; }
  .dot { width:6px; height:6px; border-radius:50%; }
  .dot.green { background:var(--green); }
  .dot.red { background:var(--red); }

  /* SIDEBAR */
  .sidebar-tabs { display:flex; border-bottom:1px solid var(--border); }
  .stab { flex:1; padding:8px 0; text-align:center; cursor:pointer; font-size:10px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; border:none; background:none; transition:all .15s; }
  .stab.active { color:var(--accent); border-bottom:2px solid var(--accent); }
  .stab:hover { color:var(--text0); }
  .sidebar-search { padding:6px 8px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
  .sidebar-search .search-row { display:flex; gap:6px; align-items:center; }
  .sidebar-search input { flex:1; min-width:0; background:var(--bg2); border:1px solid var(--border2); color:var(--text0); padding:6px 8px; border-radius:4px; font-size:11px; font-family:var(--font); outline:none; }
  .sidebar-search input:focus { border-color:var(--accent); }
  .sidebar-search input::placeholder { color:var(--text2); }
  .minvol-select { background:var(--bg2); border:1px solid var(--border2); color:var(--text1); padding:0 4px; border-radius:4px; font-size:10px; font-family:var(--font); outline:none; cursor:pointer; flex-shrink:0; }
  .minvol-select:focus { border-color:var(--accent); }
  .minvol-select.active { border-color:var(--accent); color:var(--accent); }
  .symbol-list { overflow-y:auto; flex:1; }
  .sym-item { display:flex; align-items:center; padding:7px 10px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .1s; gap:8px; }
  .sym-item:hover { background:var(--bg2); }
  .sym-item.active { background:var(--bg3); border-left:2px solid var(--accent); }
  .sym-item-name { font-size:11px; font-weight:700; color:var(--text0); flex:1; }
  .sym-item-price { font-size:10px; font-weight:600; }
  .sym-item-change { font-size:9px; }
  .sym-item-vol { font-size:9px; color:var(--text2); }
  .sym-new-badge { display:inline-block; background:var(--green2); color:var(--green); font-size:8px; font-weight:700; letter-spacing:.5px; padding:1px 4px; border-radius:3px; margin-left:4px; vertical-align:middle; }
  .sym-item-age { font-size:9px; color:var(--blue); }
  .market-switch { display:flex; gap:4px; }
  .sym-star { cursor:pointer; color:var(--text2); font-size:12px; transition:color .15s; }
  .mkt-sw { flex:1; padding:4px 0; border-radius:3px; cursor:pointer; font-size:9px; font-weight:700; letter-spacing:.5px; font-family:var(--font); color:var(--text2); background:var(--bg3); border:1px solid var(--border); transition:all .15s; }
  .mkt-sw:hover { border-color:var(--accent); color:var(--text0); }
  .mkt-sw.active { border-color:var(--accent); color:var(--accent); background:rgba(78,237,255,.1); }
  #mkt-spot.active { border-color:var(--amber); color:var(--amber); background:rgba(255,167,38,.1); }
  .sym-mkt { flex-shrink:0; width:16px; height:16px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; letter-spacing:0; border:1px solid var(--border); color:var(--text2); background:var(--bg3); }
  .sym-mkt.both { cursor:pointer; transition:all .12s; }
  .sym-mkt.both:hover { border-color:var(--accent); color:var(--text0); }
  .sym-mkt.futures { border-color:rgba(78,237,255,.35); color:var(--accent); }
  .sym-mkt.spot { border-color:rgba(255,167,38,.4); color:var(--amber); }
  .sym-mkt.single { opacity:.55; cursor:default; }
  .sym-star.starred { color:var(--amber); }
  .watchlist-empty { padding:20px; text-align:center; color:var(--text2); font-size:11px; }
  .watchlist-bar { display:none; flex-direction:column; border-bottom:1px solid var(--border); background:var(--bg2); }
  .wl-row { display:flex; align-items:center; gap:4px; padding:5px 8px; }
  .wl-picker-wrap { position:relative; flex:1; min-width:0; }
  .wl-picker-btn { width:100%; display:flex; align-items:center; gap:4px; padding:4px 6px; border-radius:4px; border:1px solid var(--border2); background:var(--bg3); color:var(--text0); font-size:10px; font-family:var(--font); cursor:pointer; transition:border-color .12s; text-align:left; }
  .wl-picker-btn:hover, .wl-picker-btn.open { border-color:var(--accent); color:var(--text0); }
  .wl-picker-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wl-chev { flex-shrink:0; font-size:8px; color:var(--text2); transition:transform .12s; }
  .wl-picker-btn.open .wl-chev { transform:rotate(180deg); color:var(--accent); }
  .wl-picker-menu { position:absolute; top:calc(100% + 3px); left:0; right:0; z-index:40; max-height:180px; overflow-y:auto; background:var(--bg1); border:1px solid var(--border2); border-radius:4px; box-shadow:0 6px 20px rgba(0,0,0,.45); padding:3px; }
  .wl-picker-item { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; padding:5px 7px; border:none; border-radius:3px; background:none; color:var(--text1); font-size:10px; font-family:var(--font); cursor:pointer; text-align:left; transition:background .1s; }
  .wl-picker-item:hover { background:var(--bg3); color:var(--text0); }
  .wl-picker-item.active { background:rgba(78,237,255,.1); color:var(--accent); }
  .wl-picker-count { flex-shrink:0; font-size:9px; color:var(--text2); }
  .wl-picker-item.active .wl-picker-count { color:var(--accent); opacity:.75; }
  .wl-btn { flex-shrink:0; width:22px; height:22px; padding:0; border-radius:3px; border:1px solid var(--border2); background:var(--bg3); color:var(--text1); font-size:12px; line-height:1; cursor:pointer; font-family:var(--font); transition:all .12s; }
  .wl-btn:hover { border-color:var(--accent); color:var(--accent); }
  .wl-btn:disabled { opacity:.35; cursor:not-allowed; }
  .wl-btn.wl-del:hover { border-color:var(--red); color:var(--red); }
  .wl-form { display:flex; align-items:center; gap:5px; padding:0 8px 6px; animation:wlFormIn .12s ease; }
  @keyframes wlFormIn { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
  .wl-form-input { flex:1; min-width:0; background:var(--bg3); border:1px solid var(--accent); color:var(--text0); padding:4px 7px; border-radius:3px; font-size:10px; font-family:var(--font); outline:none; }
  .wl-form-input::placeholder { color:var(--text2); }
  .wl-form-msg { flex:1; min-width:0; font-size:10px; color:var(--text1); line-height:1.3; }
  .wl-form-msg b { color:var(--text0); font-weight:600; }
  .wl-form-actions { display:flex; gap:4px; flex-shrink:0; }
  .wl-form-btn { padding:3px 8px; border-radius:3px; border:1px solid var(--border2); background:var(--bg3); color:var(--text1); font-size:9px; font-family:var(--font); cursor:pointer; transition:all .12s; white-space:nowrap; }
  .wl-form-btn:hover { border-color:var(--accent); color:var(--accent); }
  .wl-form-btn.primary { border-color:var(--accent); color:var(--accent); background:rgba(78,237,255,.08); }
  .wl-form-btn.primary:hover { background:rgba(78,237,255,.16); }
  .wl-form-btn.danger { border-color:var(--red); color:var(--red); background:rgba(239,83,80,.08); }
  .wl-form-btn.danger:hover { background:rgba(239,83,80,.16); }

  /* CHART AREA */
  #chart-toolbar { height:36px; background:var(--bg2); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 8px; gap:4px; flex-shrink:0; }
  .tf-btn { padding:3px 8px; border-radius:3px; cursor:pointer; font-size:10px; color:var(--text1); background:none; border:none; font-family:var(--font); transition:all .15s; }
  .tf-btn:hover { background:var(--bg3); color:var(--text0); }
  .tf-btn.active { background:var(--accent); color:#0a0b0e; }
  .toolbar-sep { width:1px; height:18px; background:var(--border); margin:0 4px; }
  .ind-btn { padding:3px 10px; border-radius:3px; cursor:pointer; font-size:10px; color:var(--text1); background:var(--bg3); border:1px solid var(--border); font-family:var(--font); transition:all .15s; }
  .ind-btn:hover { border-color:var(--accent); color:var(--text0); }
  .ind-heatmap { margin-top:10px; border-top:1px solid var(--border); padding-top:10px; }
  .ind-heatmap .ind-card.on { border-color:var(--amber); }
  .ind-breakout { margin-top:10px; border-top:1px solid var(--border); padding-top:10px; }
  .ind-breakout .ind-card.on { border-color:#fff; background:rgba(255,255,255,.06); }
  .ind-breakout .ind-card.on .ind-toggle { background:#fff; color:#0a0b0e; }
  .ind-breakout .ind-range-row input[type=range] { accent-color:#fff; }
  .ind-color { flex:1; height:24px; padding:0; border:1px solid var(--border2); border-radius:3px; background:var(--bg2); cursor:pointer; }
  .ind-color::-webkit-color-swatch-wrapper { padding:2px; }
  .ind-color::-webkit-color-swatch { border:none; border-radius:2px; }
  .ind-range-row { display:flex; align-items:center; gap:8px; margin-top:8px; padding:0 2px; }
  .ind-range-label { font-size:10px; color:var(--text2); min-width:62px; }
  .ind-range-row input[type=range] { flex:1; accent-color:var(--amber); cursor:pointer; }
  .ind-range-val { font-size:10px; color:var(--text1); min-width:34px; text-align:right; }
  .hm-mode-btn { flex:1; padding:4px 8px; border-radius:3px; cursor:pointer; font-size:10px; font-family:var(--font); color:var(--text1); background:var(--bg3); border:1px solid var(--border); transition:all .15s; }
  .hm-mode-btn:hover { border-color:var(--accent); color:var(--text0); }
  .hm-mode-btn.split { border-color:var(--green); color:var(--green); background:rgba(38,166,154,.1); }
  .hm-help { width:16px; height:16px; border-radius:50%; flex-shrink:0; margin-left:6px; padding:0; cursor:pointer; font-size:10px; font-weight:700; line-height:1; color:var(--text2); background:var(--bg3); border:1px solid var(--border); transition:all .15s; }
  .hm-help:hover { border-color:var(--accent); color:var(--accent); }
  .hm-help.on { border-color:var(--accent); color:var(--accent); background:rgba(78,237,255,.12); }
  .hm-help-text { margin-top:8px; padding:8px 10px; border:1px solid var(--border); border-radius:4px; background:var(--bg2); }
  .hm-help-text p { font-size:10px; line-height:1.5; color:var(--text1); margin:0 0 6px; }
  .hm-help-text p:last-child { margin-bottom:0; }
  #chart-container { flex:1; position:relative; overflow:hidden; min-height:100px; }

  /* BOTTOM PANEL (section-tabs + tab content) */
  .bottom-panel-resize {
    height:5px; flex-shrink:0; cursor:ns-resize; background:transparent;
    transition:background .15s; position:relative; z-index:2;
  }
  .bottom-panel-resize:hover, .bottom-panel-resize.dragging { background:var(--accent); }
  .bottom-panel-resize::after {
    content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:36px; height:3px; border-radius:2px; background:var(--border2); opacity:.6;
    pointer-events:none;
  }
  .bottom-panel-resize:hover::after, .bottom-panel-resize.dragging::after { opacity:1; background:var(--accent); }
  #bottom-panel {
    flex-shrink:0; display:flex; flex-direction:column; overflow:hidden;
    height:var(--bottom-panel-h, 180px); min-height:80px;
  }
  #bottom-panel .tab-content { flex:1; min-height:0; overflow:hidden; }
  #bottom-panel .tab-content.active { display:flex; }
  #chart { width:100%; height:100%; }
  #heatmap-canvas { position:absolute; inset:0; pointer-events:none; z-index:1; mix-blend-mode:lighten; }
  .chart-overlay { position:absolute; top:8px; left:12px; pointer-events:none; z-index:10; }
  .chart-sym { font-size:16px; font-weight:700; color:var(--text0); opacity:.9; }
  .chart-tf { font-size:10px; color:var(--text2); }
  .ohlcv-display { font-size:10px; color:var(--text1); margin-top:4px; }
  .chart-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,11,14,.85); z-index:20; font-size:13px; color:var(--text1); letter-spacing:2px; }
  #vol-chart { height:80px; flex-shrink:0; }

  /* RIGHT PANEL */
  .panel-header { padding:10px 12px; font-size:10px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
  .panel-tabs { display:flex; border-bottom:1px solid var(--border); }
  .ptab { flex:1; padding:8px 0; text-align:center; cursor:pointer; font-size:10px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; border:none; background:none; transition:all .15s; }
  .ptab.active { color:var(--accent); border-bottom:2px solid var(--accent); }
  .ptab:hover { color:var(--text0); }

  /* BID/ASK IMBALANCE */
  .imb-toolbar { display:flex; align-items:center; gap:6px; padding:4px 12px; border-bottom:1px solid var(--border); background:var(--bg2); flex-shrink:0; }
  .imb-tool-label { font-size:9px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; }
  .imb-win-btn { font-size:9px; padding:2px 8px; border:1px solid var(--border); border-radius:3px; background:var(--bg1); color:var(--text2); cursor:pointer; font-family:var(--font); transition:all .15s; }
  .imb-win-btn:hover { color:var(--text0); border-color:var(--border2); }
  .imb-win-btn.active { color:var(--accent); border-color:var(--accent); background:rgba(88,166,255,.08); }
  .imb-mid { margin-left:auto; font-size:10px; color:var(--amber); }
  .imb-body { flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:8px 16px; min-height:0; }
  .imb-bar-wrap { display:flex; align-items:center; gap:8px; }
  .imb-side-lbl { font-size:9px; font-weight:700; letter-spacing:1px; width:28px; flex-shrink:0; }
  .imb-bar-track { flex:1; display:flex; height:22px; border-radius:4px; overflow:hidden; background:var(--bg1); border:1px solid var(--border); }
  .imb-bar-bid { background:var(--green); height:100%; transition:width .35s ease; min-width:0; }
  .imb-bar-ask { background:var(--red); height:100%; transition:width .35s ease; min-width:0; }
  .imb-stats-row { display:flex; justify-content:center; align-items:center; gap:12px; font-size:12px; font-weight:600; }
  .imb-pct-label .up { color:var(--green); }
  .imb-pct-label .dn { color:var(--red); }
  .imb-ratio { font-size:10px; color:var(--text2); font-weight:500; }
  .imb-verdict-row { text-align:center; }
  .imb-verdict { font-size:11px; color:var(--text2); font-weight:600; }
  .imb-verdict.up { color:var(--green); }
  .imb-verdict.dn { color:var(--red); }
  .imb-verdict.neut { color:var(--amber); }
  .imb-vol-row { display:flex; justify-content:space-between; font-size:10px; color:var(--text2); padding:0 32px; }
  .imb-vol-row b.up { color:var(--green); }
  .imb-vol-row b.dn { color:var(--red); }
  .imb-detail { text-align:center; font-size:9px; color:var(--text2); opacity:.85; }

  /* ORDER BOOK */
  .ob-toolbar { display:flex; align-items:center; gap:8px; padding:4px 12px; border-bottom:1px solid var(--border); background:var(--bg2); flex-shrink:0; }
  .ob-tool-label { font-size:9px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; }
  .ob-step-select { background:var(--bg1); color:var(--text1); border:1px solid var(--border); border-radius:3px; font-size:10px; padding:2px 6px; cursor:pointer; }
  .ob-depth-info { font-size:9px; color:var(--text2); }
  .ob-tool-spread { margin-left:auto; font-size:10px; color:var(--amber); }
  .ob-columns { display:flex; flex:1; overflow:hidden; flex-direction:row; min-height:0; }
  .ob-headers { display:flex; padding:4px 12px; font-size:9px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; }
  .ob-headers span { flex:1; }
  .ob-headers span:last-child { text-align:right; }
  .ob-row { display:flex; align-items:center; padding:2px 12px; position:relative; cursor:pointer; font-size:10px; }
  .ob-row:hover { background:var(--bg2); }
  .ob-bar { position:absolute; top:0; bottom:0; opacity:.15; }
  .ob-bar.ask { background:var(--red); right:0; }
  .ob-bar.bid { background:var(--green); left:0; }
  .ob-price { flex:1; font-weight:600; z-index:1; }
  .ob-size { flex:1; text-align:right; z-index:1; color:var(--text1); }
  .ob-total { flex:1; text-align:right; z-index:1; color:var(--text2); }
  .ob-spread { text-align:center; padding:4px; font-size:10px; color:var(--amber); border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg2); }
  .book-container { overflow-y:auto; }

  /* POSITIONS & ORDERS */
  .positions-table { width:100%; }
  .pos-header { display:flex; padding:4px 12px; font-size:9px; color:var(--text2); border-bottom:1px solid var(--border); }
  .pos-header span, .pos-row span { flex:1; }
  .pos-row { display:flex; align-items:center; padding:6px 12px; border-bottom:1px solid var(--border); font-size:10px; }
  .pos-row:hover { background:var(--bg2); }
  .pos-sym { font-weight:700; color:var(--text0); }
  .pos-side { font-size:9px; padding:1px 4px; border-radius:2px; }
  .pos-long { background:rgba(38,166,154,.2); color:var(--green); }
  .pos-short { background:rgba(239,83,80,.2); color:var(--red); }
  .pos-pnl { font-weight:600; }
  .empty-state { padding:24px; text-align:center; color:var(--text2); font-size:11px; }

  /* AI TERMINAL */
  #ai-panel { display:flex; flex-direction:column; height:100%; }
  #ai-messages { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
  .msg { max-width:90%; padding:8px 10px; border-radius:6px; font-size:11px; line-height:1.6; }
  .msg.user { background:var(--bg3); border:1px solid var(--border2); align-self:flex-end; color:var(--text0); }
  .msg.ai { background:rgba(33,150,243,.08); border:1px solid rgba(33,150,243,.2); align-self:flex-start; color:var(--text0); }
  .msg.system { background:rgba(255,152,0,.06); border:1px solid rgba(255,152,0,.2); align-self:center; color:var(--amber); font-size:10px; text-align:center; }
  .ai-typing { display:flex; gap:4px; align-items:center; padding:4px 0; }
  .ai-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); animation:typing .9s infinite; }
  .ai-dot:nth-child(2) { animation-delay:.2s; }
  .ai-dot:nth-child(3) { animation-delay:.4s; }
  @keyframes typing { 0%,60%,100% { opacity:.3; transform:scale(1); } 30% { opacity:1; transform:scale(1.3); } }
  #ai-input-area, .ai-input-area { border-top:1px solid var(--border); padding:10px; display:flex; gap:8px; align-items:flex-end; }
  #ai-input { flex:1; background:var(--bg2); border:1px solid var(--border2); color:var(--text0); padding:8px 10px; border-radius:6px; font-size:11px; font-family:var(--font); resize:none; outline:none; min-height:36px; max-height:100px; line-height:1.5; }
  #ai-input:focus { border-color:var(--accent); }
  #ai-input::placeholder { color:var(--text2); }
  #ai-send { background:var(--accent); border:none; color:#0a0b0e; padding:8px 14px; border-radius:6px; cursor:pointer; font-family:var(--font); font-size:11px; transition:background .15s; white-space:nowrap; align-self:flex-end; height:36px; }
  #ai-send:hover { background:#1976d2; }
  #ai-send:disabled { background:var(--bg3); color:var(--text2); cursor:not-allowed; }
  .api-key-form { padding:16px; display:flex; flex-direction:column; gap:10px; }
  .api-key-form h3 { color:var(--text0); font-size:12px; font-weight:600; }
  .api-key-form p { color:var(--text2); font-size:10px; line-height:1.5; }
  .api-input { width:100%; background:var(--bg2); border:1px solid var(--border2); color:var(--text0); padding:7px 10px; border-radius:4px; font-size:11px; font-family:var(--font); outline:none; }
  .api-input:focus { border-color:var(--accent); }
  .api-input::placeholder { color:var(--text2); }
  .btn-primary { background:var(--accent); border:none; color:#0a0b0e; padding:8px 16px; border-radius:4px; cursor:pointer; font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:.5px; }
  .btn-secondary { background:var(--bg3); border:1px solid var(--border2); color:var(--text1); padding:7px 14px; border-radius:4px; cursor:pointer; font-family:var(--font); font-size:11px; }
  .btn-secondary:hover { border-color:var(--accent); color:var(--text0); }
  .btn-danger { background:var(--red2); border:none; color:var(--red); padding:7px 14px; border-radius:4px; cursor:pointer; font-family:var(--font); font-size:11px; }

  /* AI MODE SWITCH + STRATEGY */
  .ai-mode-switch { display:flex; gap:4px; padding:6px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .ai-mode { flex:1; padding:6px 0; font-size:10px; color:var(--text1); background:var(--bg2); border:1px solid var(--border); border-radius:4px; cursor:pointer; font-family:var(--font); transition:all .15s; }
  .ai-mode:hover { color:var(--text0); border-color:var(--border2); }
  .ai-mode.active { background:var(--accent); color:#0a0b0e; border-color:var(--accent); }
  .strat-rules-bar { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; font-size:10px; color:var(--text1); text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border); flex-shrink:0; }
  #strat-rules-text { width:100%; min-height:140px; background:var(--bg2); border:1px solid var(--border2); color:var(--text0); padding:8px; border-radius:4px; font-size:10px; font-family:var(--font); resize:vertical; outline:none; line-height:1.5; }
  #strat-rules-text:focus { border-color:var(--accent); }

  /* REALTIME AI */
  .rt-toolbar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .rt-check { font-size:10px; color:var(--text1); display:inline-flex; align-items:center; gap:5px; cursor:pointer; user-select:none; }
  .rt-btn { font-size:9px !important; padding:4px 8px !important; }
  .rt-status { font-size:9px; color:var(--text2); padding:6px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .rt-messages { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
  .rt-meta { font-size:9px; color:var(--text2); margin-bottom:4px; }
  .rt-verdict { margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.3px; padding:3px 10px; border-radius:4px; align-items:center; white-space:nowrap; }
  .rt-verdict.long { background:rgba(38,166,154,.18); color:var(--green); border:1px solid var(--green); }
  .rt-verdict.short { background:rgba(239,83,80,.18); color:var(--red); border:1px solid var(--red); }
  .rt-verdict.wait { background:rgba(157,168,188,.15); color:var(--text1); border:1px solid var(--border2); }
  .rt-verdict.warn { background:rgba(255,167,38,.18); color:var(--amber); border:1px solid var(--amber); }

  /* PINE EDITOR */
  #pine-editor { flex:1; width:100%; background:var(--bg0); border:none; border-bottom:1px solid var(--border); color:#e8eaf0; padding:10px; font-size:11px; font-family:var(--font); resize:none; outline:none; line-height:1.6; tab-size:4; white-space:pre; overflow:auto; }
  #pine-editor:focus { background:#0c0e13; }

  /* SETTINGS MODAL */
  .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:100; display:flex; align-items:center; justify-content:center; }
  .modal { background:var(--bg1); border:1px solid var(--border2); border-radius:8px; width:520px; max-width:90vw; max-height:80vh; overflow:auto; }
  .modal-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
  .modal-header h2 { font-size:14px; font-weight:700; color:var(--text0); }
  .modal-close { background:none; border:none; color:var(--text2); font-size:18px; cursor:pointer; line-height:1; }
  .modal-close:hover { color:var(--text0); }
  .modal-body { padding:20px; display:flex; flex-direction:column; gap:16px; }
  .form-group { display:flex; flex-direction:column; gap:6px; }
  .form-group label { font-size:10px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; }
  .form-group input { background:var(--bg2); border:1px solid var(--border2); color:var(--text0); padding:8px 10px; border-radius:4px; font-size:12px; font-family:var(--font); outline:none; }
  .form-group input:focus { border-color:var(--accent); }
  .form-group input::placeholder { color:var(--text2); }
  .form-group small { color:var(--text2); font-size:10px; }
  .notify-toggle { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text0); cursor:pointer; user-select:none; }
  .notify-toggle input { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; }
  .modal-footer { padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
  .status-indicator { display:flex; align-items:center; gap:6px; font-size:10px; }

  /* INDICATOR PANEL */
  .ind-panel { padding:12px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
  .ind-item { background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:8px 10px; display:flex; justify-content:space-between; align-items:center; }
  .ind-name { font-size:11px; color:var(--text0); font-weight:600; }
  .ind-val { font-size:11px; font-weight:600; }
  .ind-remove { background:none; border:none; color:var(--text2); cursor:pointer; font-size:14px; line-height:1; }
  .ind-remove:hover { color:var(--red); }
  .alerts-badge { display:none; margin-left:5px; background:var(--red); color:#fff; border-radius:8px; padding:0 5px; font-size:9px; line-height:14px; }
  .alerts-badge.show { display:inline-block; }
  .alert-form { flex:1; display:flex; flex-direction:column; gap:6px; padding:10px; overflow-y:auto; }
  .alert-form-row { display:flex; gap:6px; align-items:center; }
  .alert-form .api-input { padding:5px 8px; font-size:10px; }
  .alert-symbols-ta { resize:vertical; min-height:44px; font-family:var(--font); line-height:1.35; }
  .alert-scope-hint { font-size:9px; color:var(--text2); padding:0 10px 2px; line-height:1.35; }
  .alert-scope-hint b { color:var(--accent); font-weight:600; }
  .alert-check { font-size:10px; color:var(--text1); display:inline-flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap; }
  .alert-tf-quick { font-size:9px; color:var(--accent); cursor:pointer; text-transform:uppercase; letter-spacing:.5px; }
  .alert-tf-quick:hover { text-decoration:underline; }
  #alert-tf-list { display:flex; flex-wrap:wrap; gap:4px; }
  .alert-tf-chip { font-size:10px; color:var(--text1); background:var(--bg2); border:1px solid var(--border2); border-radius:3px; padding:3px 7px; cursor:pointer; user-select:none; }
  .alert-tf-chip.on { background:var(--blue2); border-color:var(--blue); color:#fff; }
  .alert-col { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
  .alert-col-repeat { flex:0 0 176px; min-width:176px; }
  .alert-repeat-body { flex:1; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:12px; padding:10px 9px; overflow-y:auto; }
  .alert-repeat-btn { width:100%; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px; padding:11px 6px; border-radius:6px; border:1px solid var(--border2); background:var(--bg2); cursor:pointer; color:inherit; transition:border-color .12s,background .12s; flex-shrink:0; }
  .alert-repeat-btn:hover { background:var(--bg3); border-color:var(--border); }
  .alert-repeat-btn.on { border-color:var(--green2); }
  .alert-repeat-btn.off { border-color:var(--bgred2); background:var(--bgred); }
  .alert-repeat-btn-ico { font-size:18px; line-height:1; color:var(--green); }
  .alert-repeat-btn.off .alert-repeat-btn-ico { color:var(--red); }
  .alert-repeat-btn-state { font-size:12px; font-weight:700; letter-spacing:.4px; color:var(--green); }
  .alert-repeat-btn.off .alert-repeat-btn-state { color:var(--red); }
  .alert-sched { display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--border); padding-top:11px; }
  .alert-sched-en { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text1); cursor:pointer; user-select:none; }
  .alert-sched-en input { width:13px; height:13px; accent-color:var(--accent); cursor:pointer; }
  .alert-sched-fields { display:flex; flex-direction:column; gap:7px; transition:opacity .12s; }
  .alert-sched-fields.disabled { opacity:.38; pointer-events:none; }
  .alert-sched-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--text2); }
  .alert-sched-row { display:flex; align-items:center; gap:5px; }
  .alert-sched-row span { font-size:10px; color:var(--text2); }
  .alert-sched-row input[type=time] { flex:1; min-width:0; background:var(--blue2); border:1px solid var(--border2); color:var(--text0); border-radius:4px; padding:4px 5px; font-size:10px; font-family:var(--font); outline:none; }
  .alert-sched-row input[type=time]:focus { border-color:var(--accent); }
  .alert-sched-days { display:flex; gap:3px; }
  .alert-sched-day { flex:1; min-width:0; padding:5px 0; border-radius:4px; border:1px solid var(--border2); background:var(--bg2); color:var(--text2); font-size:10px; font-weight:700; cursor:pointer; text-align:center; transition:border-color .12s,background .12s,color .12s; }
  .alert-sched-day:hover { border-color:var(--border); }
  .alert-sched-day.on { background:var(--blue2); border-color:var(--blue); color:#fff; }
  .alert-sched-status { font-size:9px; letter-spacing:.3px; min-height:11px; }
  .alert-sched-status.on { color:var(--green); }
  .alert-sched-status.off { color:var(--amber); }
  .alert-sched-hint { font-size:8px; line-height:1.35; color:var(--text2); }
  .alert-item.repeat-hold { border-left-color:var(--text2); opacity:.8; }
  .alert-col-head { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--text2); padding:6px 10px 4px; display:flex; align-items:center; gap:6px; flex-shrink:0; border-bottom:1px solid var(--border); }
  .alert-col-count { background:var(--bg2); border:1px solid var(--border2); border-radius:8px; padding:0 6px; font-size:9px; color:var(--text1); }
  .alert-list { overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .alert-item { background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--blue); border-radius:4px; padding:7px 9px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; font-size:10px; }
  .alert-item.triggered { border-left-color:var(--amber); opacity:.7; }
  .alert-item.off { border-left-color:var(--bgred2); background: var(--bgred); }
  .alert-item .a-info { min-width:0; flex:1; }
  .alert-item .a-main { color:var(--text0); }
  .alert-item .a-main .a-sym { cursor:pointer; font-weight:700; border-bottom:1px dashed transparent; transition:color .12s,border-color .12s; }
  .alert-item .a-main .a-sym:hover { color:var(--accent); border-bottom-color:var(--accent); }
  .alert-item .a-sub { color:var(--text2); font-size:9px; margin-top:2px; }
  .alert-item .a-history { margin-top:6px; padding-top:5px; border-top:1px dashed var(--border2); display:flex; flex-direction:column; gap:3px; }
  .alert-item .a-hist-row { display:flex; align-items:center; gap:8px; font-size:9px; }
  .alert-item .a-hist-sig { color:var(--text1); font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .alert-item .a-hist-sig.up { color:var(--green); }
  .alert-item .a-hist-sig.dn { color:var(--red); }
  .alert-item .a-hist-tf { color:var(--accent); text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
  .alert-item .a-hist-time { color:var(--text2); flex-shrink:0; }
  .alert-item .a-actions { display:flex; gap:8px; flex-shrink:0; }
  .alert-item .a-btn { background:none; border:none; color:var(--text2); cursor:pointer; font-size:12px; line-height:1; }
  .alert-item .a-btn:hover { color:var(--text0); }
  .alert-item .a-btn.del:hover { color:var(--red); }

  /* SCROLLBARS */
  ::-webkit-scrollbar { width:4px; height:4px; }
  ::-webkit-scrollbar-track { background:var(--bg1); }
  ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
  ::-webkit-scrollbar-thumb:hover { background:var(--text2); }

  /* RESIZE HANDLE */
  .resize-handle { width:4px; background:transparent; cursor:ew-resize; flex-shrink:0; transition:background .15s; }
  .resize-handle:hover { background:var(--accent); }

  /* BOTTOMBAR */
  .bstat { font-size:10px; color:var(--text2); }
  .bstat span { color:var(--text1); }
  .conn-status { display:flex; align-items:center; gap:5px; font-size:10px; }
  .conn-dot { width:5px; height:5px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
  .conn-dot.off { background:var(--red); animation:none; }
  .blink { animation:blink 1s step-end infinite; }
  @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

  /* TABS */
  .section-tabs { display:flex; background:var(--bg2); border-bottom:1px solid var(--border); flex-shrink:0; }
  .sectab { padding:6px 14px; cursor:pointer; font-size:10px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; border:none; background:none; border-bottom:2px solid transparent; transition:all .15s; font-family:var(--font); }
  .sectab.active { color:var(--accent); border-bottom-color:var(--accent); }
  .sectab:hover { color:var(--text0); }
  .tab-content { display:none; overflow-y:auto; flex:1; min-height:0; }
  .tab-content.active { display:flex; flex-direction:column; }

  /* TRADES FEED */
  .trades-feed { overflow-y:auto; flex:1; }
  .trade-row { display:flex; padding:2px 12px; font-size:10px; gap:8px; border-bottom:1px solid rgba(37,45,61,.5); }
  .trade-row:hover { background:var(--bg2); }
  .trade-time { color:var(--text2); width:60px; flex-shrink:0; }
  .trade-price { font-weight:600; flex:1; }
  .trade-size { color:var(--text1); flex:1; text-align:right; }

  /* INDICATOR MODAL */
  .ind-modal { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:100; display:flex; align-items:center; justify-content:center; }
  .ind-modal-box { background:var(--bg1); border:1px solid var(--border2); border-radius:8px; width:420px; padding:20px; }
  .ind-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
  .ind-card { background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:10px; cursor:pointer; transition:all .15s; }
  .ind-card:hover { border-color:var(--accent); background:var(--bg3); }
  .ind-card h4 { font-size:11px; color:var(--text0); font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:6px; }
  .ind-card p { font-size:9px; color:var(--text2); margin-top:3px; }
  .ind-card.on { border-color:var(--accent); background:rgba(33,150,243,.10); }
  .ind-card .ind-toggle { font-size:8px; font-weight:700; letter-spacing:.5px; padding:1px 5px; border-radius:3px; background:var(--bg3); color:var(--text2); }
  .ind-card.on .ind-toggle { background:var(--accent); color:#0a0b0e; }
  .ind-card.pine { border-color:var(--blue2); position:relative; }
  .ind-card.pine.active { border-color:var(--blue); background:rgba(33,150,243,.08); }
  .ind-card.pine h4 { color:var(--blue); padding-right:18px; }
  .ind-card-x { position:absolute; top:6px; right:6px; background:none; border:none; color:var(--text2); cursor:pointer; font-size:12px; line-height:1; padding:2px 4px; border-radius:3px; }
  .ind-card-x:hover { color:#fff; background:var(--red); }
  .hidden { display:none !important; }

  /* AUTH OVERLAY */
  #auth-overlay { position:fixed; inset:0; background:var(--bg0); z-index:300; display:flex; align-items:center; justify-content:center; }
  .auth-card { width:340px; max-width:90vw; background:var(--bg1); border:1px solid var(--border2); border-radius:10px; padding:28px 26px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
  .auth-logo { font-size:26px; font-weight:700; color:var(--accent); letter-spacing:4px; text-align:center; }
  .auth-sub { text-align:center; color:var(--text2); font-size:10px; letter-spacing:2px; text-transform:uppercase; margin-top:4px; margin-bottom:22px; }
  .auth-tabs { display:flex; margin-bottom:18px; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
  .auth-tab { flex:1; background:var(--bg2); border:none; color:var(--text2); padding:9px; cursor:pointer; font-size:11px; font-family:var(--font); transition:all .15s; }
  .auth-tab.active { background:var(--accent); color:#fff; }
  #auth-form { display:flex; flex-direction:column; gap:14px; }
  .auth-error { color:var(--red); font-size:11px; min-height:14px; text-align:center; }
  .auth-hint { text-align:center; color:var(--text2); font-size:10px; margin-top:16px; line-height:1.5; }
  .account-chip { display:flex; align-items:center; gap:6px; padding:0 12px; height:100%; border-left:1px solid var(--border); font-size:11px; color:var(--text1); }
  .account-chip .acc-name { color:var(--text0); font-weight:600; }

  /* PRICE TICKER */
  #ticker-bar { height:26px; background:var(--bggreen); border-bottom:1px solid var(--border); overflow:hidden; position:relative; flex-shrink:0; }
  .ticker-inner { display:flex; gap:0; height:100%; white-space:nowrap; }
  .ticker-item { display:inline-flex; align-items:center; gap:6px; padding:0 14px; font-size:10px; border-right:1px solid var(--border); cursor:pointer; }
  .ticker-item:hover { background:var(--bg2); }

  /* PNL highlight */
  .pnl-pos { color:var(--green); }
  .pnl-neg { color:var(--red); }

  /* Alert toast */
  #toast { position:fixed; bottom:40px; right:20px; background:var(--bg2); border:1px solid var(--border2); border-radius:6px; padding:10px 16px; font-size:11px; color:var(--text0); z-index:200; transform:translateY(80px); opacity:0; transition:all .3s; }
  #toast.show { transform:translateY(0); opacity:1; }

  /* Triggered-alert popups: stacked at bottom-left, persist until manually dismissed. */
  #alert-popups { position:fixed; left:16px; bottom:40px; z-index:250; display:flex; flex-direction:column; gap:8px; max-width:340px; max-height:70vh; overflow-y:auto; pointer-events:none; }
  .alert-popup { pointer-events:auto; display:flex; align-items:flex-start; gap:9px; background:var(--bg2); border:1px solid var(--amber); border-left:3px solid var(--amber); border-radius:6px; padding:10px 11px; box-shadow:0 6px 20px rgba(0,0,0,.45); animation:alertPopIn .18s ease-out; }
  .alert-popup.closing { animation:alertPopOut .18s ease-in forwards; }
  .alert-popup-icon { font-size:14px; line-height:1.2; flex-shrink:0; }
  .alert-popup-body { flex:1; min-width:0; }
  .alert-popup-title { font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--amber); display:flex; justify-content:space-between; gap:8px; }
  .alert-popup-time { color:var(--text2); font-weight:400; letter-spacing:0; }
  .alert-popup-msg { font-size:11px; color:var(--text0); margin-top:3px; line-height:1.4; word-break:break-word; }
  .alert-popup-close { background:none; border:none; color:var(--text2); cursor:pointer; font-size:13px; line-height:1; padding:0 2px; flex-shrink:0; }
  .alert-popup-close:hover { color:var(--red); }
  @keyframes alertPopIn { from { transform:translateX(-20px); opacity:0; } to { transform:translateX(0); opacity:1; } }
  @keyframes alertPopOut { from { transform:translateX(0); opacity:1; } to { transform:translateX(-20px); opacity:0; } }