@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

/* ==========================================
   SONIC LAB - GLOBAL DESIGN SYSTEM
========================================== */
:root {
    /* --- BOJE (COLORS) --- */
    --bg-main: #020617;          /* Najtamnija pozadina aplikacije */
    --bg-panel: #0f172a;         /* Pozadina modula / kartica */
    --bg-input: #020617;         /* Pozadina polja za unos */
    
    --accent-primary: #38bdf8;   /* Glavna plava (Sky) */
    --accent-secondary: #f472b6; /* Pink / Ljubičasta za posebne funkcije */
    --accent-warning: #eab308;   /* Žuta (Upozorenja, Zvučnik) */
    --accent-danger: #ef4444;    /* Crvena (Greške, Subwoofer) */
    --accent-success: #22c55e;   /* Zelena (Sve ok) */

    --text-main: #e2e8f0;        /* Svijetlo siva za glavni tekst */
    --text-muted: #64748b;       /* Tamnija siva za labele i sporedne info */

    /* --- TYPOGRAPHY (VELIČINE FONTOVA) --- */
    --font-xs: 10px;             /* Minimum za sitne oznake */
    --font-sm: 12px;             /* Standard za labele */
    --font-base: 14px;           /* Glavni tekst */
    --font-lg: 16px;             /* Rezultati i inputi (Mobiteli ne zumiraju) */
    --font-xl: 18px;             /* Veliki rezultati */
    --font-title: 20px;          /* Naslovi modula */

    /* --- DIMENZIJE I RAZMACI --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;

    /* --- STANDARDI ZA GUMBE (TOUCH TARGET) --- */
    --btn-height: 36px;          /* Standardna visina gumba */
    --btn-height-mobile: 44px;   /* Minimum za ugodan dodir prstom po Apple/Google standardu */
}

/* STANDARDNI GUMB */
.tech-btn {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-main);
    font-family: 'Orbitron', sans-serif;
    font-size: var(--font-sm);
    height: var(--btn-height);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-sm);
}

.tech-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.tech-btn.active {
    background: rgba(56, 189, 248, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}





/* --- GLOBALNO --- */
html, body {
    background-color: #121212 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important; /* Prisilno drži širinu točno na rubovima ekrana */
    max-width: 100vw !important;
    min-height: 100vh !important;
    overflow-x: hidden !important; /* Doslovno reže i brani svaki piksel lijevo/desno */
    overflow-y: auto !important; /* Ostavlja slobodno skrolanje gore-dolje */
    overscroll-behavior-y: auto !important;
    overscroll-behavior-x: none !important; /* Ubija onaj "bounce/guma" efekt lijevo/desno na Appleu */
    touch-action: pan-y !important; /* OVO JE SVETI GRAL: Dozvoljava SAMO vertikalni potez, ZABRANJUJE ZOOM i swipanje! */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- GLAVNI KONTEJNER --- */
#sonic-lab-v25 {
    /* VRAĆENE VARIJABLE - Zbog ovoga ti je nestala pozadina! */
    --metal-base: #1e293b;
    --neon-blue: #38bdf8;
    --neon-red: #ef4444;
    --screen-bg: #38bdf8;    
    --screen-ink: #0f172a;
    --glass-bg: rgba(2, 6, 23, 0.6); 

    all: initial; 
    display: block;
    touch-action: pan-y !important; /* Vraćamo na pan-y kako bi i sama aplikacija zabranila zoom! */
    
    background-color: var(--metal-base) !important;
    background-image: 
        repeating-linear-gradient(90deg, transparent 0, transparent 1px, rgba(255,255,255,0.03) 1px, rgba(255,255,255,0.03) 2px),
        linear-gradient(180deg, #334155 0%, #0f172a 100%) !important;
    color: #94a3b8 !important;
    font-family: 'Rajdhani', system-ui, -apple-system, sans-serif !important;
    
    /* --- DESKTOP STIL --- */
    max-width: 1100px !important;
    margin: 40px auto !important;   
    border-radius: 12px !important;
    border: 2px solid #475569 !important;
    box-shadow: 0 0 0 2px #020617, 0 30px 60px rgba(0,0,0,0.8) !important;
    
    padding: 35px 20px 80px 20px;
    box-sizing: border-box !important;
    position: relative;
    min-height: auto; 
    line-height: normal !important;
    transition: border-color 0.5s;
}

#sonic-lab-v25 * { box-sizing: border-box !important; font-family: 'Rajdhani', sans-serif !important; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* --- PROŠIRENJE GLAVNOG OKVIRA ZA 3 STUPCA --- */
#sonic-lab-v25 {
    max-width: 1400px !important; /* Prošireno sa 1100px da stanu 3 stupca */
    margin: 40px auto !important;   
    /* ... (ostalo ostaje isto, ne diraj tuđe atribute) ... */
}

/* =========================================
   ULTIMATE ABSOLUTE MASONRY GRID 
   (Prirodne visine, fiksni razmaci, ravno dno)
========================================= */

#sonic-lab-v25 {
    position: relative; /* Glavno sidro za sve unutar aplikacije */
}

#sonic-lab-v25 .controls-grid {
    position: relative;
    width: 100%;
    display: block; /* Gasimo klasični flex/grid, prelazimo na apsolutnu kontrolu */
}

#sonic-lab-v25 .panel-card {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* JS sada preuzima top, left, width i height! */
    transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}
/* 1. MOBITEL (1 Stupac - Klasičan redoslijed) */
@media (max-width: 900px) {
    html, body { 
        background-color: #0f172a !important; 
        background-image: 
            repeating-linear-gradient(90deg, transparent 0, transparent 1px, rgba(255,255,255,0.03) 1px, rgba(255,255,255,0.03) 2px),
            linear-gradient(180deg, #334155 0%, #0f172a 100%) !important;
        background-attachment: fixed !important; 
        overflow-y: auto !important; 
        height: auto !important;
    } 
    
    #sonic-lab-v25 {
        background: transparent !important; 
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0px !important;
        border: none !important;
        box-shadow: none !important;
        min-height: 100vh;
        /* Padding osigurava mjesto za šarafe gore i dolje */
        padding: calc(60px + env(safe-area-inset-top)) 10px calc(80px + env(safe-area-inset-bottom)) 10px !important; 
        touch-action: auto !important;
        position: relative !important; /* Ključno za pozicioniranje šarafa */
    }

    #sonic-lab-v25 .controls-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        height: auto !important; 
        margin-top: 15px !important;
    }

    #sonic-lab-v25 .panel-card {
        position: relative !important; 
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important; 
        transform: none !important;
    }

    /* --- NOVI HELP GUMB (Veći + Neon) --- */
    #sonic-lab-v25 .help-btn {
        position: fixed !important;
        top: auto !important;
        bottom: calc(20px + env(safe-area-inset-bottom)) !important; /* Malo odmaknut od dna */
        right: 20px !important;
        z-index: 9999 !important;
        
        /* Povećanje dimenzija i teksta */
        width: 42px !important;
        height: 42px !important;
        font-size: 20px !important;
        
        /* Centriranje upitnika */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        /* PLAVI NEON EFEKT */
        border: 1px solid #38bdf8 !important;
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.6), inset 0 0 6px rgba(56, 189, 248, 0.4) !important;
        background: rgba(15, 23, 42, 0.8) !important; /* Blago prozirna pozadina */
    }

   /* --- VRAĆENI ŠARAFI NA MOBITELU --- */
    
    #sonic-lab-v25 .screw {
        display: flex !important;
        position: absolute !important;
        z-index: 10 !important;
        transform: none !important;
        margin: 0 !important;
    }

    /* Gornji šarafi (Spušteni tik do displaya i savršeno vodoravno poravnani) */
    #sonic-lab-v25 .tl, 
    #sonic-lab-v25 .tr {
        top: calc(40px + env(safe-area-inset-top)) !important; 
    }
    
    #sonic-lab-v25 .tl { left: 15px !important; }
    #sonic-lab-v25 .tr { right: 15px !important; }

    /* Donji šarafi */
    #sonic-lab-v25 .bl {
        bottom: calc(40px + env(safe-area-inset-bottom)) !important;
        left: 20px !important;
    }
    #sonic-lab-v25 .br {
        bottom: calc(40px + env(safe-area-inset-bottom)) !important;
        right: 20px !important;
    }
}

/* 1.5. PWA OPTIMIZACIJA (Kad je instalirana aplikacija) */
@media (max-width: 900px) and (display-mode: standalone) {
    #sonic-lab-v25 {
        padding-top: calc(15px + env(safe-area-inset-top)) !important;
    }
    /* PWA Gornji šarafi (Spušteni uz display kad nema URL trake) */
    #sonic-lab-v25 .tl, 
    #sonic-lab-v25 .tr {
         top: calc(0px + env(safe-area-inset-top)) !important; 
    }
}

/* 2. DESKTOP & TABLET */
@media (min-width: 1201px) and (max-width: 1599px) {
    #sonic-lab-v25 { max-width: 1300px !important; }
}
@media (min-width: 901px) and (max-width: 1200px) {
    #sonic-lab-v25 { max-width: 95% !important; }
}

/* 3. ULTIMATE 4K MONITORI */
@media (min-width: 1600px) {
    #sonic-lab-v25 {
        max-width: 1750px !important; 
    }
    #sonic-lab-v25 > .lab-header { margin-bottom: 15px !important; }
    
    /* Screen i metar se drže svoje pozicije na lijevoj strani */
    #sonic-lab-v25 > .digital-screen-container,
    #sonic-lab-v25 > .meter-bridge {
        position: relative;
        z-index: 10;
        /* Širinu će sada piksel-precizno zadati JS! */
    }
}

/* =========================================
   SYSTEM OFF - GLOBAL GRAYOUT (STANDBY MODE)
   Nasilno gasi sve boje, rubove i tekstove dok se ne stisne ACTIVATE
   ========================================= */

/* 1. Sive tipke bez sjaja (SVE osim glavnog gumba) */
#sonic-lab-v25.sys-off button:not(#btn-main),
#sonic-lab-v25.sys-off .tech-btn:not(#btn-main),
#sonic-lab-v25.sys-off .jump-btn {
    color: #475569 !important;
    border-color: #1e293b !important;
    background: #0f172a !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 2. ULTIMATIVNO GAŠENJE: Ubija plavi rub na upaljenim gumbima (EU, mm2, 40Hz, -15dB) */
#sonic-lab-v25.sys-off .tech-btn.active,
#sonic-lab-v25.sys-off .amp-freq-btn.active,
#sonic-lab-v25.sys-off .db-btn.active,
#sonic-lab-v25.sys-off button.active {
    background-color: #0f172a !important;
    color: #475569 !important;
    border-color: #1e293b !important; 
    box-shadow: none !important;      
    text-shadow: none !important;
}

/* 3. Sive ikonice (SVG) i mali tekstovi unutar tipki */
#sonic-lab-v25.sys-off .tech-btn:not(#btn-main) * {
    color: #475569 !important;
    stroke: #475569 !important;
}

/* 4. Gašenje neonskih okvira oko ekrana */
#sonic-lab-v25.sys-off .sub-screen,
#sonic-lab-v25.sys-off .mus-screen,
#sonic-lab-v25.sys-off .screen-inner {
    border-color: #1e293b !important;
    box-shadow: none !important;
}

/* 5. Gašenje potenciometara (Knobs) i klizača (Sliders) */
#sonic-lab-v25.sys-off .knob-ring { border-color: #1e293b !important; }
#sonic-lab-v25.sys-off .knob-indicator { background: #475569 !important; box-shadow: none !important; }
#sonic-lab-v25.sys-off input[type=range]::-webkit-slider-thumb {
    background: #475569 !important;
    box-shadow: none !important;
}

/* 6. Agresivno gašenje SVAKOG plavog, crvenog i žutog teksta/rezultata */
#sonic-lab-v25.sys-off [style*="--neon-blue"], 
#sonic-lab-v25.sys-off [style*="#38bdf8"],
#sonic-lab-v25.sys-off [style*="#ef4444"],
#sonic-lab-v25.sys-off [style*="#eab308"],
#sonic-lab-v25.sys-off .text-glow-white,
#sonic-lab-v25.sys-off .knob-val-display,
#sonic-lab-v25.sys-off #status-text,
#sonic-lab-v25.sys-off #sub-status,
#sonic-lab-v25.sys-off #iso-status,
#sonic-lab-v25.sys-off .pan-display-row span,
#sonic-lab-v25.sys-off .knob-label,
#sonic-lab-v25.sys-off .panel-head,
#sonic-lab-v25.sys-off .tech-sub,
#sonic-lab-v25.sys-off [id*="res-"] {
    color: #475569 !important;
    text-shadow: none !important;
    border-color: #1e293b !important;
}

/* 7. Spašavamo ACTIVATE gumb da ostane svijetliti u mraku */
#sonic-lab-v25.sys-off #btn-main {
    border-color: var(--neon-blue) !important;
    color: var(--neon-blue) !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important;
}
/* --- SARAFI --- */
#sonic-lab-v25 .screw {
    width: 18px; height: 18px;
    background: linear-gradient(135deg, #94a3b8, #475569);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.4);
    position: absolute; z-index: 10;
    display: flex; justify-content: center; align-items: center;
    border: 1px solid #334155;
}
#sonic-lab-v25 .screw::after { content: ''; width: 8px; height: 8px; background: #1e293b; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); box-shadow: inset 0 1px 2px #000; }
#sonic-lab-v25 .tl { top: 22px; left: 12px; } #sonic-lab-v25 .tr { top: 22px; right: 12px; }
#sonic-lab-v25 .bl { bottom: 22px; left: 12px; } #sonic-lab-v25 .br { bottom: 22px; right: 12px; }

/* --- HELP GUMB --- */
#sonic-lab-v25 .help-btn {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    width: 35px; height: 35px; border-radius: 50%;
    background: linear-gradient(145deg, #1e293b, #0f172a) !important; 
    color: #64748b; font-weight: 900; font-size: 22px; text-align: center; line-height: 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1);
    border: 2px solid #334155; cursor: pointer; z-index: 20; transition: all 0.2s;
}
#sonic-lab-v25 .help-btn:hover { color: #94a3b8; border-color: #475569; }
#sonic-lab-v25 .help-btn:active { transform: translateX(-50%) scale(0.95); background: #020617; color: var(--neon-blue); border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(56, 189, 248, 0.3); }

/* --- SYSTEM OFF STATE --- */
#sonic-lab-v25.sys-off { border-color: #334155 !important; }
#sonic-lab-v25.sys-off #btn-restart,
#sonic-lab-v25.sys-off .pan-side-val,
#sonic-lab-v25.sys-off .pan-side-label,
#sonic-lab-v25.sys-off .lab-title span,
#sonic-lab-v25.sys-off .panel-head,
#sonic-lab-v25.sys-off .pan-display-row,
#sonic-lab-v25.sys-off .pan-display-row span,
#sonic-lab-v25.sys-off .meter-label,
#sonic-lab-v25.sys-off .meter-scale-half span,
#sonic-lab-v25.sys-off #sub-status, 
#sonic-lab-v25.sys-off #iso-status,
#sonic-lab-v25.sys-off .text-glow-white,
#sonic-lab-v25.sys-off #kick-btn-val,
#sonic-lab-v25.sys-off .knob-val-display,
#sonic-lab-v25.sys-off .panel-header-row
{
    color: #475569 !important; border-color: #475569 !important; text-shadow: none !important; transition: color 0.5s, border-color 0.5s;
}

