/* CYBERPUNK 2045 // CENTRAL HUB */
/* ========================================================= 40. NIGHT CITY CENTRAL HUB — V1 ========================================================= */
/* ========================================================= 40A. SCREEN SYSTEM ========================================================= */
.screen-hidden{display:none !important;}
.hub-screen{position:relative;flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(210px,270px) minmax(520px,1fr) minmax(210px,270px);gap:18px;padding:22px 24px 54px;isolation:isolate;background:radial-gradient(circle at 50% 42%,rgba(0,240,255,.075),transparent 24%),radial-gradient(circle at 50% 62%,rgba(255,43,214,.045),transparent 34%),linear-gradient(180deg,#030a10 0%,#02070b 48%,#010305 100%);}
/* ========================================================= 40B. BACKGROUND ========================================================= */
.hub-background{position:absolute;inset:0;z-index:-5;overflow:hidden;pointer-events:none;}
/* atmospheric cyan light */
.hub-background::before{content:"";position:absolute;left:50%;top:16%;width:760px;height:520px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,240,255,.09) 0%,rgba(0,169,199,.035) 34%,transparent 70%);filter:blur(12px);animation:hubAtmosphere 8s ease-in-out infinite;}
/* magenta secondary glow */
.hub-background::after{content:"";position:absolute;right:7%;top:15%;width:420px;height:420px;background:radial-gradient(circle,rgba(255,43,214,.055),transparent 68%);filter:blur(20px);}
/* ========================================================= 40C. PROCEDURAL NIGHT CITY SKYLINE ========================================================= */
.hub-skyline{position:absolute;left:0;right:0;pointer-events:none;}
/* distant buildings */
.hub-skyline-back{bottom:18%;height:36%;opacity:.20;background:linear-gradient(90deg,transparent 0 2%,#0a2530 2% 5%,transparent 5% 7%,#071b24 7% 11%,transparent 11% 13%,#0a2833 13% 16%,transparent 16% 19%,#061821 19% 23%,transparent 23% 25%,#092731 25% 31%,transparent 31% 33%,#071d26 33% 37%,transparent 37% 39%,#0b2b36 39% 44%,transparent 44% 46%,#071a22 46% 51%,transparent 51% 54%,#092631 54% 60%,transparent 60% 63%,#071b24 63% 68%,transparent 68% 70%,#0a2833 70% 75%,transparent 75% 78%,#061821 78% 83%,transparent 83% 86%,#09242e 86% 91%,transparent 91% 94%,#071a22 94% 98%,transparent 98%);clip-path:polygon(0 100%,0 58%,3% 58%,3% 28%,5% 28%,5% 65%,9% 65%,9% 40%,11% 40%,11% 70%,15% 70%,15% 18%,17% 18%,17% 55%,22% 55%,22% 35%,25% 35%,25% 62%,30% 62%,30% 12%,33% 12%,33% 48%,38% 48%,38% 27%,41% 27%,41% 68%,46% 68%,46% 5%,49% 5%,49% 54%,54% 54%,54% 22%,58% 22%,58% 64%,63% 64%,63% 33%,66% 33%,66% 57%,71% 57%,71% 16%,74% 16%,74% 52%,80% 52%,80% 31%,83% 31%,83% 69%,88% 69%,88% 21%,91% 21%,91% 60%,96% 60%,96% 39%,100% 39%,100% 100%);}
/* foreground skyline */
.hub-skyline-front{bottom:10%;height:29%;opacity:.36;background:repeating-linear-gradient(90deg,#03141b 0,#03141b 38px,#041a22 39px,#041a22 61px,#020b10 62px,#020b10 91px);clip-path:polygon(0 100%,0 66%,5% 66%,5% 35%,8% 35%,8% 75%,13% 75%,13% 48%,17% 48%,17% 72%,22% 72%,22% 25%,25% 25%,25% 64%,31% 64%,31% 43%,35% 43%,35% 79%,40% 79%,40% 52%,44% 52%,44% 70%,50% 70%,50% 31%,54% 31%,54% 73%,60% 73%,60% 46%,64% 46%,64% 67%,70% 67%,70% 29%,74% 29%,74% 74%,80% 74%,80% 49%,84% 49%,84% 69%,90% 69%,90% 38%,94% 38%,94% 72%,100% 72%,100% 100%);box-shadow:0 -1px 0 rgba(0,240,255,.15);}
/* ========================================================= 40D. PERSPECTIVE GRID ========================================================= */
.hub-ground-grid{position:absolute;left:-20%;right:-20%;bottom:-19%;height:56%;opacity:.18;transform:perspective(500px) rotateX(63deg);transform-origin:center bottom;background-image:linear-gradient(rgba(0,240,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.25) 1px,transparent 1px);background-size:48px 34px;mask-image:linear-gradient(to top,#000 18%,transparent 90%);}
/* ========================================================= 40E. VIGNETTE / SCAN ========================================================= */
.hub-vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 28%,rgba(0,0,0,.25) 65%,rgba(0,0,0,.72) 100%);}
.hub-scanline{position:absolute;z-index:8;left:0;top:-12%;width:100%;height:8%;opacity:.65;background:linear-gradient(180deg,transparent,rgba(0,240,255,.05),transparent);animation:hubScan 9s linear infinite;}
/* ========================================================= 40F. MICRO LABELS ========================================================= */
.hub-sector-label{position:absolute;z-index:3;top:13px;color:rgba(0,240,255,.32);font-family:Consolas,monospace;font-size:7px;letter-spacing:2px;pointer-events:none;}
.hub-sector-label-left{left:25px;}
.hub-sector-label-right{right:25px;color:rgba(255,43,214,.34);}
/* ========================================================= 41. SIDE TERMINALS ========================================================= */
.hub-terminal{position:relative;z-index:10;align-self:center;width:100%;min-height:390px;padding:17px 16px;border:1px solid rgba(0,240,255,.15);background:linear-gradient(180deg,rgba(4,15,22,.80),rgba(2,7,11,.70));backdrop-filter:blur(7px);box-shadow:inset 0 0 35px rgba(0,240,255,.025),0 15px 50px rgba(0,0,0,.25);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));animation:hubTerminalIn .65s ease both;}
.hub-terminal-right{animation-delay:.12s;}
.hub-terminal::before{content:"";position:absolute;left:0;top:0;width:38%;height:2px;background:var(--cyan);box-shadow:0 0 12px rgba(0,240,255,.6);}
.hub-terminal-right::before{left:auto;right:0;background:var(--pink);box-shadow:0 0 12px rgba(255,43,214,.5);}
.hub-terminal-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid rgba(0,240,255,.12);}
.hub-terminal-header span{color:#82b4bd;font-size:8px;font-weight:800;letter-spacing:1.6px;}
.hub-terminal-header strong{color:var(--cyan);font-family:Consolas,monospace;font-size:7px;letter-spacing:1px;}
.hub-user-symbol{display:grid;place-items:center;height:112px;}
.hub-user-ring{position:relative;display:grid;place-items:center;width:70px;height:70px;border:1px solid rgba(0,240,255,.34);border-radius:50%;box-shadow:inset 0 0 22px rgba(0,240,255,.08),0 0 20px rgba(0,240,255,.08);animation:hubUserPulse 3s ease-in-out infinite;}
.hub-user-ring::before{content:"";position:absolute;inset:7px;border:1px dashed rgba(0,240,255,.22);border-radius:50%;animation:hubSpin 14s linear infinite;}
.hub-user-ring span{color:var(--cyan);font-size:27px;text-shadow:0 0 14px rgba(0,240,255,.6);}
.hub-terminal-code{color:var(--cyan);font-family:Consolas,monospace;font-size:7px;letter-spacing:1.5px;}
.hub-terminal-name{margin-top:7px;color:#eaffff;font-size:12px;font-weight:900;letter-spacing:1.2px;}
.hub-terminal-line{height:1px;margin:15px 0;background:linear-gradient(90deg,rgba(0,240,255,.4),rgba(0,240,255,.03));}
.hub-terminal-data,.hub-live-data{display:flex;flex-direction:column;gap:9px;}
.hub-terminal-data>div,.hub-live-data>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:7px;border-bottom:1px solid rgba(0,240,255,.06);}
.hub-terminal-data span,.hub-live-data span{color:#547981;font-size:7px;letter-spacing:1px;}
.hub-terminal-data strong,.hub-live-data strong{color:#bde9ed;font-family:Consolas,monospace;font-size:7px;font-weight:700;text-align:right;}
.hub-warning{color:var(--yellow)!important;}
.hub-online{color:var(--cyan)!important;text-shadow:0 0 7px rgba(0,240,255,.35);}
/* ========================================================= 41B. MINI ACTION ========================================================= */
.hub-mini-action{position:relative;width:100%;height:35px;margin-top:17px;border:1px solid rgba(0,240,255,.22);background:rgba(0,240,255,.035);color:#6d9da6;cursor:pointer;font-size:7px;font-weight:800;letter-spacing:1.5px;transition:color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.hub-mini-action:hover{color:#eaffff;border-color:var(--cyan);background:rgba(0,240,255,.10);box-shadow:inset 0 0 20px rgba(0,240,255,.06),0 0 12px rgba(0,240,255,.08);}
/* ========================================================= 41C. NETWORK PULSE ========================================================= */
.hub-network-pulse{display:flex;align-items:flex-end;height:80px;padding:14px 0 10px;}
.hub-pulse-bar{display:flex;align-items:flex-end;width:100%;height:44px;gap:5px;}
.hub-pulse-bar i{flex:1;min-width:3px;background:linear-gradient(180deg,var(--cyan),rgba(0,240,255,.08));box-shadow:0 0 6px rgba(0,240,255,.22);transform-origin:center bottom;animation:hubEqualizer 1.4s ease-in-out infinite;}
.hub-pulse-bar i:nth-child(1){height:30%;animation-delay:-.1s;}
.hub-pulse-bar i:nth-child(2){height:75%;animation-delay:-.6s;}
.hub-pulse-bar i:nth-child(3){height:45%;animation-delay:-.3s;}
.hub-pulse-bar i:nth-child(4){height:90%;animation-delay:-.8s;}
.hub-pulse-bar i:nth-child(5){height:58%;animation-delay:-.2s;}
.hub-pulse-bar i:nth-child(6){height:80%;animation-delay:-.7s;}
.hub-pulse-bar i:nth-child(7){height:36%;animation-delay:-.4s;}
.hub-pulse-bar i:nth-child(8){height:67%;animation-delay:-.9s;}
/* ========================================================= 41D. SYSTEM FEED ========================================================= */
.hub-feed{font-family:Consolas,monospace;}
.hub-feed-title{margin-bottom:11px;color:#658e96;font-size:7px;letter-spacing:1.6px;}
.hub-feed p{margin:7px 0;color:#5f8d95;font-size:7px;line-height:1.4;letter-spacing:.5px;}
.hub-feed p span{margin-right:6px;color:var(--cyan);text-shadow:0 0 6px var(--cyan);}
.hub-feed .hub-feed-locked{color:#786f46;}
.hub-feed .hub-feed-locked span{color:var(--yellow);text-shadow:0 0 6px rgba(247,255,0,.45);}
/* ========================================================= 42. CENTRAL NETWORK ========================================================= */
.hub-network{position:relative;z-index:6;align-self:stretch;min-width:0;min-height:0;animation:hubNetworkIn .8s ease both;}
.hub-network-title{position:absolute;z-index:20;top:4%;left:50%;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);text-align:center;pointer-events:none;}
.hub-network-title small{color:var(--cyan);font-size:7px;letter-spacing:4px;}
.hub-network-title strong{margin-top:5px;color:#eaffff;font-size:clamp(15px,1.4vw,21px);font-style:italic;font-weight:900;letter-spacing:2px;text-shadow:0 0 15px rgba(0,240,255,.12);}
.hub-network-title span{margin-top:5px;color:var(--yellow);font-family:Consolas,monospace;font-size:7px;letter-spacing:2px;}
/* ========================================================= 43. CENTRAL CORE ========================================================= */
.hub-core{position:absolute;z-index:10;left:50%;top:48%;width:clamp(190px,20vw,270px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;transition:filter .25s ease,transform .25s ease;}
.hub-core::before{content:"";position:absolute;inset:21%;border-radius:50%;background:radial-gradient(circle,rgba(0,240,255,.16),rgba(0,240,255,.035) 42%,transparent 72%);box-shadow:0 0 55px rgba(0,240,255,.08);animation:hubCoreGlow 3.2s ease-in-out infinite;}
.hub-core-orbit{position:absolute;border-radius:50%;pointer-events:none;}
.hub-core-orbit-a{inset:0;border:1px solid rgba(0,240,255,.27);border-top-color:var(--cyan);border-right-color:transparent;animation:hubSpin 16s linear infinite;}
.hub-core-orbit-b{inset:10%;border:1px dashed rgba(255,43,214,.24);border-left-color:var(--pink);animation:hubSpinReverse 11s linear infinite;}
.hub-core-orbit-c{inset:22%;border:1px solid rgba(247,255,0,.17);border-bottom-color:var(--yellow);animation:hubSpin 8s linear infinite;}
.hub-core-cross{position:absolute;left:50%;top:50%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,240,255,.26),transparent);}
.hub-core-cross-a{width:126%;height:1px;transform:translate(-50%,-50%);}
.hub-core-cross-b{width:126%;height:1px;transform:translate(-50%,-50%) rotate(90deg);}
.hub-core-center{position:absolute;z-index:6;inset:29%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(0,240,255,.32);border-radius:50%;background:rgba(2,12,17,.88);box-shadow:inset 0 0 28px rgba(0,240,255,.10),0 0 22px rgba(0,240,255,.06);backdrop-filter:blur(5px);}
.hub-core-center small{color:#59838b;font-size:6px;letter-spacing:2px;}
.hub-core-center>strong{margin:4px 0;color:#eaffff;font-family:Consolas,monospace;font-size:clamp(14px,1.5vw,20px);letter-spacing:1px;text-shadow:0 0 12px rgba(0,240,255,.35);}
.hub-core-center>strong span{color:var(--yellow);}
.hub-core-status{display:flex;align-items:center;gap:5px;color:var(--cyan);font-size:5px;letter-spacing:1px;}
.hub-core-status i{width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 7px var(--cyan);animation:pulse 1.5s infinite;}
.hub-core-coordinate{position:absolute;color:rgba(0,240,255,.35);font-family:Consolas,monospace;font-size:5px;letter-spacing:1px;}
.hub-coordinate-a{left:5%;top:48%;}
.hub-coordinate-b{right:0;bottom:27%;}
/* ========================================================= 44. NETWORK LINKS ========================================================= */
.hub-link{position:absolute;z-index:3;left:50%;top:48%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,240,255,.34),transparent);box-shadow:0 0 6px rgba(0,240,255,.12);transform-origin:left center;opacity:.58;}
.hub-link::after{content:"";position:absolute;top:-1px;width:28px;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);filter:drop-shadow(0 0 4px var(--cyan));animation:hubDataTravel 2.4s linear infinite;}
.hub-link-top{width:22%;height:1px;transform:rotate(-90deg);}
.hub-link-bottom{width:22%;height:1px;transform:rotate(90deg);}
.hub-link-left{width:28%;height:1px;transform:rotate(180deg);}
.hub-link-right{width:28%;height:1px;}
/* ========================================================= 45. HUB NODES ========================================================= */
.hub-node{position:absolute;z-index:18;display:flex;align-items:center;gap:10px;min-width:178px;padding:10px 12px;border:1px solid rgba(0,240,255,.13);background:linear-gradient(90deg,rgba(2,12,17,.90),rgba(2,8,12,.72));cursor:pointer;outline:none;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,opacity .2s ease;}
.hub-node:hover,.hub-node:focus{border-color:rgba(0,240,255,.65);background:linear-gradient(90deg,rgba(0,240,255,.13),rgba(2,10,15,.86));box-shadow:inset 0 0 24px rgba(0,240,255,.05),0 0 18px rgba(0,240,255,.08);transform:translateY(-2px);}
.hub-node-online{border-color:rgba(247,255,0,.22);}
.hub-node-online:hover,.hub-node-online:focus{border-color:var(--yellow);box-shadow:inset 0 0 25px rgba(247,255,0,.04),0 0 18px rgba(247,255,0,.09);}
.hub-node-icon{display:grid;place-items:center;flex:0 0 35px;width:35px;height:35px;border:1px solid rgba(0,240,255,.25);color:var(--cyan);font-size:17px;text-shadow:0 0 9px rgba(0,240,255,.65);}
.hub-node-online .hub-node-icon{border-color:rgba(247,255,0,.28);color:var(--yellow);text-shadow:0 0 9px rgba(247,255,0,.55);}
.hub-node-copy{display:flex;flex-direction:column;min-width:0;}
.hub-node-copy small{color:#4e727a;font-size:5px;letter-spacing:1.2px;}
.hub-node-copy strong{margin:2px 0;color:#dffcff;font-size:10px;letter-spacing:1.3px;}
.hub-node-copy span{color:#53777f;font-family:Consolas,monospace;font-size:5px;letter-spacing:.5px;white-space:nowrap;}
.hub-node-top{left:50%;top:16%;transform:translateX(-50%);}
.hub-node-top:hover,.hub-node-top:focus{transform:translateX(-50%) translateY(-2px);}
.hub-node-bottom{left:50%;bottom:15%;transform:translateX(-50%);}
.hub-node-bottom:hover,.hub-node-bottom:focus{transform:translateX(-50%) translateY(-2px);}
.hub-node-left{left:3%;top:45%;}
.hub-node-right{right:3%;top:45%;}
/* ========================================================= 46. MODULE PREVIEW ========================================================= */
.hub-module-preview{position:absolute;z-index:15;left:50%;bottom:3%;width:min(420px,66%);transform:translateX(-50%);padding:9px 14px;border-top:1px solid rgba(0,240,255,.13);text-align:center;background:linear-gradient(90deg,transparent,rgba(2,10,15,.55),transparent);pointer-events:none;}
.hub-module-preview small{display:block;color:var(--cyan);font-size:5px;letter-spacing:2px;}
.hub-module-preview strong{display:block;margin-top:3px;color:#eaffff;font-size:9px;letter-spacing:1.5px;}
.hub-module-preview p{margin:4px auto;max-width:360px;color:#63878e;font-size:6px;line-height:1.45;letter-spacing:.5px;}
.hub-module-preview>span{color:var(--yellow);font-family:Consolas,monospace;font-size:5px;letter-spacing:1px;}
/* ========================================================= 47. LOWER INTERFACE ========================================================= */
.hub-lower-interface{position:absolute;z-index:20;left:24px;right:24px;bottom:12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;pointer-events:none;}
.hub-lower-interface>div{display:flex;flex-direction:column;}
.hub-lower-interface>div:last-child{align-items:flex-end;}
.hub-lower-interface small{color:#41636a;font-size:5px;letter-spacing:1px;}
.hub-lower-interface strong{margin-top:2px;color:#80abb2;font-family:Consolas,monospace;font-size:7px;letter-spacing:1px;}
.hub-lower-center{flex-direction:row!important;align-items:center;gap:10px;color:rgba(0,240,255,.32);font-family:Consolas,monospace;font-size:5px;letter-spacing:1.4px;}
.hub-lower-center span{width:50px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,240,255,.32));}
.hub-lower-center span:last-child{transform:scaleX(-1);}
/* ========================================================= 49. INTERACTION STATES ========================================================= */
.hub-screen.module-hover .hub-core{filter:brightness(1.22);transform:translate(-50%,-50%) scale(1.025);}
.hub-screen.module-holomap .hub-core-orbit-a,.hub-screen.module-holomap .hub-core-orbit-c{border-color:rgba(247,255,0,.42);border-top-color:var(--yellow);}
.hub-screen.module-character .hub-core-orbit-a{border-color:rgba(0,240,255,.48);}
.hub-screen.module-database .hub-core-orbit-b{border-color:rgba(255,43,214,.45);}
.hub-screen.module-network .hub-core-center{box-shadow:inset 0 0 35px rgba(0,240,255,.14),0 0 35px rgba(0,240,255,.12);}
/* ========================================================= 51. HUB ANIMATIONS ========================================================= */
@keyframes hubSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes hubSpinReverse{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}
@keyframes hubCoreGlow{0%,100%{opacity:.60;transform:scale(.96);}50%{opacity:1;transform:scale(1.05);}}
@keyframes hubUserPulse{0%,100%{box-shadow:inset 0 0 22px rgba(0,240,255,.06),0 0 14px rgba(0,240,255,.05);}
                        50%{box-shadow:inset 0 0 28px rgba(0,240,255,.12),0 0 25px rgba(0,240,255,.12);}}
@keyframes hubDataTravel{from{left:0%;opacity:0;}12%{opacity:1;}88%{opacity:1;}to{left:calc(100% - 28px);opacity:0;}}
@keyframes hubEqualizer{0%,100%{transform:scaleY(.45);opacity:.45;}50%{transform:scaleY(1);opacity:1;}}
@keyframes hubScan{from{transform:translateY(-150%);}to{transform:translateY(1450%);}}
@keyframes hubAtmosphere{0%,100%{opacity:.55;transform:translateX(-50%) scale(.96);}50%{opacity:1;transform:translateX(-50%) scale(1.04);}}
@keyframes hubTerminalIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes hubNetworkIn{from{opacity:0;transform:scale(.98);}to{opacity:1;transform:scale(1);}}
/* ========================================================= 52. HUB RESPONSIVE ========================================================= */
@media (max-width:1200px){
.hub-screen{grid-template-columns:205px minmax(470px,1fr) 205px;gap:10px;padding-left:14px;padding-right:14px;}
.hub-node{min-width:155px;padding:8px 9px;}
.hub-node-copy span{display:none;}
.hub-node-left{left:0;}
.hub-node-right{right:0;}
}
@media (max-width:950px){
.hub-screen{grid-template-columns:1fr;padding:12px 12px 46px;}
.hub-terminal{display:none;}
.hub-network{width:100%;height:100%;}
.hub-node-left{left:5%;}
.hub-node-right{right:5%;}
.hub-module-preview{width:min(420px,78%);}
}
@media (max-width:650px){
.hub-core{width:175px;}
.hub-node{min-width:118px;padding:7px;}
.hub-node-icon{flex-basis:29px;width:29px;height:29px;font-size:14px;}
.hub-node-copy small,.hub-node-copy span{display:none;}
.hub-node-copy strong{font-size:8px;}
.hub-node-left{left:1%;}
.hub-node-right{right:1%;}
.hub-network-title strong{font-size:14px;}
.hub-lower-center{display:none;}
.hub-lower-interface{grid-template-columns:1fr 1fr;}
}