*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root{
    --bg:#0d1117; --surface:#161b22; --border:#21262d;
    --accent:#58a6ff; --green:#3fb950; --red:#f85149;
    --text:#e6edf3; --muted:#8b949e;
    --font:'JetBrains Mono','Courier New',monospace;

    --wl-width: 260px;
    --splitter: 6px;
    --work-bg: #0f141b;

    --row-menubar: 30px;
    --row-toolbar: 48px;
    --row-panelhdr: 28px;
  }

  html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;overflow:hidden;}

  #frame{
    height:100vh;
    display:grid;
    grid-template-rows: var(--row-menubar) var(--row-toolbar) 1fr;
    grid-template-columns: 1fr;
  }

  /* ========= MENUBAR ========= */
  #menubar{
    display:flex;align-items:center;gap:10px;
    padding:0 10px;
    background:#11161d;
    border-bottom:1px solid var(--border);
    color:var(--muted);
    user-select:none;
    position:relative;
    z-index:50;
  }

  .menu{ position:relative; display:inline-flex; align-items:center; height:100%; }
  .menu-btn{ padding:4px 10px; border-radius:4px; cursor:pointer; color:var(--muted); }
  .menu-btn:hover, .menu.open .menu-btn{ background:rgba(255,255,255,.04); color:var(--text); }
  .menu-dropdown{
    position:absolute;
    top: calc(var(--row-menubar) - 2px);
    left:0;
    min-width: 220px;
    background:#0f141b;
    border:1px solid var(--border);
    border-radius:6px;
    padding:6px;
    display:none;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  .menu.open .menu-dropdown{ display:block; }

  .mi{
    padding:7px 10px;
    border-radius:5px;
    cursor:pointer;
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:12px;
  }
  .mi:hover{ background: rgba(88,166,255,.10); }
  .mi.muted{ color: var(--muted); cursor:default; }
  .mi.muted:hover{ background:transparent; }
  .divider{ height:1px; background:var(--border); margin:6px 4px; }

  .mi.has-sub{ position:relative; }
  
  .submenu{
   position:absolute;
   top:-6px;               /* picit feljebb: stabilabb egérút */
   left:100%;              /* NINCS GAP! */
   min-width: 200px;
   background:#0f141b;
   border:1px solid var(--border);
   border-radius:6px;
   padding:6px;
   display:none;
   box-shadow: 0 10px 30px rgba(0,0,0,.45);
   z-index:1000;
  }

  /* “HÍD” a parent és a submenu között, hogy ne tudjon kiesni az egér */
  .mi.has-sub::after{
   content:'';
   position:absolute;
   top:-6px;
   right:-12px;
   width:12px;
   height:calc(100% + 12px);
  }
    
  .mi.has-sub:hover .submenu{ display:block; }

  #status-config{ margin-left:auto; font-size:11px; color:var(--muted); }
  #status-data{ font-size:11px; color:var(--muted); }

  /* ========= TOOLBAR ========= */
  #toolbar{
    
    display:flex;align-items:center;gap:8px;
    padding:0 14px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    z-index:10;
  }
  #logo{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--accent);text-transform:uppercase;}

  #ticker-input{
    background:var(--bg);
    border:1px solid var(--border);
    color:var(--text);
    font-family:var(--font);
    font-size:13px;
    padding:5px 10px;
    border-radius:4px;
    width:88px;
    text-transform:uppercase;
    outline:none;
  }
  #ticker-input:focus{border-color:var(--accent);}

  .vp-btn{
    background:transparent;
    border:1px solid var(--border);
    color:var(--muted);
    font-family:var(--font);
    font-size:11px;
    padding:3px 8px;
    border-radius:4px;
    cursor:pointer;
  }
  .vp-btn.active,.vp-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(88,166,255,.08);
  }

  #load-btn{
    background:var(--accent);
    border:none;
    color:#0d1117;
    font-family:var(--font);
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:4px;
    cursor:pointer;
  }
  
  
  .toolbar-divider{
    width:1px;
    height:20px;
    background:var(--border);
    opacity:.95;
    margin:0 2px;
    flex:0 0 auto;
  }


  #reset-view-btn{
    background:transparent;
    border:1px solid var(--border);
    color:var(--muted);
    font-family:var(--font);
    font-size:12px;
    padding:5px 10px;
    border-radius:4px;
    cursor:pointer;
  }
  #reset-view-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(88,166,255,.08);
  }

  
  #price-display{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap;min-width:max-content;}
  #current-price{font-size:16px;font-weight:700;}
  .up{color:var(--green);} .down{color:var(--red);}

  /* ========= WORKSPACE ========= */
  #workspace{
    background: var(--work-bg);
    display:grid;
    grid-template-columns: var(--wl-width) var(--splitter) 1fr;
    grid-template-rows: 1fr;
    overflow:hidden;
  }

  .panel{
    background: var(--surface);
    border-right:1px solid var(--border);
    overflow:hidden;
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
  }

  /* ========= CHART PANEL: MAIN + SUBPANES ========= */
  .chart-container{
    flex: 1;
    display:flex;
    flex-direction:column;
    min-height:0;
    min-width:0;
  }

  .chart-main{
    position:relative;
    flex: 0 0 auto;
    min-height:0;
    min-width:0;
    border-bottom:1px solid var(--border);
  }
  /* When no subpanes exist, main fills the full container */
  .chart-main.no-subs{
    flex: 1 1 auto;
  }

