#keska-preview-background {
    background:
        radial-gradient(ellipse at 83% 8%, rgba(34, 37, 145, .40), transparent 45%),
        radial-gradient(ellipse at 5% 92%, rgba(0, 130, 200, .26), transparent 45%),
        linear-gradient(135deg, #030b1e 0%, #05142c 52%, #020918 100%);
}
#keska-preview-background #matrix {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .90;
}
#keska-preview-background .circuits {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#keska-preview-background .circuit {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}
#keska-preview-background .cyan { stroke: #00cfff; }
#keska-preview-background .blue { stroke: #2379ff; }
#keska-preview-background .violet { stroke: #9942ff; }
#keska-preview-background .faint { opacity: .48; stroke-width: 1; }
#keska-preview-background .node {
    fill: #00dfff;
    filter: drop-shadow(0 0 5px #00dfff);
}
#keska-preview-background .node.violet-node {
    fill: #aa57ff;
    filter: drop-shadow(0 0 5px #aa57ff);
}
#keska-preview-background .glow {
    filter: url(#neonGlow);
}
#keska-preview-background .vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 8, .48) 100%);
}


/* KESKA PREVIEW BACKGROUND */

/* Bestehenden Dashboard-Hintergrund nur in der Vorschau ausblenden */
body.dashboard-body.keska-preview {
    background: #020713 !important;
}

body.dashboard-body.keska-preview::before {
    display: none !important;
}

/* Die bestehende Dashboard-Struktur bleibt erhalten */
body.keska-preview .dashboard-shell {
    position: relative;
    isolation: isolate;
}

/* Animierter Hintergrund */
#keska-preview-background {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Sidebar und Kacheln bleiben davor */
body.keska-preview .dashboard-shell > .sidebar {
    z-index: 20;
}

body.keska-preview .dashboard-shell > .dashboard-main {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* END KESKA PREVIEW BACKGROUND */

/* Hero-Kachel: weniger transparent */
body.keska-preview .hero-panel {
    background:
        linear-gradient(
            120deg,
            rgba(14, 19, 39, 0.96),
            rgba(16, 27, 47, 0.94)
        ) !important;
}





/* KESKA SIDEBAR MATRIX – kräftigere Darstellung */
body.keska-preview .dashboard-shell > .sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(7, 13, 30, 0.38),
            rgba(5, 10, 24, 0.48)
        ) !important;

    border-right: 1px solid rgba(0, 210, 255, 0.38) !important;
    box-shadow:
        4px 0 24px rgba(0, 150, 255, 0.14),
        inset -1px 0 12px rgba(0, 160, 255, 0.05);

    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
}


/* KESKA AVATAR – NUR VORSCHAU */
body.keska-preview .sidebar-brand .brand-icon {
    border-radius: 50% !important;
    background:
        url('/assets/keska-avatar.png') center / cover no-repeat !important;
    font-size: 0 !important;
    border: 1px solid rgba(50, 200, 255, 0.7);
    box-shadow:
        0 0 12px rgba(0, 180, 255, 0.35),
        0 0 25px rgba(130, 70, 255, 0.18);
}


/* KESKA AVATAR – 70px */
body.keska-preview .sidebar-brand .brand-icon {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
}


/* KESKA METRIC CARDS V1 START */

/* Nur Vorschauseite */
body.keska-preview .stats-grid > * {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(10, 22, 43, 0.96),
            rgba(8, 14, 30, 0.94)
        ) !important;

    border: 1px solid rgba(0, 190, 255, 0.48) !important;
    border-radius: 17px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 22px rgba(0, 150, 255, 0.08);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* Unterschiedliche Neon-Akzente */
body.keska-preview .stats-grid > :nth-child(2) {
    border-color: rgba(90, 110, 255, 0.58) !important;
}

body.keska-preview .stats-grid > :nth-child(3) {
    border-color: rgba(167, 80, 255, 0.56) !important;
}

body.keska-preview .stats-grid > :nth-child(4) {
    border-color: rgba(75, 135, 255, 0.52) !important;
}

/* Leichte Beleuchtung oben */
body.keska-preview .stats-grid > *::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 215, 255, 0.72),
        transparent
    );
    pointer-events: none;
}

/* Hover */
body.keska-preview .stats-grid > *:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 225, 255, 0.85) !important;
    box-shadow:
        0 0 26px rgba(0, 175, 255, 0.19),
        inset 0 0 20px rgba(0, 145, 255, 0.035);
}

/* Zahlen und Beschriftungen */
body.keska-preview .stats-grid .stat-value {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(70, 170, 255, 0.12);
}

