/* ===========================================================================
   Nexus-Servers Kundenbereich
   Eigene Oberflaeche statt WHMCS-Vorlage: feste Seitenleiste, Kopfzeile,
   Karten. Alles unter .nx-app, damit nichts in den oeffentlichen Seiten
   danebengeht. Dunkles Design ist Standard, hell wird ueber
   body[data-cc-theme="dark"] umgeschaltet wie auf der Website.
   =========================================================================== */

.nx-app {
   /* Schrift für Konsole und Dateieditor */
   --nx-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Cascadia Mono", Menlo, Consolas,
      "DejaVu Sans Mono", "Liberation Mono", monospace;

   /* Helles Design */
   --nx-bg: #eef2f8;
   --nx-surface: #ffffff;
   --nx-surface-2: #f5f8fd;
   --nx-line: rgba(11, 22, 63, .10);
   --nx-text: #0b163f;
   --nx-muted: #667287;
   --nx-accent: #2563eb;
   --nx-accent-soft: rgba(37, 99, 235, .10);
   --nx-ok: #128a5e;
   --nx-warn: #b26a00;
   --nx-bad: #c92c48;
   --nx-info: #0a7ea4;
   --nx-shadow: 0 10px 30px -20px rgba(11, 22, 63, .55);
   --nx-side: 254px;

   background: var(--nx-bg);
   color: var(--nx-text);
   min-height: 100vh;
}
body.nx-app[data-cc-theme*="dark"] {
   --nx-bg: #00111c;
   --nx-surface: #04202f;
   --nx-surface-2: #011a27;
   --nx-line: rgba(255, 255, 255, .09);
   --nx-text: #f2f7fb;
   --nx-muted: #8aa3b5;
   --nx-accent: #2196f3;
   --nx-accent-soft: rgba(33, 150, 243, .14);
   --nx-ok: #2fcea5;
   --nx-warn: #f0a020;
   --nx-bad: #ff6b83;
   --nx-info: #4fc3f7;
   --nx-shadow: 0 22px 50px -34px rgba(0, 0, 0, .85);
}

/* Das alte Theme faerbt pauschal jedes p, span, label und li ein. Im
   Kundenbereich soll stattdessen die Farbe des jeweiligen Bausteins gelten.
   Farbregel des Themes hier also abschalten. */
.nx-app p, .nx-app span, .nx-app cite, .nx-app label, .nx-app li, .nx-app small, .nx-app b, .nx-app strong {
   color: inherit;
}

.nx-app,
.nx-app .nx-content { background: var(--nx-bg); color: var(--nx-text); }
.nx-app a { color: var(--nx-accent); }
.nx-app a:hover { color: var(--nx-accent); }

/* Bausteine, die selbst Links sind, tragen ihre eigene Farbe und sollen nicht
   wie ein Textlink aussehen. */
