/* Clippo – lo stile del sito (sopra Bootstrap 5.3, tema scuro)
   Linux77 – CodiceFacile https://codicefacile.altervista.org */

:root {
  --rosa: #ff3d71; --rosa-scuro: #e62e60; --azzurro: #22d3ee;
  --fondo: #000; --pannello: #121218; --bordo: #26262e; --grigio: #a1a1aa;
  --menu-l: 240px; --menu-h: 60px;
  --bs-body-bg: #000; --bs-link-color: #fff; --bs-link-hover-color: var(--rosa);
  --bs-link-color-rgb: 255, 255, 255; --bs-link-hover-color-rgb: 255, 61, 113;
}
html, body { background: #000; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { text-decoration: none; }
.btn-rosa { background: var(--rosa); color: #fff; font-weight: 700; border: 0; }
.btn-rosa:hover, .btn-rosa:focus { background: var(--rosa-scuro); color: #fff; }
.btn-grigio { background: var(--bordo); color: #fff; font-weight: 600; border: 0; }
.btn-grigio:hover { background: #34343e; color: #fff; }
.bg-rosa { background: var(--rosa) !important; }
.form-control, .form-select { background-color: #18181f; border-color: var(--bordo); }
.form-control:focus, .form-select:focus { border-color: var(--rosa); box-shadow: 0 0 0 .2rem #ff3d7133; background-color: #18181f; }
.form-check-input:checked { background-color: var(--rosa); border-color: var(--rosa); }
.card { background: var(--pannello); border-color: var(--bordo); }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- avatar ---------- */
.av { border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; color: #000; font-weight: 900; flex: none; vertical-align: middle; }
.av.grande { border: 3px solid #fff2; }
.av.sistema { background: var(--rosa); color: #fff; font-size: 20px; }

/* ---------- menu laterale (PC) e in basso (telefono) ---------- */
.laterale { position: fixed; top: 0; left: 0; bottom: 0; width: var(--menu-l); padding: 18px 12px; display: none; flex-direction: column; gap: 2px; border-right: 1px solid #16161c; background: #000; z-index: 50; overflow-y: auto; }
.laterale > a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 17px; color: #e4e4e7; }
.laterale > a:hover { background: #16161c; color: #fff; }
.laterale > a.on { color: var(--rosa); }
.laterale > a i { font-size: 22px; width: 26px; text-align: center; }
.laterale .logo { font-size: 26px; font-weight: 900; color: #fff; margin-bottom: 12px; letter-spacing: -.5px; }
.laterale .invito { font-size: 14px; color: var(--grigio); padding: 14px 12px; border-top: 1px solid #16161c; border-bottom: 1px solid #16161c; margin: 10px 0; }
.laterale .piedino { margin-top: auto; padding: 12px; font-size: 13px; color: #71717a; }
.laterale .piedino a { color: #71717a; }
.pallino { background: var(--rosa); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 800; padding: 1px 6px; margin-left: auto; line-height: 1.4; }

.sotto { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--menu-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #000; border-top: 1px solid #1f1f27; display: flex; justify-content: space-around; align-items: center; z-index: 50; }
.sotto a { color: var(--grigio); font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; min-width: 56px; }
.sotto a i { font-size: 22px; line-height: 1; }
.sotto a.on { color: #fff; }
.sotto .pallino { position: absolute; top: -4px; right: 6px; }
.sotto .piu span { width: 48px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #000; font-size: 20px;
  background: linear-gradient(90deg, var(--azzurro) 0 5px, #fff 5px calc(100% - 5px), var(--rosa) calc(100% - 5px)); }

.contenuto { min-height: 100vh; padding-bottom: calc(var(--menu-h) + env(safe-area-inset-bottom)); }
@media (min-width: 992px) {
  .laterale { display: flex; }
  .sotto { display: none; }
  .contenuto { margin-left: var(--menu-l); padding-bottom: 0; }
}
.avviso-top { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 100; width: min(92vw, 480px); }

/* ---------- pagine normali ---------- */
.pagina { max-width: 980px; margin: 0 auto; padding: 24px 16px 40px; }
.pagina.stretta { max-width: 620px; }
.titoletto { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--grigio); margin-bottom: 10px; }
.vuoto { text-align: center; color: var(--grigio); padding: 48px 16px; }
.vuoto > i { font-size: 52px; display: block; margin-bottom: 10px; color: #3f3f46; }
.vuoto h1, .vuoto h2 { color: #fff; }

/* ---------- il feed verticale ---------- */
.pagina-feed .contenuto { padding-bottom: 0; }
.feed-box { position: relative; height: calc(100dvh - var(--menu-h) - env(safe-area-inset-bottom)); max-width: calc((100dvh - 24px) * 9 / 16); margin: 0 auto; }
@media (min-width: 992px) { .feed-box { height: 100dvh; padding: 12px 0; } .feed-box .feed { border-radius: 14px; } }
@media (max-width: 991.98px) { .feed-box { max-width: none; } }
.feed { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; background: #000; }
.feed::-webkit-scrollbar { display: none; }
.feed-testa { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; justify-content: center; align-items: center; gap: 22px; padding: 16px 16px 10px; font-weight: 700; font-size: 17px; text-shadow: 0 1px 3px #000; pointer-events: none; }
@media (min-width: 992px) { .feed-testa { top: 12px; } }
.feed-testa a { color: #fffa; padding-bottom: 5px; pointer-events: auto; }
.feed-testa a.on { color: #fff; border-bottom: 3px solid #fff; }
.feed-testa .lente { position: absolute; right: 16px; font-size: 22px; color: #fff; }
.feed-testa .indietro { position: absolute; left: 12px; font-size: 24px; color: #fff; }
.tasto-audio { position: absolute; top: 58px; left: 12px; z-index: 6; background: #0008; border: 0; color: #fff; border-radius: 20px; padding: 6px 12px; font-size: 13px; }
@media (min-width: 992px) { .tasto-audio { top: 70px; } }
.tasto-audio.attivo span { display: none; }

.post { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; background: #000; overflow: hidden; }
.post video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.post video.largo { object-fit: contain; }
.post .ombra { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, #000c); pointer-events: none; }
.icona-pausa { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .15s; }
.icona-pausa i { font-size: 84px; color: #fffc; text-shadow: 0 2px 10px #0008; }
.post.pausa .icona-pausa { opacity: 1; }

.az { position: absolute; right: 8px; bottom: 96px; display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 3; }
.az button, .az .disco { background: none; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px #000; padding: 0; }
.az button i { font-size: 32px; line-height: 1.15; filter: drop-shadow(0 1px 3px #0008); transition: transform .15s; }
.az button:active i { transform: scale(.85); }
.az-autore { position: relative; margin-bottom: 8px; }
.az-autore .av { border: 2px solid #fff; }
.segui-piu { position: absolute !important; bottom: -11px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50% !important; background: var(--rosa) !important; }
.segui-piu i { font-size: 18px !important; line-height: 22px !important; }
.a-cuore.on i { color: var(--rosa); }
.a-salva.on i { color: #facc15; }
.az .disco { width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(#333, #111, #333); border: 7px solid #222; display: grid; place-items: center; font-size: 14px; animation: gira 4s linear infinite; animation-play-state: paused; }
.post.va .disco { animation-play-state: running; }
@keyframes gira { to { transform: rotate(360deg); } }

.dida { position: absolute; left: 12px; right: 76px; bottom: 18px; z-index: 3; text-shadow: 0 1px 3px #000; }
.dida .autore { font-weight: 800; font-size: 16px; color: #fff; }
.dida .quando { font-size: 13px; color: #fffb; }
.dida .testo { font-size: 14.5px; margin: 6px 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.dida .testo.aperto { -webkit-line-clamp: unset; }
.dida .tag { font-weight: 700; color: #fff; }
.dida .suono { font-size: 13px; color: #fff; display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; }
.dida .suono span { overflow: hidden; text-overflow: ellipsis; }
.barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #fff2; z-index: 4; cursor: pointer; }
.barra div { height: 100%; width: 0; background: #fff; }
.post-vuoto { display: grid; place-items: center; }
.post-fine { display: grid; place-items: center; text-align: center; color: var(--grigio); }

.boom { position: absolute; z-index: 7; font-size: 96px; color: var(--rosa); pointer-events: none; animation: boom .8s ease-out forwards; }
@keyframes boom { 0% { transform: scale(.3) rotate(-15deg); opacity: 0; } 30% { transform: scale(1.2) rotate(-15deg); opacity: 1; } 100% { transform: scale(1) translateY(-90px) rotate(-15deg); opacity: 0; } }

/* ---------- il foglio dei commenti ---------- */
.foglio { position: fixed; left: 0; right: 0; bottom: 0; height: 70dvh; background: var(--pannello); border-radius: 16px 16px 0 0; z-index: 1060; transform: translateY(100%); visibility: hidden; transition: transform .25s, visibility 0s .25s; display: flex; flex-direction: column; }
.foglio.su { transform: none; visibility: visible; transition: transform .25s; }
@media (min-width: 992px) { .foglio { left: auto; top: 0; height: 100dvh; width: 400px; border-radius: 0; transform: translateX(100%); } }
.foglio-testa { display: flex; justify-content: center; position: relative; padding: 14px; border-bottom: 1px solid var(--bordo); font-size: 14px; }
.foglio-testa .btn-close { position: absolute; right: 14px; top: 12px; }
.foglio-lista { flex: 1; overflow: auto; padding: 6px 14px; }
.foglio-scrivi { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bordo); }
.foglio-scrivi .form-control { border-radius: 20px; }
.foglio-scrivi .btn { border-radius: 20px; }
.com { display: flex; gap: 10px; padding: 10px 0; }
.com .corpo { flex: 1; font-size: 14px; word-break: break-word; }
.com .corpo small { color: var(--grigio); }
.com .corpo .nome { color: var(--grigio); font-weight: 700; font-size: 13px; }
.com .x { background: none; border: 0; color: #71717a; font-size: 13px; align-self: start; }
.velo { position: fixed; inset: 0; background: #0006; z-index: 1055; display: none; }
.velo.su { display: block; }

.toast-clippo { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); background: #000d; border: 1px solid #333; border-radius: 10px; padding: 12px 18px; z-index: 2000; font-size: 14px; display: none; max-width: 86vw; text-align: center; }
.modal-content { background: var(--pannello); }

/* ---------- profilo, hashtag, suono ---------- */
.profilo { text-align: center; padding: 8px 0 16px; }
.numeri { display: flex; justify-content: center; gap: 30px; margin: 14px 0; }
.numeri b { display: block; font-size: 18px; }
.numeri span { color: var(--grigio); font-size: 13px; }
.bio { max-width: 460px; margin: 14px auto 0; color: #d4d4d8; }
.schede { border-bottom: 1px solid var(--bordo); margin-bottom: 2px; --bs-nav-link-color: var(--grigio); --bs-nav-link-hover-color: #fff; --bs-nav-underline-link-active-color: #fff; }
.griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
@media (min-width: 768px) { .griglia { grid-template-columns: repeat(4, 1fr); gap: 4px; } }
@media (min-width: 1200px) { .griglia { grid-template-columns: repeat(5, 1fr); } }
.cella { position: relative; aspect-ratio: 9 / 16; background: #18181f; overflow: hidden; display: block; border-radius: 4px; }
.cella img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.cella:hover img { transform: scale(1.04); }
.cella .viste { position: absolute; left: 6px; bottom: 4px; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }
.cella .lucchetto { position: absolute; right: 6px; top: 4px; text-shadow: 0 1px 3px #000; }
.cella .stato { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 8px; font-size: 13px; font-weight: 700; background: #000a; }
.stato-errore, .stato-rifiutato { color: #f87171; }
.intesta { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.quadro { width: 96px; height: 96px; border-radius: 14px; background: #18181f; display: grid; place-items: center; font-size: 44px; flex: none; }
.suono-quadro { background: linear-gradient(135deg, var(--rosa), #a78bfa); }
.tondo { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: #000; font-size: 22px; flex: none; display: grid; place-items: center; }
.tondo.piccolo { width: 38px; height: 38px; font-size: 18px; }

/* ---------- scopri ---------- */
.cerca { position: relative; }
.cerca i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--grigio); }
.cerca input { padding-left: 44px; border-radius: 12px; }
.scorri-oriz { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.autore-card { flex: none; width: 136px; background: var(--pannello); border: 1px solid var(--bordo); border-radius: 14px; padding: 14px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; }
.autore-card .av { margin-bottom: 6px; }
.autore-card b, .autore-card small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autore-card small { color: var(--grigio); font-size: 12px; }
.lista-tag a { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid #16161c; color: #fff; }
.lista-tag .num { width: 32px; height: 32px; border-radius: 8px; background: #18181f; display: grid; place-items: center; font-weight: 800; color: var(--rosa); flex: none; }
.lista-tag span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.lista-tag small, .riga-suono small { color: var(--grigio); font-size: 13px; }
.riga-suono { display: flex; gap: 12px; align-items: center; padding: 8px 4px; }
.riga-suono a { display: flex; flex-direction: column; color: #fff; }

/* ---------- notifiche ---------- */
.notifica { display: flex; gap: 12px; align-items: center; padding: 12px 6px; border-bottom: 1px solid #16161c; font-size: 14.5px; }
.notifica.nuova { background: #ff3d710d; }
.mini-cop { width: 44px; height: 58px; object-fit: cover; border-radius: 4px; }

/* ---------- accesso e testi ---------- */
.accesso { max-width: 400px; margin: 4vh auto 0; text-align: center; }
.accesso form { text-align: left; }
.testo-pagina h2 { font-size: 1.2rem; margin-top: 1.6rem; }
.testo-pagina { line-height: 1.65; color: #d4d4d8; }

/* ---------- carica e registra ---------- */
.scelta { --bs-nav-pills-link-active-bg: var(--rosa); --bs-nav-link-color: #fff; --bs-nav-link-hover-color: #fff; background: #18181f; border-radius: 10px; padding: 4px; }
.drop { border: 2px dashed #3f3f46; border-radius: 14px; aspect-ratio: 9 / 13; max-height: 62vh; width: 100%; display: grid; place-items: center; text-align: center; color: var(--grigio); cursor: pointer; position: relative; overflow: hidden; background: #0b0b10; margin: 0 auto; }
.drop:hover { border-color: var(--rosa); }
.drop input { display: none; }
.drop-testo i { font-size: 46px; display: block; color: var(--rosa); }
.drop-testo b { display: block; color: #fff; font-size: 18px; }
.drop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.drop .cambia { position: absolute; top: 10px; right: 10px; z-index: 2; }
.camera { position: relative; aspect-ratio: 9 / 14; max-height: 70vh; width: 100%; background: #000; border-radius: 14px; overflow: hidden; margin: 0 auto; }
.camera video { width: 100%; height: 100%; object-fit: cover; }
.camera video.specchio { transform: scaleX(-1); }
.cam-su { position: absolute; top: 14px; left: 10px; right: 10px; display: flex; justify-content: space-between; }
.cam-su .btn.active { background: var(--rosa); border-color: var(--rosa); }
.cam-giu { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; align-items: center; gap: 22px; }
.rec { width: 74px; height: 74px; border-radius: 50%; border: 5px solid #fff; background: transparent; display: grid; place-items: center; padding: 0; }
.rec span { width: 56px; height: 56px; border-radius: 50%; background: var(--rosa); transition: all .2s; }
.rec.va span { width: 28px; height: 28px; border-radius: 6px; }
.cam-barra { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: #fff3; }
.cam-barra div { height: 100%; width: 0; background: var(--rosa); }
.conto { position: absolute; inset: 0; display: grid; place-items: center; font-size: 120px; font-weight: 900; text-shadow: 0 4px 20px #000; }
.cam-msg { position: absolute; left: 12px; right: 12px; bottom: 104px; text-align: center; font-size: 13px; text-shadow: 0 1px 3px #000; }
.brani { max-height: 340px; overflow-y: auto; }
.brano { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; }
.brano input { display: none; }
.brano.sel { border-color: var(--rosa); background: #1d1016; }
.brano .qd { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: 20px; color: #000; flex: none; }
.brano .info { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.brano small { color: var(--grigio); }
.brano .play { background: var(--bordo); border: 0; color: #fff; width: 36px; height: 36px; border-radius: 50%; }
.mio-suono { border: 2px dashed #3f3f46; border-radius: 10px; }
.mio-suono summary { padding: 12px; font-weight: 700; cursor: pointer; }
.vol { display: grid; grid-template-columns: 130px 1fr 48px; gap: 10px; align-items: center; font-size: 14px; color: var(--grigio); }
.vol input { accent-color: var(--rosa); }

/* ---------- pannello admin ---------- */
.pagina-admin .pagina { max-width: 1200px; }
.menu-admin { --bs-nav-pills-link-active-bg: var(--rosa); --bs-nav-link-color: #d4d4d8; --bs-nav-link-hover-color: #fff; gap: 4px; }
.numero { background: var(--pannello); border: 1px solid var(--bordo); border-radius: 12px; padding: 14px 16px; }
.numero b { display: block; font-size: 26px; line-height: 1.1; }
.numero span { color: var(--grigio); font-size: 13px; }
.numero.attenzione { border-color: var(--rosa); }
.tabella { font-size: 14px; }
.tabella td, .tabella th { vertical-align: middle; }
.tabella img.cop { width: 42px; height: 62px; object-fit: cover; border-radius: 4px; }
.colonne { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.colonne div { flex: 1; background: var(--rosa); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.colonne div.cv { background: var(--azzurro); }
.etichette { display: flex; gap: 4px; font-size: 10px; color: var(--grigio); }
.etichette span { flex: 1; text-align: center; }