body {
    background-color: #121212;
    color: #ffffff;
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
h2 { 
    text-align: center; 
    margin-top: 30px;
}

form {
    background: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 40px;
    border: 1px solid #2a2a2a;
}
input[type="text"], textarea, input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0 2px 0; 
    background: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
}
.char-counter {
    font-size: 0.8em;
    color: #aaa;
    text-align: right;
    margin-bottom: 15px;
    display: block;
}
button {
    background: #ff3333;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
button:hover { background: #cc0000; }

body.site-modal-open {
    overflow: hidden;
}

.site-modal[hidden] {
    display: none !important;
}

.site-modal {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 18px;
    background: rgba(5, 5, 5, 0.88);
    backdrop-filter: blur(8px);
}

.site-modal-card {
    position: relative;
    width: min(500px, 100%);
    max-height: calc(100vh - 36px);
    box-sizing: border-box;
    overflow-y: auto;
    margin: 0;
    padding: 26px;
    color: #e8e8e8;
    background: linear-gradient(145deg, #202020, #151515 72%);
    border: 1px solid #4b4427;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72), 0 1px 0 rgba(255, 204, 0, 0.12) inset;
}

.site-modal-kicker {
    display: block;
    margin-bottom: 6px;
    color: #ffcc00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.site-modal-card h2 {
    margin: 0 0 14px;
    text-align: left;
    font-size: 24px;
}

.site-modal-card p {
    margin: 0 0 12px;
    color: #bcbcbc;
    font-size: 14px;
    line-height: 1.55;
}

.content-rules {
    margin: 18px 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid #333;
    border-radius: 9px;
}

.content-rules strong {
    color: #f1f1f1;
    font-size: 13px;
}

.content-rules ul {
    margin: 9px 0 0;
    padding-left: 18px;
    color: #aaa;
    font-size: 12px;
    line-height: 1.55;
}

.site-modal-primary,
.site-modal-secondary {
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 7px;
}

.site-modal-primary {
    color: #151515;
    background: #ffcc00;
}

.site-modal-primary:hover {
    background: #e8b900;
}

.site-modal-primary:disabled {
    cursor: wait;
    opacity: 0.65;
}

.site-modal-secondary {
    color: #ccc;
    background: #303030;
}

.site-modal-secondary:hover {
    background: #3a3a3a;
}

.site-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #aaa;
    background: transparent;
    font-size: 25px;
    line-height: 1;
}

.site-modal-close:hover {
    color: #fff;
    background: #333;
}

.content-notice-card > .site-modal-primary {
    width: 100%;
}

.report-field {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    color: #ddd;
    font-size: 12px;
    font-weight: 700;
}

.report-field small {
    color: #777;
    font-weight: 400;
}

.report-field select,
.report-field textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    color: #fff;
    background: #272727;
    border: 1px solid #444;
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
}

.report-field textarea {
    min-height: 84px;
    resize: vertical;
}

.report-field select:focus,
.report-field textarea:focus {
    outline: 2px solid rgba(255, 204, 0, 0.45);
    border-color: #a48616;
}

.report-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

#report-content-status {
    flex: 1 1 180px;
    color: #ff9e9e;
    font-size: 12px;
}

.report-sent #report-content-status {
    color: #7ee296;
}

.site-moderation-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 28px 0 10px;
    color: #666;
    font-size: 11px;
    text-align: center;
}

.site-moderation-footer button {
    padding: 0;
    color: #9a9a9a;
    background: transparent;
    border: 0;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-moderation-footer button:hover {
    color: #ffcc00;
    background: transparent;
}

#feedContainer {
    margin-top: 20px;
}

.post {
    background: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #2a2a2a;
}
.author {
    color: #ff4d4d; 
    font-weight: bold;
}

button.feed-user-filter-trigger {
    width: auto;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: left;
    vertical-align: baseline;
}

button.feed-user-filter-trigger:hover {
    color: inherit;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

button.feed-user-filter-trigger:focus-visible {
    outline: 2px solid #ffcc00;
    outline-offset: 3px;
}

.author.feed-user-filter-trigger {
    color: #ff4d4d;
    cursor: pointer;
    font-weight: bold;
}

.post-reply-author.feed-user-filter-trigger {
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
}

.feed-user-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 20px 0 14px;
    padding: 13px 15px;
    background: linear-gradient(135deg, #211f17, #181818 68%);
    border: 1px solid #5d5122;
    border-radius: 9px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    scroll-margin-top: 86px;
}

.feed-user-filter[hidden] {
    display: none !important;
}

.feed-user-filter-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.feed-user-filter-copy > span {
    color: #8e8255;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.feed-user-filter-copy > strong {
    overflow: hidden;
    color: #ffcc00;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-user-filter-copy > small {
    color: #8d8d8d;
    font-size: 11px;
}

#feed-user-filter-close {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: #d0d0d0;
    background: #252525;
    border: 1px solid #484848;
    font-size: 11px;
}

