.vlan-hotfix-runtime{--v-bg:#07101a;--v-panel:#0b1624;--v-line:#304159;--v-mint:#38d6c9;--v-orange:#ff6b35;--v-blue:#6fa8ff;--v-red:#ff5368;margin:2rem 0;border:1px solid #293b52;border-radius:18px;overflow:hidden;background:var(--v-bg);color:#f4f7fb;box-shadow:0 25px 75px #0009;font-family:Inter,sans-serif}
.vlan-hotfix-runtime *{box-sizing:border-box}
.vlan-hotfix-runtime section{padding:0}
.vlan-hotfix-runtime h3{color:#f4f7fb}
.vlan-hotfix-runtime button,.vlan-hotfix-runtime input{font:inherit}
.vh-game{position:relative;min-height:760px;background:radial-gradient(circle at 50% 20%,#17304a,#07101a 55%,#04080e)}
.vh-hud{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(420px,1.4fr) minmax(120px,.4fr);gap:1rem;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid #38d6c944;background:#07101aee}
.vh-hud small,.vh-tickets>small,.vh-inspector>small,.vh-card>small{display:block;color:var(--v-mint);font:700 .67rem 'JetBrains Mono',monospace;letter-spacing:.12em}
.vh-hud strong{font:750 1.25rem 'Space Grotesk',sans-serif}
.vh-hud ol{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.vh-hud li{padding:.5rem;border-bottom:2px solid var(--v-line);color:#8290a3;font:700 .68rem 'JetBrains Mono',monospace;text-align:center}
.vh-hud li[data-active=true]{border-color:var(--v-mint);color:var(--v-mint)}
.vh-state{text-align:right;color:var(--v-orange);font:800 .7rem 'JetBrains Mono',monospace}
.vh-topology{display:grid;grid-template-columns:1fr .9fr 1.1fr .9fr 1fr;gap:.7rem;align-items:center;padding:1.1rem;border-bottom:1px solid var(--v-line);background:linear-gradient(180deg,#0c1b2bd9,#07101af2)}
.vh-node,.vh-switch{min-height:76px;display:grid;place-items:center;padding:.65rem;border:1px solid #3c506a;border-radius:10px;background:#0e1a2a;text-align:center;font:800 .72rem/1.35 'JetBrains Mono',monospace;box-shadow:0 10px 25px #0006}
.vh-node small,.vh-switch small{color:#9aa8bb}
.vh-switch{border-color:var(--v-mint);background:#08201f}
.vh-switch[data-bad=true],.vh-node[data-bad=true]{border-color:var(--v-red);box-shadow:0 0 25px #ff536855;animation:vh-alert-pulse 1.8s ease-in-out infinite}
.vh-node,.vh-switch{transition:transform .35s ease}
.vh-trunk{height:10px;background:linear-gradient(90deg,var(--v-mint),var(--v-blue));position:relative;border-radius:8px;cursor:pointer}
.vh-trunk span{position:absolute;left:50%;top:-22px;transform:translateX(-50%);font:700 .62rem 'JetBrains Mono',monospace}
.vh-trunk[data-bad=true]{background:repeating-linear-gradient(90deg,var(--v-orange) 0 14px,transparent 14px 22px)}
.vh-node[data-clickable],.vh-switch[data-clickable]{cursor:pointer}
@keyframes vh-alert-pulse{0%,100%{box-shadow:0 0 25px #ff536855}50%{box-shadow:0 0 42px #ff5368a0}}
.vh-node.vh-success,.vh-switch.vh-success{animation:vh-node-success .55s ease-out}
@keyframes vh-node-success{0%{transform:scale(1)}40%{transform:scale(1.07);box-shadow:0 0 32px #38d6c9cc}100%{transform:scale(1)}}
.vh-trunk.vh-flow-ok::after,.vh-trunk.vh-flow-blocked::after{content:'';position:absolute;top:50%;left:0;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:radial-gradient(circle,#eafffb 0%,var(--v-mint) 55%,transparent 75%);box-shadow:0 0 14px #9dfff5}
.vh-trunk.vh-flow-ok::after{animation:vh-flow-ok .9s cubic-bezier(.3,.7,.4,1) forwards}
.vh-trunk.vh-flow-blocked::after{background:radial-gradient(circle,#fff1ea 0%,var(--v-orange) 55%,transparent 75%);box-shadow:0 0 14px #ff6b3599;animation:vh-flow-blocked .6s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes vh-flow-ok{0%{left:0;opacity:1}100%{left:calc(100% - 22px);opacity:1}}
@keyframes vh-flow-blocked{0%{left:0;opacity:1}70%{left:42%;opacity:1}100%{left:46%;opacity:0}}
.vh-tests button.vh-flash-good{animation:vh-flash-good .55s ease-out}
.vh-tests button.vh-flash-bad{animation:vh-flash-bad .55s ease-out}
@keyframes vh-flash-good{0%{background:#111d2d}35%{background:#173a34;border-color:var(--v-mint)}100%{background:#111d2d}}
@keyframes vh-flash-bad{0%{background:#111d2d}35%{background:#3a1720;border-color:var(--v-red)}100%{background:#111d2d}}
.vh-hud.vh-complete{animation:vh-hud-complete 1.1s ease-out}
@keyframes vh-hud-complete{0%{box-shadow:inset 0 0 0 #38d6c900}30%{box-shadow:inset 0 0 46px #38d6c977}100%{box-shadow:inset 0 0 0 #38d6c900}}
.vh-sound{justify-self:end;min-height:32px;padding:.3rem .65rem;border:1px solid #40536c;border-radius:7px;background:#101b2b;color:#8290a3;font:700 .6rem 'JetBrains Mono',monospace;letter-spacing:.04em;cursor:pointer}
.vh-sound[data-on=true]{border-color:var(--v-mint);color:var(--v-mint)}
@media(prefers-reduced-motion:reduce){.vh-switch[data-bad=true],.vh-node[data-bad=true],.vh-node.vh-success,.vh-switch.vh-success,.vh-trunk.vh-flow-ok::after,.vh-trunk.vh-flow-blocked::after,.vh-hud.vh-complete,.vh-tests button.vh-flash-good,.vh-tests button.vh-flash-bad{animation:none}}
.vh-main{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;gap:.75rem;padding:.75rem}
.vh-tickets,.vh-console,.vh-tests,.vh-inspector{border:1px solid var(--v-line);border-radius:10px;background:#0a1421ed;overflow:hidden}
.vh-tickets{padding:.7rem}
.vh-tickets button{width:100%;min-height:48px;margin-top:.5rem;border:1px solid #34475f;border-radius:7px;background:#101b2b;color:#fff;text-align:left;cursor:pointer}
.vh-tickets button[data-active=true]{border-color:var(--v-mint);box-shadow:inset 3px 0 var(--v-mint)}
.vh-tickets>[data-ticket-text]{margin-top:.8rem;padding:.7rem;border-left:3px solid var(--v-orange);background:#060c14;color:#bdc8d7;font-size:.72rem;line-height:1.5}
.vh-prediction{display:grid;gap:.35rem;margin-top:.75rem;color:var(--v-mint);font:700 .62rem 'JetBrains Mono',monospace;letter-spacing:.06em}
.vh-prediction select{width:100%;min-height:44px;padding:.45rem;border:1px solid #40536c;border-radius:7px;background:#101b2b;color:#fff;font:600 .68rem/1.35 'JetBrains Mono',monospace}
.vh-main>main{display:grid;gap:.75rem;align-content:start}
.vh-console__bar{display:flex;border-bottom:1px solid var(--v-line)}
.vh-console__bar button{min-height:42px;padding:0 .8rem;border:0;border-right:1px solid var(--v-line);background:#101b2b;color:#b8c3d2;cursor:pointer}
.vh-console__bar button:focus-visible,.vh-tickets button:focus-visible,.vh-tests button:focus-visible,.vh-inspector button:focus-visible{outline:2px solid var(--v-blue);outline-offset:2px}
.vh-console pre{height:250px;margin:0;padding:.8rem;overflow:auto;background:#02070c;color:#9dfff5;font:600 .7rem/1.45 'JetBrains Mono',monospace;white-space:pre-wrap}
.vh-console form{padding:.7rem}
.vh-console form label{display:block;margin-bottom:.35rem;color:#93a2b5;font-size:.68rem}
.vh-console form>div{display:flex;border:1px solid #40536c;border-radius:7px;overflow:hidden;background:#03080e}
.vh-console form span{padding:.65rem;color:var(--v-mint);font:700 .7rem 'JetBrains Mono',monospace}
.vh-console input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:600 .74rem 'JetBrains Mono',monospace;outline:0}
.vh-console form button{border:0;background:var(--v-mint);color:#04100f;font-weight:850}
.vh-aliases{padding:0 .7rem .7rem;color:#8e9caf;font-size:.65rem}
.vh-tests{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;padding:.6rem}
.vh-tests button,.vh-inspector button,.vh-card button{min-height:44px;border:1px solid #3a4d66;border-radius:7px;background:#111d2d;color:#fff;font-weight:800;cursor:pointer}
.vh-tests>[data-test-output]{grid-column:1/-1;min-height:45px;padding:.55rem;border-left:3px solid var(--v-orange);background:#050b13;color:#cbd5e2;font:650 .68rem/1.45 'JetBrains Mono',monospace}
.vh-inspector{padding:.7rem}
.vh-inspector p{padding:.55rem;margin:.5rem 0;border-bottom:1px solid #26374d;color:#aeb9ca;font:600 .68rem/1.4 'JetBrains Mono',monospace}
.vh-inspector b{color:#fff}
.vh-inspector button{width:100%;margin-top:.5rem}
.vh-inspector button:disabled{opacity:.4;cursor:not-allowed}
.vh-primary{border-color:var(--v-mint)!important;background:var(--v-mint)!important;color:#04100f!important}
.vh-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:start center;overflow:auto;padding:clamp(1rem,5svh,3rem) 1rem;background:#03070ddd;backdrop-filter:blur(8px)}
.vh-overlay:has([data-enter]){min-height:100svh}
.vh-card{width:min(640px,100%);padding:clamp(1.2rem,4vw,2.2rem);border:1px solid #38d6c977;border-radius:16px;background:#0b1524;box-shadow:0 30px 90px #000}
.vh-card h3{margin:.35rem 0;font:750 clamp(1.5rem,4vw,2.3rem) 'Space Grotesk',sans-serif}
.vh-card p{color:#c4cedc;line-height:1.55}
.vh-card button{width:100%;margin-top:.55rem}
.vh-callout{margin:1rem 0;padding:.75rem;border-left:3px solid var(--v-orange);background:#050b13;color:#dce4ef;font:600 .75rem/1.55 'JetBrains Mono',monospace}
.vh-conclusion{display:grid;gap:.45rem;margin:1rem 0;color:#fff}
.vh-conclusion span,.vh-conclusion small{color:#b7c4d5;font-size:.78rem;line-height:1.45}
.vh-conclusion textarea{width:100%;min-height:112px;resize:vertical;padding:.75rem;border:1px solid #40536c;border-radius:8px;background:#050b13;color:#fff;font:600 .86rem/1.5 Inter,sans-serif}
.vh-conclusion textarea:focus-visible{outline:2px solid var(--v-blue);outline-offset:2px}
@media(max-width:940px){.vh-hud{grid-template-columns:1fr auto}
.vh-hud ol{grid-column:1/-1;grid-row:2}
.vh-main{grid-template-columns:1fr}
.vh-tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.vh-tickets>small,.vh-tickets>[data-ticket-text]{grid-column:1/-1}
.vh-inspector{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem}
.vh-inspector>small,.vh-inspector button{grid-column:1/-1}
}
@media(max-width:580px){.vlan-hotfix-runtime{margin-inline:-.25rem;border-radius:12px}
.vh-hud{padding:.75rem}
.vh-hud strong{font-size:.95rem}
.vh-hud li{font-size:.58rem;padding:.45rem .2rem}
.vh-topology{grid-template-columns:1fr 1fr;gap:.45rem}
.vh-trunk{grid-column:1/-1;grid-row:2}
.vh-node--srv{grid-column:2}
.vh-node--admin{display:none}
.vh-main{padding:.45rem}
.vh-tickets{grid-template-columns:1fr}
.vh-console pre{height:220px}
.vh-console form>div{flex-wrap:wrap}
.vh-console form span{width:100%}
.vh-console input{width:100%;min-height:44px;padding:.4rem}
.vh-console form button{width:100%;min-height:44px}
.vh-tests{grid-template-columns:1fr}
.vh-tests>[data-test-output]{grid-column:auto}
.vh-inspector{grid-template-columns:1fr}
}