*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', sans-serif;
  background:var(--bg0); color:var(--text1);
  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
:root {
  --bg0:#0a0a0a; --bg1:#111111; --bg2:#181818; --bg3:#242424;
  --border:rgba(255,255,255,0.07); --border-md:rgba(255,255,255,0.13);
  --text1:#e3e3e4; --text2:rgba(255,255,255,0.60); --text3:rgba(255,255,255,0.44);
  --accent:#d80000; --accent-dim:rgba(216,0,0,0.13); --accent-text:#ff4444;
  --green:#2dd87a; --amber:#f5a623;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --max-w:1600px; --side-w:320px;
  --fs-meta:clamp(12.5px, 0.74rem + 0.2vw, 14px);
  --fs-body:clamp(13.5px, 0.78rem + 0.25vw, 15.5px);
  --fs-title:clamp(14.5px, 0.82rem + 0.45vw, 17.5px);
  --fs-sec:clamp(17px, 1rem + 0.8vw, 23px);
  --fs-hero:clamp(17px, 0.95rem + 1.1vw, 26px);
  --lh-tight:1.32; --lh-snug:1.45; --lh-base:1.6;
  --pc1:linear-gradient(135deg,#1a0808,#2a0e14); --pc2:linear-gradient(135deg,#080d1a,#0e1832);
  --pc3:linear-gradient(135deg,#080e08,#0e2014); --pc4:linear-gradient(135deg,#12080a,#241016);
  --pc5:linear-gradient(135deg,#0e0a18,#1c1230); --pc6:linear-gradient(135deg,#0a1210,#102420);
  --pc7:linear-gradient(135deg,#141008,#28200e); --pc8:linear-gradient(135deg,#08100e,#10241e);
  --av-a-bg:#3a0a0a; --av-a-fg:#ff6666;
  --av-b-bg:#0a1a3a; --av-b-fg:#6699ff;
  --av-c-bg:#0a2a1a; --av-c-fg:#44cc88;
  --av-d-bg:#2a1a3a; --av-d-fg:#aa88ff;
  --av-e-bg:#1a0a20; --av-e-fg:#cc88ff;
}
body.light {
  --bg0:#f2f2f2; --bg1:#ffffff; --bg2:#fafafa; --bg3:#eeeeee;
  --border:rgba(0,0,0,0.07); --border-md:rgba(0,0,0,0.13);
  --text1:#0e0e0e; --text2:rgba(0,0,0,0.62); --text3:rgba(0,0,0,0.48);
  --accent:#d80000; --accent-dim:rgba(216,0,0,0.08); --accent-text:#a80000;
  --green:#1a9e5a; --amber:#c47d00;
  --pc1:linear-gradient(135deg,#e8d4d4,#dcc4c8); --pc2:linear-gradient(135deg,#d4d8e8,#c4cadc);
  --pc3:linear-gradient(135deg,#d4e8d4,#c4dcc8); --pc4:linear-gradient(135deg,#e8d4d8,#dcc4cc);
  --pc5:linear-gradient(135deg,#dcd4e8,#ccc4dc); --pc6:linear-gradient(135deg,#d4e4e0,#c4d8d4);
  --pc7:linear-gradient(135deg,#e4e0d4,#d8d4c4); --pc8:linear-gradient(135deg,#d4e0dc,#c4d4d0);
}

/* ── ICONS ── */
.ico { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; display:block; }
.ico.sm { width:16px; height:16px; }
.ico.md { width:20px; height:20px; }

/* ── PAGE ── */
/* niente min-height:100vh: il footer segue il contenuto senza margine vuoto.
   Lo sfondo della viewport sotto il footer è coperto da body/html. */
.page-wrap { padding-bottom:70px; }
@media(min-width:1100px){ .page-wrap { padding-bottom:0; } }

/* floating theme toggle (demo) */
.fab-theme { position:fixed; right:16px; bottom:84px; z-index:120; width:44px; height:44px; border-radius:50%; background:var(--bg2); border:1px solid var(--border-md); color:var(--text1); font-size:18px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; }
@media(min-width:1100px){ .fab-theme { bottom:24px; } }

/* ══════════ NAV — mobile ══════════ */
.nav { background:var(--bg1); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:90; }
.nav-inner { display:flex; align-items:center; gap:10px; height:52px; padding:0 14px; position:relative; overflow:hidden; }
.hamburger { background:transparent; border:none; padding:4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.hamburger span { display:block; width:20px; height:1.8px; background:var(--text2); border-radius:2px; }
.nav-logo { font-size:18px; font-weight:800; color:var(--text1); letter-spacing:-0.03em; flex-shrink:0; transition:opacity 0.25s; text-decoration:none; display:inline-flex; align-items:center; }
.nav-logo span { color:var(--accent); }
/* logo immagine (header/drawer/footer): WebP + PNG fallback, ridimensionato via CSS */
.logo-img { display:block; height:30px; width:auto; }
@media(min-width:1024px){ .nav-logo .logo-img { height:34px; } }
.footer-brand-logo .logo-img { height:34px; }
.mf-brand .logo-img, .drawer-logo .logo-img { height:28px; }
.nav-spacer { flex:1; }
.nav-links { display:none; }
.search-btn { background:transparent; border:none; padding:4px; cursor:pointer; color:var(--text2); display:flex; align-items:center; transition:opacity 0.25s; -webkit-tap-highlight-color:transparent; }
.nav-ico { position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:transparent; border:none; color:var(--text2); text-decoration:none; cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.nav-ico:hover { background:var(--bg2); color:var(--text1); }
.nav-ico .ico { width:21px; height:21px; }
.nav-ico-badge { position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:999px; background:#ff3b3b; color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; }
.nav-create .ico { width:23px; height:23px; }
@media(max-width:560px){ .nav-create { display:none; } }
.nav-search-desktop { display:none; }
.nav-avatar { width:32px; height:32px; padding:0; box-sizing:border-box; border-radius:50%; background:var(--accent-dim); border:1.5px solid var(--accent); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--accent-text); cursor:pointer; transition:opacity 0.25s; position:relative; text-decoration:none; font-family:inherit; }
/* immagine avatar dentro qualunque cerchio-avatar (filtro |avatar) */
.av-img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }

/* ══════════ PANNELLO TRADUZIONI (translations/_panel.html) ══════════ */
.tr-panel { margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.tr-panel > label { display:flex; align-items:center; gap:7px; font-size:var(--fs-meta); font-weight:700; color:var(--text2); margin-bottom:13px; }
.tr-panel > label i { font-weight:400; color:var(--text3); font-style:normal; }
.tr-panel svg { width:16px; height:16px; stroke:var(--accent-text); fill:none; }
.tr-langs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tr-lang { display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; border:1px solid var(--border-md); background:var(--bg3); font-size:var(--fs-meta); font-weight:600; color:var(--text1); cursor:pointer; user-select:none; }
.tr-lang input { accent-color:var(--accent); cursor:pointer; margin:0; }
.tr-lang.st-done { border-color:#2dd87a; color:#7ef0b0; }
.tr-lang.st-pending { opacity:.65; }
.tr-lang.st-failed { border-color:#ff5a5a; }
.tr-lang .ok { color:#2dd87a; } .tr-lang .pend { opacity:.7; } .tr-lang .miss { color:#ff6a6a; }
.tr-actions { display:flex; gap:10px; margin-bottom:11px; flex-wrap:wrap; }
.tr-panel .btn-accent, .tr-panel .btn-soft { padding:10px 18px; border-radius:10px; font-size:var(--fs-meta); font-weight:700; cursor:pointer; border:1px solid transparent; font-family:inherit; }
.tr-panel .btn-accent { background:var(--accent); color:#fff; }
.tr-panel .btn-soft { background:var(--bg3); border-color:var(--border-md); color:var(--text1); }
.tr-panel .field-note { display:block; font-size:var(--fs-meta); color:var(--text3); line-height:1.5; }
.tr-panel .field-note a { color:var(--accent-text); font-weight:700; text-decoration:none; }

/* ══════════ CAPITOLI / SCENE (player detail) ══════════ */
.chap-view { margin-top:12px; padding:0 14px; }
@media(min-width:768px){ .chap-view { padding:0; } }
.chap-trackbar { position:relative; height:6px; background:var(--bg3); border-radius:3px; cursor:pointer; margin-bottom:13px; }
.chap-trackbar-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--accent); border-radius:3px; pointer-events:none; }
.chap-tick { position:absolute; top:50%; transform:translate(-50%,-50%); width:3px; height:13px; border-radius:2px; background:#fff; border:none; padding:0; cursor:pointer; opacity:.85; }
.chap-tick:hover { opacity:1; background:var(--accent-text); }
.chap-scenes-h { display:flex; align-items:center; gap:7px; font-size:var(--fs-meta); font-weight:700; color:var(--text2); margin-bottom:9px; }
.chap-scenes-h svg { stroke:var(--text3); fill:none; }
.chap-count { background:var(--bg3); color:var(--text3); font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; }
.chap-scenes-list { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:var(--border-md) transparent; }
.chap-scenes-list::-webkit-scrollbar { height:6px; }
.chap-scenes-list::-webkit-scrollbar-thumb { background:var(--border-md); border-radius:3px; }
.chap-scene { flex-shrink:0; display:flex; flex-direction:column; gap:3px; align-items:flex-start; background:var(--bg2); border:1px solid var(--border-md); border-radius:9px; padding:8px 12px; cursor:pointer; font-family:inherit; text-align:left; min-width:120px; max-width:210px; }
.chap-scene:hover { border-color:var(--accent); }
.chap-scene.active { border-color:var(--accent); background:var(--accent-dim); }
.chap-scene-t { font-size:12px; font-weight:800; color:var(--accent-text); font-variant-numeric:tabular-nums; }
.chap-scene-n { font-size:var(--fs-meta); color:var(--text1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ══════════ AVATAR MENU (tutte le larghezze) ══════════ */
.nav-avatar-wrap { position:relative; flex-shrink:0; }
.nav-avatar-dropdown { position:fixed; top:58px; right:12px; width:266px; max-width:calc(100vw - 24px); max-height:calc(100vh - 72px); overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--bg1); border:1px solid var(--border-md); border-radius:var(--r-lg); padding:8px; box-shadow:0 16px 44px rgba(0,0,0,0.55); display:none; z-index:300; }
.nav-avatar-wrap.open .nav-avatar-dropdown { display:block; }
.dropdown-head { display:flex; align-items:center; gap:11px; padding:8px 10px 12px; text-decoration:none; }
.dd-av { width:42px; height:42px; border-radius:50%; background:var(--accent-dim); border:1.5px solid var(--accent); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0; }
.dd-id { min-width:0; display:flex; flex-direction:column; }
.dd-name { font-size:14.5px; font-weight:700; color:var(--text1); display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-sub { font-size:12.5px; color:var(--text3); }
.dropdown-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; font-size:14px; font-weight:500; color:var(--text1); cursor:pointer; text-decoration:none; background:none; border:none; width:100%; box-sizing:border-box; font-family:inherit; text-align:left; }
.dropdown-item .ico { width:19px; height:19px; stroke:var(--text3); fill:none; flex-shrink:0; }
.dropdown-item:hover { background:var(--bg2); color:var(--accent-text); }
.dropdown-item:hover .ico { stroke:var(--accent-text); }
.dropdown-item-accent { color:var(--accent-text); font-weight:600; }
.dropdown-item-accent .ico { stroke:var(--accent-text); }
.dropdown-logout:hover { background:rgba(255,90,90,0.12); color:#ff6a6a; }
.dropdown-logout:hover .ico { stroke:#ff6a6a; }
.dropdown-sep { height:1px; background:var(--border); margin:6px 4px; }
.dropdown-label { font-size:10px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--text3); padding:8px 12px 3px; }
@media(min-width:1100px){
  .nav-avatar-dropdown { position:absolute; top:calc(100% + 12px); right:0; overflow:visible; max-height:none; }
  .nav-avatar-dropdown::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px; }
  .nav-avatar-wrap:hover .nav-avatar-dropdown { display:block; }
}
.nav-search-wrap { position:absolute; left:0; right:0; top:0; bottom:0; background:var(--bg1); display:flex; align-items:center; padding:0 14px; gap:10px; opacity:0; pointer-events:none; transition:opacity 0.25s; z-index:2; }
.nav-search-wrap.open { opacity:1; pointer-events:all; }
.nav-search-input { flex:1; background:var(--bg2); border:1px solid var(--border-md); border-radius:var(--r-pill); padding:8px 14px; font-size:14px; color:var(--text1); outline:none; font-family:inherit; }
.nav-search-input::placeholder { color:var(--text3); }
.search-close { background:transparent; border:none; padding:4px; cursor:pointer; color:var(--text2); font-size:14px; font-weight:500; white-space:nowrap; }
.nav.searching .hamburger,.nav.searching .nav-logo,.nav.searching .nav-spacer,
.nav.searching .search-btn,.nav.searching .nav-avatar,.nav.searching .nav-links { opacity:0; pointer-events:none; }

/* ══════════ NAV — desktop ══════════ */
@media(min-width:1100px){
  .nav-inner { height:66px; max-width:var(--max-w); margin:0 auto; padding:0 clamp(20px,4vw,48px); gap:0; overflow:visible; }
  .hamburger { display:none; }
  .nav-logo { font-size:23px; margin-right:36px; }
  .nav-links { display:flex; align-items:center; gap:2px; flex:1; }
  .nav-link { padding:8px 14px; border-radius:var(--r-md); font-size:14.5px; font-weight:500; color:var(--text2); cursor:pointer; white-space:nowrap; transition:background 0.15s, color 0.15s; text-decoration:none; position:relative; }
  .nav-link:hover { background:var(--bg2); color:var(--text1); }
  .nav-link.active { color:var(--text1); font-weight:600; }
  .nav-link.active::after { content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--accent); border-radius:2px; }
  .nav-spacer { display:none; }
  /* 1100–1279: ricerca come ICONA (gli 8 link entrano senza sforare) */
  .search-btn { display:flex; margin-right:10px; color:var(--text2); }
  .nav-search-desktop input { background:transparent; border:none; outline:none; font-size:14px; color:var(--text1); font-family:inherit; flex:1; }
  .nav-search-desktop input::placeholder { color:var(--text3); }
  .nav-avatar { width:38px; height:38px; font-size:14px; }
}

/* ══════════ NAV — barra ricerca piena (≥1280, c'è spazio) ══════════ */
@media(min-width:1280px){
  .search-btn { display:none; }
  .nav-search-desktop { display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--border-md); border-radius:var(--r-pill); padding:9px 16px; width:280px; cursor:text; margin-right:18px; transition:width 0.2s, border-color 0.2s; }
  .nav-search-desktop:focus-within { width:340px; border-color:var(--accent); }
}

/* ══════════ PILLS — mobile only ══════════ */
.pills-wrap { background:var(--bg1); border-bottom:1px solid var(--border); padding:8px 14px; display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; position:relative; z-index:1; }
.pills-wrap::-webkit-scrollbar { display:none; }
.pill { padding:6px 14px; border-radius:var(--r-pill); font-size:13px; font-weight:500; border:1px solid var(--border-md); color:var(--text2); white-space:nowrap; flex-shrink:0; background:transparent; cursor:pointer; text-decoration:none; }
.pill.on { background:var(--accent-dim); border-color:var(--accent); color:var(--accent-text); }
@media(min-width:1100px){ .pills-wrap { display:none; } }

/* badge "contenuto riservato" sulle card (video/album/racconti/blog) */
.lockbadge { position:absolute; top:8px; right:8px; left:auto; z-index:5; display:inline-flex; align-items:center; gap:4px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; letter-spacing:.02em; padding:3px 8px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.45); }
.lockbadge svg { width:11px !important; height:11px !important; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ══════════ CONTENT WRAP ══════════ */
.content-wrap { width:100%; padding:0; }
@media(min-width:768px){ .content-wrap { max-width:var(--max-w); margin:0 auto; padding:0 clamp(20px,4vw,48px); } }

/* ══════════ SHARED ══════════ */
.sec-head { padding:26px 14px 6px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.sec-title { font-size:var(--fs-sec); font-weight:700; color:var(--text1); letter-spacing:-0.01em; margin:0; line-height:1.2; }
/* H1 discreto dentro il box intro della home */
.intro-h1 { font-size:17px; font-weight:800; letter-spacing:-0.01em; color:var(--text1); margin:0 0 5px; }
/* intro: clamp a 2 righe finché chiuso, espandi con "Scopri di più" */
.intro-block:not(.open) .intro-text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sec-sub { font-size:var(--fs-body); color:var(--text2); padding:3px 14px 12px; }
.sec-link { font-size:13.5px; color:var(--accent-text); font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; }
.sec-link:hover { text-decoration:underline; }
@media(min-width:768px){ .sec-head { padding:34px 0 6px; } .sec-sub { padding:3px 0 14px; } }
.dot { width:3px; height:3px; border-radius:50%; background:var(--text3); opacity:0.6; flex-shrink:0; }
.lk { display:inline-flex; align-items:center; gap:4px; }
.lk-dot,.lkdot-g { width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; }
.lkdot-a { width:7px; height:7px; border-radius:50%; background:var(--amber); flex-shrink:0; }

.av,.vav { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.av { width:26px; height:26px; font-size:10px; border:1px solid var(--border-md); }
.vav { width:22px; height:22px; font-size:8px; border:1px solid var(--border-md); }
.av.a,.vav.a { background:var(--av-a-bg); color:var(--av-a-fg); }
.av.b,.vav.b { background:var(--av-b-bg); color:var(--av-b-fg); }
.av.c,.vav.c { background:var(--av-c-bg); color:var(--av-c-fg); }
.av.d,.vav.d { background:var(--av-d-bg); color:var(--av-d-fg); }
.av.e,.vav.e { background:var(--av-e-bg); color:var(--av-e-fg); }
.vtick { width:13px; height:13px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vtick::after { content:'✓'; font-size:8px; color:#fff; font-weight:800; }

.pc1{background:var(--pc1);} .pc2{background:var(--pc2);} .pc3{background:var(--pc3);}
.pc4{background:var(--pc4);} .pc5{background:var(--pc5);} .pc6{background:var(--pc6);}
.pc7{background:var(--pc7);} .pc8{background:var(--pc8);}

/* ══════════ VIDEO CARD ══════════ */
.vcard { display:block; background:transparent; border:none; border-radius:var(--r-md); cursor:pointer; text-decoration:none; color:inherit; }
.vthumb { width:100%; aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; background-color:#0b0b0d; background-image:var(--cover); background-size:contain; background-repeat:no-repeat; background-position:center; overflow:hidden; border-radius:var(--r-md); }
.vprev { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 0.3s; background:#000; }
.vprev.playing { opacity:1; }
.vthumb-foot { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:flex-end; gap:6px; padding:7px; pointer-events:none; z-index:2; }
.vchip { display:inline-flex; align-items:center; gap:5px; background:rgba(0,0,0,0.78); color:#fff; font-size:11px; font-weight:700; padding:3px 7px; border-radius:7px; }
.vchip-hd { background:var(--accent); color:#fff; font-size:9px; font-weight:800; padding:1px 5px; border-radius:4px; }
.vplay { width:42px; height:42px; border-radius:50%; background:rgba(216,0,0,0.25); border:1px solid rgba(216,0,0,0.5); display:flex; align-items:center; justify-content:center; transition:opacity 0.2s, transform 0.2s; }
.vplay::after { content:''; border-left:14px solid rgba(255,255,255,0.9); border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px; }
.vdur { position:absolute; bottom:8px; right:9px; background:rgba(0,0,0,0.82); color:#fff; font-size:12px; font-weight:700; padding:3px 7px; border-radius:4px; transition:opacity 0.2s; }
.vhd { position:absolute; top:8px; left:9px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:3px 7px; border-radius:3px; }
.vnew { position:absolute; top:8px; left:9px; background:rgba(45,216,122,0.92); color:#000; font-size:10px; font-weight:700; padding:3px 7px; border-radius:3px; }
.vprev-badge { position:absolute; top:8px; right:9px; display:flex; align-items:center; gap:4px; background:rgba(0,0,0,0.7); color:#fff; font-size:9px; font-weight:700; letter-spacing:0.05em; padding:3px 7px; border-radius:3px; opacity:0; transition:opacity 0.2s; }
.vprog { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.22); opacity:0; transition:opacity 0.2s; }
.vprog i { display:block; height:100%; width:0; background:var(--accent); }
.vwatched { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,0.28); z-index:2; transition:opacity 0.2s; }
.vwatched i { display:block; height:100%; background:var(--accent); border-radius:0 2px 2px 0; }
@media (hover:hover) and (pointer:fine){ .vcard:hover .vwatched { opacity:0; } }
.vinfo { padding:10px 2px 4px; display:flex; flex-direction:column; gap:8px; }
.vtitle { font-size:var(--fs-body); font-weight:600; color:var(--text1); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vcreator { display:flex; align-items:center; gap:8px; }
.vcreator .vav { width:28px; height:28px; font-size:10px; }
.vc-txt { display:flex; flex-direction:column; min-width:0; }
.vcname { font-size:12px; font-weight:600; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:3px; }
.vmeta { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* GRID — fluid */
.vgrid { display:flex; flex-direction:column; gap:12px; padding:0 14px; }
@media(min-width:768px){ .vgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(228px,1fr)); padding:0; gap:18px 14px; } }
@media(min-width:1280px){ .vgrid { grid-template-columns:repeat(auto-fill, minmax(248px,1fr)); gap:22px 16px; } }

/* varianti layout — solo mobile, comandate dallo switcher */
@media(max-width:767px){
  .vgrid.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .vgrid.two-col .vplay { width:28px; height:28px; }
  .vgrid.two-col .vdur { bottom:5px; right:6px; font-size:10px; padding:2px 5px; }
  .vgrid.two-col .vinfo { padding:8px 9px 9px; gap:4px; }
  .vgrid.two-col .vcreator { display:none; }
  .vgrid.compact { gap:0; padding:0; }
  .vgrid.compact .vcard { display:flex; flex-direction:row; border-radius:0; border-left:none; border-right:none; border-top:none; border-bottom:1px solid var(--border); padding:10px 14px; gap:11px; background:transparent; }
  .vgrid.compact .vcard:first-child { border-top:1px solid var(--border); }
  .vgrid.compact .vthumb { width:128px; flex-shrink:0; border-radius:var(--r-sm); overflow:hidden; align-self:flex-start; }
  .vgrid.compact .vplay { width:22px; height:22px; }
  .vgrid.compact .vinfo { padding:0; flex:1; min-width:0; gap:4px; justify-content:center; }
  .vgrid.compact .vcreator { display:none; }
}

/* hover-preview only where a real cursor exists */
@media (hover:hover) and (pointer:fine){
  .vcard:hover .vplay { opacity:0; transform:scale(0.7); }
  .vcard:hover .vdur { opacity:0; }
  .vcard:hover .vprev-badge { opacity:1; }
}
@keyframes pan { 0%{background-position:0% 0%;} 100%{background-position:100% 100%;} }
@keyframes scrub { from{width:0;} to{width:100%;} }

/* ══════════ HERO ══════════ */
.hero { padding:12px 14px 0; }
.hero-main { display:block; }
.hero-featured { position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--bg2); border:1px solid var(--border); }
.hero-thumb { width:100%; aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; background-size:160% 160%; }
.hero-grad { position:absolute; inset:0; background:linear-gradient(transparent 40%,rgba(0,0,0,0.9)); pointer-events:none; }
.hero-play { width:54px; height:54px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; z-index:1; box-shadow:0 0 0 8px var(--accent-dim); }
.hero-play::after { content:''; border-left:18px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }
.hero-dur { position:absolute; top:10px; right:12px; background:rgba(0,0,0,0.82); color:#fff; font-size:12px; font-weight:700; padding:3px 8px; border-radius:5px; z-index:2; }
.hero-hd { position:absolute; top:10px; left:12px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:3px 7px; border-radius:4px; z-index:2; }
.hero-info { padding:12px 14px 14px; }
.hero-creator { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.hero-cname { font-size:var(--fs-body); font-weight:500; color:var(--text2); }
.hero-title { font-size:var(--fs-hero); font-weight:700; color:var(--text1); line-height:var(--lh-tight); margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; letter-spacing:-0.01em; }
.hero-meta { display:flex; align-items:center; gap:6px; font-size:var(--fs-meta); color:var(--text2); flex-wrap:wrap; }
.hero-dots { display:flex; justify-content:center; gap:5px; padding:10px 0 2px; }
.hdot { width:6px; height:6px; border-radius:50%; background:var(--border-md); cursor:pointer; transition:width 0.2s, background 0.2s; }
.hdot.on { background:var(--accent); width:18px; border-radius:var(--r-pill); }

.hero-side { display:none; }
.hs-card { display:flex; gap:10px; cursor:pointer; padding:7px; border-radius:var(--r-md); transition:background 0.15s; text-decoration:none; color:inherit; }
.hs-thumb { width:120px; flex-shrink:0; aspect-ratio:16/9; border-radius:var(--r-sm); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hs-dur { position:absolute; bottom:4px; right:5px; background:rgba(0,0,0,0.82); color:#fff; font-size:10px; font-weight:700; padding:1px 5px; border-radius:3px; }
.hs-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.hs-title { font-size:var(--fs-body); font-weight:600; color:var(--text1); line-height:var(--lh-snug); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hs-meta { font-size:var(--fs-meta); color:var(--text2); }

@media(min-width:1100px){
  .hero { padding:28px 0 0; }
  .hero-main { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:22px; align-items:start; }
  .hero-featured { aspect-ratio:16/9; }
  .hero-thumb { position:absolute; inset:0; aspect-ratio:unset; height:100%; }
  .hero-info { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px 26px; }
  .hero-cname { color:rgba(255,255,255,0.85); }
  .hero-title { color:#fff; -webkit-line-clamp:2; margin-bottom:9px; }
  .hero-meta { color:rgba(255,255,255,0.78); }
  .hero-play { width:64px; height:64px; }
  .hero-play::after { border-left:22px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; }
  .hero-side { display:flex; flex-direction:column; gap:8px; height:100%; }
  .hero-side-label { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); padding:0 9px; flex-shrink:0; }
  .hero-side-scroll { display:flex; flex-direction:column; gap:6px; overflow-y:auto; flex:1 1 0; min-height:0; scrollbar-width:none; }
  .hero-side-scroll::-webkit-scrollbar { display:none; }
  .hs-card:hover { background:var(--bg2); }
  .hs-card:hover .hs-thumb { animation:pan 7s linear infinite; }
  .hero-dots { justify-content:flex-start; padding:14px 0 0; }
}
@media (hover:hover) and (pointer:fine){ .hero-thumb{ background-size:160% 160%; } .hero-featured:hover .hero-thumb{ animation:pan 8s linear infinite; } }

/* ── INTRO ── */
.intro-block { margin:14px 14px 0; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px; }
.intro-text { font-size:var(--fs-body); color:var(--text2); line-height:var(--lh-base); }
.intro-text strong { color:var(--text1); font-weight:600; }
.read-more { display:inline-block; margin-top:7px; font-size:13px; color:var(--accent-text); font-weight:600; cursor:pointer; }
@media(min-width:768px){ .intro-block { margin:22px 0 0; padding:18px 22px; } .intro-text { max-width:900px; } }

/* ── CATEGORIES ── */
.cat-grid { display:flex; gap:10px; padding:0 14px 4px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); }
.cat-grid::-webkit-scrollbar { display:none; }
.cat-card { width:168px; flex-shrink:0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); position:relative; aspect-ratio:3/2; display:flex; align-items:flex-end; cursor:pointer; transition:transform 0.18s, box-shadow 0.18s; text-decoration:none; }
.cat-bg { position:absolute; inset:0; z-index:0; transition:transform 0.4s ease; }
.cat-grad { position:absolute; inset:0; background:linear-gradient(transparent 30%,rgba(0,0,0,0.85)); z-index:1; }
.cat-info { position:relative; padding:9px 11px; z-index:2; }
.cat-name-lbl { font-size:var(--fs-title); font-weight:700; color:#fff; line-height:1.2; }
.cat-count-lbl { font-size:var(--fs-meta); color:rgba(255,255,255,0.75); margin-top:2px; }
@media(min-width:768px){ .cat-grid { padding:0 0 4px; gap:14px; } .cat-card { width:220px; aspect-ratio:16/10; } .cat-name-lbl { font-size:15px; } }
@media (hover:hover) and (pointer:fine){ .cat-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.4); } .cat-card:hover .cat-bg { transform:scale(1.07); } }

/* ── ALBUMS ── */
.alb-row { display:flex; gap:10px; padding:0 14px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.alb-row::-webkit-scrollbar { display:none; }
.alb-card { flex-shrink:0; width:150px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; cursor:pointer; transition:transform 0.18s, border-color 0.18s; }
.alb-thumb { width:100%; aspect-ratio:1/1; position:relative; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden; }
.alb-count { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,0.82); color:#fff; font-size:11px; font-weight:600; padding:2px 7px; border-radius:4px; display:flex; align-items:center; gap:4px; }
.photo-icon { width:32px; height:26px; border:2px solid rgba(255,255,255,0.35); border-radius:4px; position:relative; }
.photo-icon::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%; border:2px solid rgba(255,255,255,0.35); }
.alb-info { padding:9px 10px 10px; }
.alb-title { font-size:var(--fs-body); font-weight:500; color:var(--text1); line-height:var(--lh-snug); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.alb-meta { font-size:var(--fs-meta); color:var(--text2); margin-top:4px; }
@media(min-width:768px){ .alb-row { padding:0 0 6px; gap:16px; } }
@media (hover:hover) and (pointer:fine){ .alb-card:hover { transform:translateY(-3px); border-color:var(--border-md); } }
/* Card album standard (.acard): UGUALE in home e nella pagina /albums/ */
.acard{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;display:block;transition:border-color 0.15s}
.acard:hover{border-color:var(--border-md)}
.athumb{width:100%;aspect-ratio:4/3;position:relative;overflow:hidden;display:flex}
.athumb-bg{position:absolute;inset:0;background-image:var(--cover-set,var(--cover));background-size:cover;background-position:center;transition:transform 0.45s ease}
.acard:hover .athumb-bg{transform:scale(1.05)}
.athumb-grad{position:absolute;inset:0;background:linear-gradient(transparent 55%, rgba(0,0,0,0.5))}
.acount{position:absolute;top:9px;left:9px;z-index:2;display:flex;align-items:center;gap:5px;background:rgba(0,0,0,0.72);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px}
.acount .ico{stroke:#fff;width:14px;height:14px}
.ainfo{padding:11px 13px 13px}
.atitle{font-size:var(--fs-title);font-weight:600;color:var(--text1);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ameta{display:flex;align-items:center;gap:6px;font-size:var(--fs-meta);color:var(--text2);flex-wrap:wrap;margin-top:8px}
.aav{width:22px;height:22px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--av-a-bg,var(--bg3));color:var(--av-a-fg,var(--text1));font-size:10px;font-weight:700}
.aav .av-img{width:100%;height:100%;object-fit:cover}
.acname{font-weight:600;color:var(--text2)}
.alb-row .acard{flex-shrink:0;width:200px}
@media(min-width:768px){ .alb-row .acard{width:230px} }
/* frecce di scorrimento orizzontale (solo desktop, discrete: compaiono al passaggio del mouse) */
.hscroll-wrap{position:relative}
.hscroll-btn{position:absolute;top:42%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--border-md);background:var(--bg1);color:var(--text1);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;opacity:0;transition:opacity .18s,background .15s,border-color .15s;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.hscroll-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hscroll-btn.left{left:-6px}
.hscroll-btn.right{right:-6px}
.hscroll-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.hscroll-btn.hide{opacity:0 !important;pointer-events:none}
@media(hover:hover){ .hscroll-wrap:hover .hscroll-btn{opacity:1} }
@media(hover:none){ .hscroll-btn{display:none} }

/* ── CREATORS ── */
.cr-row { display:flex; gap:10px; padding:0 14px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cr-row::-webkit-scrollbar { display:none; }
.cr-card { flex-shrink:0; width:104px; display:flex; flex-direction:column; align-items:center; gap:7px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 8px; cursor:pointer; transition:transform 0.18s, border-color 0.18s; text-decoration:none; }
.cr-av { width:56px; height:56px; border-radius:50%; border:2px solid var(--border-md); display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; }
.cr-av.a{background:var(--av-a-bg);color:var(--av-a-fg);}
.cr-av.b{background:var(--av-b-bg);color:var(--av-b-fg);}
.cr-av.c{background:var(--av-c-bg);color:var(--av-c-fg);}
.cr-av.d{background:var(--av-d-bg);color:var(--av-d-fg);}
.cr-av.e{background:var(--av-e-bg);color:var(--av-e-fg);}
.cr-name { font-size:var(--fs-body); font-weight:600; color:var(--text1); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; }
.cr-stats { font-size:var(--fs-meta); color:var(--text2); text-align:center; line-height:1.5; }
.cr-follow { padding:5px 13px; border-radius:var(--r-pill); border:1px solid var(--accent); color:var(--accent-text); font-size:12px; font-weight:600; background:var(--accent-dim); white-space:nowrap; cursor:pointer; }
@media(min-width:768px){ .cr-row { padding:0; gap:16px; overflow:visible; display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); } .cr-card { width:auto; flex-shrink:unset; padding:22px 12px; } .cr-av { width:68px; height:68px; font-size:21px; } .cr-name { font-size:13px; } }
@media (hover:hover) and (pointer:fine){ .cr-card:hover { transform:translateY(-3px); border-color:var(--border-md); } }

/* load more */
.load-more { display:block; margin:18px 14px 0; background:transparent; border:1px solid var(--border-md); border-radius:var(--r-md); padding:14px; font-size:14px; font-weight:600; color:var(--text2); text-align:center; width:calc(100% - 28px); cursor:pointer; transition:background 0.15s, color 0.15s; }
.load-more:hover { background:var(--bg2); color:var(--text1); }
@media(min-width:768px){ .load-more { margin:24px auto 0; width:auto; min-width:260px; padding:14px 40px; } }

/* ── SEO FOOTER ── */
.seo-footer { margin:24px 14px 0; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; }
.seo-footer h2 { font-size:15px; font-weight:700; color:var(--text1); margin-bottom:9px; }
.seo-text { font-size:var(--fs-body); color:var(--text2); line-height:1.75; }
.seo-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.seo-tag { padding:5px 12px; border-radius:var(--r-pill); background:var(--bg3); border:1px solid var(--border); font-size:13px; color:var(--text2); cursor:pointer; text-decoration:none; transition:color 0.15s, border-color 0.15s; }
.seo-tag:hover { color:var(--accent-text); border-color:var(--accent); }
@media(min-width:768px){ .seo-footer { margin:36px 0 0; padding:26px 30px; } .seo-text { max-width:900px; } }

/* ── RACCONTI ── */
.racconto-list { display:flex; flex-direction:column; gap:1px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin:0 14px; }
.racconto-card { display:flex; gap:12px; padding:14px; border-bottom:1px solid var(--border); cursor:pointer; text-decoration:none; color:inherit; }
.racconto-card:last-child { border-bottom:none; }
.racconto-cover { width:70px; height:70px; border-radius:var(--r-md); flex-shrink:0; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.racconto-cover svg { position:relative; z-index:1; stroke:rgba(255,255,255,0.4); fill:none; width:24px; height:24px; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.racconto-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.racconto-title { font-size:var(--fs-body); font-weight:600; color:var(--text1); line-height:var(--lh-snug); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.racconto-excerpt { font-size:var(--fs-meta); color:var(--text2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.racconto-meta { display:flex; align-items:center; gap:8px; font-size:var(--fs-meta); color:var(--text3); flex-wrap:wrap; }
.racconto-privacy { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:var(--r-pill); background:var(--bg3); font-size:11px; font-weight:600; color:var(--text2); }
@media(min-width:768px){
  .racconto-list { margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); gap:14px; background:transparent; border:none; border-radius:0; overflow:visible; }
  .racconto-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-md); transition:border-color 0.15s, transform 0.15s; }
}
@media (hover:hover) and (pointer:fine){ .racconto-card:hover { border-color:var(--border-md); transform:translateY(-2px); } }

/* ── BLOG ── */
.blog-row { display:flex; gap:12px; padding:0 14px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.blog-row::-webkit-scrollbar { display:none; }
.blog-card { flex-shrink:0; width:280px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:transform 0.15s, border-color 0.15s; text-decoration:none; color:inherit; }
.blog-thumb { width:100%; aspect-ratio:16/9; position:relative; overflow:hidden; }
.blog-thumb-bg { position:absolute; inset:0; }
.blog-thumb-cat { position:absolute; top:10px; left:10px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); letter-spacing:0.04em; }
.blog-info { padding:13px 14px 15px; display:flex; flex-direction:column; gap:6px; }
.blog-title { font-size:var(--fs-title); font-weight:600; color:var(--text1); line-height:var(--lh-snug); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-excerpt { font-size:var(--fs-meta); color:var(--text2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-meta { display:flex; align-items:center; gap:6px; font-size:var(--fs-meta); color:var(--text3); margin-top:2px; }
.blog-author-av { width:20px; height:20px; border-radius:50%; background:var(--accent-dim); border:1px solid var(--accent); display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; color:var(--accent-text); flex-shrink:0; }
@media(min-width:768px){ .blog-row { padding:0; gap:18px; overflow:visible; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); } .blog-card { width:auto; flex-shrink:unset; } }
@media (hover:hover) and (pointer:fine){ .blog-card:hover { transform:translateY(-3px); border-color:var(--border-md); } }

/* ── LAYOUT SWITCH (sheet) ── */
.layout-row { display:flex; gap:8px; }
.layout-btn { flex:1; padding:10px 0; border-radius:var(--r-md); border:1px solid var(--border-md); background:transparent; font-size:11px; font-weight:600; color:var(--text2); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; }
.layout-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent-text); }
.layout-icon { display:flex; flex-direction:column; gap:2px; }
.li { background:currentColor; border-radius:1px; opacity:0.65; }

/* ── COMPLIANCE / FOOTER ISTITUZIONALE ── */
.age-box { background:var(--accent-dim); border:1px solid var(--accent); border-radius:var(--r-md); padding:10px 13px; display:flex; align-items:center; gap:10px; }
.age-box-num { font-size:16px; font-weight:800; color:var(--accent-text); flex-shrink:0; }
.age-box-text { font-size:12px; color:var(--text2); line-height:1.5; }
.compliance-badge { padding:4px 10px; border-radius:var(--r-sm); border:1px solid var(--border-md); font-size:10px; font-weight:700; color:var(--text3); letter-spacing:0.06em; white-space:nowrap; }

.mobile-footer { margin-top:28px; background:var(--bg1); border-top:1px solid var(--border); padding:20px 14px calc(80px + env(safe-area-inset-bottom)); }
@media(min-width:1100px){ .mobile-footer { display:none; } }
.mf-brand { font-size:20px; font-weight:800; color:var(--text1); letter-spacing:-0.03em; margin-bottom:6px; }
.mf-brand span { color:var(--accent); }
.mf-tag { font-size:12px; color:var(--text3); line-height:1.6; margin-bottom:18px; }
.mf-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0 20px; }
.mf-col-title { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); margin-bottom:10px; }
.mf-links { display:flex; flex-direction:column; gap:8px; }
.mf-links a { font-size:13px; color:var(--text2); text-decoration:none; cursor:pointer; }
.compliance-badges { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.mf-sep { height:1px; background:var(--border); margin-bottom:14px; }
.mf-copy { font-size:12px; color:var(--text3); line-height:1.6; }

/* ══════════ BOTTOM NAV — mobile ══════════ */
.bottom-nav { background:var(--bg1); border-top:1px solid var(--border); display:flex; justify-content:space-around; align-items:center; position:fixed; bottom:0; left:0; right:0; z-index:80; padding:10px 0 calc(10px + env(safe-area-inset-bottom)); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.bottom-nav.hidden { transform:translateY(100%); }
.bnav-item { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; padding:0 20px; color:var(--text3); -webkit-tap-highlight-color:transparent; text-decoration:none; }
.bnav-item.active { color:var(--accent); }
.bnav-label { font-size:11.5px; font-weight:600; }
@media(min-width:1100px){ .bottom-nav { display:none; } }

/* ══════════ DRAWER — mobile ══════════ */
.drawer-overlay { position:fixed; inset:0; z-index:150; background:rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition:opacity 0.25s; }
.drawer-overlay.open { opacity:1; pointer-events:all; }
.drawer { position:fixed; top:0; left:0; bottom:0; z-index:160; width:290px; background:var(--bg1); border-right:1px solid var(--border-md); transform:translateX(-100%); transition:transform 0.28s cubic-bezier(0.4,0,0.2,1); display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); }
.drawer-header { padding:20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.drawer-logo { font-size:20px; font-weight:800; color:var(--text1); letter-spacing:-0.03em; }
.drawer-logo span { color:var(--accent); }
.drawer-close { width:32px; height:32px; border-radius:50%; background:var(--bg3); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); }
.drawer-nav { flex:1; overflow-y:auto; padding:8px 0; }
.drawer-section-label { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); padding:12px 20px 6px; }
.drawer-item { display:flex; align-items:center; gap:14px; padding:11px 20px; cursor:pointer; text-decoration:none; }
.drawer-item:active { background:var(--bg2); }
.drawer-item-icon { width:38px; height:38px; border-radius:var(--r-md); background:var(--bg3); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text2); }
.drawer-item-icon.accent { background:var(--accent-dim); color:var(--accent-text); }
.drawer-item-label { font-size:14px; font-weight:500; color:var(--text1); }
.drawer-item-sub { font-size:12px; color:var(--text3); margin-top:1px; }
.drawer-sep { height:1px; background:var(--border); margin:6px 20px; }
@media(min-width:1100px){ .drawer-overlay,.drawer { display:none !important; } }

/* ══════════ SHEET — mobile ══════════ */
.sheet-overlay { position:fixed; inset:0; z-index:150; background:rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition:opacity 0.25s; }
.sheet-overlay.open { opacity:1; pointer-events:all; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:160; background:var(--bg1); border-top:1px solid var(--border-md); border-radius:20px 20px 0 0; transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
.sheet.open { transform:translateY(0); }
.sheet-handle { width:40px; height:4px; border-radius:2px; background:var(--border-md); margin:12px auto 4px; }
.sheet-header { padding:12px 20px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.sheet-avatar { width:44px; height:44px; border-radius:50%; background:var(--accent-dim); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:var(--accent-text); }
.sheet-user-info { flex:1; }
.sheet-username { font-size:15px; font-weight:600; color:var(--text1); }
.sheet-usersub { font-size:12px; color:var(--text3); margin-top:2px; }
.sheet-login-btn { padding:7px 16px; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-size:13px; font-weight:600; border:none; cursor:pointer; }
.sheet-body { padding:16px 20px; display:flex; flex-direction:column; gap:20px; }
.sheet-label { font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--text3); margin-bottom:8px; }
.mode-row { display:flex; gap:8px; }
.mode-btn { flex:1; padding:9px 0; border-radius:var(--r-md); border:1px solid var(--border-md); background:transparent; font-size:12px; font-weight:500; color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.mode-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent-text); }
.mode-icon { width:14px; height:14px; border-radius:50%; }
.mi-dark{background:#1a1a1a;border:1px solid #444;} .mi-light{background:#f0f0f0;border:1px solid #ccc;} .mi-auto{background:linear-gradient(135deg,#1a1a1a 50%,#f0f0f0 50%);border:1px solid #888;}
.accent-swatches { display:flex; gap:10px; flex-wrap:wrap; }
.acc-sw { width:34px; height:34px; border-radius:50%; cursor:pointer; border:2px solid transparent; position:relative; transition:transform 0.1s; }
.acc-sw:active { transform:scale(0.9); }
.acc-sw.active { border-color:var(--text1); }
.acc-sw.active::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.9); }
@media(min-width:1100px){ .sheet-overlay,.sheet { display:none !important; } }

/* ══════════ DESKTOP FOOTER ══════════ */
.desktop-footer { display:none; }
@media(min-width:1100px){
  .desktop-footer { display:block; margin-top:56px; background:var(--bg1); border-top:1px solid var(--border); padding:40px 0 0; }
  .footer-inner { max-width:var(--max-w); margin:0 auto; padding:0 clamp(20px,4vw,48px); display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:40px; }
  .footer-compliance { max-width:var(--max-w); margin:28px auto 0; padding:20px clamp(20px,4vw,48px) 0; border-top:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .footer-compliance .age-box { flex:1; min-width:280px; }
  .footer-brand-logo { font-size:24px; font-weight:800; color:var(--text1); letter-spacing:-0.03em; margin-bottom:10px; }
  .footer-brand-logo span { color:var(--accent); }
  .footer-brand-desc { font-size:13px; color:var(--text3); line-height:1.7; max-width:300px; }
  .footer-col-title { font-size:12px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--text3); margin-bottom:14px; }
  .footer-link { display:block; font-size:13.5px; color:var(--text2); margin-bottom:9px; cursor:pointer; text-decoration:none; }
  .footer-link:hover { color:var(--accent-text); }
  .footer-bottom { max-width:var(--max-w); margin:32px auto 0; padding:18px clamp(20px,4vw,48px) 32px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text3); }
}

/* ══════════ VIDEO DETAIL (/video/<slug>) ══════════ */
@media(min-width:768px){ .video-top { padding-top:18px; } }
.video-layout { display:block; }
@media(min-width:1024px){ .video-layout { display:grid; grid-template-columns:minmax(0,1fr) var(--side-w); gap:28px; align-items:start; } }
.breadcrumb { display:flex; align-items:center; gap:5px; font-size:var(--fs-meta); color:var(--text3); padding:12px 14px 11px; flex-wrap:wrap; }
.breadcrumb a { color:var(--accent-text); font-weight:500; cursor:pointer; text-decoration:none; }
@media(min-width:768px){ .breadcrumb { padding:0 0 12px; } }
/* dentro la cat-header il margine laterale lo dà già il contenitore (14px):
   azzero il padding orizzontale della breadcrumb per non avere doppio indent su mobile */
.cat-header .breadcrumb { padding-left:0; padding-right:0; }
.player-wrap { width:100%; aspect-ratio:16/9; background:#000; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
@media(min-width:768px){ .player-wrap { border-radius:var(--r-lg); } }
.player-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.player-bg { position:absolute; inset:0; background:var(--pc1); background-size:cover; background-position:center; }
.player-grad-bot { position:absolute; bottom:0; left:0; right:0; height:42%; background:linear-gradient(transparent,rgba(0,0,0,0.9)); }
.player-big-play { position:relative; z-index:1; width:clamp(56px,7vw,72px); height:clamp(56px,7vw,72px); border-radius:50%; background:rgba(216,0,0,0.9); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 12px rgba(216,0,0,0.15); cursor:pointer; transition:transform 0.15s; }
.player-big-play:hover { transform:scale(1.06); }
.player-big-play::after { content:''; border-left:clamp(20px,2.4vw,24px) solid #fff; border-top:14px solid transparent; border-bottom:14px solid transparent; margin-left:5px; }
.player-hd-badge { position:absolute; top:12px; right:14px; z-index:3; background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; letter-spacing:0.05em; }
.player-controls { position:absolute; bottom:0; left:0; right:0; z-index:3; padding:10px 14px 12px; }
.player-progress { width:100%; height:4px; background:rgba(255,255,255,0.25); border-radius:2px; margin-bottom:10px; cursor:pointer; position:relative; }
.player-progress-fill { height:100%; background:var(--accent); border-radius:2px; width:0%; position:relative; }
.player-progress-fill::after { content:''; position:absolute; right:-5px; top:-4px; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--accent); }

/* ── PLAYER CUSTOM (con marker capitoli sulla timeline) ── */
.pv-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; z-index:2; }
.player-wrap.pv-playing .pv-center { opacity:0; pointer-events:none; }
.pv-center-ic { width:clamp(56px,7vw,72px); height:clamp(56px,7vw,72px); border-radius:50%; background:rgba(216,0,0,0.9); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 12px rgba(216,0,0,0.15); transition:transform 0.15s; }
.pv-center:hover .pv-center-ic { transform:scale(1.06); }
.pv-center-ic::after { content:''; border-left:clamp(20px,2.4vw,24px) solid #fff; border-top:14px solid transparent; border-bottom:14px solid transparent; margin-left:5px; }
.pv-controls { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:8px 12px 11px; background:linear-gradient(transparent,rgba(0,0,0,0.72)); opacity:1; transition:opacity 0.25s; }
.player-wrap.pv-playing:not(:hover) .pv-controls { opacity:0; }
.pv-scrub { position:relative; height:6px; background:rgba(255,255,255,0.28); border-radius:3px; cursor:pointer; margin-bottom:7px; }
.pv-buffered { position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(255,255,255,0.28); border-radius:3px; }
.pv-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--accent); border-radius:3px; }
.pv-head { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,0.35); pointer-events:none; }
.pv-mark { position:absolute; top:50%; transform:translate(-50%,-50%); width:4px; height:14px; border-radius:2px; background:#fff; border:1px solid rgba(0,0,0,0.55); cursor:pointer; z-index:1; padding:0; }
.pv-mark:hover { background:var(--accent); height:19px; }
.pv-row { display:flex; align-items:center; gap:11px; color:#fff; }
.pv-btn { background:none; border:none; color:#fff; cursor:pointer; padding:2px; display:flex; align-items:center; }
.pv-btn svg { width:21px; height:21px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pv-i-play, .pv-i-pause { fill:#fff; stroke:none; }
/* toggle icone via classe sul wrapper (gli <svg> non supportano l'attributo hidden) */
.pv-i-pause, .pv-i-mute { display:none; }
.player-wrap.pv-playing .pv-i-play { display:none; }
.player-wrap.pv-playing .pv-i-pause { display:block; }
.player-wrap.pv-muted .pv-i-vol { display:none; }
.player-wrap.pv-muted .pv-i-mute { display:block; }
.pv-time { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pv-chaplabel { font-size:12px; color:rgba(255,255,255,0.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%; }
.pv-spacer { flex:1; }
/* loading durante seek/buffer */
.pv-loading { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.4); z-index:4; }
.player-wrap.pv-loading-on .pv-loading { display:flex; }
.player-wrap.pv-loading-on .pv-center { opacity:0; }
.pv-spinner { width:46px; height:46px; border:4px solid rgba(255,255,255,0.28); border-top-color:#fff; border-radius:50%; animation:pvspin 0.8s linear infinite; }
@keyframes pvspin { to { transform:rotate(360deg); } }
/* ── Player: ottimizzazione touch (mobile / dispositivi senza hover) ─────── */
@media (hover: none) {
  /* su touch i controlli si rivelano col tap (.pv-show-controls via JS) e si autonascondono */
  .player-wrap.pv-playing .pv-controls { opacity:0; pointer-events:none; }
  .player-wrap.pv-playing.pv-show-controls .pv-controls { opacity:1; pointer-events:auto; }
  /* il PLAY centrale appare SOLO in pausa: MAI durante la riproduzione, nemmeno quando si
     rivelano i controlli per scrubbare (era il bug dell'icona play sempre visibile) */
  .player-wrap.pv-playing .pv-center { opacity:0 !important; pointer-events:none; }
  .pv-center-ic { width:clamp(58px,15vw,74px); height:clamp(58px,15vw,74px); background:rgba(216,0,0,0.92); box-shadow:0 6px 20px rgba(0,0,0,0.45); }
  /* barra controlli: gradiente pieno + padding comodo */
  .pv-controls { padding:22px 12px 12px; background:linear-gradient(transparent, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.86)); }
  .pv-row { gap:4px; }
  .pv-btn { padding:8px; }
  .pv-btn svg { width:24px; height:24px; }
  .pv-time { font-size:13px; font-weight:600; }
  /* scrub pulita: sottile, fill+pallino accent, area di tocco generosa (pseudo invisibile) */
  .pv-scrub { height:4px; margin-bottom:12px; background:rgba(255,255,255,0.3); }
  .pv-scrub::before { content:''; position:absolute; left:0; right:0; top:-16px; bottom:-12px; }
  .pv-head { width:14px; height:14px; background:var(--accent); box-shadow:0 0 0 4px rgba(216,0,0,0.25); }
  .pv-mark { width:5px; height:15px; }
  /* qualità: bottone come PILL bordata (il menu bottom-sheet è nel blocco sotto) */
  .pv-q-btn { border:1px solid rgba(255,255,255,0.32); border-radius:999px; padding:5px 11px; gap:6px; }
  .pv-q-cur { font-size:12px; font-weight:700; }
}
/* Menu qualità = BOTTOM-SHEET modale su touch O su schermi stretti, così non esce MAI
   dal viewport qualunque sia il supporto hover del device (fix tooltip fuori schermo). */
@media (hover: none), (max-width: 767px) {
  /* specificità .pv-quality .pv-qmenu (0,2,0) per battere la regola inline di detail.html
     (.pv-qmenu, 0,1,0) che sta dopo nel <head> e altrimenti vincerebbe */
  .pv-quality .pv-qmenu { position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; min-width:0; max-width:none;
    padding:6px 8px calc(14px + env(safe-area-inset-bottom)); border:none; border-radius:18px 18px 0 0;
    background:rgba(22,22,24,0.99); box-shadow:0 -12px 40px rgba(0,0,0,0.5); z-index:9999; gap:2px; }
  /* scrim VERO (cattura il tap -> chiude, non preme la navbar dietro), sopra navbar(80)/FAB(120) */
  .pv-quality.open .pv-qscrim { display:block; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:9998; }
  .pv-quality .pv-qmenu::before { content:"Qualità"; display:block; padding:12px 16px 10px; font-size:12px; font-weight:800;
    color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.07em; }
  .pv-quality .pv-qopt { padding:15px 18px; font-size:16px; min-height:54px; border-radius:11px; }
  .pv-quality .pv-qopt.on { background:rgba(255,255,255,0.07); }
}
/* ── Accessibilità: focus visibile SOLO da tastiera (non disturba il mouse) ── */
/* focus visibile da tastiera SOLO su elementi senza focus proprio (no input/textarea/select:
   quelli hanno già il loro stile -> evita il doppio anello, es. sulla search bar) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
.vcard:focus-visible, .related-card:focus-visible, .tag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* tooltip thumbnail capitolo sul marker */
.pv-tip { position:absolute; bottom:26px; transform:translateX(-50%); background:var(--bg1); border:1px solid var(--border-md); border-radius:8px; padding:5px; box-shadow:0 8px 24px rgba(0,0,0,0.6); display:none; z-index:5; pointer-events:none; width:150px; }
.pv-tip.show { display:block; }
.pv-tip img { width:100%; aspect-ratio:16/9; object-fit:contain; border-radius:5px; display:block; background:#000; }
.pv-tip-cap { display:flex; gap:6px; align-items:baseline; margin-top:4px; }
.pv-tip-t { font-size:10px; font-weight:800; color:var(--accent-text); font-variant-numeric:tabular-nums; flex-shrink:0; }
.pv-tip-n { font-size:11px; color:var(--text1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-btns { display:flex; align-items:center; gap:16px; }
.player-btn { background:transparent; border:none; color:rgba(255,255,255,0.92); cursor:pointer; padding:2px; display:flex; align-items:center; }
.player-time { font-size:12.5px; font-weight:500; color:rgba(255,255,255,0.85); margin-left:2px; flex:1; }
.vinfo-area { padding:0 14px; }
@media(min-width:768px){ .vinfo-area { padding:0; } }
.video-title-main { font-size:18px; font-weight:600; color:var(--text1); line-height:1.38; margin:14px 0 10px; letter-spacing:-0.005em; }
@media(min-width:768px){ .video-title-main { font-size:21px; margin:16px 0 10px; } }
.video-meta-row { display:flex; align-items:center; gap:7px; font-size:var(--fs-meta); color:var(--text2); flex-wrap:wrap; margin-bottom:16px; }
.actions-row { display:flex; gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:0 -14px; overflow-x:auto; scrollbar-width:none; }
.actions-row::-webkit-scrollbar { display:none; }
@media(min-width:768px){ .actions-row { margin:0; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; } }
.action-btn { flex:1; min-width:66px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 8px; cursor:pointer; background:transparent; border:none; color:var(--text2); transition:color 0.15s, background 0.15s; text-decoration:none; }
.action-btn:hover { color:var(--text1); background:var(--bg2); }
.action-btn.liked { color:var(--accent-text); }
.action-label { font-size:11px; font-weight:500; color:inherit; white-space:nowrap; }
.action-count { font-size:12.5px; font-weight:700; color:var(--text1); }
.creator-block { display:flex; align-items:center; gap:13px; padding:16px 0; border-bottom:1px solid var(--border); }
.creator-av-lg { width:50px; height:50px; border-radius:50%; background:var(--av-a-bg); border:2px solid var(--border-md); display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:var(--av-a-fg); flex-shrink:0; text-decoration:none; }
.creator-info { flex:1; min-width:0; }
.creator-name-row { font-size:var(--fs-body); font-weight:600; color:var(--text1); display:flex; align-items:center; gap:6px; }
.creator-stats { font-size:var(--fs-meta); color:var(--text3); margin-top:2px; }
.follow-btn { padding:9px 20px; border-radius:var(--r-pill); border:1.5px solid var(--accent); color:var(--accent-text); font-size:var(--fs-meta); font-weight:600; background:var(--accent-dim); cursor:pointer; flex-shrink:0; transition:background 0.15s,color 0.15s; }
.follow-btn:hover { background:var(--accent); color:#fff; }
.desc-block { padding:16px 0; border-bottom:1px solid var(--border); }
.desc-text { font-size:var(--fs-body); color:var(--text2); line-height:1.7; }
.desc-text.clamped { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.desc-toggle { display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:var(--fs-meta); color:var(--accent-text); font-weight:600; cursor:pointer; background:none; border:none; padding:0; }
.desc-toggle .ico { transition:transform 0.25s; }
.desc-toggle.open .ico { transform:rotate(180deg); }
.tags-block { padding:16px 0; border-bottom:1px solid var(--border); }
.tags-label { font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--text3); margin-bottom:10px; }
.tags-row { display:flex; flex-wrap:wrap; gap:7px; }
.tag { padding:6px 13px; border-radius:var(--r-pill); background:var(--bg2); border:1px solid var(--border-md); font-size:var(--fs-meta); color:var(--text2); cursor:pointer; transition:color 0.15s,border-color 0.15s; text-decoration:none; }
.tag:hover { color:var(--accent-text); border-color:var(--accent); }
/* chip categoria: evidenziato rispetto ai tag */
.tag-cat { background:color-mix(in srgb, var(--accent) 16%, transparent); border-color:var(--accent); color:var(--accent-text); font-weight:700; }
.tag-cat:hover { color:var(--accent-text); }
/* meta categoria+tag nel pannello short */
.short-meta { display:flex; flex-wrap:wrap; gap:7px; padding:12px 0; border-bottom:1px solid var(--border); }
.comments-block { padding:18px 0; }
.comments-header { display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.comments-title { font-size:var(--fs-sec); font-weight:700; color:var(--text1); }
.comments-count { font-size:var(--fs-body); color:var(--text3); }
.comments-chevron { stroke:var(--text3); transition:transform 0.25s; }
.comments-chevron.open { transform:rotate(180deg); }
.comments-body { margin-top:16px; display:none; flex-direction:column; gap:16px; }
.comments-body.open { display:flex; }
.comment-input-row { display:flex; gap:11px; align-items:flex-start; }
.comment-av { width:36px; height:36px; border-radius:50%; background:var(--accent-dim); border:1px solid var(--accent); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--accent-text); }
.comment-input { flex:1; background:var(--bg2); border:1px solid var(--border-md); border-radius:var(--r-md); padding:10px 13px; font-size:var(--fs-body); color:var(--text1); outline:none; font-family:inherit; }
.comment-input:focus { border-color:var(--accent); }
.comment { display:flex; gap:11px; }
.comment-av-sm { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; border:1px solid var(--border-md); background:var(--av-b-bg); color:var(--av-b-fg); }
.comment-body { flex:1; min-width:0; }
.comment-header { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.comment-user { font-size:var(--fs-body); font-weight:600; color:var(--text1); }
.comment-time { font-size:var(--fs-meta); color:var(--text3); }
.comment-text { font-size:var(--fs-body); color:var(--text2); line-height:1.6; overflow-wrap:anywhere; word-break:break-word; }
.comment-header { flex-wrap:wrap; }   /* nomi/handle lunghi non spingono fuori la riga */
.comment-actions { display:flex; align-items:center; gap:16px; margin-top:8px; }
.comment-like { display:flex; align-items:center; gap:5px; font-size:var(--fs-meta); color:var(--text3); cursor:pointer; background:none; border:none; padding:0; font-weight:500; }
.comment-like:hover { color:var(--accent-text); }
.comments-load-more { font-size:var(--fs-body); color:var(--accent-text); font-weight:600; cursor:pointer; text-align:center; padding:6px 0 0; background:none; border:none; width:100%; }
.related-section { padding:18px 0 0; }
@media(min-width:1024px){ .related-section.mobile-only { display:none; } }
.sidebar { display:none; }
@media(min-width:1024px){ .sidebar { display:block; position:sticky; top:84px; } }
.sidebar-title,.related-mobile-title { font-size:var(--fs-sec); font-weight:700; color:var(--text1); margin-bottom:14px; padding:0; }
.related-list { display:flex; flex-direction:column; gap:2px; }
.related-card { display:flex; gap:11px; padding:10px 0; cursor:pointer; transition:background 0.15s; text-decoration:none; color:inherit; }
@media(min-width:768px){ .related-card { padding:10px; border-radius:var(--r-md); margin:0 -10px; } }
.related-card:hover { background:var(--bg2); }
.related-thumb { width:148px; flex-shrink:0; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; background-color:#000; background-image:var(--cover); background-size:cover; background-position:center; }
/* AVIF con fallback JPG: image-set() se presente (--cover-set), altrimenti JPG.
   I browser senza image-set ignorano questa regola e usano il background-image JPG sopra. */
.vthumb, .related-thumb { background-image: var(--cover-set, var(--cover)); }
/* Switch tipi di contenuto della categoria (Video/Foto/Short) — link crawlabili */
.cat-switch{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 14px}
@media(min-width:768px){ .cat-switch{padding:6px 0 16px} }
.cat-sw{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;border:1px solid var(--border-md);background:var(--bg2);color:var(--text2);font-size:var(--fs-meta);font-weight:700;text-decoration:none}
.cat-sw:hover{border-color:var(--accent);color:var(--accent-text);background:var(--accent-dim)}
.cat-sw.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cat-sw b{font-weight:800;font-size:11px;opacity:.75}
.cat-sw.on b{opacity:1}
/* Barra categorie: riga SINGOLA a scorrimento (desktop+mobile, niente wrap = niente
   tag-cloud) con fade a destra; bottone "Tutte le categorie" fisso fuori dallo scroll. */
.subcat-bar{display:flex;align-items:center;gap:10px;padding:14px}
@media(min-width:768px){ .subcat-bar{padding:16px 0 6px} }
.subcat-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.subcat-row::-webkit-scrollbar{display:none}
.subcat{padding:7px 15px;border-radius:999px;border:1px solid var(--border-md);font-size:var(--fs-meta);font-weight:500;color:var(--text2);white-space:nowrap;flex-shrink:0;background:transparent;cursor:pointer;text-decoration:none}
.subcat:hover{border-color:var(--text3);color:var(--text1)}
.subcat.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-text)}
.subcat-all{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:999px;border:1px solid var(--accent);background:var(--accent-dim);color:var(--accent-text);font-size:var(--fs-meta);font-weight:700;white-space:nowrap;text-decoration:none}
.subcat-all:hover{background:var(--accent);color:#fff}
.rplay { width:26px; height:26px; border-radius:50%; background:rgba(216,0,0,0.3); border:1px solid rgba(216,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.rplay::after { content:''; border-left:9px solid rgba(255,255,255,0.9); border-top:5px solid transparent; border-bottom:5px solid transparent; margin-left:1px; }
.rdur { position:absolute; bottom:4px; right:5px; background:rgba(0,0,0,0.82); color:#fff; font-size:10px; font-weight:700; padding:1px 5px; border-radius:3px; }
.rhd { position:absolute; top:4px; left:5px; background:var(--accent); color:#fff; font-size:8px; font-weight:700; padding:2px 4px; border-radius:3px; }
.related-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.related-title-text { font-size:var(--fs-body); font-weight:500; color:var(--text1); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related-cname { font-size:var(--fs-meta); color:var(--text2); }
.related-meta { font-size:var(--fs-meta); color:var(--text3); }

/* ── card SHORT (.scard) — globale: stessa card in /shorts/, home, profilo ── */
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 14px}
@media(min-width:600px){ .sgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:0} }
.sgrid.large{grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){ .sgrid.large{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} }
.scard{text-decoration:none;color:inherit}
.scard-thumb{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#3a2440,#241a2e);background-size:cover;background-position:center}
.scard-prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;z-index:1}
.scard-prev.playing{opacity:1}
.scard-grad{position:absolute;inset:0;background:linear-gradient(transparent 55%, rgba(0,0,0,0.75));z-index:1}
.scard-play{position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,0.4);z-index:1}
.scard-play::after{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.scard-views{position:absolute;top:8px;left:8px;z-index:2;background:rgba(0,0,0,0.55);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.scard-caption{position:absolute;left:9px;right:9px;bottom:9px;z-index:2;color:#fff;font-size:var(--fs-meta);font-weight:600;line-height:1.35;text-shadow:0 1px 4px rgba(0,0,0,0.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scard-foot{display:flex;align-items:center;gap:7px;padding:8px 2px 0}
.scard-av{width:24px;height:24px;border-radius:50%;background:var(--av-a-bg);color:var(--av-a-fg);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.scard-name{font-size:var(--fs-meta);color:var(--text2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── card RACCONTO (.rcard) — globale: stessa card in /racconti/, profilo ── */
.rgrid{display:grid;grid-template-columns:1fr;gap:12px;padding:0 14px;margin-top:16px}
@media(min-width:600px){ .rgrid{grid-template-columns:repeat(auto-fill, minmax(300px,1fr));gap:14px} }
@media(min-width:768px){ .rgrid{padding:0;gap:18px 16px} }
.rcard{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;transition:border-color 0.15s, transform 0.15s, box-shadow 0.15s}
@media (hover:hover) and (pointer:fine){ .rcard:hover{transform:translateY(-3px);border-color:var(--border-md);box-shadow:0 12px 30px rgba(0,0,0,0.4)} }
.rcard-cover{aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background-size:cover;background-position:center}
.rcard-cover-grad{position:absolute;inset:0;background:linear-gradient(135deg, rgba(216,0,0,0.14), transparent 60%)}
.rcard-cover svg{position:relative;z-index:1;width:38px;height:38px;stroke:rgba(255,255,255,0.32);fill:none;stroke-width:1.5}
.rcard-cat{position:absolute;top:9px;left:9px;z-index:2;background:rgba(0,0,0,0.6);color:#fff;font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.rcard-len{position:absolute;bottom:9px;right:9px;z-index:2;background:rgba(0,0,0,0.7);color:#fff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.rcard-body{padding:13px 14px 14px}
.rcard-title{font-size:var(--fs-title);font-weight:700;color:var(--text1);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard-excerpt{font-size:var(--fs-meta);color:var(--text2);line-height:1.6;margin-top:7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rcard-meta{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:var(--fs-meta);color:var(--text3);flex-wrap:wrap}
.rcard-cname{color:var(--text2);font-weight:500}
.rgrid.list-view .rcard{display:flex;gap:14px}
.rgrid.list-view .rcard-cover{width:150px;flex-shrink:0;aspect-ratio:4/3}
.rgrid.list-view .rcard-excerpt{-webkit-line-clamp:2}