/* --- MOODIO Style 1.3 --- */
:root {
    --bg-color: #f0f0f0;
    --card-bg: #d5dce0;
    --border-color: #000000;
    --accent-color: #c48c2e;
    --text-color: #000000;
}

body {
    background-color: var(--bg-color);
    background-image: radial-gradient(#000 1px, transparent 1px);
    background-size: 20px 20px;
    font-family: "Lato", sans-serif;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 40px 20px;
}

.container {
    background-color: var(--card-bg);
    padding: 40px;
    border: 4px solid var(--border-color);
    width: 100%;
	max-width: 950px;
    box-shadow: 12px 12px 0px var(--border-color);
    position: relative;
}



/* Usiamo la massima specificità: classe legata ai tag */
div.titolo2, span.titolo2, p.titolo2, .titolo2 {
    /* 1. ESTRAZIONE FONT: Il nome deve essere tra virgolette */
    font-family: 'Montserrat', sans-serif !important;
    
    /* 2. CALIBRO: 900 è il massimo impatto caricato */
    font-weight: 700 !important;
    
    /* 3. BONIFICA: Elimina ogni residuo di Lato o stili ereditati */
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    
    /* 4. ASSETTO: Colore nero Bellolist e spaziatura */
    color: #000000 !important;
    line-height: 1.1 !important;
    display: block; /* O inline-block se lo vuoi sulla stessa riga */
    margin: -10px 0px 35px 0px !important;
}

/* --- POPUP TOAST (COPIA CONFERMATA) --- */
#copyToast {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
    color: #fff;
    padding: 40px 60px;
    border: 4px solid #fff;
    outline: 6px solid #000;
    box-shadow: 20px 20px 0px rgba(0,0,0,0.5);
    z-index: 10000;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 2rem;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}

/* --- ELEMENTI FLOTTANTI HEADER --- */
.version-tag {
    position: absolute;
    top: 30px;
    right: 85px; /* Lascia spazio al bottone Hint */
    background: #000;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 0.8rem;
    border: 2px solid #000;
    text-transform: uppercase;
}

/* --- BOTTONE HINT (ICONA PULITA) --- */
.top-hint-btn {
    position: absolute;
    top: 30px; 
    right: 30px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    z-index: 100;
    transition: transform 0.2s ease;
    width: auto;
    height: auto;
    text-decoration: none;
}

.top-hint-btn:hover {
    background: transparent;
    box-shadow: none;
    transform: scale(1.2);
}

.top-hint-btn:active {
    transform: scale(0.9);
}

.top-hint-btn img {
    width: 24px;       /* Dimensione esatta icona */
    height: 24px;
    object-fit: contain;
    display: block;
}

