.vs-main-navigation{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#3e5969}
.vs-main-navigation *{box-sizing:border-box}
.vs-main-navigation svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vs-main-navigation a{color:inherit;text-decoration:none}.vs-main-navigation button{font:inherit;cursor:pointer}
.vs-main-navigation a:focus-visible,.vs-main-navigation button:focus-visible{outline:3px solid #007bbb;outline-offset:3px}
.vs-main-navigation [hidden]{display:none!important}
body.vs-nav-enabled{padding-top:78px;padding-bottom:calc(65px + env(safe-area-inset-bottom,0px))}
.vs-nav-enabled .desktop-nav,.vs-nav-enabled .bottom-nav,.vs-nav-enabled .brand,.vs-nav-enabled [aria-label="Main navigation"]{display:none!important}
.vs-main-navigation .vs-header{position:fixed;top:0;left:0;right:0;height:78px;display:flex;align-items:center;gap:16px;padding:10px 18px;background:#fff;border-bottom:1px solid #e4eef3;z-index:80}
.vs-main-navigation .vs-header-logo{display:flex;align-items:center}.vs-main-navigation .vs-header-logo img{width:218px;height:52px;max-width:calc(100vw - 94px);object-fit:contain}
.vs-main-navigation .vs-menu-toggle,.vs-main-navigation .close-menu{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid #dfebf2;border-radius:12px;background:#fff;color:#395564;flex:none}
.vs-main-navigation .vs-bottom{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;justify-content:space-around;background:#fff;border-top:1px solid #c8dde8;box-shadow:0 -3px 14px #183b4c0a;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.vs-main-navigation .vs-bottom a{display:flex;flex:1;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:52px;min-width:0;color:#536e7c}
.vs-main-navigation .vs-bottom svg{width:24px;height:24px;stroke-width:2.3}.vs-main-navigation .vs-bottom strong{font-size:13px;font-weight:700;line-height:1.3}.vs-main-navigation .vs-bottom a[aria-current=page]{color:#007eaa}
.vs-main-navigation .vs-backdrop{position:fixed;inset:0;background:#14232e6b;border:0;border-radius:0;z-index:90}
.vs-main-navigation .sidebar{position:fixed;inset:0 auto 0 0;width:min(336px,90vw);z-index:92;background:#fff;border-right:1px solid #dfebf2;border-radius:0 22px 22px 0;padding:22px 17px 17px;display:flex;flex-direction:column;transform:translateX(-105%);transition:transform .2s ease;box-shadow:10px 0 50px #122a3d1c}
.vs-main-navigation .sidebar.is-open{transform:translateX(0)}
.vs-main-navigation .side-top{display:flex;align-items:center;justify-content:space-between;padding:0 7px 20px;margin-bottom:17px;border-bottom:1px solid #e6eff4}
.vs-main-navigation .vs-brand{display:block}.vs-main-navigation .vs-brand img{width:170px;height:55px;object-fit:contain;display:block}
.vs-main-navigation .account-card{display:flex;gap:11px;align-items:center;background:#f3faff;border:1px solid #dcecf5;border-radius:14px;padding:15px 12px;margin-bottom:22px}
.vs-main-navigation .avatar{width:40px;height:40px;border-radius:11px;background:#e4f4fc;color:#0094cb;display:flex;align-items:center;justify-content:center;flex:none}
.vs-main-navigation .account-card strong{display:block;color:#264a5c;font-size:13px;line-height:1.4;font-weight:650}.vs-main-navigation .account-card small{display:block;font-size:12px;color:#617d8c;margin-top:3px}
.vs-main-navigation .chevron{margin-left:auto;width:15px;height:15px;color:#9bb0bd}
.vs-main-navigation .menu-scroll{overflow:auto;min-height:0;scrollbar-width:thin;padding:0 2px 8px}
.vs-main-navigation .menu-group{margin:0 0 18px}
.vs-main-navigation .menu-group h2{font-size:12px;line-height:1.4;letter-spacing:1.4px;text-transform:uppercase;color:#52859c;margin:0 10px 8px;font-weight:650}
.vs-main-navigation .menu-group>a{display:flex;align-items:center;gap:11px;padding:9px 10px;min-height:48px;border:1px solid transparent;border-radius:10px;font-size:14px;line-height:1.35;font-weight:600;margin:3px 0;color:#3e5969}
.vs-main-navigation .menu-group>a:hover{background:#f3faff;border-color:#e2eef5}
.vs-main-navigation .menu-group>a[aria-current=page]{background:#eaf7fd;border-color:#cce9f7;border-left:3px solid #009bd2;color:#007fad}
.vs-main-navigation .nav-icon{display:flex;align-items:center;justify-content:center;width:33px;height:33px;background:#f2f8fb;border-radius:9px;color:#467c94;flex:none}
.vs-main-navigation .nav-icon svg{width:19px;height:19px}.vs-main-navigation .menu-group>a[aria-current=page] .nav-icon{color:#0095c9;background:#dff2fb}
.vs-main-navigation .menu-group>a small{display:block;font-size:12px;font-weight:400;color:#4c6774;margin-top:3px}
.vs-main-navigation .new-preview{background:#f8fcfe;border-color:#e3ecf1!important}
.vs-main-navigation .side-footer{display:flex;gap:10px;background:#f5faff;border:1px solid #e1eef6;border-radius:12px;padding:14px;margin-top:12px;color:#38657c}
.vs-main-navigation .side-footer>svg{width:19px;height:19px;color:#0099d0}.vs-main-navigation .side-footer strong{font-size:12px;line-height:1.4}.vs-main-navigation .side-footer p{font-size:12px;line-height:1.5;margin:5px 0 7px;color:#4c6774}.vs-main-navigation .side-footer a{font-size:13px;font-weight:bold;display:flex;gap:5px;align-items:center;color:#007eaf}.vs-main-navigation .side-footer a svg{width:13px;height:13px}
@media(min-width:1100px){body.vs-nav-enabled{margin-left:304px;padding-top:0;padding-bottom:0}.vs-main-navigation .sidebar{width:304px;border-radius:0;transform:none;box-shadow:none}.vs-main-navigation .vs-header,.vs-main-navigation .vs-bottom,.vs-main-navigation .close-menu{display:none}.vs-nav-enabled .app{width:100%;max-width:1200px}.vs-nav-enabled .app-shell{min-height:100dvh}}
@media(prefers-reduced-motion:reduce){.vs-main-navigation *{transition:none!important}}

/* Reset page-specific navigation rules within the shared shell. */
.vs-main-navigation .menu-scroll{position:static;inset:auto;transform:none;width:auto;display:block;background:transparent;border:0;border-radius:0;box-shadow:none;align-items:normal;justify-content:normal;padding:0 2px 8px}
.vs-main-navigation .vs-bottom{width:auto;transform:none;border-radius:0}
.vs-main-navigation .vs-header a{background:transparent;border-radius:0;width:auto;height:auto}
.vs-main-navigation .vs-bottom a{padding:0;text-decoration:none}
.vs-main-navigation .sidebar{top:0}
body.vs-nav-enabled .help-panel{max-width:1100px;margin:24px auto;padding:24px}
body.vs-nav-enabled #remote.in-expanded{bottom:calc(80px + env(safe-area-inset-bottom))}

/* Keep the editor below fixed navigation; short screens scroll the whole panel. */
body.vs-nav-enabled .editor-panel{top:86px}
body.vs-nav-enabled .editor-panel .viewport{height:clamp(280px,62svh,680px);min-height:0}
@media(min-width:1100px){body.vs-nav-enabled .editor-panel{top:18px}body.vs-nav-enabled .editor-panel .viewport{height:clamp(160px,calc(100svh - 250px),680px)}}
@media(max-height:600px){body.vs-nav-enabled .editor-panel{position:static}body.vs-nav-enabled .editor-panel .viewport{height:clamp(140px,55svh,360px)}}
@media(max-width:900px){html:has(body.vs-nav-enabled .editor-panel){scroll-padding-top:calc(var(--area-editor-height,0px) + 98px)}}


html:has(body.vs-nav-enabled){scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}

@media(max-height:600px){html:has(body.vs-nav-enabled .editor-panel){scroll-padding-top:86px}}

body.vs-nav-enabled.area-editor-scrolls .editor-panel{position:static}
html:has(body.vs-nav-enabled.area-editor-scrolls){scroll-padding-top:86px}
/* Reserve the shared bar once, replacing the hidden legacy bar's space. */
@media(max-width:1099px){
 body.vs-nav-enabled .app-shell{min-height:calc(100dvh - 143px - env(safe-area-inset-bottom,0px))}
 body.vs-nav-enabled .app-shell>.app{padding-bottom:0;min-height:inherit}
 body.vs-nav-enabled .app main.home-clarity{padding-bottom:16px}
}

/* Sample Rooms uses the shared header logo; retain its existing room action. */
body.vs-nav-enabled .sample-brand-header .home-logo{display:none!important}

.vs-main-navigation .vs-bottom a[data-nav=how] strong{font-size:13px;line-height:1.2}


/* Isolate menu text from static page navigation rules. */
.vs-main-navigation .menu-group>a>span:not(.nav-icon){display:block;font-size:14px;line-height:1.35;margin:0;text-align:left;}
.vs-main-navigation .nav-icon{margin:0;font-size:inherit;}

/* Bigger tap target for the credits link (was 14px tall). */
.vs-main-navigation .side-footer a{display:inline-flex;align-items:center;gap:4px;min-height:44px}