body.keska-preview .stats-grid .stat-label {
    color: #a9c5e7;
}

/* Fortschrittsbalken */
body.keska-preview .stats-grid .progress-bar {
    box-shadow: 0 0 12px rgba(0, 195, 255, 0.28);
}

/* KESKA METRIC CARDS V1 END */


/* KESKA METRIC ICONS – NUR VORSCHAU */
body.keska-preview .stats-grid .stat-icon {
    display: inline-grid;
    place-items: center;
    width: 37px;
    height: 37px;
    min-width: 37px;
    border-radius: 11px;
    color: #25d9ff;
    background: rgba(0, 170, 255, 0.12);
    box-shadow: 0 0 18px rgba(0, 190, 255, 0.12);
}

body.keska-preview .stats-grid .stat-card:nth-child(3) .stat-icon {
    color: #ad75ff;
    background: rgba(145, 70, 255, 0.12);
}

body.keska-preview .keska-stat-svg {
    width: 23px;
    height: 23px;
}

body.keska-preview .stats-grid .stat-card-top {
    gap: 10px;
}


/* KESKA LIVE CHARTS START */

body.keska-preview .stats-grid .stat-card {
    position: relative;
}

body.keska-preview .stats-grid .stat-card-top,
body.keska-preview .stats-grid .stat-value,
body.keska-preview .stats-grid .progress,
body.keska-preview .stats-grid .stat-footer {
    position: relative;
    z-index: 2;
}

body.keska-preview .keska-chart-wrap {
    position: absolute;
    top: 66px;
    right: 16px;
    width: 39%;
    height: 45px;
    z-index: 1;
    pointer-events: none;
}

body.keska-preview .keska-chart-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* KESKA LIVE CHARTS END */


/* KESKA INFRA DESIGN START */

body.keska-preview .infra-grid .overview-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(10, 22, 43, 0.97),
            rgba(7, 13, 28, 0.95)
        ) !important;

    border: 1px solid rgba(0, 195, 255, 0.48) !important;
    border-radius: 17px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 24px rgba(0, 175, 255, .08);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

body.keska-preview .infra-grid .overview-card:nth-child(2) {
    border-color: rgba(65, 135, 255, .55) !important;
}

body.keska-preview .infra-grid .overview-card:nth-child(3) {
    border-color: rgba(155, 90, 255, .52) !important;
}

body.keska-preview .infra-grid .overview-card:nth-child(4) {
    border-color: rgba(0, 205, 255, .62) !important;
}

body.keska-preview .infra-grid .overview-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 225, 255, .9) !important;
    box-shadow:
        0 0 28px rgba(0, 180, 255, .18),
        inset 0 0 24px rgba(0, 150, 255, .04);
}

body.keska-preview .infra-grid .overview-card-header,
body.keska-preview .infra-grid .overview-big-value,
body.keska-preview .infra-grid .nas-overview-main,
body.keska-preview .infra-grid .network-overview,
body.keska-preview .infra-grid .overview-status-line {
    position: relative;
    z-index: 2;
}

body.keska-preview .keska-infra-art {
    position: absolute;
    z-index: 1;
    color: #00cfff;
    opacity: .65;
    pointer-events: none;
    filter: drop-shadow(0 0 9px rgba(0, 190, 255, .45));
}

body.keska-preview .keska-infra-art svg {
    display: block;
    width: 100%;
    height: 100%;
}

body.keska-preview .infra-grid .overview-card:nth-child(2)
.keska-infra-art {
    color: #488dff;
}

body.keska-preview .infra-grid .overview-card:nth-child(3)
.keska-infra-art {
    color: #986aff;
    opacity: .35;
}

body.keska-preview .infra-grid .overview-card:nth-child(4)
.keska-infra-art {
    color: #00dfff;
}

@media (max-width: 1100px) {
    body.keska-preview .keska-infra-art {
        width: 90px;
        height: 90px;
        opacity: .35;
    }
}

/* KESKA INFRA DESIGN END */

/* KESKA: Infrastruktur-Symbole kompakter */
body.keska-preview .keska-infra-art {
    width: 75px !important;
    height: 70px !important;
    right: 15px !important;
    top: 70px !important;
    opacity: 0.50 !important;
}

body.keska-preview .infra-grid .overview-card:nth-child(3) .keska-infra-art {
    opacity: 0.28 !important;
}

@media (max-width: 1100px) {
    body.keska-preview .keska-infra-art {
        width: 60px !important;
        height: 56px !important;
    }
}

/* Platz für das NAS-Symbol rechts schaffen */
body.keska-preview .infra-grid .overview-card:nth-child(3) .nas-overview-values {
    margin-right: 64px !important;
    min-width: 0 !important;
}

