body {
            margin: 0;
            padding: 0;
            width: 98%;
            margin: 0 auto;
            color: #000;
            background-color: azure;
            text-align: center;
            font-family: UbuntuMedium, Arial, Helvetica, sans-serif;
            font-size: 14px;
        }
        
		
	

		/* Header base */
		.header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background: rgba(255, 255, 255, 0.08);
			backdrop-filter: blur(1px);
			-webkit-backdrop-filter: blur(10px);
			z-index: 1000;
			box-shadow: 0 2px 10px rgba(110, 61, 61, 0.12);
			padding: 12px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		/* Titolo */
		.logomain {
			margin: 0;
		}
		.logomain h1 { margin: 0; font-size: 2.3em; }
		.logomain h4 { margin: 4px 0 0 0; font-size: 1.1em; }

		/* Pulsante hamburger */
		.hamburger {
			display: none;                  /* nascosto su desktop */
			width: 36px;
			height: 36px;
			background: transparent;
			border: none;
			cursor: pointer;
			position: relative;
			z-index: 1100;
			/*align-self: center;*/              /* centra verticalmente */
		}

		.hamburger span {
			position: absolute;
			width: 100%;
			height: 4px;
			background: #333;
			border-radius: 2px;
			transition: all 0.3s ease;
			left: 0;
		}
		/*posizione pulsante haburger*/
		.hamburger span:nth-child(1) { top: 25px; }
		.hamburger span:nth-child(2) { top: 35px; }
		.hamburger span:nth-child(3) { top: 45px; }

		/* Quando aperto: diventa X */
		.hamburger.active span:nth-child(1) {
			transform: rotate(45deg);
			top: 35px;
		}
		
		.hamburger.active span:nth-child(2) { opacity: 0; }
		.hamburger.active span:nth-child(3) {
			transform: rotate(-45deg);
			top: 35px;
		}


.hamburger span {
    background-color: #222;           /* colore di default (tema chiaro) */
    transition: background-color 0.4s ease;
}

