@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #0a0d13;
  --panel: #10151f;
  --panel-2: #141b28;
  --border: #212a3a;
  --text: #d7dee8;
  --muted: #6b7488;
  --accent: #f0b429;
  --long: #17c98d;
  --short: #f6465d;
  --miss: #8a93a6;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%; width:100%; overflow-x:hidden;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans);
  display:flex; flex-direction:column;
}

/* ---- topbar ---- */
.topbar{
  display:flex; align-items:center; gap:24px;
  padding:10px 18px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--panel), var(--bg));
  flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{color:var(--accent); font-size:22px;}
.brand-title{font-family:var(--mono); font-weight:600; letter-spacing:1px; font-size:14px;}
.brand-title span{color:var(--accent);}
.brand-sub{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px;}

.range-picker{display:flex; align-items:center; gap:10px; margin-left:auto;}
.range-picker label{display:flex; flex-direction:column; font-size:10px; color:var(--muted); gap:3px;}
.range-picker input{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:5px 7px; font-family:var(--mono); font-size:12px;
}
.range-picker button{
  align-self:flex-end; background:var(--accent); color:#1a1400; border:none;
  border-radius:6px; padding:7px 12px; font-weight:600; font-size:12px; cursor:pointer;
}
.range-picker button.ghost{background:transparent; color:var(--muted); border:1px solid var(--border);}

.pnl-tool{display:flex; align-items:center; gap:8px;}
.pnl-label{font-size:11px; color:var(--muted);}
.side-btn{
  border:1px solid var(--border); background:var(--panel-2); color:var(--muted);
  padding:6px 12px; font-weight:700; font-size:11px; border-radius:6px; cursor:pointer;
  letter-spacing:.5px;
}
.side-btn.side-long.active{background:rgba(23,201,141,.15); border-color:var(--long); color:var(--long);}
.side-btn.side-short.active{background:rgba(246,70,93,.15); border-color:var(--short); color:var(--short);}
.lev-tag{font-family:var(--mono); font-size:12px; color:var(--accent); border:1px solid var(--border); padding:4px 8px; border-radius:6px;}
.pnl-tool button#toolsBtn{
  background:transparent; color:var(--muted); border:1px solid var(--border);
  border-radius:6px; padding:6px 12px; font-size:11px; font-weight:600; cursor:pointer;
}

/* ---- layout ----
   .layout khớp đúng phần màn hình còn lại (dưới topbar), không tràn ngang:
   min-width:0 trên .chart-wrap để flexbox không giữ theo content-width (mặc
   định min-width:auto của flex item mới là nguyên nhân đẩy .legend ra khỏi
   màn hình khi nội dung bên trong chart-wrap rộng hơn viewport). */
.layout{flex:1; display:flex; min-height:0; min-width:0; width:100%; overflow:hidden;}
.chart-wrap{flex:1 1 auto; min-width:0; position:relative; display:flex; flex-direction:column; padding:10px 4px 10px 10px;}
.pane{width:100%;}
.pane-price{height:100%;}

/* ---- thanh kéo chia chart-wrap / legend ---- */
.layout-resizer{
  flex:0 0 auto; width:6px; cursor:col-resize; background:var(--border);
  position:relative; touch-action:none;
}
.layout-resizer::after{
  content:''; position:absolute; left:50%; top:50%; width:2px; height:28px;
  transform:translate(-50%,-50%); background:var(--muted); border-radius:2px;
}
.layout-resizer:hover, .layout-resizer.dragging{background:var(--accent);}
.layout-resizer:hover::after, .layout-resizer.dragging::after{background:var(--bg);}

