#workspace{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#020617;
}

.chart-panel{
  position:absolute;
  background:#05070d;
  border:1px solid #1e293b;
  border-radius:8px;
  overflow:hidden;
  box-sizing:border-box;
}

.chart-header{
  height:32px;
  display:flex;
  align-items:center;
  padding:0 10px;
  background:#0f172a;
  border-bottom:1px solid #1e293b;
  color:#e5e7eb;
  font-size:12px;
  font-weight:700;
  box-sizing:border-box;
}

.chart-body{
  position:absolute;
  left:0;
  right:0;
  top:32px;
  bottom:0;
  overflow:hidden;
}

.market-canvas{
  display:block;
  width:100%;
  height:100%;
}

.flow-blue-research{position:fixed;right:18px;bottom:76px;z-index:1000000;display:flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid rgba(42,168,255,.38);border-radius:12px;background:rgba(5,12,22,.94);box-shadow:0 14px 38px rgba(0,0,0,.45);color:#dce8f4;font:12px Arial}.flow-blue-research button,.flow-blue-research select{border:1px solid #2a3b50;border-radius:8px;background:#0c1827;color:#dce8f4;padding:7px 9px}.flow-blue-research button{cursor:pointer}.flow-blue-research button:disabled{opacity:.35;cursor:not-allowed}.flow-blue-research .flow-blue-main{border-color:#2aa8ff;color:#6ec7ff;font-weight:800}.flow-blue-research #flowBlueResearchPosition{min-width:48px;text-align:center;color:#93a7bb}.flow-blue-research #flowBlueResearchMeta{color:#f0c95b;white-space:nowrap}

#drawingProperties{
  position:fixed;
  right:12px;
  top:64px;
  z-index:999999;
  width:160px;
  display:none;
  flex-direction:column;
  gap:6px;
  padding:10px;
  background:#0b1220;
  border:1px solid #334155;
  border-radius:10px;
  color:#e5e7eb;
  font-size:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

#drawingProperties label{
  color:#94a3b8;
  font-size:11px;
}

#drawingProperties input,
#drawingProperties select,
#drawingProperties button{
  background:#111827;
  color:#e5e7eb;
  border:1px solid #334155;
  border-radius:6px;
  padding:5px;
  font-size:12px;
}

#drawingProperties button:hover{
  border-color:#38bdf8;
}

/* FLOW DRAWING PANEL - TradingView style */
.flow-drawing-panel{
  position:fixed;
  left:14px;
  top:92px;
  width:52px;
  z-index:9999;
  background:rgba(7,14,24,.94);
  border:1px solid rgba(212,175,55,.25);
  border-radius:16px;
  padding:8px 6px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  gap:7px;
}

.flow-drawing-btn{
  width:40px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:#0e1a2b;
  color:#d8e2ef;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.flow-drawing-btn:hover{
  border-color:rgba(212,175,55,.75);
  color:#ffd76a;
  background:#16243a;
}

.flow-drawing-btn.active{
  background:linear-gradient(180deg,#3a2a0b,#141008);
  border-color:#d4af37;
  color:#ffd76a;
  box-shadow:0 0 18px rgba(212,175,55,.22);
}

.flow-drawing-sep{
  height:1px;
  background:rgba(255,255,255,.1);
  margin:4px 5px;
}

.flow-drawing-label{
  position:absolute;
  left:58px;
  white-space:nowrap;
  background:#07101c;
  border:1px solid rgba(212,175,55,.25);
  color:#eaf0f7;
  padding:7px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  opacity:0;
  transform:translateX(-6px);
  pointer-events:none;
  transition:.12s ease;
}

.flow-drawing-btn-wrap{
  position:relative;
}

.flow-drawing-btn-wrap:hover .flow-drawing-label{
  opacity:1;
  transform:translateX(0);
}

#drawingProperties{
  position:fixed !important;
  right:18px !important;
  top:92px !important;
  z-index:9999 !important;
  width:260px !important;
  background:rgba(7,14,24,.96) !important;
  border:1px solid rgba(212,175,55,.28) !important;
  border-radius:18px !important;
  padding:14px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.45) !important;
  backdrop-filter:blur(12px);
}


