*{box-sizing:border-box} :root{font-family:Segoe UI,Tahoma,Arial,sans-serif;color:#233953;--glass:rgba(255,255,255,.66);--border:rgba(255,255,255,.85);--muted:#61718a;--hover:rgba(255,255,255,.75);--shadow:0 12px 40px #29487512;--selected:#e6f6f8;--ink:#233953;--line:#c9dbe180}body{margin:0;height:100dvh;overflow:hidden;background:#eaf2f7;background-image:radial-gradient(ellipse at 5% 10%,#9fe8de 0,transparent 42%),radial-gradient(ellipse at 92% 8%,#d2c4fb 0,transparent 42%),radial-gradient(ellipse at 80% 95%,#ffd4ba 0,transparent 48%);color:var(--ink)}body:before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(130deg,transparent 40%,#ffffff35 40.1%,transparent 75%)}[data-theme=dark]{--glass:rgba(25,37,60,.77);--border:rgba(195,214,255,.14);--muted:#adc0da;--hover:rgba(111,141,190,.18);--shadow:0 12px 40px #0003;--selected:#25475b;--ink:#edf5ff;--line:#afcce122;color-scheme:dark}[data-theme=dark] body{background-color:#101b30;background-image:radial-gradient(ellipse at 0% 0%,#164c53 0,transparent 48%),radial-gradient(ellipse at 100% 0%,#39305f 0,transparent 48%),radial-gradient(ellipse at 90% 100%,#4b3045 0,transparent 48%)}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #168da9;outline-offset:2px}.glass{background:var(--glass);border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}header{height:76px;position:fixed;top:12px;left:14px;right:14px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;z-index:5}.brand{display:flex;gap:12px;align-items:center}.brand-mark{background:linear-gradient(145deg,#0bbca1,#168abf);width:43px;height:43px;border-radius:14px;display:grid;place-items:center;color:white;box-shadow:0 6px 16px #139eaf30}.brand strong{font-size:23px;letter-spacing:1px}.brand small{display:block;font-size:11px;letter-spacing:2px;color:var(--muted);margin-top:3px}.header-title{font-size:18px;font-weight:600;margin-left:24px;border-left:1px solid var(--line);padding-left:24px;flex:1}.tools{display:flex;gap:9px}.tool{height:44px;min-width:44px;border:1px solid var(--border);border-radius:13px;background:var(--hover);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 13px;font-size:14px;font-weight:600}.tool svg{width:20px;height:20px}aside{position:fixed;top:100px;bottom:14px;left:14px;width:254px;border-radius:22px;padding:12px;z-index:4;display:flex;flex-direction:column}.nav-caption{font-size:10px;letter-spacing:2px;color:var(--muted);height:24px;padding:3px 12px;flex-shrink:0}.nav-list{display:grid;grid-template-rows:repeat(15,minmax(0,1fr));flex:1;gap:3px;min-height:0}.nav-item{display:flex;align-items:center;gap:11px;width:100%;border:1px solid transparent;background:transparent;border-radius:12px;padding:0 10px;text-align:left;min-height:0}.nav-item:hover{background:var(--hover)}.nav-item.active{background:var(--selected);border-color:#48aeba45;box-shadow:0 3px 10px #24959a09}.icon{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;flex:none;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.label{font-size:12px;font-weight:650;letter-spacing:.35px;flex:1;white-space:nowrap}.chevron{width:14px;height:14px;color:var(--muted)}main{position:fixed;top:100px;bottom:14px;left:282px;right:14px;border-radius:22px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#839fac66 transparent;outline:none}.flyout{position:fixed;left:280px;width:254px;padding:12px;border-radius:18px;z-index:10;background:var(--glass);box-shadow:0 18px 55px #18365c30}.flyout[hidden]{display:none}.flyout-title{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px;border-bottom:1px solid var(--line);margin-bottom:7px;font-weight:700;font-size:14px}.close{border:0;background:transparent;width:36px;height:36px;border-radius:10px;font-size:24px}.sub-item{display:flex;align-items:center;gap:12px;min-height:46px;border:0;width:100%;background:transparent;padding:8px 12px;border-radius:10px;text-align:start;font-size:15px}.sub-item:hover,.sub-item.selected{background:var(--selected)}.sub-dot{width:7px;height:7px;background:var(--accent);border-radius:50%}.ar .nav-item{direction:rtl;text-align:right}.ar .label{font-size:15px;letter-spacing:0}.ar .nav-caption,.ar .flyout{direction:rtl}.ar .header-title{direction:ltr;text-align:left}
.ar #pageTitle{direction:rtl;unicode-bidi:isolate}.ar .brand small{letter-spacing:0}.ar .sub-item{direction:rtl}.nav-pager{display:none;gap:8px;padding-top:8px}.nav-pager button{flex:1;border:1px solid var(--border);border-radius:10px;background:var(--hover);height:40px}.nav-pager button:disabled{opacity:.3;cursor:default}@media(max-height:720px){.nav-list{grid-template-rows:repeat(8,minmax(0,1fr))}.nav-item.page-hidden{display:none}.nav-pager{display:flex}.nav-caption{height:20px}}@media(max-width:850px){aside{width:220px}main{left:246px}.flyout{left:234px}.header-title{font-size:15px;margin-left:15px;padding-left:15px}.brand strong{font-size:20px}}@media(max-width:600px){header{padding:0 13px}.brand small,.header-title{display:none}aside{width:74px;padding:8px}.nav-caption,.nav-item .label,.nav-item .chevron{display:none}.nav-item{justify-content:center;padding:0}.nav-item .icon{width:36px;height:36px}main{left:100px}.flyout{left:97px;width:min(254px,calc(100vw - 110px))}.nav-pager{gap:2px}.brand strong{font-size:17px}.brand-mark{width:35px;height:35px}.tool{padding:0 9px}.tools{gap:5px}}@media(prefers-reduced-motion:no-preference){button{transition:background .18s,box-shadow .18s}main,header,aside{transition:background .25s}}
.nav-list{display:flex!important;flex-direction:column;gap:1px;overflow:hidden}.nav-item{flex:none;height:44px;min-height:44px}.nav-item[aria-expanded=true] .chevron{transform:rotate(90deg)}.inline-child{flex:none;height:44px;min-height:44px;margin-left:24px;width:calc(100% - 24px);padding-left:19px;border-left:1px solid var(--line);border-radius:0 10px 10px 0;font-size:14px}.ar .inline-child{margin-left:0;margin-right:24px;border-left:0;border-right:1px solid var(--line);border-radius:10px 0 0 10px;padding-left:12px;padding-right:19px}.nav-pager.show{display:flex}.nav-pager[hidden]{display:none!important}@media(max-width:600px){aside{width:220px}main{left:246px}.nav-item .label,.nav-item .chevron{display:block}.nav-item{justify-content:flex-start;padding:0 8px}.label{font-size:11px}.inline-child{font-size:13px}.ar .label{font-size:13px}.nav-item .icon{width:26px;height:26px}}
@font-face{font-family:'Metrix Area Stencil';src:url(/assets/1b2a740d5270902d4961d584.ttf) format('truetype');font-style:normal;font-weight:400;font-display:swap}.brand strong{font-family:'Metrix Area Stencil',sans-serif;font-weight:400}.brand strong{font-size:34px;line-height:1;letter-spacing:1px}@media(max-width:850px){.brand strong{font-size:30px}}@media(max-width:600px){.brand strong{font-size:26px}}.tools .tool{width:48px;height:48px;padding:0}.tools .tool>svg{width:23px;height:23px}.tools .language-flag{width:30px!important;height:20px!important;stroke:none;stroke-width:0;overflow:hidden;border-radius:3px}.inline-child{position:relative;margin-left:44px;width:calc(100% - 44px);padding:8px 16px;border:0;border-radius:13px;overflow:visible;color:var(--muted)}.inline-child.selected{color:var(--ink)}.inline-child:before{content:'';position:absolute;left:-20px;top:-1px;bottom:-1px;width:1px;background:var(--line)}.inline-child:after{content:'';position:absolute;left:-20px;top:-1px;width:17px;height:24px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-bottom-left-radius:10px;pointer-events:none}.inline-child:not(:has(+ .inline-child)):before{bottom:50%}.ar .inline-child{margin-left:0;margin-right:44px;border:0;border-radius:13px;padding:8px 16px}.ar .inline-child:before{left:auto;right:-20px}.ar .inline-child:after{left:auto;right:-20px;border-left:0;border-right:1px solid var(--line);border-bottom-left-radius:0;border-bottom-right-radius:10px}[data-theme=dark] body{background-color:#11142e;background-image:radial-gradient(ellipse at 5% 90%,#126d7866,transparent 55%),radial-gradient(ellipse at 92% 16%,#903c8766,transparent 58%),linear-gradient(125deg,#0b2437 0%,#202044 42%,#392142 75%,#171b38 100%)}[data-theme=dark] body:before{background:radial-gradient(ellipse at 45% 25%,#685de52b,transparent 55%)}[data-theme=dark]{--glass:rgba(18,25,46,.58)}.tools .account-button{width:auto;max-width:210px;padding:0 12px;gap:8px}.account-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}.tool[hidden]{display:none!important}dialog{color:var(--ink);width:min(400px,calc(100vw - 30px));padding:25px;border-radius:22px}dialog::backdrop{background:#08152d88;backdrop-filter:blur(6px)}.login-heading{display:flex;justify-content:space-between;align-items:center}.login-heading h2{margin:0}.login-heading button{background:transparent;border:0;font-size:28px;width:40px;height:40px}dialog p{color:var(--muted);font-size:14px}dialog label{display:block;font-size:14px;margin:18px 0 8px}dialog input{font:inherit;width:100%;height:46px;border:1px solid var(--line);border-radius:10px;background:var(--hover);color:var(--ink);padding:10px}dialog .login-submit{width:100%;height:46px;border:0;border-radius:12px;background:#168d9f;color:white;font-weight:600}#loginError{color:#e4707c;min-height:18px}.ar dialog{direction:rtl}@media(max-width:850px){.tools .account-button span{display:none}.tools .account-button{width:48px;padding:0}}.user-glass-icon{display:block;width:34px;height:34px;object-fit:contain;flex-shrink:0}.nav-item[data-id="users"] .icon{background:transparent}.nav-item[data-id="users"] .user-glass-icon{width:34px;height:34px}.tools .account-button .user-glass-icon{width:36px;height:36px}.nav-item[data-id="dashboard"] .icon{background:transparent}.dashboard-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="dashboard"] .icon,.nav-item[data-id="users"] .icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center}.nav-item[data-id="dashboard"],.nav-item[data-id="users"]{gap:8px;align-items:center}.nav-item[data-id="dashboard"] .label,.nav-item[data-id="users"] .label{line-height:1.2;align-self:center}.nav-item[data-id="map"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.map-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="map"]{gap:8px;align-items:center}.nav-item[data-id="map"] .label{line-height:1.2;align-self:center}.nav-item[data-id="ai"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.ai-glass-icon{display:block;width:28.8px;height:28.8px;object-fit:contain;flex-shrink:0}.nav-item[data-id="ai"]{gap:8px;align-items:center}.nav-item[data-id="ai"] .label{line-height:1.2;align-self:center}.nav-item[data-id="connection"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.connection-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="connection"]{gap:8px;align-items:center}.nav-item[data-id="connection"] .label{line-height:1.2;align-self:center}.nav-item[data-id="alarms"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.alarm-glass-icon{display:block;width:28.8px;height:28.8px;object-fit:contain;flex-shrink:0}.nav-item[data-id="alarms"]{gap:8px;align-items:center}.nav-item[data-id="alarms"] .label{line-height:1.2;align-self:center}.nav-item[data-id="weather"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.weather-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="weather"]{gap:8px;align-items:center}.nav-item[data-id="weather"] .label{line-height:1.2;align-self:center}.nav-item[data-id="cctv"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.cctv-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="cctv"]{gap:8px;align-items:center}.nav-item[data-id="cctv"] .label{line-height:1.2;align-self:center}.nav-item[data-id="settings"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.settings-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="settings"]{gap:8px;align-items:center}.nav-item[data-id="settings"] .label{line-height:1.2;align-self:center}.nav-item[data-id="scheduler"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.scheduler-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="scheduler"]{gap:8px;align-items:center}.nav-item[data-id="scheduler"] .label{line-height:1.2;align-self:center}.nav-item[data-id="simulation"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.simulation-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="simulation"]{gap:8px;align-items:center}.nav-item[data-id="simulation"] .label{line-height:1.2;align-self:center}.nav-item[data-id="reports"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.reports-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="reports"]{gap:8px;align-items:center}.nav-item[data-id="reports"] .label{line-height:1.2;align-self:center}.nav-item[data-id="documentation"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.documentation-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="documentation"]{gap:8px;align-items:center}.nav-item[data-id="documentation"] .label{line-height:1.2;align-self:center;white-space:normal;min-width:0}.nav-item[data-id="support"] .icon{background:transparent;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.support-glass-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}.nav-item[data-id="support"]{gap:8px;align-items:center}.nav-item[data-id="support"] .label{line-height:1.2;align-self:center;white-space:normal;min-width:0}.header-title{display:flex;align-items:center;gap:10px;min-width:0}#headerTabIcon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none}#headerTabIcon img{width:36px;height:36px;object-fit:contain}#headerTabIcon .ai-glass-icon,#headerTabIcon .alarm-glass-icon{width:28.8px;height:28.8px}#headerTabIcon svg{width:24px;height:24px}#pageTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:600px){.header-title{display:none}}#headerTabIcon:has(.dashboard-glass-icon){width:44px;height:44px}#headerTabIcon .dashboard-glass-icon{width:44px;height:44px}.nav-item[data-id=devices]{gap:8px;align-items:center}.nav-item[data-id=devices] .icon{width:36px;height:36px;background:transparent}.devices-glass-icon{width:36px;height:36px;object-fit:contain}.nav-item[data-id=lorawan]{gap:8px;align-items:center}.nav-item[data-id=lorawan] .icon{width:36px;height:36px;background:transparent}.lorawan-glass-icon{width:36px;height:36px;object-fit:contain}#navigation .nav-item[data-id]{display:flex;align-items:center;gap:8px;text-align:left}#navigation .nav-item[data-id] .icon{width:36px;height:36px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;background:transparent}#navigation .nav-item[data-id] .icon img{display:block;width:32px;height:32px;object-fit:contain;object-position:center;flex:none;margin:0}#navigation .nav-item[data-id] .label{min-width:0;flex:1;text-align:left;align-self:center;line-height:1.2}body.ar #navigation .nav-item[data-id] .label{text-align:right}.inline-child:has(.sensor-child-icon){display:flex;align-items:center;gap:8px}.sensor-child-icon{width:28px;height:28px;object-fit:contain;flex:none}.header-title{flex:1;min-width:0}#pageTitle{white-space:nowrap;flex:none}.header-sub-tabs{display:flex;align-items:center;gap:3px;min-width:0;margin-inline-start:10px;padding:4px;border:1px solid var(--border);border-radius:14px;background:var(--glass);overflow-x:auto;scrollbar-width:thin}.header-sub-tabs[hidden]{display:none}.header-sub-tab{display:flex;align-items:center;justify-content:center;gap:5px;flex:none;min-height:36px;padding:4px 10px;border:1px solid transparent;border-radius:10px;background:transparent;font-size:12px;white-space:nowrap}.header-sub-tab:hover{background:var(--hover)}.header-sub-tab[aria-selected=true]{background:var(--selected);border-color:#48aeba45}.header-sub-tab img{width:26px;height:26px;object-fit:contain}
.header-sub-tab img.device-tab-icon{width:auto;height:24px;max-width:28px}#navigation .chevron{display:none}.tools{flex:none;margin-inline-start:12px}@media(max-width:1100px){header{height:130px;flex-wrap:wrap;align-content:center;row-gap:8px}.header-title{display:flex;order:3;flex-basis:100%;margin:0;padding:0;border:0}.tools{margin-inline-start:auto}aside,main{top:154px}}
#language{padding:0;width:48px;flex:none}#language .language-glass-icon{display:block;width:36px;height:36px;object-fit:contain}#theme{position:relative;isolation:isolate;width:86px;min-width:86px;height:42px;padding:0;overflow:hidden;border-radius:24px;border:1px solid #23b4bd;background:linear-gradient(135deg,#08aab9 0%,#20d4b1 55%,#45efa8 100%);box-shadow:inset 0 1px 3px #fff9;transition:background .4s,border-color .4s,box-shadow .4s}#theme:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,#3659c8,#192b78);opacity:0;transition:opacity .4s}#theme .theme-knob{position:absolute;z-index:2;left:4px;top:4px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff5bd,#ffcf57 65%,#eea62e);border:1px solid #e8a62d;box-shadow:0 2px 5px #16305733,inset 0 1px 4px #fff9;transition:transform .4s cubic-bezier(.22,.8,.25,1),background .4s,border-color .4s}#theme .theme-sun,#theme .theme-moon{position:absolute;top:8px;display:flex;width:24px;height:24px;align-items:center;justify-content:center;transition:opacity .3s,transform .4s}#theme .theme-sun{right:10px;color:#e69a00}#theme .theme-moon{left:10px;color:#c4faff;opacity:0;transform:scale(.7)}#theme svg{width:23px;height:23px;stroke-width:2.2}[data-theme=dark] #theme{border-color:#8c98f4}[data-theme=dark] #theme:before{opacity:1}[data-theme=dark] #theme .theme-knob{transform:translateX(44px);background:radial-gradient(circle at 35% 28%,#f5eeff,#c9b2fa 65%,#9177e8);border-color:#b3a0f5}[data-theme=dark] #theme .theme-sun{opacity:0;transform:scale(.7)}[data-theme=dark] #theme .theme-moon{opacity:1;transform:scale(1)}body,.glass{transition:background-color .4s,color .4s,border-color .4s}@media(prefers-reduced-motion:reduce){#theme,#theme:before,#theme span,body,.glass{transition:none!important}}#language{background:transparent;border:0;box-shadow:none}#language:hover{background:transparent}#language:focus-visible{outline:3px solid #168da9;outline-offset:2px}#theme{width:68.8px;min-width:68.8px;height:33.6px;align-self:center}#theme .theme-knob{left:3.2px;top:3.2px;width:25.6px;height:25.6px}#theme .theme-sun,#theme .theme-moon{top:6.4px;width:19.2px;height:19.2px}#theme .theme-sun{right:8px}#theme .theme-moon{left:8px}#theme svg{width:18.4px;height:18.4px}[data-theme=dark] #theme .theme-knob{transform:translateX(35.2px)}/* Match the language icon and keep account details fully visible. */
#theme{border-color:#0dafab}
[data-theme=dark] #theme{border-color:#8c98f4}
.tools #accountButton{width:auto;max-width:none;flex-shrink:0;padding:0 4px;background:transparent;border:0;box-shadow:none;gap:8px}
.tools #accountButton:hover{background:transparent;box-shadow:none}
.tools #accountButton #accountName{display:inline;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
#accountButton:focus-visible{outline:2px solid #168da9;outline-offset:3px}
#language .language-glass-icon{width:48px;height:48px}
#logoutButton .logout-glass-icon{display:block;width:36px;height:36px;object-fit:contain}
.tools #accountButton{display:inline-flex;align-items:center;justify-content:center}
.tools #accountButton #accountName{line-height:1;align-self:center}
.tools #accountButton .user-glass-icon{display:block;flex-shrink:0;align-self:center}
#logoutButton,#refreshButton{background:transparent;border:0;box-shadow:none;flex:none}
#logoutButton:hover,#refreshButton:hover{background:transparent;box-shadow:none}
#logoutButton .logout-glass-icon,#refreshButton .refresh-glass-icon{display:block;width:48px;height:48px;object-fit:contain}
#logoutButton:focus-visible,#refreshButton:focus-visible{outline:2px solid #168da9;outline-offset:2px}

/* Match actual artwork heights, accounting for transparent margins. */
#logoutButton,#refreshButton,#language{display:flex;align-items:center;justify-content:center;overflow:visible}
#logoutButton .logout-glass-icon{width:35.50px;height:37.19px;flex-shrink:0;transform:translateY(0.11px)}
#refreshButton .refresh-glass-icon{width:51.42px;height:51.42px;flex-shrink:0;transform:translateY(0.73px)}
#language .language-glass-icon{width:44.46px;height:36.63px;flex-shrink:0;transform:translateY(0.25px)}
.nav-item .label{white-space:normal;line-height:1.2;min-width:0}
@media(max-width:760px){
 header{height:230px;padding:12px 16px;row-gap:6px}
 .brand{flex-basis:100%;justify-content:center}
 .tools{flex-basis:100%;margin:0;flex-wrap:wrap;justify-content:center}
 .tools #accountButton{flex-basis:100%;max-width:100%}
 .tools #accountButton #accountName{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
 .header-title{min-width:0;flex:1 1 100%;height:44px}
 aside,main{top:254px}
}
.tools #accountButton.signed-out .user-glass-icon{width:36px;height:36px}

.tools #accountButton .account-details{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;max-width:none;overflow:visible;text-align:start}
.tools #accountButton #accountDateTime{display:block;font-size:10px;font-weight:400;line-height:1.2;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.tools #accountButton .account-details{align-self:center;gap:3px;line-height:normal}
.tools #accountButton #accountName{align-self:flex-start;line-height:1.2}
.tools #accountButton .user-glass-icon{align-self:center}

/* Header artwork normalized to the theme toggle visible height. */
.tools #accountButton .user-glass-icon{width:42.165px;height:42.165px;max-width:none;flex-shrink:0;object-fit:contain;transform:translateY(0.000px)}
.tools #logoutButton .logout-glass-icon{width:35.338px;height:37.076px;max-width:none;flex-shrink:0;object-fit:contain;transform:translateY(0.000px)}
.tools #refreshButton .refresh-glass-icon{width:51.200px;height:51.200px;max-width:none;flex-shrink:0;object-fit:contain;transform:translateY(0.800px)}
.tools #language .language-glass-icon{width:44.800px;height:36.750px;max-width:none;flex-shrink:0;object-fit:contain;transform:translateY(0.175px)}
.tools #accountButton.signed-out .user-glass-icon{width:42.165px;height:42.165px;max-width:none;flex-shrink:0;object-fit:contain;transform:translateY(0.000px)}

.tools #refreshButton,.tools #language,.tools #theme{scale:.9;transform-origin:center}

.connection-status{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;position:relative}
.connection-status .connection-art{display:block;width:auto;height:30.24px;max-width:40px;object-fit:contain}
.connection-status .connection-art[hidden]{display:none}
.connection-status[data-state=checking] .connection-art{opacity:.45}
.connection-status-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Reduce header action artwork by 30% and reclaim the layout space too. */
.tools{gap:3px;align-items:center;margin-inline-start:8px}
.tools #accountButton{gap:6px;padding-inline:2px}
.tools #accountButton #accountName{font-size:12px}
.tools #accountButton #accountDateTime{font-size:9px}
.tools #accountButton .user-glass-icon,.tools #accountButton.signed-out .user-glass-icon{width:46.8px;height:46.8px}
.tools #logoutButton,.tools #refreshButton,.tools #language{width:34px;min-width:34px;height:44px;padding:0;scale:1}
.tools #logoutButton .logout-glass-icon{width:24.7366px;height:25.9532px}
.tools #refreshButton .refresh-glass-icon{width:21.168px;height:21.168px;transform:none}
.tools #language .language-glass-icon{width:auto;height:21.168px;max-width:28.224px;transform:none}
.tools .connection-status{width:34px}
.tools .connection-status .connection-art{height:21.168px;max-width:28px}
.tools #theme{width:43.344px;min-width:43.344px;height:21.168px;scale:1;border-radius:15.12px}
.tools #theme .theme-knob{left:2.016px;top:2.016px;width:16.128px;height:16.128px}
.tools #theme .theme-sun,.tools #theme .theme-moon{top:4.032px;width:12.096px;height:12.096px}
.tools #theme .theme-sun{right:5.04px}
.tools #theme .theme-moon{left:5.04px}
.tools #theme svg{width:11.592px;height:11.592px}
[data-theme=dark] .tools #theme .theme-knob{transform:translateX(22.176px)}
.header-sub-tab{padding-inline:8px}
@media(max-width:1100px){.tools{margin-inline-start:auto}}
@media(max-width:760px){.tools{margin-inline-start:0}}

/* Equal center-to-center spacing for all five header actions. */
.tools{display:grid;grid-template-columns:auto repeat(5,44px);gap:0;align-items:center;justify-items:center}
.tools #logoutButton,.tools #refreshButton,.tools #language,.tools .connection-status{width:44px;min-width:44px}
@media(max-width:760px){.tools{grid-template-columns:repeat(5,44px);justify-content:center;row-gap:6px}.tools #accountButton{grid-column:1/-1}}

/* Equal visible gaps, accounting for the different artwork widths. */
.tools{display:flex;align-items:center;gap:10px}
.tools #accountButton{margin-inline-end:4px}
.tools #logoutButton,.tools #refreshButton,.tools #language,.tools .connection-status{width:auto;min-width:0;flex:none;padding-inline:0}
.tools #logoutButton .logout-glass-icon{width:auto;height:23.52px;transform:none}
@media(max-width:760px){.tools{justify-content:center;flex-wrap:wrap;row-gap:6px}.tools #accountButton{margin-inline-end:0}}

/* Increase the five action icons 30%, retaining equal visible gaps. */
.tools #logoutButton .logout-glass-icon{height:30.576px}
.tools .connection-status .connection-art{height:27.5184px;max-width:36.4px}
.tools #refreshButton .refresh-glass-icon{width:27.5184px;height:27.5184px}
.tools #language .language-glass-icon{height:27.5184px;max-width:36.6912px}
.tools #theme{width:56.3472px;min-width:56.3472px;height:27.5184px;border-radius:19.656px}
.tools #theme .theme-knob{left:2.6208px;top:2.6208px;width:20.9664px;height:20.9664px}
.tools #theme .theme-sun,.tools #theme .theme-moon{top:5.2416px;width:15.7248px;height:15.7248px}
.tools #theme .theme-sun{right:6.552px}.tools #theme .theme-moon{left:6.552px}
.tools #theme svg{width:15.0696px;height:15.0696px}
[data-theme=dark] .tools #theme .theme-knob{transform:translateX(28.8288px)}
.tools #accountConnection{display:block;font-size:9px;line-height:1.2;color:#128a70;font-weight:500}.tools #accountConnection[hidden]{display:none}[data-theme=dark] .tools #accountConnection{color:#6cdec0}

.tools #headerSettings{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;padding:0;background:transparent;border:0;box-shadow:none}.tools #headerSettings img{display:block;width:32px;height:30px;object-fit:contain}.tools #headerSettings:hover{background:#95e1cc20}.tools #headerSettings:focus-visible{outline:2px solid #2687d4;outline-offset:2px}

/* Keep the workstation scrollbar inside its rounded edges. */
#workspace{scrollbar-gutter:stable}
@supports selector(::-webkit-scrollbar){
 #workspace{scrollbar-width:auto;scrollbar-color:auto}
 #workspace::-webkit-scrollbar{width:14px;height:14px}
 #workspace::-webkit-scrollbar-track{background:transparent;margin-block:22px;margin-inline:22px}
 #workspace::-webkit-scrollbar-thumb{background:#839fac80;border:4px solid transparent;background-clip:padding-box;border-radius:20px;min-height:36px}
 #workspace::-webkit-scrollbar-thumb:hover{background-color:#617f92b3}
 #workspace::-webkit-scrollbar-corner{background:transparent}
 #workspace::-webkit-scrollbar-button{display:none;width:0;height:0}
}