.flow-settings-wrap{position:relative;z-index:12}.flow-settings-toggle{display:none;width:35px;height:35px;border:1px solid #314454;border-radius:9px;background:#0b141d;color:#b6c9d3;font-size:18px;cursor:pointer}
body.flow-mode .flow-settings-toggle{display:block}.flow-settings-toggle[aria-expanded="true"]{background:#243746;color:white}
.flow-settings{position:absolute;top:43px;left:0;width:258px;padding:15px;border:1px solid #344958;border-radius:14px;background:#101c26;box-shadow:0 18px 50px #000b;color:#e6f0f3;display:grid;gap:10px}
.flow-settings[hidden]{display:none}.flow-settings>strong{font:700 12px system-ui;letter-spacing:.1em;color:#9eafba}.flow-settings>span{font:650 14px system-ui}.flow-settings small{font:12px/1.4 system-ui;color:#a7b5c1}.flow-options{display:flex;gap:3px;padding:3px;border-radius:9px;background:#08121a}.flow-options button{flex:1;min-height:38px;padding:6px 7px;border:0;border-radius:7px;background:transparent;color:#b6c5cf;font:600 13px system-ui;cursor:pointer}.flow-options button[aria-pressed="true"]{background:#2b4555;color:#fff}.flow-settings-toggle:focus-visible,.flow-options button:focus-visible,.flow-guide>button:focus-visible{outline:2px solid #d3fbff;outline-offset:2px}
.flow-legend{display:none;align-items:center;gap:14px;flex-wrap:wrap;color:#c5d2da;font:11px/1.3 system-ui;order:10;width:100%;padding:2px 4px 4px}.flow-legend span{white-space:nowrap}.flow-legend i{display:inline-block;width:10px;height:8px;margin-right:6px;vertical-align:0;border-radius:2px}.flow-candle{background:linear-gradient(90deg,#27e6b4 50%,#ff688a 50%)}.flow-depth-bid{background:#30d9ae;border:1px solid #a2ffe2}.flow-depth-ask{background:#f26b88;border:1px solid #ffc2cf}.flow-trade{border-radius:50%!important;background:linear-gradient(90deg,#30d9ae 50%,#f26b88 50%)}.flow-price{height:2px!important;background:#f5e8a5;border-radius:0!important;vertical-align:3px!important}
body.flow-mode .flow-legend{display:flex}.flow-method{color:#c5d2da}body.flow-mode .legend,body.flow-mode #rangeMethod,body.flow-mode #rangeDetail,body.flow-mode #chartAutoAnalysis,body.flow-mode #learningRecall,body.flow-mode #phaseRibbon,body.flow-mode #phaseExplain,body.flow-mode #professorDock{display:none!important}
.flow-guide{position:absolute;z-index:5;left:16px;bottom:43px;max-width:calc(100% - 28px);padding:9px 70px 9px 12px;border:1px solid #394b5a;border-left:3px solid #ae8cf0;border-radius:9px;background:rgba(8,15,23,.94);box-shadow:0 8px 25px #0009;pointer-events:auto}
.flow-guide[hidden],.flow-guide p[hidden]{display:none}.flow-guide>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.flow-guide small{font:700 11px/1.3 system-ui;color:#b8a7d2}.flow-guide strong{font:750 13px/1.3 system-ui;color:#f4ebff}.flow-guide #flowGuideCoverage{color:#ffcf88}.flow-guide>p{font:13px/1.45 system-ui;color:#d0dce3;margin:7px 0 0;max-width:430px}.flow-guide>button{position:absolute;top:7px;right:9px;border:0;background:transparent;color:#d5c0f3;font:700 12px system-ui;cursor:pointer}.flow-guide #flowGuideDetail{color:#aebfc9}
.flow-guide.candidate{border-left-color:#24ddb0}.flow-guide.break{border-left-color:#f8c466}.flow-guide.paused{border-left-color:#778695}.flow-guide.pressure{border-left-color:#ff957e}
.flow-guide #flowLevelInfo{color:#c9e3df;max-width:520px;max-height:116px;overflow:auto;border-top:1px solid #344958;padding-top:7px}
.flow-guide #flowGuideDistance{color:#d6e9f0;font-variant-numeric:tabular-nums}
.flow-guide #flowGuideDistance[hidden]{display:none}
/* Put guidance below the chart so a price reaction is never hidden by its explanation. */
body.flow-mode .chart-card{height:auto;display:flex;flex-direction:column;overflow:visible}
body.flow-mode .chart-card canvas{height:min(58vh,650px);min-height:410px;flex:none}
body.flow-mode .flow-guide{position:relative;left:auto;bottom:auto;max-width:none;width:100%;box-shadow:none;border:0;border-top:1px solid #344958;border-left:3px solid #ae8cf0;border-radius:0;padding:10px 110px 10px 12px}
body.flow-mode .flow-guide #flowLevelInfo{max-width:650px;max-height:none}
.flow-guide #flowLevelClose{position:static;min-height:34px;padding:5px 9px;border:1px solid #405562;border-radius:7px;background:#162732;color:#d5e8e5;cursor:pointer}
.flow-guide #flowLevelPanel{display:block;border-top:1px solid #344958;margin-top:8px;padding-top:4px}.flow-guide #flowLevelPanel[hidden]{display:none}
@media(max-width:740px){body.flow-mode .chart-card canvas{height:56vh;min-height:390px}body.flow-mode .flow-guide{padding:10px 68px 10px 10px}}
@media(max-width:1200px){.flow-legend{order:4;width:100%}.flow-settings-wrap{order:2}.flow-guide{max-width:calc(100% - 26px)}}
@media(max-width:740px){.flow-legend{gap:8px;font-size:11px}.flow-settings{left:auto;right:0}.flow-guide{left:8px;bottom:39px;padding:8px 62px 8px 9px}.flow-guide small{font-size:11px}.flow-guide strong{font-size:12px}.flow-guide>p{font-size:12px}}