:root{color-scheme:light;--bg:#f3f6fb;--panel:#fff;--text:#172b45;--accent:#126a85;--line:#c4d1e0;--focus:#39ff75}
#keyboard-keys{display:grid;grid-template-columns:repeat(10,minmax(50px,1fr));gap:10px}#keyboard-panel{position:sticky;top:8px;z-index:10;box-shadow:0 5px 30px #0008}
*{box-sizing:border-box}body{margin:0;padding:3vh 4vw;background:var(--bg);color:var(--text);font:clamp(20px,calc(1.35vw + 2px),27px)/1.5 system-ui,sans-serif}body.neon{color-scheme:dark;--bg:#070b09;--panel:#102017;--text:#7fff9f;--accent:#39ff75;--line:#27884a;--focus:#39ff75}body.ocean{--bg:#132739;--panel:#18364a;--text:#e4f0f8;--accent:#83d7ee;--line:#50849c;background:linear-gradient(#101e30,#376e8a,#d9d4c0);background-attachment:fixed}header{display:flex;justify-content:space-between;align-items:center;gap:20px}h1{font-size:calc(1.8em - 1.6px);margin:0;color:var(--accent)}h1 span{font-size:calc(.55em + 0.9px)}h2{font-size:calc(1.25em - 0.5px);margin:.4em 0}p{margin:.4em 0}section{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin:12px 0}#workspace{padding:18px}form,nav,.map-controls,.pager{display:flex;gap:12px;align-items:end;flex-wrap:wrap}label{display:flex;flex-direction:column;gap:4px}label:has(input[type=checkbox]){flex-direction:row;align-items:center}.grow{flex:1;min-width:260px}input,select,button{font:inherit;color:var(--text);background:var(--panel);border:2px solid var(--line);border-radius:7px;padding:10px 14px;min-height:52px;max-width:100%}button{cursor:pointer;font-weight:650}button:hover{border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:5px solid var(--focus);outline-offset:3px}a{color:var(--accent)}.panes{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}.panes section{min-width:0}.results{max-height:55vh;overflow:auto;margin:16px 0;overflow-wrap:anywhere}.result-row{display:block;width:100%;text-align:left;margin-bottom:7px}.result-row.selected{border-color:var(--accent);background:var(--bg)}.field{padding:8px 0;border-bottom:1px solid var(--line)}.field strong{color:var(--accent)}.note,footer{font-size:calc(.82em + 0.36px)}#status{min-height:1.6em;color:var(--accent)}#map{width:100%;height:44vh;min-height:250px;display:block;background:var(--bg);touch-action:none;margin:14px 0;border:1px solid var(--line)}.expanded .panes{display:block}.expanded .panes>section:first-child{display:none}.expanded #map{height:65vh}.pager{align-items:center;justify-content:space-between}.history-row{display:flex;align-items:center;gap:12px;margin:12px 0}.history-row span{flex:1;overflow-wrap:anywhere}footer{padding:18px 0}pre{white-space:pre-wrap;overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:1000px){.panes{grid-template-columns:1fr}body{padding:20px;font-size:20px}header{flex-wrap:wrap}#map{height:380px}.results{max-height:500px}}

.weather-expanded #weather-panel{position:fixed;inset:3vh 4vw;z-index:20;overflow:auto;margin:0}

#color-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}#settings-panel details{padding:18px;border:1px solid var(--line);margin:14px 0}summary{cursor:pointer;font-weight:700}#settings-panel label{margin:12px 0}#settings-panel input[type=color]{width:100%;height:58px}#settings-panel{max-width:1100px;margin:auto}button{background:var(--buttons,var(--panel))}button:hover{background:var(--selection,var(--panel));color:var(--selectedText,var(--text))}.map-below .panes{grid-template-columns:1fr}.results-only .map-pane{display:none}.ocean{background:linear-gradient(#62b8d9 0%,#e0f3f6 48%,#147f9e 49%,#287992 75%,#d9d4c0 100%)!important}.ocean[data-ocean-scene="Sunrise"]{background:linear-gradient(#ecaa83,#f6dfbd 48%,#227e9a 49%,#d9d4c0)!important}.ocean[data-ocean-scene="Sunset"]{background:linear-gradient(#a86a8d,#f3bc8c 48%,#315f8c 49%,#d9d4c0)!important}.ocean[data-ocean-scene="Night / Moonlight"]{background:linear-gradient(#061326,#244564 48%,#0e4261 49%,#142739)!important;color:#eff9ff;--panel:#142b3d;--text:#eff9ff;--line:#6baac6;--accent:#8cdeef}.ocean{background-attachment:fixed!important}.ocean #workspace{background:transparent}.ocean .panes section,.ocean #weather-panel{background:color-mix(in srgb,var(--panel) 88%,transparent)}.ocean-animated.ocean{background-size:100% 110%!important;animation:ocean-drift 18s ease-in-out infinite alternate}@keyframes ocean-drift{to{background-position:0 20px}}@media(prefers-reduced-motion:reduce){.ocean-animated.ocean{animation:none}}

.mobile-result h3{margin:0 0 10px}.mobile-badge{display:inline-block;padding:5px 12px;border:2px solid currentColor;border-radius:7px;font-weight:700}.mobile-yes{background:#123923;color:#7fff9f}.mobile-no{background:#471c24;color:#ffadb5}.mobile-unknown{background:var(--panel);color:var(--text)}


body.weather-expanded{overflow:hidden}.weather-expanded #weather-panel .map-pane{display:block}.weather-expanded #weather-panel #map{height:55vh;min-height:250px}.weather-expanded #weather-expand{position:sticky;top:0;z-index:2;background:var(--panel)}

.button-menu{position:relative;display:inline-block}.button-menu-options{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:100%;width:max-content;max-width:80vw;padding:6px;background:var(--panel);border:2px solid var(--line);border-radius:9px;box-shadow:0 8px 24px #0006}.button-menu-options button{display:block;width:100%;text-align:left;border:0;white-space:normal}.button-menu>button[aria-expanded="true"]{border-color:var(--accent)}

button:active{background:#39ff75;color:#071b20;border-color:#39ff75}button:focus{outline:3px solid #39ff75;outline-offset:3px}.button-menu>button[aria-expanded="true"]{border-color:#39ff75;outline:3px solid #39ff75;outline-offset:3px}

.country-input-wrap{position:relative}.country-suggestions{position:absolute;top:100%;left:0;right:0;z-index:35;max-height:320px;overflow:auto;background:var(--panel);color:var(--text);border:2px solid var(--focus);border-radius:7px;box-shadow:0 8px 24px #0008;margin-top:4px;scrollbar-color:var(--accent) var(--panel)}.country-suggestions [role="option"]{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line)}.country-suggestions [role="option"]:hover,.country-suggestions [aria-selected="true"]{background:var(--focus);color:#071b20}

body{isolation:isolate}
#landscape-background{position:fixed;inset:-3%;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg)}
#landscape-background>svg,#landscape-background>canvas{width:100%;height:100%;display:block;object-fit:cover}
#landscape-background.landscape-moving{animation:landscape-drift 48s ease-in-out infinite alternate}
.landscape-moving .landscape-cloud{animation:cloud-drift 65s ease-in-out infinite alternate}
@keyframes landscape-drift{from{transform:scale(1) translateX(-.5%)}to{transform:scale(1.045) translateX(.5%)}}
@keyframes cloud-drift{to{transform:translateX(45px)}}
.landscape-active #workspace{background:transparent;border-color:var(--line)}
.landscape-active header,.landscape-active section{background:color-mix(in srgb,var(--panel) 92%,transparent)}
.landscape-active header{padding:14px;border-radius:12px}
#settings-panel,#settings-panel details,#background-settings{color:var(--text);border-color:var(--line)}
#settings-panel input,#settings-panel select,#settings-panel select option{background:var(--panel);color:var(--text);border-color:var(--line)}
#settings-panel input[type=checkbox]{accent-color:var(--accent)}
#settings-panel input::file-selector-button{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:8px;cursor:pointer}
#background-settings{margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:9px;min-width:0}
.landscape-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.landscape-choice{padding:0;overflow:hidden;min-width:0;background:var(--panel);color:var(--text)}
.landscape-choice svg{display:block;width:100%;height:125px;object-fit:cover}
.landscape-choice span{display:block;padding:8px;font-size:calc(.85em + 0.3px)}
@media(max-width:550px){.landscape-gallery{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#landscape-background.landscape-moving,.landscape-moving .landscape-cloud{animation:none}}

input::placeholder,textarea::placeholder{color:#9397bd;opacity:1;font-weight:400}



.filter-combo{position:relative;display:flex;align-items:stretch;gap:0}.filter-combo>input{width:100%;min-width:0;border-radius:7px 0 0 7px}.filter-combo>button{border-radius:0 7px 7px 0}#filter-options{position:absolute;top:100%;left:0;right:0;z-index:35;max-height:300px;overflow:auto;background:var(--panel);color:var(--text);border:2px solid var(--focus);border-radius:7px;box-shadow:0 8px 24px #0008}#filter-options [role="option"]{padding:10px 14px;cursor:pointer;overflow-wrap:anywhere}#filter-options [role="option"]:hover,#filter-options [aria-selected="true"]{background:var(--focus);color:#071b20}

#resolved-controls{display:flex;gap:12px;flex-wrap:wrap}#resolved-controls label:last-child{flex:1;min-width:180px}

#binary-background{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%}
body.neon #workspace{background:rgba(16,32,23,.88)}
#map-window-header{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:grab;touch-action:none;user-select:none}
.map-tabs{display:flex;gap:8px;margin:12px 0}.map-tabs [aria-selected="true"]{background:var(--focus);color:#071b20}
.map-pane.floating-map{display:block!important;position:fixed;left:10vw;top:6vh;width:80vw;height:85vh;max-width:98vw;max-height:94vh;min-width:300px;z-index:50;overflow:auto;resize:both;margin:0;box-shadow:0 12px 60px #000a}
#subnet-output{overflow-wrap:anywhere;margin-top:16px}#subnet-input{width:100%}

#practice-dialog{background:var(--panel);color:var(--text);border:2px solid var(--accent);border-radius:12px;padding:24px;width:min(580px,94vw);max-height:90vh;overflow:auto;box-shadow:0 12px 60px #000b;font:inherit}
#practice-dialog::backdrop{background:#000a}.practice-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}#practice-form{display:flex;flex-direction:column;align-items:stretch;gap:12px}#practice-feedback{min-height:1.5em}#practice-feedback[data-state="error"]{color:#ff9191}#practice-result-status{color:var(--accent);margin-top:12px}

.map-pane{position:relative;isolation:isolate}
.map-pane.calculator-active{border:2px solid #39ff75;box-shadow:0 0 12px #39ff7570,0 0 30px #39ff7530;background:#09170f}
.map-pane.calculator-active #map-window-header,.map-pane.calculator-active #subnet-view h2{color:#39ff75}
.map-pane.calculator-active #calc-tab{background:#163b23;color:#39ff75;border-color:#39ff75;box-shadow:0 0 10px #39ff7540}
#calculator-binary{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;border-radius:12px}
.map-pane.calculator-active>div{position:relative;z-index:1}
.map-pane.calculator-active #subnet-view{color:#baffcc}
#practice-dialog{border-color:#39ff75;box-shadow:0 0 18px #39ff7550,0 12px 60px #000b}

.tool-float{position:fixed;left:30px;top:90px;width:min(600px,90vw);height:min(750px,82vh);min-width:300px;min-height:230px;max-width:98vw;max-height:94vh;resize:both;overflow:auto;margin:0;z-index:60;box-shadow:0 10px 35px #000a;isolation:isolate}
.float-tab-header{display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;top:-18px;z-index:3;background:var(--panel);padding:6px 0}
.float-drag-tab,.map-tabs [role="tab"]{cursor:grab;touch-action:none;user-select:none}.float-drag-tab{flex:1;text-align:left}
.map-tabs [data-floating="true"]::after{content:' ↗'}
.map-pane.calculator-active{border:1px solid var(--line);box-shadow:none;background:var(--panel)}
section.active-window,dialog.active-window{border-color:#39ff75!important;box-shadow:0 0 12px #39ff7570,0 0 30px #39ff7530!important}
.dock-drop-ready .map-tabs{outline:3px dashed #39ff75;outline-offset:8px;background:#163b23}
#map-window-header{cursor:default}#subnet-view{position:relative;isolation:isolate;min-height:340px}
#subnet-view #calculator-binary{z-index:-1}#map-calculator-dock{min-height:180px}
.tool-float #map{height:43vh;min-height:220px}

.map-tabs{gap:3px;padding:8px 6px 0;border-bottom:2px solid var(--line);align-items:end;background:var(--bg);border-radius:12px 12px 0 0}
.map-tabs [role="tab"],.float-drag-tab,.content-drag-tab{border-radius:12px 12px 0 0;border-bottom:0;min-height:44px;padding:10px 20px;font-weight:600;background:var(--panel);color:var(--text);cursor:grab;touch-action:none;user-select:none}
.map-tabs [aria-selected="true"]{color:#39ff75;background:#163b23;box-shadow:0 -3px 9px #39ff7535;border-color:#39ff75}
.float-tab-header{border-bottom:2px solid var(--line);padding-bottom:0}.float-drag-tab{flex:initial;min-width:160px}
.content-drag-tab{margin-bottom:12px;border:1px solid var(--line);border-bottom:2px solid #39ff75}
.panel-dock-target{min-height:160px;border:2px dashed var(--line);border-radius:12px;padding:24px;color:var(--text);display:flex;align-items:center;justify-content:center}
.panel-dock-target.dock-drop-ready{border-color:#39ff75;background:#163b23;box-shadow:0 0 16px #39ff7570}
.tool-float>section{margin:0;padding:0;border:0;background:transparent}.tool-float .results{max-height:none}
.active-window:not(.tool-float):not(dialog){position:relative}.active-window{isolation:isolate}
.active-panel-binary{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;border-radius:12px}
.active-window>:not(.active-panel-binary):not(.float-tab-header){position:relative;z-index:1}

/* Floating panels retain a visible resize grip while their contents scroll. */
.tool-float{display:flex;flex-direction:column;overflow:hidden;resize:none;padding-bottom:28px;min-width:min(300px,96vw)}
.float-content{flex:1;min-height:0;overflow:auto;scrollbar-color:var(--accent) var(--panel)}
.float-content>section{margin:0;padding:0;border:0;background:transparent}
.tool-float .content-tab-header{display:none}
.float-tab-header{flex:none;position:relative;top:auto;margin-bottom:10px}
.tool-float>.panel-resize{position:absolute!important;right:2px;bottom:2px;z-index:5!important;width:28px;height:28px;min-height:28px;padding:0;border:0;background:var(--panel);color:var(--accent);cursor:nwse-resize;touch-action:none;line-height:1}
.panel-actions{display:inline-flex;gap:4px;flex:none}.panel-actions button{min-height:32px;padding:0 8px;font-size:22px}
.panel-tab-group,.content-tab-header{display:flex;align-items:center;gap:4px}.panel-tab-group{min-width:0}.content-tab-header{justify-content:space-between}.content-drag-tab{margin-bottom:0}
.panes.single-panel{grid-template-columns:minmax(0,1fr)}
.panel-dock-target{grid-column:1/-1;min-height:65px}
.panel-shelf{margin-bottom:12px}.panel-shelf button{font-size:calc(.85em + 0.3px)}

/* Floating panels use page coordinates, so the workspace can scroll around them. */
.tool-float{position:absolute;max-width:none;max-height:none}

.map-surface{position:relative;margin:14px 0;isolation:isolate}
.map-surface #map{margin:0}
/* Only the Expand action enlarges the floating map; docked sizes stay unchanged. */
.tool-float.expanded-map-window #map{height:calc(88vh - 240px);min-height:180px}
.map-zoom{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;gap:6px}
.map-zoom button{width:44px;min-height:44px;padding:4px;background:var(--panel);box-shadow:0 2px 6px #0006}

.map-surface #weather-refresh{position:absolute;right:12px;bottom:12px;z-index:2;font-size:14px;min-height:32px;padding:5px 9px;background:var(--panel);box-shadow:0 2px 6px #0006}

/* All workspace panels share the same tab docking surface. */
.panel-window{position:relative;min-width:0;isolation:isolate}
.window-tabs{display:flex;flex-wrap:wrap;align-items:end;gap:4px;min-height:48px;border-bottom:2px solid var(--line);padding:4px 0;position:relative;z-index:3}
.window-tab{border-radius:12px 12px 0 0;min-height:40px;padding:7px 12px;cursor:grab;touch-action:none;user-select:none;font-size:calc(.85em + 0.3px)}
.window-tab[aria-selected="true"]{color:#39ff75;border-color:#39ff75;background:#163b23}
.stack-expand{margin-left:auto;width:38px;height:38px;min-height:38px;padding:8px;display:grid;place-items:center}
.stack-expand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.window-tab.task-result-flash{animation:task-result-tab-flash .7s ease-in-out 8}
@keyframes task-result-tab-flash{0%,100%{box-shadow:0 0 8px rgba(57,255,117,.22)}50%{color:#d9ffe3;background:#164e28;box-shadow:0 0 18px #39ff75,0 0 34px rgba(57,255,117,.8);text-shadow:0 0 9px #39ff75}}
@media(prefers-reduced-motion:reduce){.window-tab.task-result-flash{animation:none;box-shadow:0 0 16px #39ff75}}
.window-content{min-height:0;flex:1;overflow:auto;position:relative;z-index:1}
.window-content>section{padding:0;margin:0;border:0;background:transparent}
.window-panel-actions{display:flex;justify-content:flex-end;gap:5px;margin:6px 0}
.window-panel-actions button{min-height:28px;padding:0 8px;font-size:22px}
.window-panel-actions .panel-expand svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.empty-window{padding:16px;text-align:center;border:1px dashed var(--line);font-size:calc(.8em + 0.4px)}
.empty-panel-window{min-height:90px}.empty-panel-window .window-tabs{min-height:20px}
.dragging-panel{pointer-events:none;opacity:.8}
.stack-drop-ready>.window-tabs{outline:3px dashed #39ff75;background:#163b23}
.swap-drop-ready>.window-content{outline:3px dashed #39ff75;outline-offset:-4px}
.panel-window.tool-float .window-tabs{flex:none}
#weather-panel{display:none!important}

.panes.single-window-layout{grid-template-columns:minmax(0,1fr)}
.single-window-layout>.expanded-stack{order:0;width:100%;min-height:65vh}
.single-window-layout>.empty-panel-window{order:1;min-height:0;padding:6px;margin:0;border-style:dashed}
.single-window-layout>.empty-panel-window .window-tabs{display:none}
.single-window-layout>.empty-panel-window .empty-window{border:0;padding:6px}
.expanded-stack .results{max-height:65vh}
.expanded-stack #map{height:58vh}

.panel-window.tool-float{position:fixed;max-width:calc(100vw - 16px);max-height:calc(100vh - 76px);min-width:min(300px,calc(100vw - 16px));min-height:min(230px,calc(100vh - 76px))}
.panel-shelf{position:fixed;bottom:8px;left:8px;right:8px;z-index:10000;display:flex;flex-wrap:wrap;gap:8px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;margin:0;max-height:25vh;overflow:auto}
.panel-shelf button{min-height:32px;padding:4px 10px;font-size:16px}
.panel-shelf.minimize-drop-ready{outline:3px dashed #39ff75;box-shadow:0 0 22px rgba(57,255,117,.55)}
.panel-window.tool-float.expanded-panel-window{max-width:96vw;max-height:90vh}
body{padding-bottom:85px}

.panel-window.tool-float{position:absolute;max-width:none;max-height:none;min-width:300px;min-height:230px}

.window-layout-control{flex-direction:row;align-items:center;gap:8px;font-size:16px}
.window-layout-control select{min-height:32px;padding:4px 8px;font-size:16px}
.panes[data-window-layout="horizontal"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.panes[data-window-layout="vertical"]{grid-template-columns:minmax(0,1fr)}
.panes[data-window-layout="two-above"],.panes[data-window-layout="two-below"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.panes[data-window-layout="two-above"]>[data-tile-slot="2"],.panes[data-window-layout="two-below"]>[data-tile-slot="0"]{grid-column:1/-1}
.panes.single-window-layout{grid-template-columns:minmax(0,1fr)}
@media(max-width:650px){.panes[data-window-layout]{grid-template-columns:minmax(0,1fr)}}

.panes{display:block!important}
.dock-split{display:flex;gap:18px;align-items:stretch;min-width:0}
.dock-row{flex-direction:row}.dock-column{flex-direction:column}
.dock-split>*{flex:1;min-width:0}.dock-split>.panel-window{margin:8px 0}
.panes>.panel-window{width:100%;min-height:65vh}
.panel-window[data-drop-side]::after{content:'';position:absolute;z-index:8;background:#39ff7533;border:2px dashed #39ff75;color:#baffcc;display:grid;place-items:center;pointer-events:none;font-size:18px}
.panel-window[data-drop-side="left"]::after{inset:0 50% 0 0}
.panel-window[data-drop-side="right"]::after{inset:0 0 0 50%}
.panel-window[data-drop-side="top"]::after{inset:0 0 50% 0}
.panel-window[data-drop-side="bottom"]::after{inset:50% 0 0 0}
@media(max-width:650px){.dock-row{flex-direction:column}}

/* Equal-sized tiles; long panel contents scroll inside their tile. */
.panes{position:relative;height:max(640px,80vh)}
.panes>.dock-split,.panes>.panel-window{height:100%;min-height:0}
.dock-split{min-height:0;height:100%}
.dock-split>*{flex:1 1 0;min-height:0;min-width:0}
.dock-split>.panel-window,.panes>.panel-window{display:flex;flex-direction:column;margin:0;min-height:0}
.panel-window>.window-tabs{flex:none}
.panel-window>.window-content{flex:1 1 0;min-height:0;overflow:auto}
.panel-window[data-drop-side="top"]::after{content:''}
.panel-window[data-drop-side="bottom"]::after{content:''}
.panes[data-drop-side]::after{position:absolute;z-index:100;display:grid;place-items:center;pointer-events:none;background:#39ff7533;border:2px dashed #39ff75;color:#baffcc;font-size:20px}
.panes[data-drop-side="top"]::after{content:'';inset:0 0 50%}
.panes[data-drop-side="bottom"]::after{content:'';inset:50% 0 0}
.panes[data-drop-side="left"]::after{content:'';inset:0 50% 0 0}
.panes[data-drop-side="right"]::after{content:'';inset:0 0 0 50%}

.dock-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.dock-column{display:grid;grid-auto-flow:row;grid-auto-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
@media(max-width:650px){.dock-row{grid-auto-flow:row;grid-auto-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);grid-template-rows:none}}

#atlas-menu-toggle{font-size:30px;line-height:1;min-width:52px;margin-left:auto}
#atlas-menu{position:fixed;inset:0 0 0 auto;margin:0;width:min(390px,94vw);height:100dvh;max-height:100dvh;max-width:94vw;padding:20px;background:var(--panel);color:var(--text);border:0;border-left:2px solid var(--accent);overflow:auto;box-shadow:-10px 0 40px #0008;font:inherit}
#atlas-menu::backdrop{background:#0007}
.atlas-menu-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.atlas-menu-section{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid var(--line);margin-top:12px}
.atlas-menu-section h3{font-size:calc(.85em + 0.3px);color:var(--accent);margin:0 0 4px}
.atlas-menu-section>button,#atlas-menu nav>button{width:100%;text-align:left;font-size:calc(.9em + 0.2px)}
#atlas-menu nav{display:flex;flex-direction:column;align-items:stretch;gap:8px}
#atlas-menu .button-menu{display:block}#atlas-menu .button-menu>button{width:100%;text-align:left}
#atlas-menu .button-menu-options{position:static;width:100%;max-width:100%;box-shadow:none;margin-top:6px}
#atlas-menu label,#atlas-menu select{width:100%;font-size:calc(.9em + 0.2px)}

/* Calm the animation immediately behind the Atlas title. */
body.neon header>div:has(h1){position:relative;isolation:isolate;padding:10px 16px;border-radius:12px;background:rgba(7,11,9,.82);box-shadow:0 0 20px 12px rgba(7,11,9,.65)}

/* Slightly mute the rain without dimming text or controls. */
#binary-background{opacity:1}
.active-panel-binary{opacity:.75;filter:brightness(.6)}

/* Match the title's quiet binary backdrop around the hamburger and drawer. */
#atlas-menu-toggle{border:0}
body.neon #atlas-menu-toggle{background:rgba(7,11,9,.82);box-shadow:0 0 20px 12px rgba(7,11,9,.65);color:var(--accent)}
#atlas-menu,#atlas-menu.active-window{border:0!important;box-shadow:-10px 0 40px #0008!important}
body.neon #atlas-menu{background:rgba(7,11,9,.94)}
#atlas-menu>.active-panel-binary{opacity:.18;filter:brightness(.6)}
#atlas-menu-toggle:focus:not(:focus-visible){outline:none}

/* Smaller dropdown text within the hamburger menu. */
#atlas-menu select,#atlas-menu select option{font-size:18px}
#atlas-menu .button-menu>button,#atlas-menu .button-menu-options button{font-size:18px}

/* Borderless menu controls with a clear neon-green hover state. */
#atlas-menu button,#atlas-menu select,#atlas-menu .button-menu-options{border:0;box-shadow:none}
#atlas-menu .atlas-menu-section{border-top:0}
#atlas-menu button:hover:not(:disabled),#atlas-menu select:hover,#atlas-menu select option:hover{background:#39ff75;color:#071b0e;box-shadow:0 0 12px #39ff7566}
#atlas-menu button:focus-visible,#atlas-menu select:focus-visible{outline:2px solid #39ff75;outline-offset:2px}

/* Highlight menu wording instead of filling or outlining each item. */
#atlas-menu button,#atlas-menu select,#atlas-menu .button-menu-options{border:0;box-shadow:none;background:transparent}
#atlas-menu button:hover:not(:disabled),#atlas-menu select:hover,#atlas-menu select option:hover{color:#39ff75;background:transparent;box-shadow:none;text-shadow:0 0 7px #39ff7566}
#atlas-menu button:focus:not(:focus-visible),#atlas-menu .button-menu>button[aria-expanded="true"]{outline:none;box-shadow:none}
#atlas-menu select option{background:var(--panel);color:var(--text)}

/* Compact actions stay inside each movable window. */
.lookup-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 12px;padding-right:70px}
.lookup-actions button,.lookup-actions .button-menu-options button,#results-page{font-size:16px;padding:6px 10px;min-height:30px}
#prev,#next,#history-close{display:none!important}
#history-panel{min-width:0;padding:12px}
#history-list{overflow-wrap:anywhere}
/* All dropdown wording follows the hamburger menu treatment. */
.button-menu>button,.button-menu-options,.button-menu-options button,select,.country-suggestions,#filter-options,.country-suggestions [role="option"],#filter-options [role="option"]{border:0;box-shadow:none}
.button-menu>button,.button-menu-options button,select{background:transparent;color:var(--text)}
.button-menu-options,.country-suggestions,#filter-options,select option{background:var(--panel);color:var(--text)}
.button-menu>button:hover:not(:disabled),.button-menu-options button:hover:not(:disabled),.button-menu-options button:focus-visible,select:hover,.country-suggestions [role="option"]:hover,.country-suggestions [aria-selected="true"],#filter-options [role="option"]:hover,#filter-options [aria-selected="true"]{background:transparent;color:#39ff75;box-shadow:none;text-shadow:0 0 7px #39ff7566}
.button-menu>button[aria-expanded="true"]{border:0;box-shadow:none}

@supports (appearance:base-select){
 select,select::picker(select){appearance:base-select}
 select::picker(select){background:var(--panel);color:var(--text);border:0;border-radius:7px;padding:6px;font-size:16px}
 select option{padding:6px 10px;border:0}
 select option:hover,select option:focus{background:transparent;color:#39ff75;text-shadow:0 0 7px #39ff7566}
}

/* Quiet, compact navigation with secondary commands tucked away. */
#atlas-menu{width:min(300px,90vw);padding:22px 20px}
#atlas-menu .atlas-menu-heading h2{font-size:22px;font-weight:500;letter-spacing:.06em;margin:0}
#atlas-menu .atlas-menu-heading>button{font-size:25px;min-height:30px;padding:2px 8px}
#atlas-menu .atlas-menu-section{gap:3px;padding:10px 0;margin-top:4px}
#atlas-menu nav{gap:3px}
#atlas-menu button,#atlas-menu .button-menu>button{font-size:16px;min-height:32px;padding:7px 8px;font-weight:400}
#atlas-menu label{font-size:14px;color:var(--muted);margin-bottom:5px}
#atlas-menu select{font-size:16px;min-height:32px;padding:5px 8px;margin-top:3px}
#atlas-menu .menu-more{border:0;margin:4px 0;padding:0 8px}
#atlas-menu .menu-more>summary{font-size:16px;cursor:pointer;padding:9px 0;color:var(--text)}
#atlas-menu .menu-more>summary:hover{color:#39ff75;text-shadow:0 0 7px #39ff7566}
#atlas-menu .menu-more .atlas-menu-section h3{display:none}

/* Navigation reads as light text links, not boxed buttons. */
#atlas-menu button,#atlas-menu select,#atlas-menu summary{border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;font-weight:400;min-height:0;line-height:1.45}
#atlas-menu button,#atlas-menu .button-menu>button{padding:5px 2px;font-size:16px;text-align:left}
#atlas-menu .atlas-menu-section{gap:2px;padding:8px 0}
#atlas-menu nav{gap:2px}
#atlas-menu select{padding:4px 2px}
#atlas-menu .menu-more{padding:0 2px}
#atlas-menu .menu-more>summary{padding:6px 0}
#atlas-menu button:hover:not(:disabled),#atlas-menu select:hover,#atlas-menu summary:hover{color:#39ff75;text-shadow:0 0 7px #39ff7566}

/* Consistent, readable typography throughout the navigation drawer. */
#atlas-menu{font-family:"Segoe UI",Arial,sans-serif;font-size:18px;line-height:1.5}
#atlas-menu button,#atlas-menu .button-menu>button,#atlas-menu .button-menu-options button,#atlas-menu label,#atlas-menu select,#atlas-menu select option,#atlas-menu summary,#atlas-menu .menu-more>summary{font-family:inherit;font-size:18px;font-weight:400;line-height:1.5;letter-spacing:normal}
#atlas-menu .atlas-menu-heading h2{font-family:inherit;font-size:20px;font-weight:500;letter-spacing:.02em}
#atlas-menu .atlas-menu-heading>button{font-size:24px}
#atlas-menu select::picker(select){font-family:"Segoe UI",Arial,sans-serif;font-size:18px}

/* Light typography and text-only actions throughout Atlas. */
body,body *{font-weight:400!important}
button,body.neon button,body.ocean button,#atlas-menu button,
.button-menu>button,.button-menu>button[aria-expanded="true"],
.window-tab,.window-tab[aria-selected="true"]{
 border:0!important;background:transparent!important;box-shadow:none!important;
 color:var(--text);font-weight:400!important;
}
button:hover:not(:disabled),body.neon button:hover:not(:disabled),
body.ocean button:hover:not(:disabled),#atlas-menu button:hover:not(:disabled){
 background:transparent!important;color:#39ff75!important;
 box-shadow:none!important;text-shadow:0 0 7px #39ff7566;
}
button:focus-visible{outline:2px solid #39ff75!important;outline-offset:2px}
button:disabled{opacity:.45;cursor:default}
.window-tab[aria-selected="true"],button[aria-pressed="true"]{color:#39ff75!important}

/* Borderless tabs and tab strips; retain keyboard-only focus feedback. */
.window-tabs,.map-tabs{border:0!important;box-shadow:none!important}
.window-tab,.window-tab[aria-selected="true"],.map-tabs [role="tab"]{border:0!important;box-shadow:none!important;border-radius:0}
.window-tab:focus:not(:focus-visible),.map-tabs [role="tab"]:focus:not(:focus-visible){outline:none!important}

/* Highlight the active tab's wording without restoring borders or fills. */
.window-tab[aria-selected="true"],.map-tabs [role="tab"][aria-selected="true"]{
 color:#39ff75!important;text-shadow:0 0 5px #39ff75aa,0 0 12px #39ff7555;
}

/* Subtle green label backgrounds define tabs without adding borders. */
body .window-tabs .window-tab,body .map-tabs [role="tab"]{
 background:rgba(57,255,117,.14)!important;border-radius:5px;
}
body .window-tabs .window-tab[aria-selected="true"],body .map-tabs [role="tab"][aria-selected="true"]{
 background:rgba(57,255,117,.26)!important;
}
body .window-tabs .window-tab:hover,body .map-tabs [role="tab"]:hover{
 background:rgba(57,255,117,.30)!important;
}

/* Let a faint glimmer of page binary show through inactive windows. */
body.neon .panel-window:not(.active-window){background:rgba(16,32,23,.70)}

/* Separate stacked tab labels clearly in the active window. */
.panel-window.active-window>.window-tabs{gap:10px}
body .panel-window.active-window>.window-tabs .window-tab{padding:7px 16px;background:rgba(57,255,117,.24)!important}
body .panel-window.active-window>.window-tabs .window-tab[aria-selected="true"]{background:rgba(57,255,117,.32)!important;color:#39ff75!important}
body .panel-window.active-window>.window-tabs .window-tab:hover{background:rgba(57,255,117,.38)!important}

/* A faint luminous edge identifies the selected tab without shifting layout. */
body .panel-window .window-tabs .window-tab[aria-selected="true"],
body .map-tabs [role="tab"][aria-selected="true"]{
 box-shadow:0 0 7px rgba(57,255,117,.18)!important;
}

/* A gentle lift and diffuse expanded glow distinguish active tabs. */
body .panel-window .window-tabs .window-tab,body .map-tabs [role="tab"]{
 transition:transform 180ms ease,box-shadow 180ms ease,background-color 180ms ease;
 transform-origin:center bottom;
}
body .panel-window .window-tabs .window-tab[aria-selected="true"],
body .map-tabs [role="tab"][aria-selected="true"]{
 position:relative;z-index:2;transform:translateY(-2px) scale(1.035);
 box-shadow:0 0 7px 2px rgba(57,255,117,.24),0 0 17px 4px rgba(57,255,117,.13)!important;
}
@media(prefers-reduced-motion:reduce){
 body .panel-window .window-tabs .window-tab,body .map-tabs [role="tab"]{transition:none;transform:none}
}

/* Inactive windows keep quiet, flat tabs, including their selected tab. */
body .panel-window:not(.active-window) .window-tabs .window-tab,
body .panel-window:not(.active-window) .window-tabs .window-tab[aria-selected="true"]{
 transform:none;box-shadow:none!important;text-shadow:none;
 background:rgba(57,255,117,.14)!important;color:var(--text)!important;
}
body .panel-window:not(.active-window) .window-tabs .window-tab:hover{
 background:rgba(57,255,117,.30)!important;color:#39ff75!important;
}

/* Shared soft hover edge for interactive controls, including the menu. */
body :is(button:not(:disabled),a[href],select:not(:disabled),input:not(:disabled),textarea:not(:disabled),summary,[role="option"],[role="menuitem"]):hover,
body #atlas-menu :is(button:not(:disabled),a[href],select:not(:disabled),summary,[role="option"],[role="menuitem"]):hover,
body .panel-window .window-tabs .window-tab:hover,
body .panel-window:not(.active-window) .window-tabs .window-tab:hover{
 box-shadow:0 0 7px 2px rgba(57,255,117,.24),0 0 17px 4px rgba(57,255,117,.13)!important;
}

/* Consistent hover feedback for clickable items throughout all windows. */
body :is(label:has(input:not(:disabled)),label:has(select:not(:disabled)),[role="button"],[role="tab"],[role="checkbox"],[role="switch"],[role="link"],[role="menuitemcheckbox"],[role="menuitemradio"],[onclick],[tabindex]:not([tabindex="-1"]),input[type="checkbox"],input[type="radio"],input[type="range"],input[type="file"],.panel-resize,.landscape-choice):not(:disabled):not([aria-disabled="true"]):hover,
body #atlas-menu :is(label:has(input:not(:disabled)),label:has(select:not(:disabled)),[role="button"],[role="tab"],[role="checkbox"],[role="switch"],[onclick],[tabindex]:not([tabindex="-1"])):not([aria-disabled="true"]):hover{
 box-shadow:0 0 7px 2px rgba(57,255,117,.24),0 0 17px 4px rgba(57,255,117,.13)!important;
}

/* Search and text-entry fields stay quiet; action menus keep their hover glow. */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover,
body textarea:hover,
body label:has(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])):hover,
body #atlas-menu label:has(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])):hover{
 box-shadow:none!important;
}
body .button-menu>button:hover:not(:disabled),
body .button-menu .button-menu-options [role="menuitem"]:hover,
body .button-menu .button-menu-options button:hover:not(:disabled){
 box-shadow:0 0 7px 2px rgba(57,255,117,.24),0 0 17px 4px rgba(57,255,117,.13)!important;
}

/* Map actions share the Copy and Export hover treatment. */
body #map-view :is(#center,#expand,#radar-refresh,#weather-refresh):hover:not(:disabled){
 color:#39ff75!important;
 text-shadow:0 0 7px #39ff7566;
 box-shadow:0 0 7px 2px rgba(57,255,117,.24),0 0 17px 4px rgba(57,255,117,.13)!important;
}

/* Alerts remain plain, without the shared hover glow. */
body #alerts:hover,body label:has(#alerts):hover,
body #atlas-menu input[data-menu-toggle="alerts"]:hover,
body #atlas-menu label:has(input[data-menu-toggle="alerts"]):hover{
 box-shadow:none!important;text-shadow:none;
}

/* Keep alerts and resolved-address controls free of hover effects. */
body #map-view #alerts:hover,
body #map-view label:has(#alerts):hover,
body #atlas-menu input[data-menu-toggle="alerts"]:hover,
body #atlas-menu label:has(input[data-menu-toggle="alerts"]):hover,
body #resolved-controls #address:hover,
body #resolved-controls label:has(#address):hover,
body #resolved-controls #address option:hover{
 box-shadow:none!important;text-shadow:none!important;color:var(--text)!important;
}

/* Search actions use the same soft glow as Copy and Export. */
body #search-form :is(#search,#cancel):hover:not(:disabled){
 color:#39ff75!important;text-shadow:0 0 7px #39ff7566;
 box-shadow:0 0 7px 2px rgba(57,255,117,.24),0 0 17px 4px rgba(57,255,117,.13)!important;
}

/* Highlight the IP/hostname input only while it has focus. */
body #search-form #query:focus,
body #search-form #query:focus:hover{
 outline:none!important;border-color:rgba(57,255,117,.45);
 box-shadow:0 0 12px 3px rgba(57,255,117,.24),0 0 26px 6px rgba(57,255,117,.14)!important;
}

/* Match the filter input to the softer IP/hostname focus glow. */
body #lookup-panel #filter:focus,
body #lookup-panel #filter:focus:hover{
 outline:none!important;border-color:rgba(57,255,117,.45);
 box-shadow:0 0 12px 3px rgba(57,255,117,.24),0 0 26px 6px rgba(57,255,117,.14)!important;
}

/* Give the complete filter control one continuous fuzzy focus halo. */
body #lookup-panel .filter-combo:focus-within{
 border-radius:7px;
 box-shadow:0 0 12px 3px rgba(57,255,117,.24),0 0 26px 6px rgba(57,255,117,.14)!important;
}
body #lookup-panel .filter-combo #filter:focus,
body #lookup-panel .filter-combo #filter:focus:hover{
 box-shadow:none!important;
}

/* Dark backing gives the glowing active label clearer definition. */
body .panel-window.active-window>.window-tabs .window-tab[aria-selected="true"],
body .panel-window.active-window>.window-tabs .window-tab[aria-selected="true"]:hover{
 background:rgba(5,24,12,.67)!important;
}

/* Match glowing hover actions to the approved dark active-tab backing. */
body :is(button:not(:disabled),a[href],summary,[role="button"],[role="link"],[role="menuitem"],[role="option"]):hover,
body #atlas-menu :is(button:not(:disabled),a[href],summary,[role="button"],[role="link"],[role="menuitem"],[role="option"]):hover,
body .panel-window .window-tabs .window-tab:hover,
body .panel-window:not(.active-window) .window-tabs .window-tab:hover,
body .panel-window.active-window>.window-tabs .window-tab:hover,
body .panel-window.active-window>.window-tabs .window-tab[aria-selected="true"]:hover{
 background:rgba(5,24,12,.67)!important;
}

/* Small, inline-expanding menus keep navigation uncluttered. */
#atlas-menu .menu-branch{border:0;margin:5px 0;padding:0}
#atlas-menu .menu-branch>summary{font-size:16px;padding:7px 3px;cursor:pointer;list-style:none}
#atlas-menu .menu-branch>summary::before{content:'›';display:inline-block;width:17px;color:var(--accent);transition:transform .15s}
#atlas-menu .menu-branch[open]>summary::before{transform:rotate(90deg)}
#atlas-menu .menu-branch>summary::-webkit-details-marker{display:none}
#atlas-menu .menu-branch-content{padding-left:17px;display:flex;flex-direction:column;gap:2px}
#atlas-menu .menu-branch-content button,#atlas-menu .menu-branch-content label,#atlas-menu .menu-branch-content summary{font-size:15px;line-height:1.5}
#atlas-menu>button{display:block;width:100%;font-size:16px;padding:7px 3px}
#atlas-menu input[type="range"]{padding:0;min-height:24px;width:100%;accent-color:#39ff75}
#atlas-menu .menu-branch-content output{font-size:14px;color:var(--accent)}
#atlas-menu button[aria-pressed="true"]::after{content:' ✓';color:#39ff75}

/* Zoom remains visible inline with its scale and percentage. */
#atlas-menu label.menu-zoom-row{display:flex;flex-direction:row;align-items:center;gap:8px;white-space:nowrap;margin:6px 0;color:var(--text)}
#atlas-menu .menu-zoom-row input[type="range"]{flex:1;min-width:50px;width:0;max-width:none}
#atlas-menu .menu-zoom-row output{min-width:34px;text-align:right}

/* Match the hamburger button to the dark-green glowing controls. */
body #atlas-menu-toggle,
body #atlas-menu-toggle:hover:not(:disabled){
 background:rgba(5,24,12,.67)!important;
 border:0!important;border-radius:7px;
 color:#39ff75;
 box-shadow:0 0 7px 2px rgba(57,255,117,.24),0 0 17px 4px rgba(57,255,117,.13)!important;
}

/* Make the hamburger hover state distinct from its resting glow. */
body #atlas-menu-toggle:hover:not(:disabled){
 color:#8fffaf!important;
 background:rgba(15,55,28,.85)!important;
 text-shadow:0 0 8px rgba(57,255,117,.8);
 box-shadow:0 0 10px 3px rgba(57,255,117,.38),0 0 22px 5px rgba(57,255,117,.22)!important;
}

/* Hamburger border and glow appear only while hovered. */
body #atlas-menu-toggle:not(:hover){
 border:0!important;box-shadow:none!important;text-shadow:none;
}

/* Compact options inside the map window. */
#map-view .map-controls button,#map-view>label,#map-view #weather-refresh{font-size:16px;line-height:1.5}

/* Compact floating-window actions and a soft border only on the active window. */
.panel-window.tool-float :is(.map-controls,.lookup-actions,.button-menu-options) button,
.panel-window.tool-float .window-tabs .window-tab,
.panel-window.tool-float #weather-refresh,
.panel-window.tool-float #map-view>label{font-size:15px;line-height:1.5}
body .panel-window:not(.active-window){border-color:transparent!important;box-shadow:none!important}
body .panel-window.active-window{border-color:rgba(57,255,117,.30)!important;box-shadow:0 0 10px 2px rgba(57,255,117,.20),0 0 26px 5px rgba(57,255,117,.12)!important}

/* Copy and Export remain highlighted for the lifetime of their open submenu. */
body .panel-window .button-menu>button[aria-expanded="true"]{
 background:rgba(5,24,12,.67)!important;color:#39ff75!important;
 text-shadow:0 0 7px #39ff7566;
 box-shadow:0 0 7px 2px rgba(57,255,117,.24),0 0 17px 4px rgba(57,255,117,.13)!important;
}

/* Action labels stay light; the border alone signals an open submenu. */
body .panel-window .lookup-actions .button-menu>button,
body .panel-window .lookup-actions .button-menu>button:hover:not(:disabled),
body .panel-window .lookup-actions .button-menu>button[aria-expanded="true"]{
 font-weight:400!important;color:var(--text)!important;text-shadow:none!important;
}

/* Lookup Results uses a diffuse active edge rather than a hard green outline. */
body .panel-window.active-window:has(#lookup-panel:not([hidden])){
 border-color:transparent!important;
 box-shadow:0 0 12px 2px rgba(57,255,117,.14),0 0 28px 4px rgba(57,255,117,.08)!important;
}
body #lookup-panel.active-window{
 border-color:transparent!important;box-shadow:none!important;
}

/* Soft light instead of hard green borders across the interface. */
body.neon{--line:rgba(57,255,117,.16)}
body.neon section,body.neon dialog,body.neon input,body.neon select,body.neon textarea,body.neon #map{border-color:rgba(57,255,117,.16)!important}
body.neon section.active-window,body.neon dialog.active-window,
body.neon .panel-window.active-window,
body.neon .panel-window.active-window:has(#lookup-panel:not([hidden])){
 border-color:transparent!important;
 box-shadow:0 0 12px 3px rgba(57,255,117,.22),0 0 28px 6px rgba(57,255,117,.12)!important;
}
body.neon :focus-visible{outline:none!important;box-shadow:0 0 10px 2px rgba(57,255,117,.28),0 0 20px 4px rgba(57,255,117,.14)!important}
body.neon .panel-window .window-tabs .window-tab[aria-selected="true"],
body.neon .panel-window .button-menu>button[aria-expanded="true"]{
 border-color:transparent!important;outline:none!important;
 box-shadow:0 0 10px 2px rgba(57,255,117,.25),0 0 22px 4px rgba(57,255,117,.13)!important;
}
body.neon .panel-window .button-menu .button-menu-options button:is(:hover,:focus-visible,.chosen-menu-option){
 outline:none!important;border:0!important;font-weight:400!important;text-shadow:none!important;
 background:rgba(5,24,12,.67)!important;
 box-shadow:0 0 10px 2px rgba(57,255,117,.25),0 0 22px 4px rgba(57,255,117,.13)!important;
}

/* Stronger selection glow, keeping edges diffuse and text light. */
body.neon .panel-window .button-menu>button[aria-expanded="true"],
body.neon .panel-window .button-menu .button-menu-options button:is(:focus-visible,.chosen-menu-option){
 background:rgba(5,24,12,.67)!important;border:0!important;outline:none!important;
 box-shadow:0 0 12px 3px rgba(57,255,117,.36),0 0 24px 5px rgba(57,255,117,.20)!important;
 font-weight:400!important;text-shadow:none!important;
}

/* Compact option text across dropdowns and expandable menus. */
body .button-menu .button-menu-options button,
body .panel-window.tool-float .button-menu-options button,
body #atlas-menu .button-menu-options button,
body #atlas-menu .menu-branch-content button,
body #atlas-menu .menu-branch-content summary,
body #atlas-menu .menu-branch-content label,
body select option,
body #atlas-menu select option,
body .country-suggestions [role="option"],
body #filter-options [role="option"]{
 font-size:14px!important;font-weight:400!important;line-height:1.5;
}
body select::picker(select),body #atlas-menu select::picker(select){font-size:14px}

/* Bottom Reset/Restore actions match the approved soft hover treatment. */
body .panel-shelf button:hover:not(:disabled),
body .panel-shelf button:focus-visible{
 background:rgba(5,24,12,.67)!important;
 border:0!important;outline:none!important;
 color:var(--text)!important;font-weight:400!important;text-shadow:none!important;
 box-shadow:0 0 12px 3px rgba(57,255,117,.36),0 0 24px 5px rgba(57,255,117,.20)!important;
}

/* Translucent bottom bar; controls remain fully opaque. */
body .panel-shelf{background:color-mix(in srgb,var(--panel) 64%,transparent)}

/* Keep hover-label backing at 67%, independent of the bar transparency. */
body .panel-shelf button:hover:not(:disabled){background:rgba(5,24,12,.67)!important}

/* A faint diffuse edge defines the entire bottom Restore bar. */
body .panel-shelf{
 border-color:transparent;
 box-shadow:0 0 12px 3px rgba(57,255,117,.24),0 0 28px 6px rgba(57,255,117,.12);
}

/* Match the main workspace edge to the Restore bar's diffuse glow. */
body.neon #workspace,body.neon #workspace.active-window{
 border-color:transparent!important;
 box-shadow:0 0 12px 3px rgba(57,255,117,.24),0 0 28px 6px rgba(57,255,117,.12)!important;
}

/* Thick tinted glass softens the binary behind the workspace and Restore bar. */
body.neon #workspace,body.neon #workspace.active-window,body.neon .panel-shelf{
 background:linear-gradient(115deg,rgba(181,255,207,.09),transparent 24%,rgba(3,18,10,.16) 72%,rgba(181,255,207,.06)),rgba(10,28,18,.64);
 -webkit-backdrop-filter:blur(7px) saturate(145%) contrast(110%);
 backdrop-filter:blur(7px) saturate(145%) contrast(110%);
 border:1px solid rgba(171,255,201,.12)!important;
 box-shadow:inset 0 2px 5px rgba(211,255,225,.12),inset 0 -4px 10px rgba(0,8,3,.35),0 0 12px 3px rgba(57,255,117,.24),0 0 28px 6px rgba(57,255,117,.12)!important;
}

/* Tinted glass on docked and floating windows, brighter on the active window. */
body.neon .panel-window:not(.active-window){
 background:linear-gradient(115deg,rgba(181,255,207,.05),transparent 24%,rgba(3,18,10,.16) 72%,rgba(181,255,207,.03)),rgba(5,18,10,.40);
 -webkit-backdrop-filter:blur(7px) saturate(145%);backdrop-filter:blur(7px) saturate(145%);
 border-color:transparent!important;
 box-shadow:inset 0 2px 5px rgba(211,255,225,.13),inset 0 -4px 10px rgba(0,8,3,.3),0 0 12px 2px rgba(57,255,117,.20),0 0 24px 4px rgba(57,255,117,.10)!important;
}
body.neon .panel-window.active-window,
body.neon .panel-window.active-window:has(#lookup-panel:not([hidden])){
 background:linear-gradient(135deg,rgba(120,210,150,.04) 0%,transparent 24%,rgba(0,5,2,.14) 70%,rgba(100,190,130,.025) 100%),rgba(3,18,10,.82);
 -webkit-backdrop-filter:blur(18.48px) saturate(165%) contrast(110%);backdrop-filter:blur(18.48px) saturate(165%) contrast(110%);
 border-color:transparent!important;
 box-shadow:inset 0 2px 8px rgba(230,255,238,.07),inset 2px 0 10px rgba(211,255,225,.025),inset 0 -5px 14px rgba(0,8,3,.28),0 0 16px 4px rgba(57,255,117,.42),0 0 34px 8px rgba(57,255,117,.23)!important;
}

/* The in-window animation needs its own blur: it is in front of the backdrop. */
body.neon .panel-window.active-window>.active-panel-binary{
 filter:brightness(.6) blur(3.8px);
}

/* Larger text for the selected tab in the active workspace window. */
body .panel-window.active-window>.window-tabs .window-tab[aria-selected="true"]{
 font-size:20px;font-weight:400!important;
}

/* Smaller labels on unselected tabs and tabs in inactive windows. */
body .panel-window>.window-tabs .window-tab:not([aria-selected="true"]),
body .panel-window:not(.active-window)>.window-tabs .window-tab{
 font-size:17px;font-weight:400!important;
}

/* Soft hover feedback for the main IP/hostname/URL/country input. */
body.neon #search-form #query:hover:not(:disabled){
 border-color:rgba(57,255,117,.25)!important;
 box-shadow:0 0 12px 3px rgba(57,255,117,.24),0 0 26px 6px rgba(57,255,117,.14)!important;
}

/* Calculator actions match the soft glowing hover treatment. */
body.neon #subnet-view :is(#subnet-calculate,#subnet-practice,#subnet-copy):hover:not(:disabled){
 background:rgba(5,24,12,.67)!important;
 border:0!important;color:var(--text)!important;text-shadow:none!important;
 box-shadow:0 0 12px 3px rgba(57,255,117,.24),0 0 26px 6px rgba(57,255,117,.14)!important;
}

.subnet-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.subnet-suggestions button,.quiz-subnet-controls>button{font-size:15px;min-height:32px;padding:5px 10px}
body .subnet-suggestions button[aria-pressed="true"]{background:rgba(5,24,12,.67)!important;box-shadow:0 0 10px 2px #39ff7540!important}
.quiz-subnet-controls{margin:12px 0;padding:8px 0}
.quiz-subnet-controls label{font-size:15px}
.quiz-subnet-controls input{font-size:17px;min-height:36px;width:100%}

/* New subnet controls share the tabs' tinted hover backing and soft glow. */
body.neon .subnet-suggestions button:hover:not(:disabled),
body.neon .subnet-suggestions button:focus-visible,
body.neon .quiz-subnet-controls>button:hover:not(:disabled),
body.neon .quiz-subnet-controls>button:focus-visible{
 background:rgba(5,24,12,.67)!important;
 color:var(--text)!important;font-weight:400!important;text-shadow:none!important;
 border:0!important;outline:none!important;border-radius:5px;
 box-shadow:0 0 12px 3px rgba(57,255,117,.24),0 0 26px 6px rgba(57,255,117,.14)!important;
}

/* Persistent tab-style backing for the main lookup entry field. */
body.neon #search-form #query{
 background:rgba(5,24,12,.67)!important;
}

/* Soft backing behind the lookup field's label text. */
.lookup-input-caption{
 align-self:flex-start;padding:3px 9px;border-radius:5px;
 background:rgba(5,24,12,.67);font-weight:400;
 box-shadow:0 0 12px 3px rgba(57,255,117,.24),0 0 26px 6px rgba(57,255,117,.14);
}

/* Compact calculator action labels. */
#subnet-view :is(#subnet-calculate,#subnet-practice,#subnet-copy){font-size:15px;line-height:1.5}

/* The lookup entry window starts above the two rows of tools. */
.panes:has(#search-view){height:max(1050px,115vh)}
#search-view #search-form{align-items:end}
#search-form>label:has(#kind),#search-form>label:has(#mode){display:none}
#search-view #search-form .grow{min-width:min(260px,100%)}
#search-view #query{width:100%}

/* All inactive workspace tabs share one appearance, including Search. */
body .panel-window:not(.active-window)>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#virus-tab),
body .panel-window>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#virus-tab):not([aria-selected="true"]){
 background:rgba(57,255,117,.24)!important;
 color:var(--text)!important;font-size:17px;font-weight:400!important;
 padding:7px 16px;min-height:40px;border:0!important;border-radius:5px;
 transform:none;box-shadow:none!important;text-shadow:none!important;
}
body .panel-window:not(.active-window)>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#virus-tab):hover,
body .panel-window>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#virus-tab):not([aria-selected="true"]):hover{
 background:rgba(5,24,12,.67)!important;color:#39ff75!important;
 box-shadow:0 0 10px 2px rgba(57,255,117,.25),0 0 22px 4px rgba(57,255,117,.13)!important;
}


.lookup-tool-icons{display:flex;gap:8px;align-items:center;align-self:end}
.lookup-icon{width:40px;height:40px;min-height:40px;padding:8px;display:grid;place-items:center}
.lookup-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lookup-icon svg[viewBox="0 0 256 256"]{fill:currentColor;stroke:none}
.lookup-icon.selected,.lookup-icon[aria-pressed="true"]{color:#9fffba!important;box-shadow:0 0 18px rgba(57,255,117,.48)!important}
.lookup-query-wrap{position:relative}
.lookup-query-wrap #query{padding-right:42px}
.lookup-clear{position:absolute;right:5px;bottom:5px;width:32px;height:32px;min-height:32px;padding:7px;display:grid;place-items:center;border:0!important;background:transparent!important;box-shadow:none!important}
.lookup-clear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
body.neon .lookup-tool-icons .lookup-icon:hover:not(:disabled),body.neon .lookup-tool-icons .lookup-icon:focus-visible{
 background:rgba(5,24,12,.67)!important;color:var(--text)!important;
 text-shadow:none!important;border:0!important;outline:none!important;
 box-shadow:0 0 12px 3px rgba(57,255,117,.24),0 0 26px 6px rgba(57,255,117,.14)!important;
}

/* Magnification is reserved for clickable actions, not reading or typing. */
:where(button,a[href],summary,[role="button"],[role="tab"],[role="menuitem"],[role="option"]){transition:scale 180ms ease,translate 180ms ease}
a[href]{display:inline-block}
/* Pointer-centered text magnification, with no extra vertical lift. */
body .cursor-text-magnified{
 transform-origin:var(--magnifier-origin,center)!important;
 scale:1.15!important;translate:none!important;
 position:relative;z-index:4;
}
@media(prefers-reduced-motion:reduce){body .cursor-text-magnified{scale:1!important}}

/* History actions share the same lightweight hover and open-menu treatment. */
body #history-panel :is(.history-row button,#history-clear,a[href]){
 font-size:15px;font-weight:400!important;padding:6px 10px;border:0!important;border-radius:5px;
}
body.neon #history-panel :is(button:not(:disabled),a[href]):hover,
body.neon #history-panel :is(button:not(:disabled),a[href]):focus-visible,
body.neon #history-panel button[aria-expanded="true"],
body.neon #history-panel .button-menu-options button.chosen-menu-option{
 background:rgba(5,24,12,.67)!important;color:var(--text)!important;
 font-weight:400!important;text-shadow:none!important;border:0!important;outline:none!important;
 box-shadow:0 0 12px 3px rgba(57,255,117,.36),0 0 24px 5px rgba(57,255,117,.20)!important;
}

/* Compact map-centering target beside the zoom controls. */
body .map-surface #center{position:absolute;left:12px;top:12px;bottom:auto;z-index:3;width:44px;min-height:44px;padding:8px;display:grid;place-items:center;background:rgba(5,24,12,.90)!important;color:#8fffaf!important;border-radius:5px;box-shadow:0 0 10px rgba(57,255,117,.30)!important}

/* Raised floating map control, anchored over the upper-left of the map. */
body .map-surface #center{
 top:16px;left:16px;border-radius:50%;
 background:rgba(5,24,12,.84)!important;
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
 box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 12px rgba(57,255,117,.25)!important;
}
body .map-surface #center:hover{
 box-shadow:0 8px 20px rgba(0,0,0,.6),0 0 18px rgba(57,255,117,.4)!important;
}

/* Keep the centering control above every map/radar zoom rendering. */
.map-surface #map{position:relative;z-index:0}
body .map-surface #center{z-index:10;width:44px;height:44px;flex-shrink:0;opacity:1;visibility:visible;pointer-events:auto}

/* Floating map actions share fixed icon sizing and readable tinted backing. */
body .map-surface .map-icon-action{
 position:absolute;top:16px;z-index:10;width:44px;height:44px;min-height:44px;padding:8px;
 display:grid;place-items:center;border-radius:50%;border:0!important;
 background:rgba(5,24,12,.84)!important;color:#8fffaf!important;
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
 box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 12px rgba(57,255,117,.25)!important;
}
body .map-surface #expand{left:68px}
body .map-surface #radar-refresh{left:120px}
body .map-surface .map-icon-action:hover{
 box-shadow:0 8px 20px rgba(0,0,0,.6),0 0 18px rgba(57,255,117,.4)!important;
}
#map-view .map-controls:empty{display:none}

/* Infrastructure controls and unobtrusive map descriptions. */
body .map-surface #traffic-description{left:172px}
body .map-surface #backbone-toggle{position:absolute;right:14px;top:16px;z-index:12;padding:8px 12px;background:rgba(5,24,12,.67)!important;border:0!important;border-radius:10px;font-size:14px}
body #backbone-toggle[aria-pressed=true]{box-shadow:0 0 18px rgba(57,255,117,.48)!important;color:#9fffba!important}
.map-tip:hover::after,.map-tip:focus-visible::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 10px);left:0;min-width:180px;width:240px;max-width:65vw;padding:10px;background:rgba(3,18,10,.96);color:#d7ffe2;font:400 13px/1.4 sans-serif;white-space:normal;border-radius:8px;box-shadow:0 0 14px rgba(57,255,117,.3);pointer-events:none;z-index:30}
#infrastructure-panel{margin:8px 0;font-size:14px}
#infrastructure-panel label{display:inline-flex;align-items:center;gap:5px;margin:8px 12px 8px 0}
#infrastructure-panel input{width:auto;min-height:0}
#infrastructure-panel select{display:block;width:100%;margin:8px 0;font-size:14px}
#infrastructure-detail{max-height:260px;overflow:auto}
#infrastructure-detail dl{display:grid;grid-template-columns:140px 1fr;gap:5px 10px}
#infrastructure-detail dd{margin:0;overflow-wrap:anywhere}
#infrastructure-detail h3{font-size:16px}
@media(max-width:520px){body .map-surface #backbone-toggle{top:70px}}

#backbone-toggle.map-tip::after{left:auto;right:0}
#map-view [hidden]{display:none!important}

/* Shared soft halo for all map icon controls. */
body #map-view .map-surface :is(#center,.map-icon-action,.map-zoom button){
 border:0!important;
 box-shadow:0 4px 12px rgba(0,0,0,.45),0 0 12px 2px rgba(57,255,117,.34),0 0 26px 5px rgba(57,255,117,.16)!important;
 transition:box-shadow .18s ease,color .18s ease;
}
body #map-view .map-surface :is(#center,.map-icon-action,.map-zoom button):is(:hover,:focus-visible,:active){
 box-shadow:0 4px 12px rgba(0,0,0,.45),0 0 16px 3px rgba(57,255,117,.55),0 0 34px 7px rgba(57,255,117,.27)!important;
 color:#b7ffcb!important;
}

/* Visible binary texture inside active map controls, independent of opaque map tiles. */
body.neon #map-view .map-surface button:is([aria-pressed="true"],:active,:focus){
 background:rgba(5,24,12,.67)!important;isolation:isolate;
}
body.neon #map-view .map-surface button:is([aria-pressed="true"],:active,:focus)::before{
 content:"0101 1010 0110\A 1010 0101 1001\A 0011 1100 0101\A 1100 0011 1010\A 0101 1010 0110\A 1010 0101 1001";
 position:absolute;inset:2px;z-index:0;overflow:hidden;border-radius:inherit;
 color:#75ff9c;font:400 10px/12px monospace;white-space:pre;text-align:center;
 opacity:.55;pointer-events:none;text-shadow:0 0 4px #39ff75;
 animation:map-button-binary 2.8s linear infinite;
}
@keyframes map-button-binary{from{text-indent:0;padding-top:0}to{text-indent:0;padding-top:12px}}
@media(prefers-reduced-motion:reduce){body.neon #map-view .map-surface button::before{animation:none!important}}

body #map-view .map-zoom button{position:relative}
body #map-view .map-surface button>svg{position:relative;z-index:1}

/* Dark frosted active controls; existing hover magnification is preserved. */
body.neon #map-view .map-surface button:is([aria-pressed="true"],:active,:focus){
 background:linear-gradient(135deg,rgba(150,195,169,.07),rgba(0,0,0,.22)),rgba(2,12,7,.90)!important;
 backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%);
}
body.neon #map-view .map-surface button:is([aria-pressed="true"],:active,:focus)::before{
 opacity:.30;filter:blur(.45px);text-shadow:0 0 3px rgba(57,255,117,.65);
}

/* Consistent dark frosted glass on every map button, at rest and selected. */
body.neon #map-view button,
body.neon #map-view .map-surface button,
body.neon #map-view .map-surface button:is([aria-pressed="true"],:active,:focus){
 background:linear-gradient(135deg,rgba(180,210,190,.08),transparent 45%,rgba(0,0,0,.3)),rgba(1,9,5,.94)!important;
 backdrop-filter:blur(18px) saturate(80%);-webkit-backdrop-filter:blur(18px) saturate(80%);
 border:0!important;border-radius:10px;color:#b7ffcb!important;
 box-shadow:inset 0 1px 1px rgba(210,255,225,.14),0 0 12px 2px rgba(57,255,117,.28),0 0 26px 5px rgba(57,255,117,.13)!important;
}
body.neon #map-view button:is(:hover,:focus,[aria-pressed="true"]){
 scale:1.15!important;
 box-shadow:inset 0 1px 1px rgba(210,255,225,.18),0 0 16px 3px rgba(57,255,117,.48),0 0 32px 6px rgba(57,255,117,.22)!important;
}
@media(prefers-reduced-motion:reduce){body.neon #map-view button:is(:hover,:focus,[aria-pressed="true"]){scale:1!important}}

body #map-view .map-surface #backbone-toggle{width:44px;height:44px;min-height:44px;padding:8px;display:grid;place-items:center}

/* Weather refresh stays anchored in the lower-right map corner. */
body #map-view .map-surface #weather-refresh{top:auto;bottom:12px;right:12px;left:auto;width:44px;height:44px;min-height:44px;padding:8px}

/* Slightly smaller map icons and compact attribution. */
body #map-view .map-surface :is(#center,#expand,#radar-refresh,#traffic-description,#backbone-toggle,#weather-refresh,.map-zoom button){width:38px;height:38px;min-height:38px;padding:7px}
body #map-view .map-surface button>svg{width:19px;height:19px}
body #map-view .map-attribution,body #map-view .infrastructure-credit{font-size:11px!important;line-height:1.4}

/* Same tooltip appearance, positioned inward for lower/right map controls. */
#map-view .map-zoom .map-tip::after,#map-view #weather-refresh.map-tip::after{top:auto;bottom:calc(100% + 10px)}
#map-view #weather-refresh.map-tip::after,#map-view #backbone-toggle.map-tip::after{left:auto;right:0}

/* Map tooltips size to their labels, wrapping only on narrow screens. */
#map-view .map-tip:is(:hover,:focus-visible)::after{
 width:max-content;min-width:0;max-width:min(260px,65vw);padding:7px 10px;overflow-wrap:break-word;
}

