:root{
    --bg:#0A0D12;
    --bg-1:#10141C;
    --bg-2:#161B26;
    --bg-3:#1B2130;
    --border:#232A38;
    --border-soft:#1A202C;
    --text-1:#E7EAF0;
    --text-2:#8791A3;
    --text-3:#565F70;
    --accent:#5B7FFF;
    --accent-dim:rgba(91,127,255,0.14);
    --accent-glow:rgba(91,127,255,0.35);
    --bull:#22C58B;
    --bull-dim:rgba(34,197,139,0.13);
    --bear:#FF5C5C;
    --bear-dim:rgba(255,92,92,0.13);
    --amber:#F5A623;
    --premium:#B368FF;
    --premium-dim:rgba(179,104,255,0.14);
    --radius:8px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    background:var(--bg);
    color:var(--text-1);
    font-family:'Inter',sans-serif;
    font-size:13px;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--accent-dim); color:var(--text-1);}
  .mono{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;}
  .disp{font-family:'Space Grotesk',sans-serif;}
  button{font-family:inherit; cursor:pointer;}
  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--bg-3); border-radius:4px;}

  /* ---------- Layout shell ---------- */
  .app{
    display:grid;
    grid-template-rows:52px 34px 36px 1fr;
    height:100vh;
  }

  /* ---------- Top bar ---------- */
  .topbar{
    display:flex; align-items:center; gap:20px;
    padding:0 16px;
    border-bottom:1px solid var(--border);
    background:var(--bg-1);
  }
  .brand{display:flex; align-items:center; gap:8px; flex-shrink:0;}
  .brand-mark{
    width:22px; height:22px; border-radius:6px;
    background:linear-gradient(135deg, var(--accent), #8AA3FF);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 14px var(--accent-glow);
  }
  .brand-mark svg{width:13px; height:13px;}
  .brand-name{font-family:'Space Grotesk'; font-weight:700; font-size:16px; letter-spacing:0.2px;}
  .search{
    flex:1; max-width:420px;
    display:flex; align-items:center; gap:8px;
    background:var(--bg-2); border:1px solid var(--border);
    border-radius:var(--radius); padding:7px 12px;
    color:var(--text-3);
    transition:border-color .15s;
  }
  .search:focus-within{border-color:var(--accent);}
  .search input{
    background:none; border:none; outline:none; color:var(--text-1);
    font-size:13px; width:100%; font-family:inherit;
  }
  .search input::placeholder{color:var(--text-3);}
  .search kbd{
    font-family:'JetBrains Mono'; font-size:10px; color:var(--text-3);
    border:1px solid var(--border); border-radius:4px; padding:1px 5px;
  }
  .topbar-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
  .status-pill{
    display:flex; align-items:center; gap:6px;
    font-size:11.5px; color:var(--bull);
    background:var(--bull-dim); border-radius:20px; padding:5px 10px 5px 8px;
  }
  .status-pill.closed{color:var(--text-3); background:var(--bg-2);}
  .status-dot{width:6px; height:6px; border-radius:50%; background:var(--bull); box-shadow:0 0 6px var(--bull);}
  .status-dot.closed{background:var(--text-3); box-shadow:none;}
  .icon-btn{
    width:30px; height:30px; border-radius:7px; border:1px solid transparent;
    background:none; color:var(--text-2); display:flex; align-items:center; justify-content:center;
  }
  .icon-btn:hover{background:var(--bg-2); color:var(--text-1); border-color:var(--border);}
  .icon-btn.save-ok{background:var(--bull-dim); color:var(--bull); border-color:transparent;}
  .icon-btn.save-fail{background:var(--bear-dim); color:var(--bear); border-color:transparent;}
  .icon-btn.active{border-color:var(--accent); background:var(--accent-dim); color:var(--accent);}
  .avatar{
    width:28px; height:28px; border-radius:50%;
    background:linear-gradient(135deg,#8AA3FF,var(--accent));
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk'; font-weight:600; font-size:11px; color:#0A0D12;
  }
  .avatar-status-dot{
    position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%;
    background:var(--text-3); border:2px solid var(--bg-1); pointer-events:none;
  }
  .avatar-status-dot.active{background:var(--bull);}
  .avatar-img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
  .avatar-upload-row{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
  .avatar-preview{
    width:56px; height:56px; font-size:18px; flex:0 0 auto; cursor:pointer;
    border:2px solid transparent;
  }
  .avatar-preview:hover{border-color:var(--accent);}
  .avatar-upload-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .plan-row{display:flex; align-items:center; gap:10px;}
  .tier-badge{
    display:inline-flex; align-items:center; padding:4px 12px; border-radius:20px;
    font-size:11.5px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase;
    background:var(--bg-3); color:var(--text-2);
  }
  .tier-badge.tier-free{background:var(--bg-3); color:var(--text-2);}
  .tier-badge.tier-basic{background:var(--accent-dim); color:var(--accent);}
  .tier-badge.tier-plus{background:var(--bull-dim); color:var(--bull);}
  .tier-badge.tier-premium{background:var(--premium-dim); color:var(--premium);}
  .tier-badge.tier-ultimate{background:rgba(245,166,35,0.14); color:var(--amber);}

  /* ---------- Ticker tape ---------- */
  .tape{
    border-bottom:1px solid var(--border);
    background:var(--bg);
    overflow:hidden;
    display:flex; align-items:center;
    position:relative;
  }
  .tape-track{
    display:flex; gap:28px; white-space:nowrap;
    animation:scroll-tape 38s linear infinite;
    padding-left:16px;
  }
  .tape:hover .tape-track{animation-play-state:paused;}
  @keyframes scroll-tape{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .tape-item{display:flex; align-items:center; gap:7px; font-size:11.5px; flex-shrink:0;}
  .tape-item .sym{color:var(--text-2); font-weight:500;}
  .tape-item .val{font-family:'JetBrains Mono';}
  .tape-item .chg.up{color:var(--bull);}
  .tape-item .chg.down{color:var(--bear);}

  /* ---------- Ticker symbol search bar ---------- */
  .symbol-search-bar{
    position:relative; display:flex; align-items:center; justify-content:flex-start;
    padding:4px 16px; border-bottom:1px solid var(--border); background:var(--bg-1);
  }
  .ss-wrap{
    display:flex; align-items:center; gap:4px; width:100%; max-width:130px;
    background:var(--bg-2); border:1px solid var(--border); border-radius:6px;
    padding:2px 6px; color:var(--text-3); transition:border-color .15s;
  }
  .ss-wrap:focus-within{border-color:var(--accent);}
  .ss-wrap input{
    flex:1; background:none; border:none; outline:none; color:var(--text-1);
    font-size:10.5px; font-family:inherit; min-width:0;
  }
  .ss-wrap input::placeholder{color:var(--text-3);}
  .ss-clear{
    background:none; border:none; color:var(--text-3); width:12px; height:12px;
    border-radius:3px; font-size:11px; line-height:1; flex-shrink:0;
  }
  .ss-clear:hover{background:var(--bg-3); color:var(--text-1);}
  .ss-results{
    display:none; position:absolute; top:calc(100% - 1px); left:16px; transform:none;
    width:220px; max-height:320px; overflow-y:auto;
    background:var(--bg-2); border:1px solid var(--border); border-top:1px solid var(--border-soft);
    border-radius:0 0 10px 10px; box-shadow:0 16px 40px rgba(0,0,0,0.45); z-index:60;
  }
  .ss-results.open{display:block;}
  .ss-row{display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer;}
  .ss-row:hover, .ss-row.highlighted{background:var(--bg-3);}
  .ss-row-main{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1;}
  .ss-row-sym{font-size:12.5px; font-weight:600;}
  .ss-row-name{font-size:10.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ss-row-ex{font-size:10px; color:var(--text-3); font-family:'JetBrains Mono'; flex-shrink:0;}
  .ss-row-price{font-family:'JetBrains Mono'; font-size:11.5px; flex-shrink:0; width:76px; text-align:right;}
  .ss-empty{padding:16px 14px; text-align:center; color:var(--text-3); font-size:11.5px; line-height:1.5;}


  /* ---------- Main grid ---------- */
  .main{
    display:grid;
    grid-template-columns:230px 6px 1fr;
    min-height:0; overflow:hidden;
    border-bottom:1px solid var(--border);
    position:relative;
  }

  /* ---------- Pane collapse / rails ---------- */
  .pane-collapse-btn{flex-shrink:0;}
  .pane-rail{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    background:var(--bg-1); padding:10px 0;
  }
  .pane-rail-left{
    position:absolute; top:0; bottom:0; left:0; z-index:10;
    width:34px; grid-column:1;
    border-right:1px solid var(--border);
  }
  .pane-rail-btn{
    width:26px; height:26px; border-radius:7px; border:1px solid var(--border);
    background:var(--bg-2); color:var(--text-2); display:flex; align-items:center; justify-content:center;
  }
  .pane-rail-btn:hover{border-color:var(--accent); color:var(--accent);}
  .pane-rail-label{
    font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3);
    writing-mode:vertical-rl; white-space:nowrap;
  }

  /* ---------- Drag resizers ---------- */
  .resizer{position:relative; z-index:35; background:transparent;}
  .resizer-v{grid-column:2; cursor:col-resize;}
  .resizer-v::after{
    content:''; position:absolute; top:0; bottom:0; left:2px; width:2px;
    background:var(--border); transition:background .15s;
  }
  .resizer-v:hover::after, .resizer-v.dragging::after{background:var(--accent);}
  .resizer-h{cursor:row-resize; width:100%;}
  .resizer-h::after{
    content:''; position:absolute; left:0; right:0; top:2px; height:2px;
    background:var(--border); transition:background .15s;
  }
  .resizer-h:hover::after, .resizer-h.dragging::after{background:var(--accent);}
  body.resizing-col{cursor:col-resize !important; user-select:none;}
  body.resizing-row{cursor:row-resize !important; user-select:none;}
  body.resizing-col *, body.resizing-row *{user-select:none;}

  /* ---------- Watchlist ---------- */
  .watchlist{
    grid-column:1;
    border-right:1px solid var(--border);
    background:var(--bg-1);
    display:flex; flex-direction:column;
    min-height:0;
  }
  .panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-bottom:1px solid var(--border-soft);
    flex-shrink:0;
  }
  .watchlist .panel-head{padding:8px 8px 8px 10px; gap:4px;}
  .watchlist .wl-selector{min-width:0; flex-shrink:1;}
  .watchlist .wl-selector-btn{max-width:100%;}
  .watchlist #wlCurrentName{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .wl-actions .icon-btn{width:26px; height:26px; flex-shrink:0;}
  .panel-title{font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-2);}
  .panel-tabs{display:flex; gap:2px;}
  .ptab{
    font-size:11px; color:var(--text-3); background:none; border:none;
    padding:3px 7px; border-radius:5px;
  }
  .ptab.active{background:var(--bg-3); color:var(--text-1);}

  /* ---------- Watchlist selector dropdown ---------- */
  .wl-selector{position:relative;}
  .wl-selector-btn{
    display:flex; align-items:center; gap:6px;
    background:none; border:none; color:var(--text-1);
    font-size:12.5px; font-weight:600; padding:2px 0;
  }
  .wl-selector-btn svg{color:var(--text-3); transition:transform .15s;}
  .wl-selector-btn:hover svg{color:var(--text-1);}
  .wl-dropdown{
    display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:40;
    width:220px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45); overflow:hidden;
  }
  .wl-dropdown.open{display:block;}
  .wl-dropdown-list{max-height:240px; overflow-y:auto; padding:4px 0;}
  .wl-dd-row{
    display:flex; align-items:center; gap:6px; padding:7px 10px; cursor:pointer;
  }
  .wl-dd-row:hover{background:var(--bg-3);}
  .wl-dd-row.active{color:var(--accent);}
  .wl-dd-name{font-size:12px; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .wl-dd-count{font-family:'JetBrains Mono'; font-size:10px; color:var(--text-3);}
  .wl-dd-action{
    background:none; border:none; color:var(--text-3); width:20px; height:20px;
    display:flex; align-items:center; justify-content:center; border-radius:5px; flex-shrink:0;
  }
  .wl-dd-action:hover{background:var(--bg-1); color:var(--text-1);}
  .wl-menu-btn{
    display:flex; align-items:center; gap:8px; width:100%;
    background:none; border:none; color:var(--text-1);
    font-size:12px; font-weight:500; padding:9px 12px; text-align:left;
  }
  .wl-menu-btn:hover{background:var(--bg-3);}
  .wl-menu-btn svg{color:var(--text-3); flex-shrink:0;}
  .wl-menu-btn:hover svg{color:var(--text-1);}
  #wlNewBtn{color:var(--accent);}
  #wlNewBtn svg{color:var(--accent);}
  .wl-menu-divider{height:1px; background:var(--border-soft); margin:4px 0;}
  .wl-dropdown-list:not(:empty){border-bottom:1px solid var(--border-soft); padding-bottom:2px; margin-bottom:2px;}
  .wl-actions{display:flex; align-items:center; gap:2px;}
  .wl-empty{padding:24px 16px; text-align:center; color:var(--text-3); font-size:11.5px; line-height:1.5;}

  /* ---------- Modal dialog (new/rename watchlist) ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(5,7,11,0.6); backdrop-filter:blur(2px);
    align-items:center; justify-content:center;
  }
  .modal-overlay.open{display:flex;}
  .modal-card{
    width:320px; background:var(--bg-1); border:1px solid var(--border); border-radius:12px;
    padding:20px; box-shadow:0 24px 64px rgba(0,0,0,0.55);
  }
  .modal-card.wide{width:380px;}
  .modal-title{font-family:'Space Grotesk'; font-weight:700; font-size:14.5px; margin-bottom:14px;}
  .modal-input{
    width:100%; background:var(--bg-2); border:1px solid var(--border); border-radius:8px;
    padding:9px 12px; color:var(--text-1); font-family:'Inter'; font-size:13px; outline:none;
  }
  .modal-input:focus{border-color:var(--accent);}
  .modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
  .modal-btn{
    padding:7px 14px; border-radius:7px; font-size:12.5px; font-weight:500; border:none;
    display:inline-flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer;
  }
  .modal-btn.secondary{background:var(--bg-3); color:var(--text-2);}
  .modal-btn.secondary:hover{color:var(--text-1);}
  .modal-btn.primary{background:var(--accent); color:#0A0D12;}
  .modal-btn.primary:hover{filter:brightness(1.1);}

  .wl-list{overflow-y:auto; flex:1;}
  .wl-row{
    display:flex; align-items:center; gap:4px; justify-content:space-between;
    padding:8px 8px 8px 12px; border-bottom:1px solid var(--border-soft);
    cursor:pointer; position:relative;
  }
  .wl-row:hover{background:var(--bg-2);}
  .wl-row:hover .wl-remove{display:flex;}
  .wl-row.selected{background:var(--accent-dim); box-shadow:inset 2px 0 0 var(--accent);}
  .wl-left{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
  .wl-sym{font-size:12.5px; font-weight:600;}
  .wl-name{font-size:10.5px; color:var(--text-3);}
  .wl-right{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; width:84px;}
  .wl-price{font-family:'JetBrains Mono'; font-size:12.5px; transition:color .3s;}
  .wl-chg{font-family:'JetBrains Mono'; font-size:10.5px;}
  .wl-chg.up{color:var(--bull);} .wl-chg.down{color:var(--bear);}
  .wl-opt-summary{display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
  .wl-opt-exp{font-size:11px; color:var(--text-1);}
  .wl-opt-nearest{font-size:10px; color:var(--text-3);}
  .wl-opt-summary.wl-opt-loading, .wl-opt-summary.wl-opt-none{font-size:11px; color:var(--text-3);}
  .wl-remove{
    flex-shrink:0; width:22px; height:22px; align-items:center; justify-content:center;
    background:none; border:none; border-radius:5px; color:var(--text-3);
    opacity:0; transition:opacity .15s;
  }
  .wl-row:hover .wl-remove{opacity:1;}
  .wl-remove:hover{background:var(--bear-dim); color:var(--bear);}
  .wl-row.selected .wl-remove{color:var(--text-3);}
  .flash-up{animation:flashUp .6s ease-out;}
  .flash-down{animation:flashDown .6s ease-out;}
  @keyframes flashUp{0%{background:var(--bull-dim);} 100%{background:transparent;}}
  @keyframes flashDown{0%{background:var(--bear-dim);} 100%{background:transparent;}}

  /* ---------- Chart column ---------- */
  .chart-col{grid-column:3; display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; position:relative;}
  .chart-toolbar{
    display:flex; align-items:center; gap:14px;
    padding:8px 14px; border-bottom:1px solid var(--border-soft);
    flex-shrink:0;
  }
  .symbol-block{display:flex; align-items:center; gap:9px;}
  .symbol-name{font-family:'Space Grotesk'; font-weight:700; font-size:15px;}
  .symbol-full{font-size:11px; color:var(--text-3);}
  .price-now{font-family:'JetBrains Mono'; font-size:15px; font-weight:600;}
  .price-chg{font-family:'JetBrains Mono'; font-size:11.5px; padding:2px 6px; border-radius:5px;}
  .price-chg.up{color:var(--bull); background:var(--bull-dim);}
  .price-chg.down{color:var(--bear); background:var(--bear-dim);}
  .tf-selector{position:relative;}
  .tf-selector-btn{
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-2); border:1px solid var(--border); color:var(--text-2);
    width:20px; height:20px; padding:0; border-radius:6px; flex-shrink:0;
  }
  .tf-selector-btn:hover{border-color:var(--accent); color:var(--text-1);}
  .tf-selector-btn.open{border-color:var(--accent); background:var(--accent-dim); color:var(--accent);}
  .symbol-search-bar .tf-selector{margin-left:4px;}
  .tf-dropdown{
    display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:40;
    width:190px; max-height:340px; overflow-y:auto;
    background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45); padding:4px 0;
  }
  .tf-dropdown.open{display:block;}
  .tf-dropdown-header{
    font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-3); padding:8px 12px 4px;
  }
  .tf-dd-row{
    display:flex; align-items:center; gap:8px;
    padding:6px 12px; font-size:12px; font-family:'Inter',sans-serif; cursor:pointer; color:var(--text-2);
  }
  .tf-dd-row:hover{background:var(--bg-3); color:var(--text-1);}
  .tf-dd-check{
    width:14px; height:14px; border-radius:4px; border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .tf-dd-check.checked{background:var(--accent); border-color:var(--accent); color:#0A0D12;}

  /* ---------- Quick-select timeframe chips (multi-select, shown in the bar) ---------- */
  .tf-quickbar{
    display:flex; align-items:center; gap:3px; margin-left:12px;
    overflow-x:auto; scrollbar-width:none; min-width:0;
  }
  .tf-quickbar::-webkit-scrollbar{display:none;}
  .tf-chip{
    background:var(--bg-2); border:1px solid var(--border-soft); color:var(--text-2);
    font-size:11px; font-family:'JetBrains Mono'; font-weight:500;
    padding:4px 8px; border-radius:6px; flex-shrink:0;
  }
  .tf-chip:hover{border-color:var(--accent);}
  .tf-chip.active{background:var(--accent-dim); border-color:var(--accent); color:var(--accent);}
  .tool-divider{width:1px; height:20px; background:var(--border);}
  .draw-tools{display:flex; gap:2px;}

  /* ---------- Bar style selector (quickbar of up to 4 pinned + full dropdown) ---------- */
  .barstyle-quickbar{display:flex; align-items:center; gap:2px;}
  .barstyle-chip{
    width:26px; height:26px; border-radius:6px; border:1px solid transparent;
    background:none; color:var(--text-2); display:flex; align-items:center; justify-content:center;
  }
  .barstyle-chip:hover{background:var(--bg-2); border-color:var(--border); color:var(--text-1);}
  .barstyle-chip.active{background:var(--accent-dim); border-color:var(--accent); color:var(--accent);}
  .barstyle-selector{position:relative; margin-left:2px;}
  .barstyle-selector-btn{
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-2); border:1px solid var(--border); color:var(--text-2);
    width:20px; height:20px; padding:0; border-radius:6px; flex-shrink:0;
  }
  .barstyle-selector-btn:hover{border-color:var(--accent); color:var(--text-1);}
  .barstyle-selector-btn.open{border-color:var(--accent); background:var(--accent-dim); color:var(--accent);}
  .barstyle-menu{
    display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:40;
    width:200px; max-height:360px; overflow-y:auto;
    background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45); padding:4px 0;
  }
  .barstyle-menu.open{display:block;}
  .barstyle-menu-header{
    font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-3); padding:8px 12px 4px;
  }
  .barstyle-group-label{
    font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--text-3); padding:9px 12px 4px;
  }
  .barstyle-group-divider{height:1px; background:var(--border-soft); margin:4px 8px;}
  .barstyle-row{
    display:flex; align-items:center; gap:9px;
    padding:7px 12px; cursor:pointer; color:var(--text-2);
  }
  .barstyle-row:hover{background:var(--bg-3); color:var(--text-1);}
  .barstyle-row.active{color:var(--accent); background:var(--accent-dim);}
  .barstyle-row-label{font-size:12px; font-weight:500; flex:1;}
  .barstyle-row-check{width:14px; height:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}

  /* ---------- Indicators menu ---------- */
  .indicator-launcher{position:relative;}
  .indicators-btn{
    display:flex; align-items:center; gap:6px;
    background:var(--bg-2); border:1px solid var(--border); color:var(--text-1);
    font-size:11.5px; font-weight:500; padding:6px 10px; border-radius:7px;
  }
  .indicators-btn:hover{border-color:var(--accent);}
  .indicators-btn.open{border-color:var(--accent); background:var(--accent-dim); color:var(--accent);}
  .indicator-menu{
    display:none;
    position:absolute; top:calc(100% + 6px); left:0; z-index:40;
    width:300px; max-height:380px;
    background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45);
    flex-direction:column; overflow:hidden;
  }
  .indicator-menu.open{display:flex;}
  .position-popover{
    display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:40;
    width:220px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45); padding:10px 12px; flex-direction:column; gap:8px;
  }
  .position-popover.open{display:flex;}
  .position-popover-title{font-size:11.5px; font-weight:600;}
  .position-row{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--text-2);}
  .position-row input{
    width:80px; background:var(--bg-1); border:1px solid var(--border); border-radius:5px;
    color:var(--text-1); font-family:'JetBrains Mono'; font-size:11px; padding:3px 6px; text-align:right;
  }
  .position-row select{
    flex:1; min-width:0; background:var(--bg-1); border:1px solid var(--border); border-radius:5px;
    color:var(--text-1); font-family:'JetBrains Mono'; font-size:11px; padding:3px 6px;
  }
  .position-popover-note{font-size:10px; color:var(--text-3); line-height:1.4;}
  .position-save-btn{
    background:var(--accent-dim); color:var(--accent); border:1px solid transparent; border-radius:6px;
    padding:6px 0; font-size:11.5px; font-weight:600;
  }
  .position-save-btn:hover{filter:brightness(1.1);}
  .ind-search{
    display:flex; align-items:center; gap:7px; padding:9px 10px;
    border-bottom:1px solid var(--border-soft); color:var(--text-3); flex-shrink:0;
  }
  .ind-search input{
    background:none; border:none; outline:none; color:var(--text-1); font-family:inherit; font-size:12px; width:100%;
  }
  .ind-list{overflow-y:auto; padding:4px 0;}
  .ind-group-label{
    font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--text-3); padding:9px 12px 4px;
  }
  .ind-row{
    display:flex; align-items:center; gap:9px;
    padding:7px 12px; cursor:pointer;
  }
  .ind-row:hover{background:var(--bg-3);}
  .ind-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
  .ind-row-text{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .ind-row-name{font-size:12px; font-weight:500;}
  .ind-row-desc{font-size:10.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ind-check{
    margin-left:auto; width:16px; height:16px; border-radius:4px; border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .ind-row.active .ind-check{background:var(--accent); border-color:var(--accent);}
  .ind-empty{padding:20px 12px; text-align:center; color:var(--text-3); font-size:12px;}

  .ind-legend{
    display:flex; flex-wrap:wrap; gap:6px;
    padding:7px 14px; border-bottom:1px solid var(--border-soft);
    min-height:0;
  }
  .ind-legend:empty{display:none;}
  .ind-chip{
    display:flex; align-items:center; gap:6px;
    background:var(--bg-2); border:1px solid var(--border-soft); border-radius:6px;
    padding:3px 4px 3px 8px; font-family:'JetBrains Mono'; font-size:10.5px;
  }
  .ind-chip .ind-dot{width:7px; height:7px;}
  .ind-chip .chip-val{color:var(--text-2);}
  .ind-chip button{
    background:none; border:none; color:var(--text-3); width:16px; height:16px;
    display:flex; align-items:center; justify-content:center; border-radius:4px;
  }
  .ind-chip button:hover{background:var(--bg-3); color:var(--text-1);}
  .ind-chip.ind-hidden{opacity:0.45;}
  .ind-chip.ind-hidden .ind-dot{background:var(--text-3) !important;}
  .chip-label{white-space:nowrap;}
  .ind-settings-popover{
    display:none; position:absolute; z-index:50;
    width:210px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45); padding:10px 12px;
  }
  .ind-settings-popover.open{display:block;}
  /* Positioned in JS (clamped to stay inside .chart-area, flipping side
     near the right/bottom edge) rather than the single-line crosshair
     readout (.chart-hover-readout) — a Strategy Recommendation marker's
     reasoning is 3-4 lines of text, and cramming that into one nowrap line
     in the toolbar pushed it past the visible screen width instead of
     actually being readable. pointer-events:none so it never blocks the
     drag-to-pan / crosshair interactions happening right underneath it. */
  .marker-evidence-tooltip{
    display:none; position:absolute; z-index:40; pointer-events:none;
    max-width:280px; background:var(--bg-2); border:1px solid var(--border); border-radius:8px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45); padding:8px 10px;
    font-family:'JetBrains Mono'; font-size:10.5px; line-height:1.6; color:var(--text-2);
  }
  .marker-evidence-tooltip.open{display:block;}
  .evidence-title{font-size:11px; font-weight:600; color:var(--text-1); margin-bottom:4px;}
  .evidence-title .warn{color:var(--amber);}
  .evidence-row{white-space:normal; word-break:break-word;}
  .settings-title{font-size:11.5px; font-weight:600; margin-bottom:8px;}
  .settings-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; padding:4px 0; font-size:11.5px; color:var(--text-2);
  }
  .settings-row input[type="number"]{
    width:64px; background:var(--bg-1); border:1px solid var(--border); border-radius:5px;
    color:var(--text-1); font-family:'JetBrains Mono'; font-size:11px; padding:3px 6px; text-align:right;
  }
  .settings-row input[type="color"]{
    width:32px; height:22px; background:none; border:1px solid var(--border); border-radius:5px; padding:0; cursor:pointer;
  }
  .settings-tabs{display:flex; gap:2px; margin-bottom:8px; background:var(--bg-1); border-radius:6px; padding:2px;}
  .settings-tab{
    flex:1; background:none; border:none; color:var(--text-2); font-size:11px; font-weight:500;
    padding:5px 0; border-radius:5px;
  }
  .settings-tab.active{background:var(--bg-3); color:var(--text-1);}
  .settings-body{max-height:260px; overflow-y:auto;}
  .settings-plot-row{
    display:flex; align-items:center; gap:7px; padding:5px 0;
  }
  .settings-plot-label{font-size:11.5px; color:var(--text-2); flex:1; min-width:0;}
  .settings-vis input{accent-color:var(--accent); width:13px; height:13px;}
  .settings-plot-row input[type="color"]{
    width:26px; height:20px; background:none; border:1px solid var(--border); border-radius:5px; padding:0; cursor:pointer;
  }
  .settings-plot-row select{
    background:var(--bg-1); border:1px solid var(--border); border-radius:5px; color:var(--text-1);
    font-family:'JetBrains Mono'; font-size:10.5px; padding:2px 4px;
  }
  .settings-row input[type="checkbox"]{accent-color:var(--accent); width:14px; height:14px;}
  /* ---------- ⋮ More menu (topbar) ---------- */
  .more-menu-wrap{position:relative;}
  #moreMenuBtn.open{border-color:var(--accent); background:var(--accent-dim); color:var(--accent);}
  .more-menu{
    display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:60;
    width:200px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45); padding:6px 0;
  }
  .more-menu.open{display:block;}
  .more-menu-title{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-3); padding:6px 14px 4px;}
  .more-menu-item{
    display:flex; align-items:center; gap:10px; width:100%; background:none; border:none;
    color:var(--text-1); font-size:12.5px; font-weight:500; padding:9px 14px; text-align:left;
  }
  .more-menu-item:hover{background:var(--bg-3);}
  .more-menu-item.save-ok{background:var(--bull-dim); color:var(--bull);}
  .more-menu-item.save-fail{background:var(--bear-dim); color:var(--bear);}
  .more-menu-item svg{color:var(--text-3);}

  /* ---------- Alerts (bell icon) ---------- */
  .alerts-badge{
    position:absolute; top:2px; right:2px; min-width:14px; height:14px; padding:0 3px;
    border-radius:7px; background:var(--accent); color:#0A0D12;
    font-size:9px; font-weight:700; line-height:14px; text-align:center;
  }
  .alerts-panel{width:320px; max-height:480px; display:none; flex-direction:column; padding:10px 0;}
  .alerts-panel.open{display:flex;}
  .alerts-panel-head{display:flex; align-items:center; justify-content:space-between; padding:0 14px 4px;}
  .alerts-new-btn{padding:4px 10px; font-size:11px;}
  .alerts-list, .alerts-events{overflow-y:auto; max-height:160px; padding:0 8px;}
  .alerts-empty{color:var(--text-3); font-size:11.5px; padding:8px 6px;}
  .alert-row{
    display:flex; align-items:center; gap:8px; padding:7px 6px; border-radius:7px; font-size:11.5px;
  }
  .alert-row:hover{background:var(--bg-3);}
  .alert-row-main{flex:1; min-width:0;}
  .alert-row-symbol{font-weight:700; color:var(--text-1);}
  .alert-row-desc{color:var(--text-3); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .alert-row.inactive .alert-row-symbol, .alert-row.inactive .alert-row-desc{opacity:0.45;}
  .alert-row button{
    background:none; border:none; color:var(--text-3); display:flex; align-items:center;
    justify-content:center; width:22px; height:22px; border-radius:5px; flex-shrink:0;
  }
  .alert-row button:hover{background:var(--bg-1); color:var(--text-1);}
  .alert-event-row{padding:6px; border-radius:7px; font-size:11px; color:var(--text-2);}
  .alert-event-row .alert-event-time{color:var(--text-3); font-size:10px;}
  .alert-event-row.undelivered{border-left:2px solid var(--text-3); padding-left:8px;}
  .alerts-indicator-note{font-size:10.5px; color:var(--text-3); margin-top:4px; line-height:1.4;}
  .alerts-sms-note{font-size:10.5px; color:var(--text-3); margin-top:10px; line-height:1.4;}

  /* ---------- Slide-in panels (Order Book + Positions) ---------- */
  .slide-panel{
    position:fixed; inset:0; z-index:80; pointer-events:none;
    display:flex; align-items:stretch; justify-content:flex-end;
  }
  .slide-panel-backdrop{
    position:absolute; inset:0; background:rgba(5,7,11,0.45); opacity:0;
    transition:opacity .2s; pointer-events:none;
  }
  .slide-panel.open .slide-panel-backdrop{opacity:1; pointer-events:auto;}
  .slide-panel-card{
    position:relative; width:320px;
    background:var(--bg-1); border-left:1px solid var(--border);
    transform:translateX(100%); transition:transform .22s cubic-bezier(.32,.72,0,1);
    pointer-events:auto; display:flex; flex-direction:column;
  }
  .slide-panel-card-wide{width:560px;}
  .slide-panel.open .slide-panel-card{transform:translateX(0);}
  .slide-panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-bottom:1px solid var(--border-soft); flex-shrink:0;
  }
  .slide-panel-head .bottom-tabs{padding:0; border-bottom:none;}
  .slide-panel-title{font-size:11.5px; font-weight:600;}
  .slide-panel-close{background:none; border:none; color:var(--text-2); width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:6px;}
  .slide-panel-close:hover{background:var(--bg-2); color:var(--text-1);}
  .slide-panel-body{flex:1; overflow-y:auto; padding:0;}

  /* ---------- Screener (large "window" overlay, opened from the ⋮ menu) ----------
     Same overlay-over-the-chart idea as the slide-panels above (the chart
     keeps rendering behind it, just covered), but centered and much larger
     since it needs room for a filter form + a results table side by side. */
  .screener-window{
    position:fixed; inset:0; z-index:90; display:none;
    align-items:center; justify-content:center;
  }
  .screener-window.open{display:flex;}
  .screener-backdrop{position:absolute; inset:0; background:rgba(5,7,11,0.6);}
  .screener-card{
    position:relative; width:min(1080px,94vw); height:min(720px,90vh);
    background:var(--bg-1); border:1px solid var(--border); border-radius:12px;
    box-shadow:0 24px 64px rgba(0,0,0,0.55); display:flex; flex-direction:column; overflow:hidden;
  }
  .screener-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-bottom:1px solid var(--border-soft); flex-shrink:0;
  }
  .screener-title{font-family:'Space Grotesk'; font-weight:700; font-size:14.5px;}
  .screener-subtitle{font-size:11px; color:var(--text-3); margin-left:10px;}
  .screener-body{flex:1; display:flex; min-height:0;}
  .screener-filters{
    width:280px; flex-shrink:0; border-right:1px solid var(--border-soft);
    padding:14px; overflow-y:auto;
  }
  .screener-filter-label{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-3); margin:14px 0 6px;}
  .screener-filter-label:first-child{margin-top:0;}
  .screener-scope{display:flex; gap:6px;}
  .screener-scope-btn{
    flex:1; background:var(--bg-2); border:1px solid var(--border); color:var(--text-2);
    font-size:11.5px; font-weight:500; padding:7px 0; border-radius:6px;
  }
  .screener-scope-btn.active{background:var(--accent-dim); border-color:var(--accent); color:var(--accent);}
  .screener-select, .screener-num{
    width:100%; background:var(--bg-2); border:1px solid var(--border); border-radius:6px;
    color:var(--text-1); font-family:'JetBrains Mono'; font-size:11.5px; padding:6px 8px;
  }
  .screener-country-dd{position:relative;}
  .screener-country-btn{display:flex; align-items:center; justify-content:space-between; cursor:pointer;}
  .screener-country-btn:hover{border-color:var(--accent); color:var(--text-1);}
  .screener-country-dropdown{
    display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
    background:var(--bg-2); border:1px solid var(--border); border-radius:8px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45); padding:4px 0;
  }
  .screener-country-dropdown.open{display:block;}
  .screener-field-row{display:flex; gap:5px; margin-bottom:6px; align-items:center;}
  .screener-field-row .screener-select{flex:1.3;}
  .screener-field-row .screener-op{flex:0.7; text-align:center;}
  .screener-field-row .screener-num{flex:1; text-align:right;}
  .screener-field-remove{
    background:none; border:none; color:var(--text-3); width:20px; height:20px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; border-radius:5px;
  }
  .screener-field-remove:hover{background:var(--bear-dim); color:var(--bear);}
  .screener-add-field{
    background:none; border:1px dashed var(--border); color:var(--text-2); font-size:11px;
    width:100%; padding:6px 0; border-radius:6px; margin-top:2px;
  }
  .screener-add-field:hover{border-color:var(--accent); color:var(--accent);}
  .screener-run-btn{
    width:100%; margin-top:16px; background:var(--accent); color:#0A0D12; border:none;
    font-weight:600; font-size:12.5px; padding:9px 0; border-radius:7px;
  }
  .screener-run-btn:hover{filter:brightness(1.1);}
  .screener-run-btn:disabled{opacity:0.5; filter:none; cursor:default;}
  .screener-results{flex:1; display:flex; flex-direction:column; min-width:0;}
  .screener-results-head{
    display:flex; align-items:center; justify-content:space-between; padding:9px 14px;
    font-size:11px; color:var(--text-2); border-bottom:1px solid var(--border-soft); flex-shrink:0;
  }
  .screener-results-body{flex:1; overflow-y:auto; padding:0 14px;}
  .screener-results-body tbody tr{cursor:pointer;}
  .screener-results-body tbody tr:hover td{background:var(--bg-2);}
  .screener-signal-tag{
    font-size:10px; font-weight:600; padding:2px 7px; border-radius:10px;
    background:var(--accent-dim); color:var(--accent);
  }

  .pane-label{font-family:'JetBrains Mono';}

  .chart-area{flex:1; position:relative; min-height:0;}
  /* Vertical band drawn while dragging with Range Zoom active (see
     rangeZoomActive in app.js) -- spans the full chart height, positioned/
     sized purely via left/width in JS as the drag moves, no redraw needed
     per mousemove the way the canvas-based markers would require. */
  .chart-selection-box{
    display:none; position:absolute; top:0; bottom:0; z-index:6;
    background:rgba(91,127,255,0.15); border-left:1px solid var(--accent); border-right:1px solid var(--accent);
    pointer-events:none;
  }
  /* Same shape as .chart-area on purpose — #chartCanvas gets reparented in
     here (see the comment on #evidenceModal in index.html), and
     resizeCanvas() sizes it off whatever its current parent's
     getBoundingClientRect() reports. */
  .evidence-modal-chart-area{flex:1; position:relative; min-height:0;}
  .evidence-modal-head-actions{display:flex; align-items:center; gap:4px;}
  /* Scoped to #evidenceModal specifically (not a general .screener-card
     rule) so this never affects the separate Screener window, which
     happens to reuse the same card/backdrop classes for its own overlay. */
  #evidenceModal .screener-card.maximized{width:98vw; height:96vh;}
  #chartCanvas{display:block; width:100%; height:100%;}

  /* ---------- Multi-chart grid (several symbols at once, fit to screen) ---------- */
  .multi-chart-grid{
    flex:1; min-height:0; display:grid; gap:1px;
    background:var(--border-soft); overflow:hidden;
  }
  .multi-chart-cell{
    position:relative; display:flex; flex-direction:column; min-height:0;
    background:var(--bg-1);
  }
  .multi-cell-head{
    display:flex; align-items:center; gap:6px; padding:5px 8px; flex-shrink:0;
    border-bottom:1px solid var(--border-soft);
  }
  .multi-cell-symbol-input{
    background:var(--bg-2); border:1px solid var(--border); color:var(--text-1);
    font-family:'JetBrains Mono'; font-size:11px; font-weight:600; text-transform:uppercase;
    width:72px; padding:3px 6px; border-radius:5px;
  }
  .multi-cell-symbol-input:focus{outline:none; border-color:var(--accent);}
  .multi-cell-price{font-size:11px; font-weight:600; color:var(--text-1); font-family:'JetBrains Mono';}
  .multi-cell-chg{font-size:10.5px; font-weight:600; font-family:'JetBrains Mono';}
  .multi-cell-chg.up{color:var(--bull);} .multi-cell-chg.down{color:var(--bear);}
  .multi-cell-tf{display:flex; gap:3px; margin-left:auto;}
  .multi-cell-tf button{
    background:transparent; border:none; color:var(--text-3); font-size:10px; font-weight:600;
    padding:2px 5px; border-radius:4px; cursor:pointer;
  }
  .multi-cell-tf button:hover{color:var(--text-1); background:var(--bg-2);}
  .multi-cell-tf button.active{color:var(--accent); background:var(--accent-dim);}
  .multi-cell-canvas-wrap{flex:1; min-height:0; position:relative;}
  .multi-cell-canvas-wrap canvas{display:block; width:100%; height:100%;}
  .multi-cell-empty{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:var(--text-3); font-size:11px;
  }
  .multi-cell-ind-btn{
    background:transparent; border:1px solid var(--border); color:var(--text-3);
    font-size:9.5px; font-weight:600; padding:2px 6px; border-radius:4px; cursor:pointer;
  }
  .multi-cell-ind-btn:hover{color:var(--text-1); border-color:var(--accent);}
  .multi-cell-max-btn{
    background:transparent; border:none; color:var(--text-3);
    display:flex; align-items:center; justify-content:center;
    padding:2px; border-radius:4px; cursor:pointer;
  }
  .multi-cell-max-btn:hover{color:var(--text-1); background:var(--bg-2);}
  .multi-cell-legend{
    display:flex; flex-wrap:wrap; gap:4px; padding:3px 8px; flex-shrink:0;
    border-bottom:1px solid var(--border-soft);
  }
  .multi-cell-legend:empty{display:none;}
  /* Maximizing a cell (see toggleCellMaximize) spans it across the whole grid
     while every other cell just stops being displayed -- still mounted with
     its own state/data/canvas intact underneath, not torn down, so restoring
     is instant with nothing to re-fetch. */
  .multi-chart-grid.has-maximized .multi-chart-cell{display:none;}
  .multi-chart-grid.has-maximized .multi-chart-cell.maximized{
    display:flex; grid-column:1/-1; grid-row:1/-1;
  }

  /* ---------- Pane controls (collapse/maximize/reorder) — DOM overlay positioned
     to match each pane's canvas-computed y/height every redraw ---------- */
  .pane-controls-layer{position:absolute; inset:0; pointer-events:none;}
  .pane-controls-row{
    position:absolute; display:flex; align-items:center; gap:2px;
    pointer-events:auto;
  }
  .pane-ctrl-btn{
    width:16px; height:16px; border-radius:4px; border:none; background:none;
    color:var(--text-3); display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .pane-ctrl-btn:hover{background:var(--bg-3); color:var(--text-1);}
  .pane-ctrl-btn:disabled{opacity:0.25; pointer-events:none;}
  .pane-ctrl-btn.active{color:var(--accent);}
  .chart-hover-readout{
    font-family:'JetBrains Mono'; font-size:11px; color:var(--text-2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    flex:0 1 auto; min-width:0;
  }
  .chart-hover-readout:not(:empty){padding-left:10px; border-left:1px solid var(--border-soft);}

  /* ---------- Order book (rendered inside the slide-in panel) ---------- */
  .book{flex:1; overflow-y:auto; display:flex; flex-direction:column;}
  .book-head-row{
    display:grid; grid-template-columns:1fr 1fr 1fr;
    padding:6px 12px; font-size:10px; color:var(--text-3);
    text-transform:uppercase; letter-spacing:0.04em;
  }
  .book-head-row span:nth-child(2){text-align:center;}
  .book-head-row span:last-child{text-align:right;}
  .book-row{
    display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center;
    padding:2.5px 12px; position:relative; font-family:'JetBrains Mono'; font-size:11px;
  }
  .book-row .bar{position:absolute; top:0; bottom:0; opacity:0.5;}
  .book-row.ask .bar{background:var(--bear-dim); right:50%;}
  .book-row.bid .bar{background:var(--bull-dim); left:50%;}
  .book-row .qty{position:relative; color:var(--text-2);}
  .book-row .px{position:relative; text-align:center; font-weight:600;}
  .book-row.ask .px{color:var(--bear);}
  .book-row.bid .px{color:var(--bull);}
  .book-row .total{position:relative; text-align:right; color:var(--text-2);}
  .book-mid{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:8px; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
    font-family:'JetBrains Mono'; font-weight:600; font-size:13px;
  }
  .spread{font-size:10px; color:var(--text-3); font-weight:400;}

  /* ---------- Positions / Orders / Alerts (rendered inside the slide-in panel) ---------- */
  .bottom-tabs{
    display:flex; gap:4px; padding:8px 14px 0 14px; border-bottom:1px solid var(--border-soft);
  }
  .btab{
    background:none; border:none; color:var(--text-2); font-size:12px; font-weight:500;
    padding:7px 4px; margin-right:16px; border-bottom:2px solid transparent;
  }
  .btab.active{color:var(--text-1); border-color:var(--accent);}
  .bottom-body{flex:1; overflow-y:auto; padding:0 14px;}
  table{width:100%; border-collapse:collapse;}
  thead th{
    text-align:left; font-size:10px; color:var(--text-3); text-transform:uppercase;
    letter-spacing:0.05em; font-weight:600; padding:9px 8px; border-bottom:1px solid var(--border-soft);
    position:sticky; top:0; background:var(--bg-1);
  }
  tbody td{
    padding:8px 8px; font-size:12px; border-bottom:1px solid var(--border-soft);
  }
  tbody td.mono{font-family:'JetBrains Mono';}
  .side-tag{font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; font-family:'JetBrains Mono';}
  .side-tag.buy{color:var(--bull); background:var(--bull-dim);}
  .side-tag.sell{color:var(--bear); background:var(--bear-dim);}
  .pnl.up{color:var(--bull);} .pnl.down{color:var(--bear);}
  .empty-row td{color:var(--text-3); text-align:center; padding:20px;}

  /* ---------- Currency picker (topbar) ---------- */
  .currency-menu-wrap{position:relative;}
  .currency-btn{width:auto; padding:0 8px; gap:5px; font-size:11.5px; font-weight:600;}
  .currency-btn:hover{background:var(--bg-2); color:var(--text-1); border-color:var(--border);}
  .currency-btn.open{border-color:var(--accent); background:var(--accent-dim); color:var(--accent);}
  .currency-menu{
    display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:60;
    width:240px; max-height:360px;
    background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45); overflow:hidden;
    flex-direction:column;
  }
  .currency-menu.open{display:flex;}
  .currency-list{overflow-y:auto; padding:4px 0;}
  .currency-row{
    display:flex; align-items:center; gap:9px; padding:7px 12px; cursor:pointer;
  }
  .currency-row:hover{background:var(--bg-3);}
  .currency-row.active{color:var(--accent); background:var(--accent-dim);}
  .currency-row-flag{font-size:15px; flex-shrink:0; line-height:1;}
  .currency-row-code{font-family:'JetBrains Mono'; font-size:12px; font-weight:600; flex-shrink:0; width:36px;}
  .currency-row-name{font-size:11.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .currency-empty{padding:16px 14px; text-align:center; color:var(--text-3); font-size:11.5px;}

  /* ---------- Auto-refresh menu (topbar) ---------- */
  #refreshMenuBtn{position:relative;}
  #refreshMenuBtn.open{border-color:var(--accent); background:var(--accent-dim); color:var(--accent);}
  .refresh-live-dot{
    display:none; position:absolute; top:5px; right:5px; width:6px; height:6px;
    border-radius:50%; background:var(--bull); box-shadow:0 0 0 2px var(--bg-1);
  }
  #refreshMenuBtn.refresh-on .refresh-live-dot{display:block;}
  .refresh-menu{width:190px;}
  .refresh-opt-list{padding:4px 0;}
  .more-menu-item.refresh-opt.active{color:var(--accent); background:var(--accent-dim);}
  .refresh-custom{display:flex; align-items:center; gap:6px; padding:8px 12px 6px;}
  .refresh-custom input{
    flex:1; min-width:0; background:var(--bg-3); border:1px solid var(--border); border-radius:6px;
    color:var(--text-1); font-family:inherit; font-size:11.5px; padding:6px 8px; outline:none;
  }
  .refresh-custom input:focus{border-color:var(--accent);}
  .refresh-custom input::-webkit-outer-spin-button, .refresh-custom input::-webkit-inner-spin-button{margin-left:4px;}
  .refresh-custom button{
    flex-shrink:0; width:26px; height:26px; border-radius:6px; border:1px solid var(--border);
    background:var(--bg-3); color:var(--text-2); display:flex; align-items:center; justify-content:center;
  }
  .refresh-custom button:hover{border-color:var(--accent); color:var(--accent);}

  /* ---------- Account menu (topbar avatar) ---------- */
  .user-menu-wrap{position:relative; display:none;}
  .avatar{border:none; cursor:pointer;}
  .user-menu{
    display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:60;
    width:210px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45); overflow:hidden; padding:6px 0;
  }
  .user-menu.open{display:block;}
  .user-menu-email{
    padding:9px 14px 7px; font-size:11.5px; color:var(--text-2);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* ---------- Auth overlay (login / signup) ---------- */
  .auth-overlay{
    position:fixed; inset:0; z-index:300;
    background:rgba(5,7,11,0.72); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
  }
  .auth-overlay.hidden{display:none;}
  .auth-card{
    width:340px; background:var(--bg-1); border:1px solid var(--border); border-radius:14px;
    padding:28px 26px; box-shadow:0 24px 64px rgba(0,0,0,0.55);
  }
  .auth-brand{display:flex; align-items:center; gap:8px; margin-bottom:22px;}
  .auth-tabs{display:flex; gap:2px; background:var(--bg-2); border-radius:8px; padding:3px; margin-bottom:18px;}
  .auth-tab{flex:1; background:none; border:none; color:var(--text-2); font-size:12.5px; font-weight:600; padding:8px 0; border-radius:6px;}
  .auth-tab.active{background:var(--bg-3); color:var(--text-1);}
  .auth-form{display:flex; flex-direction:column; gap:14px;}
  .auth-name-row{display:flex; gap:10px;}
  .auth-name-row .auth-label{flex:1; min-width:0;}
  .auth-label{display:flex; flex-direction:column; gap:6px; font-size:11.5px; color:var(--text-2); font-weight:500;}
  .auth-input{
    background:var(--bg-2); border:1px solid var(--border); border-radius:8px;
    padding:9px 12px; color:var(--text-1); font-family:'Inter'; font-size:13px; outline:none;
  }
  .auth-input:focus{border-color:var(--accent);}
  .auth-error{color:var(--bear); font-size:11.5px; min-height:14px;}
  .password-field{position:relative; display:flex;}
  .password-field input{width:100%; padding-right:34px;}
  .password-toggle-btn{
    position:absolute; right:2px; top:50%; transform:translateY(-50%);
    background:none; border:none; padding:6px; margin:0; cursor:pointer; color:var(--text-2);
    display:flex; align-items:center; justify-content:center; border-radius:6px;
  }
  .password-toggle-btn:hover{color:var(--text-1); background:var(--bg-3);}
  .password-toggle-btn svg{width:15px; height:15px; display:block;}
  .cellphone-row{display:flex; gap:6px;}
  .cellphone-row .cellphone-code{flex:0 0 92px; min-width:0; width:auto; cursor:pointer; text-overflow:ellipsis;}
  .cellphone-row input{flex:1; min-width:0; width:auto;}
  .notify-channels-row{display:flex; flex-wrap:wrap; gap:4px 16px;}
  .notify-channel-opt{display:inline-flex; align-items:center; gap:6px; font-weight:normal; cursor:pointer;}
  .telegram-link-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .sessions-list{max-height:160px; overflow-y:auto; border:1px solid var(--border); border-radius:8px;}
  .session-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; font-weight:normal; font-size:12px; border-bottom:1px solid var(--border);}
  .session-row:last-child{border-bottom:none;}
  .session-row.session-inactive{opacity:0.55;}
  .session-info{min-width:0;}
  .session-meta{color:var(--text-2); margin-top:2px;}
  .session-current-tag{color:var(--accent); font-weight:600;}
  .session-revoke-btn{flex:0 0 auto; padding:4px 10px; font-size:11px;}
  .auth-submit{
    background:var(--accent); color:#0A0D12; border:none; border-radius:8px;
    padding:10px 0; font-size:13px; font-weight:600;
  }
  .auth-submit:hover{filter:brightness(1.1);}
  .auth-submit:disabled{opacity:0.6; cursor:default;}
  .auth-hint{margin-top:14px; font-size:10.5px; color:var(--text-3); line-height:1.5; text-align:center;}

  /* ---------- Trading mode toggle + Options chain ---------- */
  /* Recolors the whole shell to --amber while in Options mode (same --accent
     variable every existing component already keys off — wl-row selection
     stripe, icon-btn.active, search focus border, etc. — so this one
     override is the entire "mind switch" cue, no per-component changes). */
  .app.mode-options{
    --accent:var(--amber); --accent-dim:rgba(245,166,35,0.14); --accent-glow:rgba(245,166,35,0.35);
  }
  .chart-only-controls{display:flex; align-items:center;}
  /* Hidden while viewing the chain, restored when the Chain/Chart sub-toggle
     (inside #optionsChainPanel) switches to Chart — see setOptionsSubView(). */
  .app.mode-options:not(.options-chart-view) .chart-only-controls{display:none;}
  /* Options Indicators launcher: nested inside .chart-only-controls (so it
     hides along with everything else while in Options>Chain sub-view), but
     also hidden outright in Stocks mode, since these indicators read
     options-chain data tied to the current symbol and are meaningless
     there — see the comment next to #optionsIndicatorLauncher in index.html. */
  .app:not(.mode-options) #optionsIndicatorLauncher{display:none;}
  /* My Position: only meaningful for Covered Call / Cash-Secured Put
     recommendations, which only ever apply in Options mode — same
     visibility rule as #optionsIndicatorLauncher above. */
  .app:not(.mode-options) #myPositionLauncher{display:none;}
  /* Lives in .chart-toolbar (not #optionsChainPanel) so it's reachable from
     both sub-views — see the comment next to #subViewChainBtn in index.html.
     Meaningless outside Options mode, so hidden there. */
  .app:not(.mode-options) .options-subview-toggle{display:none;}
  .options-subview-toggle{flex-shrink:0;}
  .mode-toggle{
    display:flex; background:var(--bg-2); border:1px solid var(--border);
    border-radius:20px; padding:2px; flex-shrink:0;
  }
  .mode-toggle-btn{
    border:none; background:none; font-family:inherit; font-size:12px; font-weight:600;
    padding:6px 14px; border-radius:16px; color:var(--text-2); transition:background .15s, color .15s;
  }
  .mode-toggle-btn[aria-selected="true"]{background:var(--accent-dim); color:var(--accent);}

  .options-chain-panel{flex:1; min-height:0; display:flex; flex-direction:column; padding:10px 14px; overflow:hidden;}
  .exp-row{display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; flex-shrink:0;}
  .exp-pill{
    border:1px solid var(--border); background:var(--bg-2); color:var(--text-2);
    border-radius:20px; padding:5px 12px; font-size:11.5px; font-family:'JetBrains Mono',monospace;
  }
  .exp-pill.active{border-color:var(--accent); color:var(--accent); background:var(--accent-dim);}
  .chain-scroll{flex:1; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:var(--radius);}
  /* width:max-content + min-width:100% (not a plain width:100%) so the
     21-column Greeks+market-data layout can grow past the panel's width and
     scroll horizontally inside .chain-scroll, instead of every column
     getting squeezed illegibly thin. */
  .chain-table{width:max-content; min-width:100%; border-collapse:collapse; font-size:11.5px;}
  .chain-table th, .chain-table td{white-space:nowrap;}
  .chain-table thead{position:sticky; top:0; background:var(--bg-1); z-index:1;}
  .chain-table .side-head{
    text-align:center; font-size:10px; letter-spacing:0.08em; padding:7px 0;
    color:var(--text-3); border-bottom:1px solid var(--border-soft);
  }
  .chain-table .side-head.calls{color:var(--bull);}
  .chain-table .side-head.puts{color:var(--bear);}
  .chain-table .strike-head{border-bottom:1px solid var(--border-soft);}
  .chain-table .col-head th{
    padding:5px 8px; font-weight:500; color:var(--text-3); font-size:10px;
    border-bottom:1px solid var(--border-soft); text-align:right;
  }
  .chain-table td{padding:5px 8px; text-align:right; border-bottom:1px solid var(--border-soft); color:var(--text-2); font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;}
  .chain-table td.itm{background:var(--accent-dim); color:var(--text-1);}
  .chain-table td.strike-cell{
    text-align:center; font-weight:600; color:var(--text-1); background:var(--bg-1);
    border-left:1px solid var(--border-soft); border-right:1px solid var(--border-soft);
  }
  .options-chain-status{padding:10px 2px; color:var(--text-3); font-size:12px; flex-shrink:0;}
  .chain-summary{display:flex; gap:8px; margin-bottom:10px; flex-shrink:0; flex-wrap:wrap;}
  .chain-summary-stat{
    display:flex; align-items:baseline; gap:5px;
    background:var(--bg-2); border:1px solid var(--border); border-radius:20px;
    padding:4px 10px; font-size:10.5px; color:var(--text-3);
  }
  .chain-summary-stat strong{font-family:'JetBrains Mono'; font-size:11.5px; font-weight:600; color:var(--text-1);}
  .chain-summary-stat strong.up{color:var(--bull);} .chain-summary-stat strong.down{color:var(--bear);}