#feed-user-filter-close:hover {
    color: #fff;
    background: #333;
    border-color: #777;
}

/* Barra di pubblicazione disponibile durante la lettura del feed. */
.main-post-form-placeholder {
    height: 0;
}

#mainPostForm.main-post-form-fixed {
    position: fixed !important;
    z-index: 1200;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(600px, calc(100vw - 24px));
    min-height: 58px;
    box-sizing: border-box;
    margin: 0;
    padding: 8px;
    color: #fff;
    background: rgba(24, 24, 24, 0.97);
    border: 1px solid #484848;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 204, 0, 0.18) inset;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
}

#mainPostForm.main-post-form-fixed .user-header-row,
#mainPostForm.main-post-form-fixed .logged-user-box,
#mainPostForm.main-post-form-fixed .settings-modal-overlay,
#mainPostForm.main-post-form-fixed > label,
#mainPostForm.main-post-form-fixed > br,
#mainPostForm.main-post-form-fixed .char-counter,
#mainPostForm.main-post-form-fixed .testo-file-personalizzato {
    display: none !important;
}

#mainPostForm.main-post-form-fixed #mainPostNameInput {
    flex: 0 0 132px;
    width: 132px !important;
    height: 42px;
    min-width: 0;
    margin: 0 !important;
    padding: 8px !important;
}

#mainPostForm.main-post-form-fixed .main-post-message-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

#mainPostForm.main-post-form-fixed #message {
    display: block;
    width: 100% !important;
    height: 42px;
    min-height: 42px;
    max-height: 96px;
    margin: 0 !important;
    padding: 11px 10px !important;
    overflow-y: hidden;
    line-height: 18px;
    resize: none;
    transition: height 0.18s ease;
}

#mainPostForm.main-post-form-fixed #message:focus {
    height: 72px;
    overflow-y: auto;
}

#mainPostForm.main-post-form-fixed .container-caricamento-foto {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    margin: 0;
}

#mainPostForm.main-post-form-fixed .bottone-stile-rock {
    display: grid;
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    padding: 0;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    font-size: 0;
}

#mainPostForm.main-post-form-fixed .bottone-stile-rock::before {
    content: "🖼️";
    font-size: 18px;
    line-height: 1;
}

#mainPostForm.main-post-form-fixed.main-post-form-has-image .bottone-stile-rock {
    color: #ffcc00;
    border-color: #ffcc00;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.12);
}

#mainPostForm.main-post-form-fixed.main-post-form-has-image .container-caricamento-foto::after {
    position: absolute;
    top: -3px;
    right: -3px;
    display: grid;
    width: 15px;
    height: 15px;
    content: "✓";
    place-items: center;
    color: #171717;
    background: #ffcc00;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 900;
    pointer-events: none;
}

#mainPostForm.main-post-form-fixed .image-selection-preview {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
}

#mainPostForm.main-post-form-fixed .image-selection-preview[hidden] {
    display: none !important;
}

#mainPostForm.main-post-form-fixed .image-selection-preview img,
#mainPostForm.main-post-form-fixed .image-selection-preview .testo-file-personalizzato {
    display: none !important;
}

#mainPostForm.main-post-form-fixed .remove-selected-image {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 21px;
    height: 21px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    background: #c92d2d;
    border: 2px solid #181818;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}

#mainPostForm.main-post-form-fixed .remove-selected-image::before {
    position: absolute;
    inset: 0;
    display: grid;
    content: "×";
    place-items: center;
    color: #fff;
    font-size: 15px;
    line-height: 1;
}

#mainPostForm.main-post-form-fixed .main-post-submit-wrapper {
    flex: 0 0 auto;
    width: auto !important;
}

#mainPostForm.main-post-form-fixed .main-post-submit-wrapper button[type="submit"] {
    min-width: 62px;
    height: 42px;
    padding: 8px 13px;
    border-radius: 7px;
}

#mainPostForm.main-post-form-fixed ~ #feedContainer .post {
    scroll-margin-top: 90px;
}

@media (max-width: 600px) {
    #mainPostForm.main-post-form-fixed {
        width: calc(100vw - 12px);
        gap: 6px;
        padding: 6px;
        border-radius: 0 0 9px 9px;
    }

    #mainPostForm.main-post-form-fixed #mainPostNameInput {
        flex-basis: 88px;
        width: 88px !important;
        font-size: 11px !important;
    }

    #mainPostForm.main-post-form-fixed .container-caricamento-foto,
    #mainPostForm.main-post-form-fixed .bottone-stile-rock {
        flex-basis: 38px;
        width: 38px;
        height: 42px;
    }

    #mainPostForm.main-post-form-fixed .main-post-submit-wrapper button[type="submit"] {
        min-width: 52px;
        padding-right: 9px;
        padding-left: 9px;
        font-size: 12px;
    }
}
.post-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.post-author-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.date {
    display: block;
    margin-left: 0;
    color: #777;
    font-size: 0.72em;
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: 0.15px;
}
.message {
    margin-top: 10px;
    word-wrap: break-word;
    line-height: 1.4;
    margin-bottom: 15px;
}