/* Traffic being enabled does not make its idle control look selected. */
body.neon #map-view .map-surface #traffic-description:not(:hover):not(:focus):not(:active){
 scale:1!important;
 box-shadow:inset 0 1px 1px rgba(210,255,225,.14),0 0 12px 2px rgba(57,255,117,.28),0 0 26px 5px rgba(57,255,117,.13)!important;
}
body.neon #map-view .map-surface #traffic-description:not(:hover):not(:focus):not(:active)::before{content:none;animation:none}

#backbone-route-tooltip{position:fixed;z-index:1000;width:max-content;max-width:min(320px,80vw);padding:7px 10px;background:rgba(3,18,10,.96);color:#d7ffe2;font:400 13px/1.4 sans-serif;white-space:normal;overflow-wrap:break-word;border-radius:8px;box-shadow:0 0 14px rgba(57,255,117,.3);pointer-events:none}

/* Route names and map control hints share the buttons' frosted glass and glow. */
body.neon #backbone-route-tooltip,
body.neon #map-view .map-tip:is(:hover,:focus-visible)::after{
 background:linear-gradient(135deg,rgba(180,210,190,.08),transparent 45%,rgba(0,0,0,.3)),rgba(1,9,5,.94);
 backdrop-filter:blur(18px) saturate(80%);-webkit-backdrop-filter:blur(18px) saturate(80%);
 border:0;border-radius:10px;color:#b7ffcb;
 font:400 13px/1.4 system-ui,sans-serif;
 box-shadow:inset 0 1px 1px rgba(210,255,225,.18),0 0 16px 3px rgba(57,255,117,.48),0 0 32px 6px rgba(57,255,117,.22);
 pointer-events:none;
}

