.infrastructure-section { background:#edf2f5; border-top:1px solid var(--line); }
.infrastructure-section .section-heading { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.infrastructure-section .section-heading>p { max-width:480px; }
#infrastructure-explorer { --network-a:#bd9afa; --network-b:#59d7c1; --power-a:#ff6678; --power-b:#579eff; }
[data-tone=network-a] { --tone:var(--network-a); } [data-tone=network-b] { --tone:var(--network-b); }
[data-tone=power-a] { --tone:var(--power-a); } [data-tone=power-b] { --tone:var(--power-b); }
.infra-controls { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:20px; }
.infra-controls>p { font-size:13px; }
.infra-mode { display:flex; padding:4px; gap:4px; border:1px solid #cbd6df; border-radius:6px; background:#fff; }
.infra-controls button { min-height:44px; padding:10px 18px; border:0; border-radius:3px; background:transparent; color:var(--muted); font-size:14px; font-weight:600; }
.infra-mode button[aria-pressed=true] { background:var(--navy); color:#fff; }
.infra-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); border:1px solid #cbd6df; border-radius:8px; overflow:hidden; align-items:start; background:var(--navy); }
.infra-visual { background:var(--navy); color:#e3eef7; min-width:0; padding:22px 18px 18px; position:relative; top:auto; }
.infra-visual-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; min-height:36px; }
.infra-visual-top>span { display:flex; align-items:center; gap:8px; }
.infra-visual-top i { width:6px; height:6px; border-radius:50%; background:#67d6a1; box-shadow:0 0 12px #67d6a155; }
.infra-visual-top.is-simulated i { background:#ffd18d; }
.infra-visual button { color:#c1d5e6; border:1px solid #496274; border-radius:4px; background:transparent; font-size:13px; padding:6px 10px; min-height:36px; }
.infra-visual button:hover { background:#244761; color:#fff; }
.infra-canvas { position:relative; overflow:hidden; }
.infra-canvas.is-changing { pointer-events:none; }
.infra-svg { width:100%; display:block; }
.infra-enclosure { fill:#293e4c; stroke:#587080; stroke-width:1.5; }
.infra-rail { stroke:#334e60; stroke-width:13; }
.infra-rack-hole { stroke:#8da0ab; stroke-width:3; opacity:.5; }
.infra-rack-caption { fill:#b5cad7; font:11px var(--mono); letter-spacing:1.6px; }
.infra-device { cursor:pointer; transition:opacity .3s; outline:none; }
.infra-device-hit { fill:transparent; stroke:transparent; stroke-width:2; }
.infra-device-face { fill:url(#infra-metal); stroke:#657e8f; stroke-width:1; transition:stroke .3s,fill .3s; }
.infra-provider .infra-device-face { fill:#1d374a; stroke:#52738a; }
.infra-market .infra-device-face { fill:#183e42; stroke:#67cbb5; }
.infra-spine .infra-device-face,.infra-trading-spine .infra-device-face { fill:#23515b; stroke:#80babd; stroke-width:1.5; }
.infra-leaf .infra-device-face { fill:#3b3653; stroke:#a195bc; }
.infra-power[data-side=a] .infra-device-face { fill:#552c39; stroke:var(--power-a); }
.infra-power[data-side=b] .infra-device-face { fill:#203f66; stroke:var(--power-b); }
.infra-device:hover .infra-device-hit,.infra-device:focus-visible .infra-device-hit,.infra-device.is-selected .infra-device-hit { stroke:#c4ddff; }
.infra-device-label { fill:#f1f6fa; font:600 16px var(--sans); }
.infra-trading-spine .infra-device-label { font-size:14px; }
.infra-server-label { fill:#e8f0f5; font:600 12px var(--sans); letter-spacing:.3px; }
.infra-unit { fill:#b8cbd8; font:10px var(--mono); }
.infra-node-bay,.infra-line-card { fill:#112633; stroke:#708d95; stroke-width:.8; }
.infra-fan { fill:#12353e; stroke:#86aeb8; }
.infra-vent { stroke:#93aab5; stroke-width:1; opacity:.6; fill:none; }
.infra-led { fill:#64dab4; }
.infra-switch-port { fill:#211c34; stroke:#c1b4d6; stroke-width:.6; }
.infra-power-port { fill:var(--tone); stroke:#122736; stroke-width:1; }
.infra-outlet { fill:#19212b; stroke:#b9c3d1; stroke-width:.6; }
.infra-feed-label { fill:var(--tone); font:600 16px var(--mono); }
.infra-link { transition:opacity .35s; }
.infra-wire,.infra-flow { fill:none; stroke:var(--tone); stroke-width:1.8; stroke-linejoin:round; }
.infra-wire { opacity:.5; }
.infra-flow { stroke-dasharray:5 23; animation:infra-packets 1.4s linear infinite; stroke-linecap:round; }
.infra-power-link .infra-wire { stroke-width:3; opacity:.8; }
.infra-power-link .infra-flow { animation-duration:2.4s; }
.infra-link.is-dimmed { opacity:.08; }
.infra-device.is-dimmed { opacity:.4; }
.infra-link.is-offline { opacity:.28; }
.infra-link.is-offline .infra-flow { display:none; }
.infra-link.is-offline .infra-wire { stroke:#9aabb8; stroke-dasharray:4 5; }
.infra-device.is-offline .infra-device-face { fill:#34434e; stroke:#8d9ba5; }
.infra-device.is-offline .infra-led { fill:#8d9ba5; }
.infra-fault-mark { opacity:0; transition:opacity .3s; }
.infra-fault-mark circle { fill:#6f7e8a; stroke:#d4dde3; stroke-width:2; }
.infra-fault-mark path { stroke:#fff; stroke-width:2; fill:none; }
.is-offline .infra-fault-mark { opacity:1; }
[data-scenario-phase=failure] .is-offline .infra-device-hit { animation:infra-fault .85s ease-out; }
.infra-link.is-rerouted .infra-wire { opacity:.9; animation:infra-reroute 1.4s ease-out; }
.infra-bypass-label { fill:#68dcca; font:500 14px var(--mono); letter-spacing:1px; }
.infra-bypass-note { fill:#a9bfce; font:14px var(--sans); }
.infra-diagram-caption { fill:#8da9bc; font:10px var(--mono); letter-spacing:.8px; }
.infra-hint { color:#b6cbd9; font-size:13px; text-align:center; }
.infra-map-bottom { display:flex; justify-content:center; gap:14px; align-items:center; flex-wrap:wrap; padding-top:12px; }
.infra-legend { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; border-bottom:1px solid #334b5c; padding:18px 0; margin-bottom:12px; font-size:13px; }
.infra-legend>span { display:flex; align-items:center; gap:7px; }
.infra-legend i { display:inline-block; width:18px; height:3px; background:var(--tone); }
.infra-detail { background:white; padding:30px 28px; align-self:stretch; }
.infra-detail [data-infra-detail] { height:460px; min-height:0; overflow:auto; scrollbar-gutter:stable; border-top:1px solid var(--line); padding-top:28px; }
.infra-detail [data-infra-detail].infra-measure { position:absolute; visibility:hidden; pointer-events:none; height:auto!important; min-height:0!important; overflow:visible; top:0; left:0; }
.infra-detail h3 { font-size:27px; line-height:1.2; margin:16px 0; }
.infra-detail p:not(.eyebrow) { font-size:14px; line-height:1.8; }
.infra-detail ul { list-style:none; padding:0; margin:22px 0 0; }
.infra-detail li { padding:11px 0 11px 22px; font-size:14px; border-bottom:1px solid var(--line); position:relative; }
.infra-detail li::before { content:''; position:absolute; left:0; top:19px; width:8px; height:8px; border-radius:50%; background:var(--tone,var(--blue)); }
.infra-simulation { padding-bottom:28px; }
.infra-simulation .eyebrow { font-size:13px; letter-spacing:1px; }
.infra-scenarios { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(5,60px); gap:8px; margin:20px 0; }
.infra-scenarios button { display:flex; align-items:center; gap:8px; text-align:left; min-height:44px; padding:10px; color:var(--ink); background:#f7f9fb; border:1px solid #cad5df; border-radius:5px; font:500 13px/1.4 var(--sans); cursor:pointer; transition:background .2s,border-color .2s; }
.infra-scenarios button:first-child { grid-column:1/-1; }
.infra-scenarios button:hover { background:#eaf0f7; }
.infra-scenarios button[aria-pressed=true] { background:#eaf0ff; border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.infra-scenario-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--tone,#6b8395); }
.infra-scenario-result { background:#edf3f6; border:1px solid #d0dce4; border-radius:5px; padding:18px; height:320px; min-height:0; overflow:auto; scrollbar-gutter:stable; }
.infra-scenario-result>[data-infra-phase] { font:13px/1.6 var(--mono); letter-spacing:.4px; color:#486273; }
.infra-scenario-result h4 { font-size:18px; line-height:1.35; margin:12px 0 8px; }
.infra-scenario-result p { font-size:13px!important; }
.infra-health { display:flex; gap:8px 15px; flex-wrap:wrap; padding-top:14px; font-size:13px; color:#305c50; }
.infra-health span { display:flex; gap:6px; align-items:center; }
.infra-health i { width:5px; height:5px; background:#248360; border-radius:50%; }
.infra-disclaimer { font-size:13px!important; color:var(--muted); margin-top:12px; }
.infra-component-picker { display:none; font-size:14px; font-weight:600; margin-bottom:26px; }
.infra-component-picker select { display:block; width:100%; margin-top:9px; min-height:46px; padding:10px; border:1px solid #bdccd7; border-radius:4px; font:14px var(--sans); color:var(--ink); background:var(--paper); }
.infra-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:36px; }
.infra-principles article { border-top:1px solid #bdccd7; padding-top:24px; }
.infra-principles span { font:13px var(--mono); letter-spacing:.8px; color:var(--muted); }
.infra-principles h3 { font-size:23px; line-height:1.25; margin:16px 0; }
.infra-principles p { font-size:15px; line-height:1.8; }
.infra-paused .infra-flow,.infra-offscreen .infra-flow { animation-play-state:paused; }
@keyframes infra-packets { to { stroke-dashoffset:-28; } }
@keyframes infra-fault { 30% { stroke:#ff6678; stroke-width:6; } }
@keyframes infra-reroute { 30% { stroke-width:4; filter:drop-shadow(0 0 4px var(--tone)); } }
@media(max-width:1000px){.infra-layout{grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr)}.infra-detail{padding:24px 18px}.infra-detail h3{font-size:25px}.infra-visual{padding:16px 10px}.infra-visual-top{flex-wrap:wrap}.infra-legend{gap:12px}}
@media(max-width:760px){.infrastructure-section .section-heading{grid-template-columns:1fr;gap:24px}.infra-layout{display:flex;flex-direction:column}.infra-visual{position:static;width:100%}.infra-detail{width:100%;padding:26px}.infra-detail [data-infra-detail]{min-height:330px}.infra-principles{grid-template-columns:1fr;gap:20px}.infra-controls button{padding:9px 13px}.infra-controls{gap:12px}.infra-component-picker:not([hidden]){display:block}.infra-scenario-result{min-height:215px}.infra-detail h3{font-size:27px}}
@media(max-width:480px){.infra-visual{padding:16px 6px}.infra-visual-top{padding:0 6px}.infra-server-label{font-size:17px;letter-spacing:0}.infra-unit{font-size:14px}.infra-rack-caption,.infra-diagram-caption{display:none}.infra-device-label{font-size:19px}.infra-trading-spine .infra-device-label{font-size:16px}.infra-bypass-label{font-size:19px;letter-spacing:0}.infra-bypass-note{font-size:19px}.infra-controls{display:grid;grid-template-columns:1fr}.infra-controls button{flex:1;font-size:13px}.infra-detail{padding:24px 18px}.infra-hint{padding:10px;font-size:13px}.infra-legend{gap:12px;padding-inline:6px}.infra-server .infra-vent{opacity:.3}}
@media(prefers-reduced-motion:reduce){.infra-canvas,.infra-device,.infra-link{transition:none}#infrastructure-explorer:not(.infra-motion-enabled) .infra-flow{animation:none}#infrastructure-explorer.infra-motion-enabled .infra-flow{animation:infra-packets 1.4s linear infinite!important}#infrastructure-explorer.infra-motion-enabled .infra-power-link .infra-flow{animation-duration:2.4s!important}#infrastructure-explorer.infra-motion-enabled.infra-offscreen .infra-flow{animation-play-state:paused!important}}
@media(max-width:480px){.infra-legend{display:grid;grid-template-columns:repeat(2,max-content);column-gap:24px}}
.infra-spine .infra-device-face { fill:#25364e; stroke:#9c8aba; stroke-width:1.5; }
.infra-leaf .infra-device-face { fill:#20454c; stroke:#6aa99f; }
.infra-spine .infra-device-label,.infra-leaf .infra-device-label { fill:#e7f0f7; }
.infra-switch-port { fill:#102532; stroke:#8296a8; stroke-width:.5; }
.infra-uplink-port { stroke:#7ed2c3; stroke-width:.8; }
.infra-cabinet-portal { cursor:pointer; outline:none; }
.infra-cabinet-portal .infra-portal-hit { fill:transparent; stroke:none; }
.infra-cabinet-portal:hover .infra-portal-action,.infra-cabinet-portal:focus-visible .infra-portal-action { fill:#fff; text-decoration:underline; }
.infra-cabinet-portal text { fill:#ecf3fa; font:600 15px var(--sans); }
.infra-cabinet-portal .infra-portal-action { fill:#a8caff; font:13px var(--sans); }
.infra-loss { fill:none; stroke:#80909e; stroke-width:2.8; stroke-dasharray:1 1; stroke-dashoffset:1; stroke-linejoin:round; pointer-events:none; }
.infra-power-link .infra-loss { stroke-width:3.5; }
.infra-link.is-offline { opacity:1; }
.infra-link.is-offline .infra-wire { stroke:#597080; opacity:.35; }
.infra-link.is-dimmed.is-offline { opacity:.2; }
.infra-visual .infra-map-bottom { min-height:60px; }

.infra-device-accent { stroke:#bba2e6; stroke-width:2; }
.infra-leaf .infra-device-accent { stroke:#62c8b5; }
.infra-device.is-offline .infra-device-face { fill:#34434e; stroke:#8d9ba5; }
.infra-device.is-offline .infra-device-accent { stroke:#8d9ba5; }