.nx-app a.nx-nav-item,
.nx-app a.nx-tab,
.nx-app a.nx-credit,
.nx-app a.nx-list-row,
.nx-app a.nx-tile,
.nx-app a.nx-file-row,
.nx-app a.nx-server-media,
.nx-app a.nx-icon-btn,
.nx-app a.nx-user-chip,
.nx-app a.nx-file-name,
.nx-app a.nx-inst-card,
.nx-app a.dropdown-item,
.nx-app a.btn { color: var(--nx-text); }
.nx-app a.nx-nav-item.is-active,
.nx-app a.nx-tab.is-active,
.nx-app a.nx-subnav-item.is-active { color: var(--nx-accent); }
.nx-app a.nx-subnav-item { color: var(--nx-muted); }
.nx-app a.nx-subnav-item:hover { color: var(--nx-text); }
.nx-app .nx-crumbs a { color: var(--nx-muted); }
.nx-app .nx-crumbs a:hover { color: var(--nx-accent); }
.nx-app a.btn-primary { color: #fff; }
.nx-app a.nx-file-name:hover { color: var(--nx-accent); }
.nx-app h1, .nx-app h2, .nx-app h3, .nx-app h4, .nx-app h5, .nx-app h6 { color: var(--nx-text); }

/* ---------------------------------------------------------------- Geruest */
.nx-shell { display: flex; min-height: 100vh; }
.nx-side {
   position: fixed; top: 0; bottom: 0; left: 0; width: var(--nx-side); z-index: 1030;
   display: flex; flex-direction: column;
   background: var(--nx-surface); border-right: 1px solid var(--nx-line);
}
.nx-main { flex: 1 1 auto; min-width: 0; margin-left: var(--nx-side); display: flex; flex-direction: column; }

/* Marke */
.nx-brand {
   display: flex; align-items: center; gap: .65rem; padding: 1.15rem 1.15rem 1rem;
   text-decoration: none; border-bottom: 1px solid var(--nx-line);
}
.nx-brand:hover { text-decoration: none; }
.nx-brand-mark {
   width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
   background: linear-gradient(140deg, var(--nx-accent), #6f42c1); color: #fff; font-weight: 700;
}
.nx-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.nx-brand-name { font-weight: 600; color: var(--nx-text); font-size: .98rem; }
.nx-brand-sub { font-size: .74rem; color: var(--nx-muted); }

/* Navigation */
.nx-nav { flex: 1 1 auto; overflow-y: auto; padding: .9rem .75rem; }
.nx-nav-label {
   display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
   color: var(--nx-muted); padding: .5rem .6rem .35rem; margin-top: .4rem;
}
.nx-nav-item {
   position: relative; display: flex; align-items: center; gap: .7rem;
   padding: .58rem .65rem; margin-bottom: .15rem; border-radius: 10px;
   color: var(--nx-text); text-decoration: none; font-size: .93rem;
   transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nx-nav-item:hover { background: var(--nx-accent-soft); text-decoration: none; color: var(--nx-text); transform: translateX(2px); }
.nx-nav-item .bi { font-size: 1.05rem; color: var(--nx-muted) !important; flex: 0 0 auto; transition: color .18s ease; }
.nx-nav-item.is-active { background: var(--nx-accent-soft); color: var(--nx-accent); font-weight: 600; }
.nx-nav-item.is-active .bi { color: var(--nx-accent) !important; }
.nx-nav-item.is-active::before {
   content: ""; position: absolute; left: -.75rem; top: 20%; bottom: 20%; width: 3px;
   border-radius: 0 3px 3px 0; background: var(--nx-accent);
}
.nx-nav-count {
   margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
   display: grid; place-items: center; font-size: .72rem; font-weight: 600;
   background: var(--nx-bad); color: #fff !important;
}
.nx-nav-count.is-quiet { background: var(--nx-accent-soft); color: var(--nx-accent) !important; }

/* Guthaben-Karte unten */
.nx-side-foot { padding: .75rem; border-top: 1px solid var(--nx-line); }
.nx-credit {
   display: block; padding: .8rem .9rem; border-radius: 12px; text-decoration: none;
   background: linear-gradient(135deg, var(--nx-accent-soft), transparent);
   border: 1px solid var(--nx-line);
   transition: border-color .2s ease, transform .2s ease;
}
.nx-credit:hover { text-decoration: none; border-color: var(--nx-accent); transform: translateY(-2px); }
.nx-credit-label { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--nx-muted); }
.nx-credit-label .bi { color: var(--nx-accent) !important; }
.nx-credit-value { display: block; font-size: 1.3rem; font-weight: 700; color: var(--nx-text); line-height: 1.2; margin-top: .15rem; }
.nx-credit-hint { display: block; font-size: .76rem; color: var(--nx-accent); margin-top: .1rem; }

/* ---------------------------------------------------------------- Kopfzeile */
.nx-topbar {
   position: sticky; top: 0; z-index: 1020;
   display: flex; align-items: center; gap: 1rem; padding: .85rem 1.5rem;
   background: color-mix(in srgb, var(--nx-bg) 82%, transparent);
   backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px);
   border-bottom: 1px solid var(--nx-line);
}
.nx-topbar-title { display: flex; flex-direction: column; gap: .1rem; min-width: 0; margin-right: auto; }
.nx-topbar-crumb { font-size: .76rem; color: var(--nx-muted); }
.nx-topbar-crumb a { color: var(--nx-muted); text-decoration: none; }
.nx-topbar-crumb a:hover { color: var(--nx-accent); }
.nx-topbar-h { font-size: 1.22rem; font-weight: 600; color: var(--nx-text); line-height: 1.2; margin: 0; }
.nx-topbar-actions { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }

.nx-icon-btn {
   position: relative; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--nx-line);
   background: var(--nx-surface); color: var(--nx-text); display: grid; place-items: center;
   transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.nx-icon-btn:hover { border-color: var(--nx-accent); transform: translateY(-1px); color: var(--nx-text); }
.nx-icon-btn .bi { font-size: 1.02rem; color: inherit !important; }
.nx-icon-dot {
   position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px;
   border-radius: 999px; background: var(--nx-bad); color: #fff !important;
   font-size: .64rem; font-weight: 700; display: grid; place-items: center;
   border: 2px solid var(--nx-surface);
}
.nx-user-chip {
   display: flex; align-items: center; gap: .55rem; padding: .3rem .7rem .3rem .35rem;
   border-radius: 999px; border: 1px solid var(--nx-line); background: var(--nx-surface);
   color: var(--nx-text); text-decoration: none; transition: border-color .2s ease;
}
.nx-user-chip:hover { border-color: var(--nx-accent); color: var(--nx-text); text-decoration: none; }
.nx-avatar {
   width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
   background: linear-gradient(140deg, var(--nx-accent), #6f42c1); color: #fff; font-size: .8rem; font-weight: 700;
}
.nx-user-name { font-size: .88rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aufklappmenues */
.nx-app .dropdown-menu {
   background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 13px;
   box-shadow: var(--nx-shadow); padding: .4rem; min-width: 232px;
}
.nx-app .dropdown-item {
   display: flex; align-items: center; gap: .55rem; border-radius: 9px; padding: .5rem .6rem;
   color: var(--nx-text); font-size: .9rem;
}
.nx-app .dropdown-item:hover, .nx-app .dropdown-item:focus { background: var(--nx-accent-soft); color: var(--nx-text); }
.nx-app .dropdown-item .bi { color: var(--nx-muted) !important; }
.nx-app .dropdown-item.is-danger { color: var(--nx-bad); }
.nx-app .dropdown-item.is-danger .bi { color: var(--nx-bad) !important; }
.nx-app .dropdown-divider { border-color: var(--nx-line); margin: .35rem .2rem; }
.nx-drop-head { padding: .5rem .6rem .3rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-muted); }

/* Benachrichtigungen */
.nx-alert-item { display: flex; gap: .55rem; padding: .55rem .6rem; border-radius: 9px; text-decoration: none; color: var(--nx-text); }
.nx-alert-item:hover { background: var(--nx-accent-soft); text-decoration: none; color: var(--nx-text); }
.nx-alert-item .bi { flex: 0 0 auto; margin-top: .1rem; }
.nx-alert-item.is-danger .bi { color: var(--nx-bad) !important; }
.nx-alert-item.is-warning .bi { color: var(--nx-warn) !important; }
.nx-alert-item.is-info .bi { color: var(--nx-info) !important; }
.nx-alert-text { font-size: .88rem; line-height: 1.4; }
.nx-alert-empty { padding: .8rem .6rem; font-size: .88rem; color: var(--nx-muted); text-align: center; }

/* ---------------------------------------------------------------- Inhalt */
.nx-content { flex: 1 1 auto; padding: 1.5rem; }
.nx-content > .container-fluid { padding: 0; }
.nx-wrap { max-width: 1180px; }

/* Karten */
.nx-card {
   background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 16px;
   box-shadow: var(--nx-shadow); overflow: hidden;
}
.nx-card + .nx-card { margin-top: 1rem; }
.nx-card-head {
   display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
   padding: 1rem 1.25rem; border-bottom: 1px solid var(--nx-line);
}
.nx-card-title { font-size: 1.02rem; font-weight: 600; color: var(--nx-text); margin: 0; display: flex; align-items: center; gap: .5rem; }
.nx-card-title .bi { color: var(--nx-accent) !important; }
.nx-card-sub { font-size: .84rem; color: var(--nx-muted); }
.nx-card-actions { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.nx-card-body { padding: 1.25rem; }
.nx-card-body-flush { padding: 0; }

/* Abschnittsueberschrift */
.nx-section-head { display: flex; align-items: center; gap: .75rem; margin: 1.75rem 0 .85rem; flex-wrap: wrap; }
.nx-section-head:first-child { margin-top: 0; }
.nx-section-title { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--nx-text); }
.nx-section-link { margin-left: auto; font-size: .86rem; display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; }
.nx-section-link:hover { text-decoration: none; }
.nx-section-link .bi { transition: transform .2s ease; }
.nx-section-link:hover .bi { transform: translateX(3px); }

/* ---------------------------------------------------------------- Buttons */
.nx-app .btn { border-radius: 10px; font-size: .9rem; padding: .48rem 1rem; font-weight: 500; }
.nx-app .btn-primary { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }
.nx-app .btn-primary:hover { background: color-mix(in srgb, var(--nx-accent) 85%, #000); border-color: transparent; }
.nx-app .btn-outline-secondary,
.nx-app .btn-ghost {
   background: transparent; border: 1px solid var(--nx-line); color: var(--nx-text);
}
.nx-app .btn-ghost:hover, .nx-app .btn-outline-secondary:hover { background: var(--nx-accent-soft); border-color: var(--nx-accent); color: var(--nx-text); }
.nx-app .btn-danger-soft { background: color-mix(in srgb, var(--nx-bad) 14%, transparent); border: 1px solid color-mix(in srgb, var(--nx-bad) 35%, transparent); color: var(--nx-bad); }
.nx-app .btn-danger-soft:hover { background: color-mix(in srgb, var(--nx-bad) 22%, transparent); color: var(--nx-bad); }
.nx-app .btn-sm { padding: .3rem .7rem; font-size: .82rem; border-radius: 8px; }
.nx-app .btn .bi { vertical-align: -.1em; }

/* ---------------------------------------------------------------- Zustaende */
.nx-pill {
   display: inline-flex; align-items: center; gap: .38rem; white-space: nowrap;
   padding: .22rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 500;
   background: color-mix(in srgb, var(--pill) 14%, transparent);
   border: 1px solid color-mix(in srgb, var(--pill) 34%, transparent);
   color: var(--pill);
}
.nx-pill .bi { font-size: .68rem; color: var(--pill) !important; }
.nx-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pill); flex: 0 0 auto; }
.nx-pill.is-ok { --pill: var(--nx-ok); }
.nx-pill.is-warn { --pill: var(--nx-warn); }
.nx-pill.is-bad { --pill: var(--nx-bad); }
.nx-pill.is-info { --pill: var(--nx-info); }
.nx-pill.is-muted { --pill: var(--nx-muted); }
.nx-pill.is-live .nx-pill-dot { animation: nx-blink 2s infinite; }
@keyframes nx-blink { 50% { opacity: .35; } }

/* ---------------------------------------------------------------- Hinweise */
.nx-note {
   display: flex; gap: .7rem; padding: .9rem 1.05rem; border-radius: 13px;
   border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
   background: color-mix(in srgb, var(--tone) 10%, var(--nx-surface));
   font-size: .92rem; line-height: 1.55; color: var(--nx-text);
   --tone: var(--nx-info);
}
.nx-note + .nx-note, .nx-note + .nx-card, .nx-card + .nx-note { margin-top: 1rem; }
.nx-note .bi { flex: 0 0 auto; margin-top: .15rem; color: var(--tone) !important; font-size: 1.05rem; }
.nx-note.is-ok { --tone: var(--nx-ok); }
.nx-note.is-warn { --tone: var(--nx-warn); }
.nx-note.is-bad { --tone: var(--nx-bad); }
.nx-note b { color: var(--nx-text); }
.nx-note a { text-decoration: underline; }

/* ---------------------------------------------------------------- Leerzustand */
.nx-empty { text-align: center; padding: 3rem 1.5rem; }
.nx-empty-icon {
   width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 1rem; display: grid; place-items: center;
   background: var(--nx-accent-soft); font-size: 1.6rem;
}
.nx-empty-icon .bi { color: var(--nx-accent) !important; }
.nx-empty-title { font-size: 1.1rem; font-weight: 600; color: var(--nx-text); margin-bottom: .35rem; }
.nx-empty-text { color: var(--nx-muted); max-width: 420px; margin: 0 auto 1.25rem; line-height: 1.6; }

/* ---------------------------------------------------------------- Mobil */
.nx-side-toggle { display: none; }
.nx-tabbar { display: none; }
.nx-scrim { display: none; }

@media (max-width: 991.98px) {
   .nx-side {
      transform: translateX(-100%); transition: transform .28s cubic-bezier(.22, .8, .3, 1);
      box-shadow: 0 0 60px rgba(0, 0, 0, .5); width: 282px;
   }
   body.nx-side-open .nx-side { transform: none; }
   .nx-main { margin-left: 0; }
   .nx-side-toggle { display: grid; }
   .nx-scrim {
      display: block; position: fixed; inset: 0; z-index: 1025; background: rgba(0, 0, 0, .5);
      opacity: 0; pointer-events: none; transition: opacity .25s ease;
   }
   body.nx-side-open .nx-scrim { opacity: 1; pointer-events: auto; }
   .nx-content { padding: 1rem; padding-bottom: 5.5rem; }
   .nx-topbar { padding: .7rem 1rem; }
   .nx-topbar-h { font-size: 1.08rem; }
   .nx-user-name { display: none; }
   .nx-user-chip { padding: .3rem; }

   .nx-tabbar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
      display: grid; grid-template-columns: repeat(5, 1fr);
      background: color-mix(in srgb, var(--nx-surface) 92%, transparent);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid var(--nx-line);
      padding-bottom: env(safe-area-inset-bottom);
   }
   .nx-tab {
      display: flex; flex-direction: column; align-items: center; gap: .15rem;
      padding: .5rem .2rem .55rem; text-decoration: none; color: var(--nx-muted); font-size: .68rem;
      position: relative;
   }
   .nx-tab .bi { font-size: 1.12rem; color: var(--nx-muted) !important; }
   .nx-tab.is-active { color: var(--nx-accent); }
   .nx-tab.is-active .bi { color: var(--nx-accent) !important; }
   .nx-tab.is-active::before {
      content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 2px;
      border-radius: 0 0 3px 3px; background: var(--nx-accent);
   }
   .nx-tab-count {
      position: absolute; top: .28rem; right: 22%; min-width: 15px; height: 15px; padding: 0 3px;
      border-radius: 999px; background: var(--nx-bad); color: #fff !important;
      font-size: .6rem; font-weight: 700; display: grid; place-items: center;
   }
}

@media (prefers-reduced-motion: reduce) {
   .nx-nav-item:hover, .nx-credit:hover, .nx-icon-btn:hover { transform: none; }
   .nx-pill.is-live .nx-pill-dot { animation: none; }
   .nx-side { transition: none; }
}

/* ===========================================================================
   Uebersicht: Begruessung, Kennzahlen, Serverkarten
   =========================================================================== */
.nx-hello {
   position: relative; overflow: hidden; border-radius: 18px; padding: 1.5rem 1.65rem;
   margin-bottom: 1.25rem; border: 1px solid var(--nx-line);
   background: linear-gradient(120deg, var(--nx-accent-soft), var(--nx-surface) 62%);
}
.nx-hello::after {
   content: ""; position: absolute; right: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%;
   background: radial-gradient(circle, color-mix(in srgb, #6f42c1 26%, transparent), transparent 70%);
   pointer-events: none;
}
.nx-hello-inner { position: relative; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.nx-hello-text { flex: 1 1 320px; }
.nx-hello-greet { font-size: .82rem; color: var(--nx-muted); letter-spacing: .05em; text-transform: uppercase; }
.nx-hello-title { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--nx-text); margin: .2rem 0 .35rem; line-height: 1.2; }
.nx-hello-sub { color: var(--nx-muted); font-size: .95rem; line-height: 1.55; margin: 0; }
.nx-hello-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.nx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1.25rem; }
@media (max-width: 991.98px) { .nx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nx-tile {
   display: block; padding: 1.05rem 1.15rem; border-radius: 14px; text-decoration: none;
   background: var(--nx-surface); border: 1px solid var(--nx-line);
   transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.nx-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 50%, transparent); box-shadow: var(--nx-shadow); text-decoration: none; }
.nx-tile { --tone: var(--nx-accent); }
.nx-tile.is-ok { --tone: var(--nx-ok); }
.nx-tile.is-warn { --tone: var(--nx-warn); }
.nx-tile.is-bad { --tone: var(--nx-bad); }
.nx-tile-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.nx-tile-icon {
   width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
   background: color-mix(in srgb, var(--tone) 15%, transparent);
}
.nx-tile-icon .bi { color: var(--tone) !important; font-size: .92rem; }
.nx-tile-label { font-size: .82rem; color: var(--nx-muted); }
.nx-tile-value { font-size: 1.6rem; font-weight: 700; color: var(--nx-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.nx-tile-hint { display: block; font-size: .78rem; color: var(--nx-muted); margin-top: .2rem; }
.nx-tile-hint.is-strong { color: var(--tone); }

/* Serverkarten */
.nx-servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.nx-server {
   position: relative; display: flex; flex-direction: column; overflow: hidden;
   background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 16px;
   transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nx-server:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--nx-accent) 45%, transparent); box-shadow: var(--nx-shadow); }
.nx-server-media { position: relative; padding-top: 40%; background: var(--nx-surface-2); overflow: hidden; flex: 0 0 auto; }
.nx-server-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nx-server:hover .nx-server-media img { transform: scale(1.05); }
.nx-server-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .72)); }
.nx-server-head { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem .95rem; display: flex; align-items: flex-end; gap: .6rem; }
.nx-server-name { display: block; font-size: 1.02rem; font-weight: 600; color: #fff; line-height: 1.25; }
.nx-server-product { display: block; font-size: .78rem; color: rgba(255, 255, 255, .78); }
.nx-server-head .nx-pill { margin-left: auto; background: rgba(0, 0, 0, .45); }
.nx-server-body { padding: .95rem 1.05rem 1.05rem; display: flex; flex-direction: column; gap: .7rem; flex: 1 1 auto; }
.nx-server-specs { display: flex; flex-wrap: wrap; gap: .35rem; }
.nx-spec {
   display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 8px;
   background: var(--nx-surface-2); border: 1px solid var(--nx-line); font-size: .76rem; color: var(--nx-muted);
}
.nx-spec .bi { font-size: .72rem; color: var(--nx-muted) !important; }
.nx-server-meta { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--nx-muted); flex-wrap: wrap; }
.nx-server-meta b { color: var(--nx-text); font-weight: 600; }
.nx-server-foot { display: flex; gap: .4rem; margin-top: auto; padding-top: .2rem; flex-wrap: wrap; }
.nx-server-foot .btn { flex: 1 1 auto; }