#sonic-lab-v25.sys-off .knob-ring { background: #334155 !important; box-shadow: none !important; }
#sonic-lab-v25.sys-off .knob-cap { background: #1e293b !important; border-color: #334155 !important; }
#sonic-lab-v25.sys-off .knob-indicator { background: #475569 !important; box-shadow: none !important; }

#sonic-lab-v25.sys-off button.sub-toggle,
#sonic-lab-v25.sys-off button.sub-toggle.sub-ready {
    color: #475569 !important; border-color: #334155 !important; text-shadow: none !important; cursor: not-allowed !important; transition: color 0.5s;
}

#sonic-lab-v25.sys-off .tick,
#sonic-lab-v25.sys-off .vol-tick { color: #475569 !important; text-shadow: none !important; }

#sonic-lab-v25.sys-off .mus-screen,
#sonic-lab-v25.sys-off .rta-screen,
#sonic-lab-v25.sys-off .sub-screen,
#sonic-lab-v25.sys-off .digital-screen-container {
    background: #000 !important; box-shadow: inset 0 0 10px #000 !important; border-color: #1e293b !important;
}

#sonic-lab-v25.sys-off canvas,
#sonic-lab-v25.sys-off .mus-grid-display,
#sonic-lab-v25.sys-off #sub-hz-val,
#sonic-lab-v25.sys-off #iso-hz-val,
#sonic-lab-v25.sys-off #freq-mini-disp,
#sonic-lab-v25.sys-off #warning-overlay {
    opacity: 0 !important; transition: opacity 0.3s;
}

/* --- STOP I RESTART SU ISTI KAD JE UGAŠENO --- */
/* --- STOP I RESTART SU ISTI KAD JE UGAŠENO (RESET SVEGA) --- */
#sonic-lab-v25.sys-off #btn-stop,
#sonic-lab-v25.sys-off #btn-restart {
    color: #ffffff4a !important;          /* Prozirno-bijeli tekst */
    text-shadow: none !important;         /* Bez sjaja */
    border-color: #334155 !important;     /* Tamno sivi rub */
    
    /* KLJUČNO: Vraćamo originalnu pozadinu i sjenu da ne izgleda stisnuto */
    background: linear-gradient(180deg, #aebcd1 0%, #1e293b 100%) !important; 
    box-shadow: 0 8px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

#sonic-lab-v25.sys-off #btn-sine {
    background: linear-gradient(180deg, #aebcd1 0%, #334155 50%, #1e293b 51%, #334155 100%) !important;
    border: 2px solid #0f172a !important; border-top: 2px solid #64748b !important;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    text-shadow: 0 -1px 0 #000 !important; transform: none !important;
}

#sonic-lab-v25.sys-off .piano-wrapper::before { background: #475569 !important; box-shadow: none !important; }
#sonic-lab-v25.sys-off .mode-lbl,
#sonic-lab-v25.sys-off .slider-corner-lbl,
#sonic-lab-v25.sys-off .freq-dot { opacity: 0 !important; animation: none !important; }

/* FONTS & BASE */
#sonic-lab-v25 .modal-header-bar,
#sonic-lab-v25 h2,
#sonic-lab-v25 #screen-input,
#sonic-lab-v25 #warning-overlay,
#sonic-lab-v25 .meter-label,
#sonic-lab-v25 .mus-cell,
#sonic-lab-v25 #sub-hz-val, 
#sonic-lab-v25 #iso-hz-val,
#sonic-lab-v25 .help-btn,
#sonic-lab-v25 .knob-label {
    font-family: 'Orbitron', monospace !important;
}

#sonic-lab-v25 button { all: unset; cursor: pointer !important; }
#sonic-lab-v25 input { all: unset; }

/* --- KNOB STYLES --- */
#sonic-lab-v25 .knob-wrapper { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; width: 16%; touch-action: none !important; }
#sonic-lab-v25 .knob-container { width: 55px; height: 55px; position: relative; cursor: ns-resize; border-radius: 50%; box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.1); background: #0f172a; touch-action: none !important; }
#sonic-lab-v25 .knob-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--neon-blue) 0%, #334155 0%); box-shadow: 0 0 10px rgba(56, 189, 248, 0.2); transition: box-shadow 0.3s; pointer-events: none; }
#sonic-lab-v25 .knob-cap { position: absolute; top: 5px; left: 5px; width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(135deg, #475569 0%, #1e293b 100%); border: 1px solid #64748b; border-bottom: 2px solid #0f172a; box-shadow: 0 4px 5px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.3); transform: rotate(0deg); z-index: 2; pointer-events: none; }
#sonic-lab-v25 .knob-indicator { position: absolute; top: 3px; left: 50%; width: 2px; height: 8px; background: var(--neon-blue); transform: translateX(-50%); box-shadow: 0 0 5px var(--neon-blue); border-radius: 1px; }
#sonic-lab-v25 .knob-label { font-size: 8px; color: #94a3b8; font-weight: bold; letter-spacing: 1px; white-space: nowrap; }
#sonic-lab-v25 .knob-val-display { font-size: 9px; color: #fff; font-weight: bold; margin-top: -2px; text-shadow: 0 0 5px rgba(255,255,255,0.5); white-space: nowrap; }

/* MOBILE POPUP SLIDER */
#sonic-lab-v25 #mobile-knob-editor {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    width: 80%; max-width: 300px; background: rgba(15, 23, 42, 0.98); border: 2px solid var(--neon-blue); 
    border-radius: 12px; padding: 20px; z-index: 9999; backdrop-filter: blur(10px);
    box-shadow: 0 0 50px rgba(0,0,0,0.9); flex-direction: column; gap: 15px; text-align: center;
    animation: popUp 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popUp { from { transform: translate(-50%, -40%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
#sonic-lab-v25 #mobile-knob-title { color: var(--neon-blue); font-weight: 900; font-size: 14px; letter-spacing: 2px; margin-bottom: 5px; font-family: 'Orbitron'; }
#sonic-lab-v25 #mobile-knob-val { color: #fff; font-weight: bold; font-size: 24px; margin-bottom: 10px; text-shadow: 0 0 10px rgba(255,255,255,0.5); font-family: 'Orbitron'; }
#sonic-lab-v25 .close-popup-area { position: fixed; top:0; left:0; width:100%; height:100%; z-index: 9998; display:none; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }

/* MODALS */
#sonic-lab-v25 #safety-modal, #sonic-lab-v25 #help-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(2, 6, 23, 0.95); z-index: 9999; 
    justify-content: center; align-items: center; backdrop-filter: blur(8px);
}
#sonic-lab-v25 .modal-box {
    background: #1e293b; border: 4px solid #334155; border-radius: 12px;
    width: 750px; max-width: 95%; height: 600px; max-height: 90vh; text-align: left; 
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8); animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden; padding: 0; display: flex; flex-direction: column;
}
#sonic-lab-v25 .modal-box.danger { border-color: #b91c1c; width: 400px !important; height: auto !important; text-align: center; padding-bottom: 20px; }
#sonic-lab-v25 .modal-header-bar {
    background: linear-gradient(180deg, #334155, #1e293b); color: white; padding: 15px; font-weight: 900; letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); border-bottom: 2px solid #0f172a;
    display: flex; align-items: center; justify-content: space-between; font-size: 16px;
}
#sonic-lab-v25 .modal-header-bar.danger { background: linear-gradient(180deg, #ef4444, #b91c1c); border-bottom: 2px solid #7f1d1d; justify-content: center; font-size: 20px;}
#sonic-lab-v25 .help-layout-grid { display: grid; grid-template-columns: 180px 1fr; height: 100%; overflow: hidden; }
#sonic-lab-v25 .help-menu { background: #0f172a; border-right: 1px solid #334155; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
#sonic-lab-v25 .help-content { padding: 25px; overflow-y: scroll; height: 100%; display: block; }
#sonic-lab-v25 .menu-item { color: #94a3b8; font-size: 11px; font-weight: bold; cursor: pointer; padding: 8px 10px; border-radius: 4px; transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px; }
#sonic-lab-v25 .menu-item:hover { background: #1e293b; color: #cbd5e1; }
#sonic-lab-v25 .menu-item.active { background: rgba(56, 189, 248, 0.1); color: var(--neon-blue); border-left: 2px solid var(--neon-blue); }

@media (max-width: 800px) {
/* --- DIZAJNERSKI 'X' GUMB --- */
#sonic-lab-v25 .close-modal-btn {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.05);
}
#sonic-lab-v25 .close-modal-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
#sonic-lab-v25 .close-modal-btn:hover,
#sonic-lab-v25 .close-modal-btn:active {
    background: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
    transform: scale(1.05);
}

/* --- GLOBALNI PRO-LEVEL LAYOUT (Desktop, Tablet, Mobile) --- */
#sonic-lab-v25 .help-layout-grid { 
    display: flex !important; 
    flex-direction: column !important; 
    height: 100%; 
    overflow: hidden; 
}

#sonic-lab-v25 .help-menu { 
    width: 100% !important; 
    background: #020617;
    border-right: none !important; 
    border-bottom: 2px solid #1e293b !important; 
    display: flex !important;
    flex-direction: column !important; 
    gap: 0px !important; 
    padding: 15px 15px 10px 15px !important; 
    max-height: 45vh; /* Ograničava gornji meni da ne pobjegne tekst ispod */
    flex-shrink: 0; 
    overflow-y: auto;
}

#sonic-lab-v25 .acc-group { 
    width: 100% !important; 
    margin-bottom: 8px !important; 
}

#sonic-lab-v25 .menu-category {
    padding: 16px 15px !important; 
    font-size: 12px !important;
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border: 1px solid #334155 !important;
    border-radius: 6px !important;
}

#sonic-lab-v25 .acc-content {
    margin-bottom: 5px !important;
    border-left: 2px solid #38bdf8 !important; /* Elegantna plava linija označava da smo unutra */
    margin-left: 10px !important;
    padding-left: 5px !important;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 0 0 6px 0;
}

/* GLATKA LISTA ALATA */
#sonic-lab-v25 .menu-item { 
    width: 100% !important; 
    text-align: left !important; 
    border: none !important; 
    border-bottom: 1px solid rgba(51, 65, 85, 0.4) !important; 
    margin-bottom: 0 !important; 
    background: transparent !important; 
    padding: 14px 15px !important; 
    font-size: 11px !important;
    border-radius: 0 !important;
    color: #94a3b8;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#sonic-lab-v25 .menu-item:last-child { border-bottom: none !important; }

#sonic-lab-v25 .menu-item:hover {
    background: rgba(30, 41, 59, 0.5) !important; 
    color: #e2e8f0 !important;
    padding-left: 20px !important; /* Suptilni skok udesno prijelazom miša */
}

/* AKTIVAN ELEMENT */
#sonic-lab-v25 .menu-item.active { 
    border-left: 3px solid var(--neon-blue) !important; 
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.15) 0%, transparent 100%) !important; 
    color: var(--neon-blue) !important;
    padding-left: 20px !important;
    box-shadow: none !important;
}

#sonic-lab-v25 .help-content { 
    flex: 1; 
    padding: 30px 25px !important; 
    overflow-y: auto; 
    background: #0f172a;
}
}

#sonic-lab-v25 .modal-section { margin-bottom: 40px; border-bottom: 1px solid #334155; padding-bottom: 20px; }
#sonic-lab-v25 .modal-section:last-child { border: none; }
#sonic-lab-v25 .modal-h3 { color: var(--neon-blue); font-family: 'Orbitron'; font-size: 16px; margin-bottom: 15px; display: block; font-weight: bold; text-transform: uppercase !important; }
#sonic-lab-v25 .modal-text { font-size: 13px; color: #cbd5e1; line-height: 1.7; margin-bottom: 15px; text-transform: none !important; text-align: justify !important; font-family: 'Rajdhani', sans-serif !important; }
#sonic-lab-v25 .modal-text strong { color: #fff; font-weight: bold; }
#sonic-lab-v25 .help-list { padding-left: 20px; color: #94a3b8; font-size: 12px; line-height: 1.6; margin-bottom: 15px; text-transform: none !important; text-align: justify !important; font-family: 'Rajdhani', sans-serif !important; }
#sonic-lab-v25 .help-list li { margin-bottom: 5px; }

@keyframes modalPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#sonic-lab-v25 .modal-actions { display: flex; gap: 15px; justify-content: center; margin-top: 20px;}

#sonic-lab-v25 .lab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; border-bottom: 0px groove #334155; padding-bottom: 0px; margin-top: -29px; }
#sonic-lab-v25 h2 { margin-left: 30px !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: 1px !important; color: #e2e8f0 !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; background: transparent !important; padding: 0 !important; line-height: 1.2 !important; }
#sonic-lab-v25 .lab-title span { color: var(--neon-blue); font-size: 11px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 5px rgba(56,189,248,0.5); margin-left: 30px; transition: color 0.5s; }
    
