html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    touch-action: none; /* Całkowicie blokuje gesty przeglądarki na tłe */
    overflow: hidden;    /* Zapobiega przewijaniu i "pływaniu" strony */
}

.container {
    background-color: #181a1b;
    border: 3px solid #585858;
    border-radius: 50px;
    width: calc(100% - 40px); 
    height: calc(100% - 40px);
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Poświata dla kontenera, gdy przycisk 1 jest aktywny */
.container.glow-ekran {
    border-color: #f39c12 !important;
    box-shadow: 0 0 10px 2px #f39c12; /* Mniejszy zasięg i delikatniejsze rozmycie */
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.btn {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    border-width: 2px;
    border-style: solid;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

/* PRZYCISK 1 */

.btn-1 { background: #5c3b07; border-color: #6e4f21; color: white; }
.btn-1.on { background: #f39c12; border-color: #ffffff; }
.btn-1 {
    position: relative; /* Pozwala na idealne wycentrowanie ikony wewnątrz */
}
.icon-ekran {
    font-size: 38px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    /* Twoje ustawienie pozycji */
    transform: translate(-50%, -60%); 
    line-height: 1;
    pointer-events: none;
    transition: all 0.3s ease;
    
    /* DODAJ TO: Przygaszenie ikony w stanie OFF */
    opacity: 0.3; 
}
/* Stan aktywny (ON) */
.btn-1.on .icon-ekran {
    color: #ffffff;
    text-shadow: 0 0 15px #f39c12, 0 0 25px #f39c12;
    /* Zachowanie pozycji + skalowanie */
    transform: translate(-50%, -60%) scale(1.1);
    
    /* DODAJ TO: Pełna widoczność w stanie ON */
    opacity: 1;
}







/* PRZYCIK 2 */
.btn-2 { background: #005669; border-color: #196877; color: white; }
.btn-2.on { background: #00d4ff; border-color: #ffffff; }
/* Poświata dla kontenera w trybie KINO (P2) */
.container.glow-kino {
    border-color: #00d4ff !important; /* Kolor błękitny */
    box-shadow: 0 0 10px 2px #00d4ff; /* Zredukowano z 20px/5px na 10px/2px */
}

/* PRZYCISK 2: Kino - Ikona */
.btn-2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-kino {
    font-size: 20px; /* Dopasuj do pozostałych */
    transition: all 0.3s ease;
    opacity: 0.3; /* Przygaszona w stanie OFF */
}

/* Stan aktywny (ON) dla ikony kina */
.btn-2.on .icon-kino {
    opacity: 1;
    color: #ffffff;
    text-shadow: 0 0 15px #00d4ff, 0 0 25px #00d4ff; /* Niebieska poświata */
    transform: scale(1.1);
}

/* Opcjonalna animacja "drgania" klapsa przy starcie */
@keyframes clapper-move {
    0%, 100% { transform: rotate(0deg) scale(1.1); }
    50% { transform: rotate(-5deg) scale(1.15); }
}

.btn-2.on .icon-kino {
    animation: clapper-move 2s infinite ease-in-out;
}







/* PRZYCISK 3 */

.btn-3 { background: #682882; border-color: #813e9c; color: white; }
.btn-3.on { background: #aa5bcc; border-color: #ffffff; }
/* Styl dla spana z ikoną */
.btn-3 .icon {
    display: inline-block;
    font-size: 26px; 
    transition: 0.2s;
    line-height: 1;
    /* DODAJ TO: Przygaszenie nutki w stanie OFF */
    opacity: 0.3; 
}
/* Definicja pulsowania nutki */
@keyframes note-glow {
    0% { text-shadow: 0 0 2px #fff; transform: scale(1); opacity: 1; }
    50% { text-shadow: 0 0 15px #8e44ad, 0 0 25px #8e44ad; transform: scale(1.3); opacity: 1; }
    100% { text-shadow: 0 0 2px #fff; transform: scale(1); opacity: 1; }
}
/* Animacja i pełna widoczność gdy aktywny */
.btn-3.on .icon {
    opacity: 1; /* Pełna widoczność gdy ON */
    animation: note-glow 1.5s infinite ease-in-out;
}



/* PRZYCISK 4 */

.btn-4 { background: #1e693e; border-color: #144529; color: white; }
.btn-4.on { background: #2dcc70; border-color: #ffffff; }
/* Poświata dla kontenera */
.container.glow-kurtyna {
    border-color: #2dcc70 !important; /* Zielony kolor przycisku 4 */
    box-shadow: 0 0 10px 2px #2dcc70;  /* Zredukowano zasięg poświaty */
}
.icon-kurtyna {
    font-size: 26px;
    display: inline-block;
    line-height: 1;
    transform: translate(1px, 2px) rotate(25deg); 
    transition: transform 0.3s ease, opacity 0.3s ease; /* Dodano przejście opacity */
    
    /* DODAJ TO: Przygaszenie księżyca w stanie OFF */
    opacity: 0.3;
}
/* Definicja pulsowania dla księżyca */
@keyframes moon-pulse {
    0% { transform: translate(1px, 2px) rotate(25deg) scale(1); opacity: 1; }
    50% { transform: translate(1px, 2px) rotate(25deg) scale(1.15); opacity: 1; }
    100% { transform: translate(1px, 2px) rotate(25deg) scale(1); opacity: 1; }
}
/* Stan ON dla ikony kurtyny */
.btn-4.on .icon-kurtyna {
    color: #ffffff;
    text-shadow: 0 0 15px #2dcc70, 0 0 25px #2dcc70;
    
    /* DODAJ TO: Pełna widoczność gdy ON */
    opacity: 1;
    animation: moon-pulse 2s infinite ease-in-out;
}






/* PRZYCISK 5 */

.btn-5 { 
    background: #566e89; 
    border-color: #b2bec3; 
    transition: all 0.4s ease;
    position: relative;
}

.btn-5.on { 
    background: #455a71;
}

.stack-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.stack-wrapper span {
    position: absolute;
    font-size: 30px; /* Twoje oryginalne kwadraty */
    color: #ffffff;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Precyzyjne centrowanie kwadratu w przycisku */
    top: 50%;
    left: 50%;
    line-height: 0; 
}

/* DODANIE LITER DO ŚRODKA */
.sq-top::after, .sq-bottom::after {
    position: absolute;
    top: 0; /* Wycentrowanie względem line-height: 0 kwadratu */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 900;
    transition: opacity 0.3s;
}

.sq-top::after { content: "A"; }
.sq-bottom::after { content: "M"; }

/* LOGIKA RUCHU I WIDOCZNOŚCI (Twoje oryginalne wartości) */

.sq-top {
    transform: translate(calc(-50% - 4px), calc(-50% - 4px));
    opacity: 1;
    z-index: 2;
}
.sq-top::after { opacity: 1; }

.sq-bottom {
    transform: translate(calc(-50% + 4px), calc(-50% + 4px));
    opacity: 0.2;
    z-index: 1;
}
.sq-bottom::after { opacity: 0; }

/* STAN ON */
.btn-5.on .sq-top {
    transform: translate(calc(-50% - 4px), calc(-50% - 4px));
    opacity: 0.2;
    z-index: 1;
}
.btn-5.on .sq-top::after { opacity: 0; }

.btn-5.on .sq-bottom {
    transform: translate(calc(-50% + 4px), calc(-50% + 4px));
    opacity: 1;
    z-index: 2;
}
.btn-5.on .sq-bottom::after { opacity: 1; }


/* RESZTA */















.tab-content {
    display: none;
    flex: 1;
    color: white;
    text-align: center;
    padding-top: 20px;
}

.tab-content.active {
    display: block;
}


/* style blokujące interakcję z przyciskami 1 i 2, gdy kurtyna jest aktywna */
.disabled {
    pointer-events: none;
    opacity: 0.5;
}



/* MEDYTACJA */

.timer-control-box {
    background-color: #1c1e1f; /* Lekko ciemniejszy od wyświetlacza #242627 */
    border: 2px solid #2a2c2d; /* Subtelne obramowanie */
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}

/* Kontener górnego wyświetlacza - powiększony */
#main-countdown { 
    font-size: 78px;          
    font-weight: 900;         
    color: #475d63;          /* Stonowany kolor starego złota (ciemniejszy) */
    letter-spacing: 12px;      /* Szeroki rozstaw */
    font-family: 'Verdana', sans-serif; /* Szeroki, stabilny krój */
    
     /* Delikatna poświata w kolorze czcionki, by nie biła po oczach */
    text-shadow: 0 0 10px rgba(71, 93, 99, 0.3); 
    
    margin: 5px 0;
    display: inline-block;
}

.timer-display-box {
    background-color: #242627; /* Nowe tło wyświetlacza */
    border: 2px solid #333;
    border-radius: 25px;
    padding: 35px 15px;
    text-align: center;
    margin-bottom: 40px;
}

.display-label { 
    color: #5e6065;          /* Przygaszony niebieski dla napisu MEDYTACJA */
    font-size: 16px;      
    font-weight: 600;
    letter-spacing: 6px;  
    opacity: 0.8;             /* Lekkie przygaszenie napisu */
}

/* Widok czasu ustawianego (mały napis wewnątrz panelu) */
#setting-time-view {
    font-size: 32px;
    color: #a0aec0; /* Stonowana biel (szaro-biały) */
    font-weight: bold;
    letter-spacing: 3px;
    opacity: 0.9;
}


/* Pola do wpisywania minut i sekund */
.input-group input {
    background: #242627;
    border: 1px solid #333;
    color: #cbd5e0; /* Stonowana biel */
    width: 60px;
    padding: 8px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

/* Styl dla placeholderów (podpowiedzi w polach) */
.input-group input::placeholder {
    color: #5e605f; /* Kolor jak napis Medytacja */
}

/* Rząd przycisków presetów */
.preset-row {
    display: flex;
    gap: 8px; /* Lekko większy odstęp dla wygody w 2026 */
    justify-content: center;
    margin-bottom: 40px;
}
/* Styl bazowy dla małych przycisków */
.btn-preset {
    width: 55px; /* Nieco większe, by łatwiej trafić palcem */
    height: 42px;
    background-color: #242627; /* Tło takie jak wyświetlacz */
    border: 1px solid #333;
    border-radius: 10px;
    
    /* Kolor tekstu: Mocno stonowana biel */
    color: #a0aec0; 
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Efekt po naciśnięciu / aktywny (jeśli byśmy chcieli zaznaczyć wybrany) */
.btn-preset:active {
    background-color: #3498db; /* Delikatny niebieski akcent przy kliknięciu */
    color: #ffffff;
    transform: scale(0.95);
}

.btn-start {
    width: 80%; padding: 15px; background: #3498db; border: none;
    border-radius: 50px; color: white; font-weight: bold; font-size: 18px;
	margin: 20px auto;  /* Wyśrodkowanie w poziomie */
}
.btn-start.stop { background: #e74c3c; }

/* Styl dla aktywnych przycisków zestawów w Autopętli */
.btn-loop-preset.active-set {
    border-color: #3498db;
    background-color: #2c3e50;
    color: #fff;
}


/* Modal */
.modal { display: none; position: fixed; z-index: 20000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); }
.modal-content { background: #2e2e2e; margin: 20% auto; padding: 20px; width: 80%; border-radius: 20px; text-align: center; }
.modal-actions { display: flex; justify-content: space-around; margin-top: 20px; }

/* Przycisk MENU (☰) - wyróżniony stonowaną bielą */
#open-menu {
    font-size: 18px;
    color: #cbd5e0; /* Jaśniejsza stonowana biel */
    background-color: #2e3031; /* Nieco jaśniejsze tło dla wyróżnienia menu */
}


/* GŁÓWNY FIX DLA ZAKŁADEK */
.tab-content {
    display: none; /* Domyślnie ukryte */
    flex-direction: column;
    height: 100%;  /* Musi wypełniać kontener */
    width: 100%;
    box-sizing: border-box;
}

/* Tylko aktywna zakładka staje się widoczna jako Flex */
.tab-content.active {
    display: flex; 
}

/* LOGIKA PRZESTRZENI DLA MEDYTACJI (PWA 2026) */

/* 1. Góra - Wyświetlacz */
.timer-display-box {
    margin-top: 10px;    /* Lekki odstęp od samej góry */
    margin-bottom: 40px; /* Twój sztywny margines */
    flex-shrink: 0;      /* Nie pozwól mu się ścisnąć */
}

/* 2. Środek - Sekcja sterowania (Timer + Presety) */
/* Zamiast auto, używamy flex-grow z ograniczeniem */
.timer-control-box {
    margin-bottom: 30px; /* Twój sztywny margines */
}

.preset-row {
    margin-bottom: 40px; /* Twój sztywny margines */
    flex-grow: 1;        /* To jest "sprężyna" - wypełni lukę po belce adresu */
    display: flex;
    align-items: center; /* Centruje przyciski w powiększonej przestrzeni */
}

/* 3. Dół - Przycisk START */
#timer-start-stop {
    display: block;      /* Pozwala na centrowanie marginesami auto */
    width: 80%;          /* Szerokość przycisku */
    max-width: 300px;    /* Maksymalna szerokość, żeby nie był za długi na tablecie */
    
    /* CENTROWANIE I POZYCJA */
    margin-left: auto;   /* Środkowanie w poziomie */
    margin-right: auto;  /* Środkowanie w poziomie */
    margin-top: auto;    /* Pcha START w dół w wolnej przestrzeni PWA */
    margin-bottom: 20px; /* Bezpieczny odstęp od dolnej krawędzi ekranu */
    
    flex-shrink: 0;      /* Zapobiega spłaszczeniu przycisku */
}


/*  MODAL */

.preset-edit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #242627;
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 15px;
    border: 1px solid #333;
}

.preset-edit-row span {
    color: #5e6065;
    font-weight: bold;
    font-size: 14px;
}

.edit-inputs-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.edit-inputs-wrapper input {
    width: 45px;
    background: #181a1b;
    border: 1px solid #444;
    color: #3498db; /* Kolor niebieski dla edycji */
    padding: 6px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.edit-inputs-wrapper span {
    color: #cbd5e0;
    font-size: 18px;
}

/* Przycisk OK w modalu */
#close-modal {
    background: #3498db;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
}

/* Przycisk RESET w modalu */
#reset-presets {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
}

#reset-presets:active, #close-modal:active {
    transform: scale(0.95);
}


/* STYLIZACJA TRZECH TIMERÓW */


.triple-timer-row {
    display: flex;
    justify-content: space-around;
    gap: 10px;
	height: 115px;
	
	margin-bottom: 30px;
}

.mini-timer-box {
    background: #1c1e1f;
    border: 2px solid #2a2c2d;
    border-radius: 15px;
    padding: 10px;
    flex: 1;
    transition: all 0.3s ease;
	
	    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mini-timer-box.active-phase {
    background: #34495e; /* Jaśniejsze tło dla aktywnej fazy */
    border-color: #3498db;
    transform: scale(1.05);
}

.mini-label { font-size: 14px; color: #5e6065; margin-bottom: 5px; }
.mini-timer-box div[id^="view-"] { font-size: 18px; font-weight: bold; color: #a0aec0; }

.main-timer { font-size: 78px; font-weight: 900; color: #475d63; }


/* ZMIANY DOPASAOWANIA ZAKL 1 POD ZAKL 2 */

/* Zakładka 1 przejmuje styl licznika z Twojej Zakładki 2 */
#main-display-loop { 
    font-size: 78px;          
    font-weight: 900;         
    color: #475d63;          
    letter-spacing: 12px;      
    font-family: 'Verdana', sans-serif; 
    text-shadow: 0 0 10px rgba(71, 93, 99, 0.3); 
    margin: 5px 0;
    display: inline-block;
}

/* DOPASOWANIE TYLKO WYSOKOŚCI I ODSTĘPÓW ZAKŁADKI 1 DO BAZY Z2 */
/* FIX DLA PWA 2026 - ZATRZYMANIE SKAKANIA PRZYCISKÓW */

#autopetla .preset-row, #medytacja .preset-row {
    /* Ustawiamy identyczną, sztywną wysokość dla strefy przycisków */
    height: 42px; 
    margin-bottom: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

#autopetla .triple-timer-row {
    margin-bottom: 30px; /* Musi być identyczny jak .timer-control-box w Z2 */
}

/* Kluczowe: upewnij się, że przycisk START w obu zakładkach ma ten sam margines górny */
#timer-start-stop, #loop-start-stop {
    margin-top: auto; /* Pcha przycisk do dołu kontenera */
    margin-bottom: 20px; 
}


/* Zakładka 1: Przyciski zestawów 1-5 */
.btn-loop-preset {
    font-weight: 600;
    font-size: 16px;  /* Taka sama jak w Twojej Zakładce 2 */
    color: #a0aec0;   /* Taki sam kolor jak w Twojej Zakładce 2 */
    font-family: sans-serif;
}

/* Zakładka 1: Przycisk MENU */
#open-menu-loop {
    font-size: 18px;  /* Taka sama wielkość jak w Zakładce 2 */
    color: #cbd5e0;   /* Taki sam jasny kolor jak w Zakładce 2 */
    font-family: sans-serif;
    background-color: #2e3031; /* Takie samo tło jak w Twoim menu */
}


/* MODAL AUTOPĘTLI  */

/* Szerszy modal specjalnie dla Autopętli */
.modal-wide {
    width: 96% !important;        /* Zmniejsz do 86%, żeby zobaczyć wyraźne marginesy */
    max-width: 450px;             /* Nieco węższy limit dla tabletów */
    box-sizing: border-box;       /* KLUCZOWE: padding nie będzie zwiększał szerokości modalu */
    margin: 10% auto !important;  /* Mniejszy margines u góry, centrowanie w poziomie */
    padding: 15px !important;
}

/* Kompaktowe kolumny dla T1, T2, T3 */
.loop-edit-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.loop-edit-col label {
    font-size: 9px;
    color: #3498db;
    text-transform: uppercase;
}

/* Zmniejszone inputy, by zmieścić 6 w rzędzie */
.loop-edit-input {
    width: 25px !important;
    padding: 4px !important;
    font-size: 14px !important;
}

#loop-preset-editors .preset-edit-row {
    width: 100%;             /* Wypełnij całą szerokość modalu */
    box-sizing: border-box;  /* Uwzględnij padding w szerokości */
    display: flex;           /* Układ liniowy */
    justify-content: space-between; /* Rozsuń T1, T2, T3 maksymalnie na boki */
    padding: 10px;           /* Odstęp wewnątrz paska */
    gap: 2px !important;                /* Odstęp między T1, T2 i T3 */
}

/* Celujemy bezpośrednio w inputy wewnątrz wrapperów w Autopętli */
#loop-preset-editors .edit-inputs-wrapper {
    display: flex !important;
    gap: 0px !important;       /* Całkowity brak odstępu między elementami */
    justify-content: center !important;
}

#loop-preset-editors .edit-inputs-wrapper input {
    margin: 0 !important;      /* Usuwa zewnętrzne marginesy kratek */
}

#loop-preset-editors .edit-inputs-wrapper span {
    width: auto !important;
    margin: 0 2px !important;  /* Minimalny odstęp dla dwukropka */
    padding: 0 !important;
    display: inline-block !important;
}

/* --- STYLE PRZYCISKÓW DLA MODALA AUTOPĘTLI --- */

/* Przycisk OK w modalu Autopętli */
#close-loop-modal {
    background: #3498db;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Przycisk RESET w modalu Autopętli */
#reset-loop-presets {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.2s ease;
}

/* Efekt kliknięcia (identyczny jak w Modal 2) */
#reset-loop-presets:active, 
#close-loop-modal:active {
    transform: scale(0.95);
}

/* Zachowanie spójności dla kontenera akcji */
.modal-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    gap: 10px; /* Odstęp między przyciskami */
}


/* pzryciski wyboru */

/* --- STYLIZACJA OKNA WYBORU TRYBU --- */
#mode-selector-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); /* Bardzo ciemne tło dla skupienia */
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.mode-selection {
    background: #111;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #333;
    width: 280px;
}

.mode-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Wspólny styl przycisków w modalu */
.btn-mode {
    padding: 18px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 12px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

/* DOPASOWANIE KOLORÓW DO TWOICH PRZYCISKÓW */

/* EKRAN [☼] - Kolory P1 */
#pick-p1 { 
    background: #5c3b07; border-color: #6e4f21; color: #f39c12; 
}
#pick-p1:active { 
    background: #f39c12; color: white; border-color: white;
    box-shadow: 0 0 15px #f39c12;
}

/* KINO [🎬] - Kolory P2 */
#pick-p2 { 
    background: #005669; border-color: #196877; color: #00d4ff; 
}
#pick-p2:active { 
    background: #00d4ff; color: white; border-color: white;
    box-shadow: 0 0 15px #00d4ff;
}