/* Verbindungsadresse zum Kopieren */
.nx-copy {
   display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .6rem; border-radius: 8px;
   background: var(--nx-surface-2); border: 1px dashed var(--nx-line); cursor: pointer;
   font-family: var(--nx-mono); font-size: .8rem; color: var(--nx-text);
   transition: border-color .2s ease;
}
.nx-copy:hover { border-color: var(--nx-accent); }
.nx-copy .bi { color: var(--nx-muted) !important; font-size: .78rem; }
.nx-copy.is-copied { border-color: var(--nx-ok); border-style: solid; }
.nx-copy.is-copied .bi { color: var(--nx-ok) !important; }

/* ===========================================================================
   Listen (Rechnungen, Tickets, Verlauf)
   =========================================================================== */
.nx-list { display: flex; flex-direction: column; }
.nx-list-row {
   display: flex; align-items: center; gap: .85rem; padding: .9rem 1.25rem;
   border-bottom: 1px solid var(--nx-line); text-decoration: none; color: var(--nx-text);
   transition: background .18s ease;
}
.nx-list-row:last-child { border-bottom: 0; }
a.nx-list-row:hover { background: var(--nx-accent-soft); text-decoration: none; color: var(--nx-text); }
.nx-list-icon {
   width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
   background: color-mix(in srgb, var(--tone, var(--nx-accent)) 14%, transparent);
}
.nx-list-icon .bi { color: var(--tone, var(--nx-accent)) !important; }
.nx-list-main { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.nx-list-title { font-size: .95rem; font-weight: 600; color: var(--nx-text); overflow: hidden; text-overflow: ellipsis; }
.nx-list-sub { font-size: .8rem; color: var(--nx-muted); }
.nx-list-end { margin-left: auto; display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.nx-list-amount { font-size: .98rem; font-weight: 600; color: var(--nx-text); font-variant-numeric: tabular-nums; }
.nx-list-chevron { color: var(--nx-muted) !important; transition: transform .2s ease; }
a.nx-list-row:hover .nx-list-chevron { transform: translateX(3px); }
@media (max-width: 575.98px) {
   .nx-list-row { flex-wrap: wrap; padding: .85rem 1rem; }
   .nx-list-end { margin-left: 48px; width: 100%; justify-content: flex-start; }
   .nx-list-chevron { display: none; }
}

/* Filterleiste */
.nx-filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.nx-filter {
   padding: .3rem .8rem; border-radius: 999px; font-size: .82rem; cursor: pointer;
   background: var(--nx-surface-2); border: 1px solid var(--nx-line); color: var(--nx-muted);
   transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nx-filter:hover { border-color: var(--nx-accent); color: var(--nx-text); }
.nx-filter.is-active { background: var(--nx-accent-soft); border-color: var(--nx-accent); color: var(--nx-accent); font-weight: 600; }
.nx-filter-count { opacity: .7; margin-left: .2rem; }
.nx-search {
   display: flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 10px;
   background: var(--nx-surface-2); border: 1px solid var(--nx-line); min-width: 190px;
}
.nx-search .bi { color: var(--nx-muted) !important; font-size: .85rem; }
.nx-search input { border: 0; background: transparent; color: var(--nx-text); font-size: .88rem; width: 100%; outline: none; }
.nx-search input::placeholder { color: var(--nx-muted); }

/* ===========================================================================
   Tabellen, Datenpaare
   =========================================================================== */
.nx-table { width: 100%; border-collapse: collapse; }
.nx-table th {
   text-align: left; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
   color: var(--nx-muted); font-weight: 600; padding: .7rem 1.25rem; border-bottom: 1px solid var(--nx-line);
}
.nx-table td { padding: .8rem 1.25rem; border-bottom: 1px solid var(--nx-line); color: var(--nx-text); font-size: .92rem; }
.nx-table tr:last-child td { border-bottom: 0; }
.nx-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.nx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 1.5rem; }
.nx-fact { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.nx-fact-label { font-size: .78rem; color: var(--nx-muted); letter-spacing: .03em; }
.nx-fact-value { font-size: .98rem; font-weight: 600; color: var(--nx-text); word-break: break-word; }

/* ===========================================================================
   Formulare
   =========================================================================== */
.nx-app .form-label, .nx-label {
   display: block; font-size: .84rem; font-weight: 500; color: var(--nx-muted); margin-bottom: .35rem;
}
.nx-app .form-control, .nx-app .form-select {
   background: var(--nx-surface-2); border: 1px solid var(--nx-line); color: var(--nx-text);
   border-radius: 10px; padding: .6rem .8rem; font-size: .93rem;
   transition: border-color .18s ease, box-shadow .18s ease;
}
.nx-app .form-control:focus, .nx-app .form-select:focus {
   background: var(--nx-surface-2); color: var(--nx-text); border-color: var(--nx-accent);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-accent) 20%, transparent);
}
.nx-app .form-control::placeholder { color: color-mix(in srgb, var(--nx-muted) 80%, transparent); }
.nx-app .form-control:disabled, .nx-app .form-control[readonly] { background: var(--nx-bg); color: var(--nx-muted); }
.nx-app .form-check-input { background-color: var(--nx-surface-2); border-color: var(--nx-line); }
.nx-app .form-check-input:checked { background-color: var(--nx-accent); border-color: var(--nx-accent); }
.nx-app .form-text, .nx-hint { font-size: .82rem; color: var(--nx-muted); }
.nx-app .invalid-feedback { color: var(--nx-bad); font-size: .82rem; }
.nx-app .is-invalid { border-color: var(--nx-bad) !important; }
.nx-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 767.98px) { .nx-form-grid { grid-template-columns: minmax(0, 1fr); } }
.nx-form-grid .nx-col-full { grid-column: 1 / -1; }
.nx-form-foot {
   display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
   padding: 1rem 1.25rem; border-top: 1px solid var(--nx-line); background: var(--nx-surface-2);
}

/* Meldungen von Laravel */
.nx-app .alert { border-radius: 12px; border: 1px solid var(--nx-line); font-size: .92rem; padding: .85rem 1.05rem; }
.nx-app .alert-success { background: color-mix(in srgb, var(--nx-ok) 12%, var(--nx-surface)); border-color: color-mix(in srgb, var(--nx-ok) 35%, transparent); color: var(--nx-text); }
.nx-app .alert-danger { background: color-mix(in srgb, var(--nx-bad) 12%, var(--nx-surface)); border-color: color-mix(in srgb, var(--nx-bad) 35%, transparent); color: var(--nx-text); }
.nx-app .alert-warning { background: color-mix(in srgb, var(--nx-warn) 12%, var(--nx-surface)); border-color: color-mix(in srgb, var(--nx-warn) 35%, transparent); color: var(--nx-text); }
.nx-app .alert-info { background: color-mix(in srgb, var(--nx-info) 12%, var(--nx-surface)); border-color: color-mix(in srgb, var(--nx-info) 35%, transparent); color: var(--nx-text); }