#sonic-lab-v25 .status-panel { font-size: 09px!important; font-weight: bold; color: #94a3b8; display: flex; align-items: center; gap: 10px; background: #0f172a; padding: 5px 5px; border-radius: 4px; border: 1px solid #334155; box-shadow: inset 0 2px 5px rgba(0,0,0,0.8); margin-right: 28px; }
#sonic-lab-v25 .led-ind { width: 8px; height: 8px; background: #334155; border-radius: 50%; transition: 0.3s; box-shadow: inset 0 1px 1px rgba(0,0,0,1); }
#sonic-lab-v25 .led-ind.active { background: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); animation: pulseBlue 2s infinite; }
@keyframes pulseBlue { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

#sonic-lab-v25 .digital-screen-container { background: #020617; padding: 6px; border-radius: 8px; margin-bottom: 10px; height: 296px; box-shadow: inset 0 0 0 2px #0f172a, inset 0 0 0 5px #334155, inset 0 1px 0 5px rgba(255,255,255,0.1), 0 10px 30px rgba(0,0,0,0.7); border: 1px solid #1e293b; position: relative; transition: background 0.5s; }
#sonic-lab-v25 .screen-inner { width: 100%; height: 100%; background: #000; transform-origin: center; position: relative; border-radius: 2px; overflow: hidden; border: 1px solid #0f172a; }
#sonic-lab-v25 .screen-inner::after { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 40%, rgba(0,0,0,0.1) 100%); pointer-events: none; z-index: 10; }
#sonic-lab-v25 .screen-inner.crt-on { background: radial-gradient(circle at center, var(--screen-bg) 40%, #0ea5e9 150%); box-shadow: inset 0 0 30px rgba(0 0 0 / 75%); animation: turnOn 0.4s linear forwards; }
@keyframes turnOn {
    0% { transform: scale(1, 0.002); opacity: 0; filter: brightness(0); background: #000;}
    20% { transform: scale(1, 0.002); opacity: 1; filter: brightness(5); background: #fff; }
    50% { transform: scale(1, 1); opacity: 1; filter: brightness(1.5); background: radial-gradient(circle at center, var(--screen-bg) 40%, #0ea5e9 150%); }
    100% { transform: scale(1, 1); opacity: 1; filter: brightness(1); background: radial-gradient(circle at center, var(--screen-bg) 40%, #0ea5e9 150%); }
}
#sonic-lab-v25 .screen-inner.crt-off { background: #000 !important; transition: background 0.1s; }
#sonic-lab-v25 canvas#scope { width: 100%; height: 100%; display: block; opacity: 1; transition: opacity 0.5s; }

#sonic-lab-v25 #hz-overlay { position: absolute; top: 10px; right: 5px; display: none; text-align: right; z-index: 9; pointer-events: auto; }
#sonic-lab-v25 .crt-on #hz-overlay { display: block; animation: fadeIn 1s forwards 0.5s; opacity: 0; }
@keyframes fadeIn { to { opacity: 1; } }

#sonic-lab-v25 #screen-input {
    background: transparent !important; border: none !important; outline: none !important;
    font-size: 30px !important; font-weight: 600 !important; color: var(--screen-ink) !important; text-align: right !important; width: 400px !important;
    margin: 0 !important; padding: 0 !important; pointer-events: auto !important; text-transform: none !important;
    text-shadow: 0 0 3px rgba(15, 23, 42, 0.6), 0 0 1px var(--screen-ink) !important; box-shadow: none !important;
}
#sonic-lab-v25 #screen-input:focus { border-bottom: 2px solid var(--screen-ink) !important; }

#sonic-lab-v25 #warning-overlay { position: absolute; top: 85%; left: 50%; transform: translate(-50%, -50%); font-weight: 900; font-size: 10px; color: var(--screen-ink); text-align: center; display: none; z-index: 20; text-shadow: 0 0 2px rgba(255,255,255,0.3); width: 90%; letter-spacing: 1px; }
#sonic-lab-v25 .crt-on #warning-overlay.show { display: block; animation: flashWarn 0.5s infinite alternate; color: var(--screen-ink);}
@keyframes flashWarn { 0% { opacity: 1; } 100% { opacity: 0.3; } }

/* METERS */
#sonic-lab-v25 .meter-bridge { background: #0f172a; border: 1px solid #334155; border-radius: 6px; padding: 10px; margin-bottom: 10px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.8); border-bottom: 1px solid #475569; position: relative; overflow: hidden; }
#sonic-lab-v25 .meter-bridge::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 40%, rgba(0,0,0,0.3) 100%); box-shadow: inset 0 0 25px rgba(2, 6, 23, 0.95), inset 0 0 10px rgba(2, 6, 23, 0.7); pointer-events: none; z-index: 10; }
#sonic-lab-v25 .meter-row { display: flex; flex-direction: row; gap: 20px; align-items: center; position: relative; z-index: 2; }
#sonic-lab-v25 .meter-channel { display: flex; align-items: center; gap: 8px; flex: 1; }
#sonic-lab-v25 .meter-label { font-size: 11px; color: #e0f2fe; font-weight: 900; width: 15px; text-shadow: 0 0 6px var(--neon-blue), 0 0 2px var(--neon-blue); transition: color 0.5s; }
#sonic-lab-v25 .led-strip { flex: 1; display: flex; gap: 3px; height: 10px; background: #020617; padding: 2px; border-radius: 2px; box-shadow: inset 0 1px 3px #000; }
#sonic-lab-v25 .led-seg { flex: 1; background: #1e293b; border-radius: 1px; transition: background 0.05s; }
#sonic-lab-v25 .led-seg.on-green { background: var(--neon-blue); box-shadow: 0 0 8px var(--neon-blue); }
#sonic-lab-v25 .led-seg.on-yellow { background: #eab308; box-shadow: 0 0 8px #eab308; }
#sonic-lab-v25 .led-seg.on-red { background: #ef4444; box-shadow: 0 0 10px #ef4444; }
#sonic-lab-v25 .meter-scale-row { display: flex; flex-direction: row; gap: 20px; margin-top: 4px; position: relative; z-index: 2;}
#sonic-lab-v25 .meter-scale-half { flex: 1; display: flex; justify-content: space-between; font-family: monospace; font-size: 9px; padding-left: 23px; }
#sonic-lab-v25 .meter-scale-half span { color: #e0f2fe; text-shadow: 0 0 6px var(--neon-blue), 0 0 2px var(--neon-blue); font-weight: bold; transition: color 0.5s; }

/* --- NOVI PANEL STIL (MASONRY COMPATIBLE) --- */
#sonic-lab-v25 .panel-card { 
    background: linear-gradient(135deg, #253045, #1e293b);
    border: 1px solid #475569; border-top: 1px solid #64748b; border-bottom: 1px solid #0f172a;
    border-radius: 8px; padding: 5px; box-shadow: 0 10px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    padding-bottom: 15px;
    
    /* Masonry ključni dijelovi: */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 15px;
    display: inline-block;
    width: 100%;
    
    scroll-margin-top: 20px; 
}

#sonic-lab-v25 .panel-card::before { content:''; position:absolute; top:8px; left:8px; width:8px; height:8px; background:#0f172a; border-radius:50%; box-shadow:inset 0 1px 1px rgba(255,255,255,0.2); opacity:0.0; }
#sonic-lab-v25 .panel-card::after { content:''; position:absolute; top:8px; right:8px; width:8px; height:8px; background:#0f172a; border-radius:50%; box-shadow:inset 0 1px 1px rgba(255,255,255,0.2); opacity:0.0; }

/* HEADER RED S JUMP GUMBOM */
#sonic-lab-v25 .panel-header-row {
    display: flex; justify-content: space-between; align-items: flex-end; 
    border-bottom: 1px solid var(--neon-blue); padding-bottom: 5px; margin-bottom: 15px;
}
#sonic-lab-v25 .panel-header-row .panel-head { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* STIL ZA NASLOVE MODULA */
#sonic-lab-v25 .panel-head {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; display: block; 
    padding-bottom: 10px; color: var(--neon-blue); border-bottom: 1px solid var(--neon-blue); text-shadow: 0 0 8px rgba(56,189,248,0.5);
    transition: color 0.5s, border-color 0.5s;
}

#sonic-lab-v25 .tech-sub { display: block; font-size: 9px; color: #64748b !important; margin-top: -15px; margin-bottom: 20px; letter-spacing: 1px; font-family: monospace; }
#sonic-lab-v25 .wave-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 20px; }

#sonic-lab-v25 button.tech-btn, #sonic-lab-v25 button.modal-btn, #sonic-lab-v25 button.pan-side-btn {
    background: linear-gradient(180deg, #aebcd1 0%, #334155 50%, #1e293b 51%, #334155 100%) !important;
    border: 2px solid #0f172a !important; border-top: 2px solid #64748b !important;
    color: #38bdf8 !important; text-shadow: 0 -1px 0 #000 !important;
    padding: 0 !important; height: 48px !important; border-radius: 4px !important; 
    font-size: 10px !important; font-weight: 700 !important; 
    transition: all 0.1s ease-out !important; text-align: center !important; margin: 0 !important;
    width: 100%; display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    position: relative; z-index: 1;
}
#sonic-lab-v25 button.tech-btn:hover { background: linear-gradient(180deg, #576880 0%, #3f4f66 50%, #29354a 51%, #3f4f66 100%) !important; color: #fff !important; }
#sonic-lab-v25 button.tech-btn:active, #sonic-lab-v25 button.tech-btn.active { 
    background: #0f172a !important; color: var(--neon-blue) !important; border: 2px solid var(--neon-blue) !important;
    box-shadow: inset 0 0 10px rgba(56,189,248,0.3), 0 0 8px rgba(56,189,248,0.4) !important;
    text-shadow: 0 0 5px var(--neon-blue) !important; transform: translateY(1px); 
}
#sonic-lab-v25 button.noise-btn { flex-direction: column !important; justify-content: center !important; gap: 3px !important; }
#sonic-lab-v25 button.pan-side-btn { width: 62px !important; height: 50px !important; flex-shrink: 0; flex-direction: column !important; gap: 2px !important; line-height: 1 !important; }
#sonic-lab-v25 .pan-side-label { font-size: 15px; font-weight: 900; color: #e2e8f0; transition: color 0.5s; }
#sonic-lab-v25 .pan-side-val { font-size: 9px; color: var(--neon-blue); font-weight: bold; transition: color 0.5s; }
#sonic-lab-v25 button.pan-side-btn:active .pan-side-label, #sonic-lab-v25 button.pan-side-btn:active .pan-side-val { color: var(--neon-blue) !important; }
#sonic-lab-v25 button.modal-btn { width: 120px !important; height: 38px !important; font-size: 11px !important; }

#sonic-lab-v25 .btn-icon, #sonic-lab-v25 .noise-icon { 
    width: 20px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
#sonic-lab-v25 button.noise-white.active { color: #ffffff !important; border-color: #ffffff !important; text-shadow: 0 0 5px #ffffff !important; box-shadow: inset 0 0 10px rgba(255,255,255,0.4), 0 0 8px rgba(255,255,255,0.4) !important; }
#sonic-lab-v25 button.noise-pink.active { color: #f472b6 !important; border-color: #ec4899 !important; text-shadow: 0 0 5px #ec4899 !important; box-shadow: inset 0 0 10px rgba(236, 72, 153, 0.4), 0 0 8px rgba(236, 72, 153, 0.4) !important; }
#sonic-lab-v25 button.noise-blue.active { color: #60a5fa !important; border-color: #3b82f6 !important; text-shadow: 0 0 5px #3b82f6 !important; box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.4), 0 0 8px rgba(59, 130, 246, 0.4) !important; }
#sonic-lab-v25 button.noise-grey.active { color: #cbd5e1 !important; border-color: #94a3b8 !important; text-shadow: 0 0 5px #94a3b8 !important; box-shadow: inset 0 0 10px rgba(148, 163, 184, 0.4), 0 0 8px rgba(148, 163, 184, 0.4) !important; }
#sonic-lab-v25 button.noise-red.active { color: #f87171 !important; border-color: #ef4444 !important; text-shadow: 0 0 5px #ef4444 !important; box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.4), 0 0 8px rgba(239, 68, 68, 0.4) !important; }
#sonic-lab-v25 button.btn-confirm { background: linear-gradient(180deg, #ef4444, #991b1b) !important; color: white !important; border: 1px solid #7f1d1d !important; border-bottom: 3px solid #450a0a !important; }

/* MUSICAL DISPLAY */
#sonic-lab-v25 .mus-screen {
    background: radial-gradient(circle at center, var(--screen-bg) 20%, #0369a1 150%); height: 48px; margin-bottom: 8px; 
    border: 2px solid #0f172a; border-radius: 4px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 15px rgba(2, 6, 23, 0.8), inset 0 0 5px rgba(2, 6, 23, 0.5);
    transition: background 0.5s;
}
#sonic-lab-v25 .mus-grid-display { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 6px; width: 100%; padding: 0 10px; z-index: 2; opacity: 0.85; filter: blur(0.4px); transition: opacity 0.5s;}
#sonic-lab-v25 .mus-cell {
    border: 1px solid rgba(15, 23, 42, 0.3); border-radius: 2px; text-align: center; font-size: 12px; font-weight: 900; color: var(--screen-ink); padding: 4px 0;
    background: rgba(255,255,255,0.05); text-shadow: 0 0 3px rgba(15, 23, 42, 0.6); white-space: nowrap;
}

/* RTA ANALYZER */
#sonic-lab-v25 .rta-screen {
    background: #020617; height: 100px; margin-bottom: 8px; border: 2px solid #334155; border-radius: 6px;
    position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; box-shadow: inset 0 0 15px rgba(0,0,0,1); padding: 0 4px 4px 4px;
    transition: background 0.5s;
}
#sonic-lab-v25 #iso-status { position: absolute; top: 6px; left: 10px; font-size: 9px; color: #64748b; font-weight: bold; letter-spacing: 1px; z-index: 2; opacity: 0.8; }

/* ADVANCED SUBWOOFER MATRIX */
#sonic-lab-v25 .sub-unit {
    background: linear-gradient(135deg, #1e293b, #0f172a); border: 1px solid #334155; border-radius: 8px; padding: 5px;
    display: flex; flex-direction: column; gap: 12px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
#sonic-lab-v25 .sub-screen {
    background: #020617; border: 2px solid #334155; border-radius: 6px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 15px rgba(0,0,0,1);
    transition: background 0.5s;
}
#sonic-lab-v25 canvas#sub-scope-canvas { position: absolute; top:0; left:0; width:100%; height:100%; opacity: 0.8; }
#sonic-lab-v25 #sub-status { position: absolute; top: 6px; left: 10px; font-size: 9px; color: #64748b; font-weight: bold; letter-spacing: 1px; z-index: 2; opacity: 0.8; }
#sonic-lab-v25 #sub-invert-status { position: absolute; top: 6px; right: 10px; font-size: 9px; color: #eab308; font-weight: bold; letter-spacing: 1px; z-index: 2; display: none; text-shadow: 0 0 5px rgba(234, 179, 8, 0.5); }
#sonic-lab-v25 #sub-hz-val, #sonic-lab-v25 #iso-hz-val {
    font-size: 14px!important; color: var(--screen-ink); font-weight: 900;
    text-shadow: 0 0 4px rgba(15, 23, 42, 0.7), 0 0 1px rgba(15, 23, 42, 0.9); filter: blur(0.4px); z-index: 2; opacity: 0.85; transition: opacity 0.5s;
}
#sonic-lab-v25 button.sub-phase.active { color: #fbbf24 !important; border-color: #fbbf24 !important; text-shadow: 0 0 10px #fbbf24; }
#sonic-lab-v25 button.sub-toggle.sub-ready { 
    color: var(--neon-blue) !important; border-color: #475569 !important; text-shadow: 0 0 5px rgba(56, 189, 248, 0.4) !important; transition: color 0.5s, text-shadow 0.5s;
}
#sonic-lab-v25 button.sub-toggle.sub-active { color: #ef4444 !important; border-color: #ef4444 !important; text-shadow: 0 0 10px #ef4444; }

