/* charts — extracted from index.html 2026-03-20 */
  /* Chart Pattern Component */
  .chart-container{width:100%;height:300px;background:var(--bg-0);border-radius:8px;overflow:hidden;position:relative;margin:8px 0}
  .chart-container.expanded{height:500px}
  .chart-tf-bar{display:flex;gap:4px;margin-bottom:6px}
  .chart-tf-btn{padding:4px 10px;font-size:11px;font-weight:600;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;color:var(--text-3);cursor:pointer}
  .chart-tf-btn.active{background:var(--accent);color:var(--bg-0);border-color:var(--accent)}
  .chart-tf-btn:hover{border-color:var(--accent)}
  .pattern-pills{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
  .pattern-pill{padding:3px 8px;font-size:10px;font-weight:600;border-radius:12px;white-space:nowrap}
  .pattern-pill.bullish{background:var(--go-dim);color:var(--go);border:1px solid rgba(0,214,143,0.3)}
  .pattern-pill.bearish{background:var(--stop-dim);color:var(--stop);border:1px solid rgba(255,59,92,0.3)}
  .pattern-pill.neutral{background:var(--warn-dim);color:var(--warn);border:1px solid rgba(255,176,32,0.3)}
  .pattern-pill.forming{opacity:0.7;font-style:italic}
  .chart-expand-btn{position:absolute;top:6px;right:6px;z-index:10;background:rgba(0,0,0,0.6);border:1px solid var(--border);border-radius:4px;color:var(--text-3);padding:2px 6px;font-size:10px;cursor:pointer}
  .chart-legend{font-size:10px;color:var(--text-3);padding:4px 0;display:flex;gap:12px;flex-wrap:wrap}
  .chart-legend span{display:inline-flex;align-items:center;gap:3px}
  .chart-legend .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
  .view-chart-btn{padding:4px 10px;font-size:11px;font-weight:600;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;color:var(--accent);cursor:pointer;margin:4px 0}
  .view-chart-btn:hover{background:var(--accent);color:var(--bg-0)}

/* ═══ UNIFIED CHARTS ENVIRONMENT ═══ */
.charts-ac-btn{font-size:10px;padding:4px 10px;border-radius:4px;cursor:pointer;background:transparent;border:1px solid var(--border);color:var(--text-2);transition:all .15s}
.charts-ac-btn.active{background:#0EA5E9;color:#fff;border-color:#0EA5E9}
.charts-ac-btn:hover:not(.active){background:rgba(14,165,233,0.1)}
.charts-tf-btn2{font-size:10px;padding:3px 8px;border-radius:3px;cursor:pointer;background:transparent;border:1px solid var(--border);color:var(--text-2);font-family:monospace;transition:all .15s}
.charts-tf-btn2.active{background:var(--text-1);color:var(--bg-1);border-color:var(--text-1)}
.charts-tf-btn2:hover:not(.active){background:rgba(255,255,255,0.06)}
.charts-ind-btn{font-size:9px;padding:3px 6px;border-radius:3px;cursor:pointer;background:transparent;border:1px solid var(--border);color:var(--text-3);font-family:monospace;transition:all .15s}
.charts-ind-btn.active{background:rgba(14,165,233,0.2);color:#0EA5E9;border-color:#0EA5E9}
.charts-ind-btn:hover:not(.active){color:var(--text-1)}
.charts-wl-row{display:flex;align-items:center;gap:6px;padding:6px 10px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.03);transition:background .1s}
.charts-wl-row:hover{background:rgba(255,255,255,0.04)}
.charts-wl-row.active{background:rgba(14,165,233,0.12);border-left:2px solid #0EA5E9}
.charts-wl-sym{font-size:11px;font-weight:600;color:var(--text-1);width:50px}
.charts-wl-price{font-size:10px;color:var(--text-2);font-family:monospace;text-align:right;flex:1}
.charts-wl-chg{font-size:9px;font-family:monospace;width:50px;text-align:right}
.charts-wl-chg.up{color:#22c55e}.charts-wl-chg.down{color:#ef4444}
.charts-wl-fav{font-size:12px;cursor:pointer;opacity:.3;transition:opacity .15s}
.charts-wl-fav:hover,.charts-wl-fav.starred{opacity:1;color:#eab308}
.charts-info-section{margin-bottom:12px}
.charts-info-title{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.charts-info-val{font-size:12px;color:var(--text-1)}
.charts-info-badge{display:inline-block;font-size:9px;padding:1px 5px;border-radius:3px}
.charts-info-badge.bull{background:rgba(34,197,94,0.15);color:#22c55e}
.charts-info-badge.bear{background:rgba(239,68,68,0.15);color:#ef4444}
.charts-info-badge.neutral{background:rgba(255,255,255,0.08);color:var(--text-3)}
/* ═══ L2 HEATMAP + DOM LADDER ═══ */
.charts-heatmap-strip{position:absolute;right:0;top:0;width:50px;height:100%;z-index:5;pointer-events:auto;cursor:crosshair}
.charts-heatmap-tip{position:absolute;background:rgba(15,15,25,0.92);color:#fff;padding:3px 7px;border-radius:3px;font-size:10px;pointer-events:none;white-space:nowrap;z-index:12;font-family:monospace;display:none}
.charts-dom-ladder{position:absolute;right:55px;top:36px;width:175px;max-height:calc(100% - 60px);background:rgba(12,12,20,0.90);border:1px solid rgba(255,255,255,0.08);border-radius:5px;overflow-y:auto;z-index:8;font-size:10px;display:none;backdrop-filter:blur(4px);scrollbar-width:thin}
.charts-dom-ladder.visible{display:block}
.charts-dom-row{display:flex;align-items:center;padding:1px 5px;border-bottom:1px solid rgba(255,255,255,0.03)}
.charts-dom-row.bid{background:rgba(38,166,154,0.06)}
.charts-dom-row.ask{background:rgba(239,83,80,0.06)}
.charts-dom-row.mid{background:rgba(255,255,255,0.08);font-weight:600;justify-content:center;padding:3px 5px}
.charts-dom-price{width:65px;text-align:right;font-family:monospace;color:var(--text-2)}
.charts-dom-bar{flex:1;height:10px;margin:0 3px;border-radius:2px}
.charts-dom-bar.bid{background:rgba(38,166,154,0.45)}
.charts-dom-bar.ask{background:rgba(239,83,80,0.45)}
.charts-dom-size{width:48px;text-align:right;font-family:monospace;color:var(--text-3)}
.charts-dom-close{position:absolute;top:2px;right:4px;cursor:pointer;color:var(--text-3);font-size:12px;padding:2px 4px}
.charts-dom-close:hover{color:#fff}
.charts-imbalance{display:flex;align-items:center;gap:4px;font-size:9px;font-family:monospace;padding:0 4px;color:var(--text-3)}
.charts-imb-gauge{width:50px;height:5px;background:rgba(255,255,255,0.08);border-radius:3px;position:relative;overflow:hidden}
.charts-imb-fill{position:absolute;top:0;height:100%;border-radius:3px;transition:width .3s,left .3s}
/* ═══ TOOL BUTTONS (Matrix/Leaderboard sidebar icons) ═══ */
.charts-tool-btn{padding:6px 8px;border-radius:6px;cursor:pointer;background:transparent;border:1px solid var(--border);color:var(--text-3);transition:all .15s;display:flex;align-items:center;justify-content:center}
.charts-tool-btn:hover{background:rgba(14,165,233,0.1);color:#0EA5E9;border-color:#0EA5E9}
.charts-tool-btn.active{background:rgba(14,165,233,0.2);color:#0EA5E9;border-color:#0EA5E9}

/* ═══ TABLET (1024px) ═══ */
@media(max-width:1024px){
  #charts-sidebar{width:50px!important;min-width:50px!important}
  #charts-sidebar .charts-wl-price,#charts-sidebar .charts-wl-chg,#charts-sidebar .charts-wl-fav,#charts-sidebar input,#charts-sidebar select,#charts-sidebar .charts-ac-btn{display:none!important}
  .charts-wl-sym{width:auto;text-align:center}
  #charts-info-panel{display:none}
  #charts-sidebar-tools{flex-direction:column!important;gap:4px!important}
}

/* ═══ MOBILE (768px) — full redesign ═══ */
@media(max-width:768px){
  #charts-app{flex-direction:column!important;height:auto!important}
  #charts-sidebar{display:flex!important;width:100%!important;min-width:100%!important;flex-direction:row!important;border-right:none!important;border-bottom:1px solid var(--border);overflow-x:auto!important;overflow-y:hidden!important;max-height:none!important;height:auto!important}
  #charts-sidebar>div:first-child{display:flex!important;flex-direction:row!important;gap:4px;padding:6px 8px!important;border-bottom:none!important;flex-shrink:0}
  #charts-sidebar .charts-ac-btn{display:inline-flex!important;font-size:9px;padding:3px 8px}
  #charts-sidebar input,#charts-sidebar select{display:none!important}
  #charts-sidebar .charts-wl-price,#charts-sidebar .charts-wl-chg,#charts-sidebar .charts-wl-fav{display:none!important}
  #charts-watchlist{display:flex!important;flex-direction:row!important;gap:2px;padding:2px 4px!important;overflow-x:auto!important;overflow-y:hidden!important;flex:none!important}
  .charts-wl-row{padding:4px 8px!important;border-bottom:none!important;border-radius:4px;white-space:nowrap;flex-shrink:0}
  .charts-wl-sym{width:auto;font-size:10px}
  #charts-sidebar-tools{border-top:none!important;border-left:1px solid var(--border);padding:4px!important;flex-shrink:0}
  #charts-info-panel{display:none!important}
  #charts-toolbar{font-size:9px;padding:4px 6px;flex-wrap:nowrap!important;overflow-x:auto}
  #charts-main-chart{min-height:250px!important}
  .charts-tf-btn,.charts-tf-btn2{font-size:9px!important;padding:3px 6px!important}
  .charts-ind-btn{font-size:8px!important;padding:2px 4px!important}
  #charts-overlay-panel{padding:6px!important}
}