:root {
    /* ... (variables existentes sin cambios) ... */
    --dsdk-font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --dsdk-font-mono: 'Consolas', 'Menlo', 'Monaco', monospace;
    
    --dsdk-text-color: #e0e0e0;
    --dsdk-text-color-darker: #a0a0a0;
    --dsdk-text-color-dim: #707070;

    --dsdk-accent-color-main: #8A2BE2; /* BlueViolet */
    --dsdk-accent-color-secondary: #00E5E5; /* Cyan / Teal brillante */
    
    --dsdk-warning-color: #FFD700; /* Gold */
    --dsdk-danger-color: #FF4500; /* OrangeRed */
    --dsdk-success-color: #32CD32; /* LimeGreen */

    --dsdk-rgb-warning-color: 255, 215, 0;
    --dsdk-rgb-danger-color: 255, 69, 0;
    --dsdk-rgb-success-color: 50, 205, 50;
    --dsdk-rgb-accent-secondary: 0, 229, 229;

    --dsdk-panel-bg: rgba(10, 10, 20, 0.7);
    --dsdk-panel-border-default: rgba(0, 229, 229, 0.2);
    --dsdk-panel-border-critical: rgba(var(--dsdk-rgb-danger-color), 0.4);
    --dsdk-panel-border-warning: rgba(var(--dsdk-rgb-warning-color), 0.4);
    --dsdk-panel-border-stable: rgba(var(--dsdk-rgb-success-color), 0.3);

    --dsdk-panel-header-bg-default: rgba(0, 229, 229, 0.1);
    --dsdk-panel-header-bg-critical: rgba(var(--dsdk-rgb-danger-color), 0.2);
    --dsdk-panel-header-bg-warning: rgba(var(--dsdk-rgb-warning-color), 0.2);
    --dsdk-panel-header-bg-stable: rgba(var(--dsdk-rgb-success-color), 0.2);

    --dsdk-scanline-halo-color-default: rgba(var(--dsdk-rgb-danger-color), 0.15);
    --dsdk-scanline-thickness-default: 4px; 
    
    --dsdk-pulse-bar-color: var(--dsdk-accent-color-secondary);
    --dsdk-pulse-bar-min-height: 20%;
    --dsdk-pulse-bar-max-height: 80%;
    --dsdk-pulse-bar-opacity-min: 0.6;
    --dsdk-pulse-bar-opacity-max: 1;
    --dsdk-pulse-bar-shadow-intensity: 3px;

    --dsdk-gauge-bg-color: rgba(0, 0, 0, 0.1); 
    --dsdk-gauge-arc-background: rgba(255, 255, 255, 0.08);
    --dsdk-gauge-arc-normal: var(--dsdk-accent-color-secondary);
    --dsdk-gauge-arc-warning: var(--dsdk-warning-color);
    --dsdk-gauge-arc-critical: var(--dsdk-danger-color);
    --dsdk-gauge-arc-stable: var(--dsdk-success-color);
    --dsdk-gauge-value-color-normal: var(--dsdk-text-color);
    --dsdk-gauge-value-color-warning: var(--dsdk-warning-color);
    --dsdk-gauge-value-color-critical: var(--dsdk-danger-color);
    --dsdk-gauge-value-color-stable: var(--dsdk-success-color);
    --dsdk-gauge-label-color: var(--dsdk-text-color-dim);
    --dsdk-gauge-units-color: var(--dsdk-text-color-darker);
    --dsdk-gauge-target-marker-color: rgba(255, 255, 255, 0.6);

    --dsdk-status-led-size: 10px;
    --dsdk-status-led-shadow-intensity: 4px;
    --dsdk-status-led-color-green: var(--dsdk-success-color);
    --dsdk-status-led-color-yellow: var(--dsdk-warning-color);
    --dsdk-status-led-color-red: var(--dsdk-danger-color);
    --dsdk-status-led-color-blue: var(--dsdk-accent-color-secondary);
    --dsdk-status-led-color-orange: #FFA500;
    --dsdk-status-led-color-purple: #8A2BE2;
    --dsdk-status-led-color-cyan: #00FFFF;
    --dsdk-status-led-color-white: #FFFFFF;
    --dsdk-status-led-color-off: #4a4a52;
    --dsdk-status-led-rgb-green: var(--dsdk-rgb-success-color);
    --dsdk-status-led-rgb-yellow: var(--dsdk-rgb-warning-color);
    --dsdk-status-led-rgb-red: var(--dsdk-rgb-danger-color);
    --dsdk-status-led-rgb-blue: var(--dsdk-rgb-accent-secondary);
    --dsdk-status-led-rgb-orange: 255, 165, 0;
    --dsdk-status-led-rgb-purple: 138, 43, 226;
    --dsdk-status-led-rgb-cyan: 0, 255, 255;
    --dsdk-status-led-rgb-white: 255, 255, 255;
    --dsdk-status-led-rgb-off: 74, 74, 82;

    --dsdk-gauge-h-track-bg: rgba(255, 255, 255, 0.08);
    --dsdk-gauge-h-bar-normal: var(--dsdk-accent-color-secondary);
    --dsdk-gauge-h-bar-warning: var(--dsdk-warning-color);
    --dsdk-gauge-h-bar-critical: var(--dsdk-danger-color);
    --dsdk-gauge-h-bar-stable: var(--dsdk-success-color);
    --dsdk-gauge-h-value-color: var(--dsdk-text-color);
    --dsdk-gauge-h-label-color: var(--dsdk-text-color-dim);
    --dsdk-gauge-h-units-color: var(--dsdk-text-color-darker);

    --dsdk-tv-noise-svg-uri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='dsdk-noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dsdk-noise)'/%3E%3C/svg%3E");
    --dsdk-rolling-bar-color: rgba(0, 0, 0, 0.6);
    --dsdk-current-rolling-bar-height: 2px; 
    --dsdk-current-rolling-bar-speed: 4s;   

    --dsdk-particle-color-normal-primary-base: 0, 200, 220;
    --dsdk-particle-color-normal-secondary-base: 150, 220, 255;
    --dsdk-particle-color-warning-primary-base: 255, 215, 0;
    --dsdk-particle-color-warning-secondary-base: 255, 165, 0;
    --dsdk-particle-color-critical-primary-base: 255, 69, 0;
    --dsdk-particle-color-critical-secondary-base: 220, 20, 60;
    --dsdk-particle-color-stable-primary-base: 50, 205, 50;
    --dsdk-particle-color-stable-secondary-base: 0, 180, 180;

    --dsdk-particle-opacity-primary: 0.8;
    --dsdk-particle-opacity-secondary: 0.8;
    --dsdk-particle-opacity-tertiary: 0.8;
    --dsdk-particle-opacity-faint: 0.8;

    --dsdk-current-particle-primary: rgba(var(--dsdk-particle-color-normal-primary-base), var(--dsdk-particle-opacity-primary));
    --dsdk-current-particle-secondary: rgba(var(--dsdk-particle-color-normal-secondary-base), var(--dsdk-particle-opacity-secondary));
    --dsdk-current-particle-tertiary: rgba(var(--dsdk-particle-color-normal-primary-base), var(--dsdk-particle-opacity-tertiary));
    --dsdk-current-particle-faint: rgba(var(--dsdk-particle-color-normal-secondary-base), var(--dsdk-particle-opacity-faint));

    --dsdk-particle-speed-slow: 18s;
    --dsdk-particle-speed-medium: 15s;
    --dsdk-particle-speed-fast: 12s;
    --dsdk-particle-burst-speed: 3s;

    --dsdk-radar-sweep-color-base-normal: var(--dsdk-accent-color-secondary);
    --dsdk-radar-sweep-color-base-warning: var(--dsdk-warning-color);
    --dsdk-radar-sweep-color-base-critical: var(--dsdk-danger-color);
    --dsdk-radar-sweep-color-base-stable: var(--dsdk-success-color);

    --dsdk-radar-grid-color-base-normal: rgba(var(--dsdk-rgb-accent-secondary), 0.3);
    --dsdk-radar-grid-color-base-warning: rgba(var(--dsdk-rgb-warning-color), 0.3);
    --dsdk-radar-grid-color-base-critical: rgba(var(--dsdk-rgb-danger-color), 0.3);
    --dsdk-radar-grid-color-base-stable: rgba(var(--dsdk-rgb-success-color), 0.3);

    --dsdk-radar-point-color-base-normal: var(--dsdk-text-color);
    --dsdk-radar-point-color-base-warning: var(--dsdk-warning-color);
    --dsdk-radar-point-color-base-critical: var(--dsdk-danger-color);
    --dsdk-radar-point-color-base-stable: var(--dsdk-success-color);
    
    --dsdk-radar-point-highlight-color: #FFFFFF;
    --dsdk-radar-sweep-opacity: 0.25;
    --dsdk-radar-grid-line-width: 0.5px;
    --dsdk-radar-grid-dash: 2, 3;
    --dsdk-radar-outer-circle-line-width: 1.5px; /* Nueva variable */
}