/* ===========================================================================
   Serverdetail: Kopf, Live-Werte, Steuerung
   =========================================================================== */
.nx-server-hero {
   position: relative; overflow: hidden; border-radius: 18px; margin-bottom: 1.25rem;
   border: 1px solid var(--nx-line); background: var(--nx-surface); min-height: 190px;
   display: flex; align-items: flex-end;
}
.nx-server-hero-bg { position: absolute; inset: 0; }
.nx-server-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.nx-server-hero-bg::after {
   content: ""; position: absolute; inset: 0;
   background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, .7));
}
.nx-server-hero-inner { position: relative; padding: 1.35rem 1.5rem; width: 100%; display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.nx-server-hero-text { flex: 1 1 260px; min-width: 0; }
.nx-server-hero-kicker { font-size: .78rem; color: rgba(255, 255, 255, .75); letter-spacing: .05em; }
.nx-server-hero-name { font-size: clamp(1.25rem, 2.6vw, 1.8rem); font-weight: 700; color: #fff; margin: .15rem 0 .5rem; line-height: 1.15; }
.nx-server-hero-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nx-server-hero .nx-copy { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
.nx-server-hero .nx-copy .bi { color: rgba(255, 255, 255, .7) !important; }
.nx-server-hero-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Steuerknoepfe */
.nx-power { display: flex; gap: .4rem; flex-wrap: wrap; }
.nx-power .btn { min-width: 108px; }
.nx-power-start { background: color-mix(in srgb, var(--nx-ok) 16%, transparent); border: 1px solid color-mix(in srgb, var(--nx-ok) 40%, transparent); color: var(--nx-ok); }
.nx-power-start:hover { background: color-mix(in srgb, var(--nx-ok) 26%, transparent); color: var(--nx-ok); }
.nx-power-restart { background: color-mix(in srgb, var(--nx-info) 16%, transparent); border: 1px solid color-mix(in srgb, var(--nx-info) 40%, transparent); color: var(--nx-info); }
.nx-power-restart:hover { background: color-mix(in srgb, var(--nx-info) 26%, transparent); color: var(--nx-info); }
.nx-power-stop { background: color-mix(in srgb, var(--nx-warn) 16%, transparent); border: 1px solid color-mix(in srgb, var(--nx-warn) 40%, transparent); color: var(--nx-warn); }
.nx-power-stop:hover { background: color-mix(in srgb, var(--nx-warn) 26%, transparent); color: var(--nx-warn); }

/* Live-Werte: Ringe statt Balken. Der Ring zeigt die Auslastung, die Zahl in
   der Mitte den Prozentwert, darunter steht der echte Wert (z.B. 1,2 von 4 GB). */
.nx-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
@media (max-width: 575.98px) { .nx-gauges { grid-template-columns: minmax(0, 1fr); } }
.nx-gauge {
   position: relative; overflow: hidden; text-align: center;
   padding: .95rem .8rem .7rem; border-radius: 16px;
   background: var(--nx-surface-2); border: 1px solid var(--nx-line);
}
/* Schimmer in der Kennfarbe, damit die Kachel nicht flach wirkt */
.nx-gauge::before {
   content: ""; position: absolute; left: 50%; top: -55%; width: 150%; padding-top: 150%;
   transform: translateX(-50%); pointer-events: none; opacity: .5;
   background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 62%);
}
.nx-ring-wrap { position: relative; width: min(102px, 56%); margin: 0 auto .5rem; }
.nx-ring { display: block; width: 100%; height: auto; transform: rotate(-90deg); overflow: visible; }
.nx-ring-track { fill: none; stroke: color-mix(in srgb, var(--nx-muted) 20%, transparent); stroke-width: 10; }
.nx-ring-arc {
   fill: none; stroke: var(--tone, var(--nx-accent)); stroke-width: 10; stroke-linecap: round;
   stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
   transition: stroke-dashoffset .8s cubic-bezier(.22, .8, .3, 1), stroke .3s ease;
   filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tone) 50%, transparent));
}
.nx-ring-mid {
   position: absolute; inset: 0; line-height: 1;
   display: flex; align-items: center; justify-content: center; gap: .09rem;
}
.nx-ring-mid b { font-size: 1.5rem; font-weight: 700; color: var(--nx-text); font-variant-numeric: tabular-nums; }
/* Das Prozentzeichen sitzt auf der Grundlinie der Zahl, nicht auf halber Höhe */
.nx-ring-mid i { font-style: normal; font-size: .74rem; color: var(--nx-muted); transform: translateY(.34rem); }
.nx-gauge-label { display: block; font-size: .82rem; color: var(--nx-muted); }
.nx-gauge-label .bi { color: var(--tone, var(--nx-accent)) !important; font-size: .82rem; margin-right: .2rem; }
.nx-gauge-value { display: block; position: relative; z-index: 1; font-size: .92rem; font-weight: 600; color: var(--nx-text); font-variant-numeric: tabular-nums; margin-top: .1rem; }
.nx-gauge.is-cpu { --tone: var(--nx-accent); }
.nx-gauge.is-ram { --tone: var(--nx-warn); }
.nx-gauge.is-disk { --tone: #8b5cf6; }
.nx-gauge.is-high { --tone: var(--nx-bad); }
@media (prefers-reduced-motion: reduce) { .nx-ring-arc { transition: none; } }

/* Reiter */
.nx-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--nx-line); overflow-x: auto; scrollbar-width: none; }
.nx-tabs::-webkit-scrollbar { display: none; }
.nx-tab-link {
   position: relative; padding: .65rem .95rem; font-size: .92rem; white-space: nowrap;
   color: var(--nx-muted); text-decoration: none; border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0;
}
.nx-tab-link:hover { color: var(--nx-text); text-decoration: none; }
.nx-tab-link.is-active { color: var(--nx-accent); border-bottom-color: var(--nx-accent); font-weight: 600; }
.nx-tab-link .bi { margin-right: .3rem; color: inherit !important; }
.nx-tab-pane { display: none; }
.nx-tab-pane.is-active { display: block; animation: nx-fade .3s ease both; }
@keyframes nx-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===========================================================================
   Tickets als Gespraech
   =========================================================================== */
