.margin-preview{padding:0;overflow:hidden;--margin-positive:#76e8b5;--margin-negative:#ff727f}
body.light .margin-preview{--margin-positive:#087046;--margin-negative:#b62932}
.margin-preview-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--border)}
.margin-preview-heading h2{margin:4px 0 0;font-size:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.margin-preview-heading .tag{font-size:10px;letter-spacing:1.4px}
.margin-preview select,.margin-preview input{width:100%;max-width:100%;min-width:0;font-size:12px;padding:7px 10px}
.margin-preview-selectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:12px 22px;border-bottom:1px solid var(--border)}
.margin-preview label{font-size:11px;min-width:0}
.margin-demo-badge{font-size:9px;letter-spacing:1px;font-weight:600;padding:4px 7px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.margin-preview-body{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:34px;align-items:center;padding:24px 22px;background:linear-gradient(115deg,var(--bg),transparent)}
.margin-meter-column{min-width:0}
#marginBuyingPower{display:grid;text-align:center;gap:3px;margin-bottom:20px;font-variant-numeric:tabular-nums}
.margin-power-label{font-size:12px;color:var(--muted)}
.margin-power-value{font-size:48px;line-height:1.15;letter-spacing:-1.5px;font-weight:600;overflow-wrap:anywhere}
.power-positive{color:var(--margin-positive);text-shadow:0 0 20px color-mix(in srgb,var(--margin-positive) 38%,transparent)}
.power-negative{color:var(--margin-negative);text-shadow:0 0 20px color-mix(in srgb,var(--margin-negative) 40%,transparent)}
.power-zero,.power-unavailable{color:var(--muted);text-shadow:none}
.margin-power-source{font-size:9px;letter-spacing:1px;color:var(--muted)}
.margin-power-breakdown{font-size:11px;color:var(--muted);margin-top:3px}
.margin-gauge{width:100%;height:auto;display:block;overflow:visible}
.margin-gauge-track{fill:none;stroke:var(--border);stroke-width:19}
.margin-gauge-spectrum{fill:none;stroke:url(#marginSpectrum);stroke-width:12}
.margin-gauge.is-unavailable .margin-gauge-spectrum{display:none}
.margin-gauge-tick{stroke:var(--muted);stroke-width:1}
.margin-gauge-needle{fill:var(--text)}
.margin-gauge-pivot{fill:var(--panel);stroke:var(--text);stroke-width:2}
.margin-gauge-end{fill:var(--muted);font:10px system-ui,sans-serif}
.margin-gauge-number{fill:var(--health-neon,var(--text));font:550 42px system-ui,sans-serif;letter-spacing:-1px;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--health-neon,var(--text)) 30%,transparent))}
.margin-gauge-label{fill:var(--text);font:13px system-ui,sans-serif;letter-spacing:.3px}
.margin-preview-details{min-width:0}
#marginSummary{padding:0 0 16px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.margin-outlook-eyebrow{font-size:11px;letter-spacing:.4px;color:var(--muted)}
#marginSummary h3{margin:5px 0 8px;font-size:25px;line-height:1.3;font-weight:550;font-variant-numeric:tabular-nums}
#marginSummary h3 span{color:var(--muted);font-weight:400}
#marginSummary p{margin:0 0 8px;font-size:12px;line-height:1.6}
#marginSummary small{font-size:10px}
#marginSummary strong{color:var(--text);font-weight:600;white-space:nowrap}
.margin-threshold-warning #marginSummary h3{color:var(--chart-red)}
#marginInputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin:0}
#marginInputs div{min-width:0}
#marginInputs dt{font-size:10px;line-height:1.4;color:var(--muted)}
#marginInputs dd{margin:3px 0 0;font-size:15px;line-height:1.4;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.margin-preview-caption{border-top:1px solid var(--border);font-size:10px;margin:0;padding:10px 22px;color:var(--muted)}
.margin-limit-panel{border-top:1px solid var(--border);padding:14px 22px}
.margin-limit-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end}
.margin-limit-panel p{font-size:11px;line-height:1.5;margin:8px 0 0}
#marginLimitFeedback{color:var(--text)}
#marginLimitEquivalent{color:var(--accent);font-variant-numeric:tabular-nums}
#marginDebtPercent[aria-invalid=true]{border-color:var(--chart-red)}
.margin-percent-stepper{display:grid;grid-template-columns:minmax(0,1fr) 34px;border:1px solid var(--border);border-radius:3px;overflow:hidden;margin-top:5px;background:var(--panel)}
.margin-preview .margin-percent-stepper input{border:0;border-radius:0;appearance:textfield;-moz-appearance:textfield;margin:0}
.margin-percent-stepper input::-webkit-inner-spin-button,.margin-percent-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.margin-percent-arrows{display:grid;grid-template-rows:1fr 1fr;border-left:1px solid var(--border)}
.margin-percent-arrows button{border:0;border-radius:0;padding:2px;min-height:23px;font-size:10px;line-height:1}
.margin-percent-arrows button+button{border-top:1px solid var(--border)}
.margin-percent-arrows button:hover:not(:disabled){color:var(--accent);background:var(--bg)}
.margin-percent-stepper:focus-within{outline:2px solid var(--accent);outline-offset:2px}
#marginStepHint{display:block;margin-top:4px;font-size:10px;color:var(--muted)}
.margin-alert-panel{padding:16px 22px;border-top:1px solid var(--border)}
.margin-alert-heading{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.margin-alert-heading h3{margin:0;font-size:16px}
#marginAlertHealth{font-size:12px;line-height:1.5;color:var(--muted);align-self:center;margin:0}
.margin-alert-panel p{font-size:11px;line-height:1.5;margin:8px 0}
.margin-alert-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
.margin-alert-rule{padding:12px;border:1px solid var(--border);border-left:3px solid var(--border);background:var(--bg);min-width:0}
.margin-alert-rule.is-triggered{border-left-color:var(--margin-negative);box-shadow:inset 3px 0 16px -12px var(--margin-negative)}
.margin-alert-status{font-size:11px;margin-top:8px;color:var(--muted)}
.is-triggered .margin-alert-status{color:var(--margin-negative)}
#marginAlertNotice{color:var(--text)}
#marginAlertNotice:empty{display:none}
@media(max-width:900px){.margin-preview-body{grid-template-columns:minmax(240px,270px) minmax(0,1fr);gap:20px}.margin-preview-heading{flex-wrap:wrap}#marginSummary h3{font-size:22px}.margin-power-value{font-size:42px}}
@media(max-width:600px){.margin-preview-heading{padding:14px}.margin-preview-selectors,.margin-limit-controls,.margin-alert-grid{grid-template-columns:1fr;gap:10px}.margin-preview-selectors,.margin-limit-panel,.margin-alert-panel{padding:12px 14px}.margin-preview-body{grid-template-columns:1fr;padding:18px 14px 16px;gap:20px}.margin-meter-column{width:100%;max-width:310px;justify-self:center}.margin-demo-badge{font-size:8px}.margin-preview-caption{padding:10px 14px}#marginInputs dd{font-size:14px}.margin-preview input{font-size:16px}.margin-power-value{font-size:40px}}
@media(pointer:coarse){.margin-percent-stepper{grid-template-columns:minmax(0,1fr) 44px}.margin-percent-arrows button{min-height:36px}}

.margin-overview-notice{margin:0 22px 16px;padding:14px;border:1px solid #ff727f;border-left:4px solid #ff727f;color:#ff727f;background:#ff727f0c;font-size:13px;line-height:1.6}.margin-stress-controls{padding:12px 22px;border-top:1px solid var(--border);font-size:12px}.margin-stress-controls summary{cursor:pointer;color:var(--muted)}.margin-stress-controls p{font-size:12px;line-height:1.6}.margin-stress-controls button{font-size:12px}