body.keska-preview .infra-grid .overview-card:nth-child(3) .nas-overview-values > div {
    gap: 8px !important;
}

/* ===================================================
   KESKA CONTROL CENTER – PERFORMANCE & INTERNET
   Nur Vorschau, keine Änderungen an Live-Funktionen
   =================================================== */

/* Grunddesign der beiden unteren Kacheln */
body.keska-preview .performance-grid > .performance-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 200, 255, 0.48) !important;
    border-radius: 17px !important;
    background:
        linear-gradient(
            145deg,
            rgba(7, 19, 42, 0.96),
            rgba(10, 15, 34, 0.94)
        ) !important;
    box-shadow:
        inset 0 0 25px rgba(0, 180, 255, 0.025),
        0 0 20px rgba(0, 180, 255, 0.06);
}

/* Internet erhält einen violetten Akzent */
body.keska-preview .performance-grid > .speedtest-overview-panel {
    border-color: rgba(153, 86, 255, 0.52) !important;
    box-shadow:
        inset 0 0 25px rgba(150, 80, 255, 0.025),
        0 0 20px rgba(150, 80, 255, 0.07);
}

/* Überschriften */
body.keska-preview .performance-grid .panel-header {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid rgba(100, 150, 220, 0.12);
}

body.keska-preview .performance-grid .panel-header h3 {
    color: #f5f9ff;
    font-weight: 800;
}

/* Header-Symbole */
body.keska-preview .performance-grid .panel-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 12px;
    color: #32dcff;
    background: rgba(0, 190, 255, 0.10);
    border: 1px solid rgba(0, 190, 255, 0.20);
    box-shadow: 0 0 15px rgba(0, 190, 255, 0.10);
    font-size: 23px;
}

body.keska-preview .speedtest-overview-panel .panel-icon {
    color: #c88aff;
    background: rgba(165, 80, 255, 0.12);
    border-color: rgba(165, 80, 255, 0.25);
}

/* Performance: drei Load-Felder */
body.keska-preview .performance-grid .load-grid {
    gap: 12px;
    margin-top: 16px;
}

body.keska-preview .performance-grid .load-grid > div {
    position: relative;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid rgba(0, 190, 255, 0.17);
    background: rgba(3, 15, 35, 0.65);
    box-shadow: inset 0 0 20px rgba(0, 190, 255, 0.025);
}

/* Schmaler Neon-Akzent */
body.keska-preview .performance-grid .load-grid > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #00cfff,
        transparent
    );
    opacity: 0.65;
}

body.keska-preview .performance-grid .load-grid strong {
    color: #ffffff;
    font-size: 25px;
    font-weight: 850;
    text-shadow: 0 0 18px rgba(0, 200, 255, 0.16);
}

body.keska-preview .performance-grid .load-grid span {
    color: #91a9c5;
    font-size: 11px;
}

/* Internet: drei Speedtest-Felder */
body.keska-preview .performance-grid .speed-overview-grid {
    gap: 12px;
    margin-top: 16px;
}

body.keska-preview .performance-grid .speed-overview-grid > div {
    position: relative;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid rgba(120, 110, 255, 0.20);
    background: rgba(7, 13, 36, 0.70);
    text-align: center;
}

/* Unterschiedliche Akzentfarben */
body.keska-preview .speed-overview-grid > div:nth-child(1) {
    border-color: rgba(0, 210, 255, 0.32);
}

body.keska-preview .speed-overview-grid > div:nth-child(2) {
    border-color: rgba(155, 100, 255, 0.34);
}

body.keska-preview .speed-overview-grid > div:nth-child(3) {
    border-color: rgba(54, 225, 170, 0.30);
}

/* Kleine Symbole über den Messwerten */
body.keska-preview .speed-overview-grid > div::before {
    display: block;
    margin-bottom: 8px;
    font-size: 21px;
    font-weight: 700;
}

body.keska-preview .speed-overview-grid > div:nth-child(1)::before {
    content: "↓";
    color: #25d9ff;
}

body.keska-preview .speed-overview-grid > div:nth-child(2)::before {
    content: "↑";
    color: #bc83ff;
}

body.keska-preview .speed-overview-grid > div:nth-child(3)::before {
    content: "◷";
    color: #42e6b3;
}

body.keska-preview .speed-overview-grid strong {
    color: #f7f9ff;
    font-size: 24px;
    font-weight: 850;
}

body.keska-preview .speed-overview-grid small {
    color: #8b9eb9;
}