.post-actions {
    display: flex;
    gap: 15px;
    border-top: 1px solid #2a2a2a;
    padding-top: 10px;
}
.action-btn {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 0.9em;
    padding: 5px 8px;
    border-radius: 4px;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 5px;
}
.action-btn:hover {
    background: #2a2a2a;
    color: #fff;
}
.action-btn.btn-like:hover { color: #4da6ff; }
.action-btn.btn-dislike:hover { color: #ff4d4d; }

.post-owner-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.post.post-pinned {
    border-color: #ffcc00;
    box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.35);
}

.post-pinned-badge {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 7px;
    color: #111;
    background: #ffcc00;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    vertical-align: middle;
}

.post-pin-action { color: #ffcc00; }

.post-report-action,
.reply-report {
    color: #8d8d8d;
}

.post-report-action:hover,
.reply-report:hover {
    color: #ffcc00;
}

.post-edit-action {
    color: #ffcc00;
}

.post-delete-action {
    color: #ff4d4d;
}

#loading {
    text-align: center;
    color: #888;
    padding: 20px;
    font-weight: bold;
    display: none;
}

/* NUOVO: Animazione CSS di Fade-In per i messaggi caricati real-time */
.new-post-fade {
    animation: fadeInPost 1.2s ease-out forwards;
}

@keyframes fadeInPost {
    0% {
        opacity: 0;
        transform: translateY(-10px);
        background-color: #2c1a1a; /* Leggera sfumatura rossa temporanea per evidenziare la novità */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        background-color: #1e1e1e;
    }
}

  .contenitore-immagini {
    display: flex;
    gap: 20px;
    justify-content: center;
  }

  .contenitore-immagini img {
    max-width: 100%; 
    height: auto; 
    width: 48px; 
  }

  /* --- STILE CONTATORI STATISTICHE (ORIZZONTALE E CENTRATO) --- */
.stats-counter-container {
    display: flex;
    flex-direction: row;       /* Forza la disposizione in orizzontale */
    justify-content: center;   /* Centra i blocchi orizzontalmente */
    align-items: center;       /* Allinea verticalmente il contenuto */
    gap: 15px;                 /* Spazio tra i tre contatori */
    max-width: 450px;          /* Larghezza massima totale del blocco contatori */
    margin: 25px auto;         /* Centra l'intero contenitore nella pagina e dà spazio sopra/sotto */
    padding: 0 10px;
    box-sizing: border-box;
}

.stat-box {
    flex: 1;                   /* Rende i tre blocchi larghi esattamente uguali */
    min-width: 60px;           /* Evita che si stringano troppo */
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px 5px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-box:hover {
    transform: translateY(-2px);
    border-color: #555;
}

.stat-icon {
    display: block;
    font-size: 20px;
    margin-bottom: 3px;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    font-family: monospace; /* Font in stile codice/contatore numerico */
}

.stat-label {
    display: block;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Ottimizzazione reattiva per schermi molto piccoli (smartphone) */
@media (max-width: 400px) {
    .stats-counter-container {
        gap: 8px;
    }
    .stat-box {
        padding: 8px 2px;
    }
    .stat-value {
        font-size: 15px;
    }
    .stat-label {
        font-size: 9px;
    }
}

/* --- ACCENTI GRAFICI ACCOUNT REGISTRATI --- */

.utente-registrato {
    /* Mantiene il font-weight del tuo foglio stile originale */
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    
    /* Applica un leggero effetto di luce riflessa rossa/oro sulla corona e sul nome */
    text-shadow: 0 0 6px rgba(255, 0, 0, 0.4); 
}

.badge-blue-verified {
    background: #1d9bf0; 
    color: #ffffff; 
    font-size: 11px; 
    font-weight: bold;
    font-family: sans-serif;
    width: 13px;
    height: 13px;
    border-radius: 50%; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 4px;
    margin-bottom: 3px;
    box-shadow: 0 0 4px rgba(29, 155, 240, 0.4);
}

/* --- GUSCIO ESTERNO PER IL CENTRAGGIO --- */

.widget-wrapper {
    width: 100%;
    display: flex;
    justify-content: center; 
    align-items: center;
    box-sizing: border-box;
    /* Riduciamo il padding laterale da 15px a 5px solo per dare al video 
       quei 20px in più di larghezza totale che potrebbero sbloccare l'icona su mobile */
    padding: 0 5px;         
}

/* --- WIDGET VIDEO FISSO --- */
.widget-video-fisso {
    width: 100%;
    /* Lo impostiamo bello grande per i PC/Tablet */
    max-width: 680px;        
    aspect-ratio: 16 / 9;    
    
    /* Forziamo una larghezza minima sui telefoni. Se lo schermo è stretto, 
       impediamo al video di rimpicciolirsi sotto i 360px, che è la dimensione critica 
       sotto la quale YouTube taglia l'altoparlante in verticale */
    min-width: 360px; 

    overflow: hidden; 
    border-radius: 12px;
    
    background: #000;          
    border: 1px solid #222;    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); 
    margin: 20px 0;          
}

.widget-video-fisso iframe {
    width: 100%;              
    height: 100%;
    border: 0;
    border-radius: 12px; 
}

/* Twitch richiede un player visibile alto almeno 300px per consentire l'autoplay. */
.widget-video-fisso.widget-twitch-active {
    min-height: 0;
    aspect-ratio: auto;
    overflow: visible;
}

.twitch-player-host,
.twitch-player-host iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 300px;
    border: 0;
    border-radius: 12px;
}

.twitch-player-host iframe { display: block; height: 100%; }

.twitch-play-fallback {
    display: block;
    width: 100%;
    margin: 7px 0 0;
    padding: 9px 12px;
    border: 1px solid #9147ff;
    border-radius: 8px;
    background: #18181b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.twitch-play-fallback:hover { background: #9147ff; }
.twitch-play-fallback[hidden] { display: none !important; }

@media (max-width: 480px) {
    .widget-video-fisso.widget-twitch-active {
        width: 100%;
        min-width: 0;
    }

    .twitch-player-host,
    .twitch-player-host iframe {
        min-height: 0;
    }
}
.tag-catarro {
    color: #28a745 !important; 
    font-weight: bold;
    background: rgba(68, 102, 0, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
}

button.tag-catarro {
    display: inline;
    cursor: pointer;
}

button.tag-catarro:hover {
    color: #68d780 !important;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .feed-user-filter {
        align-items: flex-end;
        gap: 10px;
        padding: 11px 12px;
    }

    .feed-user-filter-copy > small {
        max-width: 210px;
        line-height: 1.3;
    }

    #feed-user-filter-close {
        max-width: 105px;
        padding: 7px 8px;
        line-height: 1.2;
    }
}
/* Elemento del suggerimento */
.suggestion-item {
    padding: 6px 10px;
    color: #ccc;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #222;
}
.suggestion-item:hover, .suggestion-item.active {
    background: #ffcc00;
    color: #000;
    font-weight: bold;
}
.notifica-item {
    padding: 6px;
    border-bottom: 1px solid #222;
    cursor: pointer;
    font-size: 12px;
    color: #aaa;
    transition: background 0.2s;
}
.notifica-item:hover {
    background: #1a1a1a;
    color: #ffcc00;
}
/* Effetto lampeggiante per focus messaggio */
@keyframes flashPost {
    0% { background: #ffcc00; }
    100% { background: transparent; }
}
.flash-highlight {
    animation: flashPost 2s ease forwards;
}

/* Focus di destinazione per menzioni, risposte e link condivisi. */
@keyframes destinationFocusArrival {
    0%, 18% {
        outline-color: rgba(255, 204, 0, 0.95);
        box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.28), 0 0 24px rgba(255, 204, 0, 0.18);
    }
    100% {
        outline-color: transparent;
        box-shadow: 0 0 0 2px transparent, 0 0 0 transparent;
    }
}

@keyframes destinationLabelArrival {
    0%, 68% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-3px); }
}