.legend{
  width:230px; flex:0 0 auto; min-width:0; border-left:1px solid var(--border); padding:16px;
  background:var(--panel); font-size:12px;
  display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none; /* mục 41: Firefox */
}
.legend::-webkit-scrollbar{ display:none; } /* mục 41: Chrome/Edge/Safari */
.legend-title{font-weight:700; margin-bottom:10px; color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:1px;}
.legend-item{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.dot.long{background:var(--long);}
.dot.short{background:var(--short);}
.dot.miss{background:var(--miss);}
.legend-hint{color:var(--muted); font-size:11px; line-height:1.5; margin-top:10px;}
.legend-hint kbd{background:var(--panel-2); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-family:var(--mono);}
.stat-block{margin-top:18px; padding-top:14px; border-top:1px solid var(--border); font-family:var(--mono); color:var(--muted); font-size:11px; line-height:1.8;}
.stat-block b{color:var(--text);}

/* ---- #5 bar detail panel ---- */
.detail-title{margin-top:18px; padding-top:14px; border-top:1px solid var(--border); font-weight:700; color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:1px;}
.bar-detail{margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--muted); flex:1;}
.no-signal-nav{display:flex; gap:6px; margin-top:8px;}
.no-signal-nav .tool-btn{flex:1; font-size:10px; padding:4px 6px;}
.detail-explain{margin-top:4px; padding:8px; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.02);}
.detail-explain .detail-group-title{margin-bottom:6px;}
.detail-explain .explain-row{margin:4px 0; line-height:1.5;}
.detail-explain .explain-row b{color:var(--fg,#eee);}
.detail-time{color:var(--accent); font-weight:600; margin-bottom:6px;}
.detail-event{padding:4px 6px; border-radius:5px; margin-bottom:8px; font-weight:600;}
.detail-event.long{background:rgba(23,201,141,.15); color:var(--long);}
.detail-event.short{background:rgba(246,70,93,.15); color:var(--short);}
.detail-event.miss{background:rgba(138,147,166,.15); color:var(--miss);}
.detail-group{margin-bottom:10px;}
.detail-group-title{color:var(--text); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px;}
.detail-row{display:flex; justify-content:space-between; gap:8px; padding:1px 0;}
.detail-row span{color:var(--muted);}
.detail-row b{color:var(--text); font-weight:500; text-align:right;}
.tag{display:inline-block; padding:0 5px; border-radius:4px; font-size:10px; font-weight:600;}
.tag.ok{background:rgba(23,201,141,.15); color:var(--long);}
.tag.bad{background:rgba(246,70,93,.15); color:var(--short);}
.tag.muted{background:rgba(138,147,166,.15); color:var(--muted);}

/* ---- entry / pnl badge ---- */
.entry-badge{
  position:absolute; top:14px; right:14px; z-index:5;
  background:rgba(16,21,31,.92); border:1px solid var(--accent); border-radius:8px;
  padding:10px 14px; font-family:var(--mono); font-size:12px; min-width:190px;
  box-shadow:0 4px 18px rgba(0,0,0,.4);
}
.entry-badge.hidden{display:none;}
.entry-row{display:flex; justify-content:space-between; gap:14px; padding:2px 0;}
.entry-row b{color:var(--accent);}
.entry-row b.pos{color:var(--long);}
.entry-row b.neg{color:var(--short);}
.entry-hint{color:var(--muted); font-size:10px; margin-top:6px; max-width:190px;}

/* ---- #3 indicator readout (top-left OHLC/RSI overlay) ---- */
.indicator-readout{
  position:absolute; top:18px; left:14px; z-index:4;
  background:rgba(10,13,19,.94); border-radius:6px; padding:6px 10px;
  font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--text);
  pointer-events:none; white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.7); /* mục 39: tăng tương phản chữ màu trên nền chart */
}
.indicator-readout .v{color:var(--text);}

/* ---- RSI 30/70 band tint (behind the RSI lines) ---- */
.rsi-band{
  position:absolute; z-index:1; pointer-events:none;
  background: rgba(176,114,240,0.18);
}

/* ---- mục 2/9/16: canvas overlay (open/miss ticks + user drawings) ----
   Vị trí/kích thước canvas KHÔNG dùng inset:0 (bị lệch bởi padding của
   .chart-wrap) — được set trực tiếp bằng JS (resizeDrawCanvas) khớp đúng
   rect của #priceChart, đảm bảo 1px canvas vẽ = đúng 1px canvas chart. */
.draw-layer{ position:absolute; z-index:3; }
.draw-layer.draw-mode{ cursor:crosshair; pointer-events:auto; }
.draw-layer:not(.draw-mode){ pointer-events:none; }
/* mục 22: đổi cursor khi giữ Ctrl trong lúc vẽ, để phân biệt với vẽ thường */
.draw-layer.draw-mode.erase-mode{ cursor:cell; }

