body {padding-top:var(--demo-banner-height,60px);}
.shell {min-height:calc(100vh - var(--demo-banner-height,60px));}
.demo-banner {position:fixed;inset:0 0 auto;z-index:10000;min-height:60px;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#123a32;color:#fff;border-bottom:2px solid #83c7a6;font:13px/1.4 system-ui,sans-serif;}
.demo-banner strong {display:block;letter-spacing:.12em;font-size:12px;}
.demo-banner span {color:#d2e8df;}
.demo-actions,.demo-actions label {display:flex;align-items:center;gap:8px;white-space:nowrap;}
.demo-actions select,.demo-actions button {border:1px solid #a5c5b7;border-radius:6px;background:#fff;color:#123a32;font:inherit;padding:6px 8px;cursor:pointer;}
@media(max-width:760px){body{padding-top:var(--demo-banner-height,112px)}.demo-banner{flex-direction:column;align-items:flex-start;gap:8px;min-height:112px;padding:8px 12px}.demo-banner span{font-size:11px}.shell{min-height:calc(100vh - var(--demo-banner-height,112px))}}

.modal-backdrop,.port-vlan-popup {padding-top:calc(var(--demo-banner-height,60px) + 18px);}
.modal {max-height:calc(100dvh - var(--demo-banner-height,60px) - 36px);}
.auth-screen {padding-top:calc(var(--demo-banner-height,60px) + 20px);}
.network-map-workspace.is-expanded {top:calc(var(--demo-banner-height,60px) + 12px);}
.demo-about {padding:24px max(24px,5vw);border-top:1px solid var(--line);background:var(--paper);color:var(--ink);font:14px/1.65 system-ui,sans-serif;}
.demo-about h2 {font-size:20px;margin:0 0 10px;}
.demo-about p {max-width:960px;margin:8px 0;}
.demo-about a {color:var(--ink);text-decoration:underline;}