*, *::before, *::after { box-sizing: border-box; }
.dsdk-panel { 
    background-color: var(--dsdk-panel-bg); 
    border: 1px solid var(--dsdk-panel-border-default); 
    border-radius: 0.5rem; 
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3); 
    transition: border-color 0.5s ease-in-out, box-shadow 0.3s ease-in-out; 
    position: relative; 
    font-family: var(--dsdk-font-sans); 
    color: var(--dsdk-text-color); 
    margin-bottom: 10px; 
}
.dsdk-panel-header { 
    font-size: 0.9rem; 
    font-weight: 600; 
    color: var(--dsdk-accent-color-secondary); 
    padding: 8px 10px; 
    border-bottom: 1px solid var(--dsdk-panel-header-bg-default); 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    flex-shrink: 0;
    transition: color 0.5s ease-in-out, border-bottom-color 0.5s ease-in-out; 
    position: relative; 
    z-index: 2; 
}
.dsdk-panel-content { 
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 10px; 
    font-size: 0.8rem; 
    scrollbar-width: thin; 
    scrollbar-color: var(--dsdk-accent-color-secondary) var(--dsdk-panel-bg); 
    position: relative; 
    z-index: 2; 
    max-height: 250px; 
}

.dsdk-integrity-pulse-panel .dsdk-panel-content,
.dsdk-canvas-graph-panel .dsdk-panel-content,
.dsdk-true-canvas-graph-panel .dsdk-panel-content,
.dsdk-critical-warning-text-panel .dsdk-panel-content,
.dsdk-circular-gauge-panel .dsdk-panel-content,
.dsdk-horizontal-bar-gauge-panel .dsdk-panel-content,
.dsdk-image-display-panel .dsdk-panel-content,
.dsdk-radar-display-panel .dsdk-panel-content {
    padding: 0 !important; 
    max-height: none !important; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}

.dsdk-panel-content::-webkit-scrollbar { width: 6px; }
.dsdk-panel-content::-webkit-scrollbar-track { background: var(--dsdk-panel-bg); border-radius: 3px; }
.dsdk-panel-content::-webkit-scrollbar-thumb { background-color: var(--dsdk-accent-color-secondary); border-radius: 3px; }

.dsdk-panel.dsdk-panel-normal {
    --dsdk-current-particle-primary: rgba(var(--dsdk-particle-color-normal-primary-base), var(--dsdk-particle-opacity-primary));
    --dsdk-current-particle-secondary: rgba(var(--dsdk-particle-color-normal-secondary-base), var(--dsdk-particle-opacity-secondary));
    --dsdk-current-particle-tertiary: rgba(var(--dsdk-particle-color-normal-primary-base), var(--dsdk-particle-opacity-tertiary));
    --dsdk-current-particle-faint: rgba(var(--dsdk-particle-color-normal-secondary-base), var(--dsdk-particle-opacity-faint));
    --dsdk-current-radar-sweep-color: var(--dsdk-radar-sweep-color-base-normal);
    --dsdk-current-radar-grid-color: var(--dsdk-radar-grid-color-base-normal);
    --dsdk-current-radar-point-color: var(--dsdk-radar-point-color-base-normal);
}
.dsdk-panel.dsdk-panel-critical { 
    border-color: var(--dsdk-panel-border-critical); 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3), 0 0 15px rgba(var(--dsdk-rgb-danger-color), 0.2); 
    --dsdk-current-particle-primary: rgba(var(--dsdk-particle-color-critical-primary-base), var(--dsdk-particle-opacity-primary));
    --dsdk-current-particle-secondary: rgba(var(--dsdk-particle-color-critical-secondary-base), var(--dsdk-particle-opacity-secondary));
    --dsdk-current-particle-tertiary: rgba(var(--dsdk-particle-color-critical-primary-base), var(--dsdk-particle-opacity-tertiary));
    --dsdk-current-particle-faint: rgba(var(--dsdk-particle-color-critical-secondary-base), var(--dsdk-particle-opacity-faint));
    --dsdk-current-radar-sweep-color: var(--dsdk-radar-sweep-color-base-critical);
    --dsdk-current-radar-grid-color: var(--dsdk-radar-grid-color-base-critical);
    --dsdk-current-radar-point-color: var(--dsdk-radar-point-color-base-critical);
}
.dsdk-panel.dsdk-panel-critical .dsdk-panel-header { color: var(--dsdk-danger-color); border-bottom-color: var(--dsdk-panel-header-bg-critical); }

.dsdk-panel.dsdk-panel-warning { 
    border-color: var(--dsdk-panel-border-warning); 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3), 0 0 10px rgba(var(--dsdk-rgb-warning-color), 0.15); 
    --dsdk-current-particle-primary: rgba(var(--dsdk-particle-color-warning-primary-base), var(--dsdk-particle-opacity-primary));
    --dsdk-current-particle-secondary: rgba(var(--dsdk-particle-color-warning-secondary-base), var(--dsdk-particle-opacity-secondary));
    --dsdk-current-particle-tertiary: rgba(var(--dsdk-particle-color-warning-primary-base), var(--dsdk-particle-opacity-tertiary));
    --dsdk-current-particle-faint: rgba(var(--dsdk-particle-color-warning-secondary-base), var(--dsdk-particle-opacity-faint));
    --dsdk-current-radar-sweep-color: var(--dsdk-radar-sweep-color-base-warning);
    --dsdk-current-radar-grid-color: var(--dsdk-radar-grid-color-base-warning);
    --dsdk-current-radar-point-color: var(--dsdk-radar-point-color-base-warning);
}
.dsdk-panel.dsdk-panel-warning .dsdk-panel-header { color: var(--dsdk-warning-color); border-bottom-color: var(--dsdk-panel-header-bg-warning); }