[data-theme="dark"] .hamburger span {
    background-color: #e0e0e0;        /* colore chiaro in dark mode */
}


		/* Menu */
		.menu-nav {
			display: flex;
			align-items: center;
		}

		.menu {
			display: flex;
			/*gap: 12px 20px;*/
			gap: 2px 2px;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.menu li a.menu-btn {
			/*padding: 8px 16px;*/
			padding: 4px 10px;
			background: #333;
			color: black;
			border-radius: 16px;
			text-decoration: none;
			font-weight: bold;
			transition: background 0.2s;
		}
		


		.menu li a.menu-btn:hover { background: #555; }

		/* === MOBILE: sotto 900px mostriamo hamburger === */
		@media (max-width: 900px) {
			.hamburger {
	
			display: flex;
			margin-left: auto;              /* forza a destra */
			margin-right: 50px;
			margin-top: -50px;                  /* se vuoi più in alto, metti margin-top: -10px */
    
	
				
			}

		.menu-nav {
			position: fixed;
			top: 0;
			right: -150%;             /* nascosto a destra */
			width: 140px;
			height: 100vh;
			background: rgba(255,255,255,0.08);
			backdrop-filter: blur(10px);
			flex-direction: column;
			padding: 80px 40px 20px; /*il secondo numero è la distanza dal lato destro*/
			transition: right 0.35s ease;
			z-index: 599;
		}

		.menu-nav.active {
			right: 0;                 /* scorre dentro da destra */
			}

	

				

		
		 .cb_pager {
			gap: 6px;
			padding: 8px;
			}
				
		.cb_pager .button,
		.cb_pager .current {
			min-width: 34px;
			height: 34px;
			font-size: 0.95rem;
			padding: 0 8px;
			}	
			
				
				
			}
		/* === Fine MOBILE: sotto 900px mostriamo hamburger === */
					
		/*senza questo tagliano ultimop pulsante a destra*/
		/*da non confondere con max-width*/  
		 @media (min-width: 900px) {
        .header li {
			float: left;
			top: 5px;
			}
		 .header .menu {
			clear: none;
			padding-right: 10px;
			float: right;
			/*position: fixed;*/
			max-height: none;
			margin-right: 25px;
			top: 5px 
			}
			 
			}

		.main-content {
		/* Padding-top = altezza reale dell'header (calcolato automaticamente) */
			padding-top: var(--header-height, 40px);
			}






		.header-left {
			display: flex;
			flex-direction: column;
			align-items: flex-start;            /* testo a sinistra */
			}


		
        
		input[type="text"],textarea {
			width: calc(10% + 82px);
			margin: 10px 20px 0px 0px;
			display: block;
			border-radius: 16px;
			padding: 4px 10px;
			font-size: 1em;
			border: 2px solid black;
			white-space: nowrap;
			margin-top: 10px;
			
			}
		
	
		 
		
		.menu {
			display: flex;
			padding-right: 10px;
			flex-wrap: wrap;
			justify-content: flex-end;          /* pulsanti a destra */
			align-items: center;
			gap: 10px 16px;/* spazio tra i pulsanti */
			margin: 0;
			margin-top: 0px;
			list-style: none;
			}




		
		
		

		/* Spazio per evitare che l'header copra il contenuto */
		.main-content {
			margin-top: 50px;  /* ← regola chiave: altezza header + margine extra */
			padding-top: 10px;  /* opzionale: un po' di respiro in più sopra */
			}
		.menu li a.menu-btn {
			display: inline-block;
			/*padding: 10px 20px;*/     /* più spazio interno → pulsanti più grandi e cliccabili */
			padding: 5px 15px;     /* più spazio interno → pulsanti più grandi e cliccabili */
			background-color: #333; /* sfondo scuro di default */
			color: white;
			text-decoration: none;
			border-radius: 18px;     /* angoli arrotondati moderni */
			font-weight: bold;
			font-size: 1.1em;
			transition: all 0.1s ease; /* animazione fluida su hover e active */
			box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* ombra leggera */
			}

		.menu li a.menu-btn:hover {
			background-color: #555; /* hover: più chiaro */
			transform: translateY(-2px); /* leggero sollevamento */
			box-shadow: 0 4px 10px rgba(0,0,0,0.3);
			}

		.menu li a.menu-btn.active {
			background-color: #ff3366; /* rosa acceso per evidenziare la selezione */
			color: white;
			border: 2px solid #ff0066; /* bordo più marcato */
			box-shadow: 0 0 15px rgba(255,51,102,0.5); /* glow leggero */
			transform: scale(1.05); /* leggermente ingrandito */
			pointer-events: none;   /* non cliccabile quando attivo */
			
			}
		
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(290px, 20fr));
			/* Spazio tra le colonne */
			/* per diminuire lo spazio fra le colonne andare su .button0*/ 
			gap: 0px;
            margin: 1px;
			}
		
        
        .video-wrapper {
            position: relative;
			width: 100%;                    /* occupa tutto lo spazio disponibile */
			/*max-width: 900px;*/               /* ← grandezza massima del video – regola tu */
			margin: 0 auto;                 /* centra orizzontalmente */
            /*padding-bottom:  52.25%; */   /* 16:9 */
			/*padding-bottom:  32.25%; */    /* 16:9 */
			aspect-ratio: 16 / 9;
              /* 16:9 */
			
			overflow: hidden;
			background: #000;               /* sfondo nero se l’iframe è più piccolo */
            transition: max-width 0.4s ease; /* animazione fluida quando cambi */
			/*height: 1000px;*/
        	}
       
	   .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
           	width: 100% !important;
			height:100% !important;
            /*max-width: 100%;*/
			border: none;	
			}	
        
         .video-wrapper .next {
			position: absolute;
			top: 3px;
			left: 33%; }
        
		
		.video-wrapper {
			/*	max-width: 900px;*/ /* valore iniziale */
				transition: max-width 0.4s ease; /* animazione fluida quando cambi */
			}
		
		
		
		
		
        .flex {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: stretch;
            background: azure;
            margin-top: 2px;
            border: 5px solid #e3e3e3;
            border-radius: 1px;
            box-shadow: 0 0 0 .5px #797979, inset 0 0 0 .5px #797979;
			}
		
		  ul{
            list-style-type: none;
			}
		 
 		 .flex-item {
			/*width: 33.3%; */
			width: 33.3%; 
			@include breakpoint(medium) {
				width: 100%;
			}
			}
		
		 .cb_pager {
			text-align: center;
			margin: 0em auto; */distanza sopra sotto*/
			padding: 10px 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 3px;               /* spazio tra i pulsanti */
			max-width: 100%;
			}

		 .cb_pager .button,
		 .cb_pager .current {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 12px;        /* dimensione minima quadrata */
			height: 38px;
			padding: 0 12px;
			margin: 4px;
			border: 1px solid #ccc;
			border-radius: 8px;     /* angoli arrotondati moderni */
			background-color: #ffffff;
			color: #333;
			text-decoration: none;
			font-weight: bold;
			font-size: 1rem;
			transition: all 1.2s ease;/* animazione fluida su hover */
			cursor: pointer;
			box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* ombra leggera */
			}

		 .cb_pager .button:hover {
			background-color: #f0f0f0;
			border-color: #aaa;
			transform: translateY(-1px); /* leggero sollevamento */
			box-shadow: 0 3px 6px rgba(0,0,0,0.15);
			}

		 .cb_pager .current {
			background-color: #007bff;  /* blu acceso per la pagina attiva */
			color: white;
			border-color: #0056b3;
			font-weight: bold;
			box-shadow: 0 2px 5px rgba(0,123,255,0.4);
			pointer-events: none;       /* non cliccabile */
			}

		 .cb_pager .prev, .cb_pager .next {
			min-width: 50px;
			background-color: #e9ecef;
			font-size: 1.1rem;
		  }

		 .cb_pager .prev:hover, .cb_pager .next:hover {
			background-color: #dee2e6;
			}

		.cb_pager .dots {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 38px;
			height: 38px;
			color: #666;
			font-weight: bold;
			}

			


		.cb_pager .current {
			background-color: #28a745;  /* verde successo */
			border-color: #1e7e34;
			color: white;
			}

		.cb_pager .button:active {
			transform: translateY(1px);
			box-shadow: 0 1px 2px rgba(0,0,0,0.2);
			}
 
       

	   

		.cuore-favorito {
			position: absolute;
			bottom: 12px;              /* distanza dal basso */
			right: 12px;               /* distanza dal lato destro */
			font-size: 1.8em;          /* dimensione del cuore */
			cursor: pointer;
			z-index: 10;               /* sta sopra l'immagine */
			text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); /* fa risaltare il cuore sull'immagine */
			transition: transform 0.25s ease;
			user-select: none;
		}

		.cuore-favorito:hover {
			transform: scale(1.35);    /* ingrandisce un po' quando passi sopra */
		}
		










		/* ====================== MINIATURE CON ZOOM + TESTO SOPRA ====================== */


