@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
/* Stable quote cells flash only when their market values change. */
@keyframes quote-flash{0%,25%{background:var(--flash-color,#dae7f3);box-shadow:inset 0 0 0 1px #ffffff70}100%{background:transparent;box-shadow:none}}
.quote-flash{animation:quote-flash .45s ease-out}.quote-flash[data-flash=buy]{--flash-color:#ffccd3}.quote-flash[data-flash=sell]{--flash-color:#bcebdc}.book-row span{border-radius:2px;min-height:24px;display:flex;align-items:center;justify-content:center}.book-row .depth{transition:background-size .1s}#price{border-radius:4px;padding:0 4px;font-family:Consolas,monospace}
@keyframes trade-arrive{from{background:#f3e6a8;opacity:.55;transform:translateY(-5px)}to{background:transparent;opacity:1;transform:translateY(0)}}
.new-trade{animation:trade-arrive .5s ease-out}.tape-scroll{scrollbar-gutter:stable}.book-row,.trades table{font-family:Consolas,'Noto Sans TC',monospace}
@media(prefers-reduced-motion:reduce){.quote-flash,.new-trade{animation:none}}
.trade-time{padding:0;border:0;background:transparent;color:#426f5b;font-size:12px;text-decoration:underline;text-underline-offset:3px}.controls{flex-wrap:wrap}
:root{font-family:Inter,'Noto Sans TC',sans-serif;color:#223632;background:#f3f6f3;font-synthesis:none;--green:#245b49;--muted:#7a8982;--red:#c86e5b;--down:#388573}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button:disabled{cursor:default;opacity:.5}aside{position:fixed;width:220px;height:100vh;background:#e9efea;border-right:1px solid #dce5dd;padding:38px 23px;display:flex;flex-direction:column}.brand{font-size:26px;font-weight:700;letter-spacing:-1.2px;text-decoration:none;color:#223632}.brand span{color:#568775}.aside-label{font-size:11px;color:var(--muted);margin-top:9px;letter-spacing:2px}nav{margin-top:52px;display:grid;gap:14px}nav a,nav button{border:0;background:transparent;text-decoration:none;color:#65786d;padding:14px 12px;text-align:left;font-size:13px;border-radius:8px}nav .active{background:#d8e5db;color:var(--green);font-weight:600}small{font-size:11px;font-weight:400;color:var(--muted)}nav small{display:block;padding-left:23px;margin-top:7px}.aside-bottom{margin-top:auto;font-size:12px;line-height:2}.dot{display:inline-block;width:6px;height:6px;background:#5c9473;border-radius:50%;margin-right:7px}main{margin-left:220px;padding:38px 44px;max-width:1600px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:10px;color:#60836d;letter-spacing:2px;font-weight:600}h1{font-size:27px;letter-spacing:-.8px;margin:10px 0}header p{font-size:13px;color:var(--muted);margin:0}.badge{background:#e8eee0;color:#75825d;border:1px solid #dae3ce;padding:9px 12px;font-size:10px;border-radius:5px;letter-spacing:1px}.toolbar{display:flex;gap:24px;align-items:center;background:white;border:1px solid #e0e7df;padding:18px 22px;border-radius:10px}label{font-size:10px;color:var(--muted);display:grid;gap:6px}input[type=date],select{border:1px solid #dae3db;border-radius:5px;background:#fff;padding:8px 10px;color:#344b40;font-size:12px}.session{margin-left:auto;font-size:12px}.session small{display:block;padding-left:14px;margin-top:6px}button{border-radius:5px;padding:10px 15px;font-size:12px}.outline{background:white;border:1px solid #dae3db;color:#4f695c}.primary{background:var(--green);border:1px solid var(--green);color:white;min-width:128px}.quotes{display:flex;justify-content:space-between;align-items:center;margin:28px 0 22px}.quotes>div>span:first-child{display:block;font-size:14px;font-weight:600}.quotes small{margin-left:8px}.quotes strong{font-size:34px;letter-spacing:-1px;display:inline-block;margin:7px 16px 0 0;font-variant-numeric:tabular-nums}.up{color:var(--red)}.down{color:var(--down)}#change{font-size:12px}dl{display:flex;gap:38px;margin:0}dt{font-size:10px;color:var(--muted);margin-bottom:9px}dd{margin:0;font-size:15px;font-variant-numeric:tabular-nums}.grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px}.panel{background:white;border:1px solid #e0e7df;border-radius:10px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #edf1eb}h2{font-size:13px;margin:0;font-weight:600}h2 span{font-size:10px;color:var(--muted);font-weight:400;margin-left:10px}.panel-head>span{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.chart-wrap{height:290px;padding:0 12px}canvas{width:100%;height:100%;display:block}.chart-foot{display:flex;justify-content:space-between;padding:12px 22px;font-size:9px;color:var(--muted)}.book-labels,.book-row{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;gap:4px}.book-labels{font-size:9px;color:var(--muted);padding:16px 15px 10px}.book-row{font-size:12px;padding:11px 15px;font-variant-numeric:tabular-nums}.book-row:nth-child(odd){background:#f8faf7}.book-row span:nth-child(2){color:var(--down)}.book-row span:nth-child(3){color:var(--red)}.balance{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:19px 20px 9px}.balance strong{color:var(--green)}.balance-bar{margin:0 20px;height:5px;background:#e8c7bc;border-radius:5px;overflow:hidden}.balance-bar i{display:block;background:#78a38d;width:50%;height:100%}.hint{text-align:center;font-size:9px;color:var(--muted);margin:15px 0}.player{margin-top:20px;padding:21px 24px}.player-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.player h2{margin-top:6px}.controls{display:flex;gap:8px;align-items:center}input[type=range]{width:100%;accent-color:var(--green);cursor:pointer}.timeline{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:6px}.trades{margin-top:20px}table{width:100%;border-collapse:collapse;text-align:right;font-size:12px;font-variant-numeric:tabular-nums}th{color:var(--muted);font-weight:400;font-size:10px;background:#fafbf8}th,td{padding:11px 24px;border-bottom:1px solid #f0f3ed}th:first-child,td:first-child{text-align:left}footer{font-size:12px;color:#789084;margin-top:25px;display:flex;justify-content:space-between}footer span{font-size:10px;color:var(--muted)}button:hover:not(:disabled){filter:brightness(.96)}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #77a38b;outline-offset:3px}@media(max-width:1100px){aside{width:180px}main{margin-left:180px;padding:28px 24px}.grid{grid-template-columns:minmax(0,1fr) 270px}dl{gap:18px}.session{display:none}}@media(max-width:800px){aside{position:static;width:100%;height:auto;padding:18px 20px;flex-direction:row;align-items:center;justify-content:space-between}nav,.aside-label,.aside-bottom{display:none}main{margin:0;padding:24px 16px}h1{font-size:21px}.badge{font-size:8px;padding:7px}.toolbar{gap:12px;flex-wrap:wrap;padding:14px}.quotes{align-items:flex-start;gap:12px;flex-direction:column}dl{width:100%;justify-content:space-between}.grid{grid-template-columns:1fr}.player-top{gap:18px;align-items:flex-start;flex-direction:column}.controls{flex-wrap:wrap}.player{padding:18px}.chart-wrap{height:260px}footer span{display:none}th,td{padding:10px 15px}}

/* Compact workspace: chart left; five-level book and tape right. */
aside{width:175px;padding:28px 18px}.brand{font-size:24px}main{margin-left:175px;padding:22px 28px}header{margin-bottom:16px}h1{font-size:20px;margin:5px 0 0}.toolbar{padding:12px 18px}.quotes{margin:18px 0}.quotes strong{font-size:29px}.grid{grid-template-columns:minmax(0,1fr) 365px;gap:16px}.market-side{display:grid;gap:14px}.chart-wrap{height:510px}.panel-head{padding:12px 16px}.player{margin-top:0;padding:14px 18px}.player-top{margin-bottom:10px;gap:15px;flex-wrap:wrap}.simulation-clock{display:grid;gap:5px}.simulation-clock strong{font-size:20px;font-variant-numeric:tabular-nums;font-family:Consolas,monospace;letter-spacing:1px}.primary{min-width:92px}.control-divider{height:25px;border-left:1px solid #dde6dd;margin:0 4px}.speed-label{display:flex;align-items:center;gap:8px}.player-bottom{margin-top:9px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted)}.player-bottom>div{display:flex;gap:7px}.player-bottom input{border:1px solid #dae3db;border-radius:4px;padding:4px;font-size:12px;color:#344b40}.player-bottom button{padding:5px 9px}.event-strip{display:flex;gap:22px;align-items:center;font-size:10px;color:#7a8982;padding:12px 3px;flex-wrap:wrap}.event-strip strong,.event-strip b{font-weight:500;color:#344b40;font-variant-numeric:tabular-nums}.event-strip #event-type{background:#e2ede5;color:#35614a;padding:4px 8px;border-radius:4px}.book-labels{padding:12px 12px 6px}.book-row{padding:8px 12px}.balance{padding:12px 16px 7px}.balance-bar{margin:0 16px 14px}.depth{padding:3px;border-radius:2px}.buy-depth{background:linear-gradient(to left,#5c9a7726 var(--depth),transparent var(--depth))}.sell-depth{background:linear-gradient(to right,#ca796526 var(--depth),transparent var(--depth))}.trades{margin-top:0}.tape-scroll{height:242px;overflow:auto}th,td{padding:8px 12px}.trade-time{font-size:11px;font-family:Consolas,monospace}th{position:sticky;top:0;z-index:1}.selected-trade{background:#eef5ec}.empty{text-align:center!important;color:var(--muted);padding:24px}.chart-foot{font-size:10px}footer{margin-top:16px}
@media(max-width:1200px){.player-top{align-items:flex-start}.controls{gap:5px}.controls button{padding:9px}.grid{grid-template-columns:minmax(0,1fr) 330px}main{padding:20px}}
@media(max-width:900px){aside{width:140px}.brand{font-size:21px}.aside-label{letter-spacing:0}main{margin-left:140px}.grid{grid-template-columns:1fr}.chart-wrap{height:350px}.market-side{grid-template-columns:1fr 1fr}.tape-scroll{height:242px}.player-bottom{gap:12px;flex-wrap:wrap}}
@media(max-width:800px){aside{width:100%;padding:15px 18px}main{margin-left:0;padding:16px}.market-side{grid-template-columns:1fr}.chart-wrap{height:300px}.player{padding:12px}.controls{gap:6px}.speed-label{display:flex}.event-strip{gap:10px}.simulation-clock strong{font-size:19px}.quotes strong{font-size:28px}.toolbar{padding:12px}.player-top{gap:12px}.primary{min-width:84px}}

.book-row span:nth-child(2){color:var(--red)}.book-row span:nth-child(3){color:var(--down)}.buy-depth{background:linear-gradient(to left,#ca796526 var(--depth),transparent var(--depth))}.sell-depth{background:linear-gradient(to right,#5c9a7726 var(--depth),transparent var(--depth))}

.chart-wrap{position:relative}.loading{position:absolute;inset:0;background:#fffffff2;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:13px;color:#537262}.loading[hidden]{display:none}.grid{grid-template-columns:minmax(0,1fr) 390px}.simulation-clock strong{font-size:18px}dl{gap:22px}@media(max-width:900px){.grid{grid-template-columns:1fr}dl{gap:12px;flex-wrap:wrap}}

/* Replay layout refinements */
:root{--red:#e3344a;--down:#119866}.toolbar{margin-top:0}.sidebar-toggle{font-size:18px;padding:7px 11px}.toolbar .badge{white-space:nowrap}.chart-column{min-width:0;display:grid;gap:14px;align-content:start}.chart-wrap{height:370px}.chart-column .player{margin:0;padding:14px}.chart-column .player-top{align-items:flex-start}.chart-column .controls{justify-content:flex-start}.chart-column .simulation-clock{margin-bottom:5px}.event-strip{padding:9px 3px}.quotes dl{gap:17px;flex-wrap:wrap}.quotes dt{font-size:10px}.quotes dd{font-size:14px}.price-label{display:inline-block!important;font-size:10px!important;color:var(--muted);margin-right:7px;font-weight:400!important}.trial-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:#82622d;background:#f7f0df;border:1px solid #eaddbf;border-radius:6px;padding:9px 13px;font-size:11px;margin-bottom:8px}.trial-strip strong{font-variant-numeric:tabular-nums}.trial-key{font-weight:600}.trial-strip small{font-size:9px;color:#9a8157}.trade-buy td,.trade-buy .trade-time{color:var(--red)}.trade-sell td,.trade-sell .trade-time{color:var(--down)}.legend-trade,.legend-trial{display:inline-block;height:3px;width:15px;vertical-align:middle}.legend-trade{background:#347d65}.legend-trial{border-top:2px dashed #c78b28}.profile-legend{display:flex;gap:12px;font-size:10px;color:#89958e;padding:10px 16px}.profile-legend #profile-total{margin-left:auto}.profile-body{max-height:220px;overflow:auto;padding:0 16px 12px}.profile-row{display:grid;grid-template-columns:80px minmax(0,1fr) 65px;gap:12px;align-items:center;font-size:11px;font-variant-numeric:tabular-nums;margin:7px 0}.profile-row strong{text-align:right;font-weight:500}.profile-track{height:15px;background:#f2f5f0;border-radius:2px;overflow:hidden}.profile-bar{height:100%;display:flex}.profile-bar i{display:block;height:100%}.profile-buy{background:var(--red)}.profile-sell{background:var(--down)}.profile-unknown{background:#9da9a1}.sidebar-collapsed aside{transform:translateX(-100%);visibility:hidden;pointer-events:none}.sidebar-collapsed main{margin-left:0}aside{transition:transform .15s,visibility .15s}main{transition:margin-left .15s}.market-side{align-content:start}.tape-scroll{height:360px}.chart-column .player-bottom{gap:8px;flex-wrap:wrap}.chart-column .player-bottom>span{font-size:9px}.controls #skip-seconds{padding:8px}.simulation-clock strong{font-size:19px}
@media(max-width:1000px){.quotes{align-items:flex-start}.quotes dl{gap:12px}.grid{grid-template-columns:minmax(0,1fr) 365px}.chart-column .player-top{flex-direction:column}.chart-foot{gap:8px;flex-wrap:wrap}.toolbar{gap:12px}}
@media(max-width:900px){.grid{grid-template-columns:1fr}.chart-wrap{height:340px}.market-side{grid-template-columns:1fr 1fr}.tape-scroll{height:270px}}
@media(max-width:800px){.sidebar-collapsed aside{display:none}aside{transform:none}.toolbar .badge{font-size:9px}.quotes dl{width:100%}.trial-strip{gap:9px}.market-side{grid-template-columns:1fr}.chart-wrap{height:290px}.chart-column .player-top{width:100%}.chart-column .controls{gap:6px}.profile-row{grid-template-columns:65px 1fr 50px}.simulation-clock strong{font-size:18px}}
/* Profile at the left of the price chart; seven-column quote tape. */
.grid{grid-template-columns:160px minmax(0,1fr) 390px}.volume-profile{align-self:start}.volume-profile .panel-head{flex-wrap:wrap;gap:6px}.volume-profile .profile-legend{flex-wrap:wrap;gap:5px;padding:10px}.volume-profile .profile-body{max-height:470px;padding:0 10px 12px}.volume-profile .profile-row{grid-template-columns:58px 1fr;gap:5px;margin:11px 0}.volume-profile .profile-row strong{grid-column:2;font-size:10px}.volume-profile .profile-track{height:12px}.chart-options{display:flex;gap:8px;align-items:end}.chart-options label{gap:3px}.chart-options select{padding:6px;font-size:11px}.trades .tape-scroll{background:#101719;color:#fff;overflow:auto}.trades table{min-width:475px;font-size:12px;white-space:nowrap}.trades th{background:#1b2327;color:#a8b4bc;font-size:12px}.trades th,.trades td{padding:6px 7px;border-bottom:1px solid #233034}.trades .trade-time{color:#fff;text-decoration:none;font-size:12px}.trades td.up{color:#ff404f}.trades td.down{color:#42ea70}.trades td.flat{color:#fff}.trades td.tape-total{color:#ffd900}.trades .selected-trade{background:#263337}.trades .new-trade{--flash-color:#3b4840}.trades .empty{color:#b0bec3}
@media(min-width:1500px){.grid{grid-template-columns:185px minmax(0,1fr) 490px}}
@media(max-width:1200px){.grid{grid-template-columns:140px minmax(0,1fr) 340px}.chart-options{gap:4px}.chart-panel .panel-head{flex-wrap:wrap;gap:6px}}
@media(max-width:1000px){.grid{grid-template-columns:140px minmax(0,1fr)}.market-side{grid-column:1/-1;grid-template-columns:1fr 1fr}.quotes{flex-wrap:wrap;gap:10px}}
@media(max-width:650px){.grid{grid-template-columns:110px minmax(0,1fr);gap:8px}.market-side{grid-template-columns:1fr}.chart-options{flex-wrap:wrap}.volume-profile .profile-row{grid-template-columns:1fr}.volume-profile .profile-row strong{grid-column:1}.volume-profile .profile-legend{font-size:9px}.chart-column .controls{gap:4px}.chart-column .controls button{font-size:10px;padding:7px}}
.trades table{min-width:365px;font-size:11px}.trades th,.trades td{padding:6px 4px}.trades .trade-time,.trades th{font-size:11px}.skip-controls{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.symbol-search{position:relative;min-width:190px}.symbol-search label{margin-bottom:6px}.symbol-search input{width:220px;max-width:100%;border:1px solid #dae3db;border-radius:5px;padding:8px 10px;background:#fff;color:#344b40;font-size:12px}#symbol-results{position:absolute;left:0;top:100%;width:max(100%,240px);max-height:280px;overflow:auto;z-index:20;background:#fff;border:1px solid #d5e0d8;border-radius:6px;box-shadow:0 8px 24px #193b2526;margin-top:4px}#symbol-results [role=option]{padding:10px 12px;font-size:12px;color:#344b40;cursor:pointer}#symbol-results [role=option]:hover,#symbol-results [aria-selected=true]{background:#e1eee5;color:#245b49}.search-empty{padding:13px;color:#7a8982;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Volume-only pulse, clipped to each depth bar. */
.book-row .depth{position:relative;isolation:isolate;background:none}.book-row .depth::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;width:var(--depth);background:var(--depth-color);opacity:.18;border-radius:2px}.buy-depth{--depth-color:#e3344a}.sell-depth{--depth-color:#119866}.buy-depth::before{right:0}.sell-depth::before{left:0}@keyframes depth-pulse{0%,20%{opacity:.75}100%{opacity:.18}}.depth-flash::before{animation:depth-pulse .4s ease-out}
:root[data-theme=light] .trades .tape-scroll{background:#fff;color:#223632}:root[data-theme=light] .trades th{background:#f1f5f2;color:#6e8078}:root[data-theme=light] .trades td{border-color:#edf1eb}:root[data-theme=light] .trades .trade-time,:root[data-theme=light] .trades td.flat{color:#344b40}:root[data-theme=light] .trades td.up{color:#e3344a}:root[data-theme=light] .trades td.down{color:#119866}:root[data-theme=light] .trades td.tape-total{color:#947200}:root[data-theme=light] .trades .selected-trade{background:#e9f1ec}
:root[data-theme=dark]{color-scheme:dark;color:#d8e3e9;background:#0f1519;--muted:#97aab4;--green:#337e64;--red:#ff5262;--down:#43d898}:root[data-theme=dark] body{background:#0f1519}:root[data-theme=dark] aside{background:#151e23;border-color:#2a3941}:root[data-theme=dark] .brand{color:#e2edf2}:root[data-theme=dark] .brand span{color:#69c6a1}:root[data-theme=dark] .panel,:root[data-theme=dark] .toolbar{background:#192329;border-color:#304149}:root[data-theme=dark] .panel-head{border-color:#304149}:root[data-theme=dark] input,:root[data-theme=dark] select,:root[data-theme=dark] .outline{background:#202d34;border-color:#40535e;color:#d8e3e9}:root[data-theme=dark] .badge{background:#203c30;color:#91d6ac;border-color:#365944}:root[data-theme=dark] .book-row:nth-child(odd){background:#1e2a31}:root[data-theme=dark] .profile-track{background:#2c3b44}:root[data-theme=dark] .trial-strip{background:#302b1e;color:#e2c483;border-color:#5e4e2e}:root[data-theme=dark] .event-strip strong,:root[data-theme=dark] .event-strip b{color:#c6d7df}:root[data-theme=dark] .event-strip #event-type,:root[data-theme=dark] nav .active{background:#264436;color:#9adcb7}:root[data-theme=dark] .balance strong{color:#9adcb7}:root[data-theme=dark] #symbol-results{background:#202d34;border-color:#40535e}:root[data-theme=dark] #symbol-results [role=option]{color:#d8e3e9}:root[data-theme=dark] #symbol-results [role=option]:hover,:root[data-theme=dark] #symbol-results [aria-selected=true]{background:#2f4a3c;color:#b4eed0}:root[data-theme=dark] .loading{background:#192329f5;color:#c6d7df}
@media(prefers-reduced-motion:reduce){.depth-flash::before{animation:none}}
.toolbar{flex-wrap:wrap}.toolbar #symbol-select{max-width:190px;min-width:150px}.clock-heading{display:flex;gap:12px;align-items:center}.clock-heading button{padding:4px 8px;font-size:10px;white-space:nowrap}
.preopen-switch{position:relative;gap:8px;cursor:pointer;align-items:start}.preopen-switch input{position:absolute;width:38px;height:22px;bottom:0;left:0;opacity:0;cursor:pointer;z-index:1}.switch-track{display:block;width:38px;height:22px;border-radius:12px;background:#a5b0aa;transition:background .15s}.switch-track::after{content:'';display:block;width:16px;height:16px;border-radius:50%;background:white;position:relative;top:3px;left:3px;transition:transform .15s}.preopen-switch input:checked+.switch-track{background:#337e64}.preopen-switch input:checked+.switch-track::after{transform:translateX(16px)}.preopen-switch input:focus-visible+.switch-track{outline:2px solid #77a38b;outline-offset:3px}
/* Price colors always compare with the reference price. */
.book-row .bid-price.up,.book-row .ask-price.up{color:var(--red)}.book-row .bid-price.down,.book-row .ask-price.down{color:var(--down)}.flat,.book-row .bid-price.flat,.book-row .ask-price.flat,.trades td.flat{color:#fff!important}:root[data-theme=light] .flat{background:#34444c;border-radius:3px}:root[data-theme=light] .trades td.flat{background:#34444c;color:#fff}.book-row .depth{gap:3px;flex-wrap:wrap}.book-row .depth-value{display:inline;min-height:0}.depth-delta{font-size:9px;white-space:nowrap;margin:0}.depth-delta.up{color:var(--red)}.depth-delta.down{color:var(--down)}
/* Price direction changes text only, never the cell background. */
:root[data-theme=light] .flat,:root[data-theme=light] .trades td.flat{background:transparent}.flat{border-radius:0}#price.quote-flash{animation:none;background:transparent;box-shadow:none}
/* Neutral text follows the selected background theme. */
:root[data-theme=light] .flat,:root[data-theme=light] .book-row .bid-price.flat,:root[data-theme=light] .book-row .ask-price.flat,:root[data-theme=light] .trades td.flat{color:#111!important;background:transparent}
:root[data-theme=dark] .flat,:root[data-theme=dark] .book-row .bid-price.flat,:root[data-theme=dark] .book-row .ask-price.flat,:root[data-theme=dark] .trades td.flat{color:#fff!important;background:transparent}
.tape-scroll{max-height:360px;overflow-y:auto;overscroll-behavior:contain}.trades thead th{position:sticky;top:0;z-index:2}
.trades .new-trade{animation:none}
.range-summary{font-size:10px;color:var(--muted);padding:6px 16px;min-height:24px}.volume-profile .profile-body{position:relative;max-height:none;overflow:hidden;padding:0 6px}.volume-profile .profile-row{position:absolute;left:6px;right:6px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px;margin:0;transform:translateY(-50%);font-size:9px;height:10px}.volume-profile .profile-track{height:6px}.volume-profile .profile-row span{font-size:9px;line-height:10px}.volume-profile .profile-row strong{display:none}
.volume-profile .profile-track{height:var(--profile-height,3px)}
/* Keep replay controls and their labels on a single line where space allows. */
.chart-column .player-top{display:block}.simulation-clock{margin-bottom:10px!important}.clock-heading{flex-wrap:nowrap;white-space:nowrap}.simulation-clock strong{white-space:nowrap}.chart-column .controls{display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto;padding-bottom:3px}.chart-column .controls button{white-space:nowrap;padding:8px 9px;flex-shrink:0}.chart-column .controls .primary{min-width:76px}.control-divider{flex-shrink:0;margin:0 2px}.skip-controls{gap:5px;flex-shrink:0}.speed-label{white-space:nowrap;flex-shrink:0;gap:5px}.speed-label select,.controls #skip-seconds{padding:6px}.player-bottom>span{white-space:nowrap}.player-bottom>div{flex-wrap:nowrap;white-space:nowrap}.chart-column .player-bottom{gap:8px}.player-bottom input{min-width:0}
@media(max-width:650px){.chart-column .controls{flex-wrap:wrap;overflow-x:visible}.chart-column .controls button{padding:7px}.chart-column .player-bottom{flex-wrap:wrap}.player-bottom>span{font-size:8px}}
/* One continuous timeline below the complete chart workspace. */
.grid{grid-template-columns:210px minmax(0,1fr) 390px;align-items:start}.chart-column{display:contents}.volume-profile{grid-column:1;grid-row:1;align-self:stretch}.chart-panel{grid-column:2;grid-row:1}.player{grid-column:1/3;grid-row:2}.market-side{grid-column:3;grid-row:1/3}.volume-profile .profile-body{padding:0 10px}.volume-profile .profile-row{left:10px;right:10px;grid-template-columns:56px minmax(0,1fr)}.volume-profile .profile-track{background:transparent;display:flex;justify-content:flex-end}.volume-profile .profile-bar{flex-shrink:0;border-radius:0}.volume-profile .profile-legend{padding:10px;gap:7px}.chart-wrap{height:420px}.chart-column .player{padding:16px 18px}.timeline span{white-space:nowrap}.profile-body::after{content:'';position:absolute;right:10px;top:0;bottom:0;border-right:1px solid #84988b25;pointer-events:none}
@media(min-width:1500px){.grid{grid-template-columns:240px minmax(0,1fr) 450px}}
@media(max-width:1200px){.grid{grid-template-columns:180px minmax(0,1fr) 340px}}
@media(max-width:1000px){.grid{grid-template-columns:180px minmax(0,1fr)}.market-side{grid-column:1/-1;grid-row:3;grid-template-columns:1fr 1fr}.player{grid-column:1/-1}.chart-wrap{height:380px}}
@media(max-width:650px){.grid{grid-template-columns:120px minmax(0,1fr)}.market-side{grid-template-columns:1fr}.volume-profile .profile-row{grid-template-columns:40px minmax(0,1fr)}.chart-wrap{height:330px}}
.chart-tooltip{position:absolute;z-index:5;pointer-events:none;padding:9px 12px;border:1px solid #b9cac0;border-radius:5px;background:#fffffff2;color:#243930;box-shadow:0 3px 12px #0002;font-size:11px;line-height:1.8;white-space:nowrap;font-variant-numeric:tabular-nums}.chart-tooltip[hidden]{display:none}:root[data-theme=dark] .chart-tooltip{background:#202d34f5;color:#e2edf2;border-color:#516773}
/* Keep chart heading controls on one horizontal row. */
.chart-panel .panel-head{flex-wrap:nowrap;min-height:44px;gap:8px}.chart-panel .panel-head h2{white-space:nowrap;flex-shrink:0}.chart-options{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;white-space:nowrap}.chart-options label{display:flex;flex-direction:row;align-items:center;gap:7px;white-space:nowrap}.chart-options select{flex-shrink:0}.chart-panel .panel-head{overflow-x:auto}
.volume-profile>.panel-head,.chart-panel>.panel-head,.book>.panel-head{height:52px;min-height:52px;max-height:52px;box-sizing:border-box;align-items:center;padding-top:8px;padding-bottom:8px}.volume-profile>.panel-head{flex-wrap:nowrap}.volume-profile>.panel-head>span{white-space:nowrap;font-size:9px}.chart-panel .chart-options{align-items:center}.legend-trade{background:linear-gradient(to right,#e3344a 50%,#119866 50%)}
/* Stronger price colors plus shape cues independent of hue. */
:root{--red:#ef163a;--down:#00864b}:root[data-theme=dark]{--red:#ff526d;--down:#30f0a0}.trades td.up,:root[data-theme=light] .trades td.up{color:var(--red)}.trades td.down,:root[data-theme=light] .trades td.down{color:var(--down)}.bid-price.up::before,.ask-price.up::before{content:'▲';font-size:7px;margin-right:2px}.bid-price.down::before,.ask-price.down::before{content:'▼';font-size:7px;margin-right:2px}#price.up::before{content:'▲';font-size:14px;margin-right:4px}#price.down::before{content:'▼';font-size:14px;margin-right:4px}.profile-buy{background:var(--red)}.profile-sell{background:repeating-linear-gradient(135deg,var(--down) 0 3px,transparent 3px 4px);background-color:#00864b66}.buy-depth{--depth-color:var(--red)}.sell-depth{--depth-color:var(--down)}
.chart-tooltip{font-family:Consolas,'Noto Sans TC',monospace;min-width:225px;line-height:1.9}.quote-info-heading{display:flex;align-items:center;gap:6px;font-family:'Noto Sans TC',sans-serif;font-weight:600;border-bottom:1px solid #81978a45;margin-bottom:5px;padding-bottom:5px}.quote-info-heading small{margin-left:auto;font-weight:400;font-size:9px;color:var(--muted)}.quote-live-dot{width:6px;height:6px;border-radius:50%;background:#8e9b95}.quote-live-dot.running{background:#18ba70;box-shadow:0 0 5px #18ba7090}
/* Align the right tape with the full chart and playback workspace. */
@media(min-width:1001px){.market-side{align-self:stretch;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}.market-side .trades{display:flex;flex-direction:column;min-height:0}.market-side .trades>.panel-head{flex-shrink:0}.market-side .trades .tape-scroll{height:0;min-height:240px;max-height:none;flex:1;overflow-y:auto}}
/* Tape sits to the right of the order book, aligned at the top. */
@media(min-width:1001px){.grid{grid-template-columns:180px minmax(300px,1fr) minmax(620px,1.35fr)}.market-side{grid-column:3;grid-row:1/3;display:grid;grid-template-columns:minmax(230px,.85fr) minmax(370px,1.15fr);grid-template-rows:minmax(0,1fr);gap:12px;align-items:stretch}.market-side>.book{align-self:start}.market-side>.trades{margin-top:0;align-self:stretch}.market-side .trades .tape-scroll{min-height:320px}.market-side .book>.panel-head,.market-side .trades>.panel-head{height:52px;min-height:52px}.grid{overflow-x:auto}.market-side .trades table{min-width:365px}}
@media(min-width:1500px){.grid{grid-template-columns:210px minmax(400px,1fr) minmax(680px,1.3fr)}}
@media(max-width:1000px) and (min-width:701px){.market-side{grid-template-columns:minmax(230px,.8fr) minmax(365px,1.2fr);align-items:start}.market-side .trades{margin-top:0}}
/* Visible, draggable scrollbars for long trade details. */
.trades .tape-scroll{overflow:scroll;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#81978b #edf2ee}.trades .tape-scroll::-webkit-scrollbar{width:12px;height:12px}.trades .tape-scroll::-webkit-scrollbar-thumb{background:#81978b;border:2px solid #edf2ee;border-radius:8px}.trades .tape-scroll::-webkit-scrollbar-track,.trades .tape-scroll::-webkit-scrollbar-corner{background:#edf2ee}:root[data-theme=dark] .trades .tape-scroll{scrollbar-color:#718d9a #162127}:root[data-theme=dark] .trades .tape-scroll::-webkit-scrollbar-thumb{background:#718d9a;border-color:#162127}:root[data-theme=dark] .trades .tape-scroll::-webkit-scrollbar-track,:root[data-theme=dark] .trades .tape-scroll::-webkit-scrollbar-corner{background:#162127}
.book-labels{grid-template-columns:1fr 85px 1fr}.ladder-row{display:grid;grid-template-columns:minmax(0,1fr) 85px minmax(0,1fr);gap:3px;padding:4px 8px;min-height:34px;font-family:Consolas,monospace;font-size:12px;font-variant-numeric:tabular-nums;border-bottom:1px solid #81978b1a}.ladder-row .depth{display:flex;justify-content:center;align-items:center;gap:3px;position:relative;isolation:isolate;background:none}.ladder-row .depth::before{content:'';position:absolute;top:0;bottom:0;z-index:-1;width:var(--depth);background:var(--depth-color);opacity:.18}.ladder-price{display:flex;align-items:center;justify-content:center;background:#81978b12;border-left:1px solid #81978b25;border-right:1px solid #81978b25}.last-price-row .ladder-price{outline:1px solid currentColor;outline-offset:-1px;font-weight:bold}.last-price-row .ladder-price::before{content:'›';margin-right:4px}.ladder-row .depth-value{white-space:nowrap}.ladder-row .depth-delta{font-size:9px}.ladder-row .depth-flash::before{animation:depth-pulse .4s ease-out}
/* Bound the tape itself: long tables must scroll rather than grow the grid. */
.market-side>.trades{height:540px;max-height:540px;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-self:start!important}.market-side .trades>.panel-head{flex:0 0 52px}.market-side .trades .tape-scroll{flex:1 1 0!important;height:0!important;min-height:0!important;max-height:none;overflow:scroll!important}.market-side{min-height:0;align-content:start}.trades .tape-scroll table{height:auto}
@media(max-width:700px){.market-side>.trades{height:420px;max-height:420px}}
/* Trade rows retain the panel background, including the selected event. */
.trades .selected-trade,:root[data-theme=light] .trades .selected-trade,:root[data-theme=dark] .trades .selected-trade{background:transparent}
/* Playback and timeline span the entire market workspace. */
@media(min-width:1001px){.grid>.chart-column>.player{grid-column:1/-1;grid-row:2}.market-side{grid-row:1;align-self:start}}
@media(max-width:1000px){.grid>.chart-column>.player{grid-column:1/-1}}
/* Compact replay header: clock, controls and time jump in one row. */
.chart-column .player .player-top{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:12px;margin-bottom:10px}.player .simulation-clock{display:flex;align-items:center;gap:10px;margin-bottom:0!important;flex-shrink:0}.player .clock-heading{gap:6px}.player .simulation-clock strong{font-size:17px;letter-spacing:0}.player .controls{flex:1;align-items:center;flex-wrap:nowrap;overflow-x:auto}.jump-controls{display:flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0}.jump-controls input{border:1px solid #dae3db;border-radius:4px;padding:5px;font-size:11px;max-width:145px}.jump-controls button{padding:6px 9px!important}.shortcut-hint{cursor:help;color:var(--muted);font-size:16px;margin-left:4px}.clock-heading .eyebrow{white-space:nowrap}.chart-column .player{padding-top:12px;padding-bottom:12px}
@media(max-width:1200px){.player .clock-heading .eyebrow{display:none}.player .simulation-clock{gap:6px}.chart-column .player .player-top{gap:8px}.player .controls{gap:4px}.player .simulation-clock strong{font-size:15px}}
@media(max-width:700px){.chart-column .player .player-top{flex-wrap:wrap}.player .controls{flex-basis:100%;flex-wrap:wrap;overflow:visible}.jump-controls{margin-left:0}.player .simulation-clock{flex-wrap:nowrap}}
.ladder-row{height:28px;min-height:28px;padding:3px 8px}.market-book{padding:6px 12px;font-size:11px;font-family:Consolas,monospace;border-top:1px solid #81978b25}
/* Match ladder and tape panel heights; distribute the 15 price rows. */
.market-side>.book{height:540px;min-height:540px;max-height:540px;align-self:start;display:flex;flex-direction:column}.book>.panel-head{flex:0 0 52px}.book>.book-labels{flex-shrink:0}.book>#book{flex:1;min-height:0;display:grid;grid-template-rows:repeat(15,minmax(0,1fr));overflow:hidden}.book .ladder-row{height:auto;min-height:0;align-items:stretch}.book>.balance,.book>.balance-bar,.book>.market-book{flex-shrink:0}.book>.balance{margin-top:auto}
@media(max-width:700px){.market-side>.book{height:420px;min-height:420px;max-height:420px}}
.trial-strip{display:none}
.book-labels,.ladder-row{grid-template-columns:50px minmax(35px,1fr) 66px minmax(35px,1fr) 50px;gap:2px}.order-cell{padding:2px;font-size:10px;border:1px solid #81978b30;border-radius:2px;background:transparent;white-space:nowrap;cursor:crosshair}.order-buy{color:var(--red)}.order-sell{color:var(--down)}.order-buy:hover{background:#ef163a15}.order-sell:hover{background:#00864b15}.order-settings{padding:5px 9px;display:flex;gap:8px;align-items:center;font-size:9px;color:var(--muted)}.order-settings label{display:flex;align-items:center;gap:4px}.order-settings input{width:48px;padding:3px;border:1px solid #81978b50;border-radius:3px;font-size:10px}.order-summary{display:grid;grid-template-columns:50px 1fr 50px;padding:6px 8px;gap:3px;font-size:10px;text-align:center;flex-shrink:0}.order-summary>strong:first-child{color:var(--red)}.order-summary>strong:last-child{color:var(--down)}.order-actions{display:flex;justify-content:space-between;padding:3px 8px;gap:4px;flex-shrink:0}.order-actions button{padding:5px 7px;font-size:10px}.order-settings{flex-shrink:0}
/* Full limit-to-limit ladder with a 15-row viewport. */
.book>#book{display:block;overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:auto}.book .ladder-row{height:26px;min-height:26px}.last-price-row .ladder-price{outline:none;background:#f4df99!important;color:#222!important}.last-price-row .ladder-price::before{content:none}.order-settings{flex-wrap:wrap;gap:5px}.order-settings label input[type=checkbox]{width:auto}.order-settings button{padding:3px 6px;font-size:10px}.order-settings input[type=number]{width:42px}.book>#book::-webkit-scrollbar{width:10px}.book>#book::-webkit-scrollbar-thumb{background:#81978b;border-radius:5px}.book>#book::-webkit-scrollbar-track{background:#81978b20}
.book .ladder-row{height:var(--ladder-row-height,26px);min-height:0}
.book>.panel-head{gap:5px;white-space:nowrap;overflow-x:auto;justify-content:space-between;padding-left:10px;padding-right:10px}.book>.panel-head h2{flex-shrink:0}.book>.panel-head .order-settings{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;padding:0;margin-left:auto;white-space:nowrap}.book>.panel-head .order-settings label{white-space:nowrap;font-size:9px;gap:3px}.book>.panel-head .order-settings input[type=number]{width:36px;padding:2px}.book>.panel-head .order-settings button{padding:3px 5px;white-space:nowrap}.book>.panel-head .order-settings input[type=checkbox]{margin:0}
/* Give the order ladder more width than the neighboring trade tape. */
@media(min-width:1001px){.market-side{grid-template-columns:minmax(310px,1.15fr) minmax(290px,.85fr)}}
@media(max-width:1000px) and (min-width:701px){.market-side{grid-template-columns:minmax(300px,1.1fr) minmax(280px,.9fr)}}
.ladder-row .buy-depth .depth-value{color:var(--red)}.ladder-row .sell-depth .depth-value{color:var(--down)}
/* Compact market workspace, without the diagnostic event strip. */
.event-strip{display:none}.grid{gap:10px}.quotes{margin:14px 0}.ladder-row{padding-left:4px;padding-right:4px}.book-labels,.ladder-row{grid-template-columns:43px minmax(35px,1fr) 58px minmax(35px,1fr) 43px}.order-cell{font-size:9px}.order-summary{grid-template-columns:43px 1fr 43px}.volume-profile .panel-head{padding-left:10px;padding-right:10px}.volume-profile .profile-row{grid-template-columns:45px minmax(0,1fr)}
@media(min-width:1001px){.grid{grid-template-columns:160px minmax(320px,1fr) 650px}.market-side{grid-template-columns:300px minmax(0,1fr);gap:10px}}
@media(min-width:1500px){.grid{grid-template-columns:175px minmax(400px,1fr) 700px}.market-side{grid-template-columns:315px minmax(0,1fr)}}
@media(max-width:1000px) and (min-width:701px){.grid{grid-template-columns:145px minmax(0,1fr)}.market-side{grid-template-columns:290px minmax(0,1fr)}}

/* Show horizontal scrollbars only when the available width actually overflows. */
.grid,.market-side,.chart-panel,.book,.trades{min-width:0}
.trades .tape-scroll,.market-side .trades .tape-scroll{overflow-x:auto!important;overflow-y:scroll!important}
.trades th,.trades td{white-space:nowrap;padding-left:4px;padding-right:4px}
.chart-panel .panel-head,.book>.panel-head,.player .controls{overflow-x:auto}
@media(min-width:1200px){
  .grid{grid-template-columns:160px minmax(320px,1fr) 695px}
  .market-side{grid-template-columns:300px minmax(385px,1fr)}
  .chart-column .player .player-top{flex-wrap:wrap}
  .player .controls{flex-wrap:wrap;overflow-x:visible;min-width:0}
  .jump-controls{flex-shrink:1}
}
@media(min-width:1500px){
  .grid{grid-template-columns:175px minmax(360px,1fr) 710px}
  .market-side{grid-template-columns:315px minmax(385px,1fr)}
}

/* Bold bid/ask quantities; only changed quantity bars animate. */
.ladder-row .buy-depth .depth-value{color:var(--red);font-weight:800}.ladder-row .sell-depth .depth-value{color:var(--down);font-weight:800}.ladder-row .depth-delta{font-weight:700}.book-labels>span:nth-child(2){color:var(--red);font-weight:700}.book-labels>span:nth-child(4){color:var(--down);font-weight:700}

/* Ladder prices follow the bid/ask side, independent of yesterday's close. */
.book .ladder-price.bid-price{color:var(--red);font-weight:800}.book .ladder-price.ask-price{color:var(--down);font-weight:800}.book .ladder-price.bid-price::before,.book .ladder-price.ask-price::before{content:none}
/* Two compact workspace rows: replay controls, then symbol and market statistics. */
.toolbar{gap:10px;padding:10px 12px;flex-wrap:wrap}
.toolbar .simulation-clock{display:flex;align-items:center;gap:7px;margin-bottom:0!important;flex-shrink:0}
.toolbar .clock-heading{display:flex;gap:5px;align-items:center}
.toolbar .clock-heading .eyebrow{letter-spacing:0;font-size:10px}
.toolbar .simulation-clock strong{font-size:15px;letter-spacing:0}
.toolbar .controls{display:flex;align-items:center;gap:4px;flex:1 1 auto;flex-wrap:wrap;min-width:0}
.toolbar .controls button{padding:6px 7px;white-space:nowrap}
.toolbar .controls .primary{min-width:65px}
.toolbar .controls select{padding:5px}
.toolbar .jump-controls{margin-left:0}
.toolbar .session{display:none}
.toolbar .badge{display:none}
.toolbar label{gap:3px}
.toolbar input[type=date],.toolbar>label>select{padding:6px 7px}
.toolbar #reset{padding:6px 7px;white-space:nowrap}
.top-timeline{padding:4px 12px 0}
.top-timeline input[type=range]{margin:0;display:block;height:14px}
.top-timeline .timeline{margin-top:0;font-size:8px}
.quotes{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:10px 0}
.quotes .symbol-search{width:180px;flex-shrink:0}
.quotes>label{flex-shrink:0}
.quotes #symbol-select{max-width:165px;padding:6px}
.quotes .symbol-search input{padding:6px 8px}
.quotes>div:not(.symbol-search){flex-shrink:0}
.quotes strong{font-size:25px;margin-top:3px;margin-right:8px}
.quotes dl{margin-left:auto;gap:14px;flex-wrap:wrap}
.quotes dt{margin-bottom:4px}
@media(max-width:800px){.quotes{flex-direction:row}.quotes dl{margin-left:0;width:100%}.toolbar .controls{flex-basis:100%}.toolbar .simulation-clock{flex-wrap:wrap}}

.toolbar>.top-timeline{flex:0 0 100%;min-width:0;padding:0 2px}.toolbar>.top-timeline .timeline{margin-top:1px}
.book-labels,.ladder-row{grid-template-columns:40px 40px minmax(32px,1fr) 55px minmax(32px,1fr) 40px 40px;gap:1px}.book-labels{padding-left:4px;padding-right:14px}.book-labels>span{color:var(--muted);font-weight:400}.book-labels>span:nth-child(1),.book-labels>span:nth-child(3){color:var(--red);font-weight:700}.book-labels>span:nth-child(5),.book-labels>span:nth-child(7){color:var(--down);font-weight:700}
#order-settings-dialog{max-width:420px;padding:22px;border:1px solid #81978b60;border-radius:10px;background:#fff;color:#223632}#order-settings-dialog::backdrop{background:#0006}#order-settings-dialog label{margin-top:18px;font-size:12px}#order-settings-dialog input{padding:8px;border:1px solid #81978b60;border-radius:4px;width:120px}#order-settings-dialog p{font-size:12px;line-height:1.7}#order-settings-dialog button{float:right}:root[data-theme=dark] #order-settings-dialog{background:#19262c;color:#d9edf5}
@media(min-width:1200px){.grid{grid-template-columns:160px minmax(300px,1fr) 750px}.market-side{grid-template-columns:355px minmax(385px,1fr)}}
@media(min-width:1500px){.grid{grid-template-columns:175px minmax(330px,1fr) 765px}.market-side{grid-template-columns:370px minmax(385px,1fr)}}
/* Keep a short replay scrubber directly below the intraday clock. */
.toolbar .simulation-clock{display:grid;grid-template-columns:1fr;gap:3px;flex:0 0 225px;width:225px;min-width:0;align-content:center}
.toolbar .simulation-clock .clock-heading{margin:0}
.toolbar .simulation-clock .top-timeline{width:100%;min-width:0;padding:0}
.toolbar .simulation-clock .top-timeline input{width:100%;height:14px;margin:0}
.toolbar .simulation-clock .timeline{font-size:8px;margin-top:0}
.toolbar .simulation-clock strong{font-size:15px;white-space:nowrap}
@media(max-width:700px){.toolbar .simulation-clock{flex-basis:195px;width:195px}}
/* Scrubber spans the clock and playback controls through the jump field. */
.toolbar>.replay-controls-group{flex:1 1 780px;min-width:0;display:grid;grid-template-columns:170px minmax(0,1fr);gap:5px 9px;align-items:center}
.toolbar .replay-controls-group .simulation-clock{width:auto;min-width:0;display:grid;gap:3px}
.toolbar .replay-controls-group>.controls{min-width:0;flex-wrap:wrap;justify-content:flex-start}
.toolbar .replay-controls-group>.top-timeline{grid-column:1/-1;width:100%;padding:0}
.toolbar .replay-controls-group .timeline{margin-top:0}
.book-labels{font-size:8px;white-space:nowrap}.book-labels,.ladder-row{grid-template-columns:52px 52px minmax(28px,1fr) 55px minmax(28px,1fr) 52px 52px}
@media(max-width:700px){.toolbar>.replay-controls-group{flex-basis:100%;grid-template-columns:1fr}.toolbar .replay-controls-group>.controls{grid-column:1}.toolbar .replay-controls-group>.top-timeline{grid-column:1}}

#market-phase{display:inline-block;margin-left:7px;font-size:12px;font-weight:800;white-space:nowrap}#market-phase[hidden]{display:none}#stock{display:inline!important}

.book>.market-book{display:flex;align-items:center;justify-content:center;gap:18px;padding:7px 4px;margin:0;border-top:1px solid #81978b30;border-bottom:1px solid #81978b30;font-size:11px;font-weight:800;flex-shrink:0}.book>.market-book[hidden]{display:none}.market-order-label{white-space:nowrap}
.volume-profile .profile-track,:root[data-theme=dark] .volume-profile .profile-track{background:transparent}.volume-profile .profile-bar i{flex-shrink:0}.volume-profile .profile-row{cursor:crosshair}
#profile-tooltip{position:fixed;z-index:50;pointer-events:none;padding:10px 12px;border:1px solid #81978b80;border-radius:6px;background:#fff;color:#223632;font-size:11px;line-height:1.8;box-shadow:0 4px 15px #0003}#profile-tooltip[hidden]{display:none}:root[data-theme=dark] #profile-tooltip{background:#202d34;color:#d8e3e9}
.market-price-row{font-weight:800;border-bottom:1px solid #81978b60}.market-price-row>span{display:flex;align-items:center;justify-content:center}.market-price-row .ladder-price{color:inherit}
/* Centering space belongs to scroll content, not the flex viewport's padding. */
.book>#book{flex:1 1 0;min-height:0;padding-top:0;padding-bottom:0}
.book>#book::before,.book>#book::after{content:'';display:block;height:var(--ladder-edge-space,0px);pointer-events:none}
.book>.balance{flex:0 0 auto;margin-top:0;padding:8px 12px 6px;line-height:15px;white-space:nowrap}
.book>.balance-bar{flex:0 0 5px;min-height:5px;margin:0 12px 12px}
.book>.order-summary,.book>.order-actions{flex-shrink:0}
.book>.order-summary{grid-template-columns:25px minmax(0,1fr) auto minmax(0,1fr) 25px;gap:4px;padding:6px 8px;align-items:center;white-space:nowrap;font-size:9px}.book>.order-summary #market-buy-total,.book>.order-summary #market-sell-total{font-weight:800}.book>.order-summary #sim-position{font-size:9px}

/* No artificial blank rows above or below the legal price ladder. */
.book>#book::before,.book>#book::after{content:none;display:none}
/* Market totals align with the two depth columns in the ladder. */
.book>.order-summary{grid-template-columns:52px 52px minmax(28px,1fr) 55px minmax(28px,1fr) 52px 52px;gap:1px;padding:5px 14px 4px 4px;font-size:10px}
.book>.order-summary #buy-order-total{grid-column:2;grid-row:1}
.book>.order-summary #market-buy-total{grid-column:3;grid-row:1;color:var(--red);font-weight:800}
.book>.order-summary #market-sell-total{grid-column:5;grid-row:1;color:var(--down);font-weight:800}
.book>.order-summary #sell-order-total{grid-column:6;grid-row:1}
.book>.order-summary #sim-position{grid-column:1/-1;grid-row:2;padding-top:3px;line-height:12px}
/* Emphasize both buy and sell order column headings. */
.book .book-labels>span{font-weight:800}
.book .book-labels>span:nth-child(1),.book .book-labels>span:nth-child(2),.book .book-labels>span:nth-child(3){color:var(--red)}
.book .book-labels>span:nth-child(5),.book .book-labels>span:nth-child(6),.book .book-labels>span:nth-child(7){color:var(--down)}

/* Bold trade tape column headings in both themes. */
.trades thead th{font-weight:800}
.workspace-switcher{display:flex;gap:8px;margin:9px 0}.workspace-switcher button{padding:7px 16px;font-weight:700}.workspace-switcher button[aria-expanded=true]{background:var(--green);color:#fff;border-color:var(--green)}#workspace-panel[hidden]{display:none}.workspace-panel-controls{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid #81978b30;font-size:10px;color:var(--muted)}.workspace-panel-controls button{padding:5px 8px;font-size:10px}.workspace-panel-controls>button{margin-left:auto}#watch-controls{display:flex;gap:5px}#watch-controls[hidden]{display:none}.workspace-table-scroll{max-height:215px;overflow:auto}.workspace-table-scroll table{min-width:620px;white-space:nowrap;font-family:Consolas,'Noto Sans TC',monospace;font-size:12px}.workspace-table-scroll th,.workspace-table-scroll td{padding:6px 12px}.workspace-table-scroll th{font-weight:800;position:sticky;top:0}.workspace-table-scroll tr[data-workspace-symbol]{cursor:pointer}.workspace-table-scroll tr[data-workspace-symbol]:hover{background:#81978b15}.workspace-table-scroll td:first-child{font-weight:700}.workspace-volume{color:#ae8500}:root[data-theme=dark] .workspace-volume{color:#ffe100}:root[data-theme=dark] .workspace-table-scroll th{background:#202d34}#workspace-panel .up{color:var(--red)}#workspace-panel .down{color:var(--down)}
/* Three simultaneously visible panels above the observed symbol row. */
.workspace-panels{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(0,1.15fr);gap:10px;margin:10px 0}.workspace-data-panel{min-width:0;height:230px;display:flex;flex-direction:column}.workspace-data-panel .panel-head{min-height:42px;height:42px;padding:7px 10px;flex-shrink:0}.workspace-panel-buttons{display:flex;gap:4px;align-items:center}.workspace-data-panel button,.workspace-data-panel select{padding:4px 6px;font-size:10px}.workspace-panel-status{font-size:9px;color:var(--muted);padding:4px 10px;line-height:14px;flex-shrink:0}.workspace-data-panel .workspace-table-scroll{flex:1;min-height:0;max-height:none;overflow:auto}.workspace-data-panel table{min-width:460px;font-size:10px}.workspace-data-panel th,.workspace-data-panel td{padding:5px 6px}.workspace-data-panel .up{color:var(--red)}.workspace-data-panel .down{color:var(--down)}
@media(max-width:900px){.workspace-panels{grid-template-columns:1fr}.workspace-data-panel{height:220px}}
.basket-chart-wrap{flex:1;min-height:0;padding:0 5px 0 0}.basket-chart-wrap canvas{height:100%;width:100%}.basket-legend{display:flex;gap:14px;padding:3px 10px;font-size:10px;font-weight:700}.basket-twse{color:#ff526d}.basket-tpex{color:#29c6e3}
#watch-table tr[data-workspace-symbol][aria-selected=true]{background:#81978b20}.workspace-data-panel .workspace-table-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.workspace-data-panel .workspace-table-scroll::-webkit-scrollbar{width:10px;height:10px}.workspace-data-panel .workspace-table-scroll::-webkit-scrollbar-thumb{background:#81978b;border-radius:5px}

/* Keep basket returns beside the title and give the plot the remaining height. */
.basket-panel .panel-head{gap:8px}.basket-panel .panel-head h2{flex-shrink:0}.basket-panel .basket-legend{padding:0;gap:8px;white-space:nowrap;flex:1;justify-content:flex-end;font-size:9px}.basket-panel #ranking-refresh{flex-shrink:0}.basket-panel .panel-head{overflow-x:auto}

.watch-search-dialog{width:min(420px,90vw);max-height:75vh;padding:14px;background:var(--panel,#fff);color:var(--text);border:1px solid #81978b60;border-radius:10px}.watch-search-dialog::backdrop{background:#0007}.watch-search-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.watch-search-dialog input{width:100%;box-sizing:border-box;padding:8px}.watch-search-count{font-size:12px;margin:8px 0;color:var(--muted)}.watch-search-results{max-height:45vh;overflow:auto}.watch-search-results>div{display:flex;align-items:center;justify-content:space-between;padding:6px 2px;border-bottom:1px solid #81978b25}.watch-search-results button{padding:4px 10px}.watch-search-dialog button{cursor:pointer}:root[data-theme=dark] .watch-search-dialog{background:#1b282e;color:#e4f1f7}#watch-table [data-remove-symbol]{padding:0 5px;font-size:13px}

#positions-table{min-width:0;width:100%;table-layout:auto;font-size:9px}#positions-table th,#positions-table td{padding:5px 3px;white-space:nowrap}#positions-table th:last-child{white-space:normal;min-width:65px}#positions-table td:first-child{max-width:90px;overflow:hidden;text-overflow:ellipsis}#positions-status{font-size:8px}

.position-chart-block{height:88px;flex-shrink:0;padding:0 6px;border-bottom:1px solid #81978b30}.position-chart-caption{font-size:9px;display:flex;justify-content:space-between;color:var(--muted);height:16px}.position-chart-block canvas{width:100%;height:70px;display:block}.position-list-block{flex:1;min-height:0}

/* Position chart and list share one horizontal row. */
.position-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);flex:1;min-height:0}.position-split .position-chart-block{height:auto;min-width:0;display:flex;flex-direction:column;padding:4px 6px;border-bottom:0;border-right:1px solid #81978b30}.position-split .position-chart-caption{height:auto;min-height:16px;gap:4px;flex-wrap:wrap}.position-split canvas{flex:1;min-height:0;height:100%;width:100%}.position-split .position-list-block{min-width:0;overflow:auto}

.workspace-table-scroll td.workspace-symbol-code{font-weight:800;width:35px;white-space:nowrap}.workspace-table-scroll td:nth-child(2){font-weight:800}

#watch-table tr[draggable=true]{cursor:grab}#watch-table tr.watch-dragging{opacity:.45;cursor:grabbing}#watch-table tr.watch-drop-target{outline:2px solid #29c6e3;outline-offset:-2px}

#watch-table .watch-stock-status{font-size:9px;white-space:nowrap;color:var(--muted)}#watch-table th,#watch-table td{padding-left:4px;padding-right:4px}

.basket-position{color:#ffd34d}.basket-panel .basket-legend{gap:6px;font-size:9px}.position-list-block{width:100%}

/* Ladder price text follows the reference price, independently of book side. */
.book .ladder-price{font-weight:800}.book .ladder-price.up{color:var(--red)!important}.book .ladder-price.down{color:var(--down)!important}.book .ladder-price.flat{color:#111!important}:root[data-theme=dark] .book .ladder-price.flat{color:#fff!important}.book .last-price-row .ladder-price.flat{color:#111!important}

.free-plan-notice{padding:5px 10px;color:var(--muted);font-size:11px}.free-plan-notice[hidden]{display:none}

.member-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:8px 20px;background:var(--panel,#fff);font-size:12px}.member-toolbar a{margin-right:auto;color:inherit;text-decoration:none}

.profile-bars{display:flex;align-items:center;height:5px}.profile-bars i{display:block;height:5px}.profile-row{overflow:visible}

#positions-table{min-width:520px;width:100%;font-size:11px;table-layout:auto}#positions-table th,#positions-table td{padding:8px 10px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}#positions-table th:first-child,#positions-table td:first-child,#positions-table th:nth-child(2),#positions-table td:nth-child(2){text-align:left}#positions-table th{background:var(--panel,#fff);z-index:1}#positions-table th:last-child{white-space:nowrap;min-width:90px}#positions-status{font-size:9px}

/* Give replay charts priority while keeping the order ladder usable. */
@media(min-width:1800px){
 .grid{grid-template-columns:140px minmax(500px,1fr) 690px;gap:12px}
 .market-side{grid-column:3;grid-row:1;grid-template-columns:370px minmax(0,1fr);gap:10px}
 .workspace-panels{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.5fr)}
}
@media(min-width:1251px) and (max-width:1799px){
 .grid{grid-template-columns:125px minmax(0,1fr) 370px;gap:10px}
 .volume-profile{grid-column:1;grid-row:1}.chart-column{grid-column:2;grid-row:1}
 .market-side{display:contents}.market-side>.book{grid-column:3;grid-row:1}
 .market-side>.trades{grid-column:1/-1;grid-row:2}
 .market-side>.trades .tape-scroll{height:230px;max-height:230px}
 .workspace-panels{grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.4fr)}
}
@media(min-width:701px) and (max-width:1250px){
 .grid{grid-template-columns:110px minmax(0,1fr);gap:10px}
 .volume-profile{grid-column:1;grid-row:1}.chart-column{grid-column:2;grid-row:1}
 .market-side{display:grid;grid-column:1/-1;grid-row:2;grid-template-columns:minmax(370px,1fr) minmax(0,1fr)}
}
@media(max-width:700px){
 .grid{grid-template-columns:90px minmax(0,1fr);gap:8px}
 .volume-profile{grid-column:1;grid-row:1}.chart-column{grid-column:2;grid-row:1}
 .market-side{display:grid;grid-column:1/-1;grid-row:2;grid-template-columns:1fr}
}
.trades table{min-width:310px}.trades .tape-scroll{overflow:auto}

@media(min-width:801px){main{max-width:none;padding-left:24px;padding-right:24px}}

/* Full-width trading room with one horizontal navigation bar. */
body>main{margin-left:0;max-width:none;padding:22px 24px}
.member-toolbar{display:flex;align-items:center;gap:24px;padding:12px 24px;margin:0;border-bottom:1px solid #81978b30;min-height:68px}
.member-toolbar .workspace-brand{margin:0;font-size:24px;font-weight:750;letter-spacing:-1px;white-space:nowrap}
.workspace-brand span{color:#568775}.member-toolbar nav{display:flex;align-items:center;gap:6px;margin:0}
.member-toolbar nav a{margin:0;padding:10px 16px;font-size:13px;white-space:nowrap}
.member-toolbar nav a.active{background:#d8e5db;color:var(--green);font-weight:700}
.member-toolbar #member-email{margin-left:auto;color:var(--muted);font-size:12px}
.member-toolbar #logout{flex-shrink:0}
@media(max-width:700px){body>main{padding:14px 10px}.member-toolbar{padding:10px 12px;gap:12px;flex-wrap:wrap}.member-toolbar .workspace-brand{font-size:21px}.member-toolbar nav{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto}.member-toolbar nav a{padding:8px 12px}.member-toolbar #member-email{display:none}.member-toolbar #logout{margin-left:auto}}