.destination-focus {
    position: relative;
    z-index: 2;
    outline: 2px solid transparent;
    outline-offset: 2px;
    animation: destinationFocusArrival 2.6s ease-out forwards;
}

.destination-focus-label {
    position: absolute;
    z-index: 4;
    top: 9px;
    right: 11px;
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    box-sizing: border-box;
    padding: 3px 8px;
    color: #171717;
    background: #ffcc00;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.65px;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
    animation: destinationLabelArrival 2.6s ease-out forwards;
}

.post-reply.destination-focus .destination-focus-label {
    top: 6px;
    right: 7px;
}

.destination-mention-focus {
    color: #181818 !important;
    background: #ffcc00;
    border-radius: 3px;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .destination-focus {
        outline-color: rgba(255, 204, 0, 0.95);
        box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.28);
        animation: none;
    }

    .destination-focus-label {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

.news-ticker-container {
        width: 100%;
        max-width: 600px;
        margin: 15px auto 25px auto;
        background: #1a0d0d;
        border-top: 1px dashed #ffcc00;
        border-bottom: 1px dashed #ffcc00;
        padding: 8px 0;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 4px;
    }

    /* 🛠️ FIX RACCORDO: inline-flex assicura che la larghezza calcolata dal browser sia matematica */
    .news-ticker-track {
        display: inline-flex;
        white-space: nowrap;
        animation: scrollNews 30s linear infinite;
    }

    /* Stile dei singoli annunci */
    .news-ticker-track span {
        font-family: 'Courier New', Courier, monospace;
        font-size: 13px;
        font-weight: bold;
        color: #aaa;
        padding: 0 40px; /* Distanza tra le frasi */
        display: inline-block;
    }

    /* 🛠️ ANIMAZIONE FLUIDA: Usando il 3D il browser delega il lavoro alla scheda video eliminando i micro-scatti */
    @keyframes scrollNews {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(-50%, 0, 0);
        }
    }

    /* Mette in pausa l'animazione al passaggio del mouse */
    .news-ticker-container:hover .news-ticker-track {
        animation-play-state: paused;
    }

    /* Uniforma lo stile dei campi di input e textarea */