/* SLIDERS */
#sonic-lab-v25 .slider-track-container { position: relative; margin: 10px 0 30px 0; }
#sonic-lab-v25 input[type=range].magnet-slider { width: 100%; -webkit-appearance: none; background: transparent; cursor: pointer; margin: 0; position: relative; z-index: 5; }
#sonic-lab-v25 input[type=range].magnet-slider:focus { outline: none; }
#sonic-lab-v25 input[type=range].magnet-slider::-webkit-slider-runnable-track { height: 10px; background: #0f172a; border-radius: 5px; border: 2px solid #334155; box-shadow: inset 0 2px 5px rgba(0,0,0,0.9); }
#sonic-lab-v25 input[type=range].magnet-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 26px; width: 14px; background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 50%, #64748b 100%); border-radius: 3px; margin-top: -10px; border: 1px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.7); }
#sonic-lab-v25 .scale-container { position: relative; height: 20px; margin-top: 15px; font-family: monospace; font-size: 9px; color: #64748b; padding: 0 15px; width: 95% !important; margin-left: 9px !important; }
#sonic-lab-v25 .scale-ruler { display: none; width: 100%; justify-content: space-between; position: absolute; top: 0; left: 0; }
#sonic-lab-v25 .scale-ruler.active { display: block; }
#sonic-lab-v25 .tick { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; }
#sonic-lab-v25 .tick::before { content:'|'; display: block; font-size: 10px; margin-bottom: 5px; color: #475569; font-weight:bold; }
#sonic-lab-v25 .vol-scale-wrapper { position: relative; width: 100%; height: 30px; margin-top: 10px; font-family: monospace; font-size: 9px; color: #64748b; }
#sonic-lab-v25 .vol-tick { position: absolute; transform: translateX(-50%); }
#sonic-lab-v25 .pan-display-row { display: flex; justify-content: space-between; font-size: 11px; color: #38bdf8; font-weight: bold; margin-bottom: 8px; font-family: monospace; transition: color 0.5s; }
#sonic-lab-v25 .big-actions { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; /* TRI JEDNAKA STUPCA */
    gap: 10px; /* Malo manji razmak da stane */
    margin-bottom: 0px; 
    padding: 0px 8px; 
}
#sonic-lab-v25 button.btn-restart { 
    color: #fbbf24 !important; /* Amber boja */
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.6) !important;
    border-color: #b45309 !important; 
}
#sonic-lab-v25 button.btn-restart:active {
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%) !important;
    color: #fff !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8) !important;
}
#sonic-lab-v25 #freq-mini-disp {
    filter: blur(0.5px); text-shadow: 0 0 2px rgba(15, 23, 42, 0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; transition: opacity 0.5s;
}

#sonic-lab-v25 .smoked-glass {
    background: var(--glass-bg); border: 1px solid #334155; border-radius: 6px; padding: 15px 15px 10px 15px; 
    border-color: #334155 !important; box-shadow: inset 0 2px 10px rgba(0,0,0,0.8); margin-top: 5px; display: flex; flex-direction: column; justify-content: center; min-height: 87px; 
}
#sonic-lab-v25 .text-glow-white { color: #ffffff !important; text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 255, 255, 0.3); font-weight: 700 !important; opacity: 0.95; }
#sonic-lab-v25 .smoked-glass .tick { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,0.7); }
#sonic-lab-v25 .smoked-glass .tick::before { color: #64748b; }
#sonic-lab-v25 .pan-wrapper { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between; }
#sonic-lab-v25 .pan-slider-container { position: relative; flex: 1; margin: 0 10px; display: flex; align-items: center; justify-content: center; }
#sonic-lab-v25 .pan-center-marker { position: absolute; left: 50%; height: 12px; width: 2px; background: #64748b; transform: translateX(-50%); pointer-events: none; z-index: 1; top: 50%; margin-top: -6px; box-shadow: 0 0 2px #000; }

#sonic-lab-v25 button.pwr-btn {
    padding: 0 !important; height: 40px !important; font-size: 14px !important; letter-spacing: 2px !important; border-radius: 6px; font-weight: 900 !important;
    background: linear-gradient(180deg, #aebcd1 0%, #1e293b 100%) !important; border: 2px solid #0f172a !important; border-top: 2px solid #94a3b8 !important;
    box-shadow: 0 8px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2) !important; transition: background 0.1s, color 0.1s, box-shadow 0.1s; text-align: center; margin-top: 5px;
}
#sonic-lab-v25 button.pwr-btn:active { transform: none !important; }
@keyframes pulseBlueGray { 
    0% { box-shadow: 0 0 5px var(--neon-blue); border-color: var(--neon-blue); color: var(--neon-blue); text-shadow: 0 0 5px var(--neon-blue); } 
    50% { box-shadow: none; border-color: #ffffff; color: #ffffff; text-shadow: none; } 
    100% { box-shadow: 0 0 5px var(--neon-blue); border-color: var(--neon-blue); color: var(--neon-blue); text-shadow: 0 0 5px var(--neon-blue); } 
}
#sonic-lab-v25 button.btn-ready { animation: pulseBlueGray 2s infinite ease-in-out; }
#sonic-lab-v25 button.btn-on { color: #38bdf8 !important; text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important; border-color: #334155; animation: none !important; }
#sonic-lab-v25 button.btn-mute { 
    background: #0f172a !important; color: #ef4444 !important; border: 2px solid #ef4444 !important;
    box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.2), 0 0 8px rgba(239, 68, 68, 0.4) !important; text-shadow: 0 0 5px #ef4444 !important; animation: none !important;
}
#sonic-lab-v25 button.btn-off { color: #38bdf8 !important; text-shadow: 0 0px 8px #38bdf899 !important; }
#sonic-lab-v25 button.btn-off:active, #sonic-lab-v25 button.btn-off.active { 
    background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%) !important; color: white !important; border-color: #ef4444 !important; 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8) !important; transform: none !important; 
}

#sonic-lab-v25 .piano-wrapper {
    position: relative; height: 180px; background: #0d1117; border-radius: 8px; overflow: hidden; margin-bottom: 20px; 
    border: 4px solid #1e293b; border-top: 15px solid #1e293b; display: flex; justify-content: center; box-shadow: 0 20px 40px rgba(0,0,0,0.7), inset 0 0 20px rgba(0,0,0,0.8);
}
#sonic-lab-v25 .piano-wrapper::before { content: ''; position: absolute; top:0; left:0; width:100%; height:4px; background: #38bdf8; z-index: 20; box-shadow: 0 1px 15px rgb(56 189 248); }
#sonic-lab-v25 .key {
    position: relative; float: left; width: 14.28%; height: 100%; 
    background: linear-gradient(to bottom, #f1f5f9 0%, #cbd5e1 85%, #94a3b8 100%);
    border: 1px solid #1e293b; border-top: none; border-radius: 0 0 4px 4px; z-index: 1; cursor: pointer; transition: transform 0.05s, background 0.1s; 
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; font-family: 'Segoe UI', sans-serif; font-size: 10px; font-weight: bold; color: #475569;
    box-shadow: inset 2px 0 3px rgba(255,255,255,0.7), inset -2px 0 3px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.6); border-bottom: 5px solid #475569; 
}
#sonic-lab-v25 .key:active, #sonic-lab-v25 .key.active { 
    background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 100%); 
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3); transform: translateY(2px); border-bottom: 2px solid #475569; color: #1e293b;
}
#sonic-lab-v25 .key.black {
    position: absolute; top: 0; height: 65%; width: 10%; 
    background: linear-gradient(180deg, #1e293b 0%, #020617 90%, #000 100%);
    z-index: 10; border-radius: 0 0 3px 3px; border: 1px solid #334155; border-top: none; color: #64748b; padding-bottom: 8px; font-size: 8px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.8), inset 1px 1px 2px rgba(255,255,255,0.2);
}
#sonic-lab-v25 .key.black:active, #sonic-lab-v25 .key.black.active { 
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%); color: #fff; transform: translateY(1px); box-shadow: 1px 1px 3px rgba(0,0,0,0.8), inset 0 0 5px rgba(0,0,0,0.5);
}
#sonic-lab-v25 button.oct-btn { width: 35px !important; font-size: 11px !important; }

/* --- OZNAKE I TOČKICE --- */
.slider-corner-lbl {
    position: absolute; bottom: 5px; font-size: 9px; font-weight: 900; font-family: 'Rajdhani', sans-serif !important; letter-spacing: 1px; pointer-events: none; z-index: 5;
}
.slider-corner-lbl.left { left: 10px; color: #ef4444; display: none; text-shadow: 0 0 5px rgba(239, 68, 68, 0.3); }
.slider-corner-lbl.right { right: 10px; color: #ef4444; display: none; animation: textPulse 1.5s infinite; }
@keyframes textPulse { 0% { opacity: 1; text-shadow: 0 0 5px rgba(239, 68, 68, 0.5); } 50% { opacity: 0.4; text-shadow: none; } 100% { opacity: 1; text-shadow: 0 0 5px rgba(239, 68, 68, 0.5); } }

.freq-dot {
    position: absolute; bottom: 8px; right: 10px; width: 8px; height: 8px; background-color: #38bdf8; border-radius: 50%; box-shadow: 0 0 8px #38bdf8; display: none; pointer-events: none; z-index: 6;
}
@keyframes dotPulse { 0% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 12px #38bdf8; } 100% { opacity: 0.2; transform: scale(0.8); } }

.mode-indicator-wrap { position: absolute; bottom: 5px; left: 10px; display: flex; gap: 8px; z-index: 5; pointer-events: none; }
.mode-lbl { font-size: 9px; font-weight: 900; font-family: 'Rajdhani', sans-serif !important; letter-spacing: 1px; color: #1e293b; transition: color 0.3s, text-shadow 0.3s, opacity 0.5s; }
.mode-lbl.active { color: #38bdf8; text-shadow: 0 0 5px rgba(56, 189, 248, 0.6); }

@media (max-width: 600px) { .hide-mobile { display: none; } }

.knob-scale-nums { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.knob-scale-nums span { position: absolute; width: 0; height: 0; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; color: #64748b; font-family: 'Rajdhani', sans-serif; white-space: nowrap; } 

#sonic-lab-v25 #drive-monitor {
    position: absolute; bottom: 5px; right: 8px; left: auto; text-align: right; 
    color: #ef4444; font-family: 'Orbitron', monospace; font-weight: 900; font-size: 9px; letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(239, 68, 68, 0.6); display: none; z-index: 20; pointer-events: none;
    animation: drivePulse 0.5s infinite alternate;
}
@keyframes drivePulse { 0% { opacity: 0.7; text-shadow: 0 0 2px rgba(239, 68, 68, 0.4); } 100% { opacity: 1; text-shadow: 0 0 8px rgba(239, 68, 68, 0.9); } }

/* --- JUMP & FLASH STILOVI --- */
#sonic-lab-v25 .jump-btn {
    background: transparent; border: 1px solid #334155; color: #64748b; font-family: 'Orbitron', monospace;
    font-size: 9px; padding: 2px 6px; border-radius: 4px; cursor: pointer; transition: all 0.2s;
    text-transform: uppercase; letter-spacing: 1px; height: auto !important; line-height: normal;
}
#sonic-lab-v25 .jump-btn:hover { border-color: var(--neon-blue); color: var(--neon-blue); box-shadow: 0 0 5px rgba(56, 189, 248, 0.2); }
#sonic-lab-v25 .jump-btn:active { background: var(--neon-blue); color: #0f172a; }

/* JAKA ANIMACIJA BLJESKA */
@keyframes jumpFlashStrong {
    0% {
        box-shadow: 0 0 40px 10px rgba(255, 255, 255, 0.9), inset 0 0 30px rgba(255,255,255,0.4);
        border-color: #ffffff; background-color: rgba(255, 255, 255, 0.1); transform: scale(1.03) translateY(-5px); 
    }
    30% {
        box-shadow: 0 0 25px 5px var(--neon-blue), inset 0 0 10px var(--neon-blue);
        border-color: var(--neon-blue); background-color: rgba(56, 189, 248, 0.15); transform: scale(1.01) translateY(0);
    }
    100% {
        box-shadow: 0 10px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
        border-color: #475569; background-color: transparent; transform: scale(1);
    }
}
.active-jump { animation: jumpFlashStrong 1.2s ease-out forwards; z-index: 999; position: relative; }
/* 7. Spašavamo ACTIVATE gumb - Suptilni i elegantni "Standby" puls */
@keyframes activatePulseSafe {
    0%   { filter: drop-shadow(0 0 2px var(--neon-blue)) brightness(1); }
    50%  { filter: drop-shadow(0 0 8px var(--neon-blue)) brightness(1); } /* Smanjen intenzitet sa 1.4 na 1.15 i sjaj sa 15px na 8px */
    100% { filter: drop-shadow(0 0 2px var(--neon-blue)) brightness(1); }
}

#sonic-lab-v25.sys-off #btn-main {
    border-color: var(--neon-blue) !important;
    color: var(--neon-blue) !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
    box-shadow: none !important; 
    animation: activatePulseSafe 2s infinite ease-in-out !important;
}

/* 8. Gašenje apsolutno svih rezultata, uključujući MAX CURRENT (crveno) i POWER CABLE (žuto) */
.sys-off #res-fl,
.sys-off #res-fr,
.sys-off #res-rl,
.sys-off #res-rr,
.sys-off #res-sub,
.sys-off #res-ohms,
.sys-off #res-peak,
.sys-off [id*="res-"],         /* Hvata SVE elemente čiji ID sadrži "res-" (rezultati) */
.sys-off [style*="#ef4444"],   /* Hvata sve što ima tvoju crvenu boju */
.sys-off [style*="#eab308"]    /* Hvata sve što ima tvoju žutu boju (kabel i polaritet pulse) */
{
    color: #475569 !important;
    text-shadow: none !important;
    border-color: #1e293b !important;
}
/* =========================================
   ULTIMATIVNO GAŠENJE SVIH BOJA (SYSTEM OFF)
   Prisilno gasi sva input polja, rezultate, inline stilove i SVG grafiku
========================================= */
#sonic-lab-v25.sys-off #dsp-xo-canvas,
#sonic-lab-v25.sys-off #eq-curve-canvas,
#sonic-lab-v25.sys-off .tcr-spk,
#sonic-lab-v25.sys-off #tcr-dot,
#sonic-lab-v25.sys-off .tcr-spk.sub {
    filter: grayscale(1) brightness(0.3) !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
}

#sonic-lab-v25.sys-off [style*="#f472b6"], 
#sonic-lab-v25.sys-off [style*="color:#f472b6"],
#sonic-lab-v25.sys-off [style*="color: #f472b6"],
#sonic-lab-v25.sys-off [style*="#38bdf8"],
#sonic-lab-v25.sys-off [style*="#eab308"],
#sonic-lab-v25.sys-off [style*="#ef4444"] {
    color: #475569 !important; /* Prisila u tamno sivu */
    border-color: #1e293b !important;
    text-shadow: none !important;
}

#sonic-lab-v25.sys-off .smoked-glass {
    border-color: #1e293b !important;
    background: rgba(15, 23, 42, 0.2) !important;
}

#sonic-lab-v25.sys-off input, 
#sonic-lab-v25.sys-off select {
    color: #475569 !important;
    background: #020617 !important;
    border-color: #1e293b !important;
    pointer-events: none !important;
}

