@font-face {
    font-family: 'JetBrains Mono';
    src: local('JetBrains Mono');
  }
  * { box-sizing: border-box; margin:0; padding:0; }

  :root {
    --bg: #0b0e14;
    --bg-raised: #12161f;
    --bg-sunken: #0b0e14;
    --bg-hover: #1a1f2a;
    --border: #1f2530;
    --border-strong: #2a3140;
    --text: #e6e8eb;
    --text-dim: #7d8590;
    --text-faint: #5b6270;
    --accent: #ffb020;
    --up: #2ecc82;
    --down: #f5455c;
    --shape-blue: #8ab4ff;
    --grid: #161a24;
    --crosshair: #2a3140;
    --hud-bg: rgba(18,22,31,0.7);
    --scrollbar: #1f2530;
    --shadow: rgba(0,0,0,0.4);
    color-scheme: dark;
  }
  :root[data-theme="light"] {
    --bg: #f3f4f7;
    --bg-raised: #ffffff;
    --bg-sunken: #eceef2;
    --bg-hover: #e7e9ee;
    --border: #dde1e8;
    --border-strong: #c7cdd8;
    --text: #1a1d24;
    --text-dim: #5b6270;
    --text-faint: #7d8590;
    --accent: #b8790a;
    --up: #1c9a5f;
    --down: #d13a4d;
    --shape-blue: #3266cc;
    --grid: #eceef2;
    --crosshair: #c7cdd8;
    --hud-bg: rgba(255,255,255,0.82);
    --scrollbar: #dde1e8;
    --shadow: rgba(0,0,0,0.12);
    color-scheme: light;
  }

  html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  #app { display:flex; flex-direction:column; height:100vh; width:100vw; }

  /* ---- Top bar ---- */
  #topbar {
    display:flex; align-items:center; gap:10px;
    padding: 8px 12px;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .brand {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 15px;
    color: var(--accent);
    letter-spacing: 0.5px;
    margin-right: 6px;
  }
  .brand span { color: var(--text-dim); font-weight:400; }
  .seg {
    display:flex; background:var(--bg-sunken); border:1px solid var(--border); border-radius:6px; overflow:hidden;
  }
  .seg button {
    background:transparent; border:none; color:var(--text-dim); padding:6px 12px;
    font-size:12.5px; font-family:'JetBrains Mono',monospace; cursor:pointer;
    border-right: 1px solid var(--border);
  }
  .seg button:last-child { border-right:none; }
  .seg button.active { background:var(--border); color:var(--accent); }
  .seg button:hover:not(.active) { color:var(--text); }
  #tfSeg button { padding:6px 9px; }

  .icon-btn {
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-sunken); border:1px solid var(--border); border-radius:6px;
    color:var(--text-dim); cursor:pointer;
  }
  .icon-btn svg { width:16px; height:16px; display:block; }
  .icon-btn:hover { color:var(--text); border-color:var(--border-strong); }

  .popover {
    position:fixed; z-index:50;
    width:200px; padding:12px;
    background:var(--bg-raised); border:1px solid var(--border); border-radius:8px;
    box-shadow:0 8px 24px var(--shadow);
  }
  .popover.hidden { display:none; }
  .popover h4 {
    font-size:11px; text-transform:uppercase; letter-spacing:0.6px;
    color:var(--text-faint); margin-bottom:10px; font-weight:600;
  }
  .popover h4:not(:first-child) { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
  .color-row, .select-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
  .color-row label, .select-row label { font-size:12px; color:var(--text-dim); }
  .color-row input[type=color] {
    width:28px; height:28px; padding:0; border:1px solid var(--border); border-radius:6px;
    background:none; cursor:pointer;
  }
  .color-row input[type=color]::-webkit-color-swatch-wrapper { padding:2px; }
  .color-row input[type=color]::-webkit-color-swatch { border:none; border-radius:4px; }
  .color-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
  .select-row select {
    background:var(--bg-sunken); border:1px solid var(--border); color:var(--text);
    font-size:11.5px; border-radius:5px; padding:4px 6px; font-family:'JetBrains Mono',monospace;
    cursor:pointer;
  }
  .popover-btn {
    width:100%; margin-top:2px; padding:6px; border-radius:6px;
    background:var(--bg-hover); border:1px solid var(--border-strong); color:var(--text-dim);
    font-size:11px; cursor:pointer;
  }
  .popover-btn:hover { color:var(--text); border-color:var(--accent); }
  .popover-btn.danger { color:var(--down); }
  .popover-btn.danger:hover { border-color:var(--down); }

  #price-tag {
    margin-left: auto;
    font-family:'JetBrains Mono', monospace;
    font-size: 13px;
    display:flex; align-items:center; gap:8px;
    padding: 4px 10px;
    border-radius: 6px;
    background:var(--bg-sunken);
    border:1px solid var(--border);
  }
  #price-tag .val { font-weight:700; font-size:15px; }
  #price-tag .up { color:var(--up); }
  #price-tag .down { color:var(--down); }

  #src-badge {
    font-size:10.5px; font-family:'JetBrains Mono',monospace;
    padding: 4px 9px; border-radius:5px; border:1px solid var(--border);
    color:var(--text-dim); background:var(--bg-sunken); white-space:nowrap;
  }
  #src-badge.live { color:var(--up); border-color:var(--up); }
  #src-badge.demo { color:var(--accent); border-color:var(--accent); }
  #src-badge.error { color:var(--down); border-color:var(--down); }

  /* ---- Body layout ---- */
  #body { flex:1; display:flex; min-height:0; }

  /* ---- Left tool rail ---- */
  #toolrail {
    width: 52px;
    background:var(--bg-raised);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column; align-items:center;
    padding: 8px 0; gap:4px;
    flex-shrink:0;
  }
  .tool-btn {
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid transparent; border-radius:8px;
    color:var(--text-dim); cursor:pointer;
  }
  .tool-btn svg { width:19px; height:19px; display:block; }
  .tool-btn:hover { background:var(--bg-hover); color:var(--text); }
  .tool-btn.active { background:var(--border); color:var(--accent); border-color:var(--border-strong); }
  .tool-btn.buy.active { border-color:var(--up); }
  .tool-btn.sell.active { border-color:var(--down); }
  .tool-btn.long.active { border-color:var(--up); }
  .tool-btn.short.active { border-color:var(--down); }
  .tool-letter { font-family:'JetBrains Mono', monospace; font-weight:800; font-size:15px; }
  .tool-btn.long .tool-letter { color:var(--up); }
  .tool-btn.short .tool-letter { color:var(--down); }
  .tool-sep { width:28px; height:1px; background:var(--border); margin:4px 0; }

  /* ---- Chart area ---- */
  #chartwrap { flex:1; position:relative; min-width:0; }
  #chart { position:absolute; inset:0; display:block; cursor: crosshair; touch-action:none; }

  #ohlc-hud {
    position:absolute; top:8px; left:10px;
    font-family:'JetBrains Mono',monospace; font-size:11.5px;
    color:var(--text-dim); display:flex; gap:10px;
    background: var(--hud-bg);
    padding: 3px 8px; border-radius:5px;
    pointer-events:none;
  }
  #ohlc-hud b { font-weight:600; }
  #ohlc-hud .g { color:var(--up); } #ohlc-hud .r { color:var(--down); }

  #hint {
    position:absolute; bottom:34px; left:10px;
    font-size:11px; color:var(--text-faint);
    background: var(--hud-bg);
    padding:4px 9px; border-radius:5px;
    pointer-events:none;
  }

  /* ---- Right panel ---- */
  /* Only ever occupies flex space, never overlays the chart — shown solely
     when there's a trade setup to display (see positionsPanel.js). */
  #panel {
    width: 250px; flex-shrink:0;
    background:var(--bg-raised); border-left:1px solid var(--border);
    display:flex; flex-direction:column;
    overflow-y:auto;
  }
  #panel.hidden { display:none; }
  #panel h3 {
    font-size:11px; text-transform:uppercase; letter-spacing:0.6px;
    color:var(--text-faint); padding:12px 12px 6px;
  }
  .pos-card {
    margin: 0 10px 10px; padding:10px;
    background:var(--bg-sunken); border:1px solid var(--border); border-radius:8px;
  }
  .pos-card .row { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
  .pos-card .dir { font-weight:700; font-size:12px; font-family:'JetBrains Mono',monospace; }
  .pos-card .dir.long { color:var(--up); } .pos-card .dir.short { color:var(--down); }
  .pos-card .del { cursor:pointer; color:var(--text-faint); font-size:14px; background:none; border:none; }
  .pos-card .del:hover { color:var(--down); }
  .field { display:flex; justify-content:space-between; align-items:center; margin:4px 0; }
  .field label { font-size:11px; color:var(--text-dim); }
  .field input {
    width:88px; background:var(--bg-raised); border:1px solid var(--border); border-radius:4px;
    color:var(--text); font-family:'JetBrains Mono',monospace; font-size:11.5px;
    padding:3px 6px; text-align:right;
  }
  .field input:focus { outline:none; border-color:var(--accent); }
  .rr-badge {
    margin-top:8px; text-align:center; padding:6px; border-radius:6px;
    font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px;
    background:var(--bg-hover);
  }
  .rr-good { color:var(--up); } .rr-mid { color:var(--accent); } .rr-bad { color:var(--down); }

  /* ---- Bottom replay bar ---- */
  #replaybar {
    display:flex; align-items:center; gap:10px;
    padding:8px 14px;
    background:var(--bg-raised); border-top:1px solid var(--border);
  }
  #replaybar button {
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-hover); border:1px solid var(--border-strong); color:var(--text);
    width:30px; height:30px; border-radius:6px; cursor:pointer;
    flex-shrink:0;
  }
  #replaybar button svg { width:16px; height:16px; display:block; }
  #replaybar button:hover { border-color:var(--accent); color:var(--accent); }
  #repeatBtn.active { border-color:var(--accent); color:var(--accent); background:var(--border); }
  #replaybar input[type=range] {
    flex:1; accent-color:var(--accent);
  }
  #replaylabel {
    font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);
    min-width:120px; text-align:right;
  }
  #speedsel {
    background:var(--bg-sunken); border:1px solid var(--border); color:var(--text-dim);
    font-size:11px; border-radius:5px; padding:4px 6px; font-family:'JetBrains Mono',monospace;
  }

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

  @media (max-width: 760px) {
    #panel { width: 210px; }
  }