/* ---- mục 16: input chữ nổi khi dùng tool "Chữ" (thay window.prompt) ----
   Không còn được tạo mới (mục 20 thay bằng khung kéo-thả .textbox-el),
   giữ lại rule CSS để không phá style của dữ liệu type:'text' cũ nếu còn
   sót logic nào tham chiếu tới class này. */
.draw-text-input{
  position:fixed; z-index:100; background:var(--panel); color:var(--text);
  border:1px solid var(--accent); border-radius:4px; padding:3px 6px;
  font-family:var(--sans); font-size:13px; outline:none; min-width:120px;
}

/* ---- mục 20: khung chữ kéo-thả (textbox), nằm trên .draw-layer ---- */
.draw-text-layer{ position:absolute; z-index:3; pointer-events:none; }
/* mục 20 (plan7): .textbox-el (khung ngoài) giữ overflow:visible để handle
   resize và nút xoá (đặt lệch ra ngoài biên box) không bị cắt mất — việc
   clip chữ tràn (không cho scroll) chuyển vào .textbox-content (lớp trong)
   thay vì áp overflow:hidden lên chính el như trước (lúc đó sẽ cắt luôn cả
   handle/nút xoá vì chúng nằm ngoài biên). */
.textbox-el{
  position:absolute; box-sizing:border-box; pointer-events:auto;
  background:rgba(16,21,31,0.85); border:1px solid var(--border);
  border-radius:3px; font-family:var(--sans); cursor:move; user-select:none;
}
.textbox-el.editing{ border-color:var(--accent); cursor:text; user-select:text; }
/* mục 20 (plan7-1/2): lớp trong chứa chữ — không cho scroll ngang/dọc, chữ
   wrap trái→phải trong biên trái/phải, phần vượt quá heightPx bị CLIP
   (overflow:hidden) thay vì tự cuộn xuống. */
.textbox-content{
  width:100%; height:100%; box-sizing:border-box; padding:4px 6px;
  line-height:1.35; white-space:pre-wrap; word-wrap:break-word;
  overflow:hidden; outline:none;
}
.textbox-resize-handle{
  position:absolute; right:-4px; bottom:-4px; width:10px; height:10px;
  background:var(--accent); border-radius:2px; cursor:nwse-resize; z-index:2;
  /* mục 20 (plan7-3): .textbox-el giờ overflow:visible nên handle ở đây
     không bị clip nữa. pointer-events kế thừa auto từ .textbox-el (không
     bị overlay .draw-layer chặn vì handle nằm trong .textbox-el, không
     phải trực tiếp trong .draw-layer). stopPropagation() ở JS đảm bảo
     không bị handler "move cả khung" của el bắt mất sự kiện trước. */
}
/* mục 20 (plan7-4): nút xoá góc trên-phải, chỉ hiện khi khung đang được
   chọn (.selected) hoặc đang sửa (.editing) — nằm trên layer riêng của
   chính el (không phải vùng contenteditable) nên click không bị nuốt sự
   kiện bởi thao tác nhập liệu. */
