/**
 * Shorts Viewer v3 — Clean Minimal mobile, Rich Panel desktop.
 * Mobile-first. Desktop @ min-width:768px.
 */

/* ── Reset (viewer is self-contained, no theme CSS needed) ── */
*, *::before, *::after { box-sizing: border-box }

/* ── Inter font — @font-face injected via PHP (noso-shorts.php) for dynamic theme path ── */

/* ── Color tokens ── */
:root {
  --sv-text:         #fff;
  --sv-text-90:      #e6e6e6;
  --sv-text-88:      #e0e0e0;
  --sv-text-85:      #d9d9d9;
  --sv-text-75:      #bfbfbf;
  --sv-text-70:      #b3b3b3;
  --sv-text-60:      #999;
  --sv-text-40:      #666;
  --sv-bg:           #000;
  --sv-glass:        rgba(0,0,0,0.45);
  --sv-glass-border: rgba(255,255,255,0.12);
}

/* ── Body ── */
.shorts-body { margin:0; padding:0; overflow:hidden; background:var(--sv-bg); -ms-overflow-style:none; scrollbar-width:none; }
.shorts-body::-webkit-scrollbar { display:none; }

/* ── Container ── */
.sv { position:fixed; inset:0; z-index:9999; background:var(--sv-bg); overflow:hidden; font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased; -webkit-user-select:none; user-select:none; }