/* Main-chart right-edge snap button (only shows when not at right edge) */
.right-edge-btn{
  position:absolute;
  right:10px;
  bottom:10px;
  width:28px;
  height:28px;
  border-radius:6px;
  border:1px solid var(--border);
  background: rgba(18,24,38,.92);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  z-index: 6;
  opacity: .85;
}
.right-edge-btn:hover{ opacity: 1; border-color: rgba(88,166,255,.55); }
.right-edge-btn.hidden{ display:none; }

  .chart-canvas{
    width:100%;
    height:100%;
  }

  .subpanes{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    background: #0f141b;
    border-top:1px solid var(--border);
    flex: 0 0 auto;
    min-height:0;
  }

  .subpane{
    position:relative;
    flex: 0 0 auto;
    min-height:0;
    margin-top:0;
    border:1px solid var(--border);
    background: #0d1117;
    border-radius:6px;
    overflow:hidden;
  }
  .subpane:first-child{ margin-top:0; }

  .subpane.active-target{
    outline: 1px solid rgba(88,166,255,.55);
    outline-offset: -1px;
  }
  .panel.active{
    outline: 1px solid rgba(88,166,255,.55);
    outline-offset: -1px;
  }

  .panel-header{
    height: var(--row-panelhdr);
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 10px;
    border-bottom:1px solid var(--border);
    background: #121826;
    flex-shrink:0;
  }
  .panel-title{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    flex-shrink:0;
  }
  .panel-name{
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    font-family: var(--font);
    font-size:12px;
    padding:3px 6px;
    border-radius:4px;
    width: 220px;
    outline:none;
  }
  .panel-name:focus{
    border-color: var(--accent);
    background: rgba(255,255,255,.03);
  }
  .panel-spacer{flex:1;}
  .panel-badge{
    font-size:10px;
    color: var(--muted);
    padding:2px 6px;
    border:1px solid var(--border);
    border-radius: 999px;
  }
  .panel-x{
    margin-left:8px;
    font-size:12px;
    padding:2px 6px;
    border:1px solid var(--border);
    border-radius:6px;
    cursor:pointer;
    color:var(--muted);
  }
  .panel-x:hover{ color:var(--text); border-color:rgba(88,166,255,.55); background:rgba(88,166,255,.08); }

  /* Watchlist */
  #watchlist{flex:1;overflow-y:auto;padding:8px 0;}
  .wl-item{display:flex;flex-direction:column;padding:7px 14px;cursor:pointer;border-left:2px solid transparent;}
  .wl-item:hover{background:rgba(255,255,255,.03);}
  .wl-item.active{border-left-color:var(--accent);background:rgba(88,166,255,.06);}
  .wl-ticker{font-weight:700;font-size:12px;} .wl-name{font-size:10px;color:var(--muted);margin-top:1px;}

  /* Splitter */
  #v-split{background: transparent; cursor: col-resize; position:relative;}
  #v-split::after{content:'';position:absolute;inset:0;background: rgba(255,255,255,.03);}
  #v-split:hover::after{ background: rgba(88,166,255,.10); }

  /* Charts area */
  #charts-area{
    background: var(--work-bg);
    padding: var(--splitter);
    display:grid;
    gap: var(--splitter);
    overflow:hidden;
    min-width:0;
    min-height:0;
  }

  /* Chart internals */
  /* NOTE: main + subpanes stack (see earlier block). Keep here consistent. */
  .chart-container{flex:1;display:flex;flex-direction:column;background:var(--bg);min-height:0;min-width:0;}
  .chart-main{position:relative;flex:0 0 auto;min-height:0;min-width:0;}
  .chart-main.no-subs{flex:1 1 auto;}
  .chart-canvas{width:100%;height:100%;}
  .msg-overlay{
    position:absolute;inset:0;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:8px;font-size:12px;color:var(--muted);
    background:var(--bg);
    z-index:10;
  }
  .msg-overlay.error{color:var(--red);}
  .msg-overlay.hidden{display:none;}

  ::-webkit-scrollbar{width:4px;}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}