#mainPostNameInput, 
#message {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #aaa !important;
    background: #222 !important; /* Colore scuro di sfondo per entrambi */
    border: 1px solid #444 !important; /* Bordo uniforme */
    border-radius: 4px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Rende identici i suggerimenti (placeholder) per tutti i browser */
#mainPostNameInput::placeholder,
#message::placeholder {
    font-family: 'Courier New', Courier, monospace !important;
    color: #666 !important; /* Colore grigio scuro del suggerimento */
    font-weight: bold !important;
    opacity: 1 !important;
}

/* Rimuove l'effetto azzurro/giallo di Chrome quando si clicca sui campi */
#mainPostNameInput:focus, 
#message:focus {
    outline: none !important;
    border-color: #ffcc00 !important; /* Bagliore oro quando attivo */
    box-shadow: 0 0 5px rgba(255, 210, 0, 0.2) !important;
}

/* Stile per i link inseriti dagli utenti nella chat */
.chat-link {
    color: #ffcc00 !important; /* Colore oro coerente con il tuo tema */
    text-decoration: none;
    font-weight: bold;
    word-break: break-all; /* Evita che i link lunghissimi sballino la grafica del post */
}

.chat-link:hover {
    text-decoration: underline;
    color: #fff !important; /* Diventa bianco quando ci passi sopra */
}

/* Stile per il pulsante quando è in stato di caricamento */
.btn-submit-loading {
    position: relative;
    color: transparent !important; /* Nasconde il testo originale (es. "Invia") */
    pointer-events: none; /* Impedisce click multipli */
    opacity: 0.8;
}

/* Crea la rotella animata dentro il pulsante */
.btn-submit-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid transparent;
    border-top-color: #ffffff; /* Colore della rotella (puoi cambiarlo) */
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

/* Animazione di rotazione */
@keyframes button-loading-spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.post-image-attached {
    max-width: 100%;
    max-height: 60vh; 
    object-fit: contain; 
    border-radius: 4px;
    margin: 0;
    

}

.post-image-attached img{
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

/* ====================================================================
   📦 STILI DELL'AREA UTENTE (INPUT / BLOCCO LOGGED / MENZIONI)
   ==================================================================== */

/* Contenitore superiore per Label Name e Bottone Menzioni */
.user-header-row {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 5px;
}

.user-header-label {
    margin: 0;
}

/* Wrapper del sistema di notifiche/menzioni */
.notifiche-container-wrapper {
    position: relative;
}

/* Pulsante delle Menzioni */
.btn-menzioni-trigger {
    background: #1a0d0d; 
    border: 1px solid #444; 
    color: #aaa; 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-size: 12px; 
    cursor: pointer; 
    font-weight: bold;
}

/* Badge numerico rosso dei tag */
.notifiche-badge-count {
    background: #ff4d4d; 
    color: #fff; 
    padding: 1px 5px; 
    border-radius: 10px; 
    font-size: 10px; 
    display: none; 
    font-family: monospace;
}

/* Menu a tendina delle Menzioni */
.notifiche-dropdown-menu {
    display: none; 
    position: absolute; 
    right: 0; 
    top: 28px; 
    background: #111; 
    border: 1px solid #ffcc00; 
    width: 260px; 
    border-radius: 4px; 
    max-height: 200px; 
    overflow-y: auto; 
    z-index: 1000; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.8); 
    padding: 5px;
}

.notifiche-dropdown-title {
    font-size: 11px; 
    color: #666; 
    padding: 4px; 
    border-bottom: 1px solid #222; 
    text-align: center;
}