/* ── Progress / scrub bar (inside .sv-bar, bottom) ── */
.sv-progress { position:relative; flex:1; height:27px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sv-progress-track { position:absolute; left:0; right:0; top:50%; height:4px; transform:translateY(-50%); background:rgba(255,255,255,0.3); border-radius:3px; transition:height 0.15s; }
.sv-progress-fill { position:absolute; left:0; top:50%; width:100%; height:4px; transform:translateY(-50%) scaleX(0); transform-origin:left center; background:var(--accent, #e84393); border-radius:3px; pointer-events:none; will-change:transform; transition:height 0.15s; }
.sv-progress-thumb { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:#fff; left:0; transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none; transition:transform 0.15s, opacity 0.15s; box-shadow:0 1px 4px rgba(0,0,0,0.4); }
.sv-progress-tooltip { position:absolute; bottom:100%; left:0; transform:translateX(-50%); background:rgba(0,0,0,0.85); color:var(--sv-text); font-size:13px; font-weight:700; padding:4px 8px; border-radius:4px; pointer-events:none; opacity:0; white-space:nowrap; font-variant-numeric:tabular-nums; transition:opacity 0.15s; z-index:2; }
@media (hover:hover) {
  .sv-progress:hover .sv-progress-track { height:6px; }
  .sv-progress:hover .sv-progress-fill { height:6px; }
  .sv-progress:hover .sv-progress-thumb { opacity:1; }
}
.sv-progress.scrubbing .sv-progress-track { height:6px; }
.sv-progress.scrubbing .sv-progress-fill { height:6px; }
.sv-progress.scrubbing .sv-progress-thumb { opacity:1; }
.sv-progress.scrubbing .sv-progress-tooltip, .sv-progress:hover .sv-progress-tooltip { opacity:1; }
/* Mobile scrub — larger tooltip */
@media (max-width:767.98px) {
  .sv-progress.scrubbing .sv-progress-tooltip { font-size:18px; padding:6px 12px; bottom:calc(100% + 4px); }
}

/* Duration label (right of bar) */
.sv-duration { flex-shrink:0; font-size:14px; font-weight:700; color:var(--sv-text-85); font-variant-numeric:tabular-nums; min-width:36px; text-align:right; }

/* ── Video area ── */
.sv-video-area { position:absolute; inset:0; z-index:1; touch-action:none; overflow:hidden; }

/* ── Mobile vignette — darkens edges so icons/text are readable over video ── */
@media (max-width:767.98px) {
  .sv-video-area::after {
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 35%),
      linear-gradient(to left, rgba(0,0,0,0.3) 0%, transparent 25%);
    transition:opacity 0.35s ease;
  }
  .sv.sv-ui-hidden .sv-video-area::after { opacity:0; }
}

/* ── Slides ── */
.sv-slides { position:absolute; inset:0; z-index:1; }
.sv-slide { position:absolute; left:0; right:0; height:100%; display:flex; align-items:center; justify-content:center; contain:layout style paint; overflow:hidden; }
.sv-slide video { width:auto; height:100%; max-width:100%; object-fit:contain; background:transparent; display:block; position:relative; z-index:1; }
/* Poster placeholder — fades out once video is confirmed playing */
.sv-slide-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; pointer-events:none; background:var(--sv-bg); transition:opacity 0.3s; will-change:opacity; }
.sv-slide.video-playing .sv-slide-poster { opacity:0; }

/* Tap-to-play hint (iOS autoplay failure) */
.sv-tap-play { position:absolute; top:50%; left:50%; width:60px; height:60px; margin:-30px 0 0 -30px; background:rgba(255,255,255,0.85); border-radius:50%; color:#111; font-size:24px; line-height:60px; text-align:center; padding-left:4px; z-index:5; pointer-events:none; will-change:transform,opacity; animation:svTapPulse 2s ease-in-out infinite; }
@keyframes svTapPulse { 0%,100% { transform:scale(1); opacity:0.85; } 50% { transform:scale(1.08); opacity:1; } }

/* Paused play indicator — centered play triangle */
.sv-pause-play { position:absolute; top:50%; left:50%; width:56px; height:56px; margin:-28px 0 0 -28px; background:rgba(0,0,0,0.45); border-radius:50%; z-index:5; pointer-events:none; display:none; align-items:center; justify-content:center; }
.sv-pause-play::after { content:''; display:block; width:0; height:0; border-style:solid; border-width:10px 0 10px 18px; border-color:transparent transparent transparent #fff; margin-left:3px; }
.sv.sv-paused .sv-pause-play { display:flex; }

/* Spinner — hidden by default, shown after 3s of active buffering */
.sv-slide::after { content:''; position:absolute; top:50%; left:50%; width:32px; height:32px; margin:-16px 0 0 -16px; border:3px solid rgba(255,255,255,0.15); border-top-color:#fff; border-radius:50%; animation:svSpin 0.7s linear infinite; pointer-events:none; z-index:3; opacity:0; transition:opacity 0.3s ease; will-change:transform,opacity; }
.sv-slide.sv-buffering::after { opacity:1; }
@keyframes svSpin { to { transform:rotate(360deg); } }

/* ── Glass shared style — solid bg on mobile, backdrop-filter only on desktop ── */
.sv-glass { background:var(--sv-glass); border:1px solid var(--sv-glass-border); }

/* ── Close ── */
.sv-close { position:absolute; top:14px; left:14px; width:46px; height:46px; border-radius:50%; color:#fff; z-index:12; display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; background:rgba(34,34,34,0.67); border:none; }
.sv-close svg { stroke:#fff; }
@media (hover:hover) { .sv-close:hover { background:rgba(255,255,255,0.18); color:#fff; } }
@supports (padding:env(safe-area-inset-top)) {
  .sv-close { top:calc(14px + env(safe-area-inset-top, 0px)); }
}

/* ── Logo ── */
.sv-logo { position:absolute; top:14px; right:14px; left:auto; z-index:12; pointer-events:none; height:36px; display:flex; align-items:center; }
.sv-logo-img { height:clamp(18px, 4vw, 26px); width:auto; display:block; }
.sv-logo-text { font-size:13px; font-weight:700; color:#fff; white-space:nowrap; }
@supports (padding:env(safe-area-inset-top)) {
  .sv-logo { top:calc(14px + env(safe-area-inset-top, 0px)); }
}

/* ── Nav arrows — desktop only ── */
.sv-nav { position:absolute; right:12px; top:45%; transform:translateY(-50%); display:none; flex-direction:column; gap:6px; z-index:10; }
.sv-nav-btn { width:56px; height:56px; border-radius:12px; color:#222; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s; padding:0; background-color:rgba(255,255,255,0.7); }
@media (hover:hover) { .sv-nav-btn:hover:not(:disabled) { background:#fff; } }
.sv-nav-btn:disabled { opacity:0.25; cursor:default; }

/* Nav action buttons (like, share) — desktop only, hidden on mobile via .sv-nav display:none */
.sv-nav-act { display:none; }

/* ── Filter pill — shared base (outside media queries) ── */
.sv-filter-pill { display:none; align-items:center; gap:4px; padding:3px 6px 3px 10px; border-radius:16px; background:var(--accent, #ed28b5); color:#fff; font-size:12px; font-weight:600; white-space:nowrap; max-width:180px; overflow:hidden; }
.sv-filter-pill-text { overflow:hidden; text-overflow:ellipsis; }
.sv-filter-pill-x { background:rgba(255,255,255,0.25); border:none; color:#fff; width:20px; height:20px; border-radius:50%; font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0 0 1px; }

/* ── Mobile actions — TikTok-style shadow-driven icons ── */
.sv-actions-mobile {
  position:absolute; right:8px; bottom:62px;
  display:flex; flex-direction:column; gap:14px; align-items:center; z-index:21;
}

/* Actor avatar — accent ring, elevated */
.sv-act-avatars { display:flex; flex-direction:column; align-items:center; cursor:pointer; margin-bottom:2px; }
.sv-act-avatar {
  width:42px; height:42px; border-radius:50%; object-fit:cover; display:block;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
  background:linear-gradient(135deg, var(--accent, #e84393), #1a1a2e);
}
.sv-act-avatar-initial {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent, #e84393), #1a1a2e);
  border:2px solid #fff; color:#fff; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.sv-act-avatars:empty { display:none; }

/* Action buttons — no background, shadow-driven readability */
.sv-act {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  color:#fff; background:none; border:none; cursor:pointer; padding:0; line-height:1;
}
.sv-act-icon { display:flex; align-items:center; justify-content:center; padding:4px; }
.sv-act-icon svg {
  width:32px; height:32px; stroke:#fff; fill:none; stroke-width:2;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(0,0,0,0.2));
}
.sv-act-count {
  font-size:11px; font-weight:700; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
  font-variant-numeric:tabular-nums;
}
.sv-act-count:empty { display:none; }

/* Views — non-interactive */
.sv-act-views { pointer-events:none; }

/* Liked state — filled heart, fixed pink */
.sv-act.liked .sv-act-icon svg {
  fill:#e84393; stroke:#e84393;
  filter:drop-shadow(0 0 8px rgba(232,67,147,0.5)) drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
@keyframes likePop { 0%{transform:scale(1)} 30%{transform:scale(1.25)} 60%{transform:scale(0.9)} 100%{transform:scale(1)} }
.sv-act.liked .sv-act-icon { animation:likePop 0.4s cubic-bezier(0.17,0.89,0.32,1.28); }

/* ── Actor (mobile overlay — bottom name only, avatar moved to side) ── */
.sv-actor { display:flex; align-items:center; gap:5px; margin-bottom:5px; cursor:pointer; }
.sv-actor-name { font-size:15px; font-weight:700; color:#fff; text-decoration:none; }
.sv-actor-name:hover, .sv-panel-actor-name:hover { text-decoration:none; color:#fff; }

/* ── Bottom overlay (mobile) ── */
.sv-bottom { position:absolute; bottom:0; left:0; right:0; z-index:10; padding:0 14px 8px; padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(transparent 0%, rgba(0,0,0,0.6) 50%); }
.sv-meta { margin-bottom:8px; max-width:calc(100% - 70px); }
.sv-title { font-size:15px; font-weight:600; color:#fff; line-height:1.4; margin:0; padding:0; }
.sv-pills { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.sv-pills a { display:inline-block; padding:5px 12px; border-radius:var(--radius-sm, 8px); background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); color:#e6e6e6; font-size:12.5px; text-decoration:none; cursor:pointer; text-transform:capitalize; }
@media (hover:hover) { .sv-pills a:hover { background:color-mix(in srgb, var(--accent, #ed28b5) 62%, transparent); border-color:color-mix(in srgb, var(--accent, #ed28b5) 95%, transparent); color:#fff; } }

/* ── Player bar (progress + sound) ── */
.sv-bar { display:flex; align-items:center; gap:16px; }
@media (min-width:768px) { .sv-bar { padding:0 20px; } }
.sv-sound { flex-shrink:0; background:none; border:none; color:#fff; cursor:pointer; padding:6px; display:flex; align-items:center; }
.sv-sound svg { width:26px; height:26px; }
.sv-sound .ico-on { display:none; }
.sv-sound .ico-off { display:block; }
.sv-sound.unmuted .ico-on { display:block; }
.sv-sound.unmuted .ico-off { display:none; }

/* Mute hint — pulse when user had unmuted but browser forced mute */
.sv-sound.sv-mute-hint { animation:svMuteHint 1.5s ease-in-out 3; }
@keyframes svMuteHint { 0%,100% { transform:scale(1); } 50% { transform:scale(1.3); } }

/* ── Double-tap heart animation ── */
/* ── Heart burst — addictive like animation ── */
/* Screen flash */
.sv-heart-flash {
  position:absolute; inset:0; z-index:22; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(232,67,147,0.25) 0%, transparent 70%);
  opacity:0; animation:heartFlash 1s ease-out forwards;
}
@keyframes heartFlash {
  0% { opacity:1; } 100% { opacity:0; }
}
/* Main heart — drops from above, lands with bounce */
.sv-heart-burst {
  position:absolute; top:50%; left:50%; z-index:25; pointer-events:none;
  transform:translate(-50%,-50%);
}
.sv-heart-burst svg {
  width:90px; height:90px;
  fill:url(#heartGrad); stroke:rgba(255,255,255,0.15); stroke-width:0.4;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5)) drop-shadow(0 0 25px rgba(232,67,147,0.6));
  animation:heartDrop 1.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
/* Expanding ring — zero-cost GPU circle that grows from center */
.sv-heart-ring {
  position:absolute; top:50%; left:50%; z-index:23; pointer-events:none;
  width:40px; height:40px; margin:-20px 0 0 -20px;
  border:2px solid rgba(232,67,147,0.6); border-radius:50%;
  opacity:0; animation:heartRing 1.2s ease-out forwards;
}
@keyframes heartRing {
  0%   { transform:scale(0.5); opacity:0.8; }
  100% { transform:scale(4); opacity:0; }
}
.sv-heart-ring2 { animation-delay:0.15s; }
@keyframes heartDrop {
  0%   { transform:translateY(-120px) scale(0.6) rotate(-20deg); opacity:0; }
  15%  { opacity:1; }
  45%  { transform:translateY(8px) scale(1.2) rotate(4deg); }
  60%  { transform:translateY(-5px) scale(0.95) rotate(-2deg); }
  75%  { transform:translateY(2px) scale(1.02) rotate(0deg); }
  85%  { transform:translateY(0) scale(1) rotate(0deg); opacity:1; }
  100% { transform:translateY(0) scale(0.95) rotate(0deg); opacity:0; }
}
/* Sparkle stars — appear at impact moment */
.sv-heart-sparkle {
  position:absolute; z-index:26; pointer-events:none;
  width:5px; height:5px; background:#fff; border-radius:50%;
  box-shadow:0 0 6px 2px rgba(255,255,255,0.7), 0 0 10px 3px rgba(232,67,147,0.4);
  opacity:0; animation:sparkle 1s ease-out forwards;
}
@keyframes sparkle {
  0%   { transform:translate(0,0) scale(1); opacity:1; }
  50%  { opacity:0.8; }
  100% { transform:translate(var(--sx), var(--sy)) scale(0); opacity:0; }
}
/* Floating particles — each has unique trajectory via inline transform */
.sv-heart-particle {
  position:absolute; z-index:24; pointer-events:none;
  opacity:0; animation:heartFloat 1.4s ease-out forwards;
}
.sv-heart-particle svg {
  fill:#e84393; stroke:none;
}
@keyframes heartFloat {
  0%   { opacity:1; transform:translate(0,0) scale(1) rotate(0deg); }
  100% { opacity:0; transform:translate(var(--tx), var(--ty)) scale(var(--s)) rotate(var(--r)); }
}
/* Legacy small heart (double-tap position) */
.sv-heart { position:absolute; z-index:20; color:#ed28b5; font-size:60px; pointer-events:none; transform:translate(-50%,-50%) scale(0); will-change:transform,opacity; animation:heartPop 0.7s cubic-bezier(0.17,0.89,0.32,1.28) forwards; }
@keyframes heartPop {
  0% { transform:translate(-50%,-50%) scale(0); opacity:1; }
  40% { transform:translate(-50%,-50%) scale(1.2); opacity:1; }
  60% { transform:translate(-50%,-50%) scale(1); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(1); opacity:0; }
}

/* ── 2x speed indicator ── */
.sv-speed { position:absolute; top:60px; left:50%; transform:translateX(-50%); z-index:12; background:rgba(0,0,0,0.6); color:#fff; font-size:13px; font-weight:700; padding:4px 12px; border-radius:16px; pointer-events:none; }


/* ── Backdrop (desktop only) ── */
.sv-backdrop { display:none; }
.sv-hp-backdrop-link { display:none; }
@media (min-width:768px) {
  .sv-backdrop { display:block; position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
  .sv-hp-backdrop-link { display:block; position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; cursor:pointer; }
  .sv-backdrop-hp {
    background:
      radial-gradient(ellipse 18vw 22vh at 15% 15%, rgba(210,160,130,0.18) 0%, transparent 100%),
      radial-gradient(ellipse 20vw 25vh at 80% 12%, rgba(190,140,115,0.16) 0%, transparent 100%),
      radial-gradient(ellipse 22vw 20vh at 20% 45%, rgba(100,70,85,0.20) 0%, transparent 100%),
      radial-gradient(ellipse 18vw 22vh at 75% 50%, rgba(70,85,100,0.18) 0%, transparent 100%),
      radial-gradient(ellipse 20vw 25vh at 25% 80%, rgba(180,120,140,0.17) 0%, transparent 100%),
      radial-gradient(ellipse 18vw 20vh at 82% 85%, rgba(200,160,140,0.16) 0%, transparent 100%),
      linear-gradient(180deg, #0e0d0b 0%, #13120f 20%, #0f0e0c 50%, #13120f 80%, #0a0908 100%);
    contain:strict;
  }
}

/* ── Desktop panel — hidden on mobile ── */
.sv-panel { display:none; }

/* ═════════════════════════════════════════════════════════════
   DESKTOP — video left (55%) + panel right (45%)
   ═════════════════════════════════════════════════════════════ */
@media (min-width:768px) {
  .sv { display:flex; flex-direction:row; align-items:stretch; width:100%; max-width:1400px; position:fixed; top:0; bottom:0; left:50%; transform:translateX(-50%); z-index:1; background:transparent; }

  .sv-video-area { position:relative; flex:0 0 65%; height:100vh; display:flex; align-items:center; justify-content:center; z-index:1; background:#000; }
  .sv-slides { position:absolute; inset:0; }
  .sv-slide { left:0; right:0; width:100%; }
  .sv-slide video { width:auto; height:100%; max-width:100%; object-fit:contain; }
  .sv-slide-poster { background:transparent; }

  /* Desktop: sv-meta hidden — H1 is in sv-panel-title, not here */
  .sv-bottom .sv-meta { display:none; }
  .sv-bottom { background:none; padding:0 10px 8px; }
  .sv-actions-mobile { display:none; }
  .sv-logo { top:14px; }
  .sv-logo-img { height:clamp(18px, 4vw, 30px); }

  .sv-nav { display:flex; right:8px; }
  .sv-nav-act { display:flex; width:56px; height:56px; border-radius:12px; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background 0.2s, color 0.2s; background:rgba(255,255,255,0.12); color:var(--sv-text-70); border:1px solid var(--sv-glass-border); }
  .sv-nav-act:first-of-type { margin-top:10px; }
  @media (hover:hover) { .sv-nav-act:hover { background:rgba(255,255,255,0.2); } }
  .sv-nav-act.liked svg { animation:likePop 0.45s cubic-bezier(0.17,0.89,0.32,1.28); }
  .sv-nav-act.liked svg path { fill:#e84393; stroke:#e84393; }
  /* Desktop: glass style — no blur for performance */
  .sv-glass { background:rgba(255,255,255,0.07); }
  .sv-close { left:14px; top:14px; border:none; background:rgba(34,34,34,0.67); }
  .sv-nav-btn { background-color:rgba(255,255,255,0.7); color:#222; border:none; }
  .sv-nav-btn svg { stroke:#222; }

  /* ── Desktop panel — V6 layout ── */
  .sv-panel { display:flex; flex:1; flex-direction:column; background-color:rgba(255,255,255,0.03); overflow:hidden; z-index:2; position:relative; border-left:1px solid rgba(255,255,255,0.10); border-radius:0; }
  .sv-panel > *:not(.sv-panel-search) { transition:opacity 0.25s ease; }
  .sv-panel.sv-panel-fading > *:not(.sv-panel-search) { opacity:0; }

  /* Search bar — top of panel */
  .sv-panel-search { padding:12px 16px; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,0.06); position:relative; z-index:10; }
  .sv-search-wrap { position:relative; }
  .sv-search-input { width:100%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:12px; padding:11px 16px 11px 38px; font-size:14px; color:#fff; outline:none; font-family:inherit; transition:border-color 0.2s, background 0.2s; }
  .sv-search-input::placeholder { color:var(--sv-text-60); }
  .sv-search-input:focus { border-color:rgba(255,255,255,0.30); background:rgba(255,255,255,0.10); }
  .sv-search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--sv-text-75); font-size:15px; pointer-events:none; transition:color 0.2s; }
  .sv-search-input:focus ~ .sv-search-icon { color:#fff; }
  /* Desktop filter pill — inside search wrap */
  .sv-filter-pill-desktop { position:absolute; left:8px; top:50%; transform:translateY(-50%); z-index:2; background:#646464; border-radius:8px; }
  .sv-search-wrap.has-filter .sv-search-input { padding-left:var(--sv-pill-w, 38px); }
  .sv-search-wrap.has-filter .sv-search-icon { display:none; }

  /* Suggest dropdown — matches homepage .new-hdr-ac style */
  .sv-suggest { position:absolute; top:100%; left:0; right:0; margin-top:4px; background:#1a1a1a; border:1px solid rgba(255,255,255,0.10); border-radius:12px; overflow:hidden; z-index:20; display:none; box-shadow:0 12px 40px rgba(0,0,0,0.6); padding:6px; }
  .sv-suggest.is-open { display:flex; flex-direction:column; gap:4px; }

  /* Card per section */
  .sv-suggest-group { background:#1c1a17; border:1px solid rgba(255,255,255,0.06); border-radius:8px; overflow:hidden; }
  .sv-suggest-label { display:flex; align-items:center; gap:6px; padding:6px 10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; }
  .sv-suggest-label-bar { width:3px; height:14px; border-radius:2px; flex-shrink:0; }
  /* Section colors — tag=cyan, creator=pink */
  .sv-suggest-group.sv-sg-tag .sv-suggest-label { color:#00bcd4; }
  .sv-suggest-group.sv-sg-tag .sv-suggest-label-bar { background:#00bcd4; }
  .sv-suggest-group.sv-sg-actor .sv-suggest-label { color:#d63c84; }
  .sv-suggest-group.sv-sg-actor .sv-suggest-label-bar { background:#d63c84; }

  /* Item row */
  .sv-suggest-item { display:flex; align-items:center; gap:6px; padding:5px 10px; cursor:pointer; text-decoration:none; color:var(--sv-text-90); font-size:13px; line-height:1.2; }
  @media (hover:hover) { .sv-suggest-item:hover { background:rgba(255,255,255,0.06); color:#fff; } }

  /* Circle avatar */
  .sv-suggest-avatar { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; text-transform:uppercase; line-height:1; overflow:hidden; background:linear-gradient(135deg, var(--accent, #ed28b5), #222); color:var(--sv-text, #fff); }
  .sv-sg-actor .sv-suggest-avatar { color:var(--sv-text, #fff); }
  .sv-suggest-avatar img { width:120%; height:120%; object-fit:cover; border-radius:50%; }
  .sv-suggest-tag-icon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; font-weight:700; text-transform:uppercase; line-height:1; }
  .sv-sg-tag .sv-suggest-tag-icon { background:#152a2e; color:#00bcd4; }
  .sv-sg-default .sv-suggest-tag-icon { background:rgba(255,255,255,0.06); color:var(--sv-text-60); }
  /* Default group — no card border, no label */
  .sv-sg-default { background:transparent; border:none; }

  /* Text + highlight per section */
  .sv-suggest-text { font-size:13px; color:var(--sv-text-90); font-weight:400; }
  .sv-suggest-text em { font-style:normal; font-weight:600; }
  .sv-sg-tag .sv-suggest-text em { color:#00bcd4; }
  .sv-sg-actor .sv-suggest-text em { color:#d63c84; }

  /* Count pill — žádná změna na hoveru (stejně jako homepage) */
  .sv-suggest-count { font-size:11px; color:#999; margin-left:auto; flex-shrink:0; background:rgba(255,255,255,0.06); padding:2px 7px; border-radius:10px; }

  .sv-suggest-empty { padding:12px 14px; font-size:12px; color:var(--sv-text-40); text-align:center; }

  /* Fixed info section */
  .sv-panel-info { padding:18px 18px 30px; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,0.06); }

  /* Header row — actor left, icon buttons right */
  .sv-panel-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .sv-panel-actor { display:flex; gap:10px; align-items:center; min-width:0; cursor:pointer; }
  .sv-panel-avatars { display:flex; flex-shrink:0; }
  .sv-panel-avatars > *:not(:first-child) { margin-left:-10px; }
  .sv-panel-avatar { width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid var(--accent, #ed28b5); flex-shrink:0; background:#333; }
  .sv-panel-initial { width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg, var(--accent, #ed28b5), #222); border:2px solid var(--accent, #ed28b5); color:#fff; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .sv-panel-actor-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
  .sv-panel-actor-name { font-size:16px; font-weight:700; color:#fff; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
  .sv-panel-actor-meta { font-size:12px; color:var(--sv-text-40); line-height:1.2; }

  /* Actions row — views | separator | like share */
  .sv-panel-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .sv-panel-views, .sv-panel-likes { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--sv-text-70); }
  .sv-panel-views svg, .sv-panel-likes svg, .sv-panel-share svg { width:14px; height:14px; opacity:0.8; color:var(--sv-text-70); }

  /* Likes stat — neutral by default, accent when liked */
  .sv-panel-likes svg { opacity:0.75; }
  .sv-panel-likes.liked svg { color:#e84393; stroke:#e84393; fill:#e84393; }
  .sv-panel-share { display:flex; align-items:center; cursor:pointer; color:var(--sv-text-70); }

  /* Title */
  .sv-panel-title { font-size:13px; font-weight:500; color:var(--sv-text-88); margin:0 0 10px; line-height:1.4; }

  /* Pills */
  .sv-panel-pills { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .sv-panel-pills:empty { display:none; }
  /* Vzhled = homepage shorts tagy (.new-actor-pill): výška 32, padding 0 12, border .08, bg .05, font 13 */
  .sv-pill { display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:var(--radius-sm, 8px); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color:var(--sv-text-90, #e6e6e6); font-size:13px; text-decoration:none; transition:background 0.08s, border-color 0.5s, color 0.08s; cursor:pointer; text-transform:capitalize; white-space:nowrap; }
  @media (hover:hover) { .sv-pill:not(.active):hover { background:color-mix(in srgb, var(--accent, #ed28b5) 62%, transparent); border-color:color-mix(in srgb, var(--accent, #ed28b5) 95%, transparent); color:#fff; transition:background 0s, border-color 0.08s, color 0s; } }

  /* Tabs */
  .sv-panel-tabs { display:flex; gap:0; padding:0 18px; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,0.06); height:36px; align-items:stretch; }
  .sv-panel-tab { padding:11px 10px; font-size:11px; color:var(--sv-text-40); cursor:pointer; border-bottom:2px solid transparent; font-weight:500; transition:color 0.2s; white-space:nowrap; text-transform:uppercase; max-width:170px; overflow:hidden; text-overflow:ellipsis; }
  .sv-panel-tab-skeleton { display:flex; gap:12px; align-items:center; height:100%; }
  .sv-panel-tab-skeleton span { display:block; height:12px; border-radius:6px; background:rgba(255,255,255,0.04); overflow:hidden; position:relative; }
  .sv-panel-tab-skeleton span::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); animation:svShimmer 1.2s ease-in-out infinite; will-change:transform; }
  @media (hover:hover) { .sv-panel-tab:hover { color:var(--sv-text-70); } }
  .sv-panel-tab.active { color:#fff; border-bottom-color:var(--accent, #ed28b5); }

  /* Scrollable video list */
  .sv-panel-list { flex:1; overflow-y:auto; }
  .sv-panel-list::-webkit-scrollbar { width:5px; }
  .sv-panel-list::-webkit-scrollbar-track { background:transparent; }
  .sv-panel-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:3px; }
  .sv-panel-list::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.15); }

  /* Gallery grid — matches homepage for-you-card style */
  .sv-panel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 14px; }
  .sv-panel-card { display:block; border-radius:var(--radius-md, 10px); overflow:hidden; position:relative; text-decoration:none; background:linear-gradient(135deg,#1a1a1a,#222); aspect-ratio:9/12; contain:layout paint; }
  .sv-panel-card::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); border-radius:inherit; pointer-events:none; z-index:3; }
  .sv-panel-card img { width:100%; height:100%; object-fit:cover; display:block; }
  /* Trailer video */
  .sv-panel-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:0; transition:opacity 0.4s ease; }
  .sv-panel-card.trailer-playing video { opacity:1; }
  /* Views badge — top right */
  .sv-panel-card-views, .sv-panel-card-duration { position:absolute; z-index:5; background:rgba(0,0,0,0.75); color:#eee; font-size:9px; font-weight:600; padding:2px 5px; border-radius:4px; pointer-events:none; font-variant-numeric:tabular-nums; line-height:1.3; display:flex; align-items:center; gap:2px; }
  .sv-panel-card-views svg, .sv-panel-card-duration svg { flex-shrink:0; }
  .sv-panel-card-views { top:6px; right:6px; }
  .sv-panel-card-duration { bottom:6px; right:6px; }
  /* Bottom overlay — actor + gradient */
  .sv-panel-card-overlay { position:absolute; bottom:0; left:0; right:0; padding:6px; z-index:2; background:linear-gradient(transparent, rgba(0,0,0,0.85)); pointer-events:none; }
  .sv-panel-card-actor { display:flex; align-items:center; gap:5px; }
  .sv-panel-card-initial { width:18px; height:18px; border-radius:50%; background:var(--accent, #e84393); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; line-height:1; }
  .sv-panel-card-name { font-size:10px; color:var(--sv-text-70); line-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Trailer loading spinner */
  .sv-panel-card.trailer-loading::before { content:''; position:absolute; top:50%; left:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border:2px solid rgba(255,255,255,0.2); border-top-color:#fff; border-radius:50%; z-index:4; animation:svSpin 0.7s linear infinite; }
  /* Hide overlay during trailer playback */
  .sv-panel-card.trailer-playing .sv-panel-card-views,
  .sv-panel-card.trailer-playing .sv-panel-card-overlay { opacity:0; transition:opacity 0.2s; }

  /* Landscape video cards (16:9) */
  .sv-panel-grid-landscape { grid-template-columns:repeat(2,1fr); }
  .sv-panel-card-landscape { aspect-ratio:16/9; }

  /* Play button on video cards */
  .sv-panel-card-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:4; pointer-events:none; }
  .sv-panel-card-play svg { width:18px; height:18px; fill:#fff; stroke:none; margin-left:2px; }

  /* Porn videos section (below actor tab) */
  .sv-pv-section { margin-top:4px; }
  .sv-pv-title { font-size:11px; font-weight:600; color:var(--sv-text-60); padding:14px 14px 0; text-transform:uppercase; letter-spacing:0.3px; }

  /* Load more button */
  .sv-panel-more { display:block; width:calc(100% - 28px); margin:12px 14px; padding:10px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.15); color:var(--sv-text-60); font-size:13px; font-weight:500; cursor:pointer; transition:background 0.08s, border-color 0.5s, color 0.08s; }
  @media (hover:hover) { .sv-panel-more:hover { background:color-mix(in srgb, var(--accent, #ed28b5) 62%, transparent); border-color:color-mix(in srgb, var(--accent, #ed28b5) 95%, transparent); color:#fff; transition:background 0s, border-color 0.08s, color 0s; } }
  .sv-panel-more:disabled { opacity:0.5; cursor:default; }

  /* Shimmer skeleton */
  @keyframes svShimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
  .sv-panel-skeleton { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 14px; }
  .sv-panel-skeleton-item { aspect-ratio:9/12; border-radius:8px; background:rgba(255,255,255,0.04); overflow:hidden; position:relative; }
  .sv-panel-skeleton-item::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); animation:svShimmer 1.2s ease-in-out infinite; will-change:transform; }
}

@media (min-width:1200px) {
  .sv { width:calc(100% - 120px); max-width:1400px; }
}

/* ── Mobile — video always fills viewport ── */
@media (max-width:767.98px) {
  .sv-slide video { width:100%; height:100%; object-fit:cover; }
  .sv-slide-poster { object-fit:cover; }
}

/* ── Share dropdown (desktop) ── */
.sv-share-dropdown { position:absolute; top:100%; right:0; margin-top:8px; background:rgb(28,28,30); border:1px solid var(--sv-glass-border); border-radius:12px; padding:8px 0; min-width:180px; z-index:50; opacity:0; transform:translateY(-6px) scale(0.95); pointer-events:none; transition:opacity 0.15s, transform 0.15s; will-change:transform,opacity; }
.sv-share-dropdown.is-open { transform:translateY(0) scale(1); }
.sv-share-dropdown.is-open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.sv-share-dropdown-title { font-size:11px; font-weight:700; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:0.5px; padding:4px 14px 8px; }
.sv-share-opt { display:flex; align-items:center; gap:10px; padding:8px 14px; color:#fff; text-decoration:none; font-size:13px; font-weight:500; cursor:pointer; border:none; background:none; width:100%; }
@media (hover:hover) { .sv-share-opt:hover { background:rgba(255,255,255,0.08); } }
.sv-share-opt svg { width:20px; height:20px; flex-shrink:0; }

/* Toast notification */
.sv-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(10px); background:rgba(28,28,30,0.92); color:var(--sv-text); font-size:13px; font-weight:600; padding:10px 20px; border-radius:10px; z-index:10000; opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s; will-change:transform,opacity; white-space:nowrap; }
.sv-toast.is-visible { opacity:1; transform:translateX(-50%) translateY(0); }

/* Mobile — hide dropdown, rely on native share */
@media (max-width:767.98px) { .sv-share-dropdown { display:none !important; } }

/* ═══════════════════════════════════════════════════════════
   MOBILE — Peek card + expandable panel
   ═══════════════════════════════════════════════════════════ */

/* ── Search button (mobile only, next to close) ── */
.sv-search-mobile { display:none; }
@media (max-width:767.98px) {
  /* ── Mobile top bar — close (left) / pill (center) / search (right) ── */
  .sv-close { width:48px; height:48px; left:10px; top:14px; background:rgba(34,34,34,0.67); }

  .sv-filter-pill#svFilterPill { position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:12; background:rgba(255,255,255,0.35); border-radius:20px; font-size:13px; max-width:180px; padding:6px 8px 6px 12px; backdrop-filter:blur(6px); }
  @supports (padding:env(safe-area-inset-top)) {
    .sv-filter-pill#svFilterPill { top:calc(18px + env(safe-area-inset-top, 0px)); }
  }
  .sv-filter-pill#svFilterPill .sv-filter-pill-x { background:rgba(255,255,255,0.35); color:#fff; }
  @media (hover:hover) { .sv-filter-pill#svFilterPill .sv-filter-pill-x:hover { background:rgba(255,255,255,0.55); } }

  .sv-search-mobile {
    position:absolute; top:14px; right:10px; width:48px; height:48px;
    z-index:12; display:flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0; background:none; border:none; border-radius:0;
    color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(0,0,0,0.2));
  }
  @supports (padding:env(safe-area-inset-top)) {
    .sv-close { top:calc(14px + env(safe-area-inset-top, 0px)); }
    .sv-search-mobile { top:calc(14px + env(safe-area-inset-top, 0px)); }
  }
  /* Mobile fullscreen search overlay */
  .sv-msearch {
    display:none; position:absolute; inset:0; z-index:60;
    background:#0a0a0a; flex-direction:column;
    padding:16px; padding-top:calc(16px + env(safe-area-inset-top, 0px));
  }
  .sv-msearch.is-open { display:flex; }
  .sv-msearch-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .sv-msearch-back {
    width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center; border:none; color:#fff; cursor:pointer; flex-shrink:0;
  }
  .sv-msearch-input-wrap { position:relative; flex:1; }
  .sv-msearch-input {
    width:100%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
    border-radius:12px; padding:11px 16px; font-size:15px; color:#fff; outline:none; font-family:inherit;
  }
  .sv-msearch-input::placeholder { color:rgba(255,255,255,0.35); }
  /* Filter pill inside mobile search input */
  .sv-filter-pill-ms { position:absolute; left:8px; top:50%; transform:translateY(-50%); z-index:2; background:#646464; border-radius:8px; }
  .sv-msearch-input-wrap.has-filter .sv-msearch-input { padding-left:var(--sv-ms-pill-w, 38px); }
  .sv-msearch-input:focus { border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.1); }
  .sv-msearch-results { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  /* Suggest styles for mobile search overlay */
  .sv-msearch-results .sv-suggest-group { background:#1c1a17; border:1px solid rgba(255,255,255,0.06); border-radius:8px; overflow:hidden; margin-bottom:12px; }
  .sv-msearch-results .sv-sg-default { background:transparent; border:none; }
  .sv-msearch-results .sv-suggest-label { display:flex; align-items:center; gap:6px; padding:8px 12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; }
  .sv-msearch-results .sv-suggest-label-bar { width:3px; height:14px; border-radius:2px; flex-shrink:0; }
  .sv-msearch-results .sv-sg-tag .sv-suggest-label { color:#00bcd4; }
  .sv-msearch-results .sv-sg-tag .sv-suggest-label-bar { background:#00bcd4; }
  .sv-msearch-results .sv-sg-actor .sv-suggest-label { color:#d63c84; }
  .sv-msearch-results .sv-sg-actor .sv-suggest-label-bar { background:#d63c84; }
  .sv-msearch-results .sv-suggest-item { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; text-decoration:none; color:var(--sv-text-90, rgba(255,255,255,0.9)); font-size:14px; line-height:1.2; }
  .sv-msearch-results .sv-suggest-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; text-transform:uppercase; line-height:1; overflow:hidden; background:linear-gradient(135deg, var(--accent, #ed28b5), #222); color:var(--sv-text, #fff); }
  .sv-msearch-results .sv-sg-actor .sv-suggest-avatar { color:var(--sv-text, #fff); }
  .sv-msearch-results .sv-suggest-avatar img { width:120%; height:120%; object-fit:cover; border-radius:50%; }
  .sv-msearch-results .sv-suggest-tag-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; font-weight:700; text-transform:uppercase; line-height:1; }
  .sv-msearch-results .sv-sg-tag .sv-suggest-tag-icon { background:#152a2e; color:#00bcd4; }
  .sv-msearch-results .sv-sg-default .sv-suggest-tag-icon { background:rgba(255,255,255,0.06); color:var(--sv-text-60, rgba(255,255,255,0.6)); }
  .sv-msearch-results .sv-suggest-text { font-size:14px; color:var(--sv-text-90, rgba(255,255,255,0.9)); font-weight:400; }
  .sv-msearch-results .sv-suggest-text em { font-style:normal; font-weight:600; }
  .sv-msearch-results .sv-sg-tag .sv-suggest-text em { color:#00bcd4; }
  .sv-msearch-results .sv-sg-actor .sv-suggest-text em { color:#d63c84; }
  .sv-msearch-results .sv-suggest-count { font-size:11px; color:#999; margin-left:auto; flex-shrink:0; background:rgba(255,255,255,0.06); padding:2px 8px; border-radius:10px; }
  .sv-msearch-results .sv-suggest-empty { padding:16px; font-size:13px; color:var(--sv-text-40, rgba(255,255,255,0.4)); text-align:center; }

  /* Logo on mobile — hidden by default, fades in when UI auto-hides */
  .sv-logo { opacity:0; transition:opacity 0.35s ease; pointer-events:none; }
  .sv-logo-img { height:clamp(24px, 6vw, 36px); }
  .sv.sv-ui-hidden .sv-logo { opacity:0.85; }
}

/* ── Panel handle (mobile only) ── */
.sv-panel-handle { display:none; }
@media (max-width:767.98px) {
  .sv-panel-handle {
    display:flex; justify-content:center; padding:10px 0 6px; cursor:pointer; flex-shrink:0;
  }
  .sv-panel-handle-bar {
    width:40px; height:4px; border-radius:2px; background:rgba(255,255,255,0.25);
  }
}

/* ── Compact bar — V5 style (mobile only) ── */
.sv-peek { display:none; }
@media (max-width:767.98px) {
  .sv-peek {
    display:block;
    position:absolute; bottom:42px; left:0; right:60px; z-index:20;
    padding:0 6px 0 14px; max-width:100%;
    opacity:1; pointer-events:auto;
    transition:opacity 0.25s ease;
  }
  /* Once JS takes over, hide peek by default — only show in collapsed state */
  .sv.sv-collapsed .sv-peek { opacity:1 !important; pointer-events:auto !important; }
  .sv.sv-expanded .sv-peek,
  .sv.sv-expanded-full .sv-peek,
  .sv.sv-dragging .sv-peek { opacity:0; pointer-events:none; }

  /* Actor — accent bar + name */
  .sv-peek-actor { font-size:15px; font-weight:700; color:rgba(255,255,255,0.9); margin-bottom:4px; letter-spacing:0.2px; text-shadow:0 1px 4px rgba(0,0,0,0.7); }
  .sv-peek-actor::before { content:''; display:inline-block; width:3px; height:14px; background:var(--accent, #e84393); border-radius:2px; margin-right:7px; vertical-align:-2px; }

  /* Title — no clamp by default (full title visible without JS), JS adds .js-clamped */
  .sv-peek-title { font-size:14px; font-weight:400; color:rgba(255,255,255,0.85); line-height:1.4; overflow:hidden; text-shadow:0 1px 4px rgba(0,0,0,0.7); margin-bottom:6px; }
  .sv-peek-title h1 { font:inherit; color:inherit; margin:0; padding:0; display:inline; }
  .sv-peek-title.js-clamped { max-height:calc(2 * 1.4em); }
  /* Float spacer — pushes .sv-peek-more down to line 2 */
  .sv-peek-title.js-clamped::before { content:''; float:right; width:0; height:calc(1 * 1.4em); }
  /* "more" label — floated to end of last visible line */
  .sv-peek-more { display:none; }
  .sv-peek-title.js-clamped .sv-peek-more { display:inline-flex; float:right; clear:right; align-items:center; gap:3px; padding:2px 10px; border-radius:12px; background:rgba(255,255,255,0.2); font-size:11px; font-weight:600; color:#fff; white-space:nowrap; line-height:1.4; text-shadow:none; margin-left:6px; }
  .sv-peek-more svg { stroke:#fff; vertical-align:middle; }
}

/* ── Mobile panel expand/collapse ── */
@media (max-width:767.98px) {
  /* Mobile: sv-meta hidden — H1 is in sv-peek-title, not here */
  .sv-bottom .sv-meta { display:none; }

  /* Simplify bottom gradient — only needs to cover progress bar now */
  .sv-bottom { background:linear-gradient(transparent 0%, rgba(0,0,0,0.5) 100%); }

  /* ── Video area — shrinks to top when panel open, rounded bottom corners ── */
  .sv-video-area {
    bottom:auto; /* override inset:0 so height property works */
    height:100%;
    transition:height 0.55s cubic-bezier(0.32, 0.72, 0, 1),
               border-radius 0.55s cubic-bezier(0.32, 0.72, 0, 1);
    overflow:hidden;
  }
  .sv.sv-expanded .sv-video-area      { height:38%; border-radius:0 0 16px 16px; }
  .sv.sv-expanded-full .sv-video-area  { height:15%; border-radius:0 0 16px 16px; }

  /* ── Panel — positioned by top%, fills remaining space ── */
  .sv-panel {
    display:flex !important; flex-direction:column; overflow:hidden;
    position:absolute; left:0; right:0; bottom:0;
    top:100%; z-index:18; background:#0a0a0a;
    transition:top 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sv.sv-expanded .sv-panel      { top:38%; }
  .sv.sv-expanded-full .sv-panel  { top:15%; }
  .sv.sv-collapsed .sv-panel      { top:100%; pointer-events:none; }

  /* ── Peek + actions — hidden when panel open or dragging ── */
  .sv.sv-expanded .sv-peek,
  .sv.sv-expanded-full .sv-peek,
  .sv.sv-dragging .sv-peek         { opacity:0 !important; pointer-events:none !important; }
  .sv.sv-expanded .sv-actions-mobile,
  .sv.sv-expanded-full .sv-actions-mobile,
  .sv.sv-dragging .sv-actions-mobile { opacity:0 !important; pointer-events:none !important; }

  /* Meta overlay hidden when panel open */
  .sv.sv-expanded .sv-bottom .sv-meta,
  .sv.sv-expanded-full .sv-bottom .sv-meta { display:none; }

  /* ── Drag — kill transitions for 1:1 finger tracking ── */
  .sv.sv-dragging .sv-panel,
  .sv.sv-dragging .sv-video-area { transition:none !important; }

  /* ── Snap — keep UI hidden during snap animation ── */
  .sv.sv-snapping .sv-actions-mobile,
  .sv.sv-snapping .sv-peek { opacity:0 !important; pointer-events:none !important; }

  /* ── No transition — suppress animation on page load ── */
  .sv.sv-no-transition .sv-panel,
  .sv.sv-no-transition .sv-video-area { transition:none !important; }

  /* Panel inner — make scrollable */
  .sv-panel-list { flex:1; overflow-y:auto; }
  .sv-panel-tabs { flex-shrink:0; }

  /* Panel grid — 3 columns on mobile */
  .sv-panel-grid { grid-template-columns:repeat(3,1fr); gap:6px; padding:10px 10px; }
  .sv-panel-card { border-radius:8px; }

  /* Hide search bar inside panel on mobile — search is via top button */
  .sv-panel-search { display:none; }

  /* ── Panel component styles (mirrored from desktop, adapted for mobile) ── */

  /* Panel info section */
  .sv-panel-info { padding:14px 14px 12px; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,0.06); }
  .sv-panel-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .sv-panel-actor { display:flex; gap:10px; align-items:center; flex:0 1 auto; min-width:0; cursor:pointer; }
  .sv-panel-avatars { display:flex; flex-shrink:0; }
  .sv-panel-avatars > *:not(:first-child) { margin-left:-10px; }
  .sv-panel-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--accent, #ed28b5); flex-shrink:0; background:#333; }
  .sv-panel-initial { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, var(--accent, #ed28b5), #222); border:2px solid var(--accent, #ed28b5); color:#fff; font-size:17px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .sv-panel-actor-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
  .sv-panel-actor-name { font-size:15px; font-weight:700; color:#fff; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
  .sv-panel-actor-meta { font-size:12px; color:var(--sv-text-40); line-height:1.2; }

  /* Stats */
  .sv-panel-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .sv-panel-views, .sv-panel-likes { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--sv-text-70); }
  .sv-panel-views svg, .sv-panel-likes svg, .sv-panel-share svg { width:14px; height:14px; opacity:0.8; color:var(--sv-text-70); }

  .sv-panel-likes.liked svg { color:#e84393; stroke:#e84393; fill:#e84393; }
  .sv-panel-share { display:flex; align-items:center; cursor:pointer; color:var(--sv-text-70); }

  /* Title & pills */
  .sv-panel-title { font-size:14px; font-weight:500; color:var(--sv-text-88); margin:0 0 8px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .sv-panel-pills { display:flex; flex-wrap:nowrap; gap:5px; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; mask-image:linear-gradient(to right, #000 85%, transparent 100%); -webkit-mask-image:linear-gradient(to right, #000 85%, transparent 100%); padding-bottom:2px; }
  .sv-panel-pills::-webkit-scrollbar { display:none; }
  .sv-panel-pills:empty { display:none; }
  .sv-pill { display:inline-flex; align-items:center; flex-shrink:0; height:32px; padding:0 12px; border-radius:var(--radius-sm, 8px); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color:var(--sv-text-90, #e6e6e6); font-size:13px; text-decoration:none; transition:background 0.08s, border-color 0.5s, color 0.08s; cursor:pointer; text-transform:capitalize; white-space:nowrap; }

  /* Tabs */
  .sv-panel-tabs { display:flex; gap:0; padding:0 14px; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,0.06); height:32px; align-items:stretch; }
  .sv-panel-tab { padding:8px 12px; font-size:11px; color:var(--sv-text-40); cursor:pointer; border-bottom:2px solid transparent; font-weight:500; white-space:nowrap; text-transform:uppercase; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
  .sv-panel-tab.active { color:#fff; border-bottom-color:var(--accent, #ed28b5); }
  .sv-panel-tab-skeleton { display:flex; gap:12px; align-items:center; height:100%; }
  .sv-panel-tab-skeleton span { display:block; height:12px; border-radius:6px; background:rgba(255,255,255,0.04); overflow:hidden; position:relative; }
  .sv-panel-tab-skeleton span::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); animation:svShimmer 1.2s ease-in-out infinite; will-change:transform; }

  /* Scrollable list — thin scrollbar on mobile, extra bottom padding for safe area.
     Scroll jen v plně vysunutém stavu (jinak by kolidoval s drag gestem panelu). */
  .sv-panel-list { flex:1; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.06) transparent; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .sv-expanded-full .sv-panel-list { overflow-y:auto; }
  .sv-panel-list::-webkit-scrollbar { width:3px; }
  .sv-panel-list::-webkit-scrollbar-track { background:transparent; }
  .sv-panel-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.06); border-radius:2px; }

  /* Gallery grid — 3 columns on mobile */
  .sv-panel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:10px 10px; }
  .sv-panel-card { display:block; border-radius:8px; overflow:hidden; position:relative; text-decoration:none; background:linear-gradient(135deg,#1a1a1a,#222); aspect-ratio:9/12; contain:layout paint; }
  .sv-panel-card::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); border-radius:inherit; pointer-events:none; z-index:3; }
  .sv-panel-card img { width:100%; height:100%; object-fit:cover; display:block; }
  .sv-panel-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:0; }
  .sv-panel-card-views, .sv-panel-card-duration { position:absolute; z-index:5; background:rgba(0,0,0,0.75); color:#eee; font-size:9px; font-weight:600; padding:2px 5px; border-radius:4px; pointer-events:none; font-variant-numeric:tabular-nums; line-height:1.3; display:flex; align-items:center; gap:2px; }
  .sv-panel-card-views svg, .sv-panel-card-duration svg { flex-shrink:0; }
  .sv-panel-card-views { top:4px; right:4px; }
  .sv-panel-card-duration { bottom:4px; right:4px; }
  .sv-panel-card-overlay { position:absolute; bottom:0; left:0; right:0; padding:5px; z-index:2; background:linear-gradient(transparent, rgba(0,0,0,0.85)); pointer-events:none; }
  .sv-panel-card-actor { display:flex; align-items:center; gap:4px; }
  .sv-panel-card-initial { width:16px; height:16px; border-radius:50%; background:var(--accent, #e84393); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; line-height:1; }
  .sv-panel-card-name { font-size:9px; color:var(--sv-text-70); line-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Landscape cards */
  .sv-panel-grid-landscape { grid-template-columns:repeat(2,1fr); }
  .sv-panel-card-landscape { aspect-ratio:16/9; }

  /* Play button on video cards */
  .sv-panel-card-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:4; pointer-events:none; }
  .sv-panel-card-play svg { width:18px; height:18px; fill:#fff; stroke:none; margin-left:2px; }

  /* Porn videos section */
  .sv-pv-section { margin-top:4px; }
  .sv-pv-title { font-size:11px; font-weight:600; color:var(--sv-text-60); padding:12px 10px 0; text-transform:uppercase; letter-spacing:0.3px; }

  /* Load more */
  .sv-panel-more { display:block; width:calc(100% - 20px); margin:10px 10px; padding:10px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.15); color:var(--sv-text-60); font-size:12px; font-weight:500; cursor:pointer; }
  .sv-panel-more:disabled { opacity:0.5; cursor:default; }

  /* Skeleton */
  @keyframes svShimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
  .sv-panel-skeleton { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:10px 10px; }
  .sv-panel-skeleton-item { aspect-ratio:9/12; border-radius:8px; background:rgba(255,255,255,0.04); overflow:hidden; position:relative; }
  .sv-panel-skeleton-item::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); animation:svShimmer 1.2s ease-in-out infinite; will-change:transform; }

  /* ── Auto-hide on inactivity ── */
  .sv .sv-close,
  .sv .sv-search-mobile,
  .sv .sv-actions-mobile,
  .sv .sv-bottom,
  .sv .sv-peek,
  .sv #svFilterPill { transition:opacity 0.35s ease; }

  .sv.sv-ui-hidden .sv-close,
  .sv.sv-ui-hidden .sv-search-mobile,
  .sv.sv-ui-hidden .sv-actions-mobile,
  .sv.sv-ui-hidden .sv-bottom,
  .sv.sv-ui-hidden .sv-peek,
  .sv.sv-ui-hidden #svFilterPill { opacity:0 !important; pointer-events:none !important; }

  /* During scrub: keep bar visible, hide rest */
  .sv.sv-scrubbing .sv-peek { opacity:0 !important; pointer-events:none; }
  .sv.sv-scrubbing .sv-bottom { opacity:1 !important; pointer-events:auto !important; }
  .sv.sv-scrubbing .sv-bottom .sv-meta { opacity:0 !important; }

  /* Performance — GPU layer promotion only for most-animated elements */
  /* will-change removed — browser auto-promotes elements with active opacity transitions */

}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce) {
  .sv-slide, .sv-slides, .sv-heart, .sv-act svg { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}