/* Speedtest-Fußzeile */
body.keska-preview .speedtest-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(120, 140, 200, 0.15);
}

/* Kleine Displays */
@media (max-width: 700px) {
    body.keska-preview .performance-grid .load-grid,
    body.keska-preview .performance-grid .speed-overview-grid {
        gap: 7px;
    }

    body.keska-preview .performance-grid .load-grid > div,
    body.keska-preview .performance-grid .speed-overview-grid > div {
        padding: 12px 6px;
    }

    body.keska-preview .performance-grid .load-grid strong,
    body.keska-preview .speed-overview-grid strong {
        font-size: 19px;
    }
}

/* ============================================
   KESKA – Performance & Internet kompakter
   Nur Vorschau
   ============================================ */

body.keska-preview .performance-grid {
    align-items: stretch;
}

/* Beide Hauptkacheln */
body.keska-preview .performance-grid > .performance-panel {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 20px 16px !important;
}

/* Überschriften kompakter */
body.keska-preview .performance-grid .panel-header {
    padding-bottom: 11px !important;
}

/* Load-Felder */
body.keska-preview .performance-grid .load-grid {
    margin-top: 13px !important;
    gap: 11px !important;
}

body.keska-preview .performance-grid .load-grid > div {
    padding: 14px 10px 12px !important;
}

body.keska-preview .performance-grid .load-grid strong {
    font-size: 23px !important;
}

/* Speedtest-Felder */
body.keska-preview .performance-grid .speed-overview-grid {
    margin-top: 13px !important;
    gap: 11px !important;
}

body.keska-preview .performance-grid .speed-overview-grid > div {
    padding: 12px 10px 11px !important;
}

body.keska-preview .speed-overview-grid > div::before {
    margin-bottom: 5px !important;
    font-size: 19px !important;
}

body.keska-preview .speed-overview-grid strong {
    font-size: 23px !important;
}

/* Speedtest-Footer */
body.keska-preview .speedtest-footer {
    margin-top: 11px !important;
    padding-top: 10px !important;
}

/* Auf kleinen Bildschirmen nicht unnötig einengen */
@media (max-width: 700px) {
    body.keska-preview .performance-grid > .performance-panel {
        padding: 15px 12px !important;
    }
}

/* ============================================
   KESKA – System Load vertikal zentrieren
   ============================================ */

/* Nur die Performance-Kachel, nicht den Speedtest */
body.keska-preview .performance-panel:not(.speedtest-overview-panel) .load-grid {
    margin-top: 38px !important;
    margin-bottom: 20px !important;
}

/* Messwert-Felder etwas höher für ausgewogene Optik */
body.keska-preview .performance-panel:not(.speedtest-overview-panel) .load-grid > div {
    min-height: 108px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

@media (max-width: 700px) {
    body.keska-preview .performance-panel:not(.speedtest-overview-panel) .load-grid {
        margin-top: 15px !important;
        margin-bottom: 10px !important;
    }
}


/* KESKA – System Load Feinausrichtung */
@media (min-width: 701px) {
    body.keska-preview .performance-panel:not(.speedtest-overview-panel) .load-grid {
        margin-top: 16px !important;
        margin-bottom: 20px !important;
    }
}

/* ============================================
   KESKA – System Load Zeitsymbole
   ============================================ */

body.keska-preview .performance-panel:not(.speedtest-overview-panel)
.load-grid > div {
    position: relative;
    gap: 4px !important;
}

body.keska-preview .keska-load-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #37d8ff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

body.keska-preview .keska-load-icon svg {
    width: 15px;
    height: 15px;
    filter: drop-shadow(0 0 5px rgba(55,216,255,.35));
}

body.keska-preview .load-grid > div:nth-child(2) .keska-load-icon {
    color: #a58aff;
}

body.keska-preview .load-grid > div:nth-child(3) .keska-load-icon {
    color: #34e6ba;
}



/* ==============================================
   KESKA – große Live-Metrikdiagramme
   ============================================== */

body.keska-preview .stats-grid .stat-card {
    position: relative;
    overflow: hidden;
    min-height: 180px;
}

body.keska-preview .keska-metric-chart {
    position: absolute;
    right: 16px;
    top: 54px;
    width: 43%;
    height: 80px;
    pointer-events: none;
    opacity: .95;
    z-index: 1;
}

body.keska-preview .keska-metric-chart canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

body.keska-preview .stat-card .stat-value {
    position: relative;
    z-index: 2;
}

body.keska-preview .stat-card .progress,
body.keska-preview .stat-card .stat-footer {
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    body.keska-preview .keska-metric-chart {
        width: 38%;
        height: 65px;
    }
}