/* Workspace heading: translucent glass with a quiet binary shimmer. */
#engineer-workspace-title{
 position:relative;isolation:isolate;overflow:hidden;display:table;
 margin:0 0 18px;padding:9px 18px;border:0;border-radius:12px;
 font-size:20px;font-weight:400;line-height:1.5;color:var(--accent);
 background:linear-gradient(135deg,rgba(200,255,215,.08),transparent 55%),rgba(2,15,8,.67);
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 box-shadow:inset 0 1px 1px #d2ffe124,0 0 16px 3px #39ff7547,0 0 30px 5px #39ff7521;
}
#engineer-workspace-title span{position:relative;z-index:1}
body.neon #engineer-workspace-title::before{
 content:'01010110 10100101 01011010 11001001 00110101 10101010 01010110 10100101 01011010 11001001 00110101 10101010';
 position:absolute;inset:-55px 0;z-index:0;pointer-events:none;
 color:#39ff75;opacity:.16;font:12px/18px monospace;letter-spacing:6px;overflow-wrap:anywhere;
 text-shadow:0 0 5px #39ff75;animation:workspace-title-binary 12s linear infinite;
}
@keyframes workspace-title-binary{from{transform:translateY(-18px)}to{transform:translateY(18px)}}
@media(prefers-reduced-motion:reduce){body.neon #engineer-workspace-title::before{animation:none}}

#engineer-workspace-title{transform-origin:left center;transition:transform .18s ease}
#engineer-workspace-title:hover{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){#engineer-workspace-title{transition:none}}

/* Consistent readable glass and binary for every workspace tile tab. */
body .panel-window:is(.active-window,:not(.active-window))>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#report-tab,#virus-tab){
 position:relative;isolation:isolate;overflow:hidden;
 background:linear-gradient(135deg,rgba(200,255,215,.08),transparent 55%),rgba(2,15,8,.67)!important;
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 border:0!important;border-radius:12px;color:var(--accent)!important;font-weight:400!important;
 box-shadow:inset 0 1px 1px #d2ffe124,0 0 16px 3px #39ff7547,0 0 30px 5px #39ff7521!important;
}
body.neon .panel-window>.window-tabs .window-tab::before{
 content:'01010110 10100101 01011010 11001001 00110101 10101010 01010110 10100101 01011010 11001001';
 position:absolute;inset:-55px 0;z-index:-1;pointer-events:none;
 color:#39ff75;opacity:.16;font:12px/18px monospace;letter-spacing:6px;overflow-wrap:anywhere;
 text-shadow:0 0 5px #39ff75;animation:workspace-title-binary 12s linear infinite;
}
@media(prefers-reduced-motion:reduce){body.neon .panel-window>.window-tabs .window-tab::before{animation:none}}