.textbox-del-btn{
  display:none; position:absolute; top:-9px; right:-9px; width:16px; height:16px;
  border-radius:50%; background:var(--short, #f6465d); color:#fff;
  font-size:12px; line-height:16px; text-align:center; cursor:pointer;
  user-select:none; z-index:3;
}
.textbox-el.selected .textbox-del-btn,
.textbox-el.editing .textbox-del-btn{ display:block; }

/* ---- mục 17: menu chuột phải "Reset chart" ---- */
.context-menu{ position:absolute; top:auto; left:auto; min-width:160px; }

/* ---- mục 1: nhóm toggle/dropdown trên topbar ---- */
.topbar-toggles{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.topbar-toggles .toggle-row{margin:0; padding:4px 0;}
.topbar-toggles button.ghost{
  background:transparent; color:var(--muted); border:1px solid var(--border);
  border-radius:6px; padding:6px 10px; font-size:11px; font-weight:600; cursor:pointer;
}
.topbar-toggles button.ghost:hover{border-color:var(--muted);}

/* mục 21: màu riêng cho tiêu đề từng nút dropdown để phân biệt nhanh trên
   toolbar — giữ nguyên border/background của .ghost, chỉ override color,
   kể cả khi hover (bỏ .topbar-toggles button.ghost:hover{color:...} ở trên
   để không bị "mất màu" về var(--text) lúc hover). */
#displayToggleBtn{color:#3aa0ff}
#rsiToggleBtn{color:#f0b429}
#missReasonFilterBtn{color:#f6465d}
#drawToolBtn{color:#17c98d}
#displayToggleBtn:hover{color:#3aa0ff}
#rsiToggleBtn:hover{color:#f0b429}
#missReasonFilterBtn:hover{color:#f6465d}
#drawToolBtn:hover{color:#17c98d}

/* ---- toggle-row (dùng chung topbar + trước là legend) ---- */
.toggle-row{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; margin:4px 0 2px; cursor:pointer;}
.toggle-row.active{color:var(--accent);}
.toggle-count{font-family:var(--mono); font-size:10px; color:var(--muted);}
.toggle-row.active .toggle-count{color:var(--accent);}

/* ---- mục 4/8/9: dropdown panel ---- */
.dropdown-wrap{position:relative;}
.dropdown-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:220px;
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.5); padding:10px; font-size:11px;
}
.dropdown-panel.hidden{display:none;}
.dropdown-header{
  display:flex; align-items:center; gap:6px; padding:2px 0 4px;
  font-size:9px; color:var(--muted); border-bottom:1px solid var(--border); margin-bottom:2px;
}
.dropdown-header span:first-child, .dropdown-header span:nth-child(2){ width:13px; text-align:center; }
.dropdown-item{display:flex; align-items:center; gap:6px; padding:3px 0; color:var(--text); cursor:pointer;}
.dropdown-item .dot-color{width:8px; height:8px; border-radius:50%; display:inline-block;}
.dropdown-sep{border-top:1px solid var(--border); margin:6px 0;}
.draw-color-row{display:flex; gap:6px;}
.draw-color-row .color-swatch{
  width:16px; height:16px; border-radius:50%; cursor:pointer; border:2px solid transparent;
}
.draw-color-row .color-swatch.active{border-color:var(--text);}

/* ---- mục 3: modal popup (legend) ---- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:50;}
.modal.hidden{display:none;}
.modal-body{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:18px 20px; max-width:420px; width:90%; max-height:80vh; overflow-y:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.55); font-size:12px;
}
/* mục 40: #algoInfoPopup rộng hơn (bảng mục 34/35 không bị bể dòng), ẩn thanh cuộn dọc */
#algoInfoPopup .modal-body{
  max-width: min(760px, 92vw);
  scrollbar-width: none;
}
#algoInfoPopup .modal-body::-webkit-scrollbar{
  display: none;
}

/* ---- mục 6: Tools ▾ panel overlay ---- */
.tools-panel{
  position:fixed; top:56px; right:16px; z-index:20; width:380px; max-height:80vh;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.55); display:flex; flex-direction:column; overflow:hidden;
}
.tools-panel.hidden{display:none;}
.tools-panel-head{display:flex; align-items:center; border-bottom:1px solid var(--border); background:var(--panel-2);}
.tool-tab{flex:1; background:none; border:none; color:var(--muted); padding:10px; font-size:12px; font-weight:600; cursor:pointer;}
.tool-tab.active{color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent);}
.tools-close{background:none; border:none; color:var(--muted); padding:10px 12px; cursor:pointer; font-size:13px;}
.tool-tab-body{padding:12px; overflow-y:auto; font-size:12px;}
.tool-tab-body.hidden{display:none;}
.tool-hint{display:block; color:var(--muted); font-size:10px; margin:6px 0;}
.tools-panel-scroll{overflow-y:auto; max-height:calc(80vh - 40px);}
#hypothesisPanel{width:475px;}
.tool-btn{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:6px 10px; font-size:11px; cursor:pointer; margin:4px 4px 4px 0;
}
.tool-btn.active{background:rgba(240,180,41,.18); border-color:var(--accent); color:var(--accent);}
.tool-btn.primary{background:var(--accent); border-color:var(--accent); color:#1a1400; font-weight:600;}
.tool-btn.danger{border-color:var(--short); color:var(--short);}
.tool-warn{color:var(--accent); font-size:10px; margin:4px 0 8px;}
.tool-row-controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:8px; color:var(--muted); font-size:11px;}
.tool-row-controls select, .tool-row-controls input[type=number]{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:4px; padding:2px 4px;
}
.tool-list{max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:6px; margin-bottom:8px;}
.tool-row{display:flex; align-items:center; gap:6px; padding:4px 8px; border-bottom:1px solid var(--border); font-family:var(--mono); font-size:10px;}
.tool-row:last-child{border-bottom:none;}
.tool-check{display:flex;}
.tool-time{color:var(--muted); white-space:nowrap;}
.tool-reason{color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tool-empty{padding:10px; color:var(--muted); font-size:11px;}
.tool-summary{color:var(--text); margin-bottom:6px;}
.tool-suggest{margin-bottom:8px;}
.tool-suggest .pos{color:var(--long);}
.tool-suggest .neg{color:var(--short);}
.tool-insights{margin:0; padding-left:16px; color:var(--text); line-height:1.6;}
.tool-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:10px;}
.tool-table th, .tool-table td{border:1px solid var(--border); padding:4px 6px; text-align:right;}
.tool-table th:first-child, .tool-table td:first-child{text-align:left;}