.dsdk-panel.dsdk-panel-stable { 
    border-color: var(--dsdk-panel-border-stable); 
    --dsdk-current-particle-primary: rgba(var(--dsdk-particle-color-stable-primary-base), var(--dsdk-particle-opacity-primary));
    --dsdk-current-particle-secondary: rgba(var(--dsdk-particle-color-stable-secondary-base), var(--dsdk-particle-opacity-secondary));
    --dsdk-current-particle-tertiary: rgba(var(--dsdk-particle-color-stable-primary-base), var(--dsdk-particle-opacity-tertiary));
    --dsdk-current-particle-faint: rgba(var(--dsdk-particle-color-stable-secondary-base), var(--dsdk-particle-opacity-faint));
    --dsdk-current-radar-sweep-color: var(--dsdk-radar-sweep-color-base-stable);
    --dsdk-current-radar-grid-color: var(--dsdk-radar-grid-color-base-stable);
    --dsdk-current-radar-point-color: var(--dsdk-radar-point-color-base-stable);
}
.dsdk-panel.dsdk-panel-stable .dsdk-panel-header { color: var(--dsdk-success-color); border-bottom-color: var(--dsdk-panel-header-bg-stable); }

.dsdk-panel.dsdk-scanline-halo-active::after { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    border-radius: inherit; 
    background-image: linear-gradient( transparent 50%, var(--dsdk-current-scanline-halo-color, var(--dsdk-scanline-halo-color-default)) 50% ); 
    background-size: 100% var(--dsdk-current-scanline-thickness, var(--dsdk-scanline-thickness-default)); 
    opacity: var(--dsdk-current-scanline-opacity, 0.08); 
    animation: dsdk-scanlines-anim 10s linear infinite; 
    pointer-events: none; 
    z-index: 1; 
    transition: opacity 0.5s ease-in-out; 
}
@keyframes dsdk-scanlines-anim { 0% { background-position: 0 0; } 100% { background-position: 0 100px; } }
.dsdk-panel:not(.dsdk-scanline-halo-active)::after { opacity: 0; }

.dsdk-panel[class*="dsdk-particle-effect-"]::before,
.dsdk-panel[class*="dsdk-particle-effect-"]::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0; 
    opacity: 0; 
    will-change: transform, opacity, box-shadow;
    transition: background 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
@keyframes dsdk-particle-effect-1-float {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: var(--dsdk-particle-opacity-primary); }
    100% { transform: translateY(-200px) translateX(10px) rotate(30deg); opacity: 0; }
}
.dsdk-panel.dsdk-particle-effect-1::before {
    width: 6px; height: 6px;
    background: var(--dsdk-current-particle-primary);
    border-radius: 50%;
    top: 200px; left: 20%;
    box-shadow: 
        30px -10px 0 1px var(--dsdk-current-particle-secondary), 
        60px 20px 0 0px var(--dsdk-current-particle-tertiary),   
        -20px 40px 0 0px var(--dsdk-current-particle-faint),
        10px 60px 0 -1px var(--dsdk-current-particle-secondary);  
    animation: dsdk-particle-effect-1-float var(--dsdk-particle-speed-slow) linear infinite;
    animation-delay: 0s;
}
.dsdk-panel.dsdk-particle-effect-1::after {
    width: 5px; height: 5px;
    background: var(--dsdk-current-particle-secondary);
    border-radius: 50%;
    top: 200px; left: 70%;
     box-shadow: 
        40px -30px 0 0px var(--dsdk-current-particle-tertiary),  
        -30px 0px 0 -1px var(--dsdk-current-particle-faint), 
        15px 50px 0 0px var(--dsdk-current-particle-primary);   
    animation: dsdk-particle-effect-1-float var(--dsdk-particle-speed-medium) linear infinite;
    animation-delay: calc(var(--dsdk-particle-speed-medium) / -3); 
}
@keyframes dsdk-particle-effect-2-confetti-burst {
    0% { opacity: var(--dsdk-particle-opacity-primary); transform: scale(0.2); 
         box-shadow: 0 0 0 0px var(--dsdk-current-particle-primary), 
                     0 0 0 0px var(--dsdk-current-particle-secondary), 
                     0 0 0 0px var(--dsdk-current-particle-tertiary), 
                     0 0 0 0px var(--dsdk-current-particle-faint), 
                     0 0 0 0px var(--dsdk-current-particle-primary); }
    100% { opacity: 0; transform: scale(1.2); 
           box-shadow: -100px 50px 0 -5px rgba(0,0,0,0), 
                       120px -30px 0 -3px rgba(0,0,0,0), 
                       0px 150px 0 0px rgba(0,0,0,0), 
                       -80px -100px 0 2px rgba(0,0,0,0), 
                       90px 90px 0 -1px rgba(0,0,0,0); }
}
.dsdk-panel.dsdk-particle-effect-2::before {
    width: 8px; height: 8px;
    background: var(--dsdk-current-particle-primary); 
    top: 50%; left: 50%;
    transform-origin: center;
    animation: dsdk-particle-effect-2-confetti-burst var(--dsdk-particle-burst-speed) ease-out infinite;
    border-radius: 50%;
}
.dsdk-panel.dsdk-particle-effect-2::after {
    width: 10px; height: 10px;
    background: var(--dsdk-current-particle-secondary);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform-origin: center;
    animation: dsdk-particle-effect-2-confetti-burst var(--dsdk-particle-burst-speed) ease-out infinite;
    animation-delay: -0.5s; 
}
@keyframes dsdk-particle-effect-3-ascent {
    0% { transform: translateY(0) scale(0.8); opacity: var(--dsdk-particle-opacity-primary); }
    100% { transform: translateY(-250px) scale(0.2); opacity: 0; }
}
.dsdk-panel.dsdk-particle-effect-3::before {
    width: 12px; height: 8px;
    background: var(--dsdk-current-particle-primary);
    border-radius: 50% 30% / 40% 60%;
    top: 220px; left: 30%;
    box-shadow: 
        40px -20px 0 0px var(--dsdk-current-particle-secondary),
        -30px 30px 0 1px var(--dsdk-current-particle-tertiary),
        20px 70px 0 -1px var(--dsdk-current-particle-faint);
    animation: dsdk-particle-effect-3-ascent var(--dsdk-particle-speed-slow) linear infinite;
    animation-delay: 0s;
}
.dsdk-panel.dsdk-particle-effect-3::after {
    width: 10px; height: 10px;
    background: var(--dsdk-current-particle-secondary);
    border-radius: 50%;
    top: 220px; left: 65%;
    box-shadow: 
        50px -10px 0 0px var(--dsdk-current-particle-tertiary),
        -20px 50px 0 -1px var(--dsdk-current-particle-faint);
    animation: dsdk-particle-effect-3-ascent var(--dsdk-particle-speed-medium) linear infinite;
    animation-delay: calc(var(--dsdk-particle-speed-medium) / -2.5);
}
@keyframes dsdk-particle-effect-4-swirl {
    0% { transform: translateY(0) rotate(0deg); opacity: var(--dsdk-particle-opacity-primary); }
    100% { transform: translateY(-230px) rotate(520deg); opacity: 0; }
}
.dsdk-panel.dsdk-particle-effect-4::before {
    width: 6px; height: 6px;
    background: var(--dsdk-current-particle-primary);
    border-radius: 50%;
    top: 210px; left: 15%;
    box-shadow: 
        20px 10px 0 0px var(--dsdk-current-particle-secondary),
        50px -5px 0 1px var(--dsdk-current-particle-tertiary),
        70px 20px 0 -1px var(--dsdk-current-particle-faint);
    animation: dsdk-particle-effect-4-swirl var(--dsdk-particle-speed-fast) linear infinite;
}
.dsdk-panel.dsdk-particle-effect-4::after {
    width: 4px; height: 4px;
    background: var(--dsdk-current-particle-secondary);
    border-radius: 50%;
    top: 210px; left: 80%;
    box-shadow: 
        30px 15px 0 0px var(--dsdk-current-particle-tertiary),
        -25px -10px 0 0px var(--dsdk-current-particle-faint),
        10px 35px 0 -1px var(--dsdk-current-particle-primary);
    animation: dsdk-particle-effect-4-swirl var(--dsdk-particle-speed-medium) linear infinite;
    animation-delay: calc(var(--dsdk-particle-speed-medium) / -2);
}
@keyframes dsdk-particle-effect-5-wave {
    0% { transform: translate(0, 0) scale(0.8); opacity: var(--dsdk-particle-opacity-primary); }
    25% { transform: translate(15px, -40px) scale(0.7); opacity: var(--dsdk-particle-opacity-secondary); }
    50% { transform: translate(-10px, -100px) scale(0.6); opacity: var(--dsdk-particle-opacity-tertiary); }
    75% { transform: translate(8px, -150px) scale(0.4); opacity: var(--dsdk-particle-opacity-faint); }
    100% { transform: translate(0px, -220px) scale(0.1); opacity: 0; }
}
.dsdk-panel.dsdk-particle-effect-5::before {
    width: 8px; height: 8px;
    background: var(--dsdk-current-particle-primary);
    border-radius: 40% 60% 70% 30% / 50% 50% 50% 50%;
    top: 200px; left: 25%;
    box-shadow:
      30px 10px 0 0 var(--dsdk-current-particle-secondary), 
      60px -15px 0 1px var(--dsdk-current-particle-tertiary);
    animation: dsdk-particle-effect-5-wave var(--dsdk-particle-speed-slow) ease-in-out infinite;
}
.dsdk-panel.dsdk-particle-effect-5::after {
    width: 10px; height: 6px;
    background: var(--dsdk-current-particle-secondary);
    border-radius: 60% 40% 30% 70% / 50% 50% 50% 50%;
    top: 200px; left: 75%;
    box-shadow:
      -40px 20px 0 1px var(--dsdk-current-particle-tertiary),
      20px -30px 0 0 var(--dsdk-current-particle-faint);
    animation: dsdk-particle-effect-5-wave var(--dsdk-particle-speed-medium) ease-in-out infinite;
    animation-delay: calc(var(--dsdk-particle-speed-medium) / -2.8);
}
@keyframes dsdk-particle-effect-6-holo-blink-float {
    0% { transform: translateY(0) scale(0.8); opacity: var(--dsdk-particle-opacity-primary); }
    40% { transform: translateY(-80px) scale(0.6); opacity: var(--dsdk-particle-opacity-secondary); }
    45% { opacity: 0.05; } 
    50% { opacity: var(--dsdk-particle-opacity-faint); } 
    100% { transform: translateY(-180px) scale(0.2); opacity: 0; }
}
.dsdk-panel.dsdk-particle-effect-6::before {
    width: 7px; height: 7px;
    background: var(--dsdk-current-particle-primary);
    border-radius: 50%;
    top: 200px; left: 40%;
    box-shadow: 
        0 0 2px var(--dsdk-current-particle-primary), 0 0 5px var(--dsdk-current-particle-secondary),
        30px 15px 0 1px var(--dsdk-current-particle-tertiary), 
        32px 13px 2px 1px var(--dsdk-current-particle-faint); 
    animation: dsdk-particle-effect-6-holo-blink-float var(--dsdk-particle-speed-fast) linear infinite;
}
.dsdk-panel.dsdk-particle-effect-6::after {
    width: 6px; height: 6px;
    background: var(--dsdk-current-particle-secondary);
    border-radius: 50%;
    top: 200px; left: 60%;
    box-shadow: 
        0 0 2px var(--dsdk-current-particle-secondary), 0 0 5px var(--dsdk-current-particle-tertiary),
        -35px 5px 0 0px var(--dsdk-current-particle-faint),  
        -33px 7px 2px 0px var(--dsdk-current-particle-primary); 
    animation: dsdk-particle-effect-6-holo-blink-float var(--dsdk-particle-speed-medium) linear infinite;
    animation-delay: calc(var(--dsdk-particle-speed-medium) / -3.5);
}