/* Hover and active selection share the same label treatment; tabs remain drag handles. */
body .panel-window:is(.active-window,:not(.active-window))>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#report-tab,#virus-tab):hover,
body .panel-window.active-window>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#report-tab,#virus-tab)[aria-selected="true"]{
 font-size:20px!important;transform:translateY(-2px) scale(1.035);scale:1!important;
 background:linear-gradient(135deg,rgba(200,255,215,.08),transparent 55%),rgba(2,15,8,.67)!important;
 color:var(--accent)!important;z-index:2;
 box-shadow:inset 0 1px 1px #d2ffe124,0 0 16px 3px #39ff7547,0 0 30px 5px #39ff7521!important;
 cursor:grab;touch-action:none;user-select:none;
}
body .panel-window>.window-tabs .window-tab:active{cursor:grabbing}
@media(prefers-reduced-motion:reduce){
 body .panel-window:is(.active-window,:not(.active-window))>.window-tabs .window-tab:hover,
 body .panel-window.active-window>.window-tabs .window-tab[aria-selected="true"]{transform:none}
}

/* Every map icon has identical hover, keyboard-focus, and active treatment. */
body.neon #map-view .map-surface button:is(:hover,:focus-visible,:active,[aria-pressed="true"]){
 background:linear-gradient(135deg,rgba(180,210,190,.08),transparent 45%,rgba(0,0,0,.3)),rgba(1,9,5,.94)!important;
 backdrop-filter:blur(18px) saturate(80%);-webkit-backdrop-filter:blur(18px) saturate(80%);
 border:0!important;border-radius:10px;color:#b7ffcb!important;scale:1.15!important;
 box-shadow:inset 0 1px 1px rgba(210,255,225,.18),0 0 16px 3px rgba(57,255,117,.48),0 0 32px 6px rgba(57,255,117,.22)!important;
}
@media(prefers-reduced-motion:reduce){body.neon #map-view .map-surface button:is(:hover,:focus-visible,:active,[aria-pressed="true"]){scale:1!important}}

#drag-tab-tooltip{
 position:fixed;z-index:20000;width:max-content;max-width:calc(100vw - 16px);
 padding:7px 10px;pointer-events:none;border:0;border-radius:10px;
 background:linear-gradient(135deg,rgba(180,210,190,.08),transparent 45%,rgba(0,0,0,.3)),rgba(1,9,5,.94);
 backdrop-filter:blur(18px) saturate(80%);-webkit-backdrop-filter:blur(18px) saturate(80%);
 color:#b7ffcb;font:400 13px/1.4 system-ui,sans-serif;
 box-shadow:inset 0 1px 1px rgba(210,255,225,.18),0 0 16px 3px rgba(57,255,117,.48),0 0 32px 6px rgba(57,255,117,.22);
}