.button0 {
      		aspect-ratio: 16 / 9;        /* mantiene le proporzioni */
			background: #000;            /* sfondo nero durante il caricamento */
		    width: 98%;
            margin-bottom: 0px;
            padding-left: 0.5%;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: transparent;
            margin-left: 0.7%;
            cursor: pointer;
            border-radius: 5px;
			border: 0px;
            margin-top: 0px;
			transition: all 0.3s ease;        /* animazione fluida */
			overflow: hidden;
			position: relative;        /* ← IMPORTANTISSIMO per posizionare il cuore dentro */
			
			
			/* ... le tue altre regole esistenti rimangono ... */
			}
			
			
			
			


		.button0 img {
			width: 105% !important;
			height: 105% !important;
			object-fit: cover !important;     /* mantiene l'immagine centrata e proporzionata */
			display: block !important;
			aspect-ratio: 16/9;
			/*top: 600px*/
			/* ← QUI SI REGOLA LA VELOCITÀ */
					transition: transform 0.9s ease;        /* 0.9 secondi = più fluido */
					transform-origin: center center;
			}
				

	
		

		.button0:hover {
		   
			transform: scale(1.04);           /* ingrandisce leggermente */
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85);   /* ombra più forte */
			border: 4px solid #ff3366;        /* bordo colorato */
		}
		
	

		.button0:hover img {
			transform: scale(1.15);       /* lo zoom forte che ti piace */
		}

		/* Overlay scuro che appare al hover */
		.button0::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 40%;
			background: linear-gradient(transparent, rgba(0,0,0,0.75));
			opacity: 0;
			transition: opacity 1.4s ease;
			pointer-events: none;
		}

		.button0:hover::after {
			opacity: 1;
		}


		/* Testo username che appare sopra */
		.button0 .username-text {
			position: absolute;
			bottom: 5px;
			left: 12px;
			right: 12px;
			color: white;
			font-weight: bold;
			text-shadow: 0 2px 8px rgba(0,0,0,0.9);
			opacity: 0;
			transition: all 1.4s ease;
			z-index: 2;
			pointer-events: none;
		}
		.button0:hover .username-text {
			opacity: 1;
			transform: translateY(-4px);
		}





   
		/* ====================== CUORE PRINCIPALE - VISIBILE IN ENTRAMBI I TEMI ====================== */
		.cuore-principale {
			color: #222222;                    /* colore scuro visibile in tema chiaro */
			transition: color 0.3s ease;
		}

		[data-theme="dark"] .cuore-principale {
			color: #e0e0e0;                    /* colore chiaro visibile in dark mode */
		}

		/* Quando è tra i preferiti (cuore pieno) resta rosso in entrambi i temi */
		.cuore-principale[style*="⭐"] {
			color: #ff3366;
		}	   
			
		
		
		@keyframes heartBeat {
			0%   { transform: scale(1); }
			30%  { transform: scale(1.4); }
			100% { transform: scale(1); }
		}

	
		/* Stile per il pulsante Preferiti */
			

			/* Pulsante Preferiti - stato normale, hover e active */
			.menu-btn.preferiti-btn {
				transition: all 0.3s ease;
			}

			.menu-btn.preferiti-btn:hover,
			.menu-btn.preferiti-btn.active {
				background: #ff3366 !important;
				color: white !important;
				transform: scale(1.05);
				box-shadow: 0 4px 12px rgba(255, 51, 102, 0.4);
			}

			/* Opzionale: effetto più morbido quando è attivo */
			.menu-btn.preferiti-btn.active {
				font-weight: bold;
			}


			.menu-btn.preferiti-btn.active {
				animation: pulse 1.5s infinite;
			}

			@keyframes pulse {
				0%, 100% { transform: scale(1); }
				50%      { transform: scale(1.12); }
			}


			/* Su mobile lo rendiamo più compatto */
			@media (max-width: 900px) {
				.preferiti-btn {
					font-size: 0.95em;
					padding: 8px 14px;
				}
			}
		
		.custom-tooltip {
			position: absolute;
			background: rgba(0, 0, 0, 0.88);
			color: white;
			padding: 9px 16px;
			border-radius: 8px;
			font-size: 0.95em;
			white-space: nowrap;
			pointer-events: none;
			z-index: 9999;
			opacity: 0;
			transition: opacity 0.25s ease, transform 0.25s ease;
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
			transform: translateY(10px);
		}

		.custom-tooltip.show {
			opacity: 1;
			transform: translateY(0);
		}

		/* Freccetta che punta al cuore */
		.custom-tooltip::after {
			content: '';
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -6px;
			border-width: 6px;
			border-style: solid;
			border-color: rgba(0, 0, 0, 0.88) transparent transparent transparent;
		}
		


		

	

		/* === POSIZIONAMENTO DELLA TABELLA INFO === */
		
		/* Stile C (compatibile con quello che hai scelto) */
		
		
			.info-table-wrapper {
			width: 100%;
			overflow-x: auto;           /* ← permette lo scroll orizzontale solo se serve */
			-webkit-overflow-scrolling: touch; /* migliore esperienza su iPhone */
			margin: 15px 0;
		}
	
		
		
		.info-table {
			width: 100%;
			max-width: 380px;          /* ← puoi regolare questa larghezza */
			margin: 0 0 0 auto;        /* spinge la tabella a destra */
			font-size: 0.98em;
			background: #ffffff;
		}

		.info-table td {
			padding: 1px 12px;
			border-bottom: 1px solid #e5e5e5;
		}

		.info-table td:first-child {
			width: 125px;
			font-weight: 600;
			color: #444;
		}

		.info-table td:last-child {
			white-space: nowrap;
			font-weight: 500;
		}



		td, th {
		  border: 1px solid #dddddd;
		  text-align: left;
		  padding: 8px;
		}

		@media (max-width: 950px) {
			#div2.flex {
				flex-direction: column;     /* su tablet e smartphone i div vanno uno sotto l'altro */
				gap: 10px;
			}
			
			#div2 .flex-item {
				flex: none;                 /* non si espandono più in larghezza */
				width: 100%;
			}
			
			#div3 {
				text-align: center;         /* la tabella si centra su mobile */
				
			}
			.info-table {
				max-width: 50%;
			  
				margin: 0 auto !important;     /* forza il centraggio */
			}
			
		}

		/* ====================== POSIZIONAMENTO MODALE PREFERITI ====================== */
		
		/* Overlay rimane invariato */
		.modale {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.75);
			align-items: flex-start;   /* importante per il posizionamento sopra */
			justify-content: center;
			z-index: 1999;
		}
		
		
		.modale-contenuto {
			position: fixed;           /* invece di absolute */
			top: 75px;                 /* ← distanza sotto la barra menu (regola questo valore) */
			left: 50%;
			width: 50%;
			transform: translateX(-50%); /* centra orizzontalmente */
			max-height: calc(100vh - 100px);   /* impedisce di essere tagliata in basso */
			overflow-y: auto;          /* scroll interno se serve */
			box-shadow: 0 10px 30px rgba(0,0,0,0.4);
			z-index: 2000;
			border-radius: 12px;
			animation: modalPop 1s ease forwards;
		}

		
		/* Su schermi molto piccoli */
		@media (max-width: 768px) {
			.modale-contenuto {
				top: 70px;                    /* un po' più vicino alla barra menu */
				max-height: calc(100vh - 80px);
				width: 95%;
			}
		}




		/* ====================== MODALE PREFERITI - DARK MODE ====================== */
		/* ====================== MODALE PREFERITI - DARK MODE ====================== */
		[data-theme="dark"] .modale-contenuto {
			background: #3d2eae;           /* il tuo colore blu scuro */
			color: #e0e0e0;
			box-shadow: 0 10px 30px rgba(0,0,0,0.5);
		}

		[data-theme="dark"] .modale-header {
			background: #2a1f7a;           /* un tono leggermente più scuro per l'header */
			color: #e0e0e0;
			border-bottom: 1px solid #4a3ab8;
		}

		[data-theme="dark"] .modale-contenuto h2 {
			color: #e0e0e0;
		}

		/* Testo e miniature dentro la modale */
		[data-theme="dark"] .button0 {
			background: #253549;
			color: #e0e0e0;
		}

		[data-theme="dark"] .button0:hover {
			background: #334155;
		}

		/* Pulsante rimuovi (❌) */
		[data-theme="dark"] .rimuovi {
			background: rgba(0,0,0,0.7);
			color: #ff3366;
		}











		.modale-header {
			background: #f8f8f8;
			padding: 16px 24px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eee;
			cursor: move;                    /* cambia il cursore in "mano" quando passi sopra */
			user-select: none;               /* impedisce di selezionare il testo mentre trascini */
		}

		
	


		.modale-header h2 {
			margin: 0;
			font-size: 1.45em;
		}

		.modale-chiudi {
			background: transparent;
			border: none;
			font-size: 1.9em;
			cursor: pointer;
			padding: 0 10px;
			color: #666;
		}

		.modale-chiudi:hover {
			color: #ff3366;
		}

		.lista-preferiti {
		    /*background: #3d2eae; */
			padding: 5px;/*spazio ai lati */
			overflow-y: auto;
			grid-template-columns: repeat(auto-fit, minmax(290px, 20fr));
			display: grid;
			/* per diminuire lo spazio fra le colonne andare su lista-preferiti*/ 
			gap: 10px; /*spazio sopra/sotto/destra sinistra*/
            margin: 10px;
		}
		@media (max-width: 900px) {
			.lista-preferiti {
		    /*background: #3d2eae; */
			padding: 5px;/*spazio ai lati */
			overflow-y: auto;
			grid-template-columns: repeat(auto-fit, minmax(190px, 20fr));
			display: grid;
			/* per diminuire lo spazio fra le colonne andare su lista-preferiti*/ 
			gap: 10px; /*spazio sopra/sotto/destra sinistra*/
            margin: 10px;
			}
		}
		
		

		.lista-preferiti .miniatura {
			position: relative;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		}

		.lista-preferiti .miniatura img {
			width: 100%;
			height: auto;
			display: block;
		}

		.lista-preferiti .rimuovi {
			position: absolute;
			top: 10px;
			right: 10px;
			background: rgba(0,0,0,0.75);
			color: white;
			border: none;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			cursor: pointer;
			font-size: 1.2em;
		}

		.modale-footer {
		    background: #3d2eae;
			padding: 16px 24px;
			border-top: 1px solid #eee;
			text-align: center;
		}

		.btn-svuota {
			background: #ff3366;
			color: white;
			border: none;
			padding: 10px 24px;
			border-radius: 6px;
			cursor: pointer;
			font-weight: bold;
		}

		.btn-svuota:hover {
			background: #cc0033;
		}	
		
		@keyframes modalPop {
			0%   { transform: scale(0.7); opacity: 0; }
			100% { transform: scale(1);   opacity: 1; }
		}


		/* ====================== FLEX CONTAINER ====================== */
		#div2.flex {
			display: flex;
			flex-wrap: wrap;           /* permette di andare a capo su schermi stretti */
			gap: 15px;                 /* spazio tra i tre div */
			align-items: flex-start;
			justify-content: space-between;
		}

		/* I tre elementi figli */
		#div2 .flex-item {
			flex: 1;                   /* tutti e tre occupano spazio in modo equo */
			min-width: 280px;          /* impedisce che diventino troppo stretti */
		}

		/* ====================== DIV4 (tabella) ====================== */
		#div4 {
			top: 10;
			margin: 0;
			text-align: right;         /* mantiene l'allineamento a destra su desktop */
		}

		.info-table-wrapper {
			width: 100%;
			max-width: 380px;          /* larghezza massima della tabella */
			margin: 200 0 0 auto;        /* spinge la tabella a destra */
		}

		/* ====================== RESPONSIVE ====================== */
		@media (max-width: 950px) {
			#div2.flex {
				flex-direction: column;     /* su tablet e smartphone i div vanno uno sotto l'altro */
				gap: 10px;
			}
			
			#div2 .flex-item {
				flex: none;                 /* non si espandono più in larghezza */
				width: 100%;
			}
			
			#div4 {
				text-align: center;         /* la tabella si centra su mobile */
			}
			
			.info-table-wrapper {
				max-width: 100%;
				margin: 0 auto;             /* tabella centrata su mobile */
			}
		}
		<!-- /* ====================== VARIABILI TEMA ====================== */
		:root {
			--bg-color: #f8f9fa;
			--text-color: #222;
			--header-bg: rgba(255,255,255,0.95);
			--card-bg: #ffffff;
			--border-color: #eee;
			--accent-color: #ff3366;
		}

		[data-theme="dark"] {
			--bg-color: #121212;
			--text-color: #e0e0e0;
			--header-bg: rgba(18,18,18,0.05); /* da il colore all'header quando è in dark mode */
			--card-bg: #1e1e1e;
			--border-color: #333;
			--accent-color: #ff3366;
		} -->
		
		/* ====================== VARIABILI TEMA ====================== */
		:root {
			--bg-color: #f8f9fa;
			--text-color: #222;
			--header-bg: rgba(255,255,255,0.05);
			--card-bg: #ffffff;
			--border-color: #eee;
			--accent-color: #ff3366;
		}

		/* ====================== TEMA BLU SCURO ====================== */
		[data-theme="dark"] {
			/*--bg-color: #0f172a;    */      /* blu scuro profondo */
			--bg-color: #3d2eae;
			--text-color: #e2e8f0;
			--header-bg: rgba(15, 23, 42, 0.05);
			--card-bg: #1e2937;
			--border-color: #334155;
			--accent-color: #ff3366;      /* puoi cambiarlo se vuoi */ /*colore pulsanti*/
		}
		

		/* ====================== APPLICAZIONE DEL TEMA ====================== */
		body {
			background: var(--bg-color);
			color: var(--text-color);
			transition: background 0.4s ease, color 0.4s ease;
		}

		.header {
			background: var(--header-bg) !important;
			box-shadow: 0 2px 10px rgba(0,0,0,0.15);
		}

		.info-table {
			background: var(--card-bg);
		}

		.info-table td {
			border-bottom: 1px solid var(--border-color);
		}

		.button0, .modale-contenuto {
			background: var(--card-bg);
			color: var(--text-color);
		}

		.menu-btn {
			color: var(--text-color);
		}

		.menu-btn:hover,
		.menu-btn.active {
			background: var(--accent-color) !important;
			color: white !important;
		}



		/* ====================== DARK MODE PER DIV3, DIV4, DIV5 ====================== */
		[data-theme="dark"] #div3,
		[data-theme="dark"] #div4,
		[data-theme="dark"] #div5 {
			background: #3d2eae;
			color: #3d2eae;
			border-radius: 8px;
			padding: 12px 15px;
			box-sizing: border-box;           /* ← importantissimo */
		}

		*[data-theme="dark"] #div2 {
			background: #3d2eae;
		}



		/* Mantieni le stesse dimensioni anche nel tema chiaro */
		#div3, #div4, #div5 {
			box-sizing: border-box;
			padding: 12px 15px;               /* padding uguale in entrambi i temi */
			border-radius: 8px;               /* bordi arrotondati sempre attivi */
		}

		/* Evita doppio padding */
		#div2 .flex-item {
			padding: 0;   /* resettiamo eventuali padding ereditati */
		}

		
		
				
				/* ====================== DIV5 - VIDEO SIZE & VIDEO FORMAT ====================== */
		[data-theme="dark"] #div5 {
			color: #ffffff !important;
		}

		[data-theme="dark"] #div5 label,
		[data-theme="dark"] #div5 span,
		[data-theme="dark"] #div5 p,
		[data-theme="dark"] #div5 strong {
			color: #ffffff !important;
		}

		/* Se le scritte sono dentro i <select> o vicino ai select */
		[data-theme="dark"] #div5 select {
			color: #ffffff !important;
			background-color: #2a1f7a !important;
		}









		/* ====================== Visualizzazione recenti  ====================== */

		/* Testo dentro div3 (titolo della cam) */
		[data-theme="dark"] #div3 h2,
		[data-theme="dark"] #div3 p,
		[data-theme="dark"] #div3 strong {
			color: #e0e0e0;
		}

		/* Miglioramento tabella nel dark mode */
		[data-theme="dark"] .info-table {
			/*background: #252525;*/
			background: #3d2eae;
		}

		[data-theme="dark"] .info-table td {
			border-bottom: 1px solid #333;
			color: #e0e0e0;
		}

		[data-theme="dark"] .info-table td:first-child {
			color: #bbb;
		}

		body, .header, #div2, #div3, #div4, #div5, .info-table {
			transition: background-color 0.4s ease,
						color 0.4s ease,
						border-color 0.4s ease;
		}


		
		.recent-grid {
			display: flex;
			gap: 12px;
			flex-wrap: wrap;
			justify-content: center;     /* ← Questa è la riga che mancava */
			padding: 10px 0;             /* piccolo margine opzionale */
		}
		.recent-item {
			width: 110px;
			cursor: pointer;
			border-radius: 6px;
			overflow: hidden;
			box-shadow: 0 2px 6px rgba(0,0,0,0.1);
			transition: transform 0.2s ease;
		}

		.recent-item:hover {
			transform: scale(1.20);
		}

		.recent-item img {
			width: 100%;
			height: auto;
			display: block;
		}

		.recent-name {
			text-align: center;
			padding: 6px 4px;
			font-size: 0.85em;
			background: #f8f9fa;
			color: #333;
		}
	





		.recent-title {
				color: #555;
				margin-bottom: 8px;
			}

			[data-theme="dark"] .recent-title {
				color: #e0e0e0;
			}










		.random-btn:hover {
			background: #ff1a4d;
			transform: scale(1.05);
		}

		.random-wrapper {
			position: relative;
		}

		.random-refresh-btn {
			left: 50%;
			top: 8px;
			right: 8px;
			background: rgba(0,0,0,0.75);
			color: white;
			border: none;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			font-size: 1.1em;
			cursor: pointer;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2px 6px rgba(0,0,0,0.3);
		}

		.random-refresh-btn:hover {
			background: #ff3366;
		}


		.random-btn {
			padding: 4px 14px;
			font-size: 1.05em;
			background: #ff3366;
			color: white;
			border: none;
			border-radius: 116px;
			cursor: pointer;
			white-space: nowrap;
			transition: all 0.3s ease;
		}





		.search-row {
			display: flex;
			align-items: center;
			justify-content: flex-start;     /* input a sinistra */
			gap: 20px;
			margin: 15px auto;
			max-width: 820px;                /* larghezza totale della riga */
			flex-wrap: wrap;
		}

		/* Input a sinistra */
		#search-wrapper {
			position: relative;
			flex: 1;                         /* occupa tutto lo spazio disponibile */
			max-width: 520px;                /* puoi cambiare questa larghezza */
		}




		suggestions-dropdown {
			position: absolute;
			top: 10%;                 /* si attacca sotto l'input */
			left: 0;
			width: 1%;
			max-height: 140px;
			overflow-y: auto;
			background: #ffffff;
			border: 1px solid #ccc;
			border-radius: 6px;
			box-shadow: 0 8px 20px rgba(0,0,0,0.2);
			z-index: 9999;
			display: none;
			margin-top: 4px;
		}
		
		
		
		.suggestions-dropdown div {
			padding: 4px 16px;
			cursor: pointer;
		
			border-bottom: 1px solid #f0f0f0;
		}

		.suggestions-dropdown div:last-child {
			border-bottom: none;
		}

		.suggestions-dropdown div:hover {
			background: #f5f5f5;
		}
		

		
			
		
		/* ====================== MODAL CONTATTO ====================== */
		.modal-overlay {
			display: none;
			position: fixed;
			top: 0; left: 0;
			width: 100%; height: 100%;
			background: rgba(0,0,0,0.7);
			z-index: 10000;
			align-items: center;
			justify-content: center;
		}

		.modal-content {
			background: #fff;
			width: 90%;
			max-width: 520px;
			border-radius: 12px;
			padding: 30px 25px;
			position: relative;
			box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		}

		[data-theme="dark"] .modal-content {
			background: #3d2eae;
			color: #e0e0e0;
		}

		.modal-close {
			position: absolute;
			top: 12px;
			right: 18px;
			background: none;
			border: none;
			font-size: 28px;
			cursor: pointer;
			color: #666;
			line-height: 1;
		}

		[data-theme="dark"] .modal-close {
			color: #ddd;
		}

		.modal-content input,
		.modal-content textarea {
			width: 100%;
			padding: 12px;
			margin-bottom: 15px;
			border: 1px solid #ccc;
			border-radius: 8px;
			font-size: 1em;
		}

		[data-theme="dark"] .modal-content input,
		[data-theme="dark"] .modal-content textarea {
			background: #2a1f7a;
			border-color: #5a4ab8;
			color: #e0e0e0;
		}	
					
		/* Spazio tra i link Disclaimer */
		.Disclaimer + .Disclaimer {
			margin-left: 25px;     /* puoi cambiare il numero se vuoi più o meno spazio */
		}			



		/* Stato disabilitato durante il caricamento */
		.ui-disabled {
			opacity: 0.5;
			pointer-events: none;           /* impedisce i click */
			cursor: wait; !important;
		}

		.ui-disabled input,
		.ui-disabled button {
			cursor: wait;
		}

		/* Messaggio di caricamento */
		.loading-overlay {
			position: fixed;
			top: 0; left: 0;
			width: 100%; height: 100%;
			background: rgba(0,0,0,0.6);
			display: none;
			align-items: center;
			justify-content: center;
			z-index: 99999;
			color: white;
			font-size: 1.1em;
		}			
		/*modale veifica età*/
				.modal-overlay {
			display: none;
			position: fixed;
			top: 0; left: 0;
			width: 100%; height: 100%;
			background: rgba(0,0,0,0.75);
			z-index: 20000;
			align-items: center;
			justify-content: center;
		}

		.age-modal {
			background: #fff;
			width: 90%;
			max-width: 460px;
			border-radius: 16px;
			padding: 40px 30px;
			text-align: center;
			box-shadow: 0 15px 35px rgba(0,0,0,0.3);
		}

		[data-theme="dark"] .age-modal {
			background: #3d2eae;
			color: #ffffff;
		}
			/* ====================== FOOTER COPYRIGHT ====================== */
		#footer-copyright {
			color: #555;                    /* colore in tema chiaro */
			transition: color 0.3s ease;
		}

		[data-theme="dark"] #footer-copyright {
			color: #cccccc;                 /* colore chiaro in tema dark */
		}		
		/* ==================== COOKIE BANNER ==================== */
		.cookie-banner {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #f8f9fa;
			border-top: 1px solid #ddd;
			padding: 18px 20px;
			box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
			z-index: 15000;
			display: none;
			align-items: center;
			justify-content: center;
			font-size: 0.95em;
			transition: all 0.4s ease;
		}

		[data-theme="dark"] .cookie-banner {
			background: #2a1f7a;
			border-top-color: #5a4ab8;
			color: #e0e0e0;
		}

		.cookie-content {
			max-width: 820px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20px;
			flex-wrap: wrap;
		}

		.cookie-buttons {
			display: flex;
			gap: 12px;
			flex-wrap: wrap;
		}

		.cookie-btn {
			padding: 10px 22px;
			border: none;
			border-radius: 8px;
			font-size: 0.95em;
			cursor: pointer;
			white-space: nowrap;
		}

		.accept-btn {
			background: #28a745;
			color: white;
		}

		.accept-btn:hover {
			background: #218838;
		}

		.close-btn {
			background: #6c757d;
			color: white;
		}

		.close-btn:hover {
			background: #5a6268;
		}		
		 /* Nasconde anche la scritta "Video size:" / "Dimensione video:" su mobile */

		/* ====================== COMPRIMI SPAZIO SU MOBILE IN #DIV5 ====================== */
		/* NASCONDE COMPLETAMENTE LA SCRITTA "Video size:" SU MOBILE */
		/* Nasconde le scritte "Video size:" e "Video format:" su mobile */

		/* ====================== #DIV5 - LAYOUT SU MOBILE ====================== */


		/* ====================== #DIV5 - SOLO CUORE CENTRATO SU MOBILE ====================== */
		@media (max-width: 900px) {
			#div5 {
				display: flex;
				justify-content: center;        /* centra orizzontalmente */
				align-items: center;
				padding: 5px 0;                /* dà un po' di spazio sopra/sotto */
				min-height: 60px;               /* evita che si schiaccia troppo */
			}

			/* Nasconde tutto tranne il cuore */
			#div5 > *:not(.cuore-principale) {
				display: none !important;
			}

			/* Cuore principale centrato e ben visibile */
			.cuore-principale {
				font-size: 2.6em;               /* leggermente più grande */
				margin: 0;
			}

			
				.container {
					display: grid;
					grid-template-columns: repeat(auto-fit, minmax(190px, 20fr));
					/* Spazio tra le colonne quando è su smartphone*/
					/* per diminuire lo spazio fra le colonne andare su .button0*/ 
					gap: 0px;
					margin: 1px;
					}
				  


		}

		/* Su desktop rimane tutto come prima */
		@media (min-width: 901px) {
			#div5 {
				display: block;
			}



		}
		/* ====================== DISCLAIMER MODAL - PIÙ LARGO ====================== */
		.modal-wide .modal-content {
			max-width: 680px;           /* puoi provare 720px, 780px o 820px */
			width: 92%;
		}

		@media (max-width: 900px) {
			.modal-wide .modal-content {
				max-width: 95%;         /* su cellulare rimane quasi a tutto schermo */
			}
		}
		/* ====================== BADGE RTA VISIBILE ====================== */
		.rta-badge {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background-color: #dc3545;
			color: white;
			padding: 4px 12px;
			border-radius: 6px;
			font-size: 0.85em;
			font-weight: bold;
			margin-top: 15px;
			margin-bottom: 10px;
		}

		.rta-badge span:first-child {
			background-color: white;
			color: #dc3545;
			padding: 2px 8px;
			border-radius: 4px;
			font-weight: 900;
			font-size: 0.9em;
		}

		.rta-badge .rta-text {
			font-weight: 500;
		}

		/* Dark Mode */
		[data-theme="dark"] .rta-badge {
			background-color: #b02a37;
		}

		[data-theme="dark"] .rta-badge span:first-child {
			background-color: #e0e0e0;
			color: #b02a37;
		}

		.ui-disabled {
			cursor: wait !important;
			opacity: 0.55;
		}

		.ui-disabled * {
			cursor: wait !important;
		}

		/* ====================== SPINNER CON TESTO ====================== */
		.global-spinner {
			display: none;
			position: fixed;
			top: 12px;
			left: 215px;
			z-index: 99999;
			background: rgba(255, 255, 255, 0.95);
			padding: 8px 14px;
			border-radius: 8px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
			align-items: center;
			gap: 10px;
		}

		[data-theme="dark"] .global-spinner {
			background: rgba(45, 45, 45, 0.95);
		}

		.global-spinner.show {
			display: flex;
		}

		.global-spinner .spinner {
			width: 20px;
			height: 20px;
			border: 3px solid #ccc;
			border-top: 3px solid #ff3366;
			border-radius: 50%;
			animation: spin 0.8s linear infinite;
			flex-shrink: 0;
		}

		[data-theme="dark"] .global-spinner .spinner {
			border: 3px solid #555;
			border-top: 3px solid #ff3366;
		}

		.global-spinner .spinner-text {
			font-size: 0.9em;
			color: #333;
			white-space: nowrap;
		}

		[data-theme="dark"] .global-spinner .spinner-text {
			color: #e0e0e0;
		}

		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}