.nx-thread { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
.nx-msg { display: flex; gap: .75rem; max-width: 92%; }
.nx-msg-avatar {
   width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
   font-size: .82rem; font-weight: 700; color: #fff; background: linear-gradient(140deg, var(--nx-accent), #6f42c1);
}
.nx-msg.is-staff .nx-msg-avatar { background: linear-gradient(140deg, var(--nx-ok), #0ea5a0); }
.nx-msg-body { min-width: 0; }
.nx-msg-meta { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem; flex-wrap: wrap; }
.nx-msg-author { font-size: .88rem; font-weight: 600; color: var(--nx-text); }
.nx-msg-role { font-size: .7rem; padding: .05rem .4rem; border-radius: 5px; background: var(--nx-accent-soft); color: var(--nx-accent); }
.nx-msg.is-staff .nx-msg-role { background: color-mix(in srgb, var(--nx-ok) 15%, transparent); color: var(--nx-ok); }
.nx-msg-time { font-size: .76rem; color: var(--nx-muted); }
.nx-msg-text {
   padding: .8rem 1rem; border-radius: 4px 14px 14px 14px; white-space: pre-wrap; word-break: break-word;
   background: var(--nx-surface-2); border: 1px solid var(--nx-line); font-size: .93rem; line-height: 1.6; color: var(--nx-text);
}
.nx-msg.is-staff .nx-msg-text { background: color-mix(in srgb, var(--nx-ok) 8%, var(--nx-surface-2)); border-color: color-mix(in srgb, var(--nx-ok) 25%, transparent); }
.nx-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.nx-msg.is-mine .nx-msg-meta { flex-direction: row-reverse; }
.nx-msg.is-mine .nx-msg-text { border-radius: 14px 4px 14px 14px; background: var(--nx-accent-soft); border-color: color-mix(in srgb, var(--nx-accent) 28%, transparent); }
.nx-reply { padding: 1.25rem; border-top: 1px solid var(--nx-line); background: var(--nx-surface-2); }

/* ===========================================================================
   Rechnung
   =========================================================================== */
.nx-invoice-head { display: flex; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; padding: 1.5rem; }
.nx-invoice-total { margin-left: auto; text-align: right; }
.nx-invoice-total-label { font-size: .8rem; color: var(--nx-muted); }
.nx-invoice-total-value { font-size: 2rem; font-weight: 700; color: var(--nx-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.nx-party { font-size: .9rem; line-height: 1.6; color: var(--nx-muted); }
.nx-party b { display: block; color: var(--nx-text); margin-bottom: .2rem; }
.nx-bank { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .9rem; }
.nx-bank dt { color: var(--nx-muted); font-weight: 400; }
.nx-bank dd { margin: 0; color: var(--nx-text); font-weight: 500; }

/* Zeitachse */
.nx-timeline { position: relative; padding-left: 1.4rem; }
.nx-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--nx-line); }
.nx-tl { position: relative; padding-bottom: 1rem; }
.nx-tl:last-child { padding-bottom: 0; }
.nx-tl::before {
   content: ""; position: absolute; left: -1.4rem; top: .35rem; width: 12px; height: 12px; border-radius: 50%;
   background: var(--nx-surface); border: 2px solid var(--tone, var(--nx-accent));
}
.nx-tl-title { font-size: .92rem; color: var(--nx-text); font-weight: 500; }
.nx-tl-time { font-size: .78rem; color: var(--nx-muted); }

/* Druckansicht */
@media print {
   .nx-side, .nx-topbar, .nx-tabbar, .nx-card-actions, .nx-no-print { display: none !important; }
   .nx-main { margin-left: 0; }
   .nx-app { background: #fff; }
   .nx-card { box-shadow: none; border-color: #ddd; }
}

/* Nachbesserungen: Kontrast der ruhigen Schaltflaechen */
.nx-app a.btn-ghost,
.nx-app button.btn-ghost,
.nx-app a.btn-outline-secondary { color: var(--nx-text) !important; }
.nx-app a.btn-ghost:hover,
.nx-app button.btn-ghost:hover { color: var(--nx-text) !important; background: var(--nx-accent-soft); border-color: var(--nx-accent); }
.nx-app .btn:disabled, .nx-app .btn.disabled { opacity: .45; }

/* Auf dem Titelbild ist der Hintergrund immer dunkel */
.nx-server-hero .btn-ghost {
   background: rgba(255, 255, 255, .14) !important;
   border-color: rgba(255, 255, 255, .32) !important;
   color: #fff !important;
}
.nx-server-hero .btn-ghost:hover { background: rgba(255, 255, 255, .24) !important; }
.nx-server-hero .btn-ghost .bi { color: #fff !important; }

/* Kleine Bildschirme: Betraege sollen nicht umbrechen, Schaltflaeche in der
   unteren Leiste soll wie ein Link aussehen */
@media (max-width: 575.98px) {
   .nx-tile-value { font-size: 1.3rem; }
   .nx-hello { padding: 1.25rem 1.15rem; }
}
button.nx-tab { background: transparent; border: 0; font-family: inherit; }
button.nx-tab:focus { outline: none; }

/* ===========================================================================
   Anmeldeseiten: rechte Spalte im Stil des neuen Kundenbereichs
   =========================================================================== */
.nx-auth-side {
   position: relative; overflow: hidden;
   background: linear-gradient(140deg, #0d2894, #1e3799 45%, #4a2a9c);
   border-start: 0;
}
.nx-auth-side-glow {
   position: absolute; inset: -40% -20% auto auto; width: 520px; height: 520px; border-radius: 50%;
   background: radial-gradient(circle, rgba(33, 150, 243, .45), transparent 65%);
   pointer-events: none;
}
.nx-auth-side-inner { position: relative; padding: 3rem 2.75rem; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.nx-auth-kicker {
   display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
   font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
   color: #ffd166; background: rgba(255, 209, 102, .14); border: 1px solid rgba(255, 209, 102, .32);
   border-radius: 999px; padding: .28rem .75rem; margin-bottom: 1.1rem;
}
.nx-auth-kicker .bi { color: #ffd166 !important; }
.nx-auth-title { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; color: #fff; line-height: 1.2; margin: 0 0 .6rem; }
.nx-auth-lead { color: rgba(255, 255, 255, .82); font-size: 1rem; margin: 0 0 1.75rem; }
.nx-auth-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.nx-auth-list li { display: flex; gap: .85rem; align-items: flex-start; }
.nx-auth-list .bi {
   flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
   background: rgba(255, 255, 255, .14); color: #fff !important; font-size: 1rem;
}
.nx-auth-list span { display: flex; flex-direction: column; color: rgba(255, 255, 255, .78); font-size: .9rem; line-height: 1.5; }
.nx-auth-list b { color: #fff; font-size: .98rem; font-weight: 600; }
@media (max-width: 767.98px) {
   .nx-auth-side-inner { padding: 2rem 1.5rem; }
   .nx-auth-list { gap: .75rem; }
}

/* Anmeldeseiten: Formularelemente sichtbar machen */
.auth .form-check-input {
   width: 1.05rem; height: 1.05rem; border: 1px solid rgba(128, 145, 175, .55);
   background-color: rgba(255, 255, 255, .06); flex: 0 0 auto;
}
.auth .form-check-input:checked { background-color: #2196f3; border-color: #2196f3; }
.auth .input-group-text { border-color: rgba(128, 145, 175, .28); }

/* ---------------------------------------------------------------- Serverseiten: Unternavigation */
.nx-server-hero-slim { min-height: 132px; margin-bottom: .85rem; }
.nx-server-hero-slim .nx-server-hero-name { font-size: clamp(1.1rem, 2vw, 1.45rem); margin-bottom: .35rem; }
.nx-server-hero-slim .nx-server-hero-inner { padding: 1rem 1.15rem; }

.nx-subnav {
   display: flex; gap: .3rem; margin-bottom: 1.25rem; padding-bottom: .2rem;
   overflow-x: auto; scrollbar-width: none;
}
.nx-subnav::-webkit-scrollbar { display: none; }
.nx-subnav-item {
   display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
   padding: .5rem .9rem; border-radius: 10px; font-size: .9rem; text-decoration: none;
   color: var(--nx-muted); background: var(--nx-surface); border: 1px solid var(--nx-line);
   transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.nx-subnav-item:hover { color: var(--nx-text); border-color: var(--nx-accent); text-decoration: none; }
.nx-subnav-item .bi { font-size: .95rem; color: inherit !important; }
.nx-subnav-item.is-active {
   color: var(--nx-accent); font-weight: 600;
   background: var(--nx-accent-soft); border-color: color-mix(in srgb, var(--nx-accent) 45%, transparent);
}

/* ---------------------------------------------------------------- Installer */
.nx-inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .7rem; }
.nx-inst-card {
   display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: 13px;
   background: var(--nx-surface-2); border: 1px solid var(--nx-line);
   transition: border-color .2s ease, transform .2s ease;
}
.nx-inst-card:hover { border-color: color-mix(in srgb, var(--nx-accent) 45%, transparent); transform: translateY(-2px); }
.nx-inst-thumb {
   flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; overflow: hidden;
   display: grid; place-items: center; background: var(--nx-accent-soft); color: var(--nx-accent);
}
.nx-inst-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nx-inst-thumb .bi { color: var(--nx-accent) !important; font-size: 1.1rem; }
.nx-inst-body { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.nx-inst-name { font-weight: 600; font-size: .94rem; color: var(--nx-text); }
.nx-inst-desc {
   font-size: .82rem; color: var(--nx-muted); line-height: 1.4;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nx-inst-meta { font-size: .76rem; color: var(--nx-muted); margin-top: .15rem; }
.nx-inst-meta .bi { color: var(--nx-warn) !important; font-size: .7rem; }
.nx-inst-btn { margin-left: auto; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .nx-inst-card:hover { transform: none; } }

/* ---------------------------------------------------------------- Live-Konsole */
.nx-console-wrap { position: relative; background: #020c12; border-top: 1px solid var(--nx-line); border-bottom: 1px solid var(--nx-line); }
.nx-console-out {
   margin: 0; padding: 1rem 1.15rem; height: 58vh; min-height: 320px; overflow-y: auto;
   font-family: var(--nx-mono);
   font-size: .8rem; line-height: 1.6; color: #c7d8e4; white-space: pre-wrap; word-break: break-word;
}
.nx-con-line { display: block; }
.nx-con-line.is-own { color: #6dc0ff; }
.nx-con-line.is-bad { color: #ff8497; }
.nx-console-out::-webkit-scrollbar { width: 10px; }
.nx-console-out::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; }
.nx-console-input { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; background: var(--nx-surface-2); }
.nx-console-input .bi { color: var(--nx-muted) !important; }
.nx-console-input input {
   flex: 1 1 auto; border: 0; background: transparent; outline: none; color: var(--nx-text);
   font-family: var(--nx-mono); font-size: .85rem;
}
.nx-console-input input::placeholder { color: var(--nx-muted); }

/* ---------------------------------------------------------------- Dateiverwaltung */
.nx-crumbs { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .9rem; min-width: 0; }
.nx-crumbs a { text-decoration: none; color: var(--nx-muted); }
.nx-crumbs a:hover { color: var(--nx-accent); }
.nx-crumbs span { color: var(--nx-text); font-weight: 600; }
.nx-crumbs .bi { font-size: .65rem; color: var(--nx-muted) !important; }

.nx-file-bar {
   display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem;
   background: var(--nx-accent-soft); border-bottom: 1px solid var(--nx-line); font-size: .88rem;
}
.nx-files { display: flex; flex-direction: column; }
.nx-file-row {
   display: grid; grid-template-columns: 34px 24px minmax(0, 1fr) 86px 120px auto;
   align-items: center; gap: .5rem; padding: .55rem 1.25rem;
   border-bottom: 1px solid var(--nx-line); text-decoration: none; color: var(--nx-text);
}
.nx-file-row:last-child { border-bottom: 0; }
.nx-file-row:hover { background: var(--nx-surface-2); }
a.nx-file-row:hover { text-decoration: none; }
.nx-file-check { display: flex; justify-content: center; }
/* Die Farbe kommt aus der Zeile (--tone), gesetzt nach Dateiart in der Vorlage */
.nx-file-icon { font-size: 1rem; color: var(--tone, var(--nx-muted)) !important; }
.nx-file-name {
   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   font-size: .92rem; color: var(--nx-text); text-decoration: none;
}
a.nx-file-name:hover { color: var(--nx-accent); text-decoration: none; }
.nx-file-size, .nx-file-time { font-size: .8rem; color: var(--nx-muted); text-align: right; }
.nx-file-actions { display: flex; gap: .15rem; justify-content: flex-end; }
.nx-file-actions .btn { padding: .22rem .45rem; }
@media (max-width: 767.98px) {
   .nx-file-row { grid-template-columns: 30px 22px minmax(0, 1fr) auto; padding: .55rem .9rem; }
   .nx-file-size, .nx-file-time { display: none; }
}

.nx-editor {
   width: 100%; border: 0; border-top: 1px solid var(--nx-line); border-bottom: 1px solid var(--nx-line);
   background: #020c12; color: #c7d8e4; padding: 1rem 1.15rem; min-height: 58vh; resize: vertical;
   font-family: var(--nx-mono); font-size: .82rem; line-height: 1.6;
   outline: none; tab-size: 4;
}
.nx-editor:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--nx-accent) 45%, transparent); }

/* ---------------------------------------------------------------- Spielerzahl im Kopf */
.nx-players {
   display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: .6rem;
   padding: .5rem .8rem; border-radius: 11px;
   background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
}
.nx-players-count { font-size: 1.05rem; color: #fff; }
.nx-players-count b { font-size: 1.35rem; font-weight: 700; }
.nx-players-label { font-size: .82rem; color: rgba(255, 255, 255, .78); }
.nx-players-names { display: flex; gap: .3rem; flex-wrap: wrap; width: 100%; margin-top: .25rem; }
.nx-players-names span {
   font-size: .74rem; padding: .1rem .45rem; border-radius: 6px;
   background: rgba(255, 255, 255, .16); color: #fff;
}

/* ---------------------------------------------------------------- Verlaufskurven */
.nx-spark { display: block; width: 100%; height: 30px; margin-top: .45rem; overflow: visible; }
/* In den Ringkacheln liegt die Kurve als Band unten in der Kachel, damit ohne
   Messwerte keine leere Fläche entsteht. */
.nx-gauge .nx-spark {
   position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 32px;
   margin: 0; opacity: .55; pointer-events: none;
}
.nx-spark polyline { fill: none; stroke: var(--tone, var(--nx-accent)); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.nx-spark polygon { fill: color-mix(in srgb, var(--tone, var(--nx-accent)) 18%, transparent); stroke: none; }

/* ---------------------------------------------------------------- Kleine Konsole */
.nx-mini-wrap { background: #020c12; border-top: 1px solid var(--nx-line); }
.nx-mini-out {
   margin: 0; padding: .8rem 1rem; height: 180px; overflow-y: auto;
   font-family: var(--nx-mono);
   font-size: .74rem; line-height: 1.55; color: #a9c0cf; white-space: pre-wrap; word-break: break-word;
}
#nx-mini-console.is-off .nx-mini-wrap { opacity: .5; }

/* ---------------------------------------------------------------- Zeitpläne */
.nx-sched-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.nx-sched-pick {
   display: flex; flex-direction: column; gap: .1rem; padding: .75rem .85rem; cursor: pointer;
   border-radius: 12px; background: var(--nx-surface-2); border: 1px solid var(--nx-line);
   transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.nx-sched-pick:hover { border-color: color-mix(in srgb, var(--nx-accent) 45%, transparent); transform: translateY(-2px); }
.nx-sched-pick.is-active { background: var(--nx-accent-soft); border-color: var(--nx-accent); }
.nx-sched-pick .bi { font-size: 1.05rem; color: var(--nx-muted) !important; margin-bottom: .2rem; }
.nx-sched-pick.is-active .bi { color: var(--nx-accent) !important; }
.nx-sched-pick-label { font-size: .92rem; font-weight: 600; color: var(--nx-text); }
.nx-sched-pick-hint { font-size: .76rem; color: var(--nx-muted); line-height: 1.35; }
.nx-sched-tasks { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .nx-sched-pick:hover { transform: none; } }

/* Server-Symbol, Servername und Einladung im Kopf */
.nx-server-icon { width: 34px; height: 34px; border-radius: 8px; image-rendering: pixelated; }
.nx-players-motd { width: 100%; font-size: .8rem; color: rgba(255, 255, 255, .8); margin-top: .15rem; }
.nx-invite {
   display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem;
   padding: .3rem .75rem; border-radius: 999px; font-size: .82rem; cursor: pointer;
   background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); color: #fff;
   transition: background .2s ease;
}
.nx-invite:hover { background: rgba(255, 255, 255, .22); }
.nx-invite .bi { color: rgba(255, 255, 255, .8) !important; }
.nx-invite.is-copied { border-color: #2fcea5; }

/* ===========================================================================
   Serveransicht: klare Rangfolge
   =========================================================================== */

/* Zweite Stufe: Nebensachen ruhiger als Hauptkarten */
.nx-card-quiet {
   background: transparent;
   border-color: transparent;
   box-shadow: none;
}
.nx-card-quiet .nx-card-head { border-bottom-color: var(--nx-line); padding-left: 0; padding-right: 0; }
.nx-card-quiet .nx-card-body { padding-left: 0; padding-right: 0; }
.nx-card-quiet .nx-card-title { font-size: .95rem; color: var(--nx-muted); }
.nx-card-quiet .nx-card-title .bi { color: var(--nx-muted) !important; }

/* Farbe nur dort, wo sie etwas bedeutet: Kartentitel sind sonst ruhig */
.nx-card-title .bi { color: var(--nx-muted) !important; }
#nx-live .nx-card-title .bi { color: var(--nx-accent) !important; }

/* Ruhezustand: Server ist aus */
.nx-live-off {
   display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
   padding: 1.1rem 1.25rem; border-radius: 14px;
   background: var(--nx-surface-2); border: 1px dashed var(--nx-line);
}
.nx-live-off-icon {
   flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
   background: color-mix(in srgb, var(--nx-muted) 16%, transparent); font-size: 1.3rem;
}
.nx-live-off-icon .bi { color: var(--nx-muted) !important; }
.nx-live-off-text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 220px; }
.nx-live-off-title { font-size: 1.05rem; font-weight: 600; color: var(--nx-text); }
.nx-live-off-hint { font-size: .86rem; color: var(--nx-muted); line-height: 1.5; }
.nx-live-off-btn { flex: 0 0 auto; }

/* Steuerung: eine Hauptaktion, der Rest ruhig */
.nx-power-btn {
   background: transparent; border: 1px solid var(--nx-line); color: var(--nx-text);
}
.nx-power-btn:hover { background: var(--nx-accent-soft); border-color: var(--nx-accent); color: var(--nx-text); }
.nx-power-btn.is-primary {
   background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; font-weight: 600;
}
.nx-power-btn.is-primary:hover { background: color-mix(in srgb, var(--nx-accent) 85%, #000); color: #fff; }
.nx-power-btn.is-danger { color: var(--nx-bad); border-color: color-mix(in srgb, var(--nx-bad) 30%, transparent); }
.nx-power-btn.is-danger:hover { background: color-mix(in srgb, var(--nx-bad) 14%, transparent); border-color: var(--nx-bad); color: var(--nx-bad); }
.nx-power-btn .bi { color: inherit !important; }

/* Fußzeile der Live-Karte: Steuerung links, nächster Zeitplan rechts */
.nx-live-foot { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.nx-next-run {
   margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
   font-size: .82rem; color: var(--nx-muted);
}
.nx-next-run .bi { color: var(--nx-muted) !important; }
@media (max-width: 575.98px) { .nx-next-run { margin-left: 0; } }

/* Kleine Konsole: Eingabezeile schmaler als in der großen Ansicht */
#nx-mini-console .nx-console-input { padding: .55rem 1rem; }
#nx-mini-console .nx-console-input input { font-size: .8rem; }

/* ===========================================================================
   Serveransicht: Leitstand-Optik
   Jede Spielseite trägt den Farbton ihres Titelbildes (--nx-game, gesetzt in
   der Blade-Datei aus App\Support\CoverColor). Bedeutungsfarben wie Grün für
   "läuft" oder Rot für "voll" bleiben davon unberührt.
   =========================================================================== */

/* ---------------------------------------------------------------- Kopfbereich */
.nx-hero-board { min-height: 232px; display: block; }
.nx-hero-board .nx-server-hero-bg::after {
   background:
      linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .88) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .55));
}
/* Farbkante oben: der einzige Ort, an dem die Spielfarbe kräftig auftritt */
.nx-hero-edge {
   position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
   background: linear-gradient(90deg, transparent, var(--nx-game, var(--nx-accent)) 22%, color-mix(in srgb, var(--nx-game, var(--nx-accent)) 55%, #fff) 50%, var(--nx-game, var(--nx-accent)) 78%, transparent);
}
.nx-hero-board .nx-server-hero-inner { align-items: flex-start; padding-bottom: .9rem; }
.nx-hero-board .nx-server-hero-name { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; }
.nx-hero-motd {
   display: block; font-size: .84rem; color: rgba(255, 255, 255, .72);
   margin-bottom: .5rem; max-width: 46rem;
}

/* Werteleiste am Fuß des Kopfbereichs */
.nx-hero-strip {
   position: relative; z-index: 1;
   display: flex; flex-wrap: wrap; gap: .35rem 2.2rem;
   padding: .7rem 1.5rem .85rem;
   background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .5));
   border-top: 1px solid rgba(255, 255, 255, .12);
   backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.nx-hstat { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.nx-hstat-k {
   font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
   color: rgba(255, 255, 255, .55);
}
.nx-hstat-v {
   font-size: 1.02rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
   line-height: 1.25;
}
.nx-hstat-v b { font-size: 1.45rem; font-weight: 700; }
.nx-hstat-v small { font-size: .82rem; font-weight: 500; color: rgba(255, 255, 255, .6); margin-left: .15rem; }
.nx-hero-strip .nx-pill {
   background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: #fff;
   padding: .26rem .7rem; font-size: .82rem;
}
.nx-hero-strip .nx-pill .nx-pill-dot { box-shadow: 0 0 0 0 var(--pill); }
/* Läuft der Server, atmet der Punkt wie ein Radarpuls */
.nx-hero-strip .nx-pill.is-live .nx-pill-dot { animation: nx-radar 2.4s ease-out infinite; }
@keyframes nx-radar {
   0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pill) 70%, transparent); }
   70%  { box-shadow: 0 0 0 9px transparent; }
   100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 575.98px) {
   .nx-hero-strip { gap: .35rem 1.2rem; padding: .6rem 1.15rem .7rem; }
   .nx-hstat-v { font-size: .92rem; }
   .nx-hstat-v b { font-size: 1.2rem; }
}

/* Wer gerade spielt */
.nx-online {
   display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
   margin: -.75rem 0 1.25rem; padding: .6rem .85rem;
   border-radius: 0 0 14px 14px; background: var(--nx-surface-2);
   border: 1px solid var(--nx-line); border-top: 0;
}
.nx-online-k { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nx-muted); margin-right: .3rem; }
.nx-player {
   display: inline-flex; align-items: center; gap: .4rem;
   padding: .2rem .6rem .2rem .2rem; border-radius: 999px; font-size: .8rem;
   background: var(--nx-surface); border: 1px solid var(--nx-line); color: var(--nx-text);
}
/* Kopfbild gibt es nicht ohne fremden Dienst, also ein Kürzel in eigener Farbe */
.nx-player-head {
   width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
   font-size: .62rem; font-weight: 700; color: #fff; letter-spacing: 0;
   background: hsl(var(--h, 210) 55% 45%);
}

/* ---------------------------------------------------------------- Live-Anzeige */
.nx-tick { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--nx-muted); letter-spacing: .06em; text-transform: uppercase; }
.nx-tick i { width: 6px; height: 6px; border-radius: 50%; background: var(--nx-muted); display: block; transition: background .2s ease; }
.nx-tick.is-on i { background: var(--nx-ok); animation: nx-tick-pop .7s ease; }
@keyframes nx-tick-pop { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nx-ok) 65%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }

/* ---------------------------------------------------------------- Platzhalter */
.nx-skel {
   display: block; border-radius: 7px; color: transparent !important; user-select: none;
   background: linear-gradient(90deg,
      color-mix(in srgb, var(--nx-muted) 13%, transparent) 25%,
      color-mix(in srgb, var(--nx-muted) 26%, transparent) 37%,
      color-mix(in srgb, var(--nx-muted) 13%, transparent) 63%);
   background-size: 400% 100%; animation: nx-shimmer 1.5s ease infinite;
}
@keyframes nx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .nx-skel { animation: none; } }

/* Platzhalterzeilen in der Konsole, solange noch nichts angekommen ist */
.nx-mini-wrap { position: relative; }
.nx-con-skel { position: absolute; inset: 0; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .45rem; pointer-events: none; }
.nx-con-skel span {
   height: .58rem; border-radius: 4px;
   background: linear-gradient(90deg, rgba(125, 170, 200, .16) 25%, rgba(125, 170, 200, .42) 37%, rgba(125, 170, 200, .16) 63%);
   background-size: 400% 100%; animation: nx-shimmer 1.5s ease infinite;
}

/* ---------------------------------------------------------------- Konsolenfarben */
.nx-con-stamp { color: #4d6b7c; }
.nx-con-line.is-warn { color: #f0b34a; }
.nx-con-line.is-join { color: #4fd6a0; }
.nx-con-line.is-leave { color: #7f97a5; }
.nx-con-line.is-note { color: #cfe3ee; }
.nx-con-line.is-own { color: color-mix(in srgb, var(--nx-game, #6dc0ff) 70%, #fff); font-weight: 600; }

/* ---------------------------------------------------------------- Reiterleiste */
/* Die Spielfarbe ist auf helles Weiß hin zu blass. Für Schrift und Linien im
   hellen Design gibt es deshalb eine abgedunkelte Fassung. */
.nx-app { --nx-game-ink: color-mix(in srgb, var(--nx-game, var(--nx-accent)) 72%, #06122b); }
body.nx-app[data-cc-theme*="dark"] { --nx-game-ink: var(--nx-game, var(--nx-accent)); }

.nx-subnav-item.is-active {
   border-color: color-mix(in srgb, var(--nx-game-ink) 55%, transparent);
   background: color-mix(in srgb, var(--nx-game-ink) 14%, transparent);
   box-shadow: 0 6px 18px -12px var(--nx-game-ink);
}
.nx-app a.nx-subnav-item.is-active { color: var(--nx-game-ink); }
.nx-subnav-item:hover { border-color: color-mix(in srgb, var(--nx-game-ink) 45%, transparent); }

/* ---------------------------------------------------------------- Schrift im Kopfbereich
   Der Kopfbereich liegt immer auf einem dunklen Bild. Seine Schrift bleibt
   deshalb in beiden Designs weiß; ohne diese Regeln greift im hellen Design
   die allgemeine Textfarbe und der Kopf wird unleserlich. */
.nx-app .nx-server-hero-name,
.nx-app .nx-server-hero-name span { color: #fff; }
.nx-app .nx-server-hero-kicker { color: rgba(255, 255, 255, .75); }
.nx-app .nx-hero-motd { color: rgba(255, 255, 255, .74); }
.nx-app .nx-hstat-k { color: rgba(255, 255, 255, .6); }
.nx-app .nx-hstat-v,
.nx-app .nx-hstat-v b { color: #fff; }
.nx-app .nx-hstat-v small { color: rgba(255, 255, 255, .65); }
.nx-app .nx-hero-strip .nx-pill,
.nx-app .nx-hero-strip .nx-pill span { color: #fff; }
.nx-app .nx-server-hero .nx-copy,
.nx-app .nx-server-hero .nx-copy span,
.nx-app .nx-server-hero .nx-invite,
.nx-app .nx-server-hero .nx-invite span { color: #fff; }
.nx-app .nx-server-hero a.btn-ghost,
.nx-app .nx-server-hero button.btn-ghost { color: #fff !important; }

/* ---------------------------------------------------------------- Kopf der Unterseiten
   Derselbe Aufbau wie auf der Übersicht, nur flacher: Name, Adresse, Steuerung
   und darunter die Werteleiste. */
.nx-server-hero-slim.nx-hero-board { min-height: 0; }
.nx-server-hero-slim.nx-hero-board .nx-server-hero-inner { padding: 1rem 1.25rem .75rem; align-items: flex-start; }
.nx-server-hero-slim .nx-hero-strip { padding: .5rem 1.25rem .6rem; gap: .3rem 1.9rem; }
.nx-server-hero-slim .nx-hstat-v { font-size: .92rem; }
.nx-server-hero-slim .nx-hstat-v b { font-size: 1.15rem; }
.nx-server-hero-slim .nx-server-hero-actions { align-items: flex-start; }

.nx-app .nx-server-hero-name a { color: #fff; text-decoration: none; }
.nx-app .nx-server-hero-name a:hover { color: #fff; text-decoration: underline; }

/* Steuerung liegt auf dem Titelbild. Ein dunkler Grund traegt sowohl über
   hellen als auch über dunklen Stellen des Bildes. */
.nx-app .nx-server-hero .nx-power-btn {
   background: rgba(0, 0, 0, .42); border-color: rgba(255, 255, 255, .3); color: #fff;
   backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.nx-app .nx-server-hero .nx-power-btn:hover {
   background: rgba(0, 0, 0, .58); border-color: rgba(255, 255, 255, .5); color: #fff;
}

/* Auf schmalen Bildschirmen genügen die Symbole, sonst wächst der Kopf
   auf vier Zeilen an. */
@media (max-width: 575.98px) {
   .nx-server-hero .nx-power .btn { min-width: 0; padding: .38rem .6rem; }
   .nx-server-hero .nx-btn-label { display: none; }
}
.nx-app .nx-server-hero .nx-power-btn.is-primary {
   background: var(--nx-accent); border-color: var(--nx-accent); color: #fff;
}
.nx-app .nx-server-hero .nx-power-btn.is-danger {
   background: rgba(255, 107, 131, .18); border-color: rgba(255, 107, 131, .5); color: #ffc2cb;
}

/* ---------------------------------------------------------------- Belegung als Ring
   Genutzt auf der Backup-Seite: der Ring zeigt die Plätze, daneben stehen
   Gesamtgröße und Zeitpunkt der letzten Sicherung. */
.nx-quota { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.nx-quota .nx-ring-wrap { width: 92px; flex: 0 0 auto; margin: 0; }
.nx-quota .nx-ring-mid b { font-size: 1.35rem; }
.nx-quota .nx-ring-mid i { font-size: .82rem; transform: none; }
.nx-quota-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 140px; }
.nx-quota-title { font-size: .98rem; font-weight: 600; color: var(--nx-text); }
.nx-quota-sub { font-size: .82rem; color: var(--nx-muted); }

/* ---------------------------------------------------------------- Verborgene Werte
   Passwörter stehen als Punkte da, bis jemand aufs Auge klickt. Kopieren geht
   auch im verborgenen Zustand. */
.nx-secret { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; }
.nx-secret-value {
   font-family: var(--nx-mono); font-size: .82rem; color: var(--nx-text);
   background: var(--nx-surface-2); border: 1px solid var(--nx-line);
   border-radius: 8px; padding: .18rem .5rem; letter-spacing: .04em;
   overflow-wrap: anywhere;
}
.nx-secret.is-open .nx-secret-value { letter-spacing: 0; }
.nx-secret-btn {
   display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
   border-radius: 8px; background: transparent; border: 1px solid var(--nx-line); cursor: pointer;
}
.nx-secret-btn:hover { border-color: var(--nx-accent); }
.nx-secret-btn .bi { color: var(--nx-muted) !important; font-size: .82rem; }
.nx-secret .nx-copy { padding: .18rem .45rem; }

/* Laufende Sicherung: ein wanderndes Band sagt mehr als ein Wort */
.nx-run-bar { display: block; height: 3px; border-radius: 99px; overflow: hidden; margin-top: .45rem; background: color-mix(in srgb, var(--nx-info) 18%, transparent); }
.nx-run-bar i { display: block; height: 100%; width: 34%; border-radius: 99px; background: var(--nx-info); animation: nx-run 1.5s ease-in-out infinite; }
@keyframes nx-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .nx-run-bar i { animation: none; width: 100%; } }

/* ---------------------------------------------------------------- Startvariablen
   Die Namen kommen aus dem Egg. Pflichtangabe und technischer Schlüssel stehen
   als Kennzeichen daneben, damit der Name selbst lesbar bleibt. */
.nx-var-label { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.nx-var-pill { font-size: .68rem; padding: .1rem .45rem; }
.nx-var-key { font-family: var(--nx-mono); font-size: .72rem; color: var(--nx-muted); background: none; padding: 0; }
.nx-secret-field { display: flex; align-items: center; gap: .35rem; }
.nx-secret-field input { flex: 1 1 auto; min-width: 0; }
.nx-facts .nx-col-full { grid-column: 1 / -1; }
.nx-startcmd {
   font-family: var(--nx-mono); font-size: .78rem; line-height: 1.6; color: var(--nx-text);
   background: var(--nx-surface-2); border: 1px solid var(--nx-line); border-radius: 10px;
   padding: .7rem .85rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Kennzahlenleiste
   Steht über Listen (Rechnungen, Guthaben, Support) und beantwortet die eine
   Frage, mit der man die Seite öffnet, bevor man die Liste liest. */
.nx-topstats {
   display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem;
   margin-bottom: 1rem;
}
.nx-topstat {
   padding: .85rem 1rem; border-radius: 14px;
   background: var(--nx-surface); border: 1px solid var(--nx-line); box-shadow: var(--nx-shadow);
   display: flex; flex-direction: column; gap: .12rem; min-width: 0;
}
.nx-topstat-k { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--nx-muted); }
.nx-topstat-v { font-size: 1.45rem; font-weight: 700; color: var(--nx-text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.nx-topstat-s { font-size: .8rem; color: var(--nx-muted); }
.nx-topstat.is-ok .nx-topstat-v { color: var(--nx-ok); }
.nx-topstat.is-warn .nx-topstat-v { color: var(--nx-warn); }
.nx-topstat.is-bad .nx-topstat-v { color: var(--nx-bad); }

/* ---------------------------------------------------------------- Serverkarte: Live-Zeile
   Spielerzahl und Speicher oben rechts auf dem Titelbild, sobald der
   Zustand aus dem Panel da ist. */
.nx-server-livemeta {
   position: absolute; top: .7rem; right: .8rem; z-index: 1;
   font-size: .74rem; font-weight: 600; color: #fff; letter-spacing: .01em;
   padding: .22rem .6rem; border-radius: 999px;
   background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .18);
   backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.nx-app .nx-server-livemeta { color: #fff; }

/* ---------------------------------------------------------------- Zwei-Faktor */
.nx-steps-list { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; line-height: 1.6; }
.nx-steps-list li::marker { color: var(--nx-accent); font-weight: 700; }
.nx-qr { display: block; width: fit-content; margin: .6rem 0 .3rem; padding: .6rem; border-radius: 14px; background: #fff; border: 1px solid var(--nx-line); }
.nx-qr img { display: block; width: 196px; height: 196px; }
.nx-qr-manual { font-size: .86rem; color: var(--nx-muted); }
.nx-qr-manual summary { cursor: pointer; }
.nx-qr-manual code { display: inline-block; margin-top: .4rem; font-family: var(--nx-mono); font-size: .9rem; letter-spacing: .06em; padding: .3rem .6rem; border-radius: 8px; background: var(--nx-surface-2); border: 1px solid var(--nx-line); color: var(--nx-text); }
.nx-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
.nx-codes code { font-family: var(--nx-mono); font-size: .92rem; padding: .45rem .6rem; border-radius: 8px; background: var(--nx-surface-2); border: 1px solid var(--nx-line); color: var(--nx-text); text-align: center; }
@media print { .nx-side, .nx-topbar, .nx-tabbar, .btn, .nx-note { display: none !important; } }
.nx-role-picks { grid-template-columns: minmax(0, 1fr); }
.nx-server-shared { display: block; margin-top: .25rem; font-size: .74rem; color: rgba(255, 255, 255, .78); }
.nx-app .nx-server-shared { color: rgba(255, 255, 255, .78); }
.nx-server-shared .bi { color: #7fc9ff !important; }

/* ---------------------------------------------------------------- VPS (Cloud-Server) */
.nx-gauges-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .nx-gauges-2 { grid-template-columns: minmax(0, 1fr); } }
.nx-gauge.is-traffic { --tone: var(--nx-ok); }
.nx-power-quiet { opacity: .7; }
.nx-power-quiet:hover { opacity: 1; }
.nx-facts-1 { grid-template-columns: minmax(0, 1fr); }

/* Zeitraum-Umschalter über den Diagrammen */
.nx-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--nx-surface-2); border: 1px solid var(--nx-line); }
.nx-seg-btn {
   border: 0; background: transparent; color: var(--nx-muted); font-size: .78rem; font-weight: 600;
   padding: .22rem .65rem; border-radius: 999px; cursor: pointer; line-height: 1.2;
}
.nx-seg-btn:hover { color: var(--nx-text); }
.nx-seg-btn.is-active { background: var(--nx-accent); color: #fff; }

/* Verlaufsdiagramme: vier Kacheln, jede mit eigener Tonfarbe */
.nx-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
@media (max-width: 767.98px) { .nx-charts { grid-template-columns: minmax(0, 1fr); } }
.nx-chart {
   position: relative; border-radius: 14px; border: 1px solid var(--nx-line); background: var(--nx-surface-2);
   padding: .7rem .85rem .55rem; overflow: hidden;
}
.nx-chart::before {
   content: ""; position: absolute; inset: 0; pointer-events: none;
   background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%);
}
.nx-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .82rem; color: var(--nx-muted); position: relative; z-index: 1; }
.nx-chart-head .bi { color: var(--tone) !important; font-size: .8rem; margin-right: .2rem; }
.nx-chart-head b { color: var(--nx-text); font-variant-numeric: tabular-nums; font-size: .95rem; }
.nx-chart svg { display: block; width: 100%; height: 90px; margin-top: .35rem; overflow: visible; }
.nx-chart svg polyline { fill: none; stroke: var(--tone); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.nx-chart svg polygon { fill: color-mix(in srgb, var(--tone) 20%, transparent); }
.nx-chart-foot { font-size: .72rem; color: var(--nx-muted); margin-top: .25rem; }
.nx-chart.is-empty svg { opacity: .25; }

/* Betriebssystem-Kachel und aufklappbare Neuinstallation */
.nx-os-now { display: flex; align-items: center; gap: .75rem; }
.nx-os-now b { color: var(--nx-text); }
.nx-os-icon {
   width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
   background: color-mix(in srgb, var(--nx-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--nx-accent) 35%, transparent);
}
.nx-os-icon .bi { color: var(--nx-accent) !important; font-size: 1.3rem; }
.nx-details { border: 1px dashed var(--nx-line); border-radius: 12px; padding: .55rem .8rem; }
.nx-details summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--nx-text); list-style: none; display: flex; align-items: center; gap: .4rem; }
.nx-details summary::-webkit-details-marker { display: none; }
.nx-details summary .bi { color: var(--nx-muted) !important; }
.nx-details[open] { border-style: solid; border-color: color-mix(in srgb, var(--nx-bad) 45%, transparent); }
.nx-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--nx-muted); cursor: pointer; }
.nx-check input { margin-top: .2rem; accent-color: var(--nx-accent); }
.nx-check b { color: var(--nx-text); }

/* VNC-Bildschirm */
.nx-vnc { background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--nx-line); position: relative; min-height: 420px; }
.nx-vnc-screen { width: 100%; height: min(70vh, 720px); }
.nx-vnc-screen canvas { outline: none; }
.nx-vnc-wait {
   position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: rgba(255,255,255,.75);
   background: #000; font-size: .95rem; padding: 2rem;
}
.nx-vnc-wait .bi { display: block; font-size: 2rem; margin-bottom: .6rem; color: var(--nx-accent) !important; }
.nx-vnc-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .85rem; border-top: 1px solid var(--nx-line); background: var(--nx-surface-2); }

/* ---------------------------------------------------------------- Webhosting */
.nx-usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .4rem; font-size: .9rem; color: var(--nx-muted); }
.nx-usage-head b { color: var(--nx-text); font-variant-numeric: tabular-nums; }
.nx-bar { height: 9px; border-radius: 999px; background: var(--nx-surface-2); overflow: hidden; border: 1px solid var(--nx-line); }
.nx-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--nx-accent), color-mix(in srgb, var(--nx-accent) 60%, #8b5cf6)); transition: width .4s ease; }
.nx-check-list { list-style: none; margin: 0; padding: 0; }
.nx-check-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; color: var(--nx-muted); margin-bottom: .4rem; line-height: 1.4; }
.nx-check-list li:last-child { margin-bottom: 0; }
.nx-check-list .bi { color: var(--nx-ok) !important; font-size: .85rem; flex: 0 0 auto; margin-top: .15rem; }

/* ---------------------------------------------------------------- DNS-Editor */
.nx-dns-table-wrap { overflow-x: auto; }
.nx-dns-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.nx-dns-table th { text-align: left; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--nx-muted); font-weight: 700; padding: .4rem .5rem; border-bottom: 1px solid var(--nx-line); white-space: nowrap; }
.nx-dns-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--nx-line); vertical-align: middle; }
.nx-dns-table tr:last-child td { border-bottom: 0; }
.nx-mono { font-family: var(--nx-mono); font-size: .84rem; }
.nx-dns-val { min-width: 240px; }
.nx-dns-add { display: grid; grid-template-columns: 1fr .8fr 2fr .8fr auto; gap: .6rem; align-items: end; }
@media (max-width: 767.98px) { .nx-dns-add { grid-template-columns: 1fr 1fr; } .nx-dns-add-val, .nx-dns-add-btn { grid-column: 1 / -1; } }

/* Inline-Passwort-Popover (E-Mail) */
.nx-inline-pw { position: relative; }
.nx-inline-pw > summary { list-style: none; }
.nx-inline-pw > summary::-webkit-details-marker { display: none; }
.nx-pw-pop { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20; display: flex; gap: .4rem; padding: .5rem; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 10px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); width: 240px; }
.nx-pw-pop input { flex: 1 1 auto; }