.tile-launch-icons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tile-launch-icon{display:grid;place-items:center;width:46px;min-width:46px;min-height:46px;padding:9px}
.tile-launch-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}


/* One Map-sized font for every tile, regardless of active state or docking. */
body .panel-window:is(.active-window,:not(.active-window))>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#virus-tab),
body .panel-window:is(.active-window,:not(.active-window))>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#virus-tab):is(:hover,[aria-selected="true"]){
 font-family:system-ui,sans-serif!important;font-size:17px!important;font-weight:400!important;line-height:1.5!important;
}

/* One hover magnification for all tile labels, docked or floating. */
body .panel-window:is(.active-window,:not(.active-window))>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#virus-tab):hover{
 transform:none!important;translate:none!important;scale:1.15!important;
 transform-origin:center center!important;z-index:4;
 transition:scale 180ms ease,box-shadow 180ms ease;
}
@media(prefers-reduced-motion:reduce){
 body .panel-window:is(.active-window,:not(.active-window))>.window-tabs :is(#search-tab,#results-tab,#map-tab,#calc-tab,#history-tab,#virus-tab):hover{scale:1!important;transition:none}
}

#virus-form,#virus-upload-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
#virus-form label,#virus-upload-form>label:first-child{min-width:min(100%,420px)}
#virus-results{display:grid;gap:8px;margin-top:14px}
.virus-field{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:12px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.virus-field strong{color:var(--accent)}
.virus-field span{overflow-wrap:anywhere}
.virus-source{display:inline-block;width:max-content;max-width:100%;margin-top:6px}
@media(max-width:560px){.virus-field{grid-template-columns:1fr;gap:3px}}

/* Match every tile's upper-right controls to the Map tile. */
body.neon .panel-window .window-panel-actions button,
body.neon #map-view .window-panel-actions button{
 min-height:28px;padding:0 8px;font:400 22px/1.5 system-ui,sans-serif;
 background:linear-gradient(135deg,rgba(180,210,190,.08),transparent 45%,rgba(0,0,0,.3)),rgba(1,9,5,.94)!important;
 backdrop-filter:blur(18px) saturate(80%);-webkit-backdrop-filter:blur(18px) saturate(80%);
 border:0!important;border-radius:10px;color:#b7ffcb!important;
 box-shadow:inset 0 1px 1px rgba(210,255,225,.14),0 0 12px 2px rgba(57,255,117,.28),0 0 26px 5px rgba(57,255,117,.13)!important;
 transform:none!important;scale:1!important;transition:scale 180ms ease,box-shadow 180ms ease;
}
body.neon .panel-window .window-panel-actions button:is(:hover,:focus-visible,:active),
body.neon #map-view .window-panel-actions button:is(:hover,:focus-visible,:active){
 scale:1.15!important;
 box-shadow:inset 0 1px 1px rgba(210,255,225,.18),0 0 16px 3px rgba(57,255,117,.48),0 0 32px 6px rgba(57,255,117,.22)!important;
}
@media(prefers-reduced-motion:reduce){
 body.neon .panel-window .window-panel-actions button:is(:hover,:focus-visible,:active),
 body.neon #map-view .window-panel-actions button:is(:hover,:focus-visible,:active){scale:1!important;transition:none}
}

