@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
.chart-tools{display:flex;align-items:center;gap:16px}.segmented{display:flex;gap:3px;padding:3px;background:#0b1320;border:1px solid #2b3850;border-radius:8px}.segmented button{background:transparent;color:#8f9fb6;padding:6px 11px;font:500 11px 'IBM Plex Mono',monospace;white-space:nowrap;border-radius:5px}.segmented button.active{background:#3a3057;color:#dccdff;box-shadow:0 1px 4px #0004}.play-button{display:grid!important;place-items:center;box-shadow:0 3px 12px #b9a0ff22;border:1px solid #d7c4ff!important}.play-button svg{width:21px;height:21px;fill:currentColor;grid-area:1/1}.play-button .pause-icon{display:none}.play-button.is-playing .play-icon{display:none}.play-button.is-playing .pause-icon{display:block}.play-button.is-playing{background:#262038!important;color:#d6c2ff!important;box-shadow:inset 0 0 0 2px #b9a0ff10}.workspace-bottom{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)!important;align-items:start}.analysis-panel h3{font-size:13px;font-weight:500;margin:0}.flow-sections{padding:20px 20px 7px;display:grid;gap:20px}.flow-section h3{margin-bottom:12px}.flow-section h3 small{font-size:10px;color:var(--muted);font-weight:400;margin-left:10px}.flow-row{display:flex;align-items:center;gap:12px;margin:9px 0}.flow-period{color:#9eabc0;font-size:10px;flex:0 0 65px}.flow-track{position:relative;height:27px;background:#303947;border-radius:4px;overflow:hidden;flex:1}.flow-track:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#11192588}.flow-track i{height:100%;position:absolute;top:0}.flow-buy{left:0;background:#eb425b}.flow-sell{right:0;background:#18ad7f}.flow-values{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 9px;font:600 12px var(--mono);z-index:1;text-shadow:0 1px 3px #0007}.analysis-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding:16px 20px 12px;margin-top:9px}.analysis-heading h3 small{font-size:9px;color:var(--muted);display:block;margin-top:5px}.analysis-heading .segmented button{font-family:inherit;font-size:10px}.analysis-table-scroll{overflow:auto;margin:0 20px;scrollbar-width:thin;scrollbar-color:#3d4a60 transparent}.analysis-table th,.analysis-table td{padding:10px 8px}.analysis-table thead{position:static}.analysis-table thead tr:first-child th{text-align:center;background:#172233;font-size:11px;border-bottom:1px solid #2b374b}.analysis-table td{font-size:10px}.analysis-table td:first-child{font-family:inherit;font-size:11px}.buy-text{color:#ff667b!important}.sell-text{color:#3dd6ae!important}.distribution-chart{display:flex;align-items:center;justify-content:center;gap:28px;padding:22px 20px 8px}.money-donut{width:172px;height:172px;border-radius:50%;display:grid;place-items:center;flex:0 0 172px;background:#253044}.donut-center{width:126px;height:126px;border-radius:50%;background:#111925;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.donut-center span,.donut-center small{font-size:9px;color:var(--muted)}.donut-center strong{font:500 14px var(--mono)}.money-legend{min-width:148px;display:grid;gap:6px}.money-legend>div{display:flex;justify-content:space-between;gap:20px;font-size:10px}.money-legend i{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:7px}.money-legend b{font:500 10px var(--mono)}.analysis-note{margin:13px 20px 18px;color:var(--muted);font-size:9px;line-height:1.8}.trades-panel .table-scroll{height:600px}.trades-panel td{padding-top:12px;padding-bottom:12px}.analysis-clock{font-size:10px}.trades-panel .panel-heading p{line-height:1.6}@media(max-width:1200px){.workspace-bottom{grid-template-columns:1fr!important}.trades-panel .table-scroll{height:320px}.analysis-table td{font-size:12px}}@media(max-width:760px){.chart-tools{gap:8px}.segmented button{padding:6px 10px}.distribution-chart{gap:18px}.analysis-heading{padding:14px 16px}.analysis-table-scroll{margin:0 12px}.analysis-table th,.analysis-table td{font-size:10px;padding:10px 7px}.flow-sections{padding:18px 16px 6px}.analysis-clock{display:none}.analysis-heading h3{font-size:12px}.money-donut{width:152px;height:152px;flex-basis:152px}.donut-center{width:111px;height:111px}.money-legend{min-width:132px}.money-legend>div{gap:9px}.trades-panel .table-scroll{height:300px}}
:root{color-scheme:dark;--bg:#0b1018;--panel:#111925;--border:#243044;--muted:#8290a6;--text:#e6edf7;--accent:#b9a0ff;--red:#ff667b;--green:#3dd6ae;--blue:#6bb4ff;--mono:'IBM Plex Mono',monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans TC',system-ui,sans-serif;font-size:13px}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer;transition:background .15s,transform .15s}button:disabled{cursor:wait;opacity:.5}button:hover:not(:disabled){filter:brightness(1.15)}a{color:var(--accent);text-decoration:none}.shell{max-width:1640px;margin:auto;padding:0 38px}.topbar{height:83px;display:flex;align-items:center;border-bottom:1px solid var(--border);gap:55px}.brand{display:flex;align-items:center;gap:13px;color:var(--text);font-size:19px;font-weight:700;letter-spacing:.5px}.brand small{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:2px}.logo{font-size:40px;color:var(--accent)}.logo.small{font-size:34px}.topbar nav{display:flex;height:100%;align-items:center;gap:28px}.nav-active{height:100%;display:flex;align-items:center;border-bottom:2px solid var(--accent)}.source-status{margin-left:auto;color:var(--muted);display:flex;align-items:center;gap:8px;font-size:11px}.status-dot{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 12px #3dd6ae44}.source-pill{border:1px solid var(--border);border-radius:5px;padding:5px 8px;margin-left:8px}.intro{display:flex;align-items:center;justify-content:space-between;padding:28px 0 24px;gap:24px}.eyebrow{font:500 10px var(--mono);letter-spacing:2px;color:var(--accent);margin:0 0 8px}h1{font-size:27px;font-weight:600;letter-spacing:.2px;margin:0 0 8px}.accent{color:var(--accent)}.muted{color:var(--muted)}.intro p.muted{margin:0;font-size:12px}.selector{display:flex;gap:12px;align-items:flex-end}.selector label{color:var(--muted);font-size:10px;display:flex;flex-direction:column;gap:7px}input,select{background:#151f2e;color:var(--text);border:1px solid #30405a;border-radius:6px;padding:9px 11px;min-height:39px}select{cursor:pointer}.selector input{width:96px;font:500 15px var(--mono)}.selector select{font:13px var(--mono);min-width:110px}button{border:0;border-radius:6px;background:#1b283b;color:var(--text);padding:9px 13px}.primary{background:var(--accent);color:#161024;min-height:39px;font-weight:600;display:flex;gap:22px;align-items:center;justify-content:center}.text-button{background:transparent;color:var(--muted);padding:8px 4px}.notice{color:var(--muted);font-size:11px;margin:0 0 14px;display:flex;align-items:center;gap:8px}.notice.error,.error{color:var(--red)}.notice.loading:before{content:'';width:9px;height:9px;border:2px solid #635077;border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:19px}.metrics article{padding:16px 20px;background:linear-gradient(125deg,#151d2a,#111823);border:1px solid var(--border);border-radius:9px}.metric-label{display:flex;justify-content:space-between;align-items:center;color:#a6b2c4;font-size:11px}.metric-label small{font:11px var(--mono);color:var(--muted)}.metric-value{font:500 29px var(--mono);letter-spacing:-1px;margin:11px 0 8px;min-height:36px}.metric-value small{font:12px 'Noto Sans TC',sans-serif;color:var(--muted);margin-left:8px}.metric-sub{color:var(--muted);font-size:10px}.book-value{font-size:25px}.book-value #bid-total{color:var(--red)}.book-value #ask-total{color:var(--green)}.divider{color:#445267;font-size:18px;margin:0 13px}.clock-card{border-color:#524366!important;background:linear-gradient(125deg,#1d1c31,#151923)!important}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.panel{background:var(--panel);border:1px solid var(--border);border-radius:9px;overflow:hidden}.workspace-top{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(350px,1fr);gap:19px}.panel-heading{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1e293b;gap:12px}.panel-heading h2{font-size:14px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px}.panel-heading p{font-size:10px;color:var(--muted);margin:6px 0 0}.pill{display:inline-block;background:#243044;color:#a3b1c5;border-radius:4px;padding:3px 6px;font-size:9px;font-weight:400;line-height:1.3}.chart-legend{display:flex;gap:12px;font-size:9px;color:var(--muted)}.chart-legend i{display:inline-block;width:6px;height:6px;border-radius:1px;margin-right:5px}.legend-red{background:var(--red)}.legend-green{background:var(--green)}.legend-grey{background:#64748b}.candle-reading{font-size:10px;color:#a4b2c8;margin:14px 20px 0;min-height:16px}#chart{height:285px;width:100%}.chart-footer{display:flex;justify-content:space-between;padding:5px 20px 13px;font-size:9px;color:var(--muted)}.chart-footer a{color:var(--muted)}.book-table{padding:13px 16px 0}.book-head,.book-row{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr 1fr 1.15fr;text-align:right;align-items:center;gap:5px}.book-head{font-size:9px;color:var(--muted);padding:4px 0 12px}.book-row{font:12px var(--mono);height:42px;border-top:1px solid #233044;position:relative}.book-row .price-bid{color:var(--red)}.book-row .price-ask{color:var(--green)}.book-row .qty-bid,.book-row .qty-ask{position:relative;padding:9px 4px}.book-row .qty-bid{background:linear-gradient(to left,#ff667b22 var(--w),transparent var(--w))}.book-row .qty-ask{background:linear-gradient(to right,#3dd6ae22 var(--w),transparent var(--w))}.change-plus{color:var(--red)}.change-minus{color:var(--green)}.change-zero{color:#56657c}.change-new{color:var(--blue);font:9px 'Noto Sans TC',sans-serif}.book-balance{margin:18px 20px 0;height:4px;background:#334155;display:flex;border-radius:4px;overflow:hidden}.book-balance>div:first-child{background:var(--red);width:50%}.book-balance>div:last-child{background:var(--green);width:50%}.balance-label{display:flex;justify-content:space-between;padding:8px 20px 0;font-size:10px;color:var(--muted)}.balance-label b{font:11px var(--mono);font-weight:400}.book-note{font-size:9px;color:var(--muted);line-height:1.6;margin:10px 20px 12px}.playback{margin:19px 0;padding:14px 20px}.transport{display:flex;align-items:center;gap:13px}.icon-button{background:#1b283b;width:31px;height:31px;padding:0;font-size:14px}.play-button{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#151022;font-size:15px}.control-divider{height:20px;width:1px;background:var(--border);margin:0 6px}.speed-label{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:10px}.speed-label select{min-height:31px;padding:3px 8px;font:11px var(--mono)}.jump-control{margin-left:auto;display:flex;gap:10px;align-items:center}.jump-control input{font:12px var(--mono);min-height:31px;padding:4px 8px}#timeline{width:100%;margin:17px 0 0;min-height:12px;height:12px;padding:0;accent-color:var(--accent);border:0;background:none;cursor:pointer}.timeline-labels{display:flex;justify-content:space-between;font:9px var(--mono);color:var(--muted);padding-top:4px}.workspace-bottom{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.85fr);gap:19px}.table-scroll{height:268px;overflow:auto;scrollbar-color:#3d4a60 transparent;scrollbar-width:thin}table{width:100%;border-collapse:collapse;text-align:right;font-size:11px}thead{background:#151f2f;position:sticky;top:0;z-index:1}th{padding:11px 12px;color:#7d8da5;font-size:9px;font-weight:500;white-space:nowrap}td{padding:10px 12px;border-bottom:1px solid #1d293a;font-family:var(--mono);white-space:nowrap}th:first-child,td:first-child{text-align:left}tr:hover td{background:#182338}.empty-cell{text-align:center!important;padding:44px 18px!important;color:var(--muted);font:11px 'Noto Sans TC',sans-serif;white-space:normal}.status-label{font:9px 'Noto Sans TC',sans-serif}.size-badge{display:inline-block;border-radius:4px;padding:3px 6px;font:9px 'Noto Sans TC',sans-serif}.size-extra_large{color:#d6b1ff;background:#392953}.size-large{color:#ffb882;background:#493126}.size-medium{color:#89baff;background:#243952}.size-small{color:#a3b1c5;background:#243044}.size-auction,.size-pending,.size-incomplete,.size-unknown{color:#a3b1c5;background:#243044}.trade-filter-label{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:8px}.trade-filter-label select{min-height:29px;padding:4px 8px;font-size:10px}.size-distribution{display:flex;padding:11px 16px;gap:10px;border-bottom:1px solid var(--border)}.size-stat{flex:1;min-width:0}.size-stat-label{font-size:9px;color:var(--muted);display:flex;justify-content:space-between}.size-stat-amount{font:13px var(--mono);margin:4px 0}.size-stat-bar{height:3px;background:#253348;border-radius:3px}.size-stat-bar>i{display:block;height:100%;border-radius:3px}.panel-bottom-note{padding:11px 15px;font-size:9px;color:var(--muted);border-top:1px solid var(--border)}footer{display:flex;justify-content:space-between;gap:20px;color:#68778e;font-size:9px;padding:21px 0 30px;line-height:1.8}.dot-separator{padding:0 8px}.overlay{position:fixed;inset:0;background:#0b1018eb;backdrop-filter:blur(15px);z-index:20;display:grid;place-items:center}.hidden{display:none!important}.login-card{width:min(450px,90vw);border:1px solid var(--border);border-radius:16px;padding:36px;background:var(--panel);box-shadow:0 25px 100px #0008}.login-card h1{font-size:24px}.login-card label{display:flex;flex-direction:column;gap:9px;margin:25px 0 14px;color:var(--muted);font-size:11px}.login-card input{height:44px}.login-card button{width:100%;height:43px}.login-card .logo{margin-bottom:18px}.login-card .error{font-size:11px;min-height:16px}dialog{background:#111925;color:var(--text);border:1px solid var(--border);border-radius:12px;width:min(760px,94vw);max-height:90vh;padding:24px;box-shadow:0 40px 100px #0009}dialog::backdrop{background:#080d15c9;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2{margin:0;font-size:20px}dialog p{line-height:1.8;font-size:11px}dialog .muted{font-size:10px}.rules-current{font:11px var(--mono);background:#1e253a;padding:13px;border-radius:5px;margin:15px 0}.rule-highlight td{background:#2c2544!important}.rule-highlight td:first-child{color:var(--accent)}@media(min-width:1600px){#chart{height:330px}.book-row{height:49px}.table-scroll{height:320px}}@media(max-width:1100px){.shell{padding:0 20px}.topbar{gap:25px}.source-pill{display:none}.intro{align-items:flex-start;flex-direction:column}.selector{width:100%;justify-content:flex-start}.workspace-top{grid-template-columns:minmax(0,1.4fr) minmax(330px,1fr)}.workspace-bottom{grid-template-columns:1fr 1.6fr}.metrics{gap:9px}.metrics article{padding:13px}.metric-value{font-size:25px}.chart-legend{display:none}.source-status{font-size:10px}}@media(max-width:760px){.shell{padding:0 13px}.topbar{height:70px}.topbar nav{margin-left:auto;gap:12px}.nav-active,.source-status{display:none}.brand{font-size:17px}.intro{padding-top:22px}h1{font-size:23px}.selector{flex-wrap:wrap;gap:9px}.selector label{flex:1;min-width:90px}.selector input,.selector select{width:100%;min-width:0}.selector .primary{width:100%}.metrics{grid-template-columns:1fr 1fr}.workspace-top,.workspace-bottom{grid-template-columns:1fr}.workspace-top .chart-panel{order:1}.workspace-top .orderbook-panel{order:2}#chart{height:270px}.book-row{height:43px}.playback{padding:13px}.transport{gap:7px;flex-wrap:wrap}.transport .control-divider{display:none}.jump-control{margin-left:auto}.next-trade-button{font-size:10px}.speed-label{font-size:9px}.workspace-bottom{gap:14px}.table-scroll{height:260px}th,td{padding:9px 8px;font-size:10px}footer{display:block}footer>span{display:block}.panel-heading{padding:14px 16px}.metric-value{font-size:25px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Unified transport and simultaneous analysis periods. */
.transport{align-items:center;gap:8px;flex-wrap:wrap}.transport .icon-button{width:36px;height:38px;border:1px solid #30405a;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:#182234;flex-shrink:0}.transport svg{display:block;width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}#play-button{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-width:94px;width:auto;height:38px;padding:0 16px;border-radius:7px;background:#b9a0ff;color:#171329;border:1px solid #b9a0ff!important;box-shadow:none;font-size:12px;font-weight:600}#play-button svg{width:18px;height:18px;fill:none;grid-area:auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#play-button .pause-icon{display:none}#play-button.is-playing{background:#211c32!important;color:#d8c7ff!important;box-shadow:none;border-color:#786098!important}#play-button.is-playing .play-icon{display:none}#play-button.is-playing .pause-icon{display:block}.transport .text-button{height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;white-space:nowrap}.transport .speed-label{height:38px}.transport .speed-label select,.jump-control input{height:38px}.transport .jump-control{gap:6px}.trial-panel{margin:0 0 19px}.trial-panel .table-scroll{height:155px}.trial-summary{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:18px;padding:16px 20px;background:#151e2e}.trial-summary span{display:block;font-size:10px;color:var(--muted);margin-bottom:8px}.trial-summary strong{font:500 17px var(--mono);color:#c7b4f5}.trial-summary div:last-child strong{font-size:12px}.analysis-controls{display:flex;align-items:end;flex-wrap:wrap;gap:10px;padding:17px 20px;border-bottom:1px solid var(--border);background:#141d2c}.analysis-controls label{display:flex;flex-direction:column;gap:6px;font-size:10px;color:var(--muted)}.analysis-controls input{font:12px var(--mono);height:36px;min-height:36px}.secondary-button{height:36px;border:1px solid #3a4a66;font-size:11px;background:#1b293c}.secondary-button.active{background:#2d2640;border-color:#67548d;color:#d2bcff}.analysis-controls>span{font-size:10px;color:#c7b4f5;align-self:center;padding-top:15px}.analysis-controls p{width:100%;font-size:9px;color:var(--muted);margin:2px 0 0}.analysis-comparison{display:grid;grid-template-columns:1fr;gap:0}.analysis-period-card{padding-bottom:12px}.analysis-period-card+.analysis-period-card{border-top:1px solid var(--border)}.analysis-heading{border-top:none;margin-top:0}.analysis-clock{display:block!important;white-space:nowrap;font-size:10px}.direction-cell{font-family:inherit;font-size:10px}.workspace-bottom{grid-template-columns:1fr!important}.trades-panel .table-scroll{height:340px}.flow-sections{grid-template-columns:1fr 1fr;gap:28px}.distribution-chart{padding-bottom:14px}@media(min-width:1380px){.analysis-comparison{grid-template-columns:1fr 1fr}.analysis-period-card+.analysis-period-card{border-top:none;border-left:1px solid var(--border)}}@media(max-width:760px){.flow-sections{grid-template-columns:1fr;gap:18px}.trial-summary{gap:12px;padding:15px}.trial-summary strong{font-size:14px}.trial-summary div:last-child strong{font-size:10px}.analysis-controls{padding:15px}.analysis-controls>span{padding-top:0;width:100%}.transport .jump-control{margin-left:0}#play-button{min-width:88px;padding:0 12px}.analysis-panel .panel-heading{align-items:start}.analysis-clock{font-size:9px}.analysis-table-scroll{margin:0 12px}}
.timeline-labels{position:relative;height:18px}.timeline-labels span{position:absolute;transform:translateX(-50%);padding-top:4px}.timeline-labels span:first-child{transform:none}.timeline-labels span:last-child{transform:translateX(-100%)}
/* Stable block geometry during replay updates. */
html,body,.shell{overflow-anchor:none}.metrics article{height:118px}.metric-sub{display:block;line-height:15px;height:30px;overflow:hidden}.metric-value{white-space:nowrap}.panel-heading{min-height:76px}.panel-heading p{line-height:15px;min-height:15px}.candle-reading{height:30px;line-height:15px;overflow:hidden;margin-top:12px}.chart-footer{height:34px;align-items:center;white-space:nowrap;gap:12px}.chart-footer>span{overflow:hidden;text-overflow:ellipsis}.book-note{min-height:29px}.table-scroll,.analysis-table-scroll{scrollbar-gutter:stable}.analysis-table{table-layout:fixed}.analysis-table th,.analysis-table td{font-variant-numeric:tabular-nums}.analysis-controls{min-height:108px}.analysis-controls>span{width:150px;white-space:nowrap}.analysis-period-card .distribution-chart{min-height:220px}.analysis-period-card .analysis-table-scroll{height:245px}.money-legend{width:160px}.money-legend b{width:59px;text-align:right}.trial-summary{height:81px}.trial-summary strong{white-space:nowrap}.notice{min-height:28px}.panel{min-width:0}@media(max-width:760px){.metrics article{height:118px}.analysis-controls{min-height:128px}.analysis-controls>span{width:100%}.analysis-period-card .analysis-table-scroll{height:232px}.panel-heading{min-height:76px}}
.metrics article{height:138px}@media(max-width:760px){.metrics article{height:138px}}

/* Chart, playback, then book: separate full-width blocks. */
.workspace-top{grid-template-columns:minmax(0,1fr)!important}.orderbook-panel{margin-bottom:19px}.trial-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.trial-actions button{white-space:nowrap}

/* Taller candle chart. */
#chart{height:450px}@media(max-width:760px){#chart{height:400px}}

.mode-tab{height:100%;background:transparent;color:var(--muted);border-radius:0;border-bottom:2px solid transparent;padding:0 8px;white-space:nowrap}.mode-tab.active{border-color:var(--accent);color:var(--text)}.topbar nav{gap:10px}#live-status-panel{margin:0 0 19px}.live-health{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:17px 20px;background:#162130}.live-health span{font-size:10px;color:var(--muted)}.live-health b{display:block;font:500 17px var(--mono);color:var(--text);margin-top:9px}.live-workers{display:grid;grid-template-columns:repeat(4,1fr);padding:15px 20px;gap:14px}.live-workers>div{border:1px solid var(--border);border-radius:6px;padding:10px 12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:7px}.live-workers span,.live-workers small{font-size:10px;color:var(--muted)}.live-workers b{font:500 12px var(--mono)}.live-workers small{width:100%}.selector #live-symbol{max-width:270px}.topbar{gap:25px}#live-status-panel .analysis-note{margin-top:0}@media(max-width:760px){.topbar{gap:10px}.topbar nav{gap:4px}.mode-tab{font-size:11px;padding:0 4px}.topbar #rules-button{font-size:9px}.live-health,.live-workers{grid-template-columns:repeat(2,1fr)}.selector #live-symbol{max-width:none}}

.seek-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:15px 0 8px;padding-top:14px;border-top:1px solid var(--border)}
.seek-controls>span,.seek-group>span,.analysis-window-controls>span{font-size:11px;color:var(--muted);white-space:nowrap}
.seek-group{display:flex;align-items:center;gap:6px}.seek-group>span{margin-right:3px}.seek-button{min-width:63px;height:34px;padding:0 9px;border:1px solid #30405a;background:#182234;font:500 11px var(--mono)}
.analysis-window-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border)}.analysis-window-controls small{font-size:10px;color:var(--muted)}
.details-heading{border-bottom:1px solid var(--border)}.details-pane{height:510px;overflow:hidden}.details-pane.trial-panel{margin:0}.details-pane.trial-panel .table-scroll{height:337px}.details-pane .panel-heading{height:82px}.details-panel .details-heading{height:76px}
@media(max-width:760px){.seek-controls{gap:10px}.seek-controls>span{width:100%}.seek-button{min-width:54px;padding:0 7px}.analysis-window-controls{padding:14px 15px;gap:9px}.analysis-window-controls small{width:100%}.details-heading{padding:16px 15px!important;gap:8px!important}.details-heading h2{font-size:13px}.details-heading .segmented button{font-family:inherit;padding:6px 8px;font-size:11px}.details-pane .panel-heading{align-items:center;gap:8px}.details-pane.trial-panel .panel-heading p{font-size:9px}.details-pane.trial-panel .trial-actions>.pill{display:none}}

.live-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.live-actions button{white-space:nowrap}
.book-totals{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:15px 20px;background:#151e2e;border-bottom:1px solid var(--border)}.book-totals>div{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}.book-totals>div:last-child{justify-content:flex-end}.book-totals span{font-size:10px;color:var(--muted)}.book-totals strong{font:500 21px var(--mono);font-variant-numeric:tabular-nums}.book-totals>div:first-child strong{color:var(--red)}.book-totals>div:last-child strong{color:var(--green)}.book-totals small{font-size:10px;color:var(--muted)}
#subscriptions-dialog{width:min(880px,94vw)}.subscription-search{padding:14px 0 16px;border-top:1px solid var(--border)}.subscription-search label{display:block;color:var(--muted);font-size:11px;margin-bottom:8px}.subscription-search>div{display:flex;gap:8px}.subscription-search input{flex:1;min-width:0}.subscription-search button{height:39px}.subscription-search>span{display:block;font-size:11px;color:var(--accent);margin-top:10px}.subscriptions-table-scroll{height:min(48vh,440px);overflow:auto;scrollbar-gutter:stable;scrollbar-color:#3d4a60 transparent}.subscriptions-table-scroll td:nth-child(3){font-family:inherit;text-align:left}.subscriptions-table-scroll th:nth-child(3){text-align:left}.subscription-ready{color:var(--green);font-family:inherit;font-size:10px}.subscription-open{height:30px;padding:4px 10px;white-space:nowrap}
@media(max-width:760px){.book-totals{padding:14px 16px;gap:10px}.book-totals>div{gap:6px}.book-totals span{width:100%}.book-totals>div:last-child span{text-align:right}.book-totals strong{font-size:20px}.live-actions{gap:5px}.live-actions button{font-size:10px;padding:6px 8px}#subscriptions-dialog{padding:18px}.subscriptions-table-scroll th,.subscriptions-table-scroll td{padding:9px 7px}.subscriptions-table-scroll{height:46vh}}

#chart{height:560px}.chart-tools{flex-wrap:wrap}.source-status{background:transparent;padding:8px 0;white-space:nowrap;border:0}.source-status:disabled{opacity:1;cursor:default}.source-status:not(:disabled){color:var(--accent)}#feed-status-button{align-items:center;line-height:1.4}#feed-status-arrow{display:inline-flex;align-items:center;justify-content:center;flex:0 0 14px;width:14px;height:14px;line-height:0}#feed-status-arrow svg{display:block;width:14px;height:14px}.topbar{flex-wrap:wrap;height:auto;min-height:83px}.topbar nav{height:83px}
#live-status-dialog{width:min(900px,94vw);padding:20px;position:relative}#live-status-dialog #live-status-panel{margin:0;border:0;overflow:visible}#live-status-dialog .panel-heading{padding-right:42px}#live-status-dialog .status-close{position:absolute;right:20px;top:25px;z-index:2}#live-status-dialog .live-health{grid-template-columns:repeat(2,1fr)}#live-status-dialog .live-workers{grid-template-columns:repeat(2,1fr)}
.subscription-sort{background:transparent;color:inherit;padding:4px 0;display:inline-flex;align-items:center;gap:6px;font:inherit;border-radius:3px}.subscription-sort span{color:var(--accent);font-size:12px}th[aria-sort=ascending],th[aria-sort=descending]{color:var(--accent)}
@media(max-width:760px){#chart{height:480px}.source-status{display:inline-flex!important;font-size:10px;margin-left:0}.topbar{gap:10px;min-height:82px}.topbar nav{height:70px}.topbar .brand{font-size:15px}.topbar .brand .logo{font-size:26px}.topbar .brand small{font-size:8px}.topbar nav{gap:4px}.chart-tools{gap:7px;justify-content:flex-end}#chart-view-toggle{padding:5px 8px;font-size:10px}#live-status-dialog{padding:12px}#live-status-dialog .status-close{right:15px;top:22px}.transport .live-actions{width:100%;justify-content:flex-start;border-top:1px solid var(--border);padding-top:10px;margin-top:5px}}

.storage-location code{display:block;color:var(--accent);font:11px var(--mono);overflow-wrap:anywhere;margin-top:5px}

.selector-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.selector-actions #subscriptions-button{height:39px;white-space:nowrap;padding:0 13px}.selector-actions .primary{white-space:nowrap}@media(max-width:760px){.selector-actions{width:100%}.selector-actions .primary{width:auto;flex:1}.selector-actions #subscriptions-button{flex:1}}
#subscriptions-body tr[data-code]{cursor:pointer}#subscriptions-body tr[data-code]:focus{outline:2px solid var(--accent);outline-offset:-2px}#subscriptions-body tr[data-code]:hover td{background:#24203a}

.selector #year{min-width:92px}.selector #month{min-width:78px}.selector #trading-day{min-width:104px}@media(max-width:760px){.selector #year,.selector #month,.selector #trading-day{min-width:0}}

/* Both replay modes: chart/playback left, book/details right, analysis below. */
.market-workspace .chart-column,.market-workspace .market-side{min-width:0}
.market-side .details-panel{margin-top:19px}
.market-workspace+.workspace-bottom{margin-top:19px}
.wide-layout .shell{max-width:none;padding:0 24px}
.wide-layout .market-workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(480px,1fr);grid-template-rows:minmax(0,1fr);height:980px;gap:20px;align-items:stretch}
.wide-layout .chart-column,.wide-layout .market-side{display:flex;flex-direction:column;gap:18px;height:100%;min-height:0}
.wide-layout .chart-column .workspace-top{flex:1;min-height:0;display:flex}
.wide-layout .chart-panel{width:100%;height:100%;min-height:680px;display:flex;flex-direction:column}
.wide-layout .chart-panel>.panel-heading{flex-shrink:0;flex-wrap:wrap}
.wide-layout .chart-panel .candle-reading,.wide-layout .chart-footer{flex-shrink:0}
.wide-layout #chart{flex:1;height:auto;min-height:560px}
.wide-layout .playback{margin:0;flex-shrink:0;padding:14px 16px}
.wide-layout .transport{gap:9px;flex-wrap:wrap}
.wide-layout .orderbook-panel{margin:0;flex-shrink:0}
.wide-layout .orderbook-panel .panel-heading{padding:12px 16px}
.wide-layout .book-totals{padding:10px 16px;gap:12px}
.wide-layout .book-totals span{width:100%}
.wide-layout .book-totals>div:last-child span{text-align:right}
.wide-layout .book-totals strong{font-size:20px}
.wide-layout .book-table{padding:8px 14px 0}
.wide-layout .book-head{padding:4px 0 8px}
.wide-layout .book-row{height:32px;font-size:11px}
.wide-layout .book-balance{margin-top:12px}
.wide-layout .book-note{margin:8px 16px 12px}
.wide-layout .market-side .details-panel{margin:0;flex:1;min-height:370px;display:flex;flex-direction:column}
.wide-layout .details-panel .details-heading{height:56px;flex-shrink:0;padding:10px 14px!important}
.wide-layout .details-pane{height:auto;min-height:0;flex:1;display:flex;flex-direction:column}
.wide-layout .details-pane .panel-heading{height:76px;flex-shrink:0;padding:10px 14px}
.wide-layout .details-pane .panel-heading h2{font-size:12px}
.wide-layout .details-pane .panel-heading p{font-size:9px}
.wide-layout .details-pane .table-scroll{height:auto;min-height:150px;flex:1}
.wide-layout .details-pane th,.wide-layout .details-pane td{padding:8px 6px;font-size:10px}
.wide-layout .details-pane .analysis-note{flex-shrink:0;margin:10px 14px;font-size:9px;line-height:1.6}
.wide-layout .details-pane .trial-summary{flex-shrink:0}
@media(max-width:1100px){
 .wide-layout .shell{padding:0 20px}
 .wide-layout .market-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto}
 .wide-layout .chart-column,.wide-layout .market-side{height:auto}
 .wide-layout .chart-column .workspace-top{flex:none;display:block}
 .wide-layout .chart-panel{height:auto;min-height:0;display:block}
 .wide-layout #chart{height:560px;min-height:0}
 .wide-layout .market-side .details-panel{height:510px;flex:none}
}
@media(max-width:760px){.wide-layout .shell{padding:0 13px}.wide-layout #chart{height:480px}}
/* Fixed date row below the chart; changing sessions does not move other panels. */
.chart-session-dates{display:flex;gap:7px;min-height:36px;flex-wrap:nowrap;overflow-x:auto;align-items:center;padding:4px 0}
.session-date{white-space:nowrap;border:1px solid var(--border);background:#172233;color:var(--muted);border-radius:6px;padding:5px 9px;font:11px 'IBM Plex Mono',monospace;cursor:pointer}
.session-date.selected{border-color:#8fa9ec;color:#b7caff;background:#263650}
#history-status{font-size:11px;color:var(--muted)}
.wide-layout #details-trades table{width:100%;table-layout:fixed}
.wide-layout #details-trades th,.wide-layout #details-trades td{padding-left:4px;padding-right:4px}
.wide-layout #details-trades th:nth-child(1){width:22%}
.wide-layout #details-trades th:nth-child(2){width:12%}
.wide-layout #details-trades th:nth-child(3){width:10%}
.wide-layout #details-trades th:nth-child(4){width:15%}
.wide-layout #details-trades th:nth-child(5){width:10%}
.wide-layout #details-trades th:nth-child(6){width:16%}
.wide-layout #details-trades th:nth-child(7){width:15%;white-space:normal}
.wide-layout #details-trades td{font-size:9px}
.wide-layout #details-trades td:last-child{white-space:normal;overflow-wrap:anywhere}
.wide-layout #details-trades .size-badge{padding-left:3px;padding-right:3px;font-size:9px}
/* Keep the date/footer inside the fixed chart panel with five live periods. */
.wide-layout .chart-panel>.panel-heading>div:first-child{flex:1;min-width:160px}
.wide-layout .chart-panel .chart-tools{flex:0 1 auto}
.wide-layout #chart{min-height:0}

/* Replay availability stays beside the date fields and refreshes without seeking. */
.selector{flex-wrap:wrap;justify-content:flex-end;max-width:690px}
.tick-availability{order:2;flex-basis:100%;font-size:11px;color:var(--muted);text-align:right}
.tick-availability strong{color:#b7caff;font:500 12px var(--mono)}
@media(max-width:760px){
 .wide-layout .shell{padding:0 12px}
 .topbar{gap:7px;padding:12px 0;min-height:0}
 .topbar nav{height:38px;flex:1;justify-content:flex-end}
 .topbar #rules-button{padding:4px;font-size:9px}
 .source-status{font-size:10px;margin-left:auto}
 .source-pill{display:none}
 .intro{padding:18px 0 14px;gap:16px}
 .intro h1{font-size:21px}
 .intro p.muted{font-size:11px;line-height:1.7}
 .selector{width:100%;gap:8px;max-width:none;justify-content:flex-start}
 .selector label{min-width:70px;gap:5px}
 .selector input,.selector select{padding:8px;min-height:40px;font-size:12px}
 .tick-availability{order:0;text-align:left}
 .selector-actions{order:1}
 .metrics{gap:9px;margin-bottom:14px}
 .metrics article{height:111px;padding:12px}
 .metric-label{font-size:10px}
 .metric-value{font-size:22px;margin:8px 0 4px;min-height:27px}
 .book-value{font-size:18px}
 .book-value .divider{margin:0 5px;font-size:14px}
 .metric-sub{font-size:9px;line-height:14px;height:28px}
 .wide-layout .market-workspace{gap:14px}
 .wide-layout .chart-column,.wide-layout .market-side{gap:14px}
 .wide-layout .chart-panel>.panel-heading{flex-wrap:wrap;padding:12px;min-height:0;gap:9px}
 .wide-layout .chart-panel>.panel-heading>div:first-child{flex-basis:100%}
 .wide-layout .chart-panel .chart-tools{flex-basis:100%;justify-content:space-between;gap:6px}
 .chart-tools .chart-legend{display:none}
 #timeframe button{min-height:34px;padding:6px 10px}
 .wide-layout #chart{height:clamp(260px,40vh,350px);height:clamp(260px,40svh,350px)}
 .candle-reading{margin:9px 12px 0;font-size:9px}
 .chart-session-dates{padding:4px 10px}
 .chart-footer{padding:4px 12px 10px;gap:7px;font-size:8px}
 .chart-footer #minute-status{display:none}
 .wide-layout .chart-column .playback{padding:12px}
 .transport{gap:6px}
 .transport .jump-control{width:100%;justify-content:flex-end}
 .transport .jump-control input{flex:1;min-width:0;max-width:none}
 .seek-controls{gap:6px;margin-top:10px;padding-top:10px}
 .seek-controls>span{display:none}
 .seek-group{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .seek-group>span{display:none}
 .seek-button{min-width:0;height:38px;padding:0 4px}
 .book-table{padding:10px 10px 0}
 .book-head,.book-row{gap:3px}
 .book-row{font-size:10px}
 .book-totals strong{font-size:18px}
 .wide-layout .market-side .details-panel{height:480px}
 .wide-layout #details-trades table{min-width:570px}
 .wide-layout #details-trades td{font-size:10px}
 .analysis-comparison{grid-template-columns:minmax(0,1fr)}
 .analysis-period-card{min-width:0}
 .analysis-table{min-width:520px}
 .analysis-period-card .distribution-chart{gap:14px;padding:18px 10px;flex-wrap:wrap}
 .subscriptions-table-scroll table{min-width:520px}
}
@media(max-width:900px) and (max-height:500px){
 .wide-layout #chart{height:250px;min-height:0}
}

/* Readable trade details; keep size labels in the first visible columns. */
.wide-layout #details-trades table{min-width:600px}
.wide-layout #details-trades th{font-size:11px;color:#a6b6ce;white-space:normal;line-height:1.5}
.wide-layout #details-trades td{font-size:12px;padding:10px 6px;line-height:1.5}
.wide-layout #details-trades th:nth-child(1){width:19%}
.wide-layout #details-trades th:nth-child(3){width:9%}
.wide-layout #details-trades th:nth-child(5){width:13%}
.wide-layout #details-trades th:nth-child(6){width:17%}
.wide-layout #details-trades .size-badge{font-size:13px;font-weight:600;line-height:1.6;padding:3px 6px;white-space:normal;max-width:100%}
.wide-layout #details-trades .direction-cell{font-size:12px;white-space:normal}
.trade-time{font-size:12px;white-space:nowrap}
.trade-time small{display:block;font:10px var(--mono);color:#9caec8}
.size-extra_large{color:#ead6ff;background:#49326b}
.size-large{color:#ffd5ac;background:#563926}
.size-medium{color:#b7d7ff;background:#2b4364}
.size-small{color:#d1dceb;background:#303e54}
.size-auction,.size-pending,.size-incomplete,.size-unknown{color:#c0ccdc;background:#303b4c}

/* Six trade columns, vivid size badges and direction-colored quantities. */
.wide-layout #details-trades table{min-width:510px}
.wide-layout #details-trades th:nth-child(1){width:19%}
.wide-layout #details-trades th:nth-child(2){width:13%}
.wide-layout #details-trades th:nth-child(3){width:12%}
.wide-layout #details-trades th:nth-child(4){width:18%}
.wide-layout #details-trades th:nth-child(5){width:20%}
.wide-layout #details-trades th:nth-child(6){width:18%}
.wide-layout #details-trades .trade-lots{font-weight:600}
.wide-layout #details-trades .size-extra_large{color:#220729;background:#e65aff;border:1px solid #f4b2ff;font-weight:700}
.wide-layout #details-trades .size-large{color:#291100;background:#ff932e;border:1px solid #ffd29a;font-weight:700}
.analysis-table th{font-size:12px}
.analysis-table td,.analysis-table td:first-child{font-size:14px;font-weight:500;padding:11px 8px}
.analysis-heading h3 small{font-size:12px}
.flow-values{font-size:15px;font-weight:600}
.flow-track{height:32px}
.flow-period{font-size:12px;flex-basis:75px}
.money-legend>div{font-size:12px}
.money-legend b{font-size:14px;width:68px}
.donut-center strong{font-size:16px}
@media(max-width:760px){
 .analysis-table{min-width:680px}
 .analysis-table td,.analysis-table td:first-child{font-size:14px}
 .analysis-heading h3 small{font-size:11px}
 .money-legend{width:160px;min-width:160px}
}
@media(max-width:380px){
 .analysis-period-card .distribution-chart{gap:10px}
 .money-donut{width:132px;height:132px;flex-basis:132px}
 .donut-center{width:96px;height:96px}
 .money-legend{width:150px;min-width:150px}
 .money-legend>div{gap:5px}
 .money-legend b{font-size:13px;width:62px}
}

/* Larger details and analysis type, shared by replay and live views. */
.wide-layout #details-trades table{min-width:660px}
.wide-layout .details-pane table{font-size:15px}
.wide-layout .details-pane th,.wide-layout #details-trades th{font-size:13px}
.wide-layout .details-pane td,.wide-layout #details-trades td{font-size:15px;padding:10px 7px}
.wide-layout #details-trades .size-badge{font-size:16px}
.wide-layout #details-trades .direction-cell,.trade-time{font-size:15px}
.trade-time small{font-size:12px}
.wide-layout .details-panel .panel-heading h2{font-size:16px}
.wide-layout .details-pane .panel-heading{height:96px}
.wide-layout .details-pane .panel-heading p{font-size:12px;line-height:18px}
.wide-layout .details-pane .analysis-note{font-size:12px;line-height:1.7}
.details-heading .segmented button{font-size:13px!important}
.trade-filter-label,.trade-filter-label select{font-size:12px}
.wide-layout .details-pane .pill{font-size:12px}
.wide-layout #details-trial table{min-width:550px}
.trial-summary span{font-size:12px}
.trial-summary strong{font-size:20px}
.trial-summary div:last-child strong{font-size:15px}
.trial-summary strong small{display:block;font:12px var(--mono);color:#9caec8}
.analysis-table{min-width:940px}
.analysis-table td,.analysis-table td:first-child{font-size:16px;padding:12px 8px}
.analysis-table th{font-size:13px}
.analysis-heading h3,.analysis-panel h3{font-size:15px}
.analysis-heading h3 small{font-size:13px}
.flow-values{font-size:17px}
.flow-track{height:36px}
.flow-period{font-size:13px}
.money-legend{width:185px;min-width:185px}
.money-legend>div{font-size:13px}
.money-legend b{font-size:16px;width:78px}
.donut-center strong{font-size:18px}
.donut-center span,.donut-center small{font-size:11px}
.analysis-clock,#analysis-clock{font-size:12px}
.analysis-table thead tr:first-child th,.analysis-table thead th{font-size:13px}
.analysis-panel>.panel-heading h2{font-size:16px}
.analysis-panel>.panel-heading p,.analysis-controls label,.analysis-controls input{font-size:12px}
.analysis-controls>span,.analysis-window-controls>span{font-size:12px}
.analysis-window-controls .segmented button{font-size:12px}
.analysis-window-controls small,.analysis-panel .analysis-note{font-size:11px}
.flow-section h3 small{font-size:12px}
@media(max-width:760px){
 .analysis-table{min-width:940px}
 .analysis-table td,.analysis-table td:first-child{font-size:16px}
 .analysis-heading h3 small{font-size:12px}
 .analysis-period-card .distribution-chart{gap:10px}
 .money-donut{width:146px;height:146px;flex-basis:146px}
 .donut-center{width:106px;height:106px}
 .money-legend{width:165px;min-width:165px}
 .trial-summary strong{font-size:18px}
 .trial-summary div:last-child strong{font-size:14px}
}
@media(max-width:380px){
 .money-donut{width:132px;height:132px;flex-basis:132px}
 .donut-center{width:96px;height:96px}
 .money-legend{width:142px;min-width:142px}
 .money-legend b{font-size:16px;width:70px}
 .money-legend>div{gap:5px}
}