/* Prisila za žutu točku (TCR dot) i ikone */
#sonic-lab-v25.sys-off #tcr-dot {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}


#sonic-lab-v25.sys-off [style*="color"],
#sonic-lab-v25.sys-off input,
#sonic-lab-v25.sys-off select,
#sonic-lab-v25.sys-off text,              /* Hvata SVG brojke (kao 200 na VU metru) */
#sonic-lab-v25.sys-off .mus-cell,
#sonic-lab-v25.sys-off #box-vol-res,
#sonic-lab-v25.sys-off #box-tune-res,
#sonic-lab-v25.sys-off #box-peak-res,
#sonic-lab-v25.sys-off #box-cabin-res,
#sonic-lab-v25.sys-off #box-status,
#sonic-lab-v25.sys-off #elec-playtime,
#sonic-lab-v25.sys-off #elec-status,
#sonic-lab-v25.sys-off #elec-rec,
#sonic-lab-v25.sys-off #calc-result,
#sonic-lab-v25.sys-off #sub-hz-val,
#sonic-lab-v25.sys-off #iso-hz-val,
#sonic-lab-v25.sys-off #freq-mini-disp,
#sonic-lab-v25.sys-off [id*="res-"] {
    color: #475569 !important;
    fill: #475569 !important;             /* Ubija crvenu boju u SVG-u */
    text-shadow: none !important;
    border-color: #1e293b !important;
}

/* Osiguravamo da placeholderi unutar inputa također budu sivi */
#sonic-lab-v25.sys-off input::placeholder {
    color: #334155 !important;
}

/* SPAŠAVANJE "ACTIVATE" GUMBA - Jedini mora svijetliti u mraku */
#sonic-lab-v25.sys-off #btn-main,
#sonic-lab-v25.sys-off #btn-main * {
    color: var(--neon-blue) !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
    border-color: var(--neon-blue) !important;
}

/* =========================================
   VU METER ANALOG BLUR FIX (iOS / IPHONE)
   Prisiljava WebKit da zamuti SVG grafiku na Retina ekranima
========================================= */

/* 1. Tekst i pozadina dobivaju puni 3D tretman za savršen blur */
.mus-screen svg text,
.mus-screen svg path {
    -webkit-filter: blur(0.35px) !important; 
    filter: blur(0.35px) !important;
    transform: translateZ(0) !important; 
}

/* 2. IGLA: Zamuti je, ali BEZ 'transform' pravila!
   Na ovaj način JavaScript može slobodno okretati iglu u ritmu zvuka. */
.mus-screen svg g#vu-needle {
    -webkit-filter: blur(0.35px) !important; 
    filter: blur(0.35px) !important;
}
/* =========================================
   PASSIVE CROSSOVER - MAX SIZE FONTOVI
========================================= */

/* 1. Povećanje polja za unos (FREQ i IMP) */
#xo-freq, #xo-imp {
    font-size: 14px !important;
    font-weight: 900 !important;
}

/* 2. Povećanje naslova "1ST ORDER (6dB/oct)" i "2ND ORDER BUTTERWORTH" */
#module-acoustics div[style*="font-size: 10px; color:#64748b"] {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #cbd5e1 !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}

/* 3. Povećanje labela uz rezultate ("CAP:" i "COIL:") */
#module-acoustics span[style*="font-size: 11px; color:#94a3b8;"] {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* 4. DRASTIČNO povećanje samih brojeva (µF i mH) */
#module-acoustics [id^="res-xo"] {
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px currentColor; /* Dodaje blagi sjaj brojevima */
}
/* =========================================
   TCR 2D MAP ELEMENTS
========================================= */
.tcr-spk {
    position: absolute;
    width: 26px;
    height: 26px;
    background: #0f172a;
    border: 1px solid #475569;
    color: #94a3b8;
    font-family: 'Orbitron';
    font-size: 9px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
.tcr-spk.sub {
    width: 40px;
    border-color: #f472b6;
    color: #f472b6;
}
/* =========================================
   TCR MAP - SYSTEM OFF STATE (SIVO STANJE)
========================================= */

/* Gasi plavu pomičnu točku i brani klikanje dok je sustav ugašen */
.sys-off #tcr-dot {
    background: rgba(100, 116, 139, 0.1) !important;
    border-color: #334155 !important;
    box-shadow: none !important;
    pointer-events: none !important; 
}
.sys-off #tcr-dot div {
    background: #475569 !important;
    box-shadow: none !important;
}

/* Gasi sve zvučnike (uključujući i rozi SUB) u tamno sivo */
.sys-off .tcr-spk, 
.sys-off .tcr-spk.sub {
    border-color: #1e293b !important;
    color: #475569 !important;
    box-shadow: none !important;
}

/* Dodatno prigušuje skicu automobila da izgleda "mrtvo" */
.sys-off #tcr-map svg {
    opacity: 0.1 !important;
}
/* =========================================
   SUBWOOFER WIRING - FORSIRANJE VISINE
========================================= */
#wiring-canvas-container {
    height: 240px !important;
    min-height: 240px !important;
}
/* --- 2D WIRING EKRAN: Paljenje i gašenje --- */
#wiring-canvas-container {
    transition: opacity 0.4s ease, filter 0.4s ease !important;
}

.sys-off #wiring-canvas-container {
    opacity: 0.05 !important; 
    filter: grayscale(100%) brightness(0) !important; 
    pointer-events: none !important; 
}

/* Zaključavanje i blago zatamnjivanje izbornika dok je sustav ugašen */
.sys-off #wire-qty,
.sys-off #wire-coil,
.sys-off #wire-ohm {
    opacity: 0.4 !important;
    pointer-events: none !important;
}
/* Dizajn za klikabilnu kategoriju (harmonika meni) */
.menu-category {
    font-family: 'Orbitron', sans-serif !important; 
    font-size: 10px !important;
    color: #38bdf8 !important;
    background: #0f172a !important;
    padding: 12px 10px !important;
    margin-bottom: 5px !important;
    border: 1px solid #1e293b !important;
    border-radius: 4pxv;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5) !important;
}

.menu-category:hover {
    background: #1e293b !important;
    border-color: #38bdf8 !important;
}

.acc-icon {
    font-size: 8px !important;
    color: #64748b !important;
}

.acc-content {
    padding-left: 10px !important;
    margin-bottom: 15px !important;
    border-left: 2px solid #1e293b !important;
    margin-left: 5px !important;
    transition: all 0.3s ease !important;
}
/* =========================================
   FULL-SCREEN HELP MODAL ZA MOBITELE
========================================= */
@media (max-width: 900px) {
    #sonic-lab-v25 .modal-box {
        width: 100% !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important; /* Miče zaobljene rubove */
        border: none !important; /* Miče debeli vanjski okvir */
        /* Odmiče gornji dio od kamere/notcha na iPhone i modernim Androidima */
        padding-top: env(safe-area-inset-top) !important; 
    }
    
    #sonic-lab-v25 .help-content {
        /* Gasi onih fiksnih 530px visine koji su zadani u HTML-u i dopušta tekstu da se protegne do dna */
        height: auto !important; 
        flex-grow: 1 !important;
        padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    }
}
/* =========================================
   PRO-LEVEL APP STIL (GLOBALNO: MOBITEL + DESKTOP)
========================================= */

/* 1. OBAVEZNO VIDLJIV 'X' GUMB (Zajedničko) */
#sonic-lab-v25 .modal-header-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 15px 20px !important;
}

#sonic-lab-v25 .close-modal-btn {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 100 !important;
}

#sonic-lab-v25 .close-modal-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #ef4444 !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
}

#sonic-lab-v25 .close-modal-btn:hover {
    background: #ef4444 !important;
    transform: scale(1.05) !important;
}
#sonic-lab-v25 .close-modal-btn:hover svg { stroke: #ffffff !important; }

/* ---------------------------------------------------
   2. DESKTOP / TABLET (2 STUPCA: Meni lijevo, tekst desno) 
------------------------------------------------------ */
@media (min-width: 901px) {
    #sonic-lab-v25 #help-modal .modal-box {
        width: 850px !important;  /* Prošireno za 2 stupca */
        height: 85vh !important;
        max-height: 800px !important;
        margin: auto;
        border-radius: 12px !important;
        border: 2px solid #334155 !important;
        box-shadow: 0 0 80px rgba(0, 0, 0, 0.9), 0 0 0 2px #0f172a !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #sonic-lab-v25 .help-layout-grid {
        display: flex !important;
        flex-direction: row !important; /* Stavlja elemente u red (lijevo i desno) */
        height: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    #sonic-lab-v25 .help-menu {
        width: 280px !important; /* Fiksna širina izbornika */
        min-width: 280px !important;
        max-height: 100% !important; /* Ide do samog dna */
        border-right: 2px solid #1e293b !important; /* Linija odvaja meni od teksta */
        border-bottom: none !important;
        overflow-y: auto !important;
    }

    #sonic-lab-v25 .help-content {
        flex: 1 !important; /* Tekst popunjava sav ostatak prozora */
        height: 100% !important;
        overflow-y: auto !important;
    }
}

/* ---------------------------------------------------
   3. MOBITEL 100% FULL SCREEN (1 STUPAC: Meni gore, tekst dolje) 
------------------------------------------------------ */
@media (max-width: 900px) {
    #sonic-lab-v25 #help-modal .modal-box {
        width: 100% !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important; 
        border: none !important; 
        padding-top: env(safe-area-inset-top) !important; 
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #sonic-lab-v25 .help-layout-grid {
        display: flex !important;
        flex-direction: column !important; /* Vraća jedan ISPOD drugog */
        height: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    #sonic-lab-v25 .help-menu {
        width: 100% !important;
        min-width: 100% !important;
        max-height: 40vh !important; /* Ograničava visinu da se vidi i tekst */
        border-right: none !important;
        border-bottom: 2px solid #1e293b !important;
    }

    #sonic-lab-v25 .help-content {
        height: auto !important; 
        flex-grow: 1 !important;
        padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    }
}
/* --- TOTALNO GAŠENJE ŽUTIH, ROZIH I DINAMIČKIH ELEMENATA (SYS-OFF) --- */

#sonic-lab-v25.sys-off #rise-factor {
    accent-color: #475569 !important; /* Ubija žutu boju na slideru */
    opacity: 0.5;
}

#sonic-lab-v25.sys-off #vd-winner-box,
#sonic-lab-v25.sys-off .smoked-glass[style*="border-color: #f472b6"],
#sonic-lab-v25.sys-off .smoked-glass[style*="border-color: #38bdf8"] {
    border-color: #1e293b !important; /* Gasi rozi i plavi okvir u Vd Battleu */
    box-shadow: none !important;
}

#sonic-lab-v25.sys-off #vd-winner-name {
    color: #475569 !important; /* Gasi pobjednički tekst */
    text-shadow: none !important;
}

/* Cilja bilo koji tekst koji ima inline boju (žutu, rozu, plavu) */
#sonic-lab-v25.sys-off [style*="color: #f472b6"],
#sonic-lab-v25.sys-off [style*="color: #eab308"],
#sonic-lab-v25.sys-off [style*="color: #38bdf8"],
#sonic-lab-v25.sys-off [style*="color:#f472b6"],
#sonic-lab-v25.sys-off [style*="color:#eab308"],
#sonic-lab-v25.sys-off [style*="color:#38bdf8"] {
    color: #475569 !important;
    text-shadow: none !important;
}

/* Gasi animacije dok je off */
#sonic-lab-v25.sys-off * {
    animation: none !important;
    transition: none !important;
}
/* =========================================
   CATEGORY FILTER BAR (PERFECT GLASS)
========================================= */
.category-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr); 
    gap: 12px;
    
    /* SAVRŠEN SMOKED GLASS */
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 8px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), 0 4px 15px rgba(0,0,0,0.3);
    
    /* CENTRIRANJE UNUTAR OKVIRA */
    align-items: center; 
    justify-items: center;
    
    /* SIMETRIČNI PADDING DA GUMBI BUDU TOČNO U SREDINI VISINE */
    padding: 14px; 
    
    margin: 0 0 15px 0;
    box-sizing: border-box;
    transition: width 0.3s ease;
}

.filter-btn {
    width: 100%;
    height: 44px !important;
    margin: 0 !important; /* Brisanje margina kako bi padding okvira radio posao */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- TABLET (3 i 2 stupca): Gumbi ostaju u 1 redu (4 stupca) --- */
@media (min-width: 601px) and (max-width: 1200px) {
    .category-filter-bar {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- MOBITEL (1 stupac): 2x2 Elegantni Grid --- */
@media (max-width: 600px) {
    .category-filter-bar {
        grid-template-columns: repeat(2, 1fr); /* Slaze ih 2 gore, 2 dole */
        width: 100% !important;
        margin-left: 0 !important;
        padding: 12px;
    }
}
/* =========================================
   FAST DIAGNOSTIC CAR SKETCH (PRO LEVEL)
========================================= */
#sonic-lab-v25 .diag-spk {
    position: absolute;
    width: 20px; height: 20px;
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 10;
}

/* Retrovizori (Pseudo elementi na autu) */
#sonic-lab-v25 #diag-car::before,
#sonic-lab-v25 #diag-car::after {
    content: ''; position: absolute; top: 45px; width: 6px; height: 14px; background: #0f172a; border: 1px solid #334155;
}
#sonic-lab-v25 #diag-car::before { left: -7px; border-radius: 4px 0 0 4px; border-right: none; }
#sonic-lab-v25 #diag-car::after { right: -7px; border-radius: 0 4px 4px 0; border-left: none; }

/* Zvučnici vire van karoserije */
#sonic-lab-v25 #diag-fl { top: 38%; left: -10px; }
#sonic-lab-v25 #diag-fr { top: 38%; right: -10px; }
#sonic-lab-v25 #diag-rl { top: 72%; left: -10px; }
#sonic-lab-v25 #diag-rr { top: 72%; right: -10px; }

#sonic-lab-v25 #diag-sub { 
    bottom: 8px; left: 50%; transform: translateX(-50%); 
    width: 46px; height: 22px; border-radius: 4px; 
    font-family: 'Orbitron'; font-size: 9px; font-weight: bold; 
    color: #020617; display: flex; align-items: center; justify-content: center;
}

#sonic-lab-v25.sys-off .diag-spk {
    opacity: 0.3 !important; background: #0f172a !important; box-shadow: none !important; border-color: #1e293b !important;
}
#sonic-lab-v25.sys-off #diag-car { filter: grayscale(1) brightness(0.5); }
/* =========================================
   NOVI FLAT GUMB ZA HELP MODAL ("GO TO MODULE")
========================================= */
#sonic-lab-v25 .help-jump-btn {
    background: #172033 !important; 
    border: 1px solid #3c4c66 !important; /* Traženi tamniji rub */
    color: #ffffff !important;
    border-radius: 6px !important;
    width: 100% !important;
    padding: 12px 10px !important;
    margin-top: 15px !important;
    font-size: 13px !important; 
    font-weight: 600 !important;
    font-family: 'Orbitron', sans-serif !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    box-shadow: none !important; 
    text-shadow: none !important; 
}

