.controls form { padding-bottom: 20px; }
.controls .range-label { display: grid; grid-template-columns: 1fr auto; }
.controls .range-label > span { color: #aeb8ce; font: inherit; margin: 0; }
.controls output { color: #fff; font: 500 .72rem var(--mono); }
.controls input[type="range"] { appearance: none; background: transparent; border: 0; grid-column: 1/-1; height: 28px; margin-top: 5px; padding: 0; }
.controls input[type="range"]::-webkit-slider-runnable-track { background: #3c4767; border-radius: 99px; height: 5px; }
.controls input[type="range"]::-webkit-slider-thumb { appearance: none; background: #aeb7ff; border: 3px solid #273253; border-radius: 50%; box-shadow: 0 0 0 3px rgba(174,183,255,.12); height: 18px; margin-top: -6px; width: 18px; }
.assumption { border-top: 1px solid rgba(215,221,245,.16); padding-top: 22px; }
.model-profile { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.model-profile span { background:rgba(174,183,255,.1); border:1px solid rgba(174,183,255,.16); border-radius:99px; color:#c7cdef; font:400 .58rem var(--mono); padding:6px 8px; }
.rps-presets { display:grid; gap:5px; grid-template-columns:repeat(4,1fr); margin-top:7px; }
.controls form .rps-presets button { background:rgba(174,183,255,.08); border:1px solid rgba(174,183,255,.16); border-radius:6px; box-shadow:none; color:#c7cdef; font:500 .58rem var(--mono); margin:0; min-height:29px; padding:0; width:auto; }
.controls form .rps-presets button:hover { background:rgba(174,183,255,.16); box-shadow:none; transform:none; }
.assumption p:last-child { color: #aeb8ce; font-size: .72rem; line-height: 1.65; margin: 0; }
.slo-badge { background: #edf0fa; border: 1px solid #d3d8e8; border-radius: 99px; color: #59667d; font: 500 .7rem var(--mono); padding: 9px 13px; }
.slo-badge.within-slo { background: #e7f7f1; border-color: #bce8d8; color: #13785b; }
.slo-badge.at-risk { background: #fff0eb; border-color: #f2cabc; color: #b84f32; }
.traffic-flow { align-items:center; display:grid; gap:9px; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; margin:24px 0 0; }
.traffic-flow>i { color:#9ba6b9; font-style:normal; text-align:center; }
.flow-node { background:#fff; border:1px solid #d9deea; border-radius:11px; min-width:0; padding:14px; }
.flow-node span,.flow-node small { color:#7a869b; display:block; font:500 .58rem var(--mono); }
.flow-node strong { color:#263149; display:block; font-size:1.15rem; margin:6px 0 3px; overflow:hidden; text-overflow:ellipsis; }
.flow-node.served { border-top:3px solid #4d9bd8; }
.flow-node.admitted { border-top:3px solid #36a982; }
.flow-node.queued { border-top:3px solid #e4a14c; }
.flow-node.rejected { border-top:3px solid #dd6370; }
.summary { display: grid; gap: 12px; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 24px 0; }
.plan-metric { background: #fff; border: 1px solid #d9deea; border-radius: 12px; min-width: 0; padding: 17px; }
.plan-metric span { color: #7a869b; display: block; font: 500 .62rem var(--mono); text-transform: uppercase; }
.plan-metric strong { color: #202b43; display: block; font-size: 1.35rem; margin: 8px 0 4px; }
.plan-metric small { color: #7a869b; display: block; font-size: .66rem; line-height: 1.35; }
.topology { background: #fff; border: 1px solid #d7ddea; border-radius: 16px; box-shadow: 0 12px 32px rgba(38,49,79,.06); overflow: hidden; }
.pod-canvas { align-items: stretch; background: radial-gradient(circle at 50% 0,rgba(91,91,214,.08),transparent 38%),#f8f9fc; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); min-height: 235px; padding: 24px; position: relative; }
.pod-canvas::before { background-image: radial-gradient(#cbd2e2 1px,transparent 1px); background-size: 18px 18px; content:""; inset:0; opacity:.36; pointer-events:none; position:absolute; }
.pod { animation: pod-in .35s ease both; animation-delay: var(--delay); background:#fff; border:1px solid #d7ddea; border-radius:12px; box-shadow:0 8px 20px rgba(49,59,88,.07); padding:16px; position:relative; z-index:1; }
.pod-head { align-items:center; display:flex; gap:8px; }
.pod-head strong { font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod-head .zone { color:#7b879a; font:400 .58rem var(--mono); margin-left:auto; }
.gpu-chip { background:#eef0fb; border-radius:7px; color:#4f55bd; font:500 .62rem var(--mono); margin:14px 0; padding:8px 9px; }
.pod-stat { display:grid; grid-template-columns:1fr auto; margin-top:10px; }
.pod-stat>span { color:#7a869a; font-size:.68rem; }
.pod-stat>strong { color:#253049; font-size:.72rem; }
.pod-stat .bar { grid-column:1/-1; height:4px; margin-top:7px; }
.pod-overflow { align-items:center; background:transparent; border:1px dashed #aeb6c9; box-shadow:none; display:flex; flex-direction:column; justify-content:center; min-height:142px; text-align:center; }
.pod-overflow strong { color:#5459c4; font-size:1.25rem; }
.pod-overflow span { color:#7c879a; font-size:.68rem; line-height:1.45; margin-top:7px; max-width:150px; }
.plan-grid { display:grid; gap:18px; grid-template-columns:.8fr 1.2fr; margin-top:18px; }
.resource-panel,.why-panel { background:#fff; border:1px solid #d7ddea; border-radius:14px; padding:23px; }
.resource-panel>div { display:grid; grid-template-columns:1fr 1fr; }
.resource-panel>div>div { border-top:1px solid #e3e6ef; padding:12px 0; }
.resource-panel>div>div:nth-child(even) { padding-left:18px; }
.resource-panel span { color:#7b8699; display:block; font-size:.66rem; }
.resource-panel strong { color:#253049; display:block; font-size:.83rem; margin-top:5px; }
.why-panel ol { counter-reset:reason; list-style:none; margin:0; padding:0; }
.why-panel li { border-top:1px solid #e3e6ef; color:#4d5a70; counter-increment:reason; font-size:.76rem; line-height:1.55; padding:12px 0 12px 34px; position:relative; }
.why-panel li::before { align-items:center; background:#eef0fb; border-radius:50%; color:#565bc5; content:counter(reason); display:flex; font:500 .62rem var(--mono); height:22px; justify-content:center; left:0; position:absolute; top:11px; width:22px; }
@keyframes pod-in { from{opacity:0;transform:scale(.96) translateY(5px)} to{opacity:1;transform:none} }
@media(max-width:1100px){.summary{grid-template-columns:repeat(3,1fr)}.plan-grid{grid-template-columns:1fr}.traffic-flow{grid-template-columns:1fr 1fr 1fr}.traffic-flow>i{display:none}}
@media(max-width:680px){.operations-head{align-items:flex-start}.summary{grid-template-columns:1fr 1fr}.pod-canvas{grid-template-columns:1fr}.resource-panel>div{grid-template-columns:1fr}.resource-panel>div>div:nth-child(even){padding-left:0}}