/* KURTYNA [☽] - Kolory P4 */
#pick-p4 { 
    background: #1e693e; border-color: #144529; color: #2dcc70; 
}
#pick-p4:active { 
    background: #2dcc70; color: white; border-color: white;
    box-shadow: 0 0 15px #2dcc70;
}

/* BACK - Kolor neutralny */
#pick-cancel { 
    background: #333; border-color: #444; color: #888; 
    margin-top: 10px;
}
#pick-cancel:active { 
    background: #555; color: white;
}

/* Efekt kliknięcia - lekkie powiększenie */
.btn-mode:active {
    transform: scale(0.95);
}

/* SZUFLADA P3 */

/* Kontener musi być "przezroczysty" dla układu Flex w button-row */
.music-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;  /* Dokładnie tyle, co szerokość Twoich przycisków .btn */
    height: 55px; /* Dokładnie tyle, co wysokość Twoich przycisków .btn */
}

/* Upewnij się, że przycisk wewnątrz nie bierze marginesów od wrapper-a */
.music-wrapper .btn-3 {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Szuflada */
.drawer {
    display: none;
    position: absolute;
    top: 60px; /* Tuż pod przyciskiem */
    background: #7a3596; /* Jaśniejszy od btn-3 */
    border-radius: 15px;
    padding: 10px;
    z-index: 1000;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.drawer.open { display: flex; flex-direction: column; gap: 8px; }

.drawer-row { display: flex; gap: 5px; }

.btn-sub, .btn-time {
    background: #682882;
    border: 1px solid #ffffff33;
    color: white;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    flex: 1;
}

/* Badge (Kółko z minutami) */
.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: white;
    color: #682882;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    border: 2px solid #682882;
}

/* Badge musi być pozycjonowany względem wrapper-a, żeby nie rozpychał ikony */
.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 10; /* Musi być nad przyciskiem */
}
/* podświetlenie buttons w szufladzie */
.btn-sub.selected {
    background: #aa5bcc !important; /* Jasny fioletowy */
    border-color: #ffffff !important;
    color: white !important;
}