/* Hover i Active efekti (kad se ide preko ili klikne) */
#sonic-lab-v25 .help-jump-btn:hover,
#sonic-lab-v25 .help-jump-btn:active {
    background: #020617 !important; /* Još tamnija pozadina za bolji efekt */
    border-color: #3c4c66 !important; /* Traženi rub kad se ide preko gumba */
    color: #ffffff !important;
}

/* =========================================
   ACOUSTIC SONAR (NATIVE APP STYLE)
========================================= */

.sonar-native-screen {
    width: 100%; 
    height: 100%; 
    aspect-ratio: 1 / 1;
    /* Plava boja pozadine identična glavnom osciloskopu (Tamno plava u sredini, crna na rubu) */
    background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
}

/* Grid linije obojane u suptilnu Neon Blue boju umjesto bijele */
.s-grid-mesh { position: absolute; inset: 0; background-image: linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px); background-size: 10% 10%; z-index: 1; pointer-events: none; }
.s-grid-cross { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(56, 189, 248, 0.2) 50%, transparent calc(50% + 0.5px)), linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(56, 189, 248, 0.2) 50%, transparent calc(50% + 0.5px)); z-index: 2; pointer-events: none; }
.s-grid-circle1, .s-grid-circle2 { position: absolute; border: 1px solid rgba(56, 189, 248, 0.15); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.s-grid-circle1 { width: 45%; height: 45%; }
.s-grid-circle2 { width: 90%; height: 90%; }
.s-hand { position: absolute; inset: 5%; background: conic-gradient(from 0deg at 50% 50%, rgba(56, 189, 248, 0.4) 0deg, transparent 60deg); border-radius: 50%; animation: s-spin 2s linear infinite; display: none; z-index: 5; pointer-events: none; }
.s-hand::after { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 50%; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; transform: translateX(-50%); }
@keyframes s-spin { 100% { transform: rotate(360deg); } }

/* GLAVNA PRAVA TOČKA */
.s-target {
    --t-color: #22c55e;
    position: absolute; width: 14px; height: 14px; border-radius: 50%;
    background: var(--t-color); top: 50%; left: 50%; transform: translate(-50%, -50%);
    opacity: 0; transition: background 0.1s; z-index: 20; /* Najviši z-index */
    box-shadow: 0 0 15px var(--t-color), inset 0 0 5px #fff;
}

/* MAGLA (Točkice buke koje stvara JS) */
.s-noise {
    position: absolute;
    width: 5px; height: 5px; /* Manje od glavne mete */
    border-radius: 50%;
    background: var(--noise-color);
    box-shadow: 0 0 8px var(--noise-color); /* Svijetle u mraku */
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10; /* Ispod glavne mete */
    opacity: 0;
}
/* ==========================================
   STROBE FLASH LAYER
   ========================================== */
#strobe-flash-layer {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: white;
    z-index: 99999; /* Prekriva apsolutno sve */
    pointer-events: none; /* Možeš klikati kroz njega */
    display: none; /* Skriven po defaultu */
}

/* PRILAGODBA ZA MOBITELE (Sve ispod 768px širine) */
@media (max-width: 768px) {
    :root {
        /* Automatski povećavamo minimalne veličine fontova za mobitele */
        --font-xs: 11px;  
        --font-sm: 13px;  
        --font-base: 15px; 
        --font-lg: 16px; /* Mora biti 16px da iOS ne zumira input polja */
        --font-xl: 20px;
    }

    .tech-btn {
        height: var(--btn-height-mobile); /* Gumbi postaju deblji za prste (44px) */
        font-size: var(--font-base); 
    }

    input[type="number"], input[type="text"] {
        font-size: 16px !important;
        height: var(--btn-height-mobile);
    }
}
/* ==========================================
   METAL REGION TOGGLE SWITCH (EU / US)
========================================== */
.region-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: var(--font-xs);
    cursor: pointer;
}

.eu-text { color: var(--accent-primary); font-weight: bold; transition: color 0.3s; }
.us-text { color: var(--text-muted); transition: color 0.3s; }

/* Automatsko prebacivanje boje teksta kad je prekidač aktivan (US) */
.region-toggle-wrapper:has(input:checked) .eu-text { color: var(--text-muted); font-weight: normal; }
.region-toggle-wrapper:has(input:checked) .us-text { color: var(--accent-primary); font-weight: bold; }

.region-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
}

.region-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Tamno kućište prekidača */
.region-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-main);
    border: 1px solid #334155;
    border-radius: 24px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
    transition: 0.3s ease-in-out;
}

/* Metalna kuglica */
.region-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: linear-gradient(to bottom, #f8fafc, #94a3b8);
    border: 1px solid #475569;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.8);
    transition: 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Kad je na US (pomak udesno) - BEZ SVIJETLEĆEG RUBA */
input:checked + .region-slider {
    /* Obrisana promjena boje ruba, ostaje tamni metal */
}

input:checked + .region-slider:before {
    transform: translateX(20px);
    /* Obrisana promjena boje ruba kuglice */
}

/* --- WIRING STATS GRAPH --- */
.wiring-stats-container {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 24px 25px !important; /* Puno više "zraka" na rubovima - tekst ne dira okvir */
    margin-top: 15px;
    font-family: 'Orbitron', sans-serif;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
    transition: all 0.5s ease;
}

.stat-row {
    margin-bottom: 12px!important; /* Više zraka između redova */
}

.stat-row:last-child {
    margin-bottom: 0;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px !important; /* Zrak između teksta i same trake */
    font-size: 9px;
    letter-spacing: 1px;
}

.stat-label {
    color: #64748b;
    transition: color 0.5s ease;
}

.stat-value {
    color: #f8fafc;
    font-weight: bold;
    transition: color 0.5s ease;
}

.stat-bar-bg {
    width: 100%;
    height: 6px !important; /* Tanji barovi! (bilo je 8px) */
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    width: 0%;
    /* Glatka animacija kod paljenja (slide-in) */
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease, box-shadow 0.4s ease;
    border-radius: 2px;
}

/* Boje i neon glow za statuse */
.stat-blue { background-color: #38bdf8; box-shadow: 0 0 6px #38bdf8; }
.stat-green { background-color: #22c55e; box-shadow: 0 0 6px #22c55e; }
.stat-yellow { background-color: #eab308; box-shadow: 0 0 6px #eab308; }
.stat-red { background-color: #ef4444; box-shadow: 0 0 6px #ef4444; }


/* =========================================================
   LOGIKA ZA UGAŠEN SUSTAV (SYSTEM OFF) 
   Ovo se automatski aktivira/gasi preko postojeće sys-off klase
   ========================================================= */

/* 1. Zagasiti Subwoofer Wiring Graph (tekst i barove) */
.sys-off .wiring-stats-container .stat-label {
    color: #1e293b !important; /* Jedva vidljiva tamno siva */
}

.sys-off .wiring-stats-container .stat-value {
    color: #1e293b !important; /* Gašenje obojanih rezultata */
}

.sys-off .stat-bar-fill {
    width: 0% !important; /* Traka se isprazni na 0% dok je sustav ugašen */
    box-shadow: none !important;
    background-color: transparent !important;
}

.sys-off .stat-bar-bg {
    border-color: #0f172a !important; /* Sakrij čak i okvir prazne trake da izgleda "mrtvo" */
    background: transparent !important;
}

/* 2. Zagasiti EU / US tekst oko toggle prekidača */
.sys-off .eu-text,
.sys-off .us-text {
    color: #1e293b !important; /* Ista tamno siva "ugašena" boja */
    text-shadow: none !important;
    opacity: 0.3 !important;
}


/* --- XMAX CONTAINER LIMIT STYLES --- */
/* Pretpostavljam da je ID kontejnera grafikona "#xmax-chart-container" ili slično.
   Ovo dodaje glatku tranziciju za rub. */
.chart-container-with-limits {
    border: 2px solid transparent; /* Početno proziran rub */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 4px; /* Malo zaobljeni rubovi za ljepši glow */
}

/* CRVENI RUB (Over Limit) + Crveni Neon Glow */
.xmax-over-limit {
    border-color: #ef4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.7) !important;
}

/* ŽUTI RUB (At Limit) + Žuti Neon Glow */
.xmax-at-limit {
    border-color: #eab308 !important;
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.7) !important;
}

/* =========================================
   PRO CATEGORY FILTER BAR (TABS)
========================================= */
/* OVO RJEŠAVA PROBLEM KLIKANJA ZAUVIJEK! */
.digital-screen-container, .meter-bridge, .category-filter-bar {
    position: relative;
    z-index: 100 !important; 
}

.category-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 15px !important; 
    padding: 16px 20px !important; 
    
    /* STANDARDNI TAMNO PLAVI SMOKED GLASS (Identan ostalim modulima) */
    background: var(--glass-bg, rgba(2, 6, 23, 0.6)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 12px !important; 
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), 0 10px 25px rgba(0,0,0,0.5) !important;
    
    align-items: center; 
    margin: 0 0 20px 0 !important;
    box-sizing: border-box;
}

/* --- PRO METAL BUTTONS --- */
.filter-btn {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid #334155 !important;
    color: #94a3b8 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    width: 100% !important;
    height: 48px !important; 
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
    
    /* SAVRŠENO CENTRIRANJE TEKSTA */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
}

.filter-btn:hover {
    color: #e2e8f0 !important;
    border-color: #475569 !important;
    background: linear-gradient(180deg, #29354a 0%, #1e293b 100%) !important;
}

/* SELEKTIRANI GUMB (Zadržava svoju boju, dobiva samo plavi rub i manji glow) */
.filter-btn.active {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important; 
    color: var(--neon-blue) !important;
    border: 1px solid var(--neon-blue) !important;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.3), inset 0 0 4px rgba(56, 189, 248, 0.2) !important; 
    text-shadow: 0 0 5px var(--neon-blue) !important;
}

/* Stil za brojčanike unutar gumba */
.filter-btn span.tab-count {
    margin-left: 6px;
    opacity: 0.5;
    font-size: 10px;
    font-weight: 900;
}
.filter-btn.active span.tab-count {
    opacity: 1;
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

/* --- MOBITEL (4 GUMBA U ISTOM REDU) --- */
@media (max-width: 600px) {
    .category-filter-bar {
        gap: 6px !important; 
        padding: 12px 10px !important; 
        width: 100% !important;
    }
    
    .filter-btn {
        font-size: 9.5px !important; 
        letter-spacing: 0px !important;
        height: 42px !important;
        padding: 0 2px !important;
    }
    
    .filter-btn span.tab-count {
        margin-left: 3px;
        font-size: 8.5px;
    }
}
/* =========================================
   FIX 1: GAŠENJE TABOVA KAD JE SUSTAV OFF
========================================= */
#sonic-lab-v25.sys-off .filter-btn.active {
    background: #0f172a !important;
    color: #475569 !important;
    border-color: #1e293b !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#sonic-lab-v25.sys-off .filter-btn span.tab-count {
    color: #475569 !important;
    text-shadow: none !important;
    opacity: 0.3 !important;
}

#sonic-lab-v25.sys-off .category-filter-bar {
    border-color: #1e293b !important;
    background: rgba(15, 23, 42, 0.2) !important;
    box-shadow: none !important;
}

/* =========================================
   FIX 1: GAŠENJE TABOVA KAD JE SUSTAV OFF
========================================= */
#sonic-lab-v25.sys-off .filter-btn.active {
    background: #0f172a !important;
    color: #475569 !important;
    border-color: #1e293b !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#sonic-lab-v25.sys-off .filter-btn span.tab-count {
    color: #475569 !important;
    text-shadow: none !important;
    opacity: 0.3 !important;
}

#sonic-lab-v25.sys-off .category-filter-bar {
    border-color: #1e293b !important;
    background: rgba(15, 23, 42, 0.2) !important;
    box-shadow: none !important;
}

/* =========================================
   IPHONE / IOS SAFARI FIX (TOUCH & LAYER)
========================================= */
.category-filter-bar {
    position: relative !important;
    z-index: 99999 !important;
    -webkit-transform: translateZ(0) !important; /* Forsira iOS hardware akceleraciju */
    transform: translateZ(0) !important;
}

.filter-btn {
    position: relative !important;
    z-index: 100000 !important;
    touch-action: manipulation !important; /* Rješava problem ignoriranja dodira na iOS-u */
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
}

/* =========================================
   IOS "INVISIBLE SHIELD" FIX
========================================= */
#sonic-lab-v25 .controls-grid {
    position: relative !important;
    z-index: 1 !important; /* Gura grid u pozadinu da ne prekriva gornji dio */
}

#sonic-lab-v25 .category-filter-bar,
#sonic-lab-v25 .digital-screen-container,
#sonic-lab-v25 .meter-bridge {
    position: relative !important;
    z-index: 999999 !important; /* Gura cijeli komandni most skroz naprijed */
    pointer-events: auto !important;
}
/* =========================================
   MODAL & LAYER FIX (OSCILLOSCOPE OVERLAP)
========================================= */
#help-modal, #safety-modal, #mobile-knob-editor, .close-popup-area {
    z-index: 999999 !important; /* Apsolutni vrh ekrana */
}

#sonic-lab-v25 .controls-grid {
    position: relative !important;
    z-index: 1 !important; /* Grid ostaje u pozadini */
}
/* =========================================
   GLOBALNA STANDARDIZACIJA FONTOVA (SVI MODULI)
========================================= */

/* 1. INPUTI I PADAJUĆI IZBORNICI (16px obavezno zbog iOS zooma) */
#sonic-lab-v25 .panel-card input[type="number"],
#sonic-lab-v25 .panel-card input[type="text"],
#sonic-lab-v25 .panel-card select {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 8px 4px !important;
}

#sonic-lab-v25 .panel-card input[type="number"]::placeholder,
#sonic-lab-v25 .panel-card input[type="text"]::placeholder {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

/* 2. PRISILNO DIZANJE MIKRO FONTOVA (8px i 9px postaju 11px) */
#sonic-lab-v25 .panel-card [style*="font-size: 8px"],
#sonic-lab-v25 .panel-card [style*="font-size: 8px;"],
#sonic-lab-v25 .panel-card [style*="font-size: 9px"],
#sonic-lab-v25 .panel-card [style*="font-size: 9px;"] {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
}

/* 3. DIZANJE SREDNJIH FONTOVA (10px postaje 12px za bolju čitljivost labela) */
#sonic-lab-v25 .panel-card [style*="font-size: 10px"],
#sonic-lab-v25 .panel-card [style*="font-size: 10px;"] {
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

/* 4. OPISI UNUTAR ZATAMNJENIH PANELA (S.B.I.R., Psychoacoustics, Box Info) */
#sonic-lab-v25 .smoked-glass p {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #94a3b8 !important;
    margin-bottom: 12px !important;
}

