:root{color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--bg:#11130f;--page-gradient-start:#22271ec2;--page-gradient-end:#11130ffa;--text:#f3f1e9;--panel:#1d211b;--panel-strong:#252b22;--border:#3a4235;--text-muted:#aeb6a7;--button-bg:#252b22;--button-hover-bg:#2d3429;--button-hover-border:#68745f;--button-text:#f7f4eb;--selected-bg:#38c1720b;--selected-border:#38c1726b;--selected-text:var(--button-text);--connection-bg:#1d211be6;--panel-bg:#1d211bf0;--panel-header-bg:#252b22d9;--price-card-bg:transparent;--price-card-label:var(--text-muted);--price-flat:var(--text);--ask-row-bg:#f0646408;--bid-row-bg:#38c17208;--ask-depth-bg:#f0646420;--bid-depth-bg:#38c17220;--green:#38c172;--red:#f06464;--amber:#f4b942;--metric-green:#3ee587;--metric-green-soft:#3ee58726;--metric-blue:#6fb1ff;--metric-blue-soft:#6fb1ff24;--success-soft-bg:#38c17221;--danger-soft-bg:#f064641f;--success-soft-text:#dffbe8;--danger-soft-text:#ffdede;--error-bg:#501c1cad;--error-text:#ffdede;font-family:Arial,Segoe UI,Tahoma,Helvetica,sans-serif}:root[data-theme=light]{--bg:#f7f8fa;--page-gradient-start:#fffffffa;--page-gradient-end:#ecf0f4f5;--text:#111827;--panel:#fff;--panel-strong:#f1f4f7;--border:#d6dde5;--text-muted:#5f6b7a;--button-bg:#fff;--button-hover-bg:#eef3f8;--button-hover-border:#9aa8b7;--button-text:#111827;--selected-bg:#f7fcf9;--selected-border:#8ed9b4;--selected-text:#111827;--connection-bg:#ffffffeb;--panel-bg:#fffffff5;--panel-header-bg:#f1f4f7f2;--price-card-bg:transparent;--price-card-label:#5f6b7a;--price-flat:#050505;--ask-row-bg:#f064640a;--bid-row-bg:#38c1720a;--ask-depth-bg:#d92d2020;--bid-depth-bg:#008f4f20;--green:#008f4f;--red:#d92d20;--amber:#b7791f;--metric-green:#008f4f;--metric-green-soft:#008f4f1a;--metric-blue:#175cd3;--metric-blue-soft:#175cd31a;--success-soft-bg:#008f4f1f;--danger-soft-bg:#d92d201a;--success-soft-text:#087443;--danger-soft-text:#b42318;--error-bg:#fee4e2f2;--error-text:#b42318}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;color:var(--text);background:linear-gradient(180deg, var(--page-gradient-start), var(--page-gradient-end)), var(--bg);margin:0;font-size:14px}button{border:1px solid var(--border);color:var(--button-text);background:var(--button-bg);cursor:pointer;font:inherit;border-radius:8px}button:hover{border-color:var(--button-hover-border);background:var(--button-hover-bg)}.app-shell{width:min(1560px,100vw - 32px);margin:0 auto;padding:16px 0 18px}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex;position:relative}.market-price-center{background:var(--price-card-bg);border:0;border-radius:0;justify-content:center;align-items:center;gap:18px;min-width:520px;padding:0;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.market-price-line{align-items:baseline;gap:12px;display:inline-flex}.market-price-line span{color:var(--price-card-label);font-size:13px;font-weight:700}.market-price-line strong{color:var(--price-flat);font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;line-height:1}.market-price-center.price-up .market-price-line strong{color:var(--green)}.market-price-center.price-down .market-price-line strong{color:var(--red)}.market-price-center.price-flat .market-price-line strong{color:var(--price-flat)}.market-volume-strip{align-items:center;gap:12px;display:inline-flex}.market-volume-strip div{min-width:92px}.market-volume-strip span{color:var(--text-muted);text-transform:uppercase;font-size:10px;font-weight:600;line-height:1.1;display:block}.market-volume-strip strong{color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin-top:3px;font-size:13px;line-height:1.1;display:block}.eyebrow{color:var(--text-muted);letter-spacing:0;text-transform:uppercase;margin:0 0 4px;font-size:12px;font-weight:700}h1,h2{margin:0}h1{font-size:clamp(17px,2.4vw,26px);font-weight:700;line-height:1}.brand-title{white-space:nowrap;align-items:center;gap:10px;display:inline-flex}.brand-title svg{color:var(--green);stroke-width:2.4px;flex:none}h2{font-size:15px;font-weight:600}.connection-pill{border:1px solid var(--border);min-width:132px;color:var(--text-muted);background:var(--connection-bg);border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:9px 12px;font-size:13px;font-weight:600;display:inline-flex}.connection-pill.live{color:var(--success-soft-text);border-color:#38c17294}.connection-pill.disconnected{color:var(--danger-soft-text);border-color:#f06464a6}.topbar-actions{flex:none;align-items:center;gap:10px;display:inline-flex}.theme-toggle{justify-content:center;align-items:center;gap:7px;min-width:104px;min-height:38px;padding:8px 12px;font-size:13px;font-weight:600;display:inline-flex}.error-banner{background:var(--error-bg);color:var(--error-text);border:1px solid #f064648c;border-radius:8px;margin-bottom:14px;padding:10px 12px;font-size:13px}.dashboard-grid{grid-template-columns:minmax(300px,380px) minmax(420px,1fr) minmax(360px,460px);align-items:stretch;gap:12px;min-width:0;display:grid}.left-column{align-content:start;gap:12px;display:grid}.panel{border:1px solid var(--border);background:var(--panel-bg);border-radius:8px;overflow:hidden}.panel-header{border-bottom:1px solid var(--border);background:var(--panel-header-bg);justify-content:space-between;align-items:center;min-height:44px;padding:12px 14px;display:flex}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.stat-cell{border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-height:64px;padding:12px 14px}.stat-cell:nth-child(2n){border-right:0}.stat-cell span{color:var(--text-muted);margin-bottom:6px;font-size:12px;display:block}.stat-cell strong{overflow-wrap:anywhere;min-width:0;font-size:17px;font-weight:700;display:block}.stat-cell.highlight-stat{background:linear-gradient(135deg,#6fb1ff29,#3ee58714)}.stat-cell.highlight-stat span{color:var(--metric-blue);font-weight:700}.stat-cell.highlight-stat strong{color:#8be9ff;text-shadow:0 0 14px #6fb1ff6b;font-size:22px;line-height:1}:root[data-theme=light] .stat-cell.highlight-stat strong{color:#0958d9;text-shadow:none}.button-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 14px 0;display:grid}.control-button{white-space:nowrap;justify-content:center;align-items:center;gap:7px;min-height:38px;padding:8px 10px;display:inline-flex;position:relative}.control-button.primary{color:var(--button-text);border-color:var(--border);background:var(--button-bg);font-weight:600}.control-button.selected{border-color:var(--selected-border);color:var(--selected-text);background:var(--selected-bg);box-shadow:none;font-weight:600}.control-button.primary.selected{border-color:var(--selected-border);color:var(--selected-text);background:var(--selected-bg);box-shadow:none}.orderbook-panel,.trades-panel{flex-direction:column;height:min(740px,100vh - 126px);min-height:0;display:flex}.book-split{flex:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;min-height:0;padding:10px;display:grid;overflow:hidden}.book-side{min-width:0}.book-side+.book-side{border-left:1px solid var(--border);margin-left:10px;padding-left:10px}.book-side-title{min-height:26px;color:var(--text-muted);text-transform:uppercase;justify-content:space-between;align-items:center;gap:10px;padding:2px 4px 6px;font-size:10px;font-weight:700;display:flex}.book-side-title.bid span:first-child{color:var(--green)}.book-side-title.ask span:first-child{color:var(--red)}.book-side-rows{gap:0;display:grid}.left-column .demo-flow-panel{grid-column:1/-1}.book-table,.trades-table{flex:1;min-height:0;padding:6px 10px;overflow:auto}.book-row,.trade-row{font-variant-numeric:tabular-nums;border-radius:4px;align-items:center;gap:8px;min-height:22px;padding:1px 4px;font-size:12px;font-weight:600;display:grid}.book-row{border-bottom:1px solid #7f889617;border-radius:0;min-height:20px;padding:0 4px;font-size:11px}.book-side-rows .book-row:last-child{border-bottom:0}@media (width>=1181px){.performance-panel,.generator-panel{height:100%}.orderbook-panel,.trades-panel{height:min(740px,100vh - 126px)}.left-column .hero-metrics{gap:8px;padding:10px 12px}.left-column .metric-card{padding:10px}.left-column .metric-head strong{font-size:26px}.left-column .compact-stats .stat-cell{min-height:50px;padding:9px 12px}}.book-row{grid-template-columns:minmax(78px,1fr) minmax(44px,.62fr) minmax(54px,.72fr)}.trade-row{grid-template-columns:1.1fr 1fr 1fr .72fr}.book-row span,.trade-row span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.book-row span:not(:first-child),.trade-row span:not(:first-child){text-align:right}.book-header,.trade-header{color:var(--text-muted);text-transform:uppercase;font-size:10px;font-weight:600}.book-row.ask span:first-child,.trade-row.sell span:nth-child(2),.trade-row.sell span:nth-child(4){color:var(--red)}.book-row.bid span:first-child,.trade-row.buy span:nth-child(2),.trade-row.buy span:nth-child(4){color:var(--green)}.book-row.depth-row{isolation:isolate;background:linear-gradient(90deg, var(--book-depth-bg) 0%, var(--book-depth-bg) var(--depth), transparent calc(var(--depth) + 16px), transparent 100%), var(--book-row-bg);position:relative;overflow:hidden}.book-row.depth-row.ask{--book-row-bg:var(--ask-row-bg);--book-depth-bg:var(--ask-depth-bg)}.book-row.depth-row.bid{--book-row-bg:var(--bid-row-bg);--book-depth-bg:var(--bid-depth-bg)}.book-row.depth-row span{z-index:1;position:relative}.last-price{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--panel-strong);justify-content:space-between;align-items:center;min-height:54px;padding:0 14px;display:flex}.last-price span{color:var(--text-muted);text-transform:uppercase;font-size:12px}.last-price strong{color:var(--amber);font-variant-numeric:tabular-nums;font-size:24px}@media (width<=1180px){.dashboard-grid{grid-template-columns:1fr 1fr}.left-column{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.left-column .demo-flow-panel{grid-column:1/-1}}@media (width<=900px){.app-shell{width:min(100vw - 24px,820px);padding:16px 0 28px}.topbar{flex-direction:column;align-items:flex-start;gap:12px}.topbar>div:first-child{width:100%}h1{font-size:20px}.brand-title{white-space:normal}.topbar-actions{width:100%}.theme-toggle,.connection-pill{flex:1}.market-price-center{justify-content:space-between;width:100%;min-width:0;position:static;transform:none}.market-price-line strong{font-size:34px}.market-volume-strip{justify-content:flex-end}.dashboard-grid,.left-column{grid-template-columns:1fr}.orderbook-panel,.trades-panel{height:auto;min-height:auto}}@media (width<=640px){.app-shell{width:100%;padding:12px 10px 24px}.dashboard-grid{gap:10px}.panel-header{min-height:40px;padding:10px 12px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-cell{min-height:56px;padding:10px 12px}.stat-cell strong{font-size:15px}.stat-cell.highlight-stat strong{font-size:19px}.button-row{padding:10px 12px 0}.control-button{min-height:36px;padding:7px 8px;font-size:12px}.book-split{grid-template-columns:1fr;gap:8px;padding:8px}.book-side+.book-side{border-top:1px solid var(--border);border-left:0;margin-left:0;padding-top:8px;padding-left:0}.book-table,.trades-table{padding:7px 8px}.book-row,.trade-row{gap:6px;min-height:26px;padding:3px 2px;font-size:12px}.book-row{grid-template-columns:minmax(82px,1fr) minmax(54px,.7fr) minmax(58px,.8fr)}.trade-row{grid-template-columns:minmax(82px,1fr) minmax(74px,.9fr) minmax(44px,.55fr) minmax(36px,.45fr)}.book-header,.trade-header{font-size:10px}}@media (width<=420px){.app-shell{padding:10px 8px 22px}.eyebrow{font-size:11px}h1{font-size:18px}.brand-title{gap:8px}.brand-title svg{width:24px;height:24px}.market-price-center{flex-direction:column;align-items:flex-start;gap:8px}.market-price-line strong{font-size:32px}.market-volume-strip{justify-content:space-between;width:100%}.market-volume-strip div{min-width:0}.topbar-actions{gap:8px}.theme-toggle,.connection-pill{min-width:0;padding:8px;font-size:12px}.book-split,.book-table,.trades-table{padding:6px}.book-row,.trade-row{font-size:11px}.trade-row{grid-template-columns:minmax(72px,1fr) minmax(66px,.9fr) minmax(36px,.5fr) minmax(32px,.45fr)}}.panel-header-strong{min-height:48px}.panel-caption{color:var(--text-muted);text-transform:uppercase;font-size:11px;font-weight:600}.status-badge{border:1px solid var(--border);letter-spacing:0;text-transform:uppercase;border-radius:999px;justify-content:center;align-items:center;min-width:82px;padding:5px 9px;font-size:11px;font-weight:600;display:inline-flex}.status-badge.running{color:var(--success-soft-text);background:var(--success-soft-bg);border-color:#38c172b3}.status-badge.stopped,.status-badge.connecting{color:var(--danger-soft-text);background:var(--danger-soft-bg);border-color:#f0646494}.performance-panel{overflow:hidden}.hero-metrics{border-bottom:1px solid var(--border);grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 14px;display:grid}.metric-card{border:1px solid var(--border);background:var(--panel-strong);border-radius:8px;min-width:0;padding:12px}.metric-card.green{background:linear-gradient(180deg, var(--metric-green-soft), transparent), var(--panel-strong)}.metric-card.blue{background:linear-gradient(180deg, var(--metric-blue-soft), transparent), var(--panel-strong)}.metric-head{gap:7px;display:grid}.metric-head span{color:var(--text-muted);text-transform:uppercase;font-size:12px;font-weight:600}.metric-head strong{overflow-wrap:anywhere;font-variant-numeric:tabular-nums;min-width:0;font-size:30px;font-weight:700;line-height:1}.metric-card.green .metric-head strong{color:var(--metric-green)}.metric-card.blue .metric-head strong{color:var(--metric-blue)}.metric-bar{background:#7f889638;border-radius:999px;height:8px;margin-top:12px;overflow:hidden}.metric-bar span{border-radius:inherit;height:100%;transition:width .14s ease-out;display:block}.metric-card.green .metric-bar span{background:linear-gradient(90deg, var(--metric-green), #a5f3c5)}.metric-card.blue .metric-bar span{background:linear-gradient(90deg, var(--metric-blue), #b9dcff)}.metric-card small{color:var(--text-muted);margin-top:7px;font-size:11px;font-weight:500;display:block}.compact-stats .stat-cell{min-height:58px}.generator-summary{border-bottom:1px solid var(--border);gap:0;padding:8px 14px;display:grid}.generator-summary div{border-bottom:1px solid #7f889629;justify-content:space-between;align-items:center;gap:12px;min-height:34px;display:flex}.generator-summary div:last-child{border-bottom:0}.generator-summary span{color:var(--text-muted);font-size:12px;font-weight:600}.generator-summary strong{overflow-wrap:anywhere;text-align:right;font-variant-numeric:tabular-nums;min-width:0;font-size:13px}.target-actions{justify-content:flex-end;align-items:center;gap:10px;min-width:0;display:inline-flex}.target-select{border:1px solid var(--border);min-width:170px;height:34px;color:var(--button-text);background:var(--button-bg);font:inherit;border-radius:8px;padding:0 34px 0 10px;font-size:13px;font-weight:600}.target-select:hover{border-color:var(--button-hover-border);background:var(--button-hover-bg)}.target-select:focus{outline:2px solid var(--selected-border);outline-offset:1px}.target-actions .control-button{min-width:92px;min-height:32px;padding:6px 10px}.positive-text{color:var(--green)}.negative-text{color:var(--red)}.demo-flow-panel .panel-header{min-height:40px}.flow-strip{color:var(--text-muted);flex-wrap:wrap;gap:8px;padding:12px 14px;font-size:12px;font-weight:600;display:flex}.flow-strip span{align-items:center;gap:8px;display:inline-flex}.flow-strip b{color:var(--text);font-weight:600}@media (width<=640px){.hero-metrics{grid-template-columns:1fr;padding:10px 12px}.metric-head strong{font-size:28px}.generator-summary{padding:8px 12px}body{overflow-x:hidden}.app-shell{width:min(100%,390px);max-width:390px;margin-left:auto;margin-right:auto}.market-price-center{flex-direction:column;align-items:flex-start;gap:8px}.market-volume-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;display:grid}.market-volume-strip div{min-width:0}.market-volume-strip strong{font-size:12px}.panel-header{gap:10px}.status-badge{min-width:0;max-width:52%;padding-inline:8px}.generator-summary strong{max-width:68%}.target-actions{gap:8px}.target-actions .control-button{min-width:78px}}