.flow-panel-active{
  outline:2px solid #d4af37 !important;
  box-shadow:0 0 22px rgba(212,175,55,.28) inset !important;
}

.flow-tf-picker{
  position:fixed;
  left:76px;
  top:92px;
  z-index:9999;
  background:rgba(7,14,24,.96);
  border:1px solid rgba(212,175,55,.28);
  border-radius:16px;
  padding:10px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:88px;
}

.flow-tf-picker-title{
  font-size:11px;
  color:#9fb0c6;
  font-weight:900;
  margin-bottom:4px;
}

.flow-tf-btn{
  border:1px solid rgba(255,255,255,.08);
  background:#0e1a2b;
  color:#d8e2ef;
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  text-align:left;
}

.flow-tf-btn:hover{
  border-color:#d4af37;
  color:#ffd76a;
}

.flow-tf-btn.active{
  background:linear-gradient(180deg,#3a2a0b,#141008);
  border-color:#d4af37;
  color:#ffd76a;
}


/* FIX: TF picker inside Flow toolbar */
.flow-tf-picker{
  position:static !important;
  left:auto !important;
  top:auto !important;
  min-width:0 !important;
  width:40px !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  gap:5px !important;
}

.flow-tf-picker-title{
  font-size:9px !important;
  color:#ffd76a !important;
  text-align:center !important;
  margin:0 0 4px 0 !important;
  line-height:1.1 !important;
}

.flow-tf-btn{
  width:40px !important;
  height:30px !important;
  padding:0 !important;
  text-align:center !important;
  border-radius:10px !important;
  font-size:10px !important;
}

.flow-panel-active{
  outline:2px solid #d4af37 !important;
  box-shadow:0 0 18px rgba(212,175,55,.22) inset !important;
}


/* Compact TF picker */
.flow-tf-picker{
  max-height:190px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:none !important;
  padding-bottom:4px !important;
}

.flow-tf-picker::-webkit-scrollbar{
  width:0 !important;
  display:none !important;
}

.flow-tf-picker-title{
  font-size:8px !important;
  line-height:1.05 !important;
  margin-bottom:3px !important;
}

.flow-tf-btn{
  width:36px !important;
  height:25px !important;
  min-height:25px !important;
  font-size:9px !important;
  border-radius:8px !important;
  margin:0 auto !important;
}

.flow-drawing-panel{
  width:48px !important;
  padding:7px 5px !important;
}

.flow-drawing-btn{
  width:36px !important;
  height:34px !important;
  border-radius:10px !important;
  font-size:14px !important;
}


.flow-drawing-btn[data-tool="edit"]{
  opacity:.55;
}

.flow-drawing-btn[data-tool="edit"]:hover,
.flow-drawing-btn[data-tool="edit"].active{
  opacity:1;
}


.flow-drawing-panel{
  width:42px !important;
  max-height:calc(100vh - 125px) !important;
  padding:6px 4px !important;
  gap:5px !important;
  overflow:hidden !important;
}

.flow-drawing-btn{
  width:32px !important;
  height:30px !important;
  min-height:30px !important;
  border-radius:9px !important;
  font-size:12px !important;
}

.flow-drawing-sep{
  margin:3px 5px !important;
}

.flow-tf-picker{
  margin-top:auto !important;
  max-height:150px !important;
  width:34px !important;
  overflow-y:auto !important;
}

.flow-tf-picker-title{
  font-size:7px !important;
  line-height:1.05 !important;
  margin-top:4px !important;
}

.flow-tf-btn{
  width:32px !important;
  height:22px !important;
  min-height:22px !important;
  font-size:8px !important;
  border-radius:7px !important;
}

.flow-drawing-label{
  left:46px !important;
  font-size:11px !important;
  padding:5px 8px !important;
}


.flow-topbar{
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 16px;
  background:linear-gradient(180deg,#0b1424,#07101d);
  border-bottom:1px solid rgba(148,163,184,.18);
}

.flow-brand{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:230px;
}

.flow-logo{
  font-size:20px;
  font-weight:950;
  letter-spacing:.08em;
  color:#f8fafc;
}

.flow-sub{
  font-size:11px;
  color:#93c5fd;
  font-weight:700;
}

.flow-room{
  flex:1;
  text-align:center;
  font-size:15px;
  font-weight:900;
  color:#e5e7eb;
}

.flow-dot{
  color:#64748b;
  margin:0 8px;
}

.flow-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Professional workspace control surface */
.flow-objects-layout{
  position:fixed;
  z-index:10020;
  right:14px;
  top:64px;
  width:310px;
  max-height:calc(100vh - 82px);
  overflow:hidden;
  border:1px solid rgba(212,175,55,.28);
  border-radius:16px;
  background:rgba(7,14,24,.97);
  color:#e8eef7;
  box-shadow:0 22px 65px rgba(0,0,0,.5);
  backdrop-filter:blur(14px);
  transition:transform .18s ease,opacity .18s ease;
}
.flow-objects-layout.collapsed{transform:translateX(calc(100% + 28px));opacity:0;pointer-events:none}
.flow-objects-layout>header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(148,163,184,.15)}
.flow-objects-layout>header div{display:flex;flex-direction:column;gap:3px}
.flow-objects-layout>header span,.flow-side-label{font-size:9px;letter-spacing:.16em;color:#d4af37;font-weight:900}
.flow-objects-layout>header b{font-size:15px}
.flow-side-close,.flow-objects-toggle{border:1px solid rgba(148,163,184,.2);background:#0e1a2b;color:#d8e2ef;cursor:pointer}
.flow-side-close{width:29px;height:29px;border-radius:8px;font-size:17px}
.flow-objects-toggle{position:fixed;z-index:10010;right:14px;top:64px;padding:9px 12px;border-radius:10px;font-size:11px;font-weight:800}
.flow-objects-layout:not(.collapsed)+.flow-objects-toggle{opacity:0;pointer-events:none}
.flow-objects-layout nav{display:grid;grid-template-columns:1fr 1fr;padding:7px;border-bottom:1px solid rgba(148,163,184,.12)}
.flow-objects-layout nav button{padding:9px;border:0;border-radius:8px;background:transparent;color:#8291a5;font-weight:800;cursor:pointer}
.flow-objects-layout nav button.active{background:#152237;color:#f2d273}
.flow-side-body{max-height:calc(100vh - 188px);overflow:auto;padding:13px}
.flow-side-section{display:grid;gap:9px;margin-bottom:18px}
.flow-layout-count{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.flow-layout-count button,.flow-preset-grid button,.flow-panel-pick,.flow-chart-config select{border:1px solid rgba(148,163,184,.18);border-radius:8px;background:#0d1929;color:#dce5f0;padding:8px;cursor:pointer}
.flow-layout-count button.active{border-color:#d4af37;background:#33270e;color:#f5d77c}
.flow-preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.flow-preset-grid button{text-align:left;font-size:11px}
.flow-chart-config{display:grid;gap:7px}
.flow-chart-config-row{display:grid;grid-template-columns:1fr 88px;gap:7px;padding:5px;border:1px solid transparent;border-radius:10px}
.flow-chart-config-row.active{border-color:rgba(212,175,55,.45);background:rgba(212,175,55,.06)}
.flow-chart-config-row.disabled{opacity:.42}
.flow-panel-pick{text-align:left;font-weight:800}
.flow-object-group{margin-bottom:15px}
.flow-object-group h4{margin:0 0 7px;color:#8fa0b5;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.flow-object-row{display:grid;grid-template-columns:1fr 31px 31px 31px;gap:4px;margin-bottom:5px;padding:4px;border:1px solid rgba(148,163,184,.12);border-radius:9px;background:#0a1523}
.flow-object-row.selected{border-color:#d4af37;background:#182035}
.flow-object-row button{border:0;border-radius:6px;background:#111e2f;color:#c9d5e4;cursor:pointer}
.flow-indicator-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(148,163,184,.16);border-radius:10px;background:#0b1625}
.flow-indicator-row div{display:flex;flex-direction:column;gap:3px}.flow-indicator-row small{color:#8291a5;line-height:1.3}
.flow-indicator-row button{min-width:48px;padding:7px;border:1px solid rgba(148,163,184,.24);border-radius:8px;background:#111e2f;color:#8291a5}.flow-indicator-row button.active{border-color:#22c55e;background:rgba(34,197,94,.14);color:#86efac}
.flow-layer-warning{margin-top:10px;color:#d7b56d;font-size:11px;line-height:1.45}.flow-layer-stats{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.flow-layer-stats span{padding:5px 7px;border-radius:6px;background:#111e2f;color:#cbd5e1;font-size:11px}
.flow-layer-error{margin-top:8px;padding:8px;border-radius:7px;background:rgba(239,68,68,.08);color:#fca5a5;font-size:11px}
.flow-mechanics-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}.flow-mechanics-controls label{display:flex;flex-direction:column;gap:5px;color:#8291a5;font-size:10px}.flow-mechanics-controls select{min-width:0;padding:7px;border:1px solid rgba(148,163,184,.2);border-radius:7px;background:#0b1625;color:#dce5f0}.flow-setup-toggles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.flow-setup-toggles button,.flow-outcome-toggle{padding:7px;border:1px solid rgba(148,163,184,.18);border-radius:7px;background:#101c2c;color:#728197;font-size:10px;text-transform:capitalize}.flow-setup-toggles button.active{border-color:rgba(56,189,248,.4);color:#7dd3fc}.flow-outcome-toggle.active{border-color:rgba(245,158,11,.45);color:#fbbf24}.flow-mechanics-legend{display:flex;flex-direction:column;gap:6px;padding:9px;border:1px solid rgba(148,163,184,.13);border-radius:8px;background:#09131f}.flow-mechanics-legend b{font-size:10px;color:#dce5f0}.flow-mechanics-legend span,.flow-mechanics-legend small{font-size:9px;color:#8291a5}.flow-mechanics-legend i{display:inline-block;width:0;height:0;margin-right:7px;border-left:4px solid transparent;border-right:4px solid transparent}.flow-mechanics-legend i.long{border-bottom:7px solid #22c55e}.flow-mechanics-legend i.short{border-top:7px solid #ef4444}
.flow-vwap-legend{display:grid;grid-template-columns:18px 1fr;align-items:center;gap:4px;padding:8px;border:1px solid rgba(216,180,92,.16);border-radius:8px;background:rgba(216,180,92,.04)}.flow-vwap-legend i{width:16px;border-top:2px dashed #d8b45c}.flow-vwap-legend span{font-size:10px;color:#d8c28b}.flow-vwap-legend small{grid-column:1/-1;color:#718096;font-size:9px;line-height:1.4}
.flow-session-legend{display:flex;gap:10px;flex-wrap:wrap;padding:8px;border:1px solid rgba(148,163,184,.14);border-radius:8px;background:rgba(15,23,42,.45)}.flow-session-legend span{display:flex;align-items:center;gap:5px;color:#94a3b8;font-size:9px}.flow-session-legend i{display:inline-block;width:14px;height:8px;border:1px dashed}.flow-session-legend .asia{border-color:#38bdf8;background:rgba(56,189,248,.12)}.flow-session-legend .london{border-color:#c084fc;background:rgba(168,85,247,.12)}.flow-session-legend .new-york{border-color:#f59e0b;background:rgba(245,158,11,.12)}
.flow-cross-memory-legend{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid rgba(167,139,250,.14);border-radius:8px;background:rgba(167,139,250,.03)}.flow-cross-memory-legend span,.flow-cross-memory-legend small{font-size:9px;color:#8291a5}.flow-cross-memory-legend i{display:inline-block;width:7px;height:7px;margin-right:7px;transform:rotate(45deg)}.flow-cross-memory-legend i.continuation{background:#a78bfa}.flow-cross-memory-legend i.reversal{background:#22d3ee}
.demo-protection{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:9px 0}.demo-protection label{display:flex;flex-direction:column;gap:4px}.demo-protection input{min-width:0;padding:7px;border:1px solid rgba(148,163,184,.18);border-radius:6px;background:#07101c;color:#dce5f0}.demo-protection button{grid-column:1/-1;padding:7px;border:1px solid rgba(56,189,248,.3);border-radius:7px;background:#102238;color:#7dd3fc}.demo-layer-toggle{width:100%;padding:7px;border:1px solid rgba(148,163,184,.2);border-radius:7px;background:#111e2f;color:#94a3b8}.demo-layer-toggle.active{border-color:rgba(34,197,94,.4);color:#86efac}
#replayLabToggle{position:fixed;right:16px;bottom:18px;z-index:89;padding:10px 14px;border:1px solid rgba(56,189,248,.45);border-radius:9px;background:#0b1625;color:#7dd3fc;font-weight:800}
#replayTradePanel{position:fixed;right:14px;top:74px;bottom:16px;width:340px;z-index:88;border:1px solid rgba(148,163,184,.2);border-radius:12px;background:#08111e;color:#dce5f0;box-shadow:0 22px 60px rgba(0,0,0,.55);overflow:auto;transition:transform .2s,opacity .2s}#replayTradePanel.collapsed{transform:translateX(370px);opacity:0;pointer-events:none}
#replayTradePanel header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;padding:14px;background:#0c1828;border-bottom:1px solid rgba(148,163,184,.14)}#replayTradePanel header div{display:flex;flex-direction:column}#replayTradePanel header span{font-size:9px;color:#38bdf8;letter-spacing:.15em}#replayTradePanel header button{border:0;background:transparent;color:#94a3b8;font-size:18px}.replay-lab-body{display:flex;flex-direction:column;gap:10px;padding:12px}.replay-lab-body section{padding:11px;border:1px solid rgba(148,163,184,.13);border-radius:9px;background:#0b1625}.replay-lab-body label{font-size:10px;color:#94a3b8}.replay-range,.replay-transport,.demo-ticket{display:flex;gap:6px;margin-top:7px}.replay-range{flex-wrap:wrap}.replay-range input,.demo-risk-grid input{min-width:0;border:1px solid rgba(148,163,184,.18);border-radius:6px;background:#07101c;color:#dce5f0;padding:7px}.replay-range button,.replay-transport button,.demo-ticket button,.demo-reset{border:1px solid rgba(148,163,184,.2);border-radius:7px;background:#111e2f;color:#dce5f0;padding:7px 9px}.demo-metrics{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px}.demo-metrics div{display:flex;flex-direction:column}.demo-metrics span{font-size:9px;color:#8291a5}.demo-metrics b{font-size:13px}.demo-risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.demo-risk-grid label{display:flex;flex-direction:column;gap:4px}.replay-lab-body small{color:#718096}.demo-ticket button[data-buy]{color:#86efac;border-color:rgba(34,197,94,.4)}.demo-ticket button[data-sell]{color:#fca5a5;border-color:rgba(239,68,68,.4)}.demo-position{display:flex;flex-direction:column;gap:4px}.demo-journal{margin-top:9px;max-height:180px;overflow:auto}.demo-journal div{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid rgba(148,163,184,.1)}.positive{color:#4ade80!important}.negative{color:#f87171!important}.demo-reset{width:100%;color:#94a3b8}
.flow-object-row button:hover{color:#f3d375;background:#1a2a40}
.flow-object-name{padding:8px!important;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.flow-empty-state{display:flex;flex-direction:column;gap:8px;padding:28px 15px;text-align:center;color:#8190a4}
.flow-empty-state b{color:#d7e0ea}.flow-empty-state span{font-size:11px;line-height:1.5}
@media(max-width:760px){.flow-objects-layout{right:8px;top:56px;width:min(310px,calc(100vw - 16px))}}

#status{
  color:#38bdf8;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.flow-btn{
  color:#e5e7eb;
  text-decoration:none;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(15,23,42,.72);
  padding:8px 11px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
}

.flow-btn:hover{
  border-color:#facc15;
  color:#facc15;
}
.flow-signal-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.flow-signal-tool-grid button{border:1px solid #26384d;border-radius:8px;background:#0a1420;color:#aebdcd;padding:9px 8px;font-weight:800;cursor:pointer}.flow-signal-tool-grid button.green{color:#72e7a8}.flow-signal-tool-grid button.red{color:#ff8790}.flow-signal-tool-grid button.cursor{grid-column:1/-1}.flow-signal-tool-grid button.active{border-color:#d7af43;background:#1d2530;box-shadow:0 0 0 1px rgba(215,175,67,.2)}.flow-signal-tools>small{display:block;color:#74869a;line-height:1.4;margin-top:9px}