/* ===== Indicators UI ===== */
.panel-ind{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  font-family:var(--font);
  font-size:11px;
  padding:2px 8px;
  border-radius:6px;
  cursor:pointer;
  margin-left:8px;
}

/* Subpane close (disable subchart indicator) */
.subpane-x{
  position:absolute;
  top:6px;
  right:8px;
  width:18px;
  height:18px;
  line-height:18px;
  text-align:center;
  border-radius:6px;
  border:1px solid var(--border);
  color:var(--muted);
  background: rgba(0,0,0,.25);
  cursor:pointer;
  z-index: 30;
  user-select:none;
}
.subpane-x:hover{
  border-color: rgba(248,81,73,.55);
  color: #f85149;
  background: rgba(248,81,73,.08);
}

/* ===== Pane splitter (draggable resize bar between main chart and subpanes, and between subpanes) ===== */
.pane-splitter{
  flex: 0 0 5px;
  min-height: 5px;
  max-height: 5px;
  background: #161b22;
  cursor: row-resize;
  user-select: none;
  position: relative;
  z-index: 20;
  transition: background 0.15s;
}
.pane-splitter::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:32px;
  height:2px;
  border-radius:2px;
  background: var(--border);
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.pane-splitter:hover,
.pane-splitter.dragging{
  background: rgba(88,166,255,.18);
}
.pane-splitter:hover::after,
.pane-splitter.dragging::after{
  background: rgba(88,166,255,.8);
  opacity: 1;
}
.panel-ind:hover{
  border-color:rgba(88,166,255,.55);
  color:var(--text);
  background:rgba(88,166,255,.08);
}

.ind-menu{
  position:absolute;
  top: 34px;
  right: 8px;
  width: 220px;
  background:#0f141b;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  z-index: 2000;
}
.ind-menu.hidden{ display:none; }
.ind-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 6px;
  border-radius:6px;
}
.ind-item:hover{ background:rgba(255,255,255,.04); }
.ind-left{ display:flex; align-items:center; gap:8px; }
.ind-item label{ cursor:pointer; color:var(--text); font-size:12px; }
.ind-item small{ color:var(--muted); font-size:10px; }
.ind-item input[type="checkbox"]{ transform: translateY(1px); }
.ind-sep{ height:1px; background:var(--border); margin:6px 0; }
.ind-hint{ color:var(--muted); font-size:10px; padding:4px 6px 0; }




/* Backtest mini controls in toolbar */
.bt-autoopen{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--muted);
  user-select:none;
}
.bt-autoopen input{ transform: translateY(1px); }
.bt-autoopen span{ letter-spacing:.06em; }


/* ===== Toolbar Indicators button ===== */
#indicators-btn{
  background: transparent;
  border:1px solid var(--border);
  color: var(--muted);
  font-family:var(--font);
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:4px;
  cursor:pointer;
  margin-left:0px;
}
#indicators-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(88,166,255,.08);
}


/* ===== Modal + Context Menu (Indicators v1) ===== */
.hidden{ display:none !important; }

