/* Shared RR CyberLabs background system: same SOC atmosphere across every page. */
html{background:#040a12}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;background-color:#040a12!important;background-image:linear-gradient(180deg,rgba(3,9,17,.82),rgba(3,9,17,.91)),url("assets/rr-cyberlab-soc.jpg")!important;background-position:center top;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
body,button,input,select,textarea{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
body :is(.hero,.editorial-hero,.range-hero,.sim-hero,.packet-hero,.lab-hero){background-image:linear-gradient(90deg,rgba(3,8,16,.77) 0%,rgba(3,9,18,.56) 52%,rgba(3,9,18,.32) 100%),url("assets/rr-cyberlab-soc.jpg"),radial-gradient(ellipse at 80% 20%,rgba(13,101,133,.24),transparent 48%)!important;background-size:cover!important;background-position:center 46%!important}
@media(max-width:760px){body{background-attachment:scroll;background-position:58% top}body :is(.hero,.editorial-hero,.range-hero,.sim-hero,.packet-hero,.lab-hero){background-position:58% center!important}}

/* Unified masthead dimensions across all pages prevent navigation jumps. */
body header{position:sticky;top:0;z-index:50;box-sizing:border-box}
body header .nav{width:min(1500px,96%);height:68px;min-height:68px;box-sizing:border-box;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:14px;padding:0;overflow:hidden}
body header .nav>.brand{display:inline-flex;flex:0 0 auto;align-items:center;white-space:nowrap;line-height:1.15;min-width:max-content}
body header .nav>.brand small{display:none}
body header .nav>nav{display:flex;flex:1 1 auto;min-width:0;height:42px;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin;scrollbar-color:#2b647c #07111d}
body header .nav>nav>a{display:inline-flex;flex:0 0 auto;align-items:center;min-height:34px;padding:6px 8px;line-height:1.1;white-space:nowrap}
body header .nav>nav>a:focus-visible{outline:2px solid #6ce8ff;outline-offset:-2px;border-radius:6px}
@media(max-width:900px){body header .nav{height:92px;min-height:92px;flex-direction:column;align-items:stretch;justify-content:center;gap:3px;padding:7px 0}body header .nav>.brand{height:28px;min-height:28px}body header .nav>nav{flex:0 0 40px;height:40px;justify-content:flex-start;gap:7px}}
@media(max-width:540px){body header .nav{height:94px;min-height:94px}body header .nav>nav>a{font-size:12px;padding:6px 8px}}

/* Compact Labs menu keeps the main navigation aligned while preserving direct access to every lab. */
body header .nav>nav{overflow:visible;overflow-y:visible;flex-wrap:nowrap}
body header .nav{overflow:visible}
.lab-nav-dropdown{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;color:#cfe3f0;font-size:12px;font-weight:800;list-style:none}
.lab-nav-dropdown[open]{z-index:130}
.lab-nav-dropdown>summary{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:6px 9px;border-radius:7px;cursor:pointer;white-space:nowrap;list-style:none;color:#d7e4f4}
.lab-nav-dropdown>summary::-webkit-details-marker{display:none}
.lab-nav-dropdown>summary:hover,.lab-nav-dropdown[open]>summary{background:#0e2439;color:#6cecff}
.lab-nav-dropdown>summary span{font-size:12px;color:#76dff3}
.lab-nav-panel{position:absolute;z-index:100;top:calc(100% + 9px);left:0;width:min(340px,88vw);padding:8px;display:grid;gap:5px;background:rgba(3,10,18,.98);border:1px solid #25516b;border-radius:12px;box-shadow:0 18px 50px #000b;backdrop-filter:blur(16px)}
.lab-nav-panel a{display:block!important;min-height:0!important;padding:9px 10px!important;border:1px solid transparent;border-radius:8px;color:#e3f4ff!important;text-decoration:none}
.lab-nav-panel a:hover,.lab-nav-panel a:focus-visible{background:#0c2132!important;border-color:#28617b!important;outline:none}
.lab-nav-panel b{display:block;font-size:12px}.lab-nav-panel small{display:block;margin-top:2px;color:#8ca7ba;font-size:10px;font-weight:500}
.site-game-header .lab-nav-dropdown>summary{color:#c6d8e4}
.site-game-header nav{overflow:visible}
@media(max-width:900px){body header .nav{height:auto;min-height:92px;overflow:visible}body header .nav>nav{height:auto;min-height:40px;flex:1 1 auto;flex-wrap:wrap;overflow:visible;justify-content:flex-start;gap:4px}.lab-nav-panel{top:calc(100% + 5px)}}
@media(max-width:540px){body header .nav{height:auto;min-height:94px}body header .nav>nav{height:auto;min-height:40px;gap:3px}.lab-nav-dropdown>summary{font-size:12px;padding:6px 7px}.lab-nav-panel{width:min(320px,92vw)}}

/* Use the browser top layer for the Labs panel so opening it never changes header/page layout. */
.lab-nav-trigger{display:inline-flex;flex:0 0 auto;align-items:center;gap:5px;min-height:34px;padding:6px 9px;border:0;border-radius:7px;background:transparent;color:#d7e4f4;font:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.lab-nav-trigger span{color:#76dff3;font-size:12px}
.lab-nav-trigger:hover,.lab-nav-trigger:focus-visible{background:#0e2439;color:#6cecff;outline:2px solid #5fe3ff;outline-offset:1px}
.lab-nav-panel[popover]{position:fixed;inset:auto;top:76px;right:max(16px,calc((100vw - 1500px)/2 + 16px));left:auto;transform:none;margin:0;width:min(360px,calc(100vw - 32px));z-index:200;border:1px solid #25516b;border-radius:12px;padding:8px;display:grid;gap:5px;background:rgba(3,10,18,.98);box-shadow:0 18px 50px #000b;backdrop-filter:blur(16px);color:#e3f4ff}
.lab-nav-panel[popover]::backdrop{background:transparent}
.lab-nav-panel[popover]:not(:popover-open){display:none!important}
.lab-nav-panel[popover] a{display:block!important;min-height:0!important;padding:9px 10px!important;border:1px solid transparent;border-radius:8px;color:#e3f4ff!important;text-decoration:none}
.lab-nav-panel[popover] a:hover,.lab-nav-panel[popover] a:focus-visible{background:#0c2132!important;border-color:#28617b!important;outline:none}
.lab-nav-panel[popover] b{display:block;font-size:12px}.lab-nav-panel[popover] small{display:block;margin-top:2px;color:#8ca7ba;font-size:10px;font-weight:500}
.lab-nav-panel[popover]:popover-open{display:grid}
@media(max-width:900px){.lab-nav-panel[popover]{top:102px;right:4vw;width:min(360px,92vw)}}
@media(max-width:540px){.lab-nav-trigger{font-size:12px;padding:6px 7px}.lab-nav-panel[popover]{top:104px}}

/* RR CyberLabs brand system: consistent logo lockup across every page. */
body header .nav>.rr-nav-brand{gap:9px!important;color:#eef8ff!important;font-size:13px!important;letter-spacing:1.6px!important;text-decoration:none}
body header .nav>.rr-nav-brand img{display:block;width:38px;height:38px;flex:0 0 38px;object-fit:cover;border:1px solid #36d8f3;border-radius:10px;box-shadow:0 0 16px #05c7f344}
body header .nav>.rr-nav-brand span{display:inline!important;color:#eef8ff!important;font-size:12px!important;font-weight:900!important;letter-spacing:1.7px!important}
@media(max-width:900px){body header .nav>.rr-nav-brand{height:32px!important;min-height:32px!important}body header .nav>.rr-nav-brand img{width:30px;height:30px;flex-basis:30px}}