/* 🟢 Il Box Verde che mostra l'utente loggato */
.logged-user-box {
    background: #1c2e21; 
    border: 1px solid #28a745; 
    padding: 10px; 
    border-radius: 4px; 
    color: #88ff88; 
    font-weight: bold; 
    margin-bottom: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 14px;
}

.logged-user-left {
    display: flex; 
    align-items: center; 
    gap: 8px;
}

/* Tasto rosso "Disconnetti" */
.btn-logout-action {
    color: #ff4d4d; 
    font-size: 12px; 
    text-decoration: none; 
    font-weight: bold; 
    background: #1e1e1e; 
    padding: 4px 8px; 
    border-radius: 3px; 
    border: 1px solid #444;
    transition: background 0.2s;
}
.btn-logout-action:hover {
    background: #2a2a2a;
}


/* ====================================================================
   ⚙️ STILI DEL POPUP MODALE (IMPOSTAZIONI)
   ==================================================================== */

/* Icona della rotella impostazioni */
.settings-gear-icon {
    cursor: pointer;
    color: #aaa;
    font-size: 16px;
    transition: color 0.2s, transform 0.3s ease;
    display: inline-block;
}
.settings-gear-icon:hover {
    color: #ffcc00;
    transform: rotate(45deg);
}

/* Sfondo scuro del Popup */
.settings-modal-overlay {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.85); 
    z-index: 99999; 
    justify-content: center; 
    align-items: center; 
    padding: 15px;
}

/* Contenitore centrale del Popup */
.settings-modal-box {
    background: #141414; 
    border: 1px solid #333; 
    width: 90%;
    max-width: 300px; 
    padding: 25px; 
    border-radius: 8px; 
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.9); 
    font-family: sans-serif; 
    color: #fff;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    box-sizing: border-box;
}

.settings-modal-title {
    margin-top: 0; 
    color: #ffcc00; 
    font-size: 18px; 
    border-bottom: 1px solid #222; 
    padding-bottom: 10px;
}

/* Sezioni interne delle opzioni */
.settings-option-section {
    margin: 20px 0; 
    border-bottom: 1px solid #222; 
    padding-bottom: 15px;
}
.settings-option-section.no-border {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
}

.settings-option-title {
    margin: 0 0 5px 0; 
    font-size: 14px; 
    color: #eee;
}
.settings-option-title.danger {
    color: #ff4d4d;
}

.settings-option-desc {
    margin: 0 0 12px 0; 
    font-size: 12px; 
    color: #777; 
    font-weight: normal; 
    line-height: 1.4;
}

/* Pulsanti interni */
.btn-settings-action {
    background: #222; 
    color: #ffb300; 
    border: 1px solid #ffcc00; 
    padding: 7px 12px; 
    font-weight: bold; 
    font-size: 12px; 
    border-radius: 4px; 
    cursor: pointer; 
    width: 100%;
    transition: background 0.2s;
}
.btn-settings-action:hover {
    background: #2e2611;
}

.btn-settings-action.danger {
    background: #2b1111; 
    color: #ff4d4d; 
    border: 1px solid #dc3545;
}
.btn-settings-action.danger:hover {
    background: #421919;
}

/* Tasto di chiusura (X) */
.settings-modal-close {
    position: absolute; 
    top: 12px; 
    right: 12px; 
    background: none; 
    border: none; 
    color: #555; 
    font-size: 18px; 
    cursor: pointer; 
    font-weight: bold;
    transition: color 0.2s;
}
.settings-modal-close:hover {
    color: #fff;
}

/*logo*/

#logo{

    filter: drop-shadow(0 0 0.75rem crimson);
}

.img-responsive {
    width: 100%;
    height: auto;
    display: block; 
    max-width: 600px; 
    margin: 20px auto 0 auto; 
}

/*caricamento immagine*/

.container-caricamento-foto {
    margin: 20px 0;
    text-align: center;
}

/* Il bottone ora è decisamente più pulito e minimale */
.bottone-stile-rock {
    display: inline-block;
    background-color: #1c1c1c;         /* Grigio molto scuro, meno pesante del nero piatto */
    color: #bbb;                       /* Testo grigio chiaro, più sobrio del bianco sparato */
    border: 1px solid #444;            /* Bordo sottile e scuro che si nota appena */
    padding: 10px 20px;                /* Dimensioni leggermente ridotte */
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;         /* Transizione più rapida e netta */
}

/* Cambiamento di colore soft, senza nessun bagliore o stravolgimento */
.bottone-stile-rock:hover {
    background-color: #252525;         /* Lo sfondo si schiarisce appena */
    color: #ffcc00;                    /* Il giallo del sito spunta solo come accenno sul testo */
    border-color: #ffcc00;             /* Anche il bordo si colora di giallo in modo pulito */
}