.modal{ position:fixed; inset:0; z-index:5000; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.modal-card{
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  width:min(860px, calc(100vw - 40px));
  max-height:calc(100vh - 120px);
  background:#0f141b; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  overflow:hidden; display:flex; flex-direction:column;
}



/* Bigger modal for M3 report (big charts need space) */
.modal-card.bt-report-card{
  width: min(1600px, 95vw);
  max-height: 90vh;
  top: 5vh;                    /* ne érjen le teljesen: maradjon “modal” érzete */
}


/* ===== Backtest Report (M3) ===== */
.bt-report-wrap{ display:flex; flex-direction:column; gap:12px; }

.bt-report-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}

.bt-tab{
  background: transparent;
  border:1px solid var(--border);
  color: var(--muted);
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
}
.bt-tab:hover{
  border-color: rgba(88,166,255,.55);
  color: var(--text);
  background: rgba(88,166,255,.08);
}
.bt-tab.active{
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(88,166,255,.12);
}

.bt-report-panel.hidden{ display:none; }

.bt-panel-hint{
  color: var(--muted);
  font-size:11px;
  margin-bottom:8px;
}

.bt-panel-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

@media (min-width: 980px){
  .bt-panel-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.bt-card{
  border:1px solid var(--border);
  border-radius:10px;
  background: #0f141b;
  overflow:hidden;
}

.bt-card-title{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
}

.bt-card-body{
  padding:12px;
  min-height: 80px;
  color: var(--text);
  font-size:12px;
}


/* ===== Backtest Report: Tables ===== */
.bt-table-wrap{
  overflow:auto;
  max-height: 520px;          /* nagy táblák ne robbantsák szét a modalt */
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:#0b0f14;
}

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

.bt-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background:#0f141b;
  border-bottom:1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:8px 10px;
  white-space:nowrap;
}

.bt-table tbody td{
  border-top:1px solid rgba(255,255,255,.04);
  padding:8px 10px;
  white-space:nowrap;
}

.bt-table tbody tr:hover{
  background: rgba(88,166,255,.06);
}



/* ===== Backtest Report: Graphs tab (big report charts) ===== */
.bt-graph-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.bt-graph-label{
  color: var(--muted);
  font-size:11px;
}

.bt-graph-sel{
  background: var(--bg);
  border:1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
  outline:none;
  min-width: 340px;
}
.bt-graph-sel:focus{
  border-color: var(--accent);
}

.bt-graph-area{
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background: #0b0f14;
  min-height: 520px;          /* EZ ad helyet a “nagy” report chartnak */
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}



.modal-head{ height:40px; display:flex; align-items:center; gap:10px; padding:0 12px; border-bottom:1px solid var(--border); background:#11161d; }
.modal-title{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text); }
.modal-spacer{ flex:1; }
.icon-btn{
  background:transparent; border:1px solid var(--border); color:var(--muted);
  font-family:var(--font); font-size:14px; line-height:14px;
  width:28px; height:28px; border-radius:8px; cursor:pointer;
}
.icon-btn:hover{ border-color:rgba(88,166,255,.55); color:var(--text); background:rgba(88,166,255,.08); }
.modal-body{ padding:12px; overflow:auto; }

/* ── Indicators Modal v2 ─────────────────────────────────── */

/* Wider card override for indicator modal */
.ind-modal-card{
  width: min(1020px, calc(100vw - 40px)) !important;
}

/* Search bar */
.ind-search-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  background:#0d1117;
}
.ind-search-icon{
  color:var(--muted);
  font-size:16px;
  flex-shrink:0;
  user-select:none;
}
.ind-search-input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-family:var(--font);
  font-size:12px;
  padding:2px 0;
}
.ind-search-input::placeholder{ color:var(--muted); }

/* Two-panel body */
.ind-v2-body{
  display:grid;
  grid-template-columns: 340px 1fr;
  min-height:0;
  flex:1;
  overflow:hidden;
  height:calc(100vh - 120px - 40px - 41px); /* modal max - header - searchbar */
}

/* Left panel */
.ind-v2-left{
  border-right:1px solid var(--border);
  overflow-y:auto;
  overflow-x:hidden;
  padding:6px 0;
  background:#0d1117;
}

