/* === TradePro Dark Theme === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg0: #0d1117;
  --bg1: #161b22;
  --bg2: #1c2333;
  --bd: #30363d;
  --fg: #c9d1d9;
  --fg2: #8b949e;
  --fg0: #f0f6fc;
  --accent: #58a6ff;
  --green: #3fb950;
  --red: #f85149;
  --yellow: #d2991d;
  --purple: #a371f7;
  --radius: 6px;
}

html, body { width: 100%; height: 100%; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size: 13px; background: var(--bg0); color: var(--fg); overflow: hidden; user-select: none; }

/* === Toolbar === */
.toolbar {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  background: var(--bg1); border-bottom: 1px solid var(--bd); height: 42px; z-index: 100;
}
.toolbar-group { display: flex; align-items: center; gap: 3px; }
.toolbar-sep { color: var(--bd); margin: 0 4px; }
.toolbar-brand { font-weight: 700; font-size: 15px; color: var(--accent); }
.tool-select { background: var(--bg2); color: var(--fg0); border: 1px solid var(--bd); border-radius: var(--radius); padding: 3px 8px; font-size: 12px; outline: none; cursor: pointer; }
.tool-select:hover { border-color: var(--accent); }
.tool-btn { background: var(--bg2); color: var(--fg2); border: 1px solid transparent; border-radius: var(--radius); padding: 4px 7px; font-size: 14px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; min-width: 30px; }
.tool-btn:hover { border-color: var(--bd); color: var(--fg0); }
.tool-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.toolbar-right { margin-left: auto; }
.price-display { font-weight: 700; font-size: 14px; color: var(--green); font-family: 'SF Mono',monospace; font-variant-numeric: tabular-nums; }
.time-display { font-size: 11px; color: var(--fg2); margin-left: 8px; }
input[type="color"] { width: 26px; height: 26px; border: 1px solid var(--bd); border-radius: 4px; cursor: pointer; background: transparent; padding: 1px; }
input[type="range"] { width: 55px; cursor: pointer; accent-color: var(--accent); }

/* === Main Container (Grid) === */
.main-container {
  height: calc(100vh - 70px);
  display: grid;
  gap: 1px;
  background: var(--bd);
}
.g1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.g2x1 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.g2x2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.g1x3 { grid-template-columns: 1fr; grid-template-rows: 1.5fr 1fr 1fr; }
.g3x2 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.g4x1 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; }

/* === Chart Panel === */
.chart-panel {
  background: var(--bg0);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chart-panel:hover .panel-ctrls { opacity: 1; }

.panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1px 8px; background: rgba(22,27,34,0.9);
  font-size: 11px; color: var(--fg2); z-index: 10; min-height: 24px;
}
.panel-title { pointer-events: none; }
.panel-ctrls {
  display: flex; gap: 3px; opacity: 0.4; transition: opacity 0.2s;
}
.panel-ctrls select {
  background: var(--bg2); color: var(--fg2); border: 1px solid var(--bd);
  border-radius: 3px; font-size: 10px; cursor: pointer; padding: 1px 4px;
}
.panel-ctrls button {
  background: var(--bg2); color: var(--fg2); border: 1px solid var(--bd);
  border-radius: 3px; font-size: 11px; cursor: pointer; padding: 1px 5px;
}
.panel-ctrls button:hover { color: var(--fg0); border-color: var(--accent); }

.chart-inner {
  flex: 1; position: relative; overflow: hidden;
}

/* TPO canvas sits between chart and drawing */
.tpo-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 4;
}

/* Drawing canvas sits on top of TPO and LWC */
.draw-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5;
}
.draw-canvas.active { pointer-events: auto; cursor: crosshair; }

/* === Status Bar === */
.status-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 12px; background: var(--bg1); border-top: 1px solid var(--bd);
  font-size: 11px; height: 28px; color: var(--fg2);
}
.status-right { font-variant-numeric: tabular-nums; }

/* === Scrollbar === */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg2); }

@media (max-width: 900px) {
  .toolbar { flex-wrap: wrap; height: auto; gap: 3px; }
  .tool-btn { padding: 3px 5px; font-size: 12px; min-width: 26px; }
  .main-container { height: calc(100vh - 96px); }
}