/* ---- #7 ctrl-hover tooltip (compact debug metadata) ---- */
.hover-meta{
  /* plan16_2 G7-2: mini chart bên trong rộng/cao hơn (320x220 thay vì 200x120,
     xem #hoverMiniChart bên dưới) -> nới rộng khung popup theo để canvas không
     bị overflow:hidden cắt cụt. */
  position:absolute; z-index:6; width:340px;
  background:rgba(10,13,19,.97); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.55); overflow:hidden;
  pointer-events:none;
}
.hover-meta.hidden{display:none;}
.hover-meta-head{
  font-family:var(--mono); font-size:11px; color:var(--accent);
  padding:6px 10px; border-bottom:1px solid var(--border); background:var(--panel-2);
}
.hover-meta-body{
  font-family:var(--mono); font-size:10px; color:var(--text);
  padding:8px 10px; white-space:pre-wrap; line-height:1.6;
}
/* plan15 mục 4 / plan16_2 G7-2: mini chart giá (nến OHLC) + RSI4/RSI22(5m)
   trong phạm vi bar đang hover — 320x220 (từ 200x120) để chứa 13 nến + trục
   scale giá/RSI/thời gian đầy đủ (thay vì 3 điểm line trần trước đây). */
#hoverMiniChart{
  display:block; width:320px; height:220px;
  border-top:1px solid var(--border); background:var(--panel-2);
}

/* mục 29a plan9: cây điều kiện trong popup Thuật toán — tái dùng màu --muted/--border sẵn có */
.algo-tree{margin:10px 0 0; padding-left:20px; color:var(--text); font-size:12px; line-height:1.7;}
.algo-tree li{margin-bottom:8px;}
.algo-tree code{background:var(--panel-2); border:1px solid var(--border); border-radius:4px; padding:1px 4px; font-family:var(--mono); font-size:11px;}
.algo-table{margin:6px 0; font-size:10px;}
.algo-table th, .algo-table td{padding:3px 5px;}
.legend-table{margin:6px 0; font-size:9px;}
.legend-table th, .legend-table td{padding:2px 4px;}

/* mục 36 plan10: accordion nhóm A-E trong Hypothesis panel — tái dùng .tool-table */
.h-group{border:1px solid var(--border); border-radius:6px; margin-bottom:6px; overflow:hidden;}
.h-group summary{padding:8px 10px; font-size:12px; font-weight:600; color:var(--accent); cursor:pointer; background:var(--panel-2); list-style:none;}
.h-group summary::-webkit-details-marker{display:none;}
.h-group[open] summary{box-shadow:inset 0 -1px 0 var(--border);}
.h-group table{margin:0;}

/* mục 37 plan10: #varTip giờ có thể chứa bảng (rộng hơn text 1 dòng cũ 220px) */
#varTip{width:auto; max-width:420px; z-index:20;}
.vartip-summary{padding:8px 10px 4px; font-family:var(--mono); font-size:10px; color:var(--text); line-height:1.5;}
.vartip-condition{padding:0 10px 8px; font-family:var(--mono); font-size:10px; color:var(--muted); line-height:1.5;}
.vartip-table{width:auto; max-width:400px; margin:0 10px 8px; font-size:9px;}
.vartip-table th, .vartip-table td{padding:2px 4px;}
.tools-panel-head span{padding:10px 12px; font-size:12px; font-weight:600; color:var(--muted); flex:1;}