.price-panel{padding-top:8px;--trade-height:clamp(70px,calc((100svh - 520px)*.4),132px)}
.time-choice{margin-left:8px}
#chart{height:clamp(100px,calc((100svh - 520px)*.6),260px);margin:8px 0 0}
#priceChartLegend{grid-template-columns:repeat(4,minmax(0,1fr));margin:0;gap:8px}
#priceChartLegend>div{grid-template-columns:1fr;position:relative}
#priceChartLegend small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#priceChartLegend .price-stale strong{color:var(--amber);text-decoration:underline dotted;text-underline-offset:3px}
#priceChartLegend strong{font-size:14px}
.gap-metric{padding:2px 0 6px;justify-content:flex-end;gap:12px;min-height:30px}
.gap-metric>.eyebrow{font-size:11px}
.gap-metric strong{font-size:20px}
.gap-metric svg{width:22px;height:22px;color:var(--muted)}
#gapValue[data-direction=up],#gapArrow[data-direction=up]{color:var(--green)}
#gapValue[data-direction=down],#gapArrow[data-direction=down]{color:var(--red)}
#gapArrow[data-direction=flat]{color:var(--muted)}
@keyframes price-momentum{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:no-preference){#gapArrow[data-direction=up],#gapArrow[data-direction=down]{animation:price-momentum var(--pulse-period,2s) ease-in-out infinite}}
#marketActivity{border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
#activityControls{display:flex;align-items:center;gap:12px;margin:4px 0;min-height:36px;flex-wrap:wrap}
#activityControls h3{font-size:12px;margin:0 auto 0 0;white-space:nowrap}
#activityControls label{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:11px;color:var(--muted)}
#activityControls input{width:78px;min-width:0;height:32px;min-height:32px;padding:3px 5px;font-size:14px;font-variant-numeric:tabular-nums}
#activityControls #tradeMinPrice{width:64px}
#activityControls input[aria-invalid=true]{border-color:var(--red)}
#activityControls #tradeView{margin:0;width:auto;gap:0}
#tradeView button{width:34px;min-width:34px;height:34px;min-height:34px;padding:6px}
.trade-chart-heading{font-size:10px;margin:2px 0;gap:10px;height:18px}
.trade-chart-layout,#tradeChartScroll{height:calc(var(--trade-height) + 12px)}
#tradeChart canvas{height:var(--trade-height)}
#tradeChartDetail{padding:2px 0 4px;min-height:36px;border:0;font-size:11px}
.bar-detail-heading,.bar-detail-time{min-height:16px;line-height:16px}
#marketTradeList{height:calc(var(--trade-height) + 48px);overflow:auto}
#marketTradeList .market-trade{padding:8px 4px}
#marketTradeList .trade-values{gap:6px;flex-wrap:wrap}
#marketTradeList .trade-values strong{font-size:16px}
#marketTradeList .trade-values span{font-size:12px}
#manualPanel.manual-inline{padding:4px 0 10px}
.manual-inline .section-heading{margin:0;min-height:34px;gap:8px}
.manual-inline .section-heading h3{font-size:12px}
.manual-inline .section-heading #manualMode{margin-left:auto}
.manual-inline #manualEdit{width:34px;height:34px;min-height:34px;padding:7px}
.manual-inline .manual-presets{gap:6px;margin:2px 0 8px;grid-template-rows:repeat(2,54px)}
.manual-inline .manual-presets button{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;align-items:center;gap:2px 4px;min-width:0;min-height:0;padding:5px 8px;white-space:normal}
.manual-presets button[data-side=UP]{background:#123b2b;border-color:#32865f;color:#84e8b4}
.manual-presets button[data-side=DOWN]{background:#442028;border-color:#a94955;color:#ffabb1}
.manual-presets button span{font-size:11px;text-align:left}
.manual-presets button strong{font-size:16px;text-align:right;overflow-wrap:anywhere;line-height:18px}
.manual-presets button small{grid-column:1/-1;font-size:10px;line-height:12px;font-weight:400;text-align:right}
.manual-inline .manual-presets button.large-amount{display:flex;flex-direction:column;justify-content:center;gap:0}
.manual-presets button.large-amount span{font-size:9px;line-height:10px}
.manual-presets button.large-amount strong{font-size:12px;line-height:16px}
.manual-inline #manualResult:empty{display:none}
@media(max-width:1000px){#priceChartLegend{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){
 body{padding-top:max(8px,env(safe-area-inset-top));padding-inline:12px}
 #topbar{grid-template-columns:minmax(0,1fr) 66px 34px;gap:4px 8px;padding-bottom:6px}
 .app-identity{grid-column:1;gap:6px}.app-identity img{width:20px;height:20px}.app-identity strong{font-size:12px}
 .header-market{grid-column:1/3;grid-row:2}.header-market h1{font-size:13px;line-height:16px}
 .header-status{grid-row:3;gap:8px}.header-status #connection{font-size:10px}
 #topbar .timer{font-size:23px}#kill{width:34px;min-width:34px;height:34px;min-height:34px;padding:6px}
 .time-choice{font-size:10px}.time-choice select{min-height:26px;height:26px;padding:0 3px;font-size:11px}
 .price-panel{padding-top:6px;--trade-height:clamp(62px,calc((100svh - 540px)*.4),132px)}
 #chart{height:clamp(88px,calc((100svh - 540px)*.6),220px);margin-top:4px}
 #priceChartLegend{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
 #priceChartLegend>div{grid-template-columns:minmax(0,1fr) auto;gap:2px 4px;padding-left:5px}
 #priceChartLegend span{font-size:10px;line-height:20px}#priceChartLegend strong{font-size:12px;line-height:20px}
 .gap-metric{min-height:28px;padding:2px 0 4px}.gap-metric strong{font-size:20px}
 #activityControls{gap:4px;margin:2px 0;flex-wrap:nowrap}
 #activityControls h3{font-size:11px}#activityControls label{font-size:10px;gap:2px}
 #activityControls input{font-size:16px;width:64px;padding:2px 3px}#activityControls #tradeMinPrice{width:55px}
 #tradeView button{width:30px;min-width:30px;height:32px;min-height:32px;padding:6px}
 .manual-inline .manual-presets{grid-template-rows:repeat(2,48px)}
 .manual-inline .manual-presets button{padding:4px 6px}.manual-presets button strong{font-size:14px}
 .bar-detail-heading{font-size:10px}.bar-detail-time{font-size:9px}
 #mobileNav button{height:50px;min-height:50px}
}
@media(max-width:360px){
 #activityControls{flex-wrap:nowrap}#activityControls h3{display:none}#activityControls #tradeView{margin-left:auto}
 .manual-inline .manual-presets button{grid-template-columns:1fr;gap:0;padding:3px}
 .manual-presets button span{font-size:9px;text-align:center}.manual-presets button strong,.manual-presets button small{text-align:center}
 #priceChartLegend strong{font-size:11px}#priceChartLegend span{font-size:9px}
}
@media(max-width:700px) and (max-height:620px){
 #topbar .app-identity{display:none}
 #topbar .header-market{grid-row:1}#topbar .header-status{grid-row:2}#topbar #kill{grid-row:1}
 .header-market h1{font-size:12px;line-height:16px}
 #chart{height:66px}.price-panel{--trade-height:52px}
 .gap-metric{min-height:24px;padding:0 0 2px}
 #tradeChartDetail{min-height:20px;padding:0 0 2px}.bar-detail-time{display:none}
 .manual-inline .section-heading{min-height:28px}.manual-inline #manualEdit{height:28px;min-height:28px;padding:4px}
 .manual-inline .manual-presets{grid-template-rows:repeat(2,44px);margin-top:0}
 .manual-inline .manual-presets button{gap:0;padding:3px}
 .manual-presets button span{font-size:9px;line-height:10px}.manual-presets button strong{font-size:14px;line-height:16px}.manual-presets button small{font-size:9px;line-height:10px}
 #mobileNav button{height:42px;min-height:42px;gap:2px}
}