body{
background:
radial-gradient(circle at 8% 12%,rgba(39,104,255,.20),transparent 28%),
radial-gradient(circle at 88% 18%,rgba(105,70,255,.13),transparent 26%),
radial-gradient(circle at 65% 92%,rgba(0,190,170,.08),transparent 30%),
#080b11!important;
min-height:100vh;
}

body:before{
content:"";
position:fixed;
width:42vw;height:42vw;
left:-16vw;top:-18vw;
border-radius:50%;
background:rgba(50,105,255,.20);
filter:blur(110px);
pointer-events:none;
z-index:-1;
animation:nxmove 18s ease-in-out infinite alternate;
}

@keyframes nxmove{
to{transform:translate(12vw,9vh) scale(1.15)}
}

.widget{
background:rgba(15,20,29,.72)!important;
border:1px solid rgba(255,255,255,.075)!important;
border-radius:17px!important;
box-shadow:0 20px 55px rgba(0,0,0,.22);
backdrop-filter:blur(18px);
animation:nxup .45s ease both;
}

@keyframes nxup{
from{opacity:0;transform:translateY(9px)}
to{opacity:1;transform:none}
}

/* SYSTEM */

.nx-system .server{
padding:4px;
}

.nx-system .server-info{
margin-bottom:15px;
}

.nx-system .server-name{
font-size:1.15rem;
}

.nx-system .server-stats{
gap:12px;
}

.nx-system .server-stats>div{
padding:14px 16px;
border-radius:13px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.06);
}

.nx-system .progress-bar{
height:7px;
margin-top:8px;
border-radius:99px;
overflow:hidden;
}

/* APPS + ADMINISTRATION */

.nx-services .bookmarks-group ul{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}

.nx-services .bookmarks-group li{
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.06);
background:rgba(255,255,255,.025);
transition:.18s ease;
}

.nx-services .bookmarks-group li:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.065);
border-color:rgba(80,150,255,.30);
box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.nx-services .bookmarks-icon{
width:26px;
height:26px;
}

/* KOMPAKTER STATUS */

.nx-status{
padding-bottom:3px;
}

.nx-status .monitor-site{
border-radius:10px;
transition:.18s ease;
}

.nx-status .monitor-site:hover{
background:rgba(255,255,255,.045);
}

.nx-status .monitor-site-status-icon{
filter:drop-shadow(0 0 5px rgba(60,255,160,.35));
animation:nxpulse 3s ease-in-out infinite;
}

@keyframes nxpulse{
50%{transform:scale(1.12)}
}

/* DOCKER ABSICHTLICH KLEIN */

.nx-docker{
max-height:68vh;
overflow-y:auto;
opacity:.88;
}

.nx-docker .docker-container{
padding:6px 7px!important;
gap:7px!important;
font-size:.86rem;
border-radius:9px;
transition:.15s ease;
}

.nx-docker .docker-container:hover{
background:rgba(255,255,255,.045);
}

.nx-docker .docker-container-icon{
width:17px!important;
height:17px!important;
}

.nx-docker .docker-container-status-icon{
width:13px!important;
height:13px!important;
}

/* MOBILE */

@media(max-width:700px){
.nx-services .bookmarks-group ul{
grid-template-columns:1fr;
}
}

@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
}

/* ---------- V4 ---------- */

.nx-system .server{
display:grid;
grid-template-columns:minmax(230px,.8fr) 2fr;
align-items:center;
gap:25px;
}

.nx-system .server-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.nx-system .server-stats>div{
min-height:72px;
display:flex;
flex-direction:column;
justify-content:center;
}

.nx-updates .collapsible-container{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.nx-updates .collapsible-container>li{
padding:12px 14px;
border-radius:12px;
background:rgba(255,255,255,.025);
border:1px solid rgba(255,255,255,.06);
transition:.18s ease;
}

.nx-updates .collapsible-container>li:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.06);
border-color:rgba(80,150,255,.28);
}