/* Il testo del file scelto sotto rimane coordinato */
.testo-file-personalizzato {
    display: block;
    margin-top: 10px;
    color: #ffcc00; 
    font-size: 13px;
    font-family: monospace;
    word-break: break-all;
}

.image-selection-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 430px;
    margin: 12px auto 0;
    padding: 10px;
    text-align: left;
    background: #171717;
    border: 1px solid #3d3d3d;
    border-radius: 8px;
}

.image-selection-preview[hidden] {
    display: none !important;
}

.image-selection-preview > img {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    object-fit: cover;
    background: #0d0d0d;
    border-radius: 6px;
}

.image-selection-details {
    min-width: 0;
}

.image-selection-details .testo-file-personalizzato {
    margin: 0 0 8px;
}

.remove-selected-image,
.edit-image-remove {
    padding: 6px 10px;
    color: #ff9c9c;
    background: transparent;
    border: 1px solid #703838;
    font-size: 12px;
}

.remove-selected-image:hover,
.edit-image-remove:hover {
    color: #fff;
    background: #7d2424;
}

.edit-image-panel {
    margin-top: 12px;
    padding: 10px;
    background: #171717;
    border: 1px solid #3d3d3d;
    border-radius: 7px;
}

.edit-image-panel .edit-image-current {
    transition: opacity 0.18s ease, filter 0.18s ease;
}

.edit-image-panel .post-image-attached {
    margin-top: 0 !important;
    max-height: 220px;
}

.edit-image-panel .post-image-attached img {
    max-height: 220px;
    object-fit: contain;
}

.edit-image-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
}

.edit-image-removal-status {
    display: none;
    color: #ff9c9c;
    font-size: 12px;
}

.edit-image-panel.is-marked-for-removal .edit-image-current {
    opacity: 0.28;
    filter: grayscale(1);
}

.edit-image-panel.is-marked-for-removal .edit-image-removal-status {
    display: inline;
}

/* torna su */


/* 1. STATO INIZIALE (Grigio) */
.scroll-top-btn {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 40px;
    height: 40px;
    background-color: #1c1c1c;
    color: #bbb;
    border: 1px solid #444;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    z-index: 9999;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    outline: none;
    transition: opacity 0.3s ease, 
                visibility 0.3s ease, 
                background-color 0s 0.4s, 
                color 0s 0.4s, 
                border-color 0s 0.4s;
}

.scroll-top-btn.visibile {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
    .scroll-top-btn:hover {
        background-color: #252525;
        color: #ffcc00;
        border-color: #ffcc00;
        transition: background-color 0s, color 0s, border-color 0s;
    }
}
.scroll-top-btn:active {
    background-color: #252525;
    color: #ffcc00;
    border-color: #ffcc00;
    transition: background-color 0s, color 0s, border-color 0s;
}

img.js-image-viewer {
    cursor: zoom-in;
}

img.js-image-viewer:focus-visible {
    outline: 2px solid #ffcc00;
    outline-offset: 3px;
}

body.image-viewer-open {
    overflow: hidden !important;
}

.image-viewer[hidden] {
    display: none;
}

.image-viewer {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.94);
    overscroll-behavior: contain;
}

.image-viewer-toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    padding: 8px 14px;
    box-sizing: border-box;
    background: rgba(18, 18, 18, 0.96);
    border-bottom: 1px solid #333;
}

.image-viewer-toolbar button {
    min-width: 42px;
    min-height: 42px;
    padding: 6px 12px;
    color: #fff;
    background: #292929;
    border: 1px solid #444;
    border-radius: 6px;
    font-size: 22px;
    line-height: 1;
}

.image-viewer-toolbar button:hover,
.image-viewer-toolbar button:focus-visible {
    color: #000;
    background: #ffcc00;
    outline: none;
}

#image-viewer-zoom-level {
    min-width: 52px;
    color: #ddd;
    font: bold 12px monospace;
    text-align: center;
}

.image-viewer-close {
    margin-left: 10px;
    color: #ff7777 !important;
}

.image-viewer-viewport {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 18px;
    box-sizing: border-box;
    touch-action: none;
}

#image-viewer-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center;
    transition: transform 0.12s ease-out;
    cursor: zoom-in;
    touch-action: none;
}

#image-viewer-image.is-zoomed {
    cursor: grab;
}

#image-viewer-image.is-zoomed:active {
    cursor: grabbing;
    transition: none;
}

@media (max-width: 600px) {
    .image-viewer-toolbar {
        gap: 5px;
        min-height: 54px;
        padding: 6px 8px;
    }

    .image-viewer-toolbar button {
        min-width: 38px;
        min-height: 38px;
        padding: 5px 9px;
        font-size: 20px;
    }

    .image-viewer-close {
        margin-left: 2px;
    }

    .image-viewer-viewport {
        padding: 8px;
    }
}

