:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#1c293f;background:#f5f7fb;font-synthesis:none;--blue:#335fea;--muted:#8490a3;--line:#e9edf4;--red:#cf4c4c;--green:#22866b}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{text-decoration:none;color:inherit}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:3px solid #91aaff;outline-offset:3px}.sidebar{width:220px;background:#fff;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;padding:34px 22px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;font-weight:750;font-size:20px;letter-spacing:1px}.brand-icon{background:var(--blue);color:#fff;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:28px}.brand small{display:block;font-size:8px;color:#8b96a8;letter-spacing:1.5px;margin-top:5px}.nav-label{margin:55px 10px 18px;font-size:11px;color:#a1a9b6;letter-spacing:2px}.nav-item{padding:14px;border-radius:9px;display:flex;gap:12px;font-size:14px;margin-bottom:8px;color:#768399}.nav-item.active{background:#eef2ff;color:var(--blue);font-weight:650}.side-foot{margin-top:auto;font-size:12px;color:#758197;padding:0 8px}.side-foot small{display:block;font-size:10px;line-height:2.3}.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#2ba483;margin-right:6px}.workspace{margin-left:220px}header{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;font-size:12px}.breadcrumb{color:#8d97a7}.breadcrumb span{margin:0 15px;color:#c4cbd6}.header-actions{display:flex;align-items:center;gap:16px}.connection{font-size:11px;color:#7b889b;display:flex;align-items:center;gap:7px}.connection:before{content:"";width:6px;height:6px;background:#b1bccd;border-radius:50%}.connection.online:before{background:#2ba483}.connection.offline:before{background:#d65c5c}.quiet{border:0;background:transparent;color:#57687f;font-size:12px;padding:8px}main{max-width:1450px;margin:auto;padding:34px 42px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;color:#8c99ad;margin-bottom:9px}h1{font-size:27px;font-weight:720;letter-spacing:-.8px;margin:0 0 9px}p{margin:0;color:#8290a4;font-size:12px;line-height:1.8}.button{border:0;background:var(--blue);color:white;border-radius:8px;padding:11px 17px;font-weight:600;font-size:12px;transition:background .15s}.button:hover{filter:brightness(.96)}.button.secondary{background:white;border:1px solid #dfe5ee;color:#596c86}.notice{background:#edf2ff;border:1px solid #e1e8fe;border-radius:8px;color:#5d76a5;padding:12px 16px;font-size:12px;margin-bottom:24px;line-height:1.7}.notice.error{background:#fff0ee;border-color:#f8deda;color:#b65d52}.metrics{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;margin-bottom:25px}.metric{padding:24px 26px;border:1px solid var(--line);border-radius:12px;background:white}.metric.primary{background:linear-gradient(125deg,#355fe3,#557dec);border:none;color:white;box-shadow:0 6px 17px #335fea15}.metric>span{display:flex;justify-content:space-between;font-size:12px;color:#74829a}.metric.primary>span{color:#d6e0ff}.metric small{font-size:9px;letter-spacing:1px;opacity:.65}.metric strong{display:block;font-size:30px;font-weight:650;margin:17px 0 12px;font-variant-numeric:tabular-nums;letter-spacing:-.8px}.metric div{font-size:10px;color:#9ca8b9}.metric.primary div{color:#c9d8ff}.trade-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:23px;margin-bottom:25px}.panel{border:1px solid var(--line);border-radius:12px;background:white;padding:25px 27px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}h2{font-size:15px;margin:0;font-weight:650}.tag{background:#eff3ff;color:#5676bf;border-radius:5px;padding:5px 9px;font-size:10px}.tag.subtle{color:#8290a4;background:#f4f6f9}fieldset{border:0;margin:0;padding:0}.side-switch{display:flex;background:#f4f6f9;border-radius:8px;padding:4px;margin-bottom:23px}.side-switch button{width:50%;background:none;border:0;border-radius:6px;padding:10px;font-size:13px;color:#99a2b0}.side-switch button.selected{background:#fff;box-shadow:0 2px 5px #172b4710;font-weight:650}.side-switch .buy.selected{color:var(--red)}.side-switch .sell.selected{color:var(--green)}label{display:block;font-size:11px;color:#61708a;margin-bottom:17px}label small{font-size:10px;color:#9ca7b8;font-weight:400;margin-left:4px}input{display:block;width:100%;margin-top:8px;border:1px solid #e0e6ef;border-radius:7px;padding:11px 12px;background:#fff;color:#273a55;font-size:13px;outline:none;min-width:0}input:focus{border-color:#809ff5;box-shadow:0 0 0 3px #335fea0b}input::placeholder{color:#adb6c4}input:disabled{background:#f7f9fc}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}.estimate{background:#f7f9fc;border-radius:7px;display:flex;align-items:center;justify-content:space-between;padding:14px;margin:0 0 20px;font-size:11px;color:#8b97aa}.estimate strong{font-size:15px;color:#465f82;font-variant-numeric:tabular-nums}.request-label{margin-bottom:8px}.request-label input{font-size:11px;font-family:Consolas,monospace}.text-button{float:right;background:none;border:0;font-size:10px;color:var(--blue);padding:0}.hint{font-size:10px;line-height:1.7;color:#97a3b4}.submit{width:100%;padding:13px;margin-top:18px}.buy-button{background:#d45252}.sell-button{background:#27836b}.guide-intro{padding:12px 0 25px;border-bottom:1px solid var(--line);margin-bottom:18px}.guide-symbol{float:right;color:#b6c8f3;font-size:48px;padding-right:10px}.guide-intro h3{font-size:17px;margin:0 0 9px;font-weight:600}.guide-intro p{max-width:80%;font-size:11px}.guide-row{display:flex;gap:14px;padding:15px 0}.guide-row>span{width:26px;height:26px;border-radius:7px;background:#f2f5fb;color:#8a9cba;display:grid;place-items:center;font-size:10px;flex-shrink:0}.guide-row b{font-size:12px;font-weight:550}.guide-row p{font-size:11px;margin-top:6px}.guide-footer{margin-top:19px;border-top:1px solid var(--line);padding-top:20px;font-size:10px;line-height:1.8;color:#9aa6b8}.order-panel{padding-bottom:0}.order-panel .panel-heading{margin-bottom:16px}.panel-heading p{margin-top:7px;font-size:10px}.count{display:inline-block;font-size:10px;margin-left:6px;color:#8fa0bb;background:#f1f4fa;padding:3px 7px;border-radius:4px}.auto-label{display:flex;align-items:center;gap:7px;font-size:11px;margin:0;white-space:nowrap}.auto-label input{width:13px;margin:0;accent-color:var(--blue)}.lookup{display:flex;gap:10px;margin-bottom:20px;max-width:430px}.lookup input{margin:0;font-size:11px}.lookup button{white-space:nowrap}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}th{font-size:10px;background:#f7f9fc;color:#8c99ad;text-align:left;padding:13px;font-weight:500}td{padding:17px 13px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}td small{display:block;color:#a1acbb;margin-top:5px;font-size:10px}.direction.BUY{color:var(--red)}.direction.SELL{color:var(--green)}.status{font-size:10px;border-radius:4px;padding:5px 8px;background:#f1f4fb;color:#6580a8}.status.FILLED{color:#24836a;background:#edf7f3}.status.PARTIAL{color:#b58736;background:#fff7e7}.status.CANCELLED{color:#8b95a5;background:#f1f3f6}.status.CANCEL_REQUESTED{color:#9b7caf;background:#f6f0fb}.row-cancel{border:0;background:transparent;color:#577ad0;font-size:11px;padding:5px}.empty{text-align:center;padding:32px 0 35px}.empty>span{display:block;font-size:28px;color:#c2cddd;margin-bottom:8px}.empty b{font-size:12px;color:#8897ad;font-weight:500}.empty p{font-size:10px;margin-top:8px}footer{display:flex;justify-content:space-between;padding:22px 2px;font-size:10px;color:#a3adbc}dialog{border:1px solid #e7ebf2;border-radius:14px;padding:30px;width:min(420px,calc(100vw - 30px));color:#273a55;box-shadow:0 25px 100px #14294d30}dialog::backdrop{background:#192c5060;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading h2{font-size:22px}.dialog-intro{font-size:11px;margin:12px 0 24px}.captcha-row{display:flex;gap:10px}.captcha-row input{flex:1}.captcha-row button{border:1px solid #e0e6ef;background:#f7f9fc;border-radius:7px;margin-top:8px;width:124px;color:#8b98ae;font-size:11px;padding:0;overflow:hidden}.captcha-row img{width:100%;height:40px;object-fit:contain}.dialog-note{text-align:center;font-size:10px;margin-top:18px}.form-error{color:#c85050;font-size:11px;min-height:18px}.dialog-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}#cancel-dialog>p{margin-top:15px}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#273a55;color:#fff;padding:13px 20px;border-radius:9px;box-shadow:0 8px 35px #152a4020;font-size:12px;max-width:90vw;z-index:10}#toast.error{background:#ab4b4b}@media(max-width:1100px){.sidebar{width:190px;padding:30px 16px}.workspace{margin-left:190px}main{padding:28px}header{padding:0 28px}.panel{padding:22px}.metric{padding:22px}.guide-row{padding:11px 0}}@media(max-width:760px){.sidebar{position:static;width:auto;padding:16px 20px;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:17px}.brand-icon{width:32px;height:32px;font-size:24px}.nav-label,.nav-item,.side-foot{display:none}.workspace{margin:0}header{height:54px;padding:0 20px}.breadcrumb{display:none}.header-actions{width:100%;justify-content:flex-end}main{padding:25px 16px}.page-heading h1{font-size:22px}.page-heading p{font-size:11px}.metrics{grid-template-columns:1fr 1fr;gap:10px}.metric.primary{grid-column:1/-1}.metric{padding:18px 20px}.metric strong{font-size:25px}.trade-grid{grid-template-columns:1fr}.guide{display:none}.order-panel .panel-heading{align-items:flex-start}.panel-heading p{max-width:220px}.panel{padding:22px 18px}.order-panel{padding-bottom:0}footer{flex-direction:column;gap:8px}}
.quote-box{background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:13px;margin-bottom:20px}.quote-heading{display:flex;justify-content:space-between;font-size:11px;color:#61708a;margin-bottom:12px}.quote-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quote-prices button{border:1px solid #e2e8f2;border-radius:7px;background:#fff;padding:10px 5px;color:#526c91}.quote-prices span,.quote-prices small{display:block;font-size:10px;font-weight:400}.quote-prices strong{display:block;font-size:20px;margin:6px 0;font-variant-numeric:tabular-nums}.quote-prices button:not(:disabled):hover{border-color:var(--blue);background:#eef3ff}.quote-prices button:disabled{opacity:1;color:#929dad}.quote-box p{font-size:10px;margin-top:10px}
.stock-search{position:relative}.stock-suggestions{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;background:#fff;border:1px solid #dfe6f1;border-radius:8px;box-shadow:0 12px 28px #21355120;max-height:270px;overflow:auto}.suggestion-heading{padding:10px 12px;font-size:10px;background:#f7f9fc;color:#8998ad}.stock-suggestions button{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border:0;background:white;text-align:left;font-size:12px;color:#344c70}.stock-suggestions button span{flex:1}.stock-suggestions button b{font-family:Consolas,monospace;font-weight:500}.stock-suggestions button small{font-size:10px;color:#97a3b5;margin:0}.stock-suggestions button:hover,.stock-suggestions button.highlight{background:#eef3ff}.stock-suggestions p{padding:12px;font-size:11px}.stock-label>small{display:block;margin:7px 0 0;color:#637ba4}
.quote-interval{margin-left:auto;margin-right:12px;color:#97a3b5;font-size:10px}
.order-type-field{margin-bottom:18px;font-size:11px;color:#61708a}.order-type-switch{display:flex;gap:4px;width:248px;max-width:100%;margin-top:8px;padding:4px;border:1px solid var(--line);border-radius:9px;background:#f5f7fc}.order-type-switch button{flex:1;min-width:0;border:0;border-radius:6px;padding:10px 16px;background:transparent;color:#718099;font:inherit;font-size:13px;line-height:1.4;cursor:pointer}.order-type-switch button.active{background:var(--blue);color:#fff;font-weight:600;box-shadow:0 2px 5px #335fea24}.order-type-switch button:not(:disabled):not(.active):hover{background:#e8eefb;color:#355dba}.order-type-switch button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.order-type-switch button:disabled{cursor:not-allowed;opacity:.55}
.position-menu{position:fixed;z-index:20;width:88px;padding:4px;background:white;border:1px solid #dfe5ee;border-radius:8px;box-shadow:0 8px 24px #21355125}.position-menu button{display:block;width:100%;padding:8px 12px;border:0;border-radius:5px;background:white;color:#344c70;text-align:left;font-size:12px}.position-menu button:hover,.position-menu button:focus-visible{background:#eef3ff}.reference-stop{margin-top:24px}
.position-metrics{grid-template-columns:repeat(3,1fr)}.position-table{min-width:1680px}.position-note{padding:17px 2px;font-size:10px}.pnl-positive{color:var(--red)}.pnl-negative{color:var(--green)}#position-page .table-wrap{min-height:180px}@media(max-width:760px){.sidebar{flex-direction:row;flex-wrap:wrap;gap:5px}.sidebar .brand{width:100%;margin-bottom:8px}.sidebar .nav-item{display:inline-flex;margin:0;padding:9px;font-size:11px}.position-metrics{grid-template-columns:1fr}.position-metrics .metric strong{margin:10px 0}.position-metrics .metric{padding:16px}}
.asset-panel{margin-bottom:25px}.chart-switch{display:flex;background:#f4f6f9;padding:4px;border-radius:7px}.chart-switch button{border:0;background:transparent;color:#8490a3;border-radius:5px;padding:8px 12px;font-size:11px;white-space:nowrap}.chart-switch .active{background:white;color:var(--blue);box-shadow:0 1px 4px #172b4710}.asset-summary{display:flex;gap:48px;flex-wrap:wrap;margin-bottom:14px}.asset-summary span{display:block;color:#8490a3;font-size:11px}.asset-summary strong{display:block;font-size:21px;margin-top:7px;font-variant-numeric:tabular-nums}.asset-chart{width:100%;overflow-x:auto}.asset-chart svg{display:block;width:100%;min-width:600px;height:245px}.asset-chart text{font-size:11px;fill:#8490a3}.chart-grid{stroke:#edf0f6}.chart-line{fill:none;stroke:#335fea;stroke-width:2}.chart-area{fill:#335fea0b}.asset-chart circle{fill:#335fea;stroke:white;stroke-width:1}.chart-empty{height:220px;display:grid;place-items:center;color:#97a3b4;font-size:12px}#asset-status{font-size:10px;margin:8px 0}.asset-panel .hint{margin-top:5px}@media(max-width:760px){.asset-summary{gap:20px}.asset-summary strong{font-size:17px}.asset-panel .panel-heading{align-items:flex-start}.chart-switch button{padding:7px 9px}}

.asset-range{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:12px 0}.asset-range label{font-size:12px;color:#8190a8}.asset-range input,.asset-range select{display:block;margin-top:6px;border:1px solid #dce4f1;border-radius:8px;padding:9px;background:#fff;color:#334a67}.asset-range .button{padding:9px 18px}

/* Asset history: aligned controls and compact sparse-data presentation. */
.asset-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:20px 0}
.asset-summary>div{padding:15px 18px;background:#f7f9fd;border:1px solid #edf1f7;border-radius:10px}
.asset-range{align-items:flex-end;gap:12px;padding:16px 0;margin:0 0 14px;border-bottom:1px solid #edf1f7}
.asset-range label{margin:0;display:flex;flex-direction:column;gap:6px}
.asset-range input,.asset-range select{box-sizing:border-box;height:42px;margin:0;min-width:140px}
.asset-range .button{box-sizing:border-box;height:42px;margin:0;white-space:nowrap}
.asset-period-switch{display:inline-flex;border:1px solid #dce4f1;border-radius:8px;padding:3px;gap:3px;background:#f7f9fd;height:42px;box-sizing:border-box}
.asset-period-switch button{border:0;border-radius:5px;background:transparent;color:#8190a8;min-width:48px;padding:0 16px;font-size:14px;cursor:pointer}
.asset-period-switch button.active{background:#3868f5;color:#fff;box-shadow:0 2px 6px #3868f52b}
.asset-period-switch button:focus-visible{outline:2px solid #3868f5;outline-offset:2px}
.asset-period-navigation{display:flex;gap:8px;margin-left:auto}
#asset-period-value{width:190px}
.asset-chart svg{height:260px}
.chart-single{box-sizing:border-box;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fafbfe;border:1px dashed #dce4f1;border-radius:10px;color:#8190a8;font-size:12px;text-align:center;padding:20px}
.chart-single strong{font-size:26px;color:#18304e;font-variant-numeric:tabular-nums}
.chart-single-label{font-size:12px}.chart-single p{margin:4px 0 0}
.chart-empty{height:170px;border-radius:10px;background:#fafbfe}
.asset-explanation{border-top:1px solid #edf1f7;margin-top:14px;padding-top:12px;color:#8190a8;font-size:12px}
.asset-explanation summary{cursor:pointer;width:fit-content}.asset-explanation .hint{line-height:1.8;margin-top:12px}
@media(max-width:760px){.asset-summary{gap:8px}.asset-summary>div{padding:12px 10px}.asset-range label{flex:1 1 140px}.asset-range input,.asset-range select{width:100%;min-width:0}.asset-period-navigation{margin-left:0}.chart-single strong{font-size:22px}}
@media(max-width:440px){.asset-summary{grid-template-columns:1fr}.asset-range .button{flex:1 1 120px}}
.pagination { display: inline-flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
/* Order investigation, history tools and complete book. */
.history-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:18px 0}.history-filters label{font-size:12px;min-width:120px;flex:1}.history-filters input,.history-filters select{width:100%;height:40px}.history-filters .button{height:40px;font-size:12px}.five-level-book{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.book-side{display:flex;flex-direction:column;gap:3px}.book-side button{display:grid;grid-template-columns:35px 1fr 1fr;gap:8px;align-items:center;border:0;background:#fff;padding:7px 8px;cursor:pointer;border-radius:5px;font:inherit;text-align:right}.book-side button span{text-align:left;font-size:12px}.book-side button strong{font-size:13px}.book-side button small{font-size:11px;color:#71809b}.book-side button:hover:not(:disabled){background:#eef3ff}.book-side button:disabled{cursor:default;opacity:.6}.asks strong{color:#d64f58}.bids strong{color:#198878}.quick-quantities{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}.quick-quantities .button{font-size:12px;padding:8px 12px}.quick-quantities .hint{flex-basis:100%;font-size:12px}.order-detail-dialog{max-width:800px;width:calc(100% - 32px);max-height:85vh;overflow:auto}.order-detail-dialog h3{font-size:14px;margin:24px 0 12px}.order-timeline{list-style:none;padding:0;margin:0}.order-timeline li{border-left:2px solid #e0e8fa;padding:0 0 18px 16px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px}.order-timeline time{font-size:12px;color:#71809b;flex-basis:100%}.condition-notice{border-bottom:1px solid #e5ebf5;padding:14px 0}.condition-notice p{font-size:13px}.condition-notice small{color:#71809b}.condition-notice button{display:block;margin-top:8px}@media(max-width:600px){.history-filters label{min-width:calc(50% - 10px)}.five-level-book{gap:6px}.book-side button{gap:3px;padding:6px 3px}.book-side button small{font-size:10px}}
.history-filters select{font:inherit;color:#1c293f;border:1px solid #d8e3f5;border-radius:8px;background:white;padding:8px 10px}

/* Keep order controls on a shared baseline, with clear toolbar groups. */
.order-refresh-controls{display:flex;align-items:center;gap:16px;flex-shrink:0}
.order-refresh-controls .button{height:36px;min-width:0;white-space:nowrap}
.history-filters{gap:12px;margin:20px 0 16px}
.history-filters label{margin:0;display:flex;flex-direction:column;gap:8px;min-width:130px}
.history-filters input,.history-filters select{margin:0;height:40px;min-width:0}
.history-filters .button{white-space:nowrap}
.history-filter-actions{display:flex;gap:12px;flex-wrap:wrap}
.validity-label select{display:block;width:100%;height:40px;margin-top:8px;padding:8px 12px;border:1px solid #e0e6ef;border-radius:7px;background:#fff;color:#273a55;font:inherit;font-size:13px}
.validity-label small{display:block;margin:8px 0 0;line-height:1.7}
.matching-policy{margin:0 0 20px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#f7f9fc;color:#61708a;font-size:11px;line-height:1.8}
.matching-policy summary{cursor:pointer}.matching-policy p{font-size:11px;margin-top:8px}
.trade-result{margin-top:18px;padding:15px;border:1px solid #dce5fb;border-radius:9px;background:#f4f7ff;font-size:13px;overflow-wrap:anywhere}.trade-result.uncertain{border-color:#ecd6a9;background:#fff9eb}.trade-result p{margin:8px 0;color:#61708a}.trade-result-actions{display:flex;flex-wrap:wrap;gap:8px}
#trade-notices-open.has-pending{color:#ad6800;font-weight:600}
#trade-notices-open.has-pending::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#d48806;vertical-align:middle}
#trade-notices-dialog #trade-result{margin:0 0 22px}
#trade-notices-dialog h3{font-size:14px;margin:18px 0 10px}
.order-feedback-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.order-feedback-metrics>div{padding:14px;border:1px solid var(--line);border-radius:8px;background:#f7f9fc}.order-feedback-metrics span,.order-feedback-metrics small{display:block;color:#718099;font-size:11px}.order-feedback-metrics strong{display:block;font-size:19px;margin:10px 0;overflow-wrap:anywhere}.order-wait-reason{padding:7px 9px;border-radius:5px;background:#fff7e9;color:#9a6b24!important;white-space:normal;min-width:140px;max-width:260px}.order-remaining{font-size:12px;color:#526a8d!important}
@media(max-width:440px){.order-feedback-metrics{grid-template-columns:1fr}.trade-result-actions .button{flex:1}}
.order-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.order-tools .lookup{flex:1 1 300px;max-width:430px;margin:0}
.order-tools .lookup input,.order-tools .lookup button{height:40px}
.order-tools .pagination{margin:0;gap:10px;font-size:12px;white-space:nowrap}
.order-tools .pagination .button{height:40px}
@media(max-width:760px){#orders>.panel-heading{flex-wrap:wrap;gap:14px}#orders>.panel-heading p{max-width:none}.order-refresh-controls{width:100%;justify-content:space-between}.order-tools .lookup{max-width:none}.order-tools .pagination{margin-left:auto}}
@media(max-width:600px){.history-filter-actions{width:100%}.history-filter-actions .button{flex:1 1 auto}}
@media(max-width:440px){.history-filters label{min-width:calc(50% - 6px)}.order-tools .lookup{flex-basis:100%}}

.account-switcher{display:flex;align-items:center;gap:16px;padding:18px 22px;margin:0 0 22px;background:white;border:1px solid var(--line);border-radius:12px}.account-switcher[hidden]{display:none}.account-switcher label{display:flex;align-items:center;gap:12px;margin:0;min-width:0}.account-switcher select{min-width:220px;max-width:380px;height:42px}.account-switcher .button{margin-left:auto;white-space:nowrap}.local-login{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}.local-login summary{cursor:pointer;margin-bottom:16px;color:#526a8d}@media(max-width:760px){.account-switcher{flex-wrap:wrap}.account-switcher label{flex:1 1 100%}.account-switcher select{flex:1;min-width:0}.account-switcher .button{margin-left:auto}}

.market-preview{margin:0 0 20px;padding:18px;border:1px solid #dce5f5;border-radius:10px;background:#f7f9fd}.market-preview[hidden],.market-preview-metrics[hidden]{display:none}.market-preview-heading{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#29436b}.market-preview-heading>span{font-size:11px;font-weight:400;padding:3px 7px;border-radius:4px;background:#e9eef8;color:#6c7f9c}.market-preview-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.market-preview-metrics span{display:block;font-size:12px;color:#718099}.market-preview-metrics strong{display:block;margin-top:8px;font-size:18px;overflow-wrap:anywhere}.market-preview p{font-size:12px;line-height:1.7;color:#647895;margin:14px 0 6px}.market-preview small{font-size:11px;color:#8494ad}@media(max-width:440px){.market-preview{padding:14px}.market-preview-metrics{gap:8px}.market-preview-metrics strong{font-size:15px}}

.fee-estimate{padding:13px 16px;margin:-10px 0 20px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:12px;color:#647895}.fee-estimate-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.fee-estimate-heading strong{font-size:15px;color:#405f8c;white-space:nowrap;font-variant-numeric:tabular-nums}.fee-estimate p{margin:10px 0 6px;line-height:1.8;font-size:12px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.fee-estimate small{display:block;font-size:11px;line-height:1.7;color:#8494ad}
/* Two-line holdings rows, matching the compact brokerage layout. */
.trade-grid{grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr);align-items:start}
.trade-grid>#trade{min-width:0}.trade-holdings{min-width:0;padding:24px 18px;position:sticky;top:20px}
.trade-holdings .panel-heading{margin-bottom:20px;align-items:flex-start;padding:0 6px}.trade-holdings .panel-heading p{margin-top:8px;max-width:none;font-size:11px}.holdings-all{font-size:11px;color:var(--blue);white-space:nowrap;padding-top:3px}
.holdings-columns,.holding-card{display:grid;grid-template-columns:1.2fr 1.15fr .9fr .85fr;column-gap:10px;align-items:center;padding-left:8px;padding-right:8px}
.holdings-columns{padding-top:12px;padding-bottom:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px;color:#8c99ad;white-space:nowrap}
.holdings-columns>span:not(:first-child){text-align:right}
.trade-holdings-list{max-height:720px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d6deec transparent;overscroll-behavior:contain}
.holding-card{width:100%;text-align:left;color:inherit;border:0;border-bottom:1px solid var(--line);border-radius:0;padding-top:15px;padding-bottom:15px;margin:0;background:#fff;font-variant-numeric:tabular-nums;transition:background .15s}
.holding-card:hover{background:#f4f7ff}.holding-card.is-selected{background:#eef3ff;box-shadow:inset 3px 0 var(--blue)}
.holding-card>span{min-width:0}.holding-card strong,.holding-card small{display:block;line-height:1.6;font-size:12px;font-weight:500;white-space:nowrap}.holding-card small{margin-top:3px}.holding-stock{color:#4c78bc}.holding-stock strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis}.holding-cell{text-align:right}.holding-reference{font-size:10px;color:#b48841;font-style:normal;margin-left:3px}
.holdings-note{margin-top:16px;padding:14px 6px 0;border-top:1px solid var(--line);font-size:10px;color:#96a2b4;line-height:1.8}
.cancel-mode .side-switch #trade-cancel-tab.selected{color:var(--blue)}
.quick-cancel-heading{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#4e6485;margin:22px 0 12px}.quick-cancel-heading .text-button{font-size:11px}.quick-cancel-order{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:12px}.quick-cancel-order small{display:block;margin-top:7px;font-size:11px;color:#8694ab}.quick-cancel-order .button{white-space:nowrap}.quick-cancel-order>div{min-width:0;overflow-wrap:anywhere}
@media(max-width:1100px) and (min-width:761px){.trade-grid{grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:16px}.trade-holdings{padding:20px 10px}.holdings-columns,.holding-card{column-gap:6px;padding-left:5px;padding-right:5px}.holding-card strong,.holding-card small{font-size:10px}.holding-stock strong{font-size:12px}.holdings-columns{font-size:10px}.holdings-all{font-size:10px}.trade-holdings .panel-heading{gap:6px}}
@media(max-width:760px){.trade-grid{grid-template-columns:minmax(0,1fr)}.trade-holdings{position:static;padding:22px 12px}.trade-holdings-list{max-height:620px}.holdings-columns,.holding-card{column-gap:7px;padding-left:6px;padding-right:6px}.holding-card strong,.holding-card small{font-size:11px}.holding-stock strong{font-size:12px}.holdings-columns{font-size:10px}}

.market-preview.sell .market-preview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Shared UI standard. Scoped to the two upgraded simulated-trading surfaces. */
body.sim-ui {
  --blue: #1677ff;
  --muted: #8791a2;
  --line: #e5ebf3;
  --red: #cf1322;
  --green: #389e0d;
  --surface: #fff;
  --section: #f7f9fc;
  --control: #dde5ef;
  --page-bg: #f4f7fb;
  --control-height: 38px;
  --radius-card: 10px;
  --radius-table: 8px;
  --radius-control: 7px;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  background: #f4f7fb;
  color: #253149;
  font-size: 13px;
  line-height: 1.5;
}
.sim-ui .workspace, .sim-ui main, .sim-ui section, .sim-ui article { min-width: 0; }
.sim-ui main { max-width: 1600px; padding: 28px 32px; }
.sim-ui header { height: 64px; padding: 0 32px; }
.sim-ui .sidebar { padding: 28px 18px; }
.sim-ui .brand { font-size: 19px; }
.sim-ui .brand-icon { border-radius: 10px; }
.sim-ui .nav-label { margin: 36px 12px 16px; color: var(--muted); }
.sim-ui .nav-item { color: #596579; padding: 12px 14px; margin-bottom: 6px; border-radius: 7px; }
.sim-ui .nav-item.active, .sim-ui.portal .sidebar .nav-item.active { background: #f0f5ff; color: var(--blue); }
.sim-ui .nav-item:hover { background: #f7faff; }
.sim-ui[data-page="positions"] main { max-width: none; padding: 12px 16px; }
.sim-ui[data-page="positions"] main > .page-heading { display: none; }
.sim-ui[data-page="positions"] main > .notice { padding: 6px 10px; margin-bottom: 8px; font-size: 11px; line-height: 1.5; }
.sim-ui[data-page="positions"] .position-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; padding: 9px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.sim-ui[data-page="positions"] .position-metrics .metric { display: flex; align-items: baseline; gap: 12px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.sim-ui[data-page="positions"] .position-metrics .metric > span { font-size: 11px; }
.sim-ui[data-page="positions"] .position-metrics .metric strong { margin: 0; font-size: 18px; line-height: 24px; }
.sim-ui[data-page="positions"] .position-metrics .metric > div,.sim-ui[data-page="positions"] .position-metrics small { display: none; }
.sim-ui .page-heading { gap: 16px; margin-bottom: 20px; }
.sim-ui h1 { font-size: 24px; font-weight: 650; letter-spacing: 0; margin-bottom: 6px; }
.sim-ui h2 { color: #253149; font-size: 15px; font-weight: 600; }
.sim-ui p { color: #596579; font-size: 12px; }
.sim-ui .eyebrow { color: var(--muted); font-size: 10px; margin-bottom: 6px; }
.sim-ui .panel, .sim-ui .metric, .sim-ui .account-switcher, .sim-ui .portal-metrics article {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; padding: 20px;
}
.sim-ui .panel-heading { margin-bottom: 20px; flex-wrap: wrap; }
.sim-ui .panel-heading h2, .sim-ui .form-section h3, .sim-ui .order-detail-dialog h3 {
  border-left: 3px solid var(--blue); padding-left: 10px;
}
.sim-ui .panel-heading p { margin-top: 8px; font-size: 12px; max-width: none; }
.sim-ui .metrics, .sim-ui .portal-metrics { gap: 16px; margin-bottom: 20px; }
.sim-ui .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sim-ui .metric.primary { color: #253149; }
.sim-ui .metric > span, .sim-ui .metric.primary > span, .sim-ui .portal-metrics span { color: #596579; font-size: 13px; }
.sim-ui .metric strong, .sim-ui .portal-metrics strong { font-size: clamp(22px, 2.1vw, 30px); font-weight: 600; letter-spacing: 0; margin: 14px 0 10px; overflow-wrap: anywhere; }
.sim-ui .metric.primary strong { color: var(--blue); }
.sim-ui .metric div, .sim-ui .metric.primary div { color: var(--muted); font-size: 12px; }
.sim-ui .metric small { font-size: 10px; color: var(--muted); opacity: 1; }
.sim-ui .trade-grid {
  grid-template-columns: minmax(360px, .48fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.sim-ui .trade-grid > .trade-holdings { grid-column: 1; grid-row: 1; }
.sim-ui .trade-grid > #trade { grid-column: 2; grid-row: 1; }
.sim-ui .sidebar .rules-nav { border: 0; background: transparent; text-align: left; width: 100%; font-family: inherit; }
.sim-ui #trade .book-side button {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 6px;
  padding: 7px 4px;
  font-variant-numeric: tabular-nums;
}
.sim-ui #trade .book-side button strong { grid-column: 3; grid-row: 1; text-align: right; justify-self: end; white-space: nowrap; }
.sim-ui #trade .book-side button small { grid-column: 2; grid-row: 1; text-align: left; justify-self: start; white-space: nowrap; }
.sim-ui .quote-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px; margin-bottom: 6px; border-top: 1px solid var(--line); font-size: 12px; }
.sim-ui .quote-limits > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.sim-ui .quote-limits strong { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-ui .quote-limits button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; width: 100%; border: 0; border-radius: 5px; background: transparent; color: inherit; padding: 0 4px; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left; }
.sim-ui .quote-limits button:hover:not(:disabled) { background: #eef3ff; }
.sim-ui .quote-limits button:disabled { color: var(--muted); opacity: 1; }
.sim-ui #trade { container: trade-entry / inline-size; scroll-margin-top: 16px; padding-block: 16px; }
.sim-ui .trade-market, .sim-ui .trade-ticket { min-width: 0; }
.sim-ui .kline-placeholder { padding: 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.sim-ui .kline-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sim-ui .kline-heading h3 { font-size: 13px; font-weight: 500; margin: 0; color: #596579; }
.sim-ui .kline-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; height: 100px; color: #8791a2; font-size: 12px; }
.sim-ui .kline-empty svg { color: #b8c5d8; }
.sim-ui .trade-request { margin: 0 0 6px; padding: 4px 0; border-top: 1px solid var(--line); }
.sim-ui #trade .trade-request .request-label { margin: 0; font-size: 12px; line-height: 18px; }
.sim-ui #trade .trade-request input { margin-top: 4px; font-size: 11px; }
.sim-ui #orders { scroll-margin-top: 20px; }
.sim-ui[data-section="orders"] #orders { min-height: calc(100dvh - 40px); }
.sim-ui .rules-inline-open { display: inline-block; margin-left: 10px; color: var(--blue); font-size: 11px; line-height: 18px; }
.sim-ui .trade-options { margin: 0 0 10px; }
.sim-ui .trade-options-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sim-ui .trade-options-heading .button { min-height: 24px; padding: 1px 8px; font-size: 12px; }
.sim-ui .trade-options-heading .rules-inline-open { margin: 0; }
.sim-ui #inline-condition-fields { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--section); }
.sim-ui #trade #inline-condition-fields label { margin-bottom: 8px; }
.sim-ui #inline-condition-fields input, .sim-ui #inline-condition-fields select { margin-top: 5px; }
.sim-ui #inline-condition-fields .hint { line-height: 1.7; }
.sim-ui #trade #order-type-label { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 8px; }
.sim-ui #trade #order-type-label > span { flex-basis: 100%; font-size: 12px; }
.sim-ui #trade #order-type-label .order-type-switch { flex: 0 0 144px; width: 144px; max-width: 100%; margin: 0; }
.sim-ui #trade #order-type-label .quick-quantities { flex: 0 0 auto; max-width: 100%; gap: 6px; margin: 0; }
.sim-ui #trade #order-type-label .quick-quantities .button { height: 38px; min-height: 38px; padding: 8px 10px; font-size: 12px; line-height: 20px; }
.sim-ui .cancel-mode .trade-ticket > :not(.stock-label):not(#quick-cancel-panel) { display: none !important; }
@container trade-entry (min-width: 640px) {
  .sim-ui #trade-fields > .trade-fields-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: max-content 1fr; gap: 10px 20px; min-height: 540px; align-items: stretch; }
  .sim-ui #trade-fields > .trade-fields-layout > .side-switch { grid-column: 2; grid-row: 1; margin: 0; }
  .sim-ui #trade .side-switch { padding: 3px; }
  .sim-ui #trade .side-switch button { padding: 7px; }
  .sim-ui .trade-market { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; }
  .sim-ui .trade-ticket { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; }
  .sim-ui #trade .stock-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; margin-bottom: 8px; }
  .sim-ui #trade .stock-search { grid-column: 1 / -1; grid-row: 2; }
  .sim-ui #trade .stock-suggestions { top: 0; left: auto; right: calc(100% + 20px); width: 100%; }
  .sim-ui #trade .stock-label > small { grid-column: 2; grid-row: 1; min-height: 0; max-width: 180px; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .sim-ui #trade .quote-box { display: flex; flex-direction: column; flex: 1; padding: 12px; margin: 0; }
  .sim-ui #trade .quote-heading { margin-bottom: 8px; flex-wrap: wrap; gap: 4px; }
  .sim-ui #trade .quote-interval { margin-right: 4px; }
  .sim-ui #trade .quote-prices button { padding: 6px 4px; }
  .sim-ui #trade .quote-prices strong { font-size: 20px; margin: 2px 0; }
  .sim-ui #trade .five-level-book { margin: 12px 0; flex: 1; }
  .sim-ui #trade .book-side { justify-content: flex-start; gap: 6px; }
  .sim-ui #trade .book-side button { padding: 5px 4px; }
  .sim-ui #trade .order-type-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 12px; }
  .sim-ui #trade .order-type-switch { width: 176px; margin: 0; }
  .sim-ui #trade .form-row { gap: 12px; }
  .sim-ui #trade .form-row label, .sim-ui #trade .validity-label { margin-bottom: 8px; }
  .sim-ui #trade .validity-label small { margin-top: 4px; line-height: 1.5; }
  .sim-ui #trade .quick-quantities { gap: 6px; margin: 0 0 8px; }
  .sim-ui #trade .quick-quantities .hint { font-size: 11px; line-height: 1.5; }
  .sim-ui #trade .quick-quantities .button { min-height: 30px; padding: 4px 12px; }
  .sim-ui #trade .estimate { padding: 8px 12px; margin: 0 0 8px; }
  .sim-ui #trade .fee-estimate { padding: 6px 12px; margin: 0 0 8px; }
  .sim-ui #trade #market-order-status { padding: 6px 10px; margin: 0 0 10px; font-size: 12px; }
  .sim-ui #trade .market-preview { padding: 8px 12px; margin: 0 0 8px; }
  .sim-ui #trade .market-preview-metrics { gap: 6px; margin-top: 6px; }
  .sim-ui #trade .market-preview p { margin-top: 4px; }
  .sim-ui #trade .market-preview strong { font-size: 16px; }
  .sim-ui #trade .market-preview > small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 1.5; }
  .sim-ui #trade #place { margin-top: auto; flex-shrink: 0; }
  .sim-ui #trade-fields.cancel-mode .trade-ticket { min-height: 0; }
  .sim-ui #trade-fields.cancel-mode #quick-cancel-panel { display: flex; flex-direction: column; flex: 1 1 0; contain: size; min-height: 0; }
  .sim-ui #quick-cancel-panel .quick-cancel-heading, .sim-ui #quick-cancel-status { flex-shrink: 0; }
  .sim-ui #quick-cancel-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.sim-ui #trade #quote-readiness:empty { display: none; }
.sim-ui .trade-rules-dialog { width: min(880px, calc(100vw - 48px)); }
.sim-ui .trade-rules-dialog .dialog-heading { position: sticky; top: -24px; z-index: 1; background: #fff; margin: -24px -24px 20px; padding: 24px 24px 16px; border-bottom: 1px solid var(--line); }
.sim-ui .trade-rules-dialog .rules-section { margin: 0 0 20px; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.sim-ui .trade-rules-dialog h3 { margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--blue); color: #253149; font-size: 15px; font-weight: 600; }
.sim-ui .trade-rules-dialog h4 { margin: 12px 0 8px; font-size: 13px; }
.sim-ui .trade-rules-dialog .rules-section p { margin: 8px 0 0; padding: 0; border: 0; font-size: 13px; color: #596579; line-height: 1.9; }
.sim-ui .trade-rules-dialog #estimate-fee-breakdown { font-variant-numeric: tabular-nums; }
@media (max-width: 440px) {
  .sim-ui .trade-rules-dialog .dialog-heading { top: -20px; margin: -20px -20px 20px; padding: 20px 20px 16px; }
}
@media (min-width: 1000px) {
  .sim-ui:not(.portal) main > .metrics { gap: 12px; margin-bottom: 16px; }
  .sim-ui:not(.portal) main > .metrics .metric { padding: 12px 16px; }
  .sim-ui:not(.portal) main > .metrics strong { font-size: 24px; margin: 6px 0; }
  .sim-ui:not(.portal) .account-switcher { padding: 12px 16px; margin-bottom: 16px; }
  .sim-ui:not(.portal) .account-switcher label { display: flex; align-items: center; gap: 12px; flex-basis: 460px; white-space: nowrap; }
  .sim-ui:not(.portal) .account-switcher select { margin-top: 0; }
}
@media (max-width: 1439px) {
  .sim-ui .trade-grid { grid-template-columns: minmax(0, 1fr); }
  .sim-ui .trade-holdings { position: static; }
  .sim-ui .trade-grid > #trade { grid-column: 1; grid-row: 1; }
  .sim-ui .trade-grid > .trade-holdings { grid-column: 1; grid-row: 2; }
}
.sim-ui .asset-panel { margin-bottom: 20px; }
.sim-ui .asset-summary { gap: 20px; margin: 20px 0; }
.sim-ui .asset-summary > div { padding: 0; border: 0; border-radius: 0; background: transparent; }
.sim-ui .asset-summary > div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.sim-ui .asset-summary span { font-size: 12px; color: #596579; }
.sim-ui .asset-summary strong { font-size: 24px; font-weight: 600; overflow-wrap: anywhere; }
.sim-ui .chart-line { stroke: var(--blue); }
.sim-ui .asset-chart circle { fill: var(--blue); }
.sim-ui .asset-chart svg { min-width: 0; }
.sim-ui .chart-grid { stroke: #edf1f6; }
.sim-ui .chart-empty, .sim-ui .chart-single { background: var(--section); border-radius: 8px; }
.sim-ui .button { min-height: 38px; height: auto; border: 1px solid transparent; border-radius: 7px; padding: 8px 16px; font-size: 13px; line-height: 20px; font-weight: 500; }
.sim-ui .button.secondary { border-color: var(--control); background: #fff; color: #596579; }
.sim-ui .button.secondary:hover:not(:disabled) { border-color: #91caff; color: var(--blue); background: #f7faff; }
.sim-ui .button.buy-button { background: var(--red); }
.sim-ui .button.sell-button { background: var(--green); }
.sim-ui .cancel-desk { padding: 20px; }
.sim-ui .cancel-desk-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sim-ui .cancel-desk-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sim-ui .cancel-desk-filters > label { margin: 0; flex: 0 1 160px; }
.sim-ui .cancel-desk-filters input, .sim-ui .cancel-desk-filters select { margin-top: 6px; }
.sim-ui .cancel-desk-filters .cancel-desk-check { display: flex; align-items: center; align-self: center; gap: 6px; flex: 0 0 auto; font-size: 12px; }
.sim-ui .cancel-desk-check input, .sim-ui .cancel-desk-table input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.sim-ui #cancel-orders-page .cancel-desk-toolbar { align-items: center; margin-bottom: 16px; padding-right: 17px; }
.sim-ui #cancel-orders-page .cancel-desk-refresh-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.sim-ui #cancel-orders-page .cancel-desk-filters { align-items: flex-end; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--section); }
.sim-ui #cancel-orders-page .cancel-desk-filters > label { display: flex; flex-direction: column; gap: 6px; flex: 0 1 180px; min-width: 140px; margin: 0; font-size: 12px; }
.sim-ui #cancel-orders-page .cancel-desk-filters input:not([type="checkbox"]),
.sim-ui #cancel-orders-page .cancel-desk-filters select { margin: 0; height: 38px; }
.sim-ui #cancel-orders-page .cancel-desk-search-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sim-ui #cancel-orders-page .cancel-desk-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 38px; margin: 0 4px 0 0; }
.sim-ui #cancel-orders-page .cancel-desk-options .cancel-desk-check { display: flex; align-items: center; gap: 6px; margin: 0; min-height: 38px; white-space: nowrap; font-size: 12px; }
.sim-ui #cancel-orders-page .cancel-desk-options input { margin: 0; flex-shrink: 0; }
@media(max-width:760px) {
 .sim-ui #cancel-orders-page .cancel-desk-toolbar { padding-right: 13px; }
 .sim-ui #cancel-orders-page .cancel-desk-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
 .sim-ui #cancel-orders-page .cancel-desk-toolbar .button { min-width: 0; padding-inline: 8px; }
 .sim-ui #cancel-orders-page .cancel-desk-refresh-controls { grid-column: 1 / -1; margin-left: 0; }
 .sim-ui #cancel-orders-page .cancel-desk-filters { padding: 12px; gap: 10px; }
 .sim-ui #cancel-orders-page .cancel-desk-filters > label { flex: 1 1 100px; min-width: 0; }
 .sim-ui #cancel-orders-page .cancel-desk-filters > label:first-child { flex-basis: 100%; }
 .sim-ui #cancel-orders-page .cancel-desk-search-actions { flex-basis: 100%; }
}
.sim-ui .cancel-desk-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; color: #596579; font-size: 12px; }
.sim-ui .cancel-desk-summary > :last-child { flex-basis: 100%; color: var(--muted); }
.sim-ui #cancel-desk-status { min-height: 30px; margin: 10px 0; }
.sim-ui .cancel-desk-table { min-width: 1160px; }
.sim-ui .cancel-desk-table th, .sim-ui .cancel-desk-table td { padding: 12px 8px; }
.sim-ui .cancel-desk-table .text-button { float: none; margin-right: 8px; font-size: 12px; }
.sim-ui .cancel-desk-table tr.is-focused { background: #f0f5ff; box-shadow: inset 3px 0 var(--blue); }
.sim-ui .cancel-desk-table tbody tr:hover { background: #f7faff; }
.sim-ui .cancel-desk-table tbody tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.sim-ui #cancel-desk-recovery, .sim-ui #cancel-desk-reentry { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sim-ui .cancel-desk-table td:last-child { min-width: 210px; white-space: normal; }
.sim-ui .cancel-desk-table [data-desk-row-reenter] { white-space: nowrap; }
.sim-ui #cancel-desk-dialog { width: min(620px, calc(100vw - 32px)); }
.sim-ui .cancel-desk-confirm-list { max-height: 280px; overflow-y: auto; margin: 12px 0; padding: 10px 12px; border-radius: 7px; background: var(--section); }
@media (max-width: 760px) {
  .sim-ui .cancel-desk { padding: 14px; }
  .sim-ui .cancel-desk-filters > label { flex: 1 1 130px; }
  .sim-ui .cancel-desk-toolbar .button { flex: 1 0 auto; }
}
.sim-ui .submit { margin-top: 20px; }
.sim-ui label { color: #596579; font-size: 13px; margin-bottom: 20px; }
.sim-ui label small { font-size: 12px; color: var(--muted); }
.sim-ui input:where(:not([type="checkbox"]):not([type="hidden"])), .sim-ui select {
  height: 38px; width: 100%; min-width: 0; max-width: 100%; margin-top: 8px; padding: 7px 12px;
  border: 1px solid var(--control); border-radius: 7px; color: #29354a; background: #fff; font: inherit; font-size: 13px; line-height: 22px;
}
.sim-ui select { text-overflow: ellipsis; }
.sim-ui input:focus, .sim-ui select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 2px #1677ff14; }
.sim-ui input:disabled, .sim-ui select:disabled { background: var(--section); color: var(--muted); }
.sim-ui input::placeholder { color: #8791a2; }
.sim-ui .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sim-ui .form-row label { min-width: 0; }
.sim-ui .hint, .sim-ui .dialog-note, .sim-ui .position-note, .sim-ui .holdings-note { font-size: 12px; color: var(--muted); line-height: 1.8; }
.sim-ui .text-button, .sim-ui .row-cancel { float: none; color: var(--blue); font-size: 12px; }
.sim-ui .request-label > .text-button { float: right; }
.sim-ui .row-cancel { color: #cf1322; }
.sim-ui .request-label input { font-family: Inter, Consolas, sans-serif; }
.sim-ui .quote-box, .sim-ui .estimate, .sim-ui .matching-policy, .sim-ui .market-preview { background: var(--section); border-color: var(--line); border-radius: 8px; }
.sim-ui .quote-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sim-ui .quote-prices button { min-width: 0; border-color: var(--control); }
.sim-ui .quote-prices strong { font-size: 22px; overflow-wrap: anywhere; }
.sim-ui .five-level-book .asks strong { color: var(--red); }
.sim-ui .five-level-book .bids strong { color: var(--green); }
.sim-ui .side-switch button.selected, .sim-ui .chart-switch .active { box-shadow: none; border: 1px solid var(--line); }
.sim-ui .order-type-switch, .sim-ui .asset-period-switch { border-color: var(--control); border-radius: 7px; height: 38px; }
.sim-ui .order-type-switch button { padding: 7px 16px; }
.sim-ui .order-type-switch button.active, .sim-ui .asset-period-switch button.active { background: var(--blue); box-shadow: none; }
.sim-ui .asset-period-switch button { font-size: 13px; }
.sim-ui .asset-range { gap: 16px; }
.sim-ui .asset-range label { margin: 0; }
.sim-ui .asset-range input, .sim-ui .asset-range select { margin: 0; min-width: 0; }
.sim-ui .asset-range .button, .sim-ui .order-refresh-controls .button, .sim-ui .order-tools .lookup input, .sim-ui .order-tools .lookup button, .sim-ui .order-tools .pagination .button { height: 38px; }
.sim-ui .account-switcher { gap: 16px; }
.sim-ui .account-switcher label { display: block; min-width: 0; flex: 0 1 380px; margin: 0; }
.sim-ui .account-switcher select { min-width: 0; }
.sim-ui .notice { background: #f0f5ff; border-color: #d6e4ff; color: #365c91; margin-bottom: 20px; }
.sim-ui .notice.error { background: #fff1f0; border-color: #ffccc7; color: #cf1322; }
.sim-ui .tag, .sim-ui .status { display: inline-block; font-size: 12px; line-height: 18px; border-radius: 5px; padding: 2px 8px; border: 1px solid #e5e7eb; color: #6b7280; background: #f8fafc; }
.sim-ui .tag:not(.subtle), .sim-ui .status.QUEUED, .sim-ui .status.TRIGGERED { color: #1677ff; background: #f0f5ff; border-color: #d6e4ff; }
.sim-ui .status.FILLED { color: #389e0d; background: #f6ffed; border-color: #d9f7be; }
.sim-ui .status.PARTIAL, .sim-ui .status.WAITING, .sim-ui .status.CANCEL_REQUESTED { color: #d46b08; background: #fff7e6; border-color: #ffe7ba; }
.sim-ui .status.REJECTED { color: #cf1322; background: #fff1f0; border-color: #ffccc7; }
.sim-ui .status.CANCELLED, .sim-ui .status.EXPIRED { color: #6b7280; background: #f8fafc; border-color: #e5e7eb; }
.sim-ui .tag.role-TEACHER { color: #6042c5; background: #f0ecff; border-color: #ded5fa; }
.sim-ui .tag.role-USER { color: #08798e; background: #e4f8fb; border-color: #c5e9ef; }
.sim-ui .tag.role-unknown { color: #6b7280; background: #f8fafc; border-color: #e5e7eb; }
.sim-ui .table-wrap { min-width: 0; max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.sim-ui table { width: 100%; font-size: 13px; }
.sim-ui th { text-align: center; background: var(--section); color: #596579; font-size: 12px; font-weight: 500; padding: 12px; }
.sim-ui td { text-align: center; color: #29354a; padding: 14px 12px; border-bottom: 1px solid #edf1f6; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.sim-ui td small { color: var(--muted); font-size: 12px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.sim-ui tbody tr:last-child td { border-bottom: 0; }
.sim-ui tbody tr:hover td { background: #f7faff; }
.sim-ui td .text-button { float: none; }
.sim-ui td .order-wait-reason { margin: 8px auto 0; color: #d46b08; }
.sim-ui .direction.BUY, .sim-ui .pnl-positive { color: var(--red); }
.sim-ui .direction.SELL, .sim-ui .pnl-negative { color: var(--green); }
.sim-ui #position-page .order-panel { container: positions-table / inline-size; }
.sim-ui #position-page .table-wrap { overflow: visible; }
.sim-ui #position-page .position-table { min-width: 0; width: 100%; table-layout: fixed; white-space: normal; }
.sim-ui #position-page .position-table th, .sim-ui #position-page .position-table td { min-width: 0; max-width: none; padding: 12px 4px; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; font-size: 12px; }
.sim-ui #position-page .position-table th:nth-child(1) { width: 3%; }
.sim-ui #position-page .position-table th:nth-child(2), .sim-ui #position-page .position-table th:nth-child(4), .sim-ui #position-page .position-table th:nth-child(5), .sim-ui #position-page .position-table th:nth-child(18) { width: 5%; }
.sim-ui #position-page .position-table th:nth-child(3) { width: 6%; }
.sim-ui #position-page .position-table th:nth-child(6), .sim-ui #position-page .position-table th:nth-child(7), .sim-ui #position-page .position-table th:nth-child(16), .sim-ui #position-page .position-table th:nth-child(17) { width: 4.5%; }
.sim-ui #position-page .position-table th:nth-child(8), .sim-ui #position-page .position-table th:nth-child(11), .sim-ui #position-page .position-table th:nth-child(13), .sim-ui #position-page .position-table th:nth-child(15) { width: 5.5%; }
.sim-ui #position-page .position-table th:nth-child(9), .sim-ui #position-page .position-table th:nth-child(14) { width: 8%; }
.sim-ui #position-page .position-table th:nth-child(10), .sim-ui #position-page .position-table th:nth-child(12) { width: 7.5%; }
.sim-ui #position-page .position-table th:first-child { border-top-left-radius: 8px; }
.sim-ui #position-page .position-table th:last-child { border-top-right-radius: 8px; }
@container positions-table (max-width: 699px) {
  .sim-ui #position-page .table-wrap { border: 0; }
  .sim-ui #position-page .position-table, .sim-ui #position-page .position-table tbody { display: block; }
  .sim-ui #position-page .position-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sim-ui #position-page .position-table tbody { display: grid; gap: 10px; }
  .sim-ui #position-page .position-table tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; }
  .sim-ui #position-page .position-table td { display: flex; flex-direction: column; justify-content: center; padding: 7px 5px; border-bottom: 1px solid var(--line); font-size: 11px; }
  .sim-ui #position-page .position-table td::before { content: attr(data-label); margin-bottom: 4px; color: #596579; font-size: 10px; font-weight: 400; }
  .sim-ui #position-page .position-table td:first-child { align-items: center; background: var(--section); border-radius: 8px 0 0 0; }
}
@container positions-table (max-width: 519px) {
  .sim-ui #position-page .position-table tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container positions-table (max-width: 359px) {
  .sim-ui #position-page .position-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container positions-table (min-width:700px) and (max-width:949px) {
 .sim-ui #position-page .position-table th,.sim-ui #position-page .position-table td { padding: 7px 2px; font-size: 10px; }
 .sim-ui #position-page .position-table .position-select { font-size: inherit; white-space: nowrap; }
 .sim-ui #position-page .position-table td:nth-child(15) { font-size: 9.5px; white-space: nowrap; }
 .sim-ui #position-page .position-table [data-position-menu] { padding-inline: 3px; }
 .sim-ui #position-page .position-table small { font-size: 9px; line-height: 1.5; }
}
.sim-ui .order-panel { padding-bottom: 20px; }
.sim-ui .portal-pager, .sim-ui .pagination { flex-wrap: wrap; gap: 12px; font-size: 12px; color: #596579; }
.sim-ui .portal-pager { margin-top: 20px; }
.sim-ui .holdings-columns > span, .sim-ui .holding-cell, .sim-ui .holding-stock { text-align: center; }
.sim-ui .holdings-columns { background: var(--section); color: #596579; }
.sim-ui .holding-card strong { font-size: 13px; }
.sim-ui .holding-card small { font-size: 12px; color: var(--muted); }
.sim-ui .holding-card .pnl-positive { color: var(--red); }
.sim-ui .holding-card .pnl-negative { color: var(--green); }
.sim-ui .holding-card:hover { background: #f7faff; }
.sim-ui .holding-card.is-selected { background: #f0f5ff; }
.sim-ui .trade-holdings { top: 20px; }
.sim-ui dialog { width: min(640px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 24px; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px #25314914; }
.sim-ui dialog::backdrop { background: #25314966; backdrop-filter: none; }
.sim-ui .dialog-heading { margin-bottom: 20px; gap: 16px; }
.sim-ui .dialog-heading h2 { font-size: 16px; }
.sim-ui .dialog-intro { margin: 0 0 20px; font-size: 13px; }
.sim-ui .dialog-buttons { position: sticky; bottom: -24px; margin: 20px -24px -24px; padding: 16px 24px; border-top: 1px solid var(--line); background: #fff; }
.sim-ui .form-section + .form-section { border-top: 1px solid var(--line); padding-top: 20px; }
.sim-ui .form-section h3, .sim-ui .order-detail-dialog h3 { margin: 0 0 20px; font-size: 15px; font-weight: 500; }
.sim-ui .dialog-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.sim-ui .dialog-form-grid label { min-width: 0; }
.sim-ui .captcha-row input { flex: 1; width: 0; }
.sim-ui .captcha-row button { height: 38px; flex: 0 0 124px; }
.sim-ui .captcha-row img { height: 36px; object-fit: contain; }
.sim-ui .portal-history { width: min(1080px, calc(100vw - 48px)); }
.sim-ui .portal-history .table-wrap { max-height: 55dvh; }
.sim-ui .portal-history th { position: sticky; top: 0; z-index: 1; }
.sim-ui .order-detail-dialog { width: min(880px, calc(100vw - 48px)); }
.sim-ui .order-detail-dialog[open] { display: flex; flex-direction: column; height: min(820px, calc(100dvh - 48px)); overflow: hidden; }
.sim-ui #order-detail-content { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sim-ui .order-detail-summary { flex: 0 1 auto; max-height: 42dvh; overflow-y: auto; }
.sim-ui .order-detail-summary > p { margin: 0 0 10px; }
.sim-ui .detail-tabs { display: flex; flex-shrink: 0; gap: 16px; border-bottom: 1px solid var(--line); margin: 4px 0 16px; }
.sim-ui .detail-tabs button { border-radius: 0; border: 0; border-bottom: 2px solid transparent; }
.sim-ui .detail-tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: currentColor; }
.sim-ui .order-detail-page { flex: 1; min-height: 60px; overflow: auto; overscroll-behavior: contain; }
.sim-ui .detail-pagination { flex-shrink: 0; margin: 16px 0 0; }
@media(max-width:600px) { .sim-ui .order-detail-dialog[open] { width: calc(100vw - 24px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); padding: 16px; } .sim-ui .detail-pagination { gap: 8px; } }
.sim-ui .portal-confirm input, .sim-ui .auto-label input { accent-color: var(--blue); width: 16px; height: 16px; }
.sim-ui .portal-actions { justify-content: center; align-items: flex-start; gap: 12px; min-width: 190px; }
.sim-ui .portal-actions button { color: var(--blue); font-size: 12px; }
.sim-ui .row-more { color: var(--blue); font-size: 12px; }
.sim-ui .row-more summary { cursor: pointer; padding: 5px 0; }
.sim-ui .row-more button { display: block; width: 100%; text-align: center; }
.sim-ui .position-user-group th { text-align: center; background: #f0f5ff; border-top: 10px solid #fff; }
.sim-ui .position-holding-row td:first-child { padding-left: 12px; }
.sim-ui .position-owner-filter { background: #f0f5ff; color: var(--blue); border-color: #d6e4ff; }

/* Container-measured, one-row queries. The action slot never overlays fields. */
.sim-ui .query-panel {
  display: grid; grid-template-columns: repeat(var(--query-columns, 1), minmax(0, 1fr)) var(--query-actions-width, auto);
  gap: 16px; align-items: end; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--line);
}
.sim-ui .query-panel > label { display: block; min-width: 0; width: auto; margin: 0; color: #596579; font-size: 12px; }
.sim-ui .query-panel input, .sim-ui .query-panel select { min-width: 0; width: 100%; height: 38px; margin: 8px 0 0; }
.sim-ui .query-panel .query-actions { grid-column: -2 / -1; grid-row: 1; display: flex; width: max-content; max-width: 100%; gap: 10px; align-items: center; flex-wrap: wrap; }
.sim-ui .query-panel .button { height: 38px; white-space: nowrap; }
.sim-ui .query-toggle { height: 38px; border: 0; background: none; padding: 0 4px; color: var(--blue); font: inherit; font-size: 12px; white-space: nowrap; }
.sim-ui .query-panel.query-stacked { grid-template-columns: repeat(var(--query-columns, 1), minmax(0, 1fr)); }
.sim-ui .query-panel.query-stacked .query-actions { grid-column: 1 / -1; grid-row: auto; }

@media (max-width: 1100px) {
  .sim-ui main { padding: 24px; }
  .sim-ui header { padding: 0 24px; }
  .sim-ui .trade-grid { grid-template-columns: minmax(0, 1fr); }
  .sim-ui .trade-holdings { position: static; }
  .sim-ui .portal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sim-ui main { padding: 20px 16px; }
  .sim-ui header { padding: 0 16px; height: auto; min-height: 56px; }
  .sim-ui .header-actions { flex-wrap: wrap; gap: 10px; padding: 8px 0; }
  .sim-ui .sidebar { padding: 16px; }
  .sim-ui.portal .sidebar nav { width: 100%; }
  .sim-ui .page-heading { align-items: flex-start; }
  .sim-ui .page-heading h1 { font-size: 21px; }
  .sim-ui .page-heading > .button { flex-shrink: 0; }
  .sim-ui .panel, .sim-ui .metric, .sim-ui .portal-metrics article { padding: 16px; }
  .sim-ui .metrics { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sim-ui .metric.primary { grid-column: auto; }
  .sim-ui .metric strong { font-size: 26px; }
  .sim-ui .asset-summary { gap: 12px; }
  .sim-ui .asset-summary > div + div { padding-left: 12px; }
  .sim-ui .asset-summary strong { font-size: 18px; }
  .sim-ui .asset-range { align-items: end; }
  .sim-ui .asset-range label { flex: 1 1 100%; }
  .sim-ui #asset-period-value { width: 100%; }
  .sim-ui .account-switcher label { flex-basis: 100%; }
  .sim-ui .account-switcher .button { margin-left: 0; }
  .sim-ui .portal-pager { justify-content: flex-end; }
  .sim-ui .portal-actions { min-width: 190px; }
  .sim-ui .order-refresh-controls { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 440px) {
  .sim-ui .dialog-form-grid, .sim-ui .form-row { grid-template-columns: minmax(0, 1fr); }
  .sim-ui .asset-summary { grid-template-columns: minmax(0, 1fr); }
  .sim-ui .asset-summary > div + div { border-left: 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
  .sim-ui dialog { padding: 20px; }
  .sim-ui .dialog-buttons { bottom: -20px; margin: 20px -20px -20px; padding: 16px 20px; }
  .sim-ui .lookup { min-width: 0; }
  .sim-ui .lookup input { width: 0; flex: 1; }
}

/* Trading entry: keep account controls in the header and the desk in the first view. */
.sim-ui:not(.portal) .workspace > header { height: 56px; padding: 0 20px; gap: 12px; }
.sim-ui:not(.portal) .breadcrumb { white-space: nowrap; }
.sim-ui:not(.portal) .breadcrumb b { color: #596579; font-weight: 500; }
.sim-ui:not(.portal) .header-actions { gap: 8px; min-width: 0; }
.sim-ui:not(.portal) .connection.online { font-size: 0; gap: 0; }
.sim-ui:not(.portal) .header-account { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sim-ui:not(.portal) header .account-switcher { display: flex; align-items: center; gap: 6px; padding: 0; margin: 0; border: 0; background: none; }
.sim-ui:not(.portal) header .account-switcher label { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; margin: 0; font-size: 12px; white-space: nowrap; }
.sim-ui:not(.portal) header .account-switcher select { width: 220px; height: 34px; margin: 0; padding-block: 5px; }
.sim-ui:not(.portal) header #account-create-open { width: 32px; height: 32px; min-height: 32px; padding: 0; margin: 0; flex-shrink: 0; font-size: 18px; }
.sim-ui:not(.portal) header .quiet { white-space: nowrap; padding: 6px; }
.sim-ui.hide-times .time-detail { display: none !important; }
.sim-ui:not(.portal) .sync-times { margin: 0 0 10px; font-size: 11px; }
.sim-ui:not(.portal) .sync-times:empty { display: none; }
.sim-ui #quote-time:empty, .sim-ui.hide-times #quote-time:not(:has(.quote-warning)):has(.time-detail) { display: none; }
.sim-ui .quote-warning { display: block; }
.sim-ui[data-page="trade"] main { max-width: 1480px; padding: 24px 32px; }
.sim-ui[data-page="trade"] main > .page-heading { display: none; }
.sim-ui .positions-workspace { margin-bottom: 20px; }
.sim-ui .position-select { border: 0; padding: 0; background: transparent; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; }
.sim-ui[data-page="positions"] #trade { padding: 16px; }
.sim-ui[data-page="positions"] #trade-fields > .trade-fields-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sim-ui[data-page="positions"] #trade .side-switch { margin: 0; }
.sim-ui[data-page="positions"] #trade .trade-market > .quote-box { margin: 0; }
.sim-ui[data-page="positions"] #trade .kline-placeholder { min-width: 0; margin: 0; display: flex; flex-direction: column; }
.sim-ui[data-page="positions"] #trade .kline-empty { flex: 1; min-height: 220px; }
.sim-ui[data-page="trade"] main > .metrics { gap: 12px; margin-bottom: 16px; }
.sim-ui[data-page="trade"] main > .metrics .metric { padding: 12px 16px; }
.sim-ui[data-page="trade"] main > .metrics .metric > span { white-space: nowrap; }
.sim-ui[data-page="trade"] main > .metrics strong { margin: 6px 0; font-size: 24px; line-height: 30px; }
.sim-ui[data-page="trade"] #notice { margin-bottom: 12px; padding: 8px 12px; }
.sim-ui .trade-holdings .holdings-columns, .sim-ui .holding-row { grid-template-columns: 32px minmax(0, 1.2fr) minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, .85fr); column-gap: 6px; padding-inline: 4px; }
.sim-ui .holding-row { display: grid; align-items: center; border-bottom: 1px solid var(--line); border-radius: 8px; }
.sim-ui .holding-row:has(.is-selected) { background: #f0f5ff; box-shadow: inset 3px 0 var(--blue); }
.sim-ui .holding-row:hover { background: #f7faff; }
.sim-ui .holding-row .holding-card { grid-column: 2 / -1; grid-row: 1; grid-template-columns: subgrid; padding-inline: 0; border-bottom: 0; background: transparent; box-shadow: none; }
.sim-ui .trade-holdings .holdings-columns { border-radius: 8px; }
.sim-ui .holding-action { grid-column: 1; grid-row: 1; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 5px; color: var(--blue); background: transparent; font-size: 16px; }
.sim-ui .holding-action:hover, .sim-ui .holding-action:focus-visible, .sim-ui .holding-action[aria-expanded="true"] { color: var(--blue); background: #eaf2ff; }
.sim-ui .trade-holdings .panel-heading, .sim-ui .trade-holdings .holdings-columns { flex-shrink: 0; }
.sim-ui .holding-card strong, .sim-ui .holding-card small { overflow: hidden; text-overflow: ellipsis; }
.sim-ui #trade .estimate > strong { white-space: nowrap; flex-shrink: 0; }
.sim-ui[data-page="assets"] main { max-width: 1800px; margin-inline: auto; }
.sim-ui[data-page="assets"] main > .page-heading { display: none; }
.sim-ui .performance-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; }
.sim-ui .performance-heading h2 { margin: 0; font-size: 24px; }
.sim-ui .performance-heading p { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.sim-ui .performance-heading .asset-range { margin: 0; border: 0; padding: 0; gap: 12px; }
.sim-ui .performance-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.sim-ui .performance-metric { min-width: 0; padding: 20px; background: white; border: 1px solid var(--line); border-radius: 10px; }
.sim-ui .performance-metric > span { display: block; color: #596579; font-size: 12px; }
.sim-ui .performance-metric > strong { display: block; margin: 16px 0 10px; font-size: clamp(20px,1.5vw,28px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sim-ui .cumulative-metrics #asset-total { color: var(--blue); }
.sim-ui .performance-metric > small { display: block; min-height: 18px; font-size: 12px; color: var(--muted); }
.sim-ui .performance-metric > strong#asset-gain { margin: 0 0 8px; font-size: 15px; }
.sim-ui .period-heading { padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--line); }
.sim-ui .period-heading h3 { margin: 0; font-size: 18px; }
.sim-ui .performance-metrics.period-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media(max-width:760px){.sim-ui .performance-metrics.period-metrics{grid-template-columns:1fr}.sim-ui .period-heading{align-items:flex-start;gap:16px;flex-direction:column}}
.sim-ui .metric > .metric-meta, .sim-ui .performance-metric > .metric-meta, .sim-ui .metric-meta { display: block; min-height: 0; margin-top: 4px; font-size: 10px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.sim-ui[data-page="positions"] .position-metrics .metric > .metric-meta { display: block; font-size: 10px; }
.sim-ui .metric-meta[data-state="error"] { color: #cf1322; }
.sim-ui .metric-meta[data-state="unavailable"], .sim-ui .metric-meta[data-state="partial"] { color: #8c6b32; }
.sim-ui .analysis-stat-list > div:has(> .metric-meta) { flex-wrap: wrap; row-gap: 0; }
.sim-ui .analysis-stat-list > div > .metric-meta, .sim-ui .panel-heading > .metric-meta { flex-basis: 100%; text-align: right; }
@media (min-width: 761px) and (max-height: 800px) {
 .sim-ui[data-page="positions"] .position-metrics { padding-block: 6px; row-gap: 4px; }
 .sim-ui[data-page="positions"] .position-metrics .metric strong { font-size: 15px; line-height: 20px; }
 .sim-ui[data-page="positions"] .position-metrics .metric > .metric-meta { margin-top: 2px; font-size: 9px; line-height: 12px; }
}
.sim-ui .performance-charts { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1.15fr) minmax(280px,.85fr); gap: 16px; margin-bottom: 20px; }
.sim-ui .performance-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.sim-ui .performance-page .panel { padding: 20px; margin: 0; min-width: 0; }
.sim-ui .performance-page .panel-heading { margin-bottom: 16px; gap: 10px; }
.sim-ui .performance-page .panel-heading h3 { margin: 0; font-size: 15px; white-space: nowrap; }
.sim-ui .performance-page .panel-heading .hint { font-size: 12px; text-align: right; }
.sim-ui .performance-page .asset-chart { overflow: hidden; }
.sim-ui .performance-page .asset-chart svg { min-width: 0; height: auto; min-height: 230px; }
.sim-ui .performance-page .asset-chart text { font-size: 20px; }
.sim-ui .performance-page .chart-line,.sim-ui .performance-page .drawdown-line { stroke-width: 3; }
.sim-ui .performance-page .chart-empty,.sim-ui .performance-page .chart-single { min-height: 230px; height: auto; }
.sim-ui .performance-page .drawdown-line { fill: none; stroke: #2b9b83; stroke-width: 2; }
.sim-ui .performance-page .drawdown-area { fill: #2b9b8310; }
.sim-ui #drawdown-chart circle { fill: #2b9b83; }
.sim-ui .analysis-stat-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.sim-ui .analysis-stat-list > div:last-child { border: 0; }
.sim-ui .analysis-stat-list span { color: #7b8ba5; }
.sim-ui .analysis-stat-list strong { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sim-ui .performance-page .hint { line-height: 1.8; }
.sim-ui .analysis-fee-row { margin: 16px 0 22px; font-size: 12px; }
.sim-ui .analysis-fee-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sim-ui .analysis-bar { height: 5px; background: #edf2fb; border-radius: 6px; overflow: hidden; }
.sim-ui .analysis-bar i { height: 100%; display: block; border-radius: inherit; background: #719ef0; }
.sim-ui .analysis-stock-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 12px; }
.sim-ui .analysis-stock-row small { display: block; color: var(--muted); margin-top: 6px; font-size: 12px; }
.sim-ui .analysis-stock-row > span { flex-shrink: 0; }
.sim-ui .analysis-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sim-ui .analysis-error > span { flex: 1 1 240px; overflow-wrap: anywhere; }
.sim-ui .analysis-error > button { flex-shrink: 0; }
.sim-ui .performance-notes { padding: 12px 2px; }
.sim-ui .performance-notes p { margin: 5px 0; font-size: 12px; color: var(--muted); }
@media(max-width:1500px) {
 .sim-ui .performance-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .sim-ui .performance-charts { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .sim-ui .performance-trades { grid-column: 1 / -1; }
 .sim-ui .performance-trades .analysis-stat-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 24px; }
 .sim-ui .performance-heading { flex-wrap: wrap; }
}
@media(max-width:1050px) {
 .sim-ui .performance-details { grid-template-columns: minmax(0,1fr); }
 .sim-ui .performance-heading .asset-range { flex-wrap: wrap; }
}
@media(max-width:760px) {
 .sim-ui .performance-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
 .sim-ui .performance-metric { padding: 14px; }
 .sim-ui .performance-charts { grid-template-columns: minmax(0,1fr); }
 .sim-ui .performance-trades .analysis-stat-list { grid-template-columns: minmax(0,1fr); }
 .sim-ui .performance-heading .asset-range { width: 100%; }
 .sim-ui .performance-page .asset-period-navigation { flex-wrap: wrap; }
}
@media (min-width: 1280px) {
  .sim-ui[data-page="trade"] .trade-grid { grid-template-columns: minmax(674px, 1.85fr) minmax(280px, 1.1fr); gap: 16px; align-items: start; }
  .sim-ui[data-page="trade"] .trade-grid > .trade-holdings { grid-column: 2; grid-row: 1; position: static; padding: 16px; align-self: stretch; contain: size; display: flex; flex-direction: column; min-height: 0; }
  .sim-ui[data-page="trade"] .trade-grid > #trade { grid-column: 1; grid-row: 1; padding: 16px; }
  .sim-ui[data-page="trade"] .trade-holdings-list { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; }
  .sim-ui[data-page="trade"] .trade-holdings > .empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .sim-ui[data-page="trade"] .trade-holdings .panel-heading { margin-bottom: 16px; }
}
@media (max-width: 1439px) {
  .sim-ui .trade-holdings .holdings-columns, .sim-ui .holding-row { column-gap: 4px; }
  .sim-ui .holding-card strong, .sim-ui .holding-card small { font-size: 11px; }
  .sim-ui .trade-holdings .holdings-columns { font-size: 10px; }
}
@container trade-entry (min-width: 640px) {
  .sim-ui[data-page="positions"] #trade-fields > .trade-fields-layout { --trade-desk-height: 550px; grid-template-columns: minmax(304px, 1fr) minmax(0, 1fr); grid-template-rows: max-content minmax(0, 1fr); min-height: var(--trade-desk-height); gap: 10px 20px; }
  .sim-ui[data-page="positions"] #trade-fields.cancel-mode > .trade-fields-layout { min-height: max(var(--trade-desk-height), var(--cancel-desk-height, 0px)); }
  .sim-ui[data-page="positions"] #trade-fields > .trade-fields-layout > .side-switch { grid-column: 1; grid-row: 1; }
  .sim-ui[data-page="positions"] #trade .trade-ticket { grid-column: 1; grid-row: 2; }
  .sim-ui[data-page="positions"] #trade .trade-market { grid-column: 2; grid-row: 1 / 3; }
  .sim-ui[data-page="positions"] #trade .kline-placeholder { grid-column: 1 / -1; grid-row: 3; }
  .sim-ui[data-page="positions"] #trade .stock-suggestions { top: 0; left: calc(100% + 20px); right: auto; width: 100%; }
  .sim-ui[data-page="positions"] #trade .trade-market > .quote-box { flex: 1; }
  .sim-ui[data-page="positions"] #trade .five-level-book { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 8px 0; flex: 1; }
  .sim-ui[data-page="positions"] #trade .book-side { gap: 3px; }
  .sim-ui[data-page="positions"] #trade .book-side button { padding: 4px; }
  .sim-ui[data-page="trade"] #trade-fields > .trade-fields-layout { --trade-desk-height: clamp(480px, calc(100dvh - var(--desk-space, 260px)), 600px); grid-template-columns: minmax(304px, 1fr) minmax(0, 1.1fr); min-height: var(--trade-desk-height); gap: 10px 24px; }
  .sim-ui[data-page="trade"] #trade-fields > .trade-fields-layout > .side-switch { grid-column: 1; }
  .sim-ui[data-page="trade"] #trade .trade-ticket { grid-column: 1; }
  .sim-ui[data-page="trade"] #trade .trade-market { grid-column: 2; }
  .sim-ui[data-page="trade"] #trade .stock-suggestions { left: calc(100% + 24px); right: auto; }
  .sim-ui[data-page="trade"] #trade-fields.cancel-mode > .trade-fields-layout { min-height: max(var(--trade-desk-height), var(--cancel-desk-height, 0px)); }
  .sim-ui #trade #order-type-label .order-type-switch { flex-basis: 128px; width: 128px; }
  .sim-ui #trade #order-type-label .quick-quantities .button { padding-inline: 8px; }
  .sim-ui #trade .order-type-switch button { padding-inline: 10px; }
  .sim-ui #trade #order-type-label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sim-ui #trade .market-preview-metrics > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
  .sim-ui #trade .market-preview-metrics span { font-size: 11px; }
  .sim-ui #trade .market-preview-metrics strong { margin-top: 0; font-size: 13px; }
  .sim-ui #trade .market-preview:not(.sell) .market-preview-metrics > div { display: block; }
  .sim-ui #trade .market-preview:not(.sell) .market-preview-metrics strong { margin-top: 2px; }
  .sim-ui #trade .trade-market > .kline-placeholder { display: flex; flex-direction: column; flex: 1; }
  .sim-ui #trade .kline-empty { flex: 1; min-height: 100px; }
  .sim-ui #trade .trade-market > .quote-box { flex: 0 0 auto; }
  .sim-ui #trade .trade-request { margin-top: auto; }
  .sim-ui #trade .trade-options { flex: 1 1 0; min-height: 24px; margin: 0; }
  .sim-ui #trade .trade-options.condition-enabled { flex: 1 0 auto; min-height: 280px; }
  .sim-ui #trade #place { margin-top: 0; }
}
@container trade-entry (min-width: 900px) {
  .sim-ui[data-page="positions"] #trade-fields > .trade-fields-layout { grid-template-columns: minmax(304px, 1fr) minmax(260px, 1fr) minmax(0, 1.3fr); }
  .sim-ui[data-page="positions"] #trade .kline-placeholder { grid-column: 3; grid-row: 1 / 3; }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .sim-ui[data-page="trade"] main { --desk-space: 200px; padding-top: 8px; }
  .sim-ui[data-page="trade"] main > .metrics { margin-bottom: 8px; }
  .sim-ui[data-page="trade"] main > .metrics .metric { padding-block: 8px; }
  .sim-ui[data-page="trade"] main > .metrics strong { margin: 6px 0; font-size: 22px; line-height: 26px; }
  .sim-ui[data-page="trade"] .trade-grid > #trade { padding-block: 12px; }
  .sim-ui #trade .trade-request { padding-block: 2px; }
  .sim-ui #trade .stock-label, .sim-ui #trade .form-row label, .sim-ui #trade .validity-label { margin-bottom: 6px; }
  .sim-ui #trade .estimate { padding-block: 6px; margin-bottom: 6px; }
  .sim-ui #trade .fee-estimate { padding-block: 4px; margin-bottom: 6px; }
  .sim-ui #trade .market-preview { padding-block: 3px; margin-bottom: 4px; }
  .sim-ui #trade .market-preview p { margin-bottom: 2px; }
}
@media (max-width: 1279px) {
  .sim-ui:not(.portal) .workspace > header { flex-wrap: wrap; height: auto; min-height: 56px; padding-block: 8px; }
  .sim-ui:not(.portal) .header-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
  .sim-ui:not(.portal) .connection { font-size: 10px; }
}
@media (max-width: 760px) {
  .sim-ui:not(.portal) .workspace > header { padding: 10px 16px; }
  .sim-ui:not(.portal) .header-actions { justify-content: flex-start; width: 100%; padding: 0; }
  .sim-ui:not(.portal) .header-account { width: 100%; flex-wrap: wrap; }
  .sim-ui:not(.portal) header .account-switcher { flex: 1; min-width: 0; }
  .sim-ui:not(.portal) header .account-switcher label { flex: 1; }
  .sim-ui:not(.portal) header .account-switcher select { width: 100%; }
  .sim-ui[data-page="trade"] main { padding: 12px 16px; }
  .sim-ui[data-page="trade"] main > .metrics { gap: 8px; }
  .sim-ui[data-page="trade"] main > .metrics .metric { padding: 10px 12px; }
}


/* Positions: a compact trading desk leaves the holdings visible in the first screen. */
@media (min-width: 761px) {
 .sim-ui[data-page="positions"] main { padding-inline: 14px; }
 .sim-ui[data-page="positions"] .position-metrics,
 .sim-ui[data-page="positions"] #trade { width: 100%; max-width: 1320px; }
 .sim-ui[data-page="positions"] #trade { padding: 14px; }
 .sim-ui[data-page="positions"] .positions-workspace { margin-bottom: 14px; }
 .sim-ui[data-page="positions"] #trade-fields > .trade-fields-layout { --trade-desk-height: 350px; grid-template-columns: minmax(280px,340px) minmax(240px,320px) minmax(0,1fr); grid-template-rows: 30px minmax(0,1fr); min-height: var(--trade-desk-height); gap: 8px 36px; }
 .sim-ui[data-page="positions"] #trade-fields > .trade-fields-layout > .side-switch { grid-column: 1; grid-row: 1; padding: 2px; }
 .sim-ui[data-page="positions"] #trade .side-switch button { padding: 3px 6px; font-size: 12px; }
 .sim-ui[data-page="positions"] #trade .trade-ticket { grid-column: 1; grid-row: 2; }
 .sim-ui[data-page="positions"] #trade .trade-market { grid-column: 2; grid-row: 1 / 3; }
 .sim-ui[data-page="positions"] #trade .kline-placeholder { grid-column: 3; grid-row: 1 / 3; padding: 12px; }
 .sim-ui[data-page="positions"] #trade .kline-empty { min-height: 140px; }
 .sim-ui[data-page="positions"] #trade input,.sim-ui[data-page="positions"] #trade select { height: 28px; min-height: 28px; margin-top: 0; padding: 3px 8px; font-size: 11px; }
 .sim-ui[data-page="positions"] #trade .stock-label { grid-template-columns: 90px minmax(0,1fr); align-items: center; margin-bottom: 4px; font-size: 11px; }
 .sim-ui[data-page="positions"] #trade .stock-search { grid-column: 2; grid-row: 1; }
 .sim-ui[data-page="positions"] #trade .stock-label > small { grid-column: 2; grid-row: 2; justify-self: end; font-size: 10px; line-height: 14px; }
 .sim-ui[data-page="positions"] #trade .stock-label > small:empty { display: none; }
 .sim-ui[data-page="positions"] #trade #order-type-label { margin-bottom: 4px; gap: 4px; }
 .sim-ui[data-page="positions"] #trade #order-type-label .order-type-switch { width: 110px; flex-basis: 110px; }
 .sim-ui[data-page="positions"] #trade .order-type-switch button { padding: 3px 8px; font-size: 11px; }
 .sim-ui[data-page="positions"] #trade #order-type-label .quick-quantities { gap: 4px; }
 .sim-ui[data-page="positions"] #trade #order-type-label .quick-quantities .button { height: 28px; min-height: 28px; padding: 3px 6px; font-size: 11px; }
 .sim-ui[data-page="positions"] #trade .trade-ticket > .form-row { gap: 10px; }
 .sim-ui[data-page="positions"] #trade .trade-ticket > .form-row label { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: 11px; white-space: nowrap; }
 .sim-ui[data-page="positions"] #trade .trade-ticket > .form-row label input { width: 0; min-width: 0; flex: 1; }
 .sim-ui[data-page="positions"] #trade .validity-label { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; font-size: 11px; }
 .sim-ui[data-page="positions"] #trade .validity-label select { width: 0; min-width: 0; flex: 1; }
 .sim-ui[data-page="positions"] #trade .estimate,.sim-ui[data-page="positions"] #trade .fee-estimate { padding: 4px 8px; margin-bottom: 4px; font-size: 11px; }
 .sim-ui[data-page="positions"] #trade .estimate strong,.sim-ui[data-page="positions"] #trade .fee-estimate strong { font-size: 13px; line-height: 18px; }
 .sim-ui[data-page="positions"] #trade .trade-options { min-height: 24px; }
 .sim-ui[data-page="positions"] #trade .trade-options.condition-enabled { min-height: 0; }
 .sim-ui[data-page="positions"] #trade .trade-request { padding: 2px 0; margin-bottom: 4px; }
 .sim-ui[data-page="positions"] #trade .trade-request .request-label { display: flex; align-items: center; gap: 6px; font-size: 10px; }
 .sim-ui[data-page="positions"] #trade .trade-request input { order: 1; flex: 1; min-width: 0; width: 0; margin: 0; font-size: 9px; }
 .sim-ui[data-page="positions"] #trade #new-request { order: 2; font-size: 10px; }
 .sim-ui[data-page="positions"] #trade #place { min-height: 30px; padding: 4px 10px; font-size: 12px; }
 .sim-ui[data-page="positions"] #trade .quote-box { padding: 10px; }
 .sim-ui[data-page="positions"] #trade .quote-heading { margin-bottom: 4px; font-size: 10px; gap: 4px; }
 .sim-ui[data-page="positions"] #trade .quote-heading button { font-size: 10px; }
 .sim-ui[data-page="positions"] #trade .quote-prices { gap: 6px; }
 .sim-ui[data-page="positions"] #trade .quote-prices button { min-height: 44px; padding: 3px; }
 .sim-ui[data-page="positions"] #trade .quote-prices span,.sim-ui[data-page="positions"] #trade .quote-prices small { font-size: 10px; line-height: 12px; }
 .sim-ui[data-page="positions"] #trade .quote-prices strong { margin: 1px 0; font-size: 17px; line-height: 20px; }
 .sim-ui[data-page="positions"] #trade .five-level-book { grid-template-columns: minmax(0,1fr); gap: 6px; margin: 5px 0; flex: 1; }
 .sim-ui[data-page="positions"] #trade .book-side { gap: 2px; }
 .sim-ui[data-page="positions"] #trade .book-side button { height: 18px; min-height: 18px; padding: 0 4px; font-size: 11px; line-height: 16px; }
 .sim-ui[data-page="positions"] #trade .book-side button strong { font-size: 11px; }
 .sim-ui[data-page="positions"] #trade .book-side button small { font-size: 10px; }
 .sim-ui[data-page="positions"] #trade .quote-limits { padding-top: 4px; margin-top: 0; font-size: 11px; }
 .sim-ui[data-page="positions"] #trade #quote-time,.sim-ui[data-page="positions"] #trade #quote-readiness { margin-top: 4px; font-size: 10px; line-height: 15px; }
 .sim-ui[data-page="positions"] #position-page > .order-panel { padding: 10px 12px; }
 .sim-ui[data-page="positions"] #position-page > .order-panel .panel-heading { margin-bottom: 8px; }
 .sim-ui[data-page="positions"] #position-page .position-table th,.sim-ui[data-page="positions"] #position-page .position-table td { padding: 8px 3px; font-size: 11px; }
 .sim-ui[data-page="positions"] #positions-status { padding: 3px 6px; font-size: 10px; }
}
@media (min-width:980px) and (max-width:1399px) {
 .sim-ui[data-page="positions"] #trade-fields > .trade-fields-layout { grid-template-columns: minmax(260px,1fr) minmax(220px,.95fr) minmax(0,1.1fr); gap: 8px 14px; }
}
@media (min-width:1100px) {
 .sim-ui[data-page="positions"] main { padding-inline: 28px; }
}
@media (min-width:980px) and (max-width:1179px) {
 .sim-ui[data-page="positions"] #trade .trade-ticket > .form-row { grid-template-columns: minmax(0,1fr); gap: 0; }
 .sim-ui[data-page="positions"] #trade .quote-interval { display: none; }
 .sim-ui[data-page="positions"] #trade .quote-heading { flex-wrap: nowrap; }
 .sim-ui[data-page="positions"] #trade #quote-symbol { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width:980px) and (max-height:800px) {
 .sim-ui[data-page="positions"] #trade { padding-block: 10px; }
 .sim-ui[data-page="positions"] .positions-workspace { margin-bottom: 10px; }
}
@media (min-width:761px) and (max-width:979px) {
 .sim-ui[data-page="positions"] .sidebar { width: 164px; padding: 24px 12px; }
 .sim-ui[data-page="positions"] .workspace { margin-left: 164px; }
 .sim-ui[data-page="positions"] .brand { font-size: 16px; gap: 8px; }
 .sim-ui[data-page="positions"] .brand-icon { width: 30px; height: 30px; font-size: 22px; }
 .sim-ui[data-page="positions"] .nav-item { font-size: 12px; gap: 8px; padding: 10px; }
 .sim-ui[data-page="positions"] main { padding: 10px 12px; }
 .sim-ui[data-page="positions"] #trade { padding: 10px; }
 .sim-ui[data-page="positions"] #trade-fields > .trade-fields-layout { grid-template-columns: minmax(245px,1fr) minmax(210px,1fr); grid-template-rows: auto auto auto; gap: 8px 12px; min-height: 0; }
 .sim-ui[data-page="positions"] #trade-fields > .trade-fields-layout > .side-switch { grid-column: 1; grid-row: 1; }
 .sim-ui[data-page="positions"] #trade .trade-ticket { grid-column: 1; grid-row: 2; }
 .sim-ui[data-page="positions"] #trade .trade-market { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; }
 .sim-ui[data-page="positions"] #trade .kline-placeholder { grid-column: 1 / -1; grid-row: 3; padding: 8px; }
 .sim-ui[data-page="positions"] #trade .kline-empty { min-height: 70px; }
 .sim-ui[data-page="positions"] #trade .five-level-book { gap: 5px; margin: 5px 0; }
 .sim-ui[data-page="positions"] #trade .book-side { gap: 2px; }
 .sim-ui[data-page="positions"] #trade .book-side button { padding: 1px 4px; min-height: 20px; }
 .sim-ui[data-page="positions"] #trade .quote-prices button { padding: 5px 3px; }
 .sim-ui[data-page="positions"] #trade .quote-prices strong { font-size: 17px; }
 .sim-ui[data-page="positions"] #trade input,.sim-ui[data-page="positions"] #trade select { min-height: 30px; height: 30px; padding: 4px 7px; font-size: 11px; }
 .sim-ui[data-page="positions"] #trade .stock-label,.sim-ui[data-page="positions"] #trade .form-row label,.sim-ui[data-page="positions"] #trade .validity-label { font-size: 11px; margin-bottom: 5px; }
 .sim-ui[data-page="positions"] #trade #order-type-label .order-type-switch { flex-basis: 110px; width: 110px; }
 .sim-ui[data-page="positions"] #trade #order-type-label .quick-quantities .button { min-height: 30px; height: 30px; padding: 4px 6px; font-size: 11px; }
 .sim-ui[data-page="positions"] #trade .estimate,.sim-ui[data-page="positions"] #trade .fee-estimate { padding: 5px 8px; margin-bottom: 5px; }
 .sim-ui[data-page="positions"] #position-page > .order-panel { padding: 12px; }
 .sim-ui[data-page="positions"] #position-page > .order-panel .panel-heading { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
 .sim-ui[data-page="positions"] #positions-status { font-size: 10px; white-space: normal; }
}
.sim-ui #positions-kline-toggle { display: none; }
@media (max-width:979px) {
 .sim-ui[data-page="positions"] #positions-kline-toggle { display: inline-flex; margin-left: auto; padding: 3px 6px; font-size: 10px; white-space: nowrap; color: var(--blue); }
 .sim-ui[data-page="positions"]:not(.positions-kline-open) #trade .kline-placeholder { display: none; }
}
@media (min-width:1100px) and (min-height:850px) {
 .sim-ui[data-page="positions"] main { padding: 20px 36px; }
 .sim-ui[data-page="positions"] .position-metrics { padding: 11px 16px; margin-bottom: 16px; gap: 10px 0; }
 .sim-ui[data-page="positions"] .position-metrics .metric + .metric { border-left: 1px solid var(--line); margin-left: 22px; padding-left: 22px; }
 .sim-ui[data-page="positions"] #trade { padding: 16px; }
 .sim-ui[data-page="positions"] .positions-workspace { margin-bottom: 18px; }
 .sim-ui[data-page="positions"] #trade-fields > .trade-fields-layout { --trade-desk-height: 386px; row-gap: 10px; }
 .sim-ui[data-page="positions"] #trade input,.sim-ui[data-page="positions"] #trade select { height: 30px; min-height: 30px; font-size: 12px; }
 .sim-ui[data-page="positions"] #trade .stock-label,.sim-ui[data-page="positions"] #trade #order-type-label,.sim-ui[data-page="positions"] #trade .trade-ticket > .form-row label,.sim-ui[data-page="positions"] #trade .validity-label { margin-bottom: 7px; }
 .sim-ui[data-page="positions"] #trade .estimate,.sim-ui[data-page="positions"] #trade .fee-estimate { margin-bottom: 7px; padding-block: 5px; }
 .sim-ui[data-page="positions"] #trade .five-level-book { margin: 8px 0; gap: 10px; }
 .sim-ui[data-page="positions"] #trade .book-side { gap: 3px; }
 .sim-ui[data-page="positions"] #trade .book-side button { height: 20px; min-height: 20px; line-height: 18px; }
 .sim-ui[data-page="positions"] #trade .book-side button strong { font-size: 12px; }
 .sim-ui[data-page="positions"] #trade .quote-heading { margin-bottom: 7px; }
 .sim-ui[data-page="positions"] #trade .trade-options { flex: 0 0 auto; padding: 2px 0; margin-top: 2px; }
 .sim-ui[data-page="positions"] #trade .trade-request { margin-top: auto; padding-top: 7px; margin-bottom: 7px; }
 .sim-ui[data-page="positions"] #position-page > .order-panel { padding: 14px 16px; }
 .sim-ui[data-page="positions"] #position-page > .order-panel .panel-heading { margin-bottom: 12px; }
}

/* The positions desk consists of three independent cards, separated by the page background. */
/* Keep estimates together and reserve the expanding ticket area for conditions. */
.sim-ui #trade .trade-summary { flex-shrink: 0; padding: 10px 12px; margin-bottom: 12px; background: var(--section); border: 1px solid var(--line); border-radius: 8px; }
.sim-ui #trade .trade-summary:has(> .estimate[hidden]):has(> .fee-estimate[hidden]) { display: none; }
.sim-ui #trade .trade-summary > .estimate { padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; gap: 8px; }
.sim-ui #trade .trade-summary > .fee-estimate { margin: 6px 0 0; padding: 6px 0 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; font-size: 12px; color: var(--muted); }
.sim-ui #trade .trade-summary .fee-estimate-heading strong { font-size: 12px; font-weight: 500; color: #596579; }
.sim-ui #trade .trade-options-heading { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.sim-ui #trade .trade-options-heading .validity-label { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; white-space: nowrap; color: var(--muted); }
.sim-ui #trade .trade-options-heading .validity-label select { flex: none; width: 112px; height: 30px; min-height: 30px; margin: 0; padding: 3px 6px; font-size: 12px; }
.sim-ui #trade #inline-condition-toggle { margin-left: auto; }
.sim-ui[data-page="positions"] #trade .trade-summary { padding: 6px 8px; margin-bottom: 6px; }
.sim-ui[data-page="positions"] #trade .trade-summary > .estimate { padding: 0; margin: 0; }
.sim-ui[data-page="positions"] #trade .trade-summary > .fee-estimate { padding: 4px 0 0; margin: 4px 0 0; }
.sim-ui[data-page="positions"] #trade .trade-options-heading .validity-label { margin: 0; gap: 4px; }
@media (min-width: 1000px) and (max-height: 800px) {
 .sim-ui[data-page="trade"] #trade .trade-summary { padding: 6px 10px; margin-bottom: 6px; }
 .sim-ui[data-page="trade"] #trade .trade-summary > .fee-estimate { padding-top: 4px; margin-top: 4px; }
}
/* Secondary ticket actions share a quiet, consistent treatment. */
.sim-ui #profile-dialog .profile-wide { grid-column: 1 / -1; }
.sim-ui #profile-dialog textarea { display: block; width: 100%; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--control); border-radius: 7px; font: inherit; color: #29354a; resize: vertical; }
.sim-ui #profile-dialog textarea:focus { outline: 2px solid #1677ff33; border-color: var(--blue); }
.sim-ui #profile-dialog input[readonly] { color: var(--muted); background: var(--section); }
.sim-ui #profile-dialog .dialog-intro:empty { display: none; }
/* Header: breadcrumb on the left, compact account and utility controls on the right. */
.sim-ui:not(.portal) .workspace > header { background: #f9fbfe; border-bottom: 1px solid var(--line); }
.sim-ui:not(.portal) .breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.sim-ui:not(.portal) .breadcrumb-home { display: inline-flex; align-items: center; gap: 7px; color: #8791a2; }
.sim-ui:not(.portal) .breadcrumb-home:hover { color: var(--blue); }
.sim-ui:not(.portal) .breadcrumb > span { margin: 0; }
.sim-ui:not(.portal) .breadcrumb b { color: #253149; font-weight: 600; }
.sim-ui:not(.portal) header .header-actions { gap: 8px; }
.sim-ui:not(.portal) header .header-account { display: contents; }
.sim-ui:not(.portal) header .connection { order: 0; }
.sim-ui:not(.portal) header .account-switcher { order: 1; gap: 6px; }
.sim-ui:not(.portal) header .account-switcher label { font-size: 0; gap: 0; }
.sim-ui:not(.portal) header .account-switcher select { width: 220px; height: 32px; padding: 4px 10px; font-size: 12px; border-color: var(--line); background: #fff; }
.sim-ui:not(.portal) header #account-create-open { border-color: var(--line); color: #8791a2; }
.sim-ui:not(.portal) header .header-icon, .sim-ui:not(.portal) header #trade-notices-open { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #7b879a; }
.sim-ui:not(.portal) header .header-icon:hover:hover, .sim-ui:not(.portal) header #trade-notices-open:hover { background: #f0f5ff; border-color: #d6e4ff; color: var(--blue); }
.sim-ui:not(.portal) header #refresh { order: 3; }
.sim-ui:not(.portal) header #trade-notices-open { order: 4; font-size: 0; overflow: visible; }
.sim-ui:not(.portal) header #trade-notices-open::before { content: ''; width: 18px; height: 18px; margin: 0; border-radius: 0; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8a5 5 0 0 1 10 0v4l2 3H3l2-3V8Zm3 9h4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sim-ui:not(.portal) header #trade-notices-open:not([data-count="0"])::after { content: attr(data-count); position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid #f9fbfe; border-radius: 10px; background: #e34d59; color: #fff; font-size: 10px; line-height: 12px; text-align: center; }
.sim-ui:not(.portal) header #trade-notices-open.has-pending { color: #d46b08; }
.sim-ui:not(.portal) header #admin-entry { order: 5; }
.sim-ui:not(.portal) header #login-open { order: 6; display: inline-flex; align-items: center; gap: 8px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; margin-left: 6px; padding: 0 6px 0 12px; height: 32px; border-left: 1px solid var(--line); color: #253149; font-size: 12px; font-weight: 600; }
.sim-ui header #login-open::before,
.sim-ui.portal #admin-name::before { content: ''; display: block; flex: 0 0 26px; width: 26px; height: 26px; background: url('/avatar.png') center / contain no-repeat; }
.sim-ui:not(.portal) header #logout { order: 7; border-color: transparent; background: transparent; }
@media (max-width: 1100px) { .sim-ui:not(.portal) header .breadcrumb-home { font-size: 0; gap: 0; } }
@media (max-width: 760px) {
 .sim-ui:not(.portal) .workspace > header { align-items: flex-start; gap: 10px; }
 .sim-ui:not(.portal) header .header-actions { flex-wrap: wrap; gap: 8px; }
 .sim-ui:not(.portal) header .account-switcher { flex: 1 1 calc(100% - 20px); min-width: 0; }
 .sim-ui:not(.portal) header .account-switcher label { flex: 1; }
 .sim-ui:not(.portal) header .account-switcher select { width: 100%; }
 .sim-ui:not(.portal) header .connection { font-size: 0; gap: 0; }
 .sim-ui:not(.portal) header #login-open { margin-left: auto; max-width: 145px; }
}
.sim-ui[data-page="trade"] .account-overview { grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.sim-ui[data-page="trade"] .account-overview .metric strong { font-size: clamp(17px,1.5vw,24px); }
.sim-ui[data-page="positions"] .position-metrics { gap: 8px 16px; }
.sim-ui[data-page="positions"] .position-metrics .metric { flex: 1 1 150px; display: block; }
.sim-ui[data-page="positions"] .position-metrics .metric strong { font-size: 16px; }
.sim-ui[data-page="positions"] .position-metrics .metric + .metric { margin-left: 0; padding-left: 16px; }
@media(max-width:760px) {
 .sim-ui[data-page="trade"] .account-overview .metric.primary { grid-column: auto; }
}
.sim-ui #order-body .order-stock-name, .sim-ui #fill-body .order-stock-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; }
.sim-ui #order-body .order-stock-code, .sim-ui #fill-body .order-stock-code { margin-top: 3px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.sim-ui #order-body .order-number { display: block; font-size: 12px; line-height: 18px; white-space: nowrap; }
.sim-ui #order-body .order-row-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
.sim-ui #order-body .order-row-actions button { margin: 0; padding: 4px 0; white-space: nowrap; }
.sim-ui #orders { container: order-list / inline-size; }
@container order-list (min-width: 760px) {
 .sim-ui #orders table { table-layout: fixed; }
 .sim-ui #orders th:nth-child(1) { width: 88px; }
 .sim-ui #orders th:nth-child(2) { width: 18%; }
 .sim-ui #orders th:nth-child(3) { width: 7%; }
 .sim-ui #orders th:nth-child(4) { width: 14%; }
 .sim-ui #orders th:nth-child(5) { width: 16%; }
 .sim-ui #orders th:nth-child(6) { width: auto; }
 .sim-ui #orders th:nth-child(7) { width: 12%; }
 .sim-ui #orders td { max-width: none; }
 .sim-ui #orders td:nth-child(2), .sim-ui #orders td:nth-child(6) { white-space: normal; overflow-wrap: anywhere; }
}
.sim-ui #trade #order-type-label .order-type-switch { padding: 3px; gap: 2px; background: #f1f4f9; border-color: #e5ebf3; }
.sim-ui #trade .order-type-switch button { border: 1px solid transparent; border-radius: 5px; font-weight: 500; transition: background .15s, color .15s, border-color .15s; }
.sim-ui #trade .order-type-switch button.active { color: var(--blue); background: white; border-color: #d6e4ff; box-shadow: none; }
.sim-ui #trade #inline-condition-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 28px; padding: 3px 8px; border-color: #d6e4ff; background: #f0f5ff; color: var(--blue); border-radius: 6px; font-size: 12px; line-height: 20px; white-space: nowrap; }
.sim-ui #trade #inline-condition-toggle::after { content: ''; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.sim-ui #trade #inline-condition-toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(225deg); }
.sim-ui #trade #inline-condition-toggle:hover:not(:disabled) { background: #e6efff; border-color: #adc6ff; }
.sim-ui #trade .request-input { display: block; position: relative; min-width: 0; width: 100%; }
.sim-ui #trade .trade-request .request-input input { width: 100%; padding-right: 36px; }
.sim-ui #trade .trade-request #new-request { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #8791a2; }
.sim-ui #trade #new-request:hover:not(:disabled) { background: #f0f5ff; color: var(--blue); }
.sim-ui #trade #order-type-label .quick-quantities { display: inline-flex; align-items: stretch; flex-wrap: nowrap; height: 38px; padding: 3px; gap: 0; border: 1px solid var(--line); border-radius: 7px; background: #f1f4f9; }
.sim-ui #trade #order-type-label .quick-quantities .button { min-height: 0; height: 100%; padding: 3px 9px; border: 0; border-radius: 4px; background: transparent; color: #596579; font-size: 12px; line-height: 20px; white-space: nowrap; }
.sim-ui #trade #order-type-label .quick-quantities .button + .button { position: relative; }
.sim-ui #trade #order-type-label .quick-quantities .button + .button::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: #dde5ef; }
.sim-ui #trade #order-type-label .quick-quantities .button:hover:not(:disabled) { color: var(--blue); background: white; filter: none; }
.sim-ui[data-page="positions"] #trade .request-input { flex: 1; width: 0; }
@media (min-width: 761px) {
 .sim-ui[data-page="positions"] #trade #order-type-label .quick-quantities { height: 28px; padding: 2px; }
 .sim-ui[data-page="positions"] #trade #order-type-label .quick-quantities .button { min-height: 0; height: 100%; padding: 0 6px; font-size: 11px; }
}
.sim-ui[data-page="positions"] #trade { padding: 0; border: 0; background: transparent; box-shadow: none; }
.sim-ui[data-page="positions"] .positions-order-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; display: flex; flex-direction: column; gap: 8px; }
.sim-ui[data-page="positions"] .positions-order-card > .side-switch { flex-shrink: 0; margin: 0; }
.sim-ui[data-page="positions"] .positions-order-card > .trade-ticket { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sim-ui[data-page="positions"] #trade .trade-market > .quote-box,.sim-ui[data-page="positions"] #trade .kline-placeholder { border-radius: 10px; }
@media(min-width:761px) {
 .sim-ui[data-page="positions"] .positions-order-card { grid-column: 1; grid-row: 1 / 3; }
}
@media(min-width:761px) and (max-height:800px), (min-width:761px) and (max-width:1179px) {
 .sim-ui[data-page="positions"] .positions-order-card { padding: 8px; }
 .sim-ui[data-page="positions"] #trade #order-type-label .order-type-switch { flex-basis: 96px; width: 96px; }
}
/* A single account summary anchors the page; period figures form a lighter strip. */
.sim-ui .performance-heading .overview-updated { color: var(--muted); font-size: 11px; white-space: nowrap; }
.sim-ui .performance-metrics.cumulative-metrics { grid-template-columns: 1.2fr 1.2fr 1fr 1.15fr 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 28px; }
.sim-ui .cumulative-metrics .performance-metric { position: relative; border: 0; border-radius: 0; padding: 23px 24px 21px; background: transparent; }
.sim-ui .cumulative-metrics .performance-metric:first-child { background: #f8fbff; }
.sim-ui .cumulative-metrics .performance-metric + .performance-metric::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--line); }
.sim-ui .cumulative-metrics .summary-value { min-height: 65px; padding-top: 16px; padding-bottom: 9px; box-sizing: border-box; }
.sim-ui .cumulative-metrics .summary-value strong { display: block; font-size: clamp(21px,1.5vw,28px); line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sim-ui .cumulative-metrics .summary-value #asset-total { font-size: clamp(24px,1.7vw,32px); }
.sim-ui .cumulative-metrics .summary-value #asset-gain { font-size: 13px; margin-top: 6px; font-weight: 500; }
.sim-ui .cumulative-metrics .performance-metric > small { font-size: 11px; line-height: 1.6; }
.sim-ui .performance-metrics .metric-meta[data-state="ready"] { display: none; }
.sim-ui .performance-metrics .metric-meta:not([data-state="ready"]) { margin-top: 6px; font-size: 10px; }
.sim-ui .performance-heading.period-heading { border: 0; padding-top: 0; margin-top: 0; margin-bottom: 14px; align-items: center; }
.sim-ui .period-heading h3 { font-size: 17px; }
.sim-ui .period-heading p { margin-top: 5px; font-size: 11px; }
.sim-ui .period-heading .asset-range { align-items: center; gap: 8px; }
.sim-ui .period-heading #asset-period-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sim-ui .period-heading .asset-range label { margin: 0; }
.sim-ui .period-heading #asset-period-value { height: 38px; width: 170px; box-sizing: border-box; }
.sim-ui .performance-metrics.period-metrics { gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; }
.sim-ui .period-metrics .performance-metric { background: transparent; border: 0; border-radius: 0; padding: 16px 22px; }
.sim-ui .period-metrics .performance-metric + .performance-metric { border-left: 1px solid var(--line); }
.sim-ui .period-metrics .performance-metric > strong { font-size: 25px; line-height: 1.25; margin: 9px 0 7px; }
.sim-ui .period-metrics .performance-metric > small:not(.metric-meta) { font-size: 10px; min-height: 0; }
@media(max-width:1200px){
 .sim-ui .performance-metrics.cumulative-metrics { grid-template-columns: repeat(6,minmax(0,1fr)); }
 .sim-ui .cumulative-metrics .performance-metric { grid-column: span 2; padding: 18px; }
 .sim-ui .cumulative-metrics .performance-metric:nth-child(-n+2) { grid-column: span 3; border-bottom: 1px solid var(--line); }
 .sim-ui .cumulative-metrics .performance-metric:nth-child(3)::before { display: none; }
 .sim-ui .performance-heading.period-heading { align-items: flex-start; flex-wrap: wrap; }
}
@media(max-width:760px){
 .sim-ui .performance-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
 .sim-ui .performance-metrics.cumulative-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 22px; }
 .sim-ui .cumulative-metrics .performance-metric,.sim-ui .cumulative-metrics .performance-metric:nth-child(-n+2) { grid-column: auto; padding: 16px; border-bottom: 1px solid var(--line); }
 .sim-ui .cumulative-metrics .performance-metric:first-child { grid-column: 1/-1; }
 .sim-ui .cumulative-metrics .performance-metric:nth-child(3)::before { display: block; }
 .sim-ui .cumulative-metrics .performance-metric:nth-child(even)::before { display: none; }
 .sim-ui .cumulative-metrics .performance-metric:nth-last-child(-n+2) { border-bottom: 0; }
 .sim-ui .cumulative-metrics .summary-value { min-height: 58px; padding-top: 12px; }
 .sim-ui .period-heading .asset-range { width: 100%; flex-wrap: wrap; }
 .sim-ui .period-heading .asset-range label { flex: 1 1 120px; }
 .sim-ui .period-heading #asset-period-value { width: 100%; }
 .sim-ui .period-heading .asset-period-switch { flex: 1 1 100%; justify-content: space-between; }
 .sim-ui .period-heading .asset-period-switch button { flex: 1; }
 .sim-ui .performance-metrics.period-metrics { grid-template-columns: 1fr; }
 .sim-ui .period-metrics .performance-metric { padding: 14px 16px; }
 .sim-ui .period-metrics .performance-metric + .performance-metric { border-left: 0; border-top: 1px solid var(--line); }
}
/* Keep the period title, figures and date controls together on wide screens. */
.sim-ui .period-toolbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 22px; padding: 16px 20px; margin: 0 0 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.sim-ui .period-toolbar > h3 { margin: 0; font-size: 15px; white-space: nowrap; }
.sim-ui .period-toolbar .performance-metrics.period-metrics { margin: 0; border: 0; background: transparent; border-radius: 0; grid-template-columns: repeat(3,minmax(0,1fr)); }
.sim-ui .period-toolbar .period-metrics .performance-metric { padding: 0 18px; min-width: 0; border-top: 0; border-left: 1px solid var(--line); }
.sim-ui .period-toolbar .performance-metric > span { font-size: 11px; white-space: nowrap; }
.sim-ui .period-toolbar .performance-metric > strong { font-size: 22px; line-height: 1.3; margin: 5px 0 0; }
.sim-ui .period-toolbar .period-metric-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sim-ui .period-toolbar .asset-range { display: flex; flex-wrap: nowrap; align-items: center; margin: 0; padding: 0; border: 0; gap: 8px; }
.sim-ui .period-toolbar .asset-period-switch button { padding: 0 10px; min-width: 30px; }
.sim-ui .period-toolbar #asset-period-value { width: 150px; }
.sim-ui .period-toolbar .asset-period-navigation { gap: 6px; }
.sim-ui .period-toolbar .asset-period-navigation .button { padding-inline: 10px; white-space: nowrap; }
@media(max-width:1350px){
 .sim-ui .period-toolbar { grid-template-columns: auto 1fr; gap: 16px; }
 .sim-ui .period-toolbar .asset-range { grid-column: 2; grid-row: 1; justify-self: end; }
 .sim-ui .period-toolbar .period-metrics { grid-column: 1/-1; grid-row: 2; padding-top: 14px; border-top: 1px solid var(--line); }
 .sim-ui .period-toolbar .period-metrics .performance-metric:first-child { border-left: 0; padding-left: 0; }
}
@media(max-width:760px){
 .sim-ui .period-toolbar { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
 .sim-ui .period-toolbar .asset-range { grid-column: 1; grid-row: 2; justify-self: stretch; flex-wrap: wrap; }
 .sim-ui .period-toolbar .period-metrics { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; }
 .sim-ui .period-toolbar .period-metrics .performance-metric { padding: 12px 0; border-left: 0; }
 .sim-ui .period-toolbar .period-metrics .performance-metric + .performance-metric { border-top: 1px solid var(--line); }
 .sim-ui .period-toolbar .period-metrics .performance-metric:last-child { padding-bottom: 0; }
 .sim-ui .period-toolbar #asset-period-value { width: 100%; }
}
/* Match the standalone cards used by the trading overview. */
.sim-ui .performance-metrics.cumulative-metrics { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; background: transparent; border: 0; border-radius: 0; overflow: visible; margin-bottom: 22px; }
.sim-ui .cumulative-metrics .performance-metric,.sim-ui .cumulative-metrics .performance-metric:first-child { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 16px; grid-column: auto; }
.sim-ui .cumulative-metrics .performance-metric + .performance-metric::before { display: none; }
.sim-ui .cumulative-metrics .performance-metric > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.sim-ui .cumulative-metrics .metric-unit { color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: .4px; }
.sim-ui .cumulative-metrics .summary-value { min-height: 52px; padding-top: 13px; padding-bottom: 7px; }
.sim-ui .cumulative-metrics .summary-value strong,.sim-ui .cumulative-metrics .summary-value #asset-total { font-size: clamp(22px,1.5vw,28px); line-height: 1.25; font-weight: 600; }
.sim-ui .cumulative-metrics .summary-return { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 5px 10px; }
.sim-ui .cumulative-metrics .summary-return #asset-gain { margin-top: 0; font-size: 12px; line-height: 1.5; }
.sim-ui .cumulative-metrics .metric-meta[data-state="ready"] { display: block; }
.sim-ui .cumulative-metrics .performance-metric > .metric-meta { margin-top: 0; font-size: 10px; line-height: 1.6; }
.sim-ui .cumulative-metrics .performance-metric > small:not(.metric-meta) { font-size: 11px; line-height: 1.6; min-height: 0; }
.sim-ui .cumulative-metrics #asset-gain-meta,.sim-ui .performance-heading .overview-updated { display: none; }
@media(max-width:1200px){
 .sim-ui .performance-metrics.cumulative-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .sim-ui .cumulative-metrics .performance-metric:nth-child(-n+2) { grid-column: auto; border-bottom: 1px solid var(--line); }
}
@media(max-width:760px){
 .sim-ui .performance-metrics.cumulative-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
 .sim-ui .cumulative-metrics .performance-metric,.sim-ui .cumulative-metrics .performance-metric:first-child,.sim-ui .cumulative-metrics .performance-metric:nth-last-child(-n+2) { grid-column: auto; padding: 14px; border-bottom: 1px solid var(--line); }
 .sim-ui .cumulative-metrics .performance-metric:first-child { grid-column: 1/-1; }
 .sim-ui .cumulative-metrics .performance-metric > span { font-size: 12px; }
 .sim-ui .cumulative-metrics .summary-value strong { font-size: 21px; }
}
/* Holdings uses the same standalone overview cards as the trading page. */
.sim-ui[data-page="positions"] .position-metrics { display: grid; width: 100%; max-width: none; box-sizing: border-box; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; padding: 0; border: 0; border-radius: 0; background: transparent; margin-bottom: 20px; align-items: stretch; }
.sim-ui[data-page="positions"] .position-metrics .metric,.sim-ui[data-page="positions"] .position-metrics .metric + .metric { display: block; min-width: 0; margin: 0; padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sim-ui[data-page="positions"] .position-metrics .metric > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.sim-ui[data-page="positions"] .position-metrics .metric > span > small { display: inline; color: var(--muted); font-size: 10px; font-weight: 400; }
.sim-ui[data-page="positions"] .position-metrics .metric > strong { display: block; margin: 13px 0 8px; font-size: clamp(22px,1.5vw,28px); line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sim-ui[data-page="positions"] #holdings-total { color: var(--blue); }
.sim-ui[data-page="positions"] .position-metrics .metric > .metric-meta { display: block; margin-top: 0; font-size: 10px; line-height: 1.6; }
.sim-ui[data-page="positions"] .position-metrics .metric > div { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; }
.sim-ui[data-page="positions"] #positions-kline-toggle { grid-column: 1/-1; justify-self: end; }
@media(max-width:1200px){.sim-ui[data-page="positions"] .position-metrics{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px){
 .sim-ui[data-page="positions"] .position-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
 .sim-ui[data-page="positions"] .position-metrics .metric,.sim-ui[data-page="positions"] .position-metrics .metric + .metric { padding: 14px; }
 .sim-ui[data-page="positions"] .position-metrics .metric:first-child { grid-column: 1/-1; }
 .sim-ui[data-page="positions"] .position-metrics .metric > strong { font-size: 21px; }
}
@media(min-width:761px) and (max-height:800px){
 .sim-ui[data-page="positions"] .position-metrics { margin-bottom: 8px; gap: 10px; }
 .sim-ui[data-page="positions"] .position-metrics .metric,.sim-ui[data-page="positions"] .position-metrics .metric + .metric { padding: 10px 14px; }
 .sim-ui[data-page="positions"] .position-metrics .metric > span { font-size: 12px; line-height: 18px; }
 .sim-ui[data-page="positions"] .position-metrics .metric > strong { font-size: 22px; line-height: 27px; margin: 6px 0 4px; }
 .sim-ui[data-page="positions"] .position-metrics .metric > .metric-meta,.sim-ui[data-page="positions"] .position-metrics .metric > div { font-size: 10px; line-height: 14px; }
}
/* Compact two-row workspace navigation. */
.sim-ui:not(.portal) .workspace > header { height: 50px; min-height: 50px; padding: 0 16px; background: #fff; }
.sim-ui .workspace-header-left { display: flex; align-items: center; min-width: 0; gap: 12px; }
.sim-ui .sidebar-toggle { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #8791a2; cursor: pointer; }
.sim-ui .sidebar-toggle:hover { color: var(--blue); background: #f0f5ff; }
.sim-ui .workspace-header-left .sidebar-toggle { width: 36px; height: 36px; flex-basis: 36px; }
.sim-ui .workspace-tabs { display: flex; align-items: flex-end; gap: 4px; min-width: 0; max-width: 100%; height: 35px; box-sizing: border-box; padding: 3px 16px 0; overflow-x: auto; scrollbar-width: thin; background: #f8fafc; border-bottom: 1px solid var(--line); }
.sim-ui .workspace-tab { display: inline-flex; align-items: center; flex-shrink: 0; height: 36px; padding: 0 14px 0 16px; gap: 10px; border-radius: 7px 7px 0 0; color: #8590a2; font-size: 13px; }
.sim-ui .workspace-tab:first-child::before { content: '⌂'; font-size: 15px; }
.sim-ui .workspace-tab a { display: inline-flex; align-items: center; height: 100%; color: inherit; white-space: nowrap; }
.sim-ui .workspace-tab:hover { color: var(--blue); background: #f0f5ff; }
.sim-ui .workspace-tab.active { color: var(--blue); background: #eaf2ff; font-weight: 600; }
.sim-ui .workspace-tab-close { display: grid; place-items: center; width: 16px; height: 16px; border: 0; padding: 0; background: transparent; border-radius: 4px; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.sim-ui .workspace-tab-close:hover { color: #cf1322; background: #fff; }
.sim-ui .workspace-tab a:focus-visible,.sim-ui .workspace-tab-close:focus-visible,.sim-ui .sidebar-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.sim-ui:not(.portal) main { padding-top: 16px; }
.sim-ui.sidebar-collapsed .sidebar { display: none; }
.sim-ui.sidebar-collapsed .workspace { margin-left: 0; }
@media(max-width:760px){
 .sim-ui:not(.portal) .workspace > header { height: auto; min-height: 50px; padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
 .sim-ui:not(.portal) .workspace-header-left { flex-shrink: 0; }
 .sim-ui:not(.portal) header .header-actions { width: auto; flex: 1 1 220px; justify-content: flex-end; padding: 0; }
 .sim-ui:not(.portal) header .breadcrumb { display: none; }
 .sim-ui .workspace-tabs { padding-inline: 12px; }
 .sim-ui:not(.portal) main { padding-top: 14px; }
}
.sim-ui .performance-page .asset-chart-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sim-ui .performance-page .asset-chart-heading .chart-switch { padding: 2px; }
.sim-ui .performance-page .asset-chart-heading .chart-switch button { padding: 5px 7px; font-size: 10px; }
.sim-ui .performance-page .performance-chart > .panel-heading { align-items: center; flex-wrap: wrap; }
.sim-ui .performance-page .chart-summary { display: inline-flex; align-items: baseline; gap: 6px; margin-left: auto; color: #596579; font-size: 12px; white-space: nowrap; }
.sim-ui .performance-page .chart-summary strong { color: #253149; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sim-ui .chart-summary .metric-meta[data-state="ready"],.sim-ui #analysis-chart-drawdown-meta[data-state="ready"] { display: none; }
.sim-ui .chart-summary { flex-wrap: wrap; }
.sim-ui .chart-summary .metric-meta { flex-basis: 100%; }
.sim-ui .performance-page .chart-area { fill: #1677ff; fill-opacity: .07; stroke: none; }
.sim-ui .performance-page .drawdown-area { fill: #2b9b83; fill-opacity: .12; stroke: none; }
.sim-ui .performance-page .drawdown-line { stroke-width: 3; }
/* The period controls, charts and statistics share one panel. */
.sim-ui .period-analysis-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 20px; min-width: 0; overflow: hidden; }
.sim-ui .period-analysis-panel > .period-toolbar { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.sim-ui .period-analysis-panel > .performance-charts { margin: 0; gap: 0; }
.sim-ui .period-analysis-panel .performance-charts > .panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.sim-ui .period-analysis-panel .performance-charts > .panel + .panel { border-left: 1px solid var(--line); }
@media(max-width:1500px){
 .sim-ui .period-analysis-panel .performance-charts > .performance-trades { border-left: 0; border-top: 1px solid var(--line); }
}
@media(max-width:760px){
 .sim-ui .period-analysis-panel .performance-charts > .panel + .panel { border-left: 0; border-top: 1px solid var(--line); }
}
/* Give both charts equal room and keep the summary column secondary. */
@media(min-width:1501px){
 .sim-ui .period-analysis-panel > .performance-charts { grid-template-columns: minmax(0,2fr) minmax(0,2fr) minmax(240px,1fr); }
}
.sim-ui .asset-holdings-slot { min-width: 0; }
.sim-ui .asset-holdings-slot > .trade-holdings { position: static; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; min-height: 300px; }
.sim-ui .asset-holdings-slot .trade-holdings-list { flex: 1; min-height: 0; max-height: 320px; overflow-y: auto; }
.sim-ui .asset-holdings-slot .trade-holdings > .empty { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.sim-ui .asset-holdings-slot .holdings-all { white-space: nowrap; }
@media(max-width:760px){.sim-ui .asset-holdings-slot > .trade-holdings{padding:16px}}
/* Trading page: paired order and quote cards without a K-line placeholder. */
.sim-ui[data-page="trade"] #trade-kline-panel { display: none; }
.sim-ui[data-page="trade"] #trade { padding: 0; border: 0; background: transparent; }
.sim-ui[data-page="trade"] #trade-fields > .trade-fields-layout { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto; gap: 16px; min-height: 0; }
.sim-ui[data-page="trade"] #trade .positions-order-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sim-ui[data-page="trade"] #trade .positions-order-card > .side-switch { margin: 0; flex-shrink: 0; }
.sim-ui[data-page="trade"] #trade .positions-order-card > .trade-ticket { display: flex; flex-direction: column; flex: 1; min-height: 0; grid-area: auto; }
.sim-ui[data-page="trade"] #trade .trade-market { grid-column: 1; grid-row: auto; display: flex; flex-direction: column; }
.sim-ui[data-page="trade"] #trade .trade-market > .quote-box { flex: 1; margin: 0; padding: 12px; border-radius: 10px; display: flex; flex-direction: column; }
.sim-ui[data-page="trade"] #trade .five-level-book { grid-template-columns: minmax(0,1fr); gap: 8px; margin: 8px 0; flex: 1; }
.sim-ui[data-page="trade"] #trade .book-side { gap: 3px; }
.sim-ui[data-page="trade"] #trade .book-side button { padding: 2px 4px; min-height: 22px; }
@container trade-entry (min-width:600px){
 .sim-ui[data-page="trade"] #trade-fields > .trade-fields-layout { --trade-desk-height: 520px; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: minmax(0,1fr); min-height: var(--trade-desk-height); gap: 24px; align-items: stretch; }
 .sim-ui[data-page="trade"] #trade .positions-order-card { grid-column: 1; grid-row: 1; }
 .sim-ui[data-page="trade"] #trade .trade-market { grid-column: 2; grid-row: 1; }
 .sim-ui[data-page="trade"] #trade .stock-label { grid-template-columns: 110px minmax(0,1fr); align-items: center; }
 .sim-ui[data-page="trade"] #trade .stock-search { grid-column: 2; grid-row: 1; }
 .sim-ui[data-page="trade"] #trade .stock-label > small { grid-column: 2; grid-row: 2; justify-self: end; }
 .sim-ui[data-page="trade"] #trade .stock-label > small:empty { display: none; }
 .sim-ui[data-page="trade"] #trade .trade-ticket > .form-row label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
 .sim-ui[data-page="trade"] #trade .trade-ticket > .form-row label input { width: 0; min-width: 0; flex: 1; margin-top: 0; }
}
.sim-ui[data-page="trade"] .trade-grid > #trade { padding: 0; }
/* Emphasize the quote heading and remove the verbose footer in the trading desk. */
.sim-ui[data-page="trade"] #trade .quote-heading { align-items: center; gap: 8px; margin-bottom: 12px; }
.sim-ui[data-page="trade"] #trade #quote-symbol { font-size: 14px; font-weight: 600; color: #344c70; }
.sim-ui[data-page="trade"] #trade #quote-refresh { font-size: 13px; }
.sim-ui[data-page="trade"] #trade .quote-interval { font-size: 11px; }
.sim-ui[data-page="trade"] #trade #quote-readiness { display: none; }
/* Give the paired trading panels consistent breathing room. */
.sim-ui[data-page="trade"] #trade .positions-order-card,
.sim-ui[data-page="trade"] #trade .trade-market > .quote-box { padding: 20px; }
.sim-ui[data-page="trade"] #trade .book-side button { padding-inline: 8px; }
@media(max-width:760px){
 .sim-ui[data-page="trade"] #trade .positions-order-card,
 .sim-ui[data-page="trade"] #trade .trade-market > .quote-box { padding: 16px; }
}
/* Stretch the ten price levels to use the quote panel's available height. */
.sim-ui[data-page="trade"] #trade .five-level-book { position: relative; grid-template-rows: repeat(2,minmax(0,1fr)); row-gap: 24px; margin-top: 12px; }
.sim-ui[data-page="trade"] #trade .book-side { gap: 4px; justify-content: stretch; }
.sim-ui[data-page="trade"] #trade .book-side button { flex: 1 1 0; min-height: 28px; align-items: center; }

.sim-ui[data-page="trade"] #trade .five-level-book::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); pointer-events: none; }
/* Let the whole limit-price row serve as a comfortable click target. */
.sim-ui[data-page] #trade .quote-limits { padding: 8px 0 0; gap: 12px; }
.sim-ui[data-page="trade"] #trade .quote-limits { margin-bottom: 0; }
.sim-ui #trade .quote-limits button { min-height: 40px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; }
.sim-ui #trade .quote-limits button:hover:not(:disabled),.sim-ui #trade .quote-limits button:focus-visible { background: #eef3ff; border-color: #d6e4ff; }
@media(max-width:760px){.sim-ui #trade .quote-limits button{min-height:44px}}
/* Center the price and right-align size over a proportional depth bar. */
.sim-ui #trade .book-side button { grid-template-columns: minmax(36px,1fr) minmax(64px,1fr) minmax(88px,1fr); }
.sim-ui #trade .book-side button > strong { grid-column: 2; grid-row: 1; justify-self: center; text-align: center; }
.sim-ui #trade .book-side button > small.book-quantity { grid-column: 3; grid-row: 1; justify-self: stretch; position: relative; isolation: isolate; margin: 0; padding: 3px 4px; line-height: 1.5; text-align: right; }
.sim-ui #trade .book-quantity::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: var(--depth,0%); border-radius: 2px; background: #ef7d7d; opacity: .18; pointer-events: none; }
.sim-ui #trade .bids .book-quantity::before { background: #7c91ee; opacity: .22; }
.sim-ui #trade .book-side button .book-quantity-value { position: relative; z-index: 1; font-size: inherit; white-space: nowrap; }
@media(max-width:760px){
 .sim-ui #trade .five-level-book { grid-template-columns: minmax(0,1fr); }
}
/* Deep blue workspace navigation with a subtle grid and cyan active marker. */
.sim-ui #workspace-sidebar { background-color: #0c2742; background-image: linear-gradient(180deg,rgba(20,66,105,.55),rgba(6,23,42,.55)),linear-gradient(rgba(108,167,214,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(108,167,214,.035) 1px,transparent 1px); background-size: auto,24px 24px,24px 24px; border-right-color: #173e5d; color: #dbe9f6; }
.sim-ui #workspace-sidebar .brand { color: #eef6ff; }
.sim-ui #workspace-sidebar .brand small { color: #86a8c6; }
.sim-ui #workspace-sidebar .brand-icon { background: #1479df; box-shadow: 0 0 18px #168bf529; }
.sim-ui #workspace-sidebar .nav-label { color: #7899b7; }
.sim-ui #workspace-sidebar .nav-item { position: relative; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px; border: 1px solid transparent; color: #b9cee2; transition: background .15s,color .15s; }
.sim-ui #workspace-sidebar .nav-icon { display: grid; place-items: center; flex: 0 0 28px; height: 28px; color: #65a6dc; border: 1px solid #285476; border-radius: 6px; background: #16476e55; }
.sim-ui #workspace-sidebar .nav-item:hover { color: #edf7ff; background: #194b6c80; }
.sim-ui #workspace-sidebar .nav-item.active { color: #f0f9ff; background: linear-gradient(90deg,#18589b,#124763b3); border-color: #2a6690; box-shadow: inset 0 0 12px #258fd31c; }
.sim-ui #workspace-sidebar .nav-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: #38d5ee; box-shadow: 0 0 8px #38d5ee70; }
.sim-ui #workspace-sidebar .nav-item.active .nav-icon { color: #e2f6ff; border-color: #4f91bc; background: #2879b24d; }
.sim-ui #workspace-sidebar .side-foot { color: #87a8c4; }
.sim-ui #workspace-sidebar .pulse { background: #3dd7b5; }
/* Quote status stays in a fixed title slot instead of changing the panel height. */
.sim-ui #trade .quote-heading { align-items: center; flex-wrap: nowrap; gap: 8px; }
.sim-ui #trade #quote-symbol { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-ui #trade .quote-heading > .quote-interval,.sim-ui #trade #quote-refresh { flex-shrink: 0; white-space: nowrap; }
.sim-ui #trade #quote-status { display: inline-grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: #a0a9b5; }
.sim-ui #trade #quote-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sim-ui #trade #quote-status[data-state="error"] { color: #e05252; }
.sim-ui #trade #quote-status[data-state="ready"] { color: #31b997; }
.sim-ui #trade #quote-time { display: none; }
.sim-ui #trade .stock-search > #stock { margin-top: 0; }
.sim-ui #trade .stock-search:has(#stock-selection:not(:empty)) > #stock { padding-right: 45%; }
.sim-ui #trade .stock-search > #stock-selection { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: block; max-width: min(calc(100% - 90px),calc(45% - 12px)); margin: 0; color: #637ba4; font-size: 12px; line-height: 20px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-ui #trade .stock-search > #stock-selection:empty { display: none; }
/* Keep order mode and quantity shortcuts compact and vertically centered. */
.sim-ui[data-page="trade"] #trade #order-type-label .order-type-switch,
.sim-ui[data-page="trade"] #trade #order-type-label .quick-quantities { height: 32px; padding: 3px; align-items: stretch; }
.sim-ui[data-page="trade"] #trade #order-type-label .order-type-switch button,
.sim-ui[data-page="trade"] #trade #order-type-label .quick-quantities .button { display: inline-flex; align-items: center; justify-content: center; min-height: 0; height: 100%; padding: 0 9px; line-height: 1; text-align: center; }
.sim-ui #trade .trade-amount-input { position: relative; display: block; flex: 1; min-width: 0; }
.sim-ui[data-page] #trade .trade-ticket > .trade-amount-fields label .trade-amount-input input { width: 100%; margin-top: 0; padding-right: 36px; appearance: textfield; -moz-appearance: textfield; }
.sim-ui #trade .trade-amount-input input::-webkit-inner-spin-button,
.sim-ui #trade .trade-amount-input input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.sim-ui #trade .trade-amount-input > small { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; color: #8490a3; font-size: 12px; line-height: 1; pointer-events: none; }
.sim-ui[data-page="trade"] #trade .trade-ticket > .trade-amount-fields { grid-template-columns: minmax(0,1fr); gap: 10px; margin-bottom: 10px; }
.sim-ui[data-page="trade"] #trade .trade-ticket > .trade-amount-fields label { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 10px; margin: 0; white-space: nowrap; }
/* Separate form groups while keeping price and quantity closely related. */
.sim-ui[data-page="trade"] #trade .positions-order-card { gap: 16px; }
.sim-ui[data-page="trade"] #trade .trade-ticket > .stock-label,
.sim-ui[data-page="trade"] #trade #order-type-label,
.sim-ui[data-page="trade"] #trade .trade-ticket > .trade-amount-fields,
.sim-ui[data-page="trade"] #trade .trade-summary { margin-bottom: 16px; flex-shrink: 0; }
.sim-ui[data-page="trade"] #trade .trade-summary { padding: 12px; }
.sim-ui[data-page="trade"] #trade .trade-summary > .fee-estimate { margin-top: 8px; padding-top: 8px; }
.sim-ui[data-page] #trade .trade-options { flex: 0 0 auto; min-height: 0; padding: 0; margin: 0 0 16px; }
.sim-ui #trade .trade-options-heading { justify-content: flex-end; }
.sim-ui[data-page="trade"] #trade .trade-market > .quote-box { background: var(--surface); }
.sim-ui[data-page="trade"] #trade .quote-prices button { background: #fff; }
.sim-ui[data-page="trade"] #trade .book-side button { background: #fff; }
.sim-ui[data-page="trade"] #trade .quote-prices button:hover:not(:disabled),
.sim-ui[data-page="trade"] #trade .book-side button:hover:not(:disabled) { background: #eef3ff; }
/* Content surfaces follow the shared white-card specification. */
.sim-ui[data-page="trade"] #trade .positions-order-card,
.sim-ui[data-page="trade"] .trade-grid > .trade-holdings { background: var(--surface); }
.sim-ui[data-page="trade"] #trade .positions-order-card > .side-switch,
.sim-ui[data-page="trade"] #trade #order-type-label .order-type-switch,
.sim-ui[data-page="trade"] #trade #order-type-label .quick-quantities,
.sim-ui[data-page="trade"] #trade .trade-summary,
.sim-ui[data-page="trade"] .trade-grid > .trade-holdings .holdings-columns,
.sim-ui[data-page="trade"] .trade-grid > .trade-holdings .count,
.sim-ui[data-page="trade"] .trade-grid > .trade-holdings .holding-row { background: #fff; }
.sim-ui[data-page="trade"] .trade-grid > .trade-holdings .holding-row:has(.is-selected) { background: #f0f5ff; }
.sim-ui[data-page="trade"] .trade-grid > .trade-holdings .holding-row:hover { background: #eef3ff; }
body.sim-ui:not(.portal) { background: var(--page-bg); min-height: 100vh; }
.sim-ui[data-page="trade"] #trade .trade-ticket > .stock-label { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 10px; align-items: center; }
.sim-ui[data-page="trade"] #trade .stock-search { grid-column: 2; grid-row: 1; }
.sim-ui[data-page="trade"] #trade .trade-summary { margin-left: 100px; }
.sim-ui[data-page="trade"] #trade .trade-summary > .estimate { flex-wrap: wrap; }
/* Quantity fractions sit directly below the quantity field. */
.sim-ui #trade #quick-quantities { display: grid; grid-template-columns: minmax(0,1.8fr) repeat(4,minmax(0,1fr)); align-items: stretch; align-self: flex-start; width: 100%; gap: 0; height: 32px; padding: 3px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.sim-ui #trade #quick-quantities .button { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; height: 100%; padding: 0 2px; border: 0; border-radius: 4px; background: transparent; color: #596579; font-size: 12px; line-height: 1; white-space: nowrap; }
.sim-ui #trade #quick-quantities .button + .button { position: relative; }
.sim-ui #trade #quick-quantities .button + .button::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: #dde5ef; }
.sim-ui #trade #quick-quantities .button:hover:not(:disabled) { background: #eef3ff; color: var(--blue); }
.sim-ui[data-page="trade"] #trade #quick-quantities { width: calc(100% - 100px); margin-left: 100px; margin-bottom: 16px; }
.sim-ui[data-page="trade"] #trade .trade-ticket > .trade-amount-fields { margin-bottom: 10px; }
.sim-ui #trade .side-switch button.selected,
.sim-ui #trade .order-type-switch button.active { background: #f0f5ff; }
.sim-ui #trade .trade-request-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sim-ui #trade .trade-request-heading .request-label { margin: 0; }
.sim-ui #trade .trade-request-heading .rules-inline-open { margin: 0; white-space: nowrap; }
.sim-ui[data-page] #trade .trade-request > .request-input { display: block; width: 100%; margin-top: 6px; }
.sim-ui #trade .trade-request > .request-input input { margin-top: 0; }
.sim-ui[data-page] #trade .trade-ticket > .trade-amount-fields label .trade-amount-input #quantity { padding-right: 62px; }
.sim-ui #trade .quantity-stepper { position: absolute; top: 4px; bottom: 4px; right: 32px; display: grid; grid-template-rows: repeat(2,minmax(0,1fr)); width: 24px; }
.sim-ui #trade .quantity-stepper button { display: grid; place-items: center; min-height: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #8791a2; font-size: 13px; line-height: 1; }
.sim-ui #trade .quantity-stepper button:hover:not(:disabled) { color: var(--blue); background: #eef3ff; }
.sim-ui[data-page="trade"] main > .metrics .metric { background: var(--section); }
.sim-ui .period-analysis-panel > .period-toolbar { display: block; padding: 0; }
.sim-ui .period-controls-row { display: flex; align-items: center; justify-content: flex-start; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--section); }
.sim-ui .period-controls-row > h3 { flex-shrink: 0; margin: 0; font-size: 15px; }
@media(min-width:1280px){
 .sim-ui[data-page="trade"] main > .trade-grid { min-height: 0; }
 .sim-ui[data-page="trade"] #trade .trade-market > .quote-box { min-height: 0; }
 .sim-ui[data-page="trade"] #trade .quote-prices,
 .sim-ui[data-page="trade"] #trade .quote-heading,
 .sim-ui[data-page="trade"] #trade .quote-limits { flex-shrink: 0; }
 .sim-ui[data-page="trade"] #trade .trade-ticket { gap: 0; }
}
.sim-ui[data-page="trade"] main { max-width: none; padding: 16px 24px; }
.sim-ui[data-page="trade"] main > .page-heading { display: flex; margin-bottom: 16px; }
.sim-ui[data-page="trade"] #page-title { margin: 0; font-size: 26px; line-height: 34px; }
@media(min-width:1280px){
 .sim-ui[data-page="trade"] main { min-height: calc(100dvh - 98px); display: flex; flex-direction: column; }
 .sim-ui[data-page="trade"] main > .metrics { flex-shrink: 0; }
 .sim-ui[data-page="trade"] .trade-grid { flex: 1; margin-bottom: 0; align-items: stretch; }
 .sim-ui[data-page="trade"] .trade-grid > #trade,
 .sim-ui[data-page="trade"] #trade-form,
 .sim-ui[data-page="trade"] #trade-fields { display: flex; flex-direction: column; }
 .sim-ui[data-page="trade"] #trade-form,.sim-ui[data-page="trade"] #trade-fields { flex: 1; min-height: 0; }
 .sim-ui[data-page="trade"] #trade-fields > .trade-fields-layout { flex: 1; min-height: 480px; }
 .sim-ui[data-page="trade"] main > footer { padding: 12px 2px 0; }
}
@media(min-width:1280px) and (max-height:850px){
 .sim-ui[data-page="trade"] main { padding: 12px 20px; }
 .sim-ui[data-page="trade"] main > .page-heading { margin-bottom: 10px; }
 .sim-ui[data-page="trade"] #page-title { font-size: 24px; line-height: 30px; }
 .sim-ui[data-page="trade"] #trade .positions-order-card,.sim-ui[data-page="trade"] #trade .trade-market > .quote-box { padding: 14px; }
 .sim-ui[data-page="trade"] #trade .positions-order-card { gap: 10px; }
 .sim-ui[data-page="trade"] #trade .trade-ticket > .stock-label,.sim-ui[data-page="trade"] #trade #order-type-label,.sim-ui[data-page="trade"] #trade .trade-summary,.sim-ui[data-page="trade"] #trade #quick-quantities { margin-bottom: 10px; }
 .sim-ui[data-page="trade"] #trade .trade-summary { padding: 8px; }
 .sim-ui[data-page="trade"] #trade .trade-summary > .fee-estimate { padding-top: 5px; margin-top: 5px; }
 .sim-ui[data-page="trade"] #trade input { min-height: 32px; height: 32px; padding-top: 5px; padding-bottom: 5px; }
 .sim-ui[data-page="trade"] #trade-fields > .trade-fields-layout { min-height: 440px; }
}
@media(max-width:760px){.sim-ui[data-page="trade"] main{padding:14px 16px;}}
@media(min-width:1280px) and (max-height:740px){
 .sim-ui[data-page="trade"] main > footer { display: none; }
}
.sim-ui[data-page="assets"] .cumulative-metrics .performance-metric,
.sim-ui[data-page="assets"] .performance-details > .panel,
.sim-ui[data-page="assets"] .asset-holdings-slot > .trade-holdings { background: var(--section); }
.sim-ui[data-page="assets"] .chart-period-metrics .performance-metric { background: transparent; }
.sim-ui[data-page="assets"] .period-analysis-panel,
.sim-ui[data-page="assets"] .period-analysis-panel > .period-toolbar,
.sim-ui[data-page="assets"] .period-analysis-panel .period-controls-row,
.sim-ui[data-page="assets"] .period-analysis-panel .performance-charts > .panel { background: var(--surface); }
.sim-ui[data-page="assets"] .performance-chart > .asset-chart { background: var(--surface); border-radius: 8px; }
.sim-ui[data-page="assets"] .asset-holdings-slot .holdings-columns,
.sim-ui[data-page="assets"] .asset-holdings-slot .holding-row,
.sim-ui[data-page="assets"] .asset-holdings-slot .count { background: #fff; }
.sim-ui[data-page="assets"] .asset-holdings-slot .holding-row:has(.is-selected) { background: #f0f5ff; }
.sim-ui[data-page="assets"] .asset-holdings-slot .holding-row:hover { background: #eef3ff; }
.sim-ui .chart-period-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.sim-ui .chart-period-metrics .performance-metric { padding: 0; border: 0; background: transparent; }
.sim-ui .chart-period-metrics .performance-metric > strong { display: block; margin-top: 6px; font-size: 22px; }
.sim-ui .chart-period-metrics .period-metric-note,
.sim-ui .period-analysis-panel #drawdown-status,
.sim-ui .period-analysis-panel #asset-chart > .hint,
.sim-ui .period-analysis-panel .performance-trades > p { display: none; }
.sim-ui .period-toolbar .period-controls-row > .asset-range { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; }
.sim-ui .period-toolbar .period-controls-row .asset-period-switch { margin: 0; flex-shrink: 0; }
.sim-ui .period-toolbar > .performance-metrics.period-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 16px 20px; margin: 0; border: 0; }
.sim-ui .period-toolbar > .period-metrics .performance-metric { padding: 0 20px; border-top: 0; border-left: 1px solid var(--line); }
.sim-ui .period-toolbar > .period-metrics .performance-metric:first-child { padding-left: 0; border-left: 0; }
@media(max-width:760px){
 .sim-ui .period-controls-row { flex-wrap: wrap; gap: 12px; padding: 16px; }
 .sim-ui .period-toolbar .period-controls-row > .asset-range { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
 .sim-ui .period-toolbar .period-controls-row .asset-range > label { flex: 1 1 120px; min-width: 0; }
 .sim-ui .period-toolbar > .performance-metrics.period-metrics { padding: 16px; grid-template-columns: minmax(0,1fr); gap: 12px; }
 .sim-ui .period-toolbar > .period-metrics .performance-metric { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
 .sim-ui .period-toolbar > .period-metrics .performance-metric:first-child { padding-top: 0; border-top: 0; }
}

/* Roomier workspace header and route tabs. */
.sim-ui:not(.portal) .workspace > header { height: 56px; min-height: 56px; padding-inline: 20px; font-size: 13px; }
.sim-ui .workspace-header-left { gap: 16px; }
.sim-ui .workspace-tabs { height: 42px; padding: 5px 20px 0; gap: 6px; }
.sim-ui .workspace-tab-close { width: 18px; height: 18px; }
.sim-ui:not(.portal) header .header-actions { gap: 10px; }
.sim-ui:not(.portal) header .header-icon,.sim-ui:not(.portal) header #trade-notices-open { flex-basis: 36px; width: 36px; height: 36px; min-height: 36px; }
.sim-ui:not(.portal) header .account-switcher select { width: 240px; height: 36px; font-size: 13px; }
@media(max-width:760px){
 .sim-ui:not(.portal) .workspace > header { height: auto; padding: 10px 12px; }
 .sim-ui .workspace-tabs { padding-inline: 12px; }
 .sim-ui:not(.portal) header .account-switcher select { width: 100%; }
}
.sim-ui #workspace-sidebar .query-nav > summary { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px; margin-bottom: 6px; border: 1px solid transparent; border-radius: 7px; color: #b9cee2; font-size: 14px; cursor: pointer; list-style: none; }
.sim-ui #workspace-sidebar .query-nav > summary::-webkit-details-marker { display: none; }
.sim-ui #workspace-sidebar .query-nav > summary:hover,.sim-ui #workspace-sidebar .query-nav.has-active > summary { color: #eef7ff; background: #194b6c80; }
.sim-ui #workspace-sidebar .query-nav-arrow { width: 7px; height: 7px; margin-left: auto; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); }
.sim-ui #workspace-sidebar .query-nav[open] .query-nav-arrow { transform: rotate(45deg); }
.sim-ui #workspace-sidebar .query-submenu .nav-item { padding-left: 34px; font-size: 13px; }
.sim-ui #workspace-sidebar .query-submenu .nav-icon { flex-basis: 22px; height: 24px; border-color: transparent; background: transparent; }
@media(max-width:760px){.sim-ui #workspace-sidebar .query-nav{display:none;}}
/* Match the order-history page's outer spacing. */
.sim-ui[data-page="assets"] main,.sim-ui[data-page="trade"] main { max-width: 1600px; margin-inline: auto; padding: 16px 32px 28px; }
.sim-ui[data-page="trade"] main > .page-heading { margin-bottom: 24px; }
@media(max-width:760px){
 .sim-ui[data-page="assets"] main,.sim-ui[data-page="trade"] main { padding: 14px 32px 28px; }
}
.sim-ui[data-page="assets"] main > .page-heading { display: flex; margin-bottom: 24px; }
.sim-ui:not(.portal) main > .page-heading > #page-title { position: relative; display: block; margin: 0; padding-left: 16px; font-size: 24px; line-height: 36px; }
.sim-ui:not(.portal) main > .page-heading > #page-title::before { content: ''; position: absolute; display: block; left: 0; top: 4px; width: 4px; height: 28px; border-radius: 2px; background: linear-gradient(180deg,#1677ff 0%,#258fff 45%,#36d5ed 100%); }
.sim-ui #orders > .panel-heading p { margin-top: 0; }
.sim-ui #orders > .panel-heading { align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 16px; padding-right: 17px; }
.sim-ui #orders > .panel-heading p { font-size: 12px; color: #61708a; }
.sim-ui #orders .order-refresh-controls { width: auto; margin-left: auto; justify-content: flex-end; gap: 12px; }
.sim-ui #orders .order-refresh-controls .auto-label { display: flex; align-items: center; min-height: 38px; margin: 0; }
.sim-ui #orders .order-refresh-controls .auto-label input { margin: 0; }
.sim-ui :is(#orders,#fills-page) .history-filters { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--section); }
.sim-ui :is(#orders,#fills-page) .history-filters .query-actions { width: 100%; min-width: 0; justify-self: end; justify-content: flex-end; }
.sim-ui :is(#orders,#fills-page) .history-filters input,
.sim-ui :is(#orders,#fills-page) .history-filters select { margin-top: 6px; height: 38px; background: var(--surface); }
.sim-ui #fills-page > .panel-heading { align-items: center; margin-bottom: 16px; }
.sim-ui #fills-page > .panel-heading p { margin: 0; font-size: 12px; color: #61708a; }
.sim-ui #fills-page > .pagination { display: flex; width: 100%; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sim-ui #orders .order-tools { align-items: flex-end; margin-bottom: 16px; padding-bottom: 16px; }
.sim-ui #orders .order-tools .lookup { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 8px; flex: 0 1 360px; max-width: 400px; margin: 0; }
.sim-ui #orders .order-tools .lookup > label { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #596579; }
.sim-ui #orders .order-tools .lookup input { width: 100%; min-width: 0; margin: 0; }
.sim-ui #orders .order-tools .pagination { margin: 0 0 0 auto; gap: 8px; align-items: center; }
@media(max-width:760px) {
 .sim-ui #orders > .panel-heading { padding-right: 13px; }
 .sim-ui #orders .order-refresh-controls { width: 100%; justify-content: flex-end; margin-left: 0; }
 .sim-ui :is(#orders,#fills-page) .history-filters { padding: 12px; }
 .sim-ui #fills-page > .pagination { justify-content: space-between; }
 .sim-ui #orders .order-tools .lookup { flex-basis: 100%; max-width: none; }
 .sim-ui #orders .order-tools .pagination { width: 100%; justify-content: space-between; margin-left: 0; }
}

/* Align estimate labels with the other order form labels. */
.sim-ui[data-page="trade"] #trade .trade-ticket > .trade-summary { margin-left: 0; padding: 0; border: 0; background: transparent; }
.sim-ui[data-page="trade"] #trade .trade-summary > .estimate,
.sim-ui[data-page="trade"] #trade .trade-summary .fee-estimate-heading { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 10px; }
.sim-ui[data-page="trade"] #trade .trade-summary > .fee-estimate { margin-top: 10px; padding-top: 0; border-top: 0; }
.sim-ui[data-page="trade"] #trade .trade-summary .estimate > span,
.sim-ui[data-page="trade"] #trade .trade-summary .fee-estimate-heading > span { color: #61708a; line-height: 1.6; }
.sim-ui[data-page="trade"] #trade .trade-summary .estimate > strong,
.sim-ui[data-page="trade"] #trade .trade-summary .fee-estimate-heading > strong { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; text-align: right; }

/* Match the reference navigation rhythm with consistent line icons. */
.sim-ui .workspace-tabs { gap: 4px; padding-inline: 16px; }
.sim-ui .workspace-tab { padding: 0 10px 0 12px; gap: 8px; }
.sim-ui .workspace-tab:first-child::before { content: none; }
.sim-ui .workspace-tab a { gap: 7px; }
.sim-ui .workspace-tab a > svg { flex: 0 0 14px; }
.sim-ui .workspace-tab-close { width: 16px; height: 16px; font-size: 13px; }
.sim-ui .market-session-status { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #718099; font-size: 12px; line-height: 24px; white-space: nowrap; flex-shrink: 0; }
.sim-ui .market-session-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a1a9b6; }
.sim-ui .market-session-status[data-state="open"]::before { background: #2ba483; }
.sim-ui .market-session-status[data-state="error"]::before { background: #cf1322; }
.sim-ui .market-session-status[data-state="error"] { color: #cf1322; }

/* Compact Hexin brand row shared by the trading and administration navigation. */
.sim-ui #workspace-sidebar { padding: 0 8px 28px; }
.sim-ui #workspace-sidebar .brand { justify-content: center; flex-shrink: 0; gap: 12px; width: calc(100% + 16px); min-height: 56px; margin: 0 -8px 12px; border-bottom: 1px solid #28547666; font-size: 21px; font-weight: 600; letter-spacing: 0; }
.sim-ui #workspace-sidebar .brand-logo { display: block; flex: 0 0 36px; width: 36px; height: 36px; object-fit: contain; }
.sim-ui #workspace-sidebar .nav-label { display: none; }
.sim-ui #workspace-sidebar .nav-item,.sim-ui #workspace-sidebar .query-nav > summary { border-radius: 7px; }
@media(max-width:760px) {
 .sim-ui #workspace-sidebar { padding: 0 12px 12px; }
 .sim-ui #workspace-sidebar .brand { width: 100%; margin: 0 0 8px; min-height: 56px; }
 .sim-ui.portal #workspace-sidebar nav { margin-top: 0; }
}

/* Page descriptions sit below the title while the market status stays on the right. */
.sim-ui:not(.portal) main > .page-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 16px; row-gap: 3px; align-items: center; }
.sim-ui:not(.portal) main > .page-heading > #page-title { grid-column: 1; grid-row: 1; }
.sim-ui:not(.portal) main > .page-heading > #page-title::before { height: 48px; }
.sim-ui:not(.portal) main > .page-heading > .page-subtitle { grid-column: 1; grid-row: 2; margin: 0; padding-left: 16px; color: var(--muted); font-size: 12px; line-height: 20px; }
.sim-ui:not(.portal) main > .page-heading > .market-session-status { grid-column: 2; grid-row: 1 / 3; align-self: start; margin-top: 6px; }

.sim-ui .position-menu { border-color: #d6e4ff; }
.sim-ui .position-menu button { color: var(--blue); }
.sim-ui .position-menu button:hover:not(:disabled),.sim-ui .position-menu button:focus-visible { color: var(--blue); background: #eaf2ff; }

/* Match the price to the selected order side and emphasize the estimated amount. */
.sim-ui #trade:has([data-side="BUY"].selected) #price { color: var(--red); }
.sim-ui #trade:has([data-side="SELL"].selected) #price { color: var(--green); }
.sim-ui #trade:has([data-side="BUY"].selected) #preview-price { color: var(--red); }
.sim-ui #trade:has([data-side="SELL"].selected) #preview-price { color: var(--green); }
.sim-ui #trade #preview-net { color: var(--blue); }
.sim-ui #trade .trade-summary #estimate { color: var(--blue); }

/* Order-entry captions follow the current buy/sell color. */
.sim-ui #trade:has([data-side="BUY"].selected) { --order-side-color: var(--red); }
.sim-ui #trade:has([data-side="SELL"].selected) { --order-side-color: var(--green); }
.sim-ui #trade .trade-ticket > .stock-label,
.sim-ui #trade .trade-ticket > .trade-amount-fields label,
.sim-ui #trade #order-type-label > span { color: var(--order-side-color, #61708a); }

/* Keep primary order labels consistent and fees visually secondary. */
.sim-ui #trade .trade-ticket > .stock-label,
.sim-ui #trade .trade-ticket > .trade-amount-fields label,
.sim-ui #trade .trade-summary #estimate-label { font-size: 13px; font-weight: 400; line-height: 20px; }
.sim-ui #trade .trade-summary #estimate-fee-label,
.sim-ui #trade .trade-summary #estimate-fee { font-size: 12px; font-weight: 400; line-height: 20px; }

.sim-ui[data-page="trade"] #trade .trade-summary .estimate > #estimate-label { color: var(--blue); }

.sim-ui #trade .stock-label > .stock-label-text { display: block; grid-column: 1; grid-row: 1; justify-self: stretch; text-align: center; }

/* Center captions in the shared label column while keeping inputs left-aligned. */
.sim-ui[data-page="trade"] #trade .trade-ticket > .trade-amount-fields label,
.sim-ui[data-page="trade"] #trade .trade-summary .estimate > #estimate-label,
.sim-ui[data-page="trade"] #trade .trade-summary #estimate-fee-label { text-align: center; }
.sim-ui[data-page="trade"] #trade .trade-amount-input,
.sim-ui[data-page="trade"] #trade .trade-amount-input input { text-align: left; }

/* Keep the tabs centered; balance the form's visible labels with extra right whitespace. */
.sim-ui[data-page="trade"] #trade .positions-order-card { padding-inline: 24px; }
.sim-ui[data-page="trade"] #trade .positions-order-card > .trade-ticket { box-sizing: border-box; width: 100%; margin-inline: 0; padding-inline: 0 16px; }
@media(max-width:760px) {
 .sim-ui[data-page="trade"] #trade .positions-order-card { padding-inline: 16px; }
 .sim-ui[data-page="trade"] #trade .positions-order-card > .trade-ticket { padding-inline-end: 8px; }
}

/* A holding is focused as one row, including its action button. */
.sim-ui .holding-row:focus-within { outline: 2px solid #91aaff; outline-offset: -2px; }
.sim-ui .holding-row .holding-card:focus-visible,
.sim-ui .holding-row .holding-action:focus-visible { outline: none; }

/* Match order-entry numbers to the 13px field captions. */
.sim-ui #trade #stock,
.sim-ui #trade #price,
.sim-ui #trade #quantity { font-size: 13px; line-height: 20px; }

/* Shared UI specification: docs/ui-standard.md; keep business layouts scoped. */
.sim-ui[data-page="trade"] main > .metrics .metric,
.sim-ui[data-page="assets"] .cumulative-metrics .performance-metric,
.sim-ui[data-page="assets"] .performance-details > .panel { background: var(--surface); }
.sim-ui #trade :is(#stock, #price, #quantity) { height: calc(var(--control-height) + 2px); min-height: calc(var(--control-height) + 2px); border: 1px solid color-mix(in srgb, var(--muted) 35%, var(--control)); border-radius: var(--radius-control); font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.sim-ui #trade #stock::placeholder { font-size: 13px; font-weight: 400; color: var(--muted); }
.sim-ui[data-page="trade"] #trade .trade-ticket > .stock-label { margin-bottom: 12px; }
.sim-ui #trade :is(#stock, #price, #quantity):hover { border-color: var(--blue); }
.sim-ui #trade :is(#stock, #price, #quantity):focus { border-color: var(--blue); box-shadow: 0 0 0 2px #1677ff14; }
.sim-ui #trade :is(#price, #quantity):disabled { background: var(--section); color: var(--muted); cursor: not-allowed; }
.sim-ui dialog :is(input:not([type="checkbox"]):not([type="radio"]),select) { height: var(--control-height); min-height: var(--control-height); border-radius: var(--radius-control); }
.sim-ui dialog textarea { border-radius: var(--radius-control); }
.sim-ui :is(th,td) { text-align: center; }

/* Give each order action a visible frame, including unselected actions. */
.sim-ui #trade .side-switch { gap: 8px; }
.sim-ui #trade .side-switch button { flex: 1; width: auto; height: 44px; min-height: 44px; padding-block: 0; border: 1px solid color-mix(in srgb, var(--muted) 35%, var(--control)); }

/* Clarify the main ticket's boundaries without changing its layout or line widths. */
.sim-ui #trade { --trade-control-border: color-mix(in srgb, var(--muted) 35%, var(--control)); }
.sim-ui[data-page="trade"] #trade { --trade-content-inset: 15px; }
.sim-ui[data-page="trade"] #trade .positions-order-card > .side-switch { padding: 0; margin-right: 16px; }
.sim-ui[data-page="trade"] #trade .side-switch button { display: flex; align-items: center; justify-content: center; text-align: center; }
.sim-ui[data-page="trade"] #trade .trade-request .request-input input { padding-left: var(--trade-content-inset); }
.sim-ui[data-page="trade"] #trade .trade-request-heading .request-label { padding-left: calc(var(--trade-content-inset) + 1px); }
.sim-ui #trade .trade-amount-input > .quantity-hint { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: max-content; max-width: 100%; padding: 7px 10px; border: 1px solid var(--control); border-radius: 6px; background: var(--surface); color: #ad4e00; box-shadow: 0 4px 12px #172b471a; font-size: 12px; font-weight: 500; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; text-align: left; }
@media(max-width:760px) {
 .sim-ui[data-page="trade"] #trade .positions-order-card > .side-switch { margin-right: 8px; }
}
.sim-ui[data-page="trade"] #trade :is(#stock, #price, #quantity) { padding-left: var(--trade-content-inset); }
.sim-ui[data-page="trade"] #trade #quick-quantities { grid-template-columns: minmax(52px,1.6fr) repeat(4,minmax(0,1fr)); padding: 3px; gap: 4px; }
.sim-ui[data-page="trade"] #trade #quick-quantities .button:first-child { justify-content: center; padding: 0 2px; }
.sim-ui[data-page="trade"] #trade #quick-quantities .button { user-select: none; }
.sim-ui[data-page="trade"] #trade #quick-quantities .button + .button::before { left: -2px; }
.sim-ui[data-page="trade"] #trade #quick-quantities .button:hover:not(:disabled),
.sim-ui[data-page="trade"] #trade #quick-quantities .button:active:not(:disabled) { background: #f0f5ff; color: var(--blue); box-shadow: inset 0 0 0 1px #d6e4ff; }
.sim-ui[data-page="trade"] #trade #quick-quantities .button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.sim-ui[data-page="trade"] #trade .positions-order-card { border-color: color-mix(in srgb, var(--muted) 20%, var(--control)); }
.sim-ui #trade .order-type-switch,
.sim-ui #trade #quick-quantities,
.sim-ui #trade .trade-request .request-input input { border-color: var(--trade-control-border); }
.sim-ui #trade .order-type-switch button.active { border-color: color-mix(in srgb, var(--blue) 40%, var(--control)); }
.sim-ui #trade #quick-quantities .button + .button::before { background: var(--trade-control-border); }
/* Read-only amounts form one compact receipt instead of looking like inputs. */
.sim-ui #trade #market-preview .market-preview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 16px; }
.sim-ui #trade #market-preview .market-preview-metrics > div { display: grid; align-content: start; gap: 4px; }
.sim-ui #trade #market-preview .market-preview-metrics strong { margin-top: 0; font-size: 14px; }
.sim-ui #trade #market-preview .market-preview-metrics > div { min-height: 40px; }
.sim-ui #trade #market-preview-message { min-height: 1.7em; font-size: 11px; }
.sim-ui #trade #market-preview-explanation { margin-top: 0; }
.sim-ui #trade .market-reserve { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--control); }
.sim-ui #trade .market-reserve-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #61708a; }
.sim-ui #trade .market-reserve-row strong { color: #29354a; font-size: 13px; font-weight: 600; }
.sim-ui #trade #market-reserve-note { display: block; margin-top: 5px; line-height: 1.6; }
.sim-ui #trade #market-cash-reserve-row { margin-top: 6px; }
.sim-ui #trade #order-type-label { position: relative; }
.sim-ui #trade .market-state-wrap { margin-left: auto; }
.sim-ui #trade #market-state-open,
.sim-ui #trade #market-preview-help { border: 0; padding: 3px 6px; border-radius: 4px; background: #eef3ff; color: #61708a; font: inherit; font-size: 11px; white-space: nowrap; }
.sim-ui #trade #market-preview { position: relative; padding: 10px 12px; margin-bottom: 10px; }
.sim-ui #trade #market-order-status,
.sim-ui #trade #market-preview-explanation { position: absolute; top: 36px; right: 0; z-index: 30; width: min(340px,100%); margin: 0; padding: 10px 12px; border: 1px solid var(--control); border-radius: 7px; background: var(--surface); box-shadow: 0 4px 14px #172b471a; color: #61708a; font-size: 12px; line-height: 1.6; }
.sim-ui #trade #market-preview .market-preview-metrics { gap: 8px 12px; }
.sim-ui #trade #market-preview .market-preview-metrics > div { min-height: 30px; gap: 2px; }
.sim-ui #trade #market-preview .market-preview-metrics span { line-height: 16px; }
.sim-ui #trade #market-preview .market-preview-metrics strong { line-height: 18px; }
.sim-ui #trade #market-preview-message { margin: 6px 0 0; }
.sim-ui #trade .market-reserve { margin-top: 8px; padding-top: 7px; }
@media(min-width:1280px) {
 .sim-ui[data-page="trade"] main > .page-heading.content-page-heading { padding: 10px 16px; margin-bottom: 12px; }
 .sim-ui[data-page="trade"] main > .metrics .metric { padding: 12px 16px; }
 .sim-ui[data-page="trade"] #trade .positions-order-card { gap: 8px; padding-block: 12px; }
 .sim-ui[data-page="trade"] #trade .trade-ticket > .stock-label,
 .sim-ui[data-page="trade"] #trade #order-type-label { margin-bottom: 10px; }
 .sim-ui[data-page="trade"] #trade #quick-quantities { margin-bottom: 10px; }
 .sim-ui[data-page="trade"] #trade .submit { margin-top: 8px; }
}
.sim-ui[data-page="trade"] #trade .trade-ticket > .trade-summary { width: auto; margin-left: 100px; padding: 10px var(--trade-content-inset); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--section); }
.sim-ui[data-page="trade"] #trade .trade-summary > .estimate,
.sim-ui[data-page="trade"] #trade .trade-summary .fee-estimate-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 0; margin: 0; border: 0; background: transparent; }
.sim-ui[data-page="trade"] #trade .trade-summary > .fee-estimate { margin-top: 8px; padding-top: 0; border-top: 0; }
.sim-ui[data-page="trade"] #trade .trade-summary .estimate > strong,
.sim-ui[data-page="trade"] #trade .trade-summary .fee-estimate-heading > strong { width: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: right; overflow-wrap: anywhere; }
.sim-ui[data-page="trade"] #trade .trade-summary .estimate > #estimate-label,
.sim-ui[data-page="trade"] #trade .trade-summary #estimate-fee-label { color: #61708a; text-align: left; }
.sim-ui[data-page="trade"] #trade .trade-summary #estimate { font-size: 14px; font-weight: 600; line-height: 22px; }
.sim-ui #trade .trade-request { border-top: 0; }
.sim-ui #trade #place { height: 44px; min-height: 44px; padding-block: 0; display: flex; align-items: center; justify-content: center; }
.sim-ui #trade .side-switch button:hover:not(:disabled),
.sim-ui #trade .order-type-switch button:hover:not(:disabled),
.sim-ui #trade .trade-request .request-input input:focus { border-color: var(--blue); }

/* A single compact page title lives in the first content card. */
.sim-ui:not(.portal) main > .page-heading.content-page-heading { padding: 16px 20px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.sim-ui:not(.portal) main > .page-heading.content-page-heading > #page-title,
.sim-ui.portal .content-page-heading #admin-title { position: relative; margin: 0; padding-left: 13px; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; }
.sim-ui:not(.portal) main > .page-heading.content-page-heading > #page-title::before,
.sim-ui.portal .content-page-heading #admin-title::before { content: ''; display: block; position: absolute; left: 0; top: 2px; width: 3px; height: 40px; border-radius: 2px; background: var(--blue); }
.sim-ui:not(.portal) main > .page-heading.content-page-heading > .page-subtitle,
.sim-ui.portal .content-page-heading #admin-subtitle { margin: 3px 0 0; padding-left: 13px; font-size: 12px; line-height: 20px; color: var(--muted); }
@media(min-width:1280px) {
 .sim-ui:not(.portal)[data-page="trade"] main > .page-heading.content-page-heading { padding: 10px 16px; margin-bottom: 12px; }
 .sim-ui[data-page="trade"] main > .metrics { margin-bottom: 12px; }
 .sim-ui[data-page="trade"] main > .metrics .metric { min-height: 0; padding: 10px 14px; }
 .sim-ui[data-page="trade"] main > .metrics .metric strong { margin: 5px 0 4px; font-size: 22px; line-height: 26px; }
}
@media(min-width:1280px) and (max-height:950px) {
 .sim-ui:not(.portal)[data-page="trade"] main > .page-heading.content-page-heading { padding-block: 8px; margin-bottom: 8px; }
 .sim-ui[data-page="trade"] main > .metrics .metric { padding-block: 8px; }
 .sim-ui[data-page="trade"] main > .metrics .metric strong { margin-block: 3px; }
 .sim-ui[data-page="trade"] main > .metrics { margin-bottom: 8px; }
}