.nx-docker{
max-height:56vh!important;
}

@media(max-width:850px){
.nx-system .server{
grid-template-columns:1fr;
}
.nx-updates .collapsible-container{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media(max-width:600px){
.nx-updates .collapsible-container{
grid-template-columns:1fr;
}
}

/* ===== SYSTEM BARS BIGGER + LOAD COLORS ===== */

.nx-system .server-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}

.nx-system .server-stats > div{
min-height:92px;
padding:16px 18px;
border-radius:14px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.07);
box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.nx-system .server-stats > div > *:first-child{
font-size:.82rem;
letter-spacing:.08em;
text-transform:uppercase;
opacity:.78;
}

.nx-system .progress-bar{
height:12px !important;
margin-top:12px !important;
border-radius:999px !important;
background:rgba(255,255,255,.08) !important;
overflow:hidden !important;
box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}

/* möglicher Füllbalken – mehrere Selektoren, damit es sicher greift */
.nx-system .progress-bar > div,
.nx-system .progress-bar > span,
.nx-system .progress-bar > *{
height:100% !important;
border-radius:999px !important;
background:linear-gradient(
  90deg,
  #22c55e 0%,
  #22c55e 55%,
  #eab308 72%,
  #f59e0b 86%,
  #ef4444 100%
) !important;
box-shadow:
  0 0 10px rgba(34,197,94,.18),
  inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Prozentwert größer */
.nx-system .server-stats .size-h3,
.nx-system .server-stats .size-h4,
.nx-system .server-stats strong{
font-size:1.08rem;
font-weight:700;
}

/* kleiner Glow je nach Kachel */
.nx-system .server-stats > div:hover{
transform:translateY(-1px);
transition:.15s ease;
background:rgba(255,255,255,.05);
}

/* mobil */
@media(max-width:850px){
  .nx-system .server-stats{
    grid-template-columns:1fr;
  }
}

/* ===== FINAL SYSTEM BAR TUNING ===== */

.nx-system .server{
  display:grid;
  grid-template-columns:minmax(260px,.95fr) 2.2fr;
  align-items:center;
  gap:26px;
}

.nx-system .server-stats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}

.nx-system .server-stats > div{
  min-height:102px !important;
  padding:16px 18px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.040) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 0 1px rgba(0,0,0,.05);
}

.nx-system .server-stats > div:hover{
  background:rgba(255,255,255,.055) !important;
  transform:translateY(-1px);
  transition:.15s ease;
}

.nx-system .server-stats > div > *:first-child{
  font-size:.82rem !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  opacity:.78 !important;
}

.nx-system .server-stats strong,
.nx-system .server-stats .size-h3,
.nx-system .server-stats .size-h4{
  font-size:1.10rem !important;
  font-weight:700 !important;
}

/* Progressbars möglichst aggressiv treffen */
.nx-system .progress-bar,
.nx-system [class*="progress-bar"],
.nx-system [class*="progress"]{
  height:12px !important;
  min-height:12px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  overflow:hidden !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35) !important;
  margin-top:12px !important;
}

.nx-system .progress-bar > *,
.nx-system [class*="progress-bar"] > *,
.nx-system [class*="progress"] > *{
  height:100% !important;
  min-height:12px !important;
  border-radius:999px !important;
  background:linear-gradient(
    90deg,
    #22c55e 0%,
    #22c55e 55%,
    #eab308 72%,
    #f59e0b 86%,
    #ef4444 100%
  ) !important;
  box-shadow:
    0 0 10px rgba(34,197,94,.18),
    inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* Bereichstitel etwas cleaner */
.size-h6,
.widget-header,
section h2,
section h3{
  letter-spacing:.08em;
}

@media (max-width: 900px){
  .nx-system .server{
    grid-template-columns:1fr !important;
  }

  .nx-system .server-stats{
    grid-template-columns:1fr !important;
  }
}