/* Tinted frosted-glass menu with a diffuse edge, without a hard border. */
body #atlas-menu{
 background:linear-gradient(135deg,rgba(170,235,190,.09),transparent 45%,rgba(0,0,0,.22)),rgba(3,19,11,.78);
 backdrop-filter:blur(18px) saturate(85%);-webkit-backdrop-filter:blur(18px) saturate(85%);
 border:0;border-radius:16px 0 0 16px;
 box-shadow:inset 1px 0 2px rgba(195,255,215,.15),-3px 0 16px 3px rgba(57,255,117,.30),-8px 0 36px 8px rgba(57,255,117,.16),-14px 0 50px rgba(0,0,0,.35);
}
body.neon #atlas-menu{background:linear-gradient(135deg,rgba(170,235,190,.09),transparent 45%,rgba(0,0,0,.22)),rgba(3,19,11,.78)}

/* Expanded menu matches the active workspace tile's tinted glass. */
body #atlas-menu,body #atlas-menu.active-window,body.neon #atlas-menu{
 background:linear-gradient(135deg,rgba(120,210,150,.04) 0%,transparent 24%,rgba(0,5,2,.14) 70%,rgba(100,190,130,.025) 100%),rgba(3,18,10,.82)!important;
 backdrop-filter:blur(18.48px) saturate(165%) contrast(110%)!important;
 -webkit-backdrop-filter:blur(18.48px) saturate(165%) contrast(110%)!important;
 border:0!important;border-radius:12px 0 0 12px;
 box-shadow:inset 0 2px 8px rgba(230,255,238,.07),inset 2px 0 10px rgba(211,255,225,.025),inset 0 -5px 14px rgba(0,8,3,.28),0 0 16px 4px rgba(57,255,117,.42),0 0 34px 8px rgba(57,255,117,.23)!important;
}
body.neon #atlas-menu>.active-panel-binary{filter:brightness(.6) blur(3.8px)}

