/* Beforeloud — TikTok (app iOS, ottobre 2026). Misure su uno schermo di 390×844. */
.tt{background:#000;color:#fff;font-size:15px;line-height:1.3}
.tt-media{position:absolute;left:0;right:0;top:0;bottom:0;background:#000;overflow:hidden}
.tt-media img,.tt-media video{width:100%;height:100%;object-fit:cover;display:block}
.tt-empty{display:grid;place-items:center;width:100%;height:100%;color:#999;font-size:13px;background:#161616}
.tt-shade{position:absolute;left:0;right:0;bottom:0;height:360px;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 100%)}

/* video orizzontale: fascia 16:9 centrata nello spazio fra le schede in alto e la barra in basso, bande nere */
.tt-video.is-landscape .tt-media{top:108px;bottom:90px}
.tt-video.is-landscape .tt-media video,.tt-video.is-landscape .tt-media img{position:absolute;left:0;right:0;top:50%;height:auto;aspect-ratio:16/9;transform:translateY(-50%)}
.tt-fullscreen{position:absolute;left:50%;top:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);font-size:14px;font-weight:600;white-space:nowrap;z-index:3}
.tt-fullscreen svg{opacity:.9}

/* schede in alto */
.tt-top{position:absolute;left:0;right:0;top:62px;height:36px;display:flex;align-items:center;padding:0 14px 0 16px;z-index:4;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.tt-live{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border:1.6px solid #fff;border-radius:5px;font-size:8px;font-weight:800;letter-spacing:.2px;position:relative;top:-1px}
.tt-live::before,.tt-live::after{content:"";position:absolute;top:-6px;width:1.6px;height:6px;background:#fff;transform-origin:bottom}
.tt-live::before{left:8px;transform:rotate(-30deg)}.tt-live::after{right:8px;transform:rotate(30deg)}
.tt-tabs{flex:1;display:flex;justify-content:center;gap:22px;font-size:17px;font-weight:600;color:rgba(255,255,255,.72)}
.tt-tabs span{position:relative;padding-bottom:6px}
.tt-tabs .is-active{color:#fff;font-weight:700}
.tt-tabs .is-active::after{content:"";position:absolute;left:50%;bottom:0;width:28px;height:2.5px;margin-left:-14px;border-radius:2px;background:#fff}
.tt-search-ico{display:inline-flex;color:#fff}

/* colonna a destra */
.tt-rail{position:absolute;right:8px;bottom:104px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.tt-rail-avatar{position:relative;display:inline-flex;margin-bottom:12px}
.tt-avatar{width:48px;height:48px;border:1.5px solid #fff;background:#333;color:#fff}
.tt-plus{position:absolute;left:50%;bottom:-10px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#fe2c55;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.tt-rail-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff}
.tt-count{font-size:13px;font-weight:600;min-height:16px;line-height:16px}
.tt-disc{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at center,#1c1c1c 0 28%,#000 29% 100%);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;animation:ttSpin 5s linear infinite;margin-top:6px}
.tt-disc img,.tt-disc-blank{width:28px;height:28px;border-radius:50%;object-fit:cover;display:block;background:#444}
@keyframes ttSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tt-disc{animation:none}}

/* informazioni in basso a sinistra */
.tt-info{position:absolute;left:14px;right:76px;bottom:102px;display:flex;flex-direction:column;gap:6px;z-index:3;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.tt-location{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;height:24px;padding:0 9px 0 6px;border-radius:6px;background:rgba(255,255,255,.18);font-size:12px;font-weight:600;text-shadow:none;margin-bottom:2px}
.tt-location svg{color:#4ade80}
.tt-name{display:flex;align-items:center;gap:6px;font-size:17px;line-height:1.2;white-space:nowrap}
.tt-name b{font-weight:700}
.tt-badge{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 7px 0 5px;border-radius:4px;background:rgba(255,255,255,.16);font-size:11px;font-weight:600;text-shadow:none}
.tt-title{font-size:16px;font-weight:700;line-height:1.25}
.tt-caption{font-size:15px;line-height:1.3}
.tt-caption .tt-cap-short,.tt-caption .tt-cap-full{white-space:pre-wrap;overflow-wrap:anywhere}
.tt-more{border:0;background:none;color:rgba(255,255,255,.78);font:inherit;font-weight:600;padding:0;cursor:pointer}
.tt-sponsored{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;background:rgba(255,255,255,.22);color:rgba(255,255,255,.92);font-size:11px;font-weight:600;line-height:1.5;vertical-align:1px;text-shadow:none}
.tt-ai{display:inline-block;align-self:flex-start;padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.2);font-size:11px;font-weight:600;text-shadow:none}
.tt-audio{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap;overflow:hidden}
.tt-audio svg{flex:none}
.tt-audio-text{overflow:hidden;text-overflow:ellipsis}

/* annuncio: pulsante a tutta larghezza, da grigio a rosso */
.tt-cta{position:absolute;left:14px;right:76px;bottom:98px;height:40px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:5px;background:rgba(255,255,255,.3);color:#fff;font-size:15px;font-weight:700;z-index:3;transition:background .5s ease}
.tt-cta.is-colored{background:#fe2c55}

/* barra «Ricerca» e schede */
.tt-searchbar{position:absolute;left:0;right:0;bottom:90px;height:44px;display:flex;align-items:center;gap:8px;padding:0 14px;background:rgba(22,22,22,.96);color:rgba(255,255,255,.88);font-size:14px;z-index:3}
.tt-searchbar-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-searchbar-label{color:rgba(255,255,255,.6)}
.tt-tabbar{position:absolute;left:0;right:0;bottom:0;height:90px;background:#000;display:flex;justify-content:space-around;align-items:flex-start;padding:10px 6px 0;z-index:4}
.tt-tab{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px;color:rgba(255,255,255,.72);font-size:10px;font-weight:500}
.tt-tab.is-active{color:#fff;font-weight:700}
.tt-create{display:inline-flex;align-items:center;justify-content:center;width:44px;height:30px;border-radius:9px;background:#fff;color:#000;box-shadow:-4px 0 0 #25f4ee,4px 0 0 #fe2c55;margin-top:1px}
.tt-home{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:#fff}
.tt-sound{bottom:auto;top:112px;right:14px}

/* post fotografico */
.tt-photos.is-boxed .tt-media{top:108px;bottom:auto}
.tt-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;outline:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tt-track::-webkit-scrollbar{display:none}
.tt-track.is-dragging,.tt-track.is-animating{scroll-snap-type:none;scroll-behavior:auto}
.tt-track.is-dragging{cursor:grabbing}
.tt-slide{position:relative;flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;background:#000;user-select:none}
.tt-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tt-photos.is-boxed .tt-slide img{object-fit:contain}
.tt-counter{position:absolute;right:14px;top:112px;height:24px;padding:0 9px;border-radius:12px;background:rgba(0,0,0,.45);font-size:12px;font-weight:600;line-height:24px;z-index:3}
.tt-dots{position:absolute;left:0;right:0;top:620px;display:flex;justify-content:center;gap:5px;z-index:3}
.tt-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35)}
.tt-dots i.is-active{background:#fff}
.tt-dots.is-overlay{position:static;margin:0 0 8px}