/* jeden rząd ♪♪♪ w P3 */
#music-icon {
    display: block;
    white-space: nowrap; /* Zakaz łamania linii */
    overflow: visible;    /* Pozwól nutkom wyjść nieco szerzej jeśli trzeba */
    font-size: 24px;      /* Możesz lekko zmniejszyć, jeśli 3 nutki się nie mieszczą */
    text-align: center;
    width: 100%;
}

/* Opcjonalnie, jeśli przycisk P3 jest za mały na 3 nutki: */
.btn-3 {
    min-width: 55px; /* Upewnij się, że ma stałą szerokość */
}

/* Kolor dla przycisku OFF w szufladzie */

.btn-time[data-min="0"] {
    color: #e74c3c; /* Czerwony akcent dla OFF */
    font-weight: bold;
}

#music-icon {
    line-height: 1;
    display: block;
    text-align: center;
    width: 100%;
    font-size: 20px; /* Nieco mniejszy font dla 3 nutek ♪♪♪ w jednej linii */
}

/* 1. GŁÓWNY RZĄD - dodajemy boczny padding, żeby przyciski nie dotykały ścianek */
.button-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    padding: 0 10px; /* To stworzy dystans od bocznych linii kontenera */
    box-sizing: border-box;
}

/* 2. PRZYCISKI - wracamy do elastyczności, ale z zakazem deformacji */
.btn {
    flex: 1; /* Każdy przycisk bierze tyle samo miejsca */
    max-width: 55px; /* Ale nie więcej niż 55px */
    min-width: 45px; /* I nie mniej niż 45px */
    height: 55px;
    border-radius: 12px;
    border-width: 2px;
    border-style: solid;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* 3. WRAPPER MUZYKI - musi udawać przycisk, by nie psuć rzędu */
.music-wrapper {
    flex: 1;
    max-width: 55px;
    min-width: 45px;
    height: 55px;
    position: relative; /* Ważne dla badge'a */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Przycisk wewnątrz wrappera musi wypełnić go w 100% */
.music-wrapper .btn-3 {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
}

/* 4. BADGE - kółko teraz "pływa" nad przyciskiem i nie rozpycha rzędu */
.badge {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 10;
    pointer-events: none; /* Kliknięcie w kółko przeleci do przycisku */
}

/* 5. SZUFLADA - pozycjonowanie absolutne względem wrappera */
.drawer {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px; /* Nieco węższa, żeby nie dotykała brzegów */
    z-index: 1000;
}


/* Styl dla paska statusu pod nutkami */
.music-status-line {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 3px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 8px #ffffff;
    opacity: 0; /* Domyślnie niewidoczna */
    transition: opacity 0.3s ease;
}

/* Stan aktywny - dioda świeci */
.btn-3.keep-on .music-status-line {
    opacity: 1;
}