/* 5. MALI GUMBI UNUTAR MODULA (Top, Export to System) */
#sonic-lab-v25 .panel-card button[style*="font-size: 8px"],
#sonic-lab-v25 .panel-card button[style*="font-size: 9px"] {
    font-size: 10px !important;
    padding: 6px 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* 6. PODNASLOVI MODULA (Ona žuta/siva tehnička slova ispod glavnog naslova) */
#sonic-lab-v25 .tech-sub {
    font-size: 10px !important;
    letter-spacing: 1px !important;
    opacity: 0.8;
}

/* 7. REZULTATI KOJI SU BILI PREMALI (Pomoćni ispis ispod velikih brojeva) */
#sonic-lab-v25 .panel-card span[style*="font-size: 7px"] {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
}

/* =========================================
   FIX ZA 3D ENCLOSURE PADAJUĆE IZBORNIKE (MOBITELI)
========================================= */
@media (max-width: 768px) {
    /* Smanjujemo font i razmake samo u 3D modulu da sve stane u red */
    #sonic-lab-v25 #module-enclosure select {
        font-size: 13px !important; /* Smanjeno sa 16px na 13px */
        padding: 6px 2px !important; /* Smanjeni unutarnji razmaci */
        letter-spacing: 0px !important; /* Gušći tekst */
        text-overflow: ellipsis !important; /* Ako tekst slučajno pređe, stavlja točkice (...) */
        white-space: nowrap !important;
    }

    /* Ako su i polja za unos brojeva u tom modulu preširoka, malo ih sužavamo */
    #sonic-lab-v25 #module-enclosure input[type="number"] {
        font-size: 14px !important; 
        padding: 6px 2px !important;
    }
}

/* =========================================
   FIX ZA ACTIVE DSP CROSSOVER (MOBITELI)
========================================= */

/* 1. Mijenjamo grid iz 1fr 1fr 1fr u proporciju koja bolje odgovara sadržaju */
#sonic-lab-v25 #module-dsp-xo .sub-unit > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1.2fr 1fr 1.2fr !important; /* Polje za unos i zadnji select su malo širi */
    gap: 4px !important; /* Smanjujemo razmak između elemenata na mobitelu */
}

/* 2. Prilagođavamo polje za unos frekvencije (HPF/LPF) */
#sonic-lab-v25 #module-dsp-xo input[type="number"] {
    font-size: 14px !important; /* Malo manji font da bolje stane */
    padding: 6px 2px !important; 
    width: 100% !important; /* Mora biti 100% širine svog grid stupca */
}

/* 3. Prilagođavamo padajuće izbornike (dB/oct i tip filtera) */
#sonic-lab-v25 #module-dsp-xo select {
    font-size: 12px !important; /* Manji font za bolje uklapanje */
    padding: 6px 2px !important;
    width: 100% !important;
    text-overflow: ellipsis !important; /* Odreži dugačak tekst */
    white-space: nowrap !important; /* Spriječi prelazak u novi red */
    overflow: hidden !important; 
    appearance: none; /* Miče defaultnu strelicu (često je ogromna) */
    -webkit-appearance: none; 
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 2px center; /* Pozicionira manju SVG strelicu */
    background-size: 10px; /* Veličina strelice */
    padding-right: 14px !important; /* Oslobodi mjesto za strelicu */
}

/* 4. Na stvarno uskim mobitelima (npr. iPhone SE) još malo smanjujemo font */
@media (max-width: 380px) {
    #sonic-lab-v25 #module-dsp-xo select {
        font-size: 11px !important;
    }
}
/* =========================================
   SYS-OFF CLEANUP (GAŠENJE PREOSTALIH BOJA)
========================================= */

/* 1. LINKED TO 3D BOX (Točkica, kvačica i pozadina gumba) */
#sonic-lab-v25.sys-off .box-indicator {
    border-color: #334155 !important;
    background: #0f172a !important;
}
#sonic-lab-v25.sys-off .box-check {
    background: #475569 !important;
    opacity: 0.3 !important;
}
#sonic-lab-v25.sys-off #ev-link-label {
    background: rgba(15, 23, 42, 0.4) !important;
    border-color: #1e293b !important;
}

/* 2. OKVIRI (EV Mass, T-Line MDF, Estimated Rise) 
   Hvatamo sve inline okvire i gasimo njihov neon glow */
#sonic-lab-v25.sys-off [style*="border: 1px solid rgba(56, 189, 248"],
#sonic-lab-v25.sys-off [style*="border: 1px solid rgba(244, 114, 182"],
#sonic-lab-v25.sys-off [style*="border: 1px solid rgba(239, 68, 68"],
#sonic-lab-v25.sys-off [style*="border: 1px solid rgba(234, 179, 8"],
#sonic-lab-v25.sys-off [style*="border: 1px solid rgba(34, 197, 94"],
#sonic-lab-v25.sys-off [style*="border-color: #38bdf8"],
#sonic-lab-v25.sys-off [style*="border-color: #f472b6"],
#sonic-lab-v25.sys-off [style*="border-color: #ef4444"],
#sonic-lab-v25.sys-off [style*="border-color: #eab308"],
#sonic-lab-v25.sys-off [style*="border-color: #22c55e"],
#sonic-lab-v25.sys-off [style*="border-color:#38bdf8"],
#sonic-lab-v25.sys-off [style*="border-color:#f472b6"],
#sonic-lab-v25.sys-off [style*="border-color:#ef4444"],
#sonic-lab-v25.sys-off [style*="border-color:#eab308"],
#sonic-lab-v25.sys-off [style*="border-color:#22c55e"] {
    border-color: #1e293b !important;
    box-shadow: none !important;
}

/* 3. SYSTEM SPECTRUM (Zeleni Midrange i ostali zeleni tekstovi) */
#sonic-lab-v25.sys-off [style*="color: #22c55e"],
#sonic-lab-v25.sys-off [style*="color:#22c55e"] {
    color: #475569 !important;
    text-shadow: none !important;
}

/* 4. RMS POWER RATIO GRAF I BAROVI (Gašenje inline pozadina) */
#sonic-lab-v25.sys-off [style*="background: #38bdf8"],
#sonic-lab-v25.sys-off [style*="background: #ef4444"],
#sonic-lab-v25.sys-off [style*="background: #eab308"],
#sonic-lab-v25.sys-off [style*="background: #22c55e"],
#sonic-lab-v25.sys-off [style*="background: #f472b6"],
#sonic-lab-v25.sys-off [style*="background:#38bdf8"],
#sonic-lab-v25.sys-off [style*="background:#ef4444"],
#sonic-lab-v25.sys-off [style*="background:#eab308"],
#sonic-lab-v25.sys-off [style*="background:#22c55e"],
#sonic-lab-v25.sys-off [style*="background:#f472b6"],
#sonic-lab-v25.sys-off [style*="background-color: #38bdf8"],
#sonic-lab-v25.sys-off [style*="background-color: #ef4444"],
#sonic-lab-v25.sys-off [style*="background-color: #eab308"],
#sonic-lab-v25.sys-off [style*="background-color: #22c55e"] {
    background: #1e293b !important;
    background-color: #1e293b !important;
    box-shadow: none !important;
}

/* 5. PRO AUDIO TUNE & OSTALI EKRANI (Prisilni mrak) */
#sonic-lab-v25.sys-off .mus-screen,
#sonic-lab-v25.sys-off .rta-screen,
#sonic-lab-v25.sys-off .digital-screen-container {
    background: #000 !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,1) !important;
    border-color: #1e293b !important;
}

/* Osiguranje da su linije (canvas) potpuno nevidljive kad je ekran ugašen */
#sonic-lab-v25.sys-off canvas {
    opacity: 0 !important;
    transition: opacity 0.3s;
}
/* =========================================
   SYSTEM SPECTRUM ARCHITECT - SYS OFF FIX
========================================= */

/* 1. Gašenje "šarenih" lijevih rubova oko input polja */
#sonic-lab-v25.sys-off [style*="border-left: 3px solid #ef4444"],
#sonic-lab-v25.sys-off [style*="border-left: 3px solid #eab308"],
#sonic-lab-v25.sys-off [style*="border-left: 3px solid #22c55e"],
#sonic-lab-v25.sys-off [style*="border-left: 3px solid #38bdf8"] {
    border-left-color: #1e293b !important;
}

/* 2. Gašenje i "pražnjenje" obojanih traka (Bar Graphs) */
#sonic-lab-v25.sys-off #bar-sub,
#sonic-lab-v25.sys-off #bar-mb,
#sonic-lab-v25.sys-off #bar-mid,
#sonic-lab-v25.sys-off #bar-twt {
    background: #1e293b !important;
    box-shadow: none !important;
    width: 0% !important; /* Trake se vizualno prazne kad je sustav ugašen */
}

/* 3. Gašenje dijagnostičkog okvira na dnu (PERFECT AUDIOPHILE...) */
#sonic-lab-v25.sys-off #ov-ratio-diagnostic {
    background: rgba(15, 23, 42, 0.4) !important; /* Prigušena tamna pozadina */
    border-color: #1e293b !important; /* Tamno sivi rub umjesto zelenog dashed ruba */
    color: #475569 !important; /* Siva slova */
    text-shadow: none !important;
}

/* 4. Gašenje TOTAL RMS brojke i postotaka pored traka */
#sonic-lab-v25.sys-off #ov-total-rms,
#sonic-lab-v25.sys-off #pct-sub,
#sonic-lab-v25.sys-off #pct-mb,
#sonic-lab-v25.sys-off #pct-mid,
#sonic-lab-v25.sys-off #pct-twt {
    color: #475569 !important;
    text-shadow: none !important;
}

/* 5. Prisilno zatamnjivanje onog gornjeg smoked-glass okvira s plavim rubom */
#sonic-lab-v25.sys-off .smoked-glass[style*="border-color: #38bdf8"] {
    border-color: #1e293b !important;
}
/* =========================================
   NUKLEARNO GAŠENJE DIJAGNOSTIKE (PERFECT AUDIOPHILE)
========================================= */
html body #sonic-lab-v25.sys-off div#ov-ratio-diagnostic,
html body #sonic-lab-v25.sys-off div#ov-ratio-diagnostic[style] {
    background-color: #0f172a !important;
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #475569 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    opacity: 0.4 !important; /* Prisilno ga zatamnjujemo */
}

html body #sonic-lab-v25.sys-off div#ov-ratio-diagnostic *,
html body #sonic-lab-v25.sys-off div#ov-ratio-diagnostic *[style] {
    color: #475569 !important;
    border-color: #1e293b !important;
    text-shadow: none !important;
    fill: #475569 !important;
    stroke: #475569 !important;
    background: transparent !important;
}

#arch-modal-overlay {
    /* Moramo staviti z-index koji je veći od bilo čega što šarafi ili help koriste */
    z-index: 999999999 !important; 
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none; /* Inicijalno skriveno */
    justify-content: center;
    align-items: center;
    /* Ako šarafi i dalje "probijaju", ovaj background će ih prekriti */
    background: rgba(2, 6, 23, 0.95) !important;
    backdrop-filter: blur(15px) !important; 
}
#arch-modal-overlay {
    /* ... tvoj postojeći CSS ... */
    padding-top: env(safe-area-inset-top, 20px) !important;
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
}

#arch-flex-capture {
    /* Osiguravamo da se kartica ne zalijepi za vrh na mobitelu */
    margin-top: 10px;
}

#arch-cap-f.arch-num {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* Ovo je tajni trik za Flexbox layout */
    box-sizing: border-box !important;
}

#arch-bat-ah {
    width: 60px !important; /* Stavi istu širinu s kojom si popravio onaj prvi */
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center; /* Da se broj 80 lijepo centrira */
}

/* =========================================
   ULTIMATE MODAL Z-INDEX FIX
========================================= */
#sonic-lab-v25 #help-modal, 
#sonic-lab-v25 #safety-modal,
#help-modal, 
#safety-modal {
    z-index: 9999999 !important; /* 7 devetki - sad je jači od ekrana! */
}
/* =========================================
   SPAŠAVANJE DOS FIRMWARE ANIMACIJE
========================================= */
#sonic-lab-v25 #dos-update-screen {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important; /* OVO GA GURA IZNAD OSCILOSKOPA I SVIH ODSJAJA */
    pointer-events: auto !important; /* Osigurava da možeš kliknuti na njega */
}
/* =========================================
   DOS FIRMWARE IMMUNITY (ZAŠTITA OD SYS-OFF MRAKA)
========================================= */
#sonic-lab-v25 #dos-update-screen {
    z-index: 999999 !important; /* Probija sve staklene efekte */
    background: #000 !important;
    pointer-events: auto !important;
}

/* 1. Zaštita glavnog plavog teksta */
#sonic-lab-v25 #dos-update-screen,
#sonic-lab-v25.sys-off #dos-update-screen {
    color: #38bdf8 !important;
    text-shadow: 0 0 5px rgba(56, 189, 248, 0.8) !important;
    opacity: 1 !important;
}

/* 2. Zaštita ZELENIH oznaka (OK, DONE i Progress Bar) */
#sonic-lab-v25 #dos-update-screen span[style*="22c55e"],
#sonic-lab-v25.sys-off #dos-update-screen span[style*="22c55e"],
#sonic-lab-v25 #dos-update-screen #dos-progress-bar,
#sonic-lab-v25.sys-off #dos-update-screen #dos-progress-bar {
    color: #22c55e !important;
    text-shadow: 0 0 5px rgba(34, 197, 94, 0.8) !important;
}

/* 3. Zaštita ŽUTIH upozorenja (NEW FIRMWARE) */
#sonic-lab-v25 #dos-update-screen p[style*="eab308"],
#sonic-lab-v25.sys-off #dos-update-screen p[style*="eab308"] {
    color: #eab308 !important;
    text-shadow: 0 0 5px rgba(234, 179, 8, 0.8) !important;
    animation: dosBlink 1s infinite !important; /* Spašava animaciju blinkanja */
}

/* 4. Zaštita GUMBA (EXECUTE FLASH) */
#sonic-lab-v25 #dos-update-screen #btn-start-flash,
#sonic-lab-v25.sys-off #dos-update-screen #btn-start-flash {
    color: #38bdf8 !important;
    border-color: #38bdf8 !important;
    box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.3) !important;
}
/* =========================================
   DOS FIRMWARE MOBILE FIX & AUTO-CURSOR
========================================= */
#sonic-lab-v25 #dos-update-screen {
    -webkit-transform: translateZ(100px) !important; /* Prisiljava iOS da ekran stavi ispred stakla */
    transform: translateZ(100px) !important;
    will-change: transform, opacity; /* Sugerira browseru da optimizira animaciju */
}
.dos-cursor { animation: dosBlink 0.8s infinite; color: #38bdf8; }
@keyframes dosBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* DOS CURSOR FIX & Z-INDEX */
#sonic-lab-v25 #dos-update-screen {
    z-index: 999999 !important;
    pointer-events: auto !important;
}
.dos-cursor { animation: dosBlink 0.8s infinite; color: #38bdf8; }
@keyframes dosBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }


/* RESPONSIVE HUD KLASE - FULL OPTIMIZACIJA */
        .hud-capture { width: 100%; max-width: 420px; max-height: 92vh; margin: 0 auto; display: flex; flex-direction: column; position: relative; overflow: hidden; background: #020617; border: 2px solid #334155; border-radius: 12px; box-shadow: 0 0 40px rgba(56, 189, 248, 0.2); padding: 2px; box-sizing: border-box; }
        
        .hud-graph-wrap { flex: 1 1 auto; min-height: 50px; max-height: 15vh; position: relative; width: 100%; background: #000; border: 1px solid #1e293b; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 15px rgba(0,0,0,0.8); }
        
        .hud-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex-shrink: 0; }
        .hud-payload { grid-column: span 2; }

        /* DESKTOP UPGRADES */
        @media (min-width: 768px) {
            .hud-capture { max-width: 850px; max-height: 85vh; } 
            .hud-graph-wrap { max-height: 250px; } 
            .hud-stats-grid { grid-template-columns: repeat(3, 1fr); } 
            .hud-payload { grid-column: span 1; } 
        }


/* ==========================================
   🚀 PRO EXTREME BLUR EFEKT (V4 - JS FRIENDLY)
   ========================================== */

/* 1. OSNOVNO STANJE (Otključano) - Ovdje više NEMA !important za display! */
.extreme-opt {
    position: relative !important; 
    display: flex; /* Maknut !important da JS može raditi display='none' */
    opacity: 1;
    visibility: visible;
    pointer-events: auto; 
    transition: opacity 0.3s ease;
}

/* Osigurač za grid */
.extreme-opt.ext-grid-3 {
    display: grid; /* Maknut !important */
}

/* 2. ZAKLJUČANO STANJE */
.extreme-opt.locked {
    pointer-events: none !important;
    opacity: 0.8; 
}

/* 3. SAMI LOKOT I TEKST (Ovdje !important ostaje jer je ovo samo vizual preko svega) */
.extreme-opt.locked::after {
    content: "🔒 EXTREME";
    position: absolute !important;
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #f43f5e !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    border-radius: inherit !important;
    text-shadow: 0 0 10px rgba(244, 63, 94, 0.8) !important;
}

/* =========================================================
   🎛️ FULL-WIDTH HARDWARE RACK & LOKOT
========================================================= */

/* 🚀 KAD JE RACK UPALJEN, STRANICA SE NE MOŽE SKROLATI! */
body.rack-locked {
    overflow: hidden !important; 
}

/* 🎛️ ALUMINIJSKA KUTIJA (RAZVUČENA DO RUBOVA) */
#mikado-rack-case {
    width: 100%;
    transition: background 0.3s ease;
}

#mikado-rack-case.rack-engaged {
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; 
    
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: none !important; 
    border-radius: 0 !important; 
    
    /* 🚀 OVO RADI 3D EFEKT: 10px gore, 8px lijevo/desno, 50px dolje! */
    padding: 10px 8px 50px 8px !important; 
    
    margin-top: 0 !important; 
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.8) !important;
    
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#mikado-rack-case.rack-engaged::-webkit-scrollbar { display: none !important; }

/* Prisiljavamo kartice da popune prostor bez margina */
#mikado-rack-case.rack-engaged .controls-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important; /* Smanjen razmak između kartica */
    margin: 0 !important;
    height: auto !important;
}

/* UBIJANJE RAZMAKA IZNAD KUTIJE (Ispod tabova) */
#top-sticky-wrapper {
    padding-bottom: 0 !important; 
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   📱 MOBITEL (Ispod 900px) - NEZAVISNI LCD GUMBI
--------------------------------------------------------- */
@media (max-width: 900px) {
    
    .mobile-lcd-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important; 
        align-items: center !important;
        gap: 4px !important;
        
        position: absolute !important;
        bottom: 35px !important; 
        left: 0 !important; 
        right: 0 !important; 
        width: 95% !important; 
        margin: 0 auto !important; 
        z-index: 200 !important;
    }

    /* Potpuno nove klase, otporne na stari CSS */
    .lcd-filter-btn,
    .lcd-rack-btn {
        position: relative !important; 
        margin: 0 !important;
        flex: 1 1 0 !important; 
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        padding: 0 !important; 
        height: 16px !important;    
        line-height: 1 !important;     
        border-radius: 0 !important; 
        
        font-size: 10px !important;   
        letter-spacing: 0px !important;
        text-align: center !important;
        white-space: nowrap !important; 
        overflow: hidden !important; 
        
        background: transparent !important; 
        border: 1px solid #0f172aa1 !important; 
        color: #0f172aa1 !important;            
        font-family: 'Orbitron', sans-serif !important;
        font-weight: 800 !important;
        text-shadow: 0 0 3px rgba(15, 23, 42, 0.6), 0 0 1px #0f172a !important;
        box-shadow: 0 0 3px rgba(15, 23, 42, 0.6), 0 0 1px #0f172a !important;
        cursor: pointer !important;
    }

    /* Magija za lokot koja radi savršeno s novim klasama */
    .lcd-rack-btn .icon-unlocked {
        display: flex !important; 
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .lcd-rack-btn .icon-locked { display: none !important; }
    
    .lcd-rack-btn.active .icon-unlocked { display: none !important; }
    .lcd-rack-btn.active .icon-locked { 
        display: flex !important; 
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .lcd-filter-btn .tab-count {
        font-size: 10px !important; 
        margin-left: 2px !important;
        line-height: 1 !important;
        opacity: 0.8 !important;
    }

    /* Aktivno stanje */
    .lcd-filter-btn.active,
    .lcd-rack-btn.active {
        background: #0f172ad4 !important; 
        color: #38bdf8 !important;      
        border-color: #0f172aa1 !important; 
        box-shadow: 0 0 10px rgba(15, 23, 42, 0.4) !important;
        text-shadow: 0 0 5px rgba(56, 189, 248, 0.6) !important;
    }

    .lcd-rack-btn svg {
        stroke: currentColor !important; 
        width: 8px !important; 
        height: 8px !important; 
        margin-right: 2px !important;
        position: static !important;
        flex-shrink: 0 !important; 
        filter: drop-shadow(0 0 1px #0f172a) drop-shadow(0 0 3px rgba(15, 23, 42, 0.6)) !important;
    }

    /* 🔴 Gasimo klasične gumbe na mobitelu */
    .desktop-classic-nav {
        display: none !important;
    }
}

/* =========================================================
   🖥️ TABLET & DESKTOP (Iznad 900px) - AUTO UNLOCK I KLASIKA
========================================================= */
@media (min-width: 901px) {
    
    /* 1. SAKRIJ MALE LCD IKONICE I LOKOT (Postoje samo na mobitelu) */
    .mobile-lcd-nav {
        display: none !important; 
    }

    /* 2. POKAŽI VELIKE KLASIČNE GUMBE (Ispod ekrana) */
    .desktop-classic-nav {
        display: flex !important;
        width: calc(100% - 335px) !important; /* Širina za 3 kolone */
        margin-right: auto !important;
        margin-left: 0 !important;
        margin-bottom: -70px !important; /* Ubija rupu na lijevoj strani */
        position: relative !important;
        z-index: 50 !important;
    }

    /* 3. PORAVNAJ "SIGNAL" S VRHOM OSCILOSKOPA */
    #sonic-lab-v25 .panel-card:has(.btn-restart),       
    #sonic-lab-v25 .panel-card:has(.vol-scale-wrapper), 
    #sonic-lab-v25 .panel-card:has(.pan-wrapper),       
    #sonic-lab-v25 .panel-card:has(#arch-bat-ah),       
    #sonic-lab-v25 .panel-card:has(.sonar-native-screen) { 
        
        /* 🚀 OVDJE JE PROBLEM! Bilo je -65px pa je odletjelo. 
           Promijeni na 0px, a ako treba malo gore/dolje, stavi npr. -10px ili 10px */
        transform: translateY(0px) !important; 
        
        margin-top: 0 !important;
    }
    
    /* 4. 🛡️ IGNORIRAJ LOKOT (Spašava 2-3-4 Masonry kolone) */
    body.rack-locked, html.rack-locked { overflow: auto !important; }
    
    #mikado-rack-case.rack-engaged {
        height: auto !important; 
        overflow: visible !important;
        background: transparent !important; 
        padding: 0 !important;
        box-shadow: none !important;
    }
    
    #mikado-rack-case.rack-engaged .controls-grid { 
        display: block !important; 
        height: auto !important; 
    }
}

/* =========================================================
   🛑 NUKLEARNO SKRIVANJE MODULA (Otporno na Masonry)
========================================================= */
.hide-module-nuke {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    z-index: -100 !important;
    pointer-events: none !important;
}

/* =========================================================
   🖥️ DESKTOP GUMBI - AKTIVNO STANJE I BROJAČI
========================================================= */

/* Nasilno paljenje plavog ruba i teksta kad je gumb aktivan */
.desktop-classic-nav .filter-btn.active {
    border-color: #38bdf8 !important; /* Cyan plavi rub */
    color: #38bdf8 !important;        /* Cyan tekst */
    background: rgba(15, 23, 42, 0.95) !important; /* Tamnija pozadina */
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2) inset, 0 0 8px rgba(56, 189, 248, 0.4) !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
}

/* Stil za male brojače unutar velikih gumba */
.desktop-classic-nav .filter-btn .tab-count {
    font-size: 10px !important;
    font-weight: 600 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
    margin-left: 6px !important;
    color: #94a3b8 !important; /* Sivo-plavkasta po defaultu */
    transition: all 0.3s ease !important;
}

/* Kad je gumb aktivan, i brojač zasvijetli plavo! */
.desktop-classic-nav .filter-btn.active .tab-count {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.1) !important;
    box-shadow: 0 0 5px rgba(56, 189, 248, 0.3) !important;
}

/* =========================================================
   1. OŠTRI, ČISTI BROJEVI U KATEGORIJAMA
========================================================= */
.desktop-classic-nav .filter-btn .tab-count {
    font-size: 11px !important; /* Povećano da bude čitljivo */
    font-weight: 800 !important;
    font-family: 'Orbitron', sans-serif !important;
    background: transparent !important; /* UBijamo mutnu pozadinu */
    padding: 0 0 0 5px !important; /* Samo mali razmak od teksta */
    margin: 0 !important;
    color: #64748b !important; /* Čista sivo-plavkasta boja */
    text-shadow: none !important; /* Ubijamo blur */
    box-shadow: none !important;
}

/* Kad je gumb aktivan, broj zasvijetli u oštroj Cyan boji */
.desktop-classic-nav .filter-btn.active .tab-count {
    color: #38bdf8 !important;
    text-shadow: 0 0 4px rgba(56, 189, 248, 0.5) !important; /* Jako blagi glow */
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   2. SAVRŠENO PORAVNANJE (Čista 100% logika)
========================================================= */

/* 💻 SVI EKRANI IZNAD MOBITELA (2 i 3 kolone) -> Gumbi idu na 100% */
@media (min-width: 901px) {
    body #sonic-lab-v25 .category-filter-bar.desktop-classic-nav {
        display: flex !important;
        flex-direction: row !important;
        gap: 15px !important; 
        
        /* 🚀 ČISTIH 100% - savršeno prati kontejner */
        width: 100% !important; 
        max-width: 100% !important;
        flex: 0 0 100% !important; 
        
        margin-right: auto !important;
        margin-left: 0 !important;
        margin-bottom: 15px !important; 
        position: relative !important;
        z-index: 50 !important;
    }

    body #sonic-lab-v25 .category-filter-bar.desktop-classic-nav .filter-btn {
        flex: 1 1 0 !important;
        margin: 0 !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   🖥️ EKSTRA VELIKI EKRANI (4 kolone modula)
   Spustio sam granicu na 1300px da CSS "ulovi" 4. kolonu čim se pojavi
========================================================= */
@media (min-width: 1600px) {
    body #sonic-lab-v25 .category-filter-bar.desktop-classic-nav {
        /* 🚀 Precizniji odbitak jedne kolone (25% cijele širine) */
        width: calc(100% - 25% - 5px) !important;
        max-width: 75% !important;
        flex: 0 0 75% !important; 
        
        /* Ako 75% ostavlja preveliku ili premalu rupu, 
           vrati se na fiksni 'calc(100% - 335px)' i samo mijenjaj taj broj */
    }
}

/* 💻 SREDNJI EKRANI (2 i 3 kolone)
   Ovo pravilo sada vrijedi samo do 1299px
========================================================= */
@media (min-width: 901px) and (max-width: 1299px) {
    body #sonic-lab-v25 .category-filter-bar.desktop-classic-nav {
        width: 100% !important; 
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}
/* =========================================================
   🔢 FORSIRANJE VIDLJIVOSTI BROJEVA NA DESKTOPU
========================================================= */
.desktop-classic-nav .filter-btn .tab-count {
    display: inline-block !important; 
    visibility: visible !important;
    opacity: 1 !important;
    color: #cbd5e1 !important; /* Svijetlo siva da iskoči iz tamnog gumba */
    margin-left: 8px !important;
    font-size: 11px !important;
}

/* Kad je gumb aktivan, broj svijetli cyan plavo */
.desktop-classic-nav .filter-btn.active .tab-count {
    color: #38bdf8 !important; 
    text-shadow: 0 0 5px rgba(56, 189, 248, 0.6) !important;
}

/* =========================================================
   📱 VELIKI GUMBI NA MOBITELU (Sva 4 u jednom redu!)
========================================================= */
@media (max-width: 900px) {
    
    body #sonic-lab-v25 .category-filter-bar.desktop-classic-nav {
        display: flex !important;
        flex-wrap: nowrap !important; /* 🚀 Zabranjuje lomljenje u novi red */
        flex-direction: row !important;
        gap: 6px !important; /* Smanjen razmak da se ne gužvaju */
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0px !important;
        margin-top: 0px !important;
        padding: 10px 10px !important;
        box-sizing: border-box !important;
    }

    body #sonic-lab-v25 .category-filter-bar.desktop-classic-nav .filter-btn {
        flex: 1 1 0 !important; /* Sva 4 gumba dobivaju apsolutno isti prostor */
        padding: 12px 0 !important; 
        font-size: 9px !important; /* Orbitron mora biti malo manji da stane 'MEASURE' */
        letter-spacing: 0.5px !important;
        margin: 0 !important;
        white-space: nowrap !important; /* Sprečava da se tekst prelomi na pola */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Malo manji brojači na mobitelu da ne pojedu tekst */
    body #sonic-lab-v25 .category-filter-bar.desktop-classic-nav .filter-btn .tab-count {
        font-size: 8px !important;
        margin-left: 3px !important;
    }
}