/* Risposte ai post */
.btn-reply {
    margin-left: 4px;
    color: #9fc7ff;
}

.reply-count {
    min-width: 14px;
    text-align: center;
}

.post-replies {
    display: none;
    margin: 8px 0 0 22px;
    padding-left: 12px;
    border-left: 2px solid #343434;
}

.post-replies.has-replies,
.post-replies.reply-open {
    display: block;
}

.post-reply {
    padding: 8px 10px;
    margin-top: 7px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid #303030;
    border-radius: 5px;
}

.post-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.post-reply-author {
    font-size: 11px;
    font-weight: bold;
}

.post-reply-date {
    color: #666;
    font-size: 10px;
    white-space: nowrap;
}

.post-reply-controls {
    display: inline-flex;
    gap: 5px;
    margin-left: auto;
}

.reply-control {
    padding: 1px 3px;
    color: #999;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-size: 11px;
    opacity: 0.7;
}

.reply-control:hover,
.reply-control:focus-visible {
    background: none;
    box-shadow: none;
    outline: none;
    opacity: 1;
}

.reply-edit { color: #ffcc00; }
.reply-delete { color: #ff4d4d; }

.post-reply-message .input-edit-inline,
.admin-inline-edit-textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 5px 0 0;
    padding: 7px;
    color: #fff;
    background: #2a2a2a;
    border: 1px solid #ffcc00;
    border-radius: 4px;
    font: inherit;
    resize: vertical;
}

.inline-edit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.inline-edit-save {
    padding: 2px 8px;
    color: #000;
    background: #ffcc00;
    border-radius: 3px;
    font-weight: bold;
}

.inline-edit-save:hover { background: #e6b800; color: #000; }
.inline-edit-cancel { color: #aaa; }

.post-reply-message {
    color: #ccc;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.reply-form {
    display: block;
    position: relative;
    margin-top: 9px;
}

.reply-form[hidden] {
    display: none;
}

.reply-form textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 7px 9px;
    color: #eee;
    background: #171717;
    border: 1px solid #454545;
    border-radius: 4px;
    font: inherit;
}

.reply-form textarea:focus {
    outline: none;
    border-color: #7ca9e8;
}

.reply-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.reply-status {
    margin-right: auto;
    color: #ff7777;
    font-size: 11px;
}

.reply-cancel,
.reply-submit {
    padding: 5px 9px;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
}

.reply-cancel {
    color: #aaa;
    background: #222;
}

.reply-submit {
    color: #fff;
    background: #24558a;
    border-color: #3471b2;
}

.reply-submit:disabled {
    cursor: wait;
    opacity: 0.6;
}

.post-reply[hidden] {
    display: none;
}

.reply-load-more {
    display: block;
    margin: 7px auto 2px;
    padding: 4px 10px;
    color: #ffcc00;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.reply-load-more:hover,
.reply-load-more:focus-visible {
    text-decoration: underline;
    outline: none;
}

.post-share {
    position: relative;
}

.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.post-share-menu {
    position: absolute;
    z-index: 40;
    left: 0;
    bottom: calc(100% + 7px);
    width: 175px;
    padding: 5px;
    background: #171717;
    border: 1px solid #555;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

.post-share-menu[hidden] {
    display: none;
}

.post-share-menu button {
    display: block;
    width: 100%;
    padding: 7px 9px;
    color: #eee;
    background: transparent;
    border: 0;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
}

.post-share-menu button:hover,
.post-share-menu button:focus-visible {
    color: #111;
    background: #ffcc00;
    outline: none;
}

@media (max-width: 600px) {
    .site-modal {
        align-items: end;
        padding: 10px;
    }

    .site-modal-card {
        max-height: calc(100vh - 20px);
        padding: 22px 18px 18px;
        border-radius: 14px 14px 8px 8px;
    }

    .site-modal-card h2 {
        font-size: 21px;
    }

    .report-field select,
    .report-field textarea {
        font-size: 16px;
    }

    .report-modal-actions > button {
        flex: 1 1 calc(50% - 5px);
    }

    #report-content-status {
        flex-basis: 100%;
        order: -1;
    }

    .post-report-action span:last-child {
        display: none;
    }

    .post-replies {
        margin-left: 8px;
        padding-left: 8px;
    }

    .post-reply-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .btn-share span {
        display: none;
    }

    .post-actions {
        width: 100%;
        box-sizing: border-box;
        gap: 9px;
    }

    .post-actions .action-btn {
        min-width: 0;
        padding: 5px 6px;
        gap: 5px;
        white-space: nowrap;
    }

    .post-owner-controls {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        flex: 0 0 auto;
        gap: 10px;
        margin-left: auto;
    }

    .post-owner-controls .action-btn {
        flex: 0 0 auto;
    }
}