/* Brighten only the expanded menu panel by seven percent. */
body #atlas-menu,body #atlas-menu.active-window,body.neon #atlas-menu{filter:brightness(1.07)}

/* Engineer Workspace navigation reuses the existing glass, glow and hover language. */
body #atlas-menu[open]{display:flex;flex-direction:column}
#atlas-menu-main{display:flex;flex:1;min-height:0;flex-direction:column}
.atlas-menu-heading-actions{display:flex;align-items:center;gap:8px}
#atlas-menu #settings-open{font-size:24px;line-height:1;padding:4px 8px;transform-origin:center;transition:transform .18s ease,color .18s ease,text-shadow .18s ease}
#atlas-menu #settings-open:hover{transform:rotate(35deg) scale(1.08)}
#atlas-menu .workspace-menu-action{display:flex;align-items:center;gap:7px;width:100%;text-align:left}
#atlas-menu .menu-action-icon{display:none;min-width:18px;color:var(--accent);text-align:center;text-shadow:0 0 7px #39ff75}
#atlas-menu .workspace-menu-action.menu-action-selected{
 color:var(--accent);background:rgba(5,24,12,.67)!important;
 box-shadow:0 0 10px 2px rgba(57,255,117,.25),0 0 22px 4px rgba(57,255,117,.13)!important;
}
#atlas-menu .workspace-menu-action.menu-action-selected .menu-action-icon{display:inline-block}
#atlas-menu .workspace-menu-action[aria-pressed="true"]::after{content:none}
#atlas-menu .atlas-menu-about{margin-top:auto;padding-top:18px!important}
#atlas-menu .atlas-menu-pane{display:block;margin:8px 0 0;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
#atlas-menu .atlas-menu-pane[hidden]{display:none!important}
#atlas-menu .atlas-menu-pane h2:first-child{display:none}
.panes.docked-maximized{display:block!important}
.panes.docked-maximized>.maximized-dock-panel{width:100%;height:100%;min-height:65vh;margin:0}
.panel-window.tool-float.menu-launched-window{max-width:92vw;max-height:88vh}
@media(prefers-reduced-motion:reduce){#atlas-menu #settings-open{transition:none}#atlas-menu #settings-open:hover{transform:none}}

/* Quiet scrollbars: arrows stay visible; the glowing thumb appears on use. */
*{scrollbar-color:transparent transparent!important;scrollbar-width:auto}
*:hover{scrollbar-color:#39ff75 transparent!important}
*::-webkit-scrollbar{width:12px;height:12px;background:transparent}
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}
*::-webkit-scrollbar-thumb{background:transparent;border:3px solid transparent;border-radius:999px;background-clip:padding-box}
*:hover::-webkit-scrollbar-thumb{background:#39ff75;border-color:transparent;box-shadow:0 0 8px #39ff75,0 0 15px rgba(57,255,117,.75);background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover,*::-webkit-scrollbar-thumb:active{background:#9fffba;border-color:transparent;box-shadow:0 0 10px #39ff75,0 0 20px #39ff75;background-clip:padding-box}
*::-webkit-scrollbar-button:single-button{display:block;width:12px;height:12px;background-color:transparent;background-repeat:no-repeat;background-position:center}
*::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:linear-gradient(135deg,transparent 50%,#39ff75 51%),linear-gradient(225deg,transparent 50%,#39ff75 51%);background-size:5px 5px;background-position:2px 5px,7px 5px}
*::-webkit-scrollbar-button:single-button:vertical:increment{background-image:linear-gradient(45deg,transparent 50%,#39ff75 51%),linear-gradient(315deg,transparent 50%,#39ff75 51%);background-size:5px 5px;background-position:2px 2px,7px 2px}
*::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:linear-gradient(45deg,transparent 50%,#39ff75 51%),linear-gradient(135deg,transparent 50%,#39ff75 51%);background-size:5px 5px;background-position:5px 2px,5px 7px}
*::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:linear-gradient(225deg,transparent 50%,#39ff75 51%),linear-gradient(315deg,transparent 50%,#39ff75 51%);background-size:5px 5px;background-position:2px 2px,2px 7px}
*::-webkit-scrollbar-button:single-button:hover{filter:drop-shadow(0 0 4px #39ff75)}