/* UNITIQX / OBSIDIAN HYPERLUX 4.0
   Design system, not runtime. CSS/SVG only. No fonts, imports, tracking, telemetry.
   Intentional overrides on the existing v1/v2/v3 theme stack.
   Visual energy is purely decorative and never claims operational health. */
:root{
 --ux4-void:#050b14;--ux4-ink:#effaff;--ux4-muted:#a9bfce;
 --ux4-glass:rgba(11,25,42,.93);--ux4-glass-hi:rgba(27,53,75,.78);
 --ux4-white-line:rgba(190,235,255,.14);--ux4-electric:#81e9e8;
 --ux4-cobalt:#72baff;--ux4-violet:#b8a0ff;--ux4-amber:#f4c28c;
 --ux4-emerald:#9bf3d2;--ux4-round:13px;
 --ux4-shadow:0 25px 70px rgba(0,3,14,.34),inset 0 1px rgba(226,250,255,.085);
 --ux4-depth:radial-gradient(ellipse at 72% -24%,rgba(57,107,168,.27),transparent 55%),
 radial-gradient(ellipse at -14% 70%,rgba(33,87,117,.15),transparent 50%);
 --ux4-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
body.ux-v2,body.qx-atmosphere{
 --ux4-accent:var(--ux4-electric);
 --ux4-accent-soft:rgba(101,218,216,.15);
 --ux4-architect:#5f98b0;
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
}
body.ux-v2[data-ux-surface="city"],body.qx-atmosphere[data-qx-zone="world"]{
 --ux4-accent:#8ecbff;--ux4-accent-soft:rgba(97,136,255,.17);--ux4-architect:#7ca5e9;
}
body.ux-v2[data-ux-surface="factory"],body.qx-atmosphere[data-qx-zone="forge"]{
 --ux4-accent:#ffd098;--ux4-accent-soft:rgba(225,142,64,.17);--ux4-architect:#d59f69;
}
body.ux-v2[data-ux-surface="research"],body.qx-atmosphere[data-qx-zone="knowledge"]{
 --ux4-accent:#91f3d8;--ux4-accent-soft:rgba(87,213,191,.14);--ux4-architect:#81c8bd;
}
body.ux-v2[data-ux-surface="studio"],body.qx-atmosphere[data-qx-zone="studio"]{
 --ux4-accent:#d4acff;--ux4-accent-soft:rgba(160,119,243,.19);--ux4-architect:#cba8fa;
}
body.ux-v2[data-ux-surface="systems"]{
 --ux4-accent:#83dfe6;--ux4-accent-soft:rgba(77,200,221,.16);--ux4-architect:#80c2d1;
}
body.ux-v2[data-ux-surface="private"],body.qx-atmosphere[data-qx-zone="mission"]{
 --ux4-accent:#99edd9;--ux4-accent-soft:rgba(100,221,201,.14);--ux4-architect:#80bbca;
}
/* Engineered material lighting: one structural glow, one grid, one frame. */
body.ux-v2:not(.ux-home){
 background-color:var(--ux4-void);
 background-image:var(--ux4-depth);
}
body.ux-v2 :where(.hero,.intro,.mast,.lead,.opening,.pagehead,.hero-copy,.section-top) h1{
 letter-spacing:-.068em;line-height:1.025;text-wrap:balance;
 text-shadow:0 7px 32px rgba(0,3,12,.25);
}
body.ux-v2 :where(.hero,.intro,.mast,.lead,.opening,.pagehead) :where(em,i):not(.icon){
 color:var(--ux4-accent);text-shadow:0 0 70px var(--ux4-accent-soft);
}
body.ux-v2 :where(.eyebrow,.overline,.kicker,.tag,.micro,.status,.brand small,.logo small){
 font-variant-numeric:tabular-nums;
}
body.ux-v2 :where(.eyebrow,.overline,.kicker){
 color:var(--ux4-accent);
 text-shadow:0 0 22px var(--ux4-accent-soft);
}
body.ux-v2 :where(.panel,.card,.station,.tile,.result-panel,.control-surface,.block,.workspace article,.module-grid article,.district-card){
 background-clip:padding-box;
 box-shadow:var(--ux4-shadow);
}
body.ux-v2 :where(.panel,.card,.station,.tile,.result-panel,.control-surface,.block,.module-grid article,.district-card):not(.active){
 border-color:rgba(145,196,224,.23);
}
body.ux-v2 :where(.panel,.card,.station,.tile,.result-panel,.control-surface,.block,.module-grid article,.district-card):hover{
 border-color:color-mix(in srgb,var(--ux4-accent) 42%,rgba(103,168,210,.25));
}
body.ux-v2 :where(.card,.station,.panel,.block,.result-panel,.control-surface,.metric,.stat,.tile):is(:hover,:focus-within){
 box-shadow:0 25px 75px rgba(0,3,14,.38),inset 0 1px rgba(231,251,255,.1);
}
body.ux-v2 :where(.panel,.card,.station,.block,.control-surface,.result-panel,.module-grid article,.district-card){
 background-image:linear-gradient(150deg,rgba(101,175,215,.064),transparent 59%);
}
/* Technical light etching at selected flagship cards. */
body.ux-v2 :where(.panel,.card,.station,.block,.control-surface,.result-panel,.module-grid article,.district-card):before{
 background:linear-gradient(90deg,transparent,var(--ux4-accent),transparent);
 height:1px;opacity:.56;
}
body.ux-v2 :where(button,.primary,.outline,a.btn,a.button,.action,.tab):not(:disabled):active{
 transform:translateY(1px);
}
body.ux-v2 :where(a,button,input,select,textarea,[tabindex]):focus-visible,
body.qx-atmosphere :where(a,button,input,select,textarea,[tabindex]):focus-visible{
 outline:2px solid var(--ux4-accent)!important;outline-offset:3px!important;
}
body.ux-v2 :where(.metric,.stat,.stats strong,.metrics b,.number,.value,.footer-numbers strong){
 font-variant-numeric:tabular-nums;
}
body.ux-v2 :where(header,.top,.topbar,.city-top,.mast,.sidebar,.rail,.navbox){
 border-color:rgba(140,195,225,.21);
}
body.ux-v2 :where(.tag,.chip,.pill,.badge){
 border-radius:5px;letter-spacing:.06em;
}
body.ux-v2 :where(input,textarea,select,pre,code)::-webkit-scrollbar{width:9px;height:9px}
body.ux-v2 :where(input,textarea,select,pre,code)::-webkit-scrollbar-thumb{background:#497082}
/* City: high-altitude flight markings, kilometer grids, high contrast portals. */
body.ux-v2[data-ux-surface=city] :where(.world,.metropolis,.sky,.atlas,.space,.map-layout){
 position:relative;isolation:isolate;
}
body.ux-v2[data-ux-surface=city] :where(.world,.space,.atlas){
 background-image:
 radial-gradient(ellipse at 60% 34%,rgba(64,116,197,.18),transparent 64%),
 linear-gradient(rgba(117,168,223,.028) 1px,transparent 1px),
 linear-gradient(90deg,rgba(117,168,223,.028) 1px,transparent 1px);
 background-size:auto,36px 36px,36px 36px;
}
body.ux-v2[data-ux-surface=city] :where(.world,.metropolis,.space) :where(.district,.node,.portal){
 filter:drop-shadow(0 10px 28px rgba(0,3,25,.38));
}
body.ux-v2[data-ux-surface=city] :where(.district,.node,.portal):is(:hover,:focus-visible){
 filter:drop-shadow(0 0 19px rgba(148,204,255,.44));
}
body.ux-v2[data-ux-surface=city] :where(.inspector,.popover,.detail,.story-card){
 background-image:linear-gradient(145deg,rgba(38,67,101,.37),transparent 52%);
 box-shadow:0 24px 65px rgba(0,7,24,.46),inset 0 1px rgba(213,239,255,.12);
}
body.ux-v2[data-ux-surface=city] :where(.map-controls button,.district-nav button,.top-actions button){
 border-color:rgba(137,194,237,.3);
}
body.ux-v2[data-ux-surface=city] :where(.hero-copy,.intro){
 text-shadow:0 4px 32px rgba(1,7,22,.4);
}
/* Factory: signal lighting and authentic visible production cadence; NOT worker-status indicators. */
body.ux-v2[data-ux-surface=factory] :where(.upgrade-grid,.factory-grid,.worker,.station,.machines){
 isolation:isolate;
}
body.ux-v2[data-ux-surface=factory] :where(.upgrade-grid article,.module-grid article,.worker,.station,.panel){
 background-image:linear-gradient(142deg,rgba(234,156,66,.095),transparent 66%);
}
body.ux-v2[data-ux-surface=factory] :where(.upgrade-grid,.machines)::after{
 height:4px;background-size:340px 4px;
 background-image:repeating-linear-gradient(90deg,rgba(252,192,115,.02) 0 15px,#e7ac69 16px 30px,transparent 31px 66px);
 animation:ux4-belt 24s linear infinite;
}
@keyframes ux4-belt{to{background-position:340px 0}}
body.ux-v2[data-ux-surface=factory] :where(.monitor,.station,.panel,.upgrade-grid article){
 border-image:none;
}
body.ux-v2[data-ux-surface=factory] :where(.worker,.upgrade-grid article):hover{
 transform:translateY(-2px);
}
body.ux-v2[data-ux-surface=factory] :where(.worker .orb,.station .orb){
 border:1px solid rgba(252,202,137,.36);
}
/* Research: measurements, console borders and atlas-like depth. */
body.ux-v2[data-ux-surface=research] :where(.canvas-region,.atlas,.map-layout,.benchmark-grid,.chatHead){
 background-image:
 linear-gradient(rgba(139,235,210,.032) 1px,transparent 1px),
 linear-gradient(90deg,rgba(139,235,210,.032) 1px,transparent 1px);
 background-size:38px 38px;
}
body.ux-v2[data-ux-surface=research] :where(.canvas-region,.atlas,.benchmark-grid,.chatHead)::before{
 border-color:rgba(164,250,228,.18);
}
body.ux-v2[data-ux-surface=research] :where(.canvas-region,.map-layout,.atlas){
 box-shadow:inset 0 0 60px rgba(0,13,24,.18);
}
/* Creator districts: six nuanced material accents; still preserve existing colors/labels. */
body.ux-v2[data-ux-surface=studio] :where(.studio,.district,.mock-card,.feature-media,.card,.panel){
 border-color:rgba(204,160,251,.28);
}
body.ux-v2[data-ux-surface=studio] :where(.studio,.mock-card,.feature-media){
 background-image:radial-gradient(ellipse at 92% 0%,rgba(195,123,242,.10),transparent 57%);
}
body.ux-v2[data-ux-surface=studio] :where(.film,.music,.game,.design,.studio) :where(h2,h3){
 text-shadow:0 0 38px rgba(218,165,255,.08);
}
/* Systems: neon-accented edge-to-edge architecture and precise code texture. */
body.ux-v2[data-ux-surface=systems] :where(.machine,.system-preview,.vm-machine,.catalog,.ide-frame){
 isolation:isolate;
}
body.ux-v2[data-ux-surface=systems] :where(.catalog-item,.recommendations a,.stack-layer,.vm-screen,.ide-frame){
 border-color:rgba(144,219,224,.33);
}
body.ux-v2[data-ux-surface=systems] :where(.stack-layer,.iso-disc,.vm-screen){
 box-shadow:0 23px 65px rgba(0,15,33,.40),inset 0 1px rgba(235,255,255,.13);
}
body.ux-v2[data-ux-surface=systems] :where(#snippet,.code,.vm-manifest,pre,code){
 font-variant-ligatures:none;
}
/* Private planes: quiet high-precision console with no faux live data. */
body.ux-v2[data-ux-surface=private] :where(.sidebar,.rail,.navbox,aside.sidebar){
 background-image:radial-gradient(ellipse at 35% 4%,rgba(76,153,164,.18),transparent 50%),linear-gradient(155deg,#0b1b2b,#06111d);
 border-right:1px solid rgba(112,177,191,.24);
}
body.ux-v2[data-ux-surface=private] :where(.card,.panel,.block,.stat,.metric,.stage){
 background-image:linear-gradient(147deg,rgba(86,168,173,.065),transparent 66%);
}
body.ux-v2[data-ux-surface=private] :where(.topbar,.toolbar,.top,.identity,.breadcrumb,.sidebar header){
 font-variant-numeric:tabular-nums;
}
body.ux-v2[data-ux-surface=private] :where(.card,.panel,.stat,.metric):hover{
 border-color:rgba(147,233,210,.40);
}
/* A polished interactive command palette, without new privacy scopes. */
#qx-command-shell .qx-launcher{
 border-radius:12px!important;
 background:linear-gradient(145deg,#1f3c54,#0e1c30)!important;
 box-shadow:0 18px 44px rgba(0,4,19,.52),0 0 0 1px rgba(145,226,236,.10),inset 0 1px rgba(245,255,255,.12)!important;
}
#qx-command-shell .qx-launcher:hover{box-shadow:0 15px 55px rgba(0,12,25,.55),0 0 27px rgba(99,207,241,.17)!important}
#qx-command-shell .qx-command{
 border-radius:16px!important;
 background:linear-gradient(160deg,rgba(21,43,64,.99),rgba(7,17,31,.99))!important;
 box-shadow:0 50px 130px rgba(0,3,14,.87),0 0 70px rgba(80,163,195,.12),inset 0 1px rgba(231,255,255,.14)!important;
}
#qx-command-shell .qx-command-result:is(:hover,.qx-selected){border-left-color:var(--ux4-accent)}
/* Motion must never become an accessibility or CPU tax. */
@media(hover:none){
 body.ux-v2 :where(.card,.panel,.block,.station){backdrop-filter:none!important}
}
@media(max-width:700px){
 body.ux-v2 :where(.card,.panel,.block,.station){box-shadow:0 8px 25px rgba(0,5,15,.2)}
 body.ux-v2[data-ux-surface=factory] :where(.upgrade-grid,.machines)::after{animation-duration:45s}
 #qx-command-shell .qx-launcher{border-radius:9px!important}
}
@media(prefers-reduced-motion:reduce){
 body.ux-v2 *,body.ux-v2 *::before,body.ux-v2 *::after,body.qx-atmosphere *,body.qx-atmosphere *::before,body.qx-atmosphere *::after{
 animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;
 }
}

/* Battery/data friendly UI intensity states; these are presentation modes only. */
body.qx-atmosphere[data-qx-mode=quiet] :where(.card,.panel,.station,.block,.tile,.result-panel,.control-surface){
 box-shadow:inset 0 1px rgba(255,255,255,.04)!important;
 backdrop-filter:none!important;
}
body.qx-atmosphere[data-qx-mode=quiet] :where(.ux4-track-signal,.ux4-reactor-pylon,.ux4-signal,.ux4-reaction){
 animation:none!important;filter:none!important;
}
body.qx-atmosphere[data-qx-mode=cinematic]{
 --ux4-shadow:0 28px 86px rgba(0,4,18,.48),inset 0 1px rgba(235,251,255,.12);
}
@media(prefers-reduced-data:reduce){
 body.ux-v2 :where(.panel,.card,.station,.block){backdrop-filter:none!important;filter:none!important}
 body.ux-v2[data-ux-surface=factory] :where(.upgrade-grid,.machines)::after{animation:none!important}
}
@media(prefers-contrast:more){
 body.ux-v2 :where(.card,.panel,.station,.block,.tile,.result-panel,.control-surface){
 border-width:1px;border-color:var(--ux4-accent)!important;
 }
}