/* --- HEADER --- */
.header-row {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 4px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.main-logo { width: 80px; height: auto; border: none; box-shadow: none; }

h1 {
    text-align: left; font-size: 3rem; margin: 0;
    text-transform: uppercase; font-weight: 900;
    letter-spacing: -2px; line-height: 0.9;
}

p.subtitle {
    text-align: left; font-weight: bold; margin-bottom: 40px;
    font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; 
}

/* --- TABS --- */
.tabs { display: flex; justify-content: flex-start; gap: 15px; margin-bottom: 40px; }

.tab-btn {
    background-color: #dad2d2; border: 3px solid var(--border-color);
    color: var(--text-color); padding: 12px 25px; cursor: pointer;
    font-size: 1rem; font-weight: 600; text-transform: uppercase;
    font-family: inherit; box-shadow: 5px 5px 0px var(--border-color);
    transition: all 0.1s ease; display: flex; align-items: center; gap: 10px;
}
.tab-icon { width: 24px; height: 24px; object-fit: contain; }
.tab-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0px var(--border-color); }
.tab-btn.active { background-color: var(--accent-color); color: #fff; box-shadow: none; transform: translate(5px, 5px); }

#btn-lyrics { background-color: #F5DEB3; color: #000; }
#btn-lyrics.active { background-color: #F5DEB3; box-shadow: none; }

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

/* --- INPUTS --- */
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.input-group { display: flex; flex-direction: column; }
label { font-size: 0.6rem; margin-bottom: 5px; font-weight: 900; color: #3b3636; text-transform: uppercase; }

select {
    background-color: #fff; color: #000; padding: 10px;
    border: 3px solid var(--border-color); border-radius: 0;
    font-size: 1rem; font-family: inherit; font-weight: bold;
    outline: none; width: 100%; cursor: pointer;
    box-shadow: 4px 4px 0px #ccc; transition: all 0.1s;
}
select:focus { background-color: #eee; box-shadow: 4px 4px 0px #000; }

.fx-section {
    background-color: #e0e0e0; border: 3px solid var(--border-color);
    padding: 10px; margin-bottom: 30px; box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
}
.fx-voci {
    background-color: #e0eee0; border: 3px solid var(--border-color);
    padding: 10px; margin-bottom: 30px; box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
}
.fx-title {
    grid-column: 1 / -1; font-size: 1.2rem; color: #000; font-weight: 900;
    margin-bottom: 15px; text-transform: uppercase; border-bottom: 3px solid #000;
    display: inline-block;
}
.fx-color1 {
    background-color: #315c2d1f; border: 3px solid var(--border-color);
    padding: 10px; margin-bottom: 30px; box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
}


.hidden { display: none !important; }
.fade-in { animation: fadeIn 0.3s; }

/* --- BUTTONS & OUTPUT (Versione Unificata) --- */

.button-container { text-align: center; margin-bottom: 30px; margin-top: 20px; }

button.gen-btn {
    background: #000; color: #fff; border: 4px solid #000;
    padding: 20px 60px; font-weight: 900; font-size: 1.5rem;
    font-family: inherit; text-transform: uppercase; cursor: pointer;
    box-shadow: 8px 8px 0px #888; transition: all 0.1s;
}
button.gen-btn:hover { background: #fff; color: #000; box-shadow: 10px 10px 0px #000; transform: translate(-2px, -2px); }
button.gen-btn:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px #000; }

/* LA CORAZZATA: Il contenitore che comanda l'estetica */
.output-wrapper, .output-wrapper-song { 
    position: relative; 
    background-color: #fff; 
    border: 3px solid #000; 
    box-shadow: 8px 8px 0px rgba(112, 124, 124, 0.3); /* #707c7c4d convertito per stabilità */
    margin-bottom: 40px;
}

/* IL CONTENUTO: La textarea si adegua al contenitore */
textarea {
    width: 100%; 
    height: 140px; 
    background-color: transparent !important; /* Prende il bianco del wrapper */
    border: none !important; /* Niente bordi interni per non raddoppiare */
    color: #000; 
    font-size: 1.1rem; 
    font-weight: medium; 
    resize: none;
    padding: 20px; 
    padding-right: 20px; /* Spazio di sicurezza per i bottoni */
    box-sizing: border-box;
    font-family: 'Montserrat', Courier, monospace; 
    line-height: 1.4;
    outline: none;
}

/* CASO SPECIFICO: Se è la pagina SONG, la vogliamo più alta */
.output-wrapper-song textarea {
    height: 380px;
}

/* PULSANTI DI AZIONE (Copia/Cancella) */
.copy-btn {
    background: #fff;
    border: 2px solid #000;
    padding: 6px;
    cursor: pointer;
    transition: all 0.1s;
}
.copy-btn:hover { background: #000; color: #fff; } /* Inversione tattica al passaggio */
.copy-btn:active { transform: scale(0.95); }
.copy-btn svg { width: 20px; height: 20px; display: block; }

/* --- FOOTER --- */
footer { margin-top: 40px; text-align: center; border-top: 2px solid #000; padding-top: 35px; font-size: 0.9rem; font-weight: bold; }
footer a { color: #000; text-decoration: none; background: #fff; border: 2px solid #000; padding: 5px 10px; box-shadow: 4px 4px 0px #000; transition: 0.2s; }
footer a:hover { box-shadow: 2px 2px 0px #000; transform: translate(2px, 2px); background: #e0e0e0; }

/* --- LYRICS PAGE STYLES --- */
h3.section-title { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 700;
    text-transform: uppercase;
	color: #829399;
    margin-bottom: 20px;
    padding-bottom: 10px;
    display: inline-block;
}
.modifier-box { margin-bottom: 40px; border: 3px solid #000; padding: 25px; background-color: #f4f4f4;}
.modifier-input { width: 100%; padding: 15px; border: 2px solid #000; font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 1.1rem; color: #000; outline: none; box-sizing: border-box; }
.modifier-input:focus { background-color: #fff; box-shadow: 0px 0px 0px #000; }
.structure-grid { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 50px; border: 3px solid #000; padding: 30px; background: #fff; box-shadow: 10px 10px 0px #ccc; }
.struct-category { width: 100%; font-size: 0.9rem; font-weight: 900; text-transform: uppercase; margin-bottom: 15px; margin-top: 30px; border-bottom: 2px solid #000; padding-bottom: 5px; display: block; color: #444; }
.struct-category:first-of-type { margin-top: 0; }
.struct-btn { background: #fff; border: 2px solid #000; padding: 14px 20px; font-family: 'Montserrat', Courier, monospace;; font-weight: bold; font-size: 0.95rem; cursor: pointer; box-shadow: 0px 0px 0px #000; transition: all 0.1s; }
.struct-btn:hover { background: #000; color: #fff; transform: translate(-2px, -2px); box-shadow: 0px 0px 0px #666; }
.struct-btn:active { transform: translate(3px, 3px); box-shadow: 0px 0px 0px #000; }

/* --- HINT PAGE STYLES --- */
.hint-block { background: #fff; border: 3px solid #000; padding: 20px; margin-bottom: 30px; box-shadow: 8px 8px 0px #ccc; position: relative; }
.hint-title { font-size: 1.1rem; font-weight: 900; margin-bottom: 10px; border-bottom: 2px solid #000; padding-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }
.audio-icon { width: 20px; height: 20px; margin-right: 10px; vertical-align: middle; }
.hint-text { width: 100%; background: #f4f4f4; border: 2px solid #000; padding: 15px; font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 0.9rem; resize: none; height: 100px; box-sizing: border-box; cursor: pointer; }
.hint-text:hover { background: #fff; }
/* =========================================
   RESPONSIVE DESIGN (2025 READY)
   ========================================= */

@media (max-width: 768px) {
    body {
        padding: 10px; /* Meno spazio esterno */
    }

    .container {
        width: 100%; /* Occupa tutto lo spazio disponibile */
        padding: 20px;
        box-shadow: 6px 6px 0px #000; /* Ombra più piccola */
    }

    h1 {
        font-size: 2rem; /* Titolo più piccolo */
    }

    .header-row {
        flex-direction: column; /* Logo e Titolo uno sopra l'altro */
        text-align: center;
        gap: 10px;
    }

    .version-tag {
        position: relative; /* Non più assoluto per non coprire il resto */
        display: inline-block;
        right: auto;
        top: auto;
        margin-bottom: 10px;
    }

    .top-hint-btn {
        top: 10px;
        right: 10px;
    }

    /* Tabs: diventano una colonna o scorrono */
    .tabs {
        flex-direction: column;
        gap: 8px;
    }

    .tab-btn {
        width: 100%;
        justify-content: center;
    }

    /* Griglie: da 3 colonne passiamo a 1 o 2 */
    .grid-container {
        grid-template-columns: 1fr; /* Una sola colonna per i selettori */
    }

    .structure-grid {
        padding: 15px;
        justify-content: center;
    }

    .struct-btn {
        flex: 1 1 40%; /* I bottoni si allargano per riempire il cell */
        font-size: 0.8rem;
        padding: 10px;
        text-align: center;
    }

    /* Textarea: altezza ridotta per non occupare tutto lo schermo */
    textarea {
        height: 200px;
        font-size: 1rem;
    }

    #copyToast {
        width: 80%;
        font-size: 1.2rem;
        padding: 20px;
    }
}
/* Fix per i lettori audio multipli */
.gap-player {
    width: 50% !important;
    margin: 10px 0 20px 0 !important; /* Spazio sopra e sotto */
}

.hint-block {
    display: flex;
    flex-direction: column; /* Mette Titolo, Player e Textarea in fila perfetta */
    gap: 10px;
}
/* --- CUSTOM MODAL (AL POSTO DEL POPUP BROWSER) --- */
.modal-overlay {
    display: none; /* Nascosto di default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Sfondo scuro */
    z-index: 20000; /* Sopra a tutto */
    justify-content: center;
    align-items: center;
}

.modal-box {
    background: #fff;
    border: 4px solid #000;
    padding: 30px;
    width: 400px;
    text-align: center;
    box-shadow: 15px 15px 0px #000; /* Ombra Brutalist */
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

.modal-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.modal-btn {
    padding: 10px 30px;
    font-family: inherit;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    border: 3px solid #000;
    text-transform: uppercase;
    transition: 0.1s;
}

.btn-yes {
    background-color: #000;
    color: #fff;
}
.btn-yes:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #fff; }

.btn-no {
    background-color: #fff;
    color: #000;
}
.btn-no:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #000; }
.btn-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;

  display: flex;
  flex-direction: row-reverse; /* ← QUESTA */
  gap: 1px;

  transform: translate(-4px, -4px);
}

.btn-actions .copy-btn {
  line-height: 0;
}

.btn-actions .copy-btn svg {
  display: block;
}
.btn-copy:hover { color: #ffffff; }
.btn-clear:hover { color: #ffffff; }
.output-wrapper-song {
    position: relative !important;
}
.hint-row-compact {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #000;
    box-shadow: 4px 4px 0px #000; /* Effetto ombra dura come nel tuo disegno */
    margin-bottom: 12px;
    padding: 8px 15px;
    height: 50px;
}

.hint-name {
    font-family: 'Courier New', monospace;
    font-weight: 900;
    width: 150px;
}

.gap-player-compact {
    flex-grow: 1;
    margin: 0 20px;
}

.copy-trigger {
    cursor: pointer;
    transition: transform 0.1s;
}

.copy-trigger:active {
    transform: scale(0.9);
}

.icon-copy {
    width: 22px;
    height: 22px;
}
.version-tag {
  cursor: pointer;
  background: #000;
  color: #fff;
  padding: 6px 12px;
  font-size: 12px;
  display: inline-block;
}

.version-tag:hover {
  background: #222;
}

/* popup base */
dialog {
  border: 2px solid #000;
  padding: 16px;
}
.modal {
    display: none; 
    position: fixed;
    z-index: 2000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Overlay scuro */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fff;
    padding: 25px;
    border: 2px solid #000; /* Bordo netto stile Moodio */
    width: 90%;
    max-width: 350px;
}

.changelog-list {
    list-style: none; /* Niente pallini */
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

.changelog-list li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}
/* Il Modal diventa asimmetrico e moderno */
.modal-content {
    background-color: #f3f0f0;
    padding: 30px;
    
    /* --- LA MAGIA DELL'ASIMMETRIA --- */
    /* border-radius: alto-sx, alto-dx, basso-dx, basso-sx */
    border-radius: 24px 0 24px 0; 
    /* 24px = Angolo tondo grande; 0 = Angolo retto (spigolo) */

    /* Manteniamo il resto pulito */
    border: none;
    width: 95%;
    max-width: 450px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25); /* Ombra più decisa per staccarlo bene */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    overflow: hidden; /* Importante: taglia il contenuto che esce dagli angoli tondi */
}

}
/* --- RESET E RESTYLING COMPLETO DEL BOTTONE --- */
.btn-close-modern {
    /* Rimuove lo stile "anni 90" del browser */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;

    /* Stile Moodio */
    background-color: #000;  /* Nero profondo */
    color: #fff;             /* Testo bianco candido */
    padding: 16px;           /* Più grande e cliccabile */
    width: 100%;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 800;        /* Extra bold */
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    
    /* Il taglio asimmetrico coordinato al box */
    border-radius: 12px 0 12px 0; 
    
    /* Animazioni fluide */
    transition: all 0.2s ease-in-out;
    margin-top: 10px;
}

/* Effetto al passaggio del mouse */
.btn-close-modern:hover {
    background-color: #333;
    transform: scale(1.02); /* Si ingrandisce appena */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

	/* --- RESET E RESTYLING BOTTONE CHIUDI --- */
.btn-close-modern {
    /* Rimuove lo stile orribile di default del browser */
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    
    /* Stato Iniziale: Flat e Trasparente */
    background-color: transparent; 
    color: #000;                   /* Testo nero */
    border: 2px solid #000;        /* Bordo nero netto */
    
    /* Dimensioni e Font */
    padding: 12px 30px;
    font-family: inherit;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    
    /* Asimmetria coordinata al box */
    border-radius: 0px 0 0px 0; 
    
    /* Transizione fluida per l'hover */
    transition: all 0.3s ease;
    margin-top: 15px;
}

/* --- EFFETTO NERO SOLO HOVER --- */
.btn-close-modern:hover {
    background-color: #000;        /* Diventa nero al passaggio */
    color: #fff;                   /* Il testo diventa bianco */
}
.ver-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: normal;
    
    /* --- IL TOCCO DI RESPIRAZIONE --- */
    padding: 4px 10px;         /* 16px ai lati per dare aria alla scritta */
    
    border-radius: 0px;
    margin-bottom: 8px;
    text-transform: uppercase;
    
    /* Migliora la leggibilità del font "Commodore" */
    letter-spacing: 1.2px;      
    
    /* Forza l'allineamento centrale del testo */
    text-align: center;
}
/* --- PLANCIA LYRICS (Stile Imperiale) --- */

/* Il contenitore che tiene insieme tutto */
.lyrics-wrapper {
    display: flex;       /* Modalità Griglia Flessibile */
    gap: 15px;           /* Spazio tra foglio e bottoni */
    width: 100%;
    height: 500px;       /* Altezza fissa imponente */
    margin-top: 10px;
}

/* Colonna Sinistra (Editor) */
.lyrics-editor {
    flex: 3;             /* Prende il 75% dello spazio */
    display: flex;
    flex-direction: column;
}

/* La Textarea stessa */
.lyrics-editor textarea {
    width: 100%;
    height: 100%;
    padding: 15px;
    font-family: 'Courier New', monospace; /* Stile macchina da scrivere */
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;        /* Blocchiamo il ridimensionamento manuale */
    background-color: #fff;
    color: #333;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05); /* Leggera ombra interna */
}

/* Colonna Destra (Pulsantiera) */
.lyrics-controls {
    flex: 1;             /* Prende il 25% dello spazio */
    background: #f1f3f5; /* Grigio tecnico */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-y: auto;    /* Scrollbar se serve */
    display: flex;
    flex-direction: column;
    gap: 8px;            /* Spazio tra i bottoni */
}

/* Titoli delle sezioncine */
.control-header {
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #666;
    margin-top: 10px;
    margin-bottom: 2px;
    text-align: center;
    letter-spacing: 1px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
}

/* I Bottoni */
.tag-btn {
    padding: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    background: #ffffff;
    border: 1px solid #999;
    border-radius: 4px;
    transition: all 0.1s;
    box-shadow: 0 2px 0 #ccc; /* Effetto tasto fisico */
    text-align: center;
}

.tag-btn:hover {
    background: #eef;
    border-color: #666;
    transform: translateY(-1px);
}

.tag-btn:active {
    transform: translateY(2px); /* Effetto premuto */
    box-shadow: none;
}

/* Input Custom */
.custom-input {
    padding: 8px;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 0.85rem;
    text-align: center;
    width: 100%;
}
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

 
Chiedo scusa, Comandante. Procedura di rientro nel protocollo "Blocco Completo" eseguita. Niente più frammenti, solo il pezzo d'artiglieria intero, pronto per essere montato nel tuo stylizer.css.

Ho eliminato ogni traccia del rettangolo grigio, ho fissato le 4 colonne matematiche e ho lasciato l'SVG libero di brillare nell'angolo in alto a destra.

🛡️ BLOCCO COMPLETO CERTIFICATO (BELLOLIST)
Sostituisci tutto quello che hai nel CSS tra questi due commenti con il codice qui sotto:

CSS

/* ============================================================
   SEZIONE PRESET - 4 COLONNE (BELLOLIST DEFINITIVO)
   ============================================================ */

/* 1. LA GRIGLIA: Inquadramento a 4 colonne fisse */
.preset-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px 20px !important;
    margin-top: 30px !important;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

/* 2. LA CARD: Base per posizionamento micron e zero ombre */
.preset-card {
    position: relative !important;
    background-color: #ffffff !important;
    border: 1px solid #000000 !important; /* Stile Bellolist sottile */
    padding: 30px 15px 15px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 200px !important;
    box-sizing: border-box !important;
    
    /* ELIMINAZIONE OMBRE BRUTALIST */
    box-shadow: none !important;
    transition: background-color 0.2s, border-color 0.2s;
}

.preset-card:hover {
    background-color: #fafafa !important;
    border-color: var(--accent-color) !important;
}

.preset-card .btn-copy-small {
    position: absolute !important;
    /* Spostamento millimetrico verso l'angolo (5px invece di 8px) */
    top: 3px !important;
    right: 3px !important;
    
    /* Pulizia totale: addio rettangolo grigio */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* Area di contatto ottimizzata */
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

/* L'ICONA SVG: Dimensioni fisse e colore */
.preset-card .btn-copy-small svg {
    width: 20px !important;
    height: 20px !important;
    fill: #000000 !important;
    transition: fill 0.2s ease;
}

/* Effetto Hover (Opzionale) */
.preset-card .btn-copy-small:hover svg {
    fill: var(--accent-color) !important;
}

.preset-card .btn-copy-small:hover svg {
    fill: var(--accent-color) !important;
}

/* 5. AVATAR E ETICHETTA: Proporzioni Bellolist */
.voice-avatar {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    border: 1px solid #000 !important;
    margin-bottom: 15px !important;
    object-fit: cover !important;
    cursor: pointer;
}

.genre-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin-top: auto !important;
    color: #000 !important;
}

/* 6. RESPONSIVE: Inquadramento tattico mobili */
@media (max-width: 992px) {
    .preset-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media screen and (max-width: 480px) {

    /* 1. Griglia: Una sola colonna e spaziatura ridotta */
    .preset-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* 2. Card: Assetto a "ranghi serrati" (niente buchi al centro) */
    .preset-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; 
        align-items: center !important;
        padding: 30px 10px 15px 10px !important; /* 30px sopra protegge l'avatar dall'icona */
        height: auto !important;
        min-height: 0 !important;
    }

    /* 3. L'Icona Copy: Blindata nell'angolo (addio width 100%) */
    .btn-copy-small {
        width: 35px !important;
        height: 35px !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        background: transparent !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
    }

    /* 4. Avatar: Riduzione calibro e distacco millimetrico (4px) */
    .voice-avatar {
        width: 72px !important;
        height: 72px !important;
        margin-bottom: 4px !important; /* Il distacco che cercavi */
    }

    /* 5. Titolo: Calibro 0.72rem (Massima eleganza e spazio) */
    .genre-label {
        font-size: 0.72rem !important;
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-align: center !important;
    }
}



/* Changelog box */

.popup {
    background: #111;        /* Colore sfondo finestra (adatta al tuo tema) */
    color: #e9e9e9;             /* Testo */
    border: 1px solid #333;  /* Bordo sottile */
    width: 90%;              /* Larghezza mobile */
    max-width: 500px;        /* Larghezza massima desktop */
    max-height: 85vh;        /* Non più alta dell'85% dello schermo */
    overflow-y: auto;        /* Se il testo è lungo, scrolla dentro */
    padding: 25px;
    border-radius: 12px;
    position: relative;      /* Serve per posizionare la X */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Ombra profonda */
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Titolo principale */
.popup-content h2 {
  font-size: 1.5em;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

/* Sezione per ogni versione */
.version {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.version h3 {
  font-size: 1.2em;
  color: #333;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.release-date {
  background-color: #bfbfbf1a;
  color: #666;
  font-size: 0.8em;
  padding: 4px 8px;
  border-radius: 12px;
  text-transform: uppercase;
}

/* Lista dei cambiamenti */
.version ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.version li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #555;
  font-size: 1em;
}

/* Tag colorati */
.tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  margin-right: 10px;
  flex-shrink: 0;
}
/* Classe esclusiva per il link help in alto */
.help-link-lyrics {
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px; /* Distanza di sicurezza dall'ultimo bottone */
    text-decoration: none;
}

/* Classe esclusiva per l'immagine help */
/* Allineamento chirurgico per il link help */
.help-link-lyrics {
    display: inline-flex;
    align-items: center; /* Centra l'immagine verticalmente */
    vertical-align: middle;
    height: 42px;        /* Altezza standard dei tuoi tab-btn: regola se necessario */
    margin-left: 8px;    /* Distanza dal tasto Song */
    text-decoration: none;
}

/* L'immagine help si adatta all'altezza del suo contenitore */
.help-icon-lyrics {
    height: 100%;        /* Occupa tutta l'altezza del link (42px) */
    width: auto;         /* Mantiene le proporzioni */
    display: block;
    transition: filter 0.2s ease;
}

.help-icon-lyrics:hover {
    filter: brightness(1.2); /* Feedback visivo senza spostamenti di pixel */
}

.tag-n {
  background-color: #00C800; /* Nuovo */
}

.tag-a {
  background-color: #CCCC49; /* Aggiornato */
}

.tag-f {
  background-color: #00CCFF; /* Fix */
}

.tag-r {
  background-color: #FF0000; /* Rimosso */
}
/* Posizionamento della X nel Changelog */
.close-changelog {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #888; /* Grigio neutro */
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.close-changelog:hover {
    color: #fff; /* Diventa bianca (o il colore del tuo accento) al passaggio */
}

/* Assicurati che la card sia il punto di riferimento */
.changelog-card {
    position: relative; 
    /* ... il resto del tuo stile ... */
}
#changelogOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Sfondo scuro semitrasparente */
    z-index: 9999;
    
    /* MAGIA PER CENTRARE */
    display: flex;
    align-items: center;     /* Centra in verticale */
    justify-content: center; /* Centra in orizzontale */
}
#changelogOverlay.hidden {
    display: none !important;
}
/* ALLINEAMENTO LISTE CHANGELOG */
.version-list ul {
    /* Il pallino sta "fuori" dal blocco di testo */
    list-style-position: outside; 
    
    /* Serve un po' di spazio a sinistra per non tagliare il pallino */
    padding-left: 20px; 
    
    /* Opzionale: un po' di respiro tra i punti elenco */
    margin-bottom: 15px;
}

.version-list li {
    margin-bottom: 5px; /* Spazio tra una riga e l'altra */
}


/* --- ACCORDION SLIM --- */

.simple-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* MODIFICHE QUI: Misure ridotte */
    background-color: #f4f4f4;
    padding: 6px 12px;      /* Era 10px -> Ora è molto più sottile */
    margin-bottom: 2px;     /* Era 5px -> Ora i box stanno più vicini */
    border-radius: 4px;     /* Angoli un po' più vivi */
    
    cursor: pointer;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
}

.simple-header h3 {
    margin: 0;
    font-size: 0.95rem; /* Testo leggermente più compatto */
    font-weight: 600;
}

/* Freccia */
.toggle-icon {
    font-size: 0.75rem; /* Freccina più discreta */
    transition: transform 0.3s ease;
    opacity: 0.6; /* Leggermente trasparente per non appesantire */
}

/* Hover */
.simple-header:hover {
    background-color: #e0e0e0;
}

/* Stato Aperto */
.simple-header.open {
    background-color: #222; /* Nero Moodio */
    color: #fff;
    border-color: #222;
    /* Opzionale: se vuoi staccarlo un po' quando è aperto */
    margin-bottom: 15px; 
}

.simple-header.open .toggle-icon {
    transform: rotate(180deg);
    opacity: 1;
    color: #fff;
}
/* --- ACCORDION TRASPARENTE UNIVERSALE --- */

.simple-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* IL TRUCCO: Sfondo trasparente */
    background-color: transparent !important;
    
    /* Spaziatura pulita */
    padding: 8px 0;      /* Niente padding laterale, solo sopra/sotto */
    margin-bottom: 5px;
    
    /* Bordo sottile di separazione (nero semi-trasparente per andare bene su tutto) */
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0, 0.2) !important;
    border-radius: 0;   /* Niente angoli tondi sul titolo */

    cursor: pointer;
    transition: opacity 0.2s ease;
}

.simple-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #000; /* Testo sempre nero */
}

/* HOVER MINIMALE */
.simple-header:hover {
    background-color: transparent !important; /* Nessun cambio colore */
    opacity: 0.6; /* Diventa solo un po' più chiaro per far capire il click */
}

/* QUANDO È APERTO */
.simple-header.open {
    /* Mantiene trasparenza */
    background-color: transparent !important;
    border-bottom: 2px solid rgba(0,0,0, 0.8) !important; /* Linea un po' più marcata quando aperto */
}

/* FRECCIA */
.toggle-icon {
    font-size: 0.8rem;
    color: #000;
    transition: transform 0.3s ease;
}

.simple-header.open .toggle-icon {
    transform: rotate(180deg);
}
/* --- FOOTER BANNER --- */
.app-footer {
    width: 100%;
    margin-top: 50px;
    padding: 10px 0;
     border-top: 2px solid var(--border-color); /* Una linea netta stile Moodio */
    text-align: center;
}

.app-footer2 {
    width: 100%;
    margin-top: 50px;
    padding: 10px 0;
    border-top: 2px solid;
	color: #abafaf;
    text-align: center;
}


.footer-banner {
    /* La regola d'oro della responsività */
    max-width: 100%; 
    height: auto;
    
    /* Centratura e pulizia */
    display: block;
    margin: 0 auto;
    
    /* Opzionale: un leggero filtro se vuoi che sia meno "sparato" */
    opacity: 0.9;
    transition: opacity 0.3s;
}

.footer-banner:hover {
    opacity: 1;
}
/* 1. Toglie il cuscinetto d'aria in fondo a tutta la pagina */
body {
    padding-bottom: 0 !important; 
}

/* 2. Il footer non deve avere padding sotto */
.app-footer {
    padding: 10px 0 0 0 !important; /* Sopra 10px, lati 0, sotto 0 */
    text-align: center;
}

/* 3. La scritta deve avere solo spazio SOPRA, non sotto */
.footer-text {
    margin: 10px 0 5px 0 !important; /* 10px per staccarsi dai loghi, 5px dal fondo */
    font-size: 0.8rem;
    font-weight: bold;
}
/* 1. Crea lo spazio sotto per far "atterrare" la scritta dopo l'invio */
body {
    padding-bottom: 50px !important; 
}

/* 2. Opzionale: se vuoi che l'invio sia più "alto", dai un margine al testo */
.footer-credits {
    display: inline-block;
    margin-top: 10px; 
	color: #8C8787;
}
    
	
/* --- PAGINA HINT - PLAYER --- */
    .voice-avatar {
        cursor: pointer;
        transition: all 0.3s ease;
        border: 4px solid transparent; 
        border-radius: 50%;
    }

    /* Effetto quando suona */
    .voice-avatar.playing {
        border-color: #dcd1b3; /* Verde acceso */
        transform: scale(1.1); 
        box-shadow: 0 0 20px rgb(41 45 32 / 88%);		
        opacity: 1 !important;
    }

    /* Effetto hover */
    .voice-avatar:hover {
        opacity: 0.8;
        transform: scale(1.05);
    }

    /* Nascondiamo lo scroll orizzontale generale */
    body {
        overflow-x: hidden;
    }

    /* --- 2. PATCH MOBILE (VERSIONE 2 COLONNE) --- */
    @media screen and (max-width: 768px) {
        
        /* Resetta il margine sinistro */
        .main-wrapper {
            margin-left: 0 !important;
            width: 100% !important;
            padding: 10px !important; /* Meno padding laterale */
            box-sizing: border-box; 
        }

        /* Nascondi menu laterale */
        aside { display: none !important; }

        /* GRIGLIA A 2 COLONNE */
        .preset-grid {
            grid-template-columns: 1fr 1fr !important; /* Due colonne */
            gap: 10px; /* Spazio stretto */
        }

        /* Card più compatta */
        .preset-card {
            padding: 10px !important;
        }

        /* Immagine un po' più piccola per starci */
        .voice-avatar {
            width: 80px; 
            height: 80px;
            margin-bottom: 5px;
        }

        /* Testi adattati */
        .genre-label {
            font-size: 0.85rem; 
            margin-bottom: 8px;
        }

        /* Bottone Copy largo ma testo piccolo */
        .btn-copy-small {
            font-size: 0.75rem;
            padding: 8px 0;
            width: 100%; 
        }

        /* Header centrato */
        .header-row {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .header-row h1 {
            font-size: 2rem;
        }

        /* Tasto Home posizionato */
        .top-hint-btn {
            top: 5px;
            right: 5px;
            width: 35px;
        }
    }
/* --- FINE PAGINA HINT - PLAYER --- */
/* 1. Sfratto esecutivo: il cursore diventa invisibile in TUTTA la pagina */
html, body {
    caret-color: transparent !important;
}

/* 2. Eccezione alla regola: lo riattiviamo solo dove devi scrivere veramente */
input, textarea, [contenteditable="true"] {
    caret-color: auto !important;
}

/* 3. Bonus: Evitiamo che il testo diventi blu se clicchi furiosamente sul logo o sui tasti */
.main-logo, .btn-copy-small, .genre-label, .version-tag, h1, p {
    user-select: none;
    -webkit-user-select: none;
}
.preset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}
Invece di stravolgere tutto, aggiungi solo queste righe in fondo al tuo `stylizer.css`. Risolvono la griglia e lo spazio che volevi recuperare su mobile, pesando pochissimi byte.

```css
/* STABILITÀ GRIGLIA & SPAZIO MOBILE */

/* Forza l'ordine delle 4 colonne senza pesare */
.preset-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px 15px !important;
}

@media screen and (max-width: 480px) {
    /* Recupero spazio tra immagine e titolo (Richiesta Comandante) */
    .voice-avatar {
        margin-bottom: 2px !important; /* Ridotto al minimo */
        width: 75px !important;
        height: 75px !important;
    }
    
    .genre-label {
        margin-top: 0 !important;
        line-height: 1.1 !important;
    }

    /* Se vuoi che l'icona si sposti a destra, dobbiamo togliere il 100% */
    .btn-copy-small {
        width: 35px !important; 
        right: 0 !important;
        top: 0 !important;
        position: absolute !important;
    }
}
/* ============================================================
   MOODIO SYSTEM RESET - VERSIONE DEFINITIVA UNIFICATA
   ============================================================ */

/* 1. STABILIZZAZIONE GRIGLIA (Per evitare l'Anomalia 27) */
.preset-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 40px 20px !important; 
    width: 100% !important;
    margin-top: 30px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

/* 2. CARD & TASTO COPIA (Filo Bordo) */
.preset-card {
    position: relative !important; /* Perno per l'icona */
    width: 100% !important; 
    min-width: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #000 !important;
    padding: 30px 15px 15px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Tutto verso l'alto */
    box-sizing: border-box !important;
}

.preset-card .btn-copy-small {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: transparent !important;
    border: none !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

.preset-card .btn-copy-small svg {
    width: 18px !important;
    height: 18px !important;
    fill: #000000 !important;
}

/* 3. PROTOCOLLO MOBILE UNIFICATO (Paguro Beach Fix) */
@media screen and (max-width: 480px) {

    /* 1. LA GRIGLIA: Forza le card una sotto l'altra */
    .preset-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Una sola colonna */
        gap: 25px !important;
        width: 100% !important;
    }

    /* 2. LA CARD: Assetto compatto senza buchi d'aria */
    .preset-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Tutto attaccato verso l'alto */
        align-items: center !important;
        padding: 30px 10px 15px 10px !important; /* Spazio per l'iconcina copy */
        height: auto !important; /* La card si stringe attorno al contenuto */
        min-height: 0 !important;
        position: relative !important;
    }

    /* 3. L'ICONA COPY: Incollata nell'angolo in alto a destra */
    .btn-copy-small {
        width: 35px !important;
        height: 35px !important;
        position: absolute !important;
        top: 0 !important;   /* Al soffitto */
        right: 0 !important; /* Al muro di destra */
        background: transparent !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    /* 4. L'AVATAR (IMMAGINE): Calibro mobile */
    .voice-avatar {
        width: 75px !important;
        height: 75px !important;
        margin-bottom: 8px !important; /* Distacco millimetrico dal titolo */
    }

    /* 5. IL TITOLO: Centrato, piccolo e pronto per 1 o 2 righe */
    .genre-label {
        font-size: 0.72rem !important; /* Calibro elegante */
        line-height: 1.2 !important;    /* Spazio tra le righe se va a capo */
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-align: center !important;
        
        /* Centratura nell'area neutra (Paguro Beach Fix) */
        padding: 6px 0 !important; 
        margin: 0 !important;
        display: block !important;
        width: 100%;
        
        /* Spazio di sicurezza dalla fine del box */
        margin-bottom: 5px !important; 
    }
}
/* ============================================================
   PROTOCOLLO MOBILE PAGURO BEACH (2 COLONNE + CENTRATURA)
   ============================================================ */
@media screen and (max-width: 480px) {
    .preset-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .preset-card {
        padding: 25px 5px 10px 5px !important;
        height: auto !important;
    }

    .voice-avatar {
        width: 68px !important;
        height: 68px !important;
        margin-bottom: 6px !important;
    }

    .genre-label {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        padding: 6px 2px !important;
        text-align: center !important;
        display: block !important;
        width: 100%;
        margin-bottom: 5px !important;
    }

    .btn-copy-small {
        width: 32px !important;
        height: 32px !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
    }
}

/* --- PULIZIE FINALI --- */
html, body { caret-color: transparent !important; }
input, textarea, [contenteditable="true"] { caret-color: auto !important; }
.main-logo, .btn-copy-small, .genre-label, h1, .tab-btn { user-select: none; -webkit-user-select: none; }

/* 4. PULIZIA FINALE INTERFACCIA */
html, body {
    caret-color: transparent !important; /* Cursore invisibile */
}

input, textarea, [contenteditable="true"] {
    caret-color: auto !important; /* Riattiva cursore dove serve */
}

.main-logo, .btn-copy-small, .genre-label, .version-tag, h1, p {
    user-select: none; /* Evita selezioni blu fastidiose */
    -webkit-user-select: none;
}

/* ============================================================
   FINE RESET - SISTEMA ALLINEATO
   ============================================================ */
   /* Posizionamento e Stile del Tasto TESTO */
.btn-watson-action {
    position: absolute;
    /* Coordinate millimetriche: regolate per essere a filo con i tasti di destra */
    bottom: 16px;
    left: 14px;
    z-index: 10;
    
    /* Stile pulito 1px */
    background: #fff;  
    color: #000;       
    border: 1px solid #000;
    
    /* Misure e Font */
    padding: 5px 10px;
    font-family: 'Montserrat', Courier, monospace;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.1s;
}

/* Hover: Inversione brutale */
.btn-watson-action:hover {
    background: #000;
    color: #fff;
}
/* Container principale */
.lyrics-tabs-container {
    margin-top: 20px;
}

/* Navigazione orizzontale Tab */
.struct-tabs-nav {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    flex-wrap: wrap; /* Per evitare che su mobile si spacchi */
}

/* Link Tab: Solo Testo */
.struct-tab-link {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #888; /* Grigio quando inattivo */
    transition: all 0.2s;
    letter-spacing: 1px;
}

/* Tab Attiva: Nera e Sottolineata */
.struct-tab-link.active {
    color: #000;
    font-weight: 900; /* Lasciamo solo il Bold come segnale di attivazione */
    /* text-underline-offset cancellato: linea sparita. Semplice. */
}

/* Contenuto delle Tab: Griglia bottoni */
.struct-tab-content {
    display: none; /* Nascosto di default */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    animation: fadeIn 0.3s ease;
}

/* Quando la tab è attiva diventa una griglia */
.struct-tab-content.active {
    display: grid;
}

/* Animazione fluida */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Bottoni Tag (Ripristino stile 1px) */
.struct-btn {
    background: #e7ecec;
    border: 1px solid #000;
    padding: 6px 4px;
	color: #4e5050;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.1s;
}
.struct-btn:hover {
    background: #000;
    color: #fff;
}
/* Icona Help: Posizionamento nell'angolo del box */
.help-icon-trigger {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    background: #fff;
    transition: all 0.1s;
    z-index: 5;
}

.help-icon-trigger:hover {
    background: #000;
    color: #fff;
}
/* --- REGOLE COMUNI (Per tutti i popup) --- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex; /* Centra il contenuto */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* --- REGOLE SPECIFICHE (Differenziazione) --- */

/* Popup Changelog (Index) */
#changelogOverlay .popup {
    width: 90%;
    max-width: 600px;
    padding: 20px;
    box-shadow: 0px 0px 0px #000; /* Ombra più pesante per index */
}

/* Popup Help (Song) */
#helpOverlay .popup {
    width: 90%;
    max-width: 600px; /* Più compatto */
    padding: 20px;
    box-shadow: 0px 0px 0px #000; /* Ombra stile Watson */
}

/* Sicurezza per lo stato nascosto */
.hidden {
    display: none !important;
}


/* --- popup --- */

.popup {
    background: #000;
    border: 3px solid #000; /* Bordo solido stile Moodio */
    padding: 30px;
    position: relative;      /* Necessario per ancorare la X a destra */
    max-width: 500px;
    width: 90%;
    margin: auto;
    box-shadow: none !important; /* VIA LE OMBRE COME RICHIESTO */
    border-radius: 0;       /* Manteniamo il look squadrato tecnico */
}

/* --- CALIBRAZIONE "X" DI CHIUSURA (Sempre a Destra) --- */

.close-popup {
    position: absolute;
    top: 10px;    /* Distanza dal bordo superiore */
    right: 15px;  /* BLOCCATA A DESTRA PER TUTTE */
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease;
}

.close-popup:hover {
    transform: scale(1.2); /* Piccolo feedback visivo senza "tamarrate" */
}

/* --- MODULO AGGIUNTIVO: SOLO PER LA PAGINA SONG --- */
/* Questa classe serve solo a fare spazio ai bottoni "Copia/Cancella" */
.padding-regia {
    padding-right: 95px !important; /* Spazio per i bottoni */

}

.tag-section-label {
    grid-column: 1 / -1; /* Questo dice: "Occupami tutte e 6 le colonne" */
    display: flex;
    align-items: center;
    width: 100%;
    margin: 15px 0 5px 0;
    color: #888;
    font-size: 11px;
    font-weight: 900;
}

.tag-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #000;
    margin-left: 10px;
}
.riga-unica {
    grid-column: 1 / -1; /* Occupa tutto lo spazio da sinistra a destra */
    text-align: left;
    font-weight: normal;
	  font-size: 12px;
    color: #888;
    margin: 15px 0 5px 0;
    display: flex;
    align-items: center;
}

/* Se vuoi la linea dopo il testo */
.riga-unica::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #000;
    margin-left: 10px;
}

/* Attiva posizione relativa sul bottone */
.struct-btn {
  position: relative;
  cursor: pointer;
}

/* Tooltip box */
.struct-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(5px);

  background: #c3ced3;
  color: #000;
  padding: 12px 16px;
  width: 240px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: 0s; /* nessun ritardo in uscita */
  z-index: 1000;
}

.struct-btn::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: #1e1e1e transparent transparent transparent;

  opacity: 0;
  transition: opacity 0.2s ease;
  transition-delay: 0s;
  z-index: 1000;
}

/* Ritardo SOLO quando appare */
.struct-btn[data-tooltip]:not([data-tooltip=""]):hover::after,
.struct-btn[data-tooltip]:not([data-tooltip=""]):hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 2s; /* ⏳ Ritardo di 2 secondi */
}