.dsdk-log-list { list-style: none; padding: 0; margin: 0; }
.dsdk-log-list li { padding: 3px 0; font-family: var(--dsdk-font-mono); font-size: 0.75rem; line-height: 1.3; color: var(--dsdk-text-color-darker); transition: color 0.5s ease-in-out, font-weight 0.5s ease-in-out; border-bottom: 1px dashed rgba(255,255,255,0.05);}
.dsdk-log-list li:last-child { border-bottom: none; }
.dsdk-log-list .dsdk-log-info { color: var(--dsdk-accent-color-secondary); }
.dsdk-log-list .dsdk-log-warn { color: var(--dsdk-warning-color); }
.dsdk-log-list .dsdk-log-error { color: var(--dsdk-danger-color); font-weight: 500; }
.dsdk-log-list .dsdk-log-success { color: var(--dsdk-success-color); font-weight: normal; }
.dsdk-key-value-list { list-style: none; padding: 0; margin: 0; }
.dsdk-key-value-list li { padding: 4px 2px; border-bottom: 1px dashed rgba(255,255,255,0.05); font-family: var(--dsdk-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsdk-key-value-list li:last-child { border-bottom: none; }
.dsdk-key-value-list .dsdk-key { color: var(--dsdk-text-color-dim); }
.dsdk-key-value-list .dsdk-value { color: var(--dsdk-accent-color-secondary); float: right; transition: color 0.5s ease-in-out; margin-left: 10px; }
.dsdk-led-counter-group { text-align: center; background-color: rgba(0,0,0,0.1); padding: 8px 5px; border-radius: 4px; border: 1px solid rgba(var(--dsdk-panel-border-default), 0.5); }
.dsdk-led-label { display: block; font-size: 0.65rem; color: var(--dsdk-text-color-dim); margin-bottom: 4px; text-transform: uppercase; }
.dsdk-led-display { font-family: var(--dsdk-font-mono); font-weight: bold; font-size: 1.8rem; color: var(--dsdk-success-color); background-color: #040804; padding: 6px 4px; border-radius: 3px; letter-spacing: 2px; text-shadow: 0 0 4px currentColor, 0 0 8px currentColor, 0 0 12px rgba(var(--dsdk-rgb-success-color), 0.6); line-height: 1; display: flex; align-items: center; justify-content: center; min-height: 36px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4); overflow: hidden; white-space: nowrap; transition: color 0.3s, text-shadow 0.3s; }
.dsdk-led-display.dsdk-led-critical { color: var(--dsdk-danger-color); text-shadow: 0 0 4px var(--dsdk-danger-color), 0 0 8px var(--dsdk-danger-color), 0 0 12px rgba(var(--dsdk-rgb-danger-color), 0.6); animation: dsdk-led-critical-pulse 0.5s infinite alternate; }
.dsdk-led-display.dsdk-led-warning { color: var(--dsdk-warning-color); text-shadow: 0 0 4px var(--dsdk-warning-color), 0 0 8px var(--dsdk-warning-color), 0 0 12px rgba(var(--dsdk-rgb-warning-color), 0.6); animation: none; }
@keyframes dsdk-led-critical-pulse { from { opacity: 0.7; } to { opacity: 1; } }
.dsdk-dynamic-text-container { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; min-height: 60px; width: 100%; height: 100%;}
.dsdk-dynamic-text { font-family: var(--dsdk-font-mono); font-size: 1.1rem; color: var(--dsdk-text-color); text-shadow: none; filter: blur(0px); overflow-wrap: break-word; word-break: break-all; max-width: 95%; line-height: 1.4; transition: filter 0.5s ease-in-out, color 0.5s ease-in-out, text-shadow 0.5s ease-in-out; }
.dsdk-dynamic-text.dsdk-blurred-text { filter: blur(1.5px); }
.dsdk-dynamic-text.dsdk-flicker-text { animation: dsdk-text-content-flicker 0.1s infinite alternate; }
.dsdk-dynamic-text.dsdk-glitch-text { animation: dsdk-text-glitch 0.5s infinite steps(2, jump-none); }
@keyframes dsdk-text-content-flicker { from { opacity: 0.6; } to { opacity: 1; transform: skewX(-0.5deg); } }
@keyframes dsdk-text-glitch { 0%, 100% { opacity: 1; transform: translate(0,0); } 25% { opacity: 0.7; transform: translate(2px, -1px) skewX(-2deg); } 50% { opacity: 0.9; transform: translate(-1px, 1px) skewY(1deg); } 75% { opacity: 0.6; transform: translate(1px, -2px) skewX(2deg); } }
.dsdk-action-buttons-container { display: flex; flex-direction: column; gap: 8px; }
.dsdk-button { display: block; width: 100%; padding: 8px; font-family: var(--dsdk-font-sans); font-weight: 600; color: var(--dsdk-text-color); background-color: rgba(var(--dsdk-rgb-accent-secondary), 0.2); border: 1px solid rgba(var(--dsdk-rgb-accent-secondary), 0.5); border-radius: 4px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; text-align: center; text-transform: uppercase; }
.dsdk-button:hover:not(:disabled) { background-color: rgba(var(--dsdk-rgb-accent-secondary), 0.4); border-color: var(--dsdk-accent-color-secondary); }
.dsdk-button:disabled { opacity: 0.5; cursor: not-allowed; }
.dsdk-button.dsdk-button-danger { background-color: rgba(var(--dsdk-rgb-danger-color), 0.2); border-color: rgba(var(--dsdk-rgb-danger-color), 0.5); }
.dsdk-button.dsdk-button-danger:hover:not(:disabled) { background-color: rgba(var(--dsdk-rgb-danger-color), 0.4); border-color: var(--dsdk-danger-color); }
.dsdk-button.dsdk-button-warning { background-color: rgba(var(--dsdk-rgb-warning-color), 0.2); border-color: rgba(var(--dsdk-rgb-warning-color), 0.5); }
.dsdk-button.dsdk-button-warning:hover:not(:disabled) { background-color: rgba(var(--dsdk-rgb-warning-color), 0.4); border-color: var(--dsdk-warning-color); }
.dsdk-button.dsdk-button-success { background-color: rgba(var(--dsdk-rgb-success-color), 0.2); border-color: rgba(var(--dsdk-rgb-success-color), 0.5); }
.dsdk-button.dsdk-button-success:hover:not(:disabled) { background-color: rgba(var(--dsdk-rgb-success-color), 0.4); border-color: var(--dsdk-success-color); }

.dsdk-canvas-graph,
.dsdk-radar-canvas {
    display: block;
    width: 100%; 
    height: 100%; 
}

.dsdk-critical-warning-text-container { 
    border: 2px solid var(--dsdk-danger-color); 
    border-radius: 0.5rem; 
    background-color: rgba(var(--dsdk-rgb-danger-color), 0.15); 
    box-shadow: 0 0 10px rgba(var(--dsdk-rgb-danger-color),0.5), inset 0 0 8px rgba(var(--dsdk-rgb-danger-color),0.3); 
    transition: border-color 0.5s ease-in-out, background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.dsdk-critical-warning-text { font-family: var(--dsdk-font-mono); font-size: 2.2rem; font-weight: 900; color: var(--dsdk-danger-color); text-align: center; text-transform: uppercase; animation: dsdk-crt-warning-flicker 1.2s infinite steps(2); line-height: 1; letter-spacing: 1px; transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out; }
.dsdk-critical-warning-text-container.dsdk-state-critical { border-color: var(--dsdk-danger-color); background-color: rgba(var(--dsdk-rgb-danger-color), 0.15); box-shadow: 0 0 10px rgba(var(--dsdk-rgb-danger-color),0.5), inset 0 0 8px rgba(var(--dsdk-rgb-danger-color),0.3); }
.dsdk-critical-warning-text.dsdk-state-critical { color: var(--dsdk-danger-color); animation-name: dsdk-crt-warning-flicker; }
.dsdk-critical-warning-text-container.dsdk-state-stabilizing { border-color: var(--dsdk-warning-color); background-color: rgba(var(--dsdk-rgb-warning-color), 0.1); box-shadow: 0 0 10px rgba(var(--dsdk-rgb-warning-color),0.4), inset 0 0 8px rgba(var(--dsdk-rgb-warning-color),0.2); }
.dsdk-critical-warning-text.dsdk-state-stabilizing { color: var(--dsdk-warning-color); animation-name: dsdk-crt-stabilizing-flicker; }
.dsdk-critical-warning-text-container.dsdk-state-stable { border-color: var(--dsdk-success-color); background-color: rgba(var(--dsdk-rgb-success-color), 0.1); box-shadow: 0 0 10px rgba(var(--dsdk-rgb-success-color),0.4), inset 0 0 8px rgba(var(--dsdk-rgb-success-color),0.2); }
.dsdk-critical-warning-text.dsdk-state-stable { color: var(--dsdk-success-color); animation-name: dsdk-crt-stable-glow; }
@keyframes dsdk-crt-warning-flicker { 0%, 100% { opacity: 1; text-shadow: 0 0 3px var(--dsdk-danger-color), 0 0 8px var(--dsdk-danger-color), 0 0 1px #fff; transform: none; } 5% { opacity: 0.8; text-shadow: 0 0 6px var(--dsdk-danger-color), 0 0 12px var(--dsdk-danger-color), 0 0 2px #fff; } 10% { opacity: 1; } 15% { opacity: 0.5; text-shadow: 0 0 3px var(--dsdk-danger-color), 0 0 6px var(--dsdk-danger-color); } 20% { opacity: 1; } 50% { opacity: 0.9; transform: skewX(-0.8deg) skewY(0.3deg); text-shadow: 0 0 5px var(--dsdk-danger-color), 0 0 10px var(--dsdk-danger-color), 1px 1px 1px #f30; } 50.5% { opacity: 1; transform: skewX(0); } }
@keyframes dsdk-crt-stabilizing-flicker { 0%, 100% { opacity: 1; text-shadow: 0 0 3px var(--dsdk-warning-color), 0 0 6px var(--dsdk-warning-color); transform: none; } 50% { opacity: 0.7; text-shadow: 0 0 5px var(--dsdk-warning-color), 0 0 10px var(--dsdk-warning-color); } }
@keyframes dsdk-crt-stable-glow { 0%, 100% { opacity: 1; text-shadow: 0 0 4px var(--dsdk-success-color), 0 0 8px var(--dsdk-success-color), 0 0 1px #fff; } 50% { opacity: 0.9; text-shadow: 0 0 6px var(--dsdk-success-color), 0 0 12px var(--dsdk-success-color), 0 0 2px #fff; } }
.dsdk-text-danger { color: var(--dsdk-danger-color) !important; font-weight: bold;}
.dsdk-text-warning { color: var(--dsdk-warning-color) !important; }
.dsdk-text-success { color: var(--dsdk-success-color) !important; font-weight: bold;}
.dsdk-text-info { color: var(--dsdk-accent-color-secondary) !important;}
.dsdk-text-flicker { animation: dsdk-text-flicker-anim 1s infinite; }
@keyframes dsdk-text-flicker-anim { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.dsdk-text-pulse-strong { animation: dsdk-text-pulse-strong-anim 0.8s infinite; }
@keyframes dsdk-text-pulse-strong-anim { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.02); } }
.dsdk-text-pulse-subtle { animation: dsdk-text-pulse-subtle-anim 1.2s infinite; }
@keyframes dsdk-text-pulse-subtle-anim { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

.dsdk-integrity-pulse-container { 
    display: flex; 
    justify-content: space-around; 
    align-items: flex-end; 
    width: 100%; 
    flex-grow: 1; 
    min-height: 60px; 
    background-color: rgba(0,0,0,0.2); 
    border-radius: 0 0 0.4rem 0.4rem; 
    overflow: hidden; 
    padding: 0 5px; 
}
.dsdk-pulse-bar { 
    min-width: 2px; 
    border-radius: 3px 3px 0 0; 
    background-color: var(--dsdk-pulse-bar-color); 
    animation-name: dsdk-pulse-bar-animation; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
    transition: background-color 0.5s ease-in-out; 
}
@keyframes dsdk-pulse-bar-animation { 
    0%, 100% { height: var(--dsdk-pulse-bar-min-height); opacity: var(--dsdk-pulse-bar-opacity-min); box-shadow: 0 0 calc(var(--dsdk-pulse-bar-shadow-intensity) / 2) currentColor; } 
    50% { height: var(--dsdk-pulse-bar-max-height); opacity: var(--dsdk-pulse-bar-opacity-max); box-shadow: 0 0 var(--dsdk-pulse-bar-shadow-intensity) currentColor, 0 0 calc(var(--dsdk-pulse-bar-shadow-intensity) * 2) currentColor; } 
}
.dsdk-integrity-pulse-panel.dsdk-panel-normal, .dsdk-integrity-pulse-panel:not(.dsdk-panel-critical):not(.dsdk-panel-warning):not(.dsdk-panel-stable) { --dsdk-pulse-bar-color: var(--dsdk-accent-color-secondary); --dsdk-pulse-bar-min-height: 30%; --dsdk-pulse-bar-max-height: 70%; --dsdk-pulse-bar-opacity-min: 0.7; --dsdk-pulse-bar-opacity-max: 0.9; --dsdk-pulse-bar-shadow-intensity: 2px; }
.dsdk-integrity-pulse-panel.dsdk-panel-critical { --dsdk-pulse-bar-color: var(--dsdk-danger-color); --dsdk-pulse-bar-min-height: 15%; --dsdk-pulse-bar-max-height: 85%; --dsdk-pulse-bar-opacity-min: 0.6; --dsdk-pulse-bar-opacity-max: 1; --dsdk-pulse-bar-shadow-intensity: 4px; }
.dsdk-integrity-pulse-panel.dsdk-panel-warning { --dsdk-pulse-bar-color: var(--dsdk-warning-color); --dsdk-pulse-bar-min-height: 25%; --dsdk-pulse-bar-max-height: 75%; --dsdk-pulse-bar-opacity-min: 0.65; --dsdk-pulse-bar-opacity-max: 0.95; --dsdk-pulse-bar-shadow-intensity: 3px; }
.dsdk-integrity-pulse-panel.dsdk-panel-stable { --dsdk-pulse-bar-color: var(--dsdk-success-color); --dsdk-pulse-bar-min-height: 50%; --dsdk-pulse-bar-max-height: 95%; --dsdk-pulse-bar-opacity-min: 0.8; --dsdk-pulse-bar-opacity-max: 1; --dsdk-pulse-bar-shadow-intensity: 3px; }

.dsdk-circular-gauge-panel .dsdk-panel-content { 
    background-color: var(--dsdk-gauge-bg-color); 
    overflow: hidden;  
}
.dsdk-gauge-svg-container { 
    width: 100%;
    flex-grow: 1; 
    display: flex; 
    align-items: center;
    justify-content: center;
    padding: 10px; 
}
.dsdk-gauge-svg {
    display: block;
    width: 100%; 
    max-width: 220px; 
    aspect-ratio: 1 / 1;
    overflow: visible; 
}
.dsdk-gauge-arc-background { fill: none; stroke: var(--dsdk-gauge-arc-background); stroke-linecap: round; }
.dsdk-gauge-arc-value { fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.4s cubic-bezier(0.65, 0, 0.35, 1), stroke 0.3s ease-in-out; }
.dsdk-gauge-target-marker { fill: none; stroke: var(--dsdk-gauge-target-marker-color); stroke-linecap: butt; }
.dsdk-gauge-text-value { font-family: var(--dsdk-font-mono); font-weight: bold; text-anchor: middle; dominant-baseline: middle; transition: fill 0.3s ease-in-out; }
.dsdk-gauge-text-label { fill: var(--dsdk-gauge-label-color); font-family: var(--dsdk-font-sans); text-anchor: middle; dominant-baseline: middle; }
.dsdk-gauge-text-units { fill: var(--dsdk-gauge-units-color); font-family: var(--dsdk-font-sans); text-anchor: middle; dominant-baseline: middle; }
.dsdk-circular-gauge-panel.dsdk-panel-normal .dsdk-gauge-arc-value { stroke: var(--dsdk-gauge-arc-normal); }
.dsdk-circular-gauge-panel.dsdk-panel-normal .dsdk-gauge-text-value { fill: var(--dsdk-gauge-value-color-normal); }
.dsdk-circular-gauge-panel.dsdk-panel-warning .dsdk-gauge-arc-value { stroke: var(--dsdk-gauge-arc-warning); }
.dsdk-circular-gauge-panel.dsdk-panel-warning .dsdk-gauge-text-value { fill: var(--dsdk-gauge-value-color-warning); }
.dsdk-circular-gauge-panel.dsdk-panel-critical .dsdk-gauge-arc-value { stroke: var(--dsdk-gauge-arc-critical); }
.dsdk-circular-gauge-panel.dsdk-panel-critical .dsdk-gauge-text-value { fill: var(--dsdk-gauge-value-color-critical); }
.dsdk-circular-gauge-panel.dsdk-panel-stable .dsdk-gauge-arc-value { stroke: var(--dsdk-gauge-arc-stable); }
.dsdk-circular-gauge-panel.dsdk-panel-stable .dsdk-gauge-text-value { fill: var(--dsdk-gauge-value-color-stable); }
.dsdk-circular-gauge-panel.dsdk-panel-critical .dsdk-gauge-arc-value,
.dsdk-circular-gauge-panel.dsdk-panel-critical .dsdk-gauge-text-value { filter: drop-shadow(0 0 4px var(--dsdk-danger-color)) drop-shadow(0 0 8px rgba(var(--dsdk-rgb-danger-color), 0.6)); }
.dsdk-circular-gauge-panel.dsdk-panel-warning .dsdk-gauge-arc-value,
.dsdk-circular-gauge-panel.dsdk-panel-warning .dsdk-gauge-text-value { filter: drop-shadow(0 0 3px var(--dsdk-warning-color)) drop-shadow(0 0 7px rgba(var(--dsdk-rgb-warning-color), 0.5)); }
.dsdk-circular-gauge-panel.dsdk-panel-stable .dsdk-gauge-arc-value,
.dsdk-circular-gauge-panel.dsdk-panel-stable .dsdk-gauge-text-value { filter: drop-shadow(0 0 3px var(--dsdk-success-color)) drop-shadow(0 0 7px rgba(var(--dsdk-rgb-success-color), 0.5)); }
.dsdk-circular-gauge-panel.dsdk-panel-normal .dsdk-gauge-arc-value { filter: drop-shadow(0 0 2px var(--dsdk-accent-color-secondary)) drop-shadow(0 0 5px rgba(var(--dsdk-rgb-accent-secondary), 0.4)); }

.dsdk-status-indicator-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dsdk-status-indicator-item { display: flex; align-items: center; padding: 4px 2px; border-bottom: 1px dashed rgba(255, 255, 255, 0.05); font-family: var(--dsdk-font-sans); font-size: 0.8rem; }
.dsdk-status-indicator-item:last-child { border-bottom: none; }
.dsdk-status-led { width: var(--dsdk-status-led-size); height: var(--dsdk-status-led-size); border-radius: 50%; margin-right: 8px; flex-shrink: 0; transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; position: relative; }
.dsdk-led-color-green { background-color: var(--dsdk-status-led-color-green); box-shadow: 0 0 var(--dsdk-status-led-shadow-intensity) var(--dsdk-status-led-color-green), 0 0 calc(var(--dsdk-status-led-shadow-intensity) * 2) rgba(var(--dsdk-status-led-rgb-green), 0.5); }
.dsdk-led-color-yellow { background-color: var(--dsdk-status-led-color-yellow); box-shadow: 0 0 var(--dsdk-status-led-shadow-intensity) var(--dsdk-status-led-color-yellow), 0 0 calc(var(--dsdk-status-led-shadow-intensity) * 2) rgba(var(--dsdk-status-led-rgb-yellow), 0.5); }
.dsdk-led-color-red { background-color: var(--dsdk-status-led-color-red); box-shadow: 0 0 var(--dsdk-status-led-shadow-intensity) var(--dsdk-status-led-color-red), 0 0 calc(var(--dsdk-status-led-shadow-intensity) * 2) rgba(var(--dsdk-status-led-rgb-red), 0.5); }
.dsdk-led-color-blue { background-color: var(--dsdk-status-led-color-blue); box-shadow: 0 0 var(--dsdk-status-led-shadow-intensity) var(--dsdk-status-led-color-blue), 0 0 calc(var(--dsdk-status-led-shadow-intensity) * 2) rgba(var(--dsdk-status-led-rgb-blue), 0.5); }
.dsdk-led-color-orange { background-color: var(--dsdk-status-led-color-orange); box-shadow: 0 0 var(--dsdk-status-led-shadow-intensity) var(--dsdk-status-led-color-orange), 0 0 calc(var(--dsdk-status-led-shadow-intensity) * 2) rgba(var(--dsdk-status-led-rgb-orange), 0.5); }
.dsdk-led-color-purple { background-color: var(--dsdk-status-led-color-purple); box-shadow: 0 0 var(--dsdk-status-led-shadow-intensity) var(--dsdk-status-led-color-purple), 0 0 calc(var(--dsdk-status-led-shadow-intensity) * 2) rgba(var(--dsdk-status-led-rgb-purple), 0.5); }
.dsdk-led-color-cyan { background-color: var(--dsdk-status-led-color-cyan); box-shadow: 0 0 var(--dsdk-status-led-shadow-intensity) var(--dsdk-status-led-color-cyan), 0 0 calc(var(--dsdk-status-led-shadow-intensity) * 2) rgba(var(--dsdk-status-led-rgb-cyan), 0.5); }
.dsdk-led-color-white { background-color: var(--dsdk-status-led-color-white); box-shadow: 0 0 var(--dsdk-status-led-shadow-intensity) var(--dsdk-status-led-color-white), 0 0 calc(var(--dsdk-status-led-shadow-intensity) * 2) rgba(var(--dsdk-status-led-rgb-white), 0.3); }
.dsdk-led-color-off { background-color: var(--dsdk-status-led-color-off); box-shadow: inset 0 0 2px rgba(0,0,0,0.5); }
.dsdk-status-led.dsdk-led-blinking { animation: dsdk-led-blink-animation 1s infinite; }
@keyframes dsdk-led-blink-animation { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.dsdk-status-led-text { color: var(--dsdk-text-color-darker); line-height: 1.2; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsdk-status-indicator-item:hover .dsdk-status-led-text { color: var(--dsdk-text-color); }

.dsdk-horizontal-bar-gauge-panel .dsdk-panel-content { 
    padding: 10px !important; 
    justify-content: center; 
}
.dsdk-gauge-horizontal-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px; 
}
.dsdk-gauge-horizontal-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.75rem;
    padding: 0 2px; 
}
.dsdk-gauge-horizontal-label {
    color: var(--dsdk-gauge-h-label-color);
    font-weight: 600;
}
.dsdk-gauge-horizontal-value-text {
    color: var(--dsdk-gauge-h-value-color);
    font-family: var(--dsdk-font-mono);
    font-weight: bold;
}
.dsdk-gauge-horizontal-track {
    width: 100%;
    height: var(--dsdk-gauge-h-bar-height, 16px);
    background-color: var(--dsdk-gauge-h-track-bg);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.dsdk-gauge-horizontal-bar {
    height: 100%;
    width: 0%; 
    background-color: var(--dsdk-gauge-h-bar-normal); 
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease-in-out;
    box-shadow: 0 0 5px currentColor, 0 0 8px currentColor;
}
.dsdk-horizontal-bar-gauge-panel.dsdk-panel-normal .dsdk-gauge-horizontal-bar { background-color: var(--dsdk-gauge-h-bar-normal); }
.dsdk-horizontal-bar-gauge-panel.dsdk-panel-warning .dsdk-gauge-horizontal-bar { background-color: var(--dsdk-gauge-h-bar-warning); }
.dsdk-horizontal-bar-gauge-panel.dsdk-panel-critical .dsdk-gauge-horizontal-bar { background-color: var(--dsdk-gauge-h-bar-critical); }
.dsdk-horizontal-bar-gauge-panel.dsdk-panel-stable .dsdk-gauge-horizontal-bar { background-color: var(--dsdk-gauge-h-bar-stable); }

.dsdk-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex; 
  align-items: center;
  justify-content: center;
  background-color: rgba(5,5,10,0.8); 
  transition: filter 0.4s ease-in-out; 
}
.dsdk-image-effects-sub-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; 
    overflow: hidden; 
}
.dsdk-image-element,
.dsdk-image-video-element {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-position: center center;
  transition: transform 0.3s ease; 
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  background-color: transparent; 
}
.dsdk-image-element.dsdk-image-fit-contain,
.dsdk-image-video-element.dsdk-image-fit-contain { object-fit: contain; }
.dsdk-image-element.dsdk-image-fit-cover,
.dsdk-image-video-element.dsdk-image-fit-cover { object-fit: cover; width:100%; height:100%; }
.dsdk-image-element.dsdk-image-fit-fill,
.dsdk-image-video-element.dsdk-image-fit-fill { object-fit: fill; width:100%; height:100%;}
.dsdk-image-element.dsdk-image-fit-none,
.dsdk-image-video-element.dsdk-image-fit-none { object-fit: none; }
.dsdk-image-element.dsdk-image-fit-scale-down,
.dsdk-image-video-element.dsdk-image-fit-scale-down { object-fit: scale-down; }
.dsdk-image-effects-sub-wrapper.dsdk-image-pixelation-effect.dsdk-pixelation-level-1 {
  filter: brightness(0.95) contrast(1.1) blur(0.5px);
}
.dsdk-image-effects-sub-wrapper.dsdk-image-pixelation-effect.dsdk-pixelation-level-2 {
  filter: brightness(0.85) contrast(1.3) blur(1px);
}
.dsdk-image-effects-sub-wrapper.dsdk-image-pixelation-effect.dsdk-pixelation-level-3 {
  filter: brightness(0.75) contrast(1.5) blur(1.8px);
}
.dsdk-image-effects-sub-wrapper.dsdk-image-interference-effect::before { 
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    transparent,
    transparent 2px,
    var(--dsdk-interference-line-color, rgba(0, 200, 200, 0.04)) 2.5px,
    var(--dsdk-interference-line-color, rgba(0, 200, 200, 0.04)) 3.5px
  );
  animation: dsdk-interference-scanlines-anim 0.3s linear infinite;
  opacity: 0;
  pointer-events: none;
  z-index: 1; 
  will-change: background-position, opacity;
}
@keyframes dsdk-interference-scanlines-anim {
  0% { background-position-y: 0px; }
  100% { background-position-y: 10px; }
}
.dsdk-image-effects-sub-wrapper.dsdk-image-interference-effect { 
  animation-name: dsdk-interference-img-shift-anim;
  animation-timing-function: steps(3, jump-none);
  animation-iteration-count: infinite;
  will-change: transform;
}
.dsdk-image-effects-sub-wrapper.dsdk-image-interference-effect.dsdk-interference-intensity-low::before { opacity: 0.4; --dsdk-interference-line-color: rgba(150, 255, 255, 0.02); }
.dsdk-image-effects-sub-wrapper.dsdk-image-interference-effect.dsdk-interference-intensity-low { animation-duration: 0.9s; }
.dsdk-image-effects-sub-wrapper.dsdk-image-interference-effect.dsdk-interference-intensity-medium::before { opacity: 0.6; --dsdk-interference-line-color: rgba(100, 255, 255, 0.04); }
.dsdk-image-effects-sub-wrapper.dsdk-image-interference-effect.dsdk-interference-intensity-medium { animation-duration: 0.5s; }
.dsdk-image-effects-sub-wrapper.dsdk-image-interference-effect.dsdk-interference-intensity-high::before { opacity: 0.8; --dsdk-interference-line-color: rgba(50, 220, 220, 0.06); }
.dsdk-image-effects-sub-wrapper.dsdk-image-interference-effect.dsdk-interference-intensity-high { animation-duration: 0.25s; }
@keyframes dsdk-interference-img-shift-anim {
  0%, 100% { transform: translate(0,0) skew(0); }
  20% { transform: translate(1px, -0.5px) skewX(-0.2deg); }
  40% { transform: translate(-0.5px, 1px) skewY(0.1deg); }
  60% { transform: translate(0.5px, 0.5px) skewX(0.1deg); }
  80% { transform: translate(-1px, -0.5px) skewY(-0.2deg); }
}
.dsdk-image-effects-sub-wrapper.dsdk-image-glitch-effect {
  animation: dsdk-glitch-main-img-anim 1s linear infinite alternate;
}
@keyframes dsdk-glitch-main-img-anim {
  0% { transform: translate(0,0) skew(0); clip-path: inset(0% 0% 0% 0%); }
  5% { transform: translate(-3px, 1px) skewX(-2deg); clip-path: inset(5% 2% 10% 3%); }
  10% { transform: translate(3px, -2px) skewY(1deg); clip-path: inset(12% 4% 8% 1%); }
  15% { transform: translate(-2px, 3px) skewX(3deg); clip-path: inset(3% 1% 15% 5%); }
  20% { transform: translate(1px, -1px) skewY(-2deg); clip-path: inset(10% 5% 5% 2%); }
  25%, 100% { transform: translate(0,0) skew(0); clip-path: inset(0% 0% 0% 0%); }
}
.dsdk-image-tv-noise-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background-image: var(--dsdk-tv-noise-svg-uri);
  background-repeat: repeat;
  opacity: 0; 
  transition: opacity 0.3s ease;
  z-index: 2; 
  display: none; 
}
.dsdk-image-tv-noise-overlay.dsdk-tv-noise-active {
  display: block;
  animation: dsdk-tv-noise-anim 0.15s linear infinite; 
}
@keyframes dsdk-tv-noise-anim {
  0% { background-position: 0 0; } 25% { background-position: 10px 5px; }
  50% { background-position: 5px 10px; } 75% { background-position: -5px 0px; }
  100% { background-position: 0 0; }
}
.dsdk-image-rolling-bars-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background-color: transparent;
  opacity: 0; 
  transition: opacity 0.3s ease;
  z-index: 3; 
  display: none;
}
.dsdk-image-rolling-bars-overlay.dsdk-rolling-bars-active {
  display: block; opacity: 1;
  background-image: repeating-linear-gradient(
    var(--dsdk-rolling-bar-color) 0,
    var(--dsdk-rolling-bar-color) var(--dsdk-current-rolling-bar-height),
    transparent var(--dsdk-current-rolling-bar-height),
    transparent calc(2 * var(--dsdk-current-rolling-bar-height)) 
  );
  background-size: 100% calc(2 * var(--dsdk-current-rolling-bar-height));
  animation: dsdk-rolling-bars-anim var(--dsdk-current-rolling-bar-speed) linear infinite;
}
@keyframes dsdk-rolling-bars-anim {
  0% { background-position-y: 0; }
  100% { background-position-y: calc(4 * var(--dsdk-current-rolling-bar-height)); }
}
.dsdk-image-wrapper.dsdk-crt-phosphor-active {
}
.dsdk-image-wrapper.dsdk-crt-phosphor-active.dsdk-crt-phosphor-green,
.dsdk-image-wrapper.dsdk-crt-phosphor-active.dsdk-crt-phosphor-normal {
    filter: sepia(60%) hue-rotate(50deg) saturate(150%) brightness(90%) contrast(110%);
}
.dsdk-image-wrapper.dsdk-crt-phosphor-active.dsdk-crt-phosphor-amber {
    filter: sepia(80%) hue-rotate(-35deg) saturate(250%) brightness(100%) contrast(120%);
}
.dsdk-image-wrapper.dsdk-crt-phosphor-active.dsdk-crt-phosphor-red {
    filter: sepia(70%) hue-rotate(315deg) saturate(400%) brightness(80%) contrast(130%);
}
.dsdk-image-wrapper.dsdk-crt-phosphor-active.dsdk-crt-phosphor-stable {
    filter: sepia(50%) hue-rotate(60deg) saturate(200%) brightness(95%) contrast(100%); 
}