/* Right panel */
.ind-v2-right{
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px;
  background:#0d1117;
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Placeholder (nothing selected) */
.ind-v2-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:100%;
  min-height:200px;
  color:var(--muted);
}
.ind-v2-placeholder-icon{
  font-size:32px;
  opacity:.25;
}
.ind-v2-placeholder-text{
  font-size:13px;
  color:var(--muted);
}
.ind-v2-placeholder-sub{
  font-size:11px;
  color:var(--muted);
  opacity:.6;
}

/* Category header */
.ind-cat-hdr{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px 4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  user-select:none;
  margin-top:4px;
}
.ind-cat-hdr:first-child{ margin-top:0; }
.ind-cat-line{
  flex:1;
  height:1px;
  background:var(--border);
}

/* Indicator base row */
.ind-row{
  display:flex;
  align-items:center;
  gap:0;
  padding:0 8px 0 12px;
  min-height:34px;
  cursor:pointer;
  border-left:2px solid transparent;
  transition:background .1s;
}
.ind-row:hover{ background:rgba(88,166,255,.06); }
.ind-row.ind-row-active{
  background:rgba(88,166,255,.10);
  border-left-color:var(--accent);
}

/* Name + badge area */
.ind-row-name{
  flex:1;
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:6px;
  overflow:hidden;
}
.ind-row-label{
  font-size:12px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ind-row-id{
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
}
.ind-badge{
  display:inline-flex;
  align-items:center;
  padding:1px 5px;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  flex-shrink:0;
  white-space:nowrap;
}
.ind-badge-ovl{
  border:1px solid rgba(63,185,80,.40);
  color:rgba(63,185,80,.90);
  background:rgba(63,185,80,.08);
}
.ind-badge-sub{
  border:1px solid rgba(88,166,255,.45);
  color:rgba(88,166,255,.95);
  background:rgba(88,166,255,.10);
}

/* Checkbox + remove in base row */
.ind-row-actions{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  margin-left:6px;
}
.ind-row-chk{
  width:14px;
  height:14px;
  cursor:pointer;
  accent-color:var(--accent);
  flex-shrink:0;
}
.ind-row-x{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  border:1px solid transparent;
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
  flex-shrink:0;
  line-height:1;
  opacity:0;
  transition:opacity .15s;
}
.ind-row:hover .ind-row-x,
.ind-instance:hover .ind-row-x{ opacity:1; }
.ind-row-x:hover{
  border-color:rgba(248,81,73,.55);
  color:#f85149;
  background:rgba(248,81,73,.10);
}

/* Instance rows (indented) */
.ind-instance{
  display:flex;
  align-items:center;
  gap:0;
  padding:0 8px 0 26px;
  min-height:28px;
  cursor:pointer;
  border-left:2px solid transparent;
}
.ind-instance:hover{ background:rgba(88,166,255,.05); }
.ind-instance.ind-row-active{
  background:rgba(88,166,255,.08);
  border-left-color:rgba(88,166,255,.5);
}
.ind-instance-tree{
  color:rgba(255,255,255,.18);
  font-size:11px;
  margin-right:5px;
  flex-shrink:0;
  user-select:none;
}
.ind-instance-label{
  flex:1;
  font-size:11px;
  color:rgba(230,237,243,.75);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Empty list message */
.ind-list-empty{
  padding:24px 16px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
}

/* ── Right panel: settings form ──────────────────────────── */

.ind-right-header{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:14px;
  flex-shrink:0;
}
.ind-right-title{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ind-right-badge{
  flex-shrink:0;
}

.ind-section-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
  flex-shrink:0;
}
.ind-fields-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
  gap:10px;
  margin-bottom:16px;
}
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:11px; color:var(--muted); }
.field input[type="text"], .field input[type="number"]{
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  font-family:var(--font); font-size:12px; padding:6px 8px; border-radius:8px; outline:none;
}
.field input:focus{ border-color:var(--accent); }
.field input[type="color"]{ width:52px; height:32px; border:1px solid var(--border); border-radius:8px; background:var(--bg); padding:2px; cursor:pointer; }
.field select{
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  font-family:var(--font); font-size:12px; padding:6px 8px; border-radius:8px; outline:none; cursor:pointer;
}
.field select:focus{ border-color:var(--accent); }

.ind-add-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  flex-shrink:0;
}
button.primary{ background:var(--accent); border:none; color:#0d1117; font-family:var(--font); font-size:12px; font-weight:700; padding:7px 16px; border-radius:8px; cursor:pointer; }
button.primary:disabled{ opacity:.45; cursor:default; }
.ind-add-hint{ font-size:11px; color:var(--muted); }

/* Divider between settings and help */
.ind-divider{
  height:1px;
  background:var(--border);
  margin:20px 0 18px;
  flex-shrink:0;
}

/* ── Right panel: help / documentation ───────────────────── */

.ind-help-section{
  display:flex;
  flex-direction:column;
  gap:16px;
  flex-shrink:0;
}

.ind-help-desc{
  font-size:12px;
  color:rgba(230,237,243,.80);
  line-height:1.7;
}

.ind-help-block{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ind-help-block-title{
  font-size:10px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.ind-help-block-title.green{ color:rgba(63,185,80,.90); }
.ind-help-block-title.red  { color:rgba(248,81,73,.90); }
.ind-help-block-title.blue { color:rgba(88,166,255,.90); }
.ind-help-block-title.gold { color:rgba(210,168,80,.90); }

.ind-help-list{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-left:0;
  margin:0;
  list-style:none;
}
.ind-help-list li{
  font-size:11px;
  color:rgba(230,237,243,.70);
  padding-left:14px;
  position:relative;
  line-height:1.5;
}
.ind-help-list li::before{
  content:'›';
  position:absolute;
  left:0;
  color:var(--muted);
}

/* Regime bars */
.ind-regime-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 16px;
}
.ind-regime-row{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.ind-regime-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ind-regime-name{
  font-size:11px;
  color:var(--muted);
}
.ind-regime-score{
  font-size:10px;
  color:var(--muted);
}
.ind-regime-bar{
  height:4px;
  border-radius:2px;
  background:var(--border);
  overflow:hidden;
}
.ind-regime-fill{
  height:100%;
  border-radius:2px;
  background:var(--accent);
  transition:width .3s ease;
}
.ind-regime-fill.s1{ background:#f85149; width:20%; }
.ind-regime-fill.s2{ background:#e09a3a; width:40%; }
.ind-regime-fill.s3{ background:#d4a017; width:60%; }
.ind-regime-fill.s4{ background:#5ca8ff; width:80%; }
.ind-regime-fill.s5{ background:#3fb950; width:100%; }

/* Settings recommendations */
.ind-settings-grid{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ind-setting-row{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:8px;
  align-items:baseline;
}
.ind-setting-key{
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  flex-shrink:0;
}
.ind-setting-val{
  font-size:11px;
  color:rgba(230,237,243,.75);
  line-height:1.5;
}

/* Pro tip box */
.ind-tip-box{
  display:flex;
  gap:10px;
  background:rgba(88,166,255,.06);
  border:1px solid rgba(88,166,255,.20);
  border-radius:8px;
  padding:10px 12px;
}
.ind-tip-icon{
  font-size:14px;
  flex-shrink:0;
  margin-top:1px;
}
.ind-tip-text{
  font-size:11px;
  color:rgba(230,237,243,.80);
  line-height:1.6;
}

/* Coming soon help placeholder */
.ind-help-soon{
  font-size:11px;
  color:var(--muted);
  font-style:italic;
  padding:8px 0;
}

.ctx-menu{ position:fixed; min-width:260px; background:#0f141b; border:1px solid var(--border); border-radius:10px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.55); z-index:6000; }
.ctx-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 8px; border-radius:8px; cursor:pointer; }
.ctx-item:hover{ background:rgba(255,255,255,.04); }
.ctx-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.dot{ width:10px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.15); flex-shrink:0; }
.ctx-label{ color:var(--text); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctx-item input{ transform: translateY(1px); }
.ctx-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ctx-remove{ color:#8b949e; font-size:11px; cursor:pointer; padding:2px 4px; border-radius:4px; line-height:1; }
.ctx-remove:hover{ color:#f85149; background:rgba(248,81,73,.12); }
.ctx-empty{ color:var(--muted); font-size:11px; padding:8px; }


/* Crosshair vertical line overlay (shared across main + subpanes) */
.xhair-vline{
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background: rgba(255,255,255,0.35);
  pointer-events:none;
  z-index: 6;
}
.xhair-vline.hidden{ display:none; }

.ohlcv-bar .indvals{
  margin-left:10px;
  color: var(--muted);
}


/* ===== Drawing Tools (v1) ===== */
.mode-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:6px;
  margin-right:6px;
}
.mode-btn{
  background: transparent;
  border:1px solid var(--border);
  color: var(--muted);
  font-family:var(--font);
  font-size:11px;
  font-weight:800;
  padding:0 10px;
  height:28px;
  border-radius:6px;
  cursor:pointer;
  user-select:none;
  letter-spacing:.08em;
}
.mode-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(88,166,255,.08);
}
.mode-btn.active{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(88,166,255,.14);
}

.drw-toolbar{
  display:flex;
  align-items:center;
  gap:6px;
}
.drw-btn{
  background: transparent;
  border:1px solid var(--border);
  color: var(--muted);
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  width:30px;
  height:28px;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.drw-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(88,166,255,.08);
}
.drw-btn.active{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(88,166,255,.12);
}
.drw-btn.danger:hover{
  border-color: rgba(248,81,73,.55);
  color: #f85149;
  background: rgba(248,81,73,.08);
}

/* Canvas overlay sitting above each chart pane (main + subpanes) */
.sq-draw-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:auto;
  z-index: 7; /* above crosshair vline (6), below menus (>=50) */
}

/* ===== Legend Info Box (floating OHLCV + indicators) ===== */
.sq-legend-box{
  position:absolute;
  top:8px;
  left:8px;
  min-width:160px;
  max-width:320px;
  background: rgba(13,17,23,.88);
  border:1px solid var(--border);
  border-radius:8px;
  padding:0;
  z-index: 20;
  user-select:none;
  pointer-events:auto;
  font-family:var(--font);
  font-size:11px;
  color:var(--text);
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
}
.sq-legend-box.hidden{ display:none !important; }

.sq-legend-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 8px;
  border-bottom:1px solid var(--border);
  cursor:move;
  background: rgba(22,27,34,.75);
  border-radius:8px 8px 0 0;
}
.sq-legend-title{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.sq-legend-close{
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  padding:0 2px;
  border-radius:4px;
}
.sq-legend-close:hover{ color:var(--red); }

.sq-legend-body{
  padding:6px 10px 8px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.sq-legend-date{
  font-size:11px;
  color:var(--accent);
  margin-bottom:2px;
  letter-spacing:.04em;
}

.sq-legend-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
}
.sq-legend-lbl{
  color:var(--muted);
  min-width:14px;
}
.sq-legend-val{
  color:var(--text);
}
.sq-legend-sep{
  height:1px;
  background:var(--border);
  margin:4px 0;
}

/* ── BT Info Box ─────────────────────────────────────────── */
.sq-btinfo-box{
  position:absolute;
  top:8px;
  left:8px;
  min-width:160px;
  max-width:260px;
  background: rgba(13,17,23,.88);
  border:1px solid rgba(88,166,255,.35);
  border-radius:8px;
  padding:0;
  z-index: 19;
  user-select:none;
  pointer-events:auto;
  font-family:var(--font);
  font-size:11px;
  color:var(--text);
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
  margin-top:0;
}
.sq-btinfo-box.hidden{ display:none !important; }

.sq-btinfo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 8px;
  border-bottom:1px solid rgba(88,166,255,.25);
  background: rgba(22,27,34,.75);
  border-radius:8px 8px 0 0;
}
.sq-btinfo-title{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
}
.sq-btinfo-close{
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  padding:0 2px;
  border-radius:4px;
}
.sq-btinfo-close:hover{ color:var(--red); }

.sq-btinfo-body{
  padding:6px 10px 8px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.sq-btinfo-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
}
.sq-btinfo-lbl{
  color:var(--muted);
  min-width:58px;
  font-size:10px;
}
.sq-btinfo-val{
  color:var(--text);
  font-weight:500;
}

/* toolbar legend toggle button */
#legend-box-btn{
  background: transparent;
  border:1px solid var(--border);
  color: var(--muted);
  font-family:var(--font);
  font-size:14px;
  width:28px;
  height:28px;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
#legend-box-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(88,166,255,.08);
}
#legend-box-btn.active{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(88,166,255,.14);
}