/*
Theme Name: S3Vid
Theme URI: https://example.com/s3vid
Author: v0
Author URI: https://v0.app
Description: A Pinterest-style dark video sharing theme. Masonry homepage feed showing videos at their natural ratio, hover-to-preview, single video pages with a gallery-style prev/next player, live navbar search, reactions, share, and DMCA-style reporting. Ships with valid VideoObject schema markup and technical SEO defaults.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: s3vid
*/

/* =========================================================
   0. Reset & tokens
========================================================= */
:root{
  --pv-bg: #0b0b0d;
  --pv-surface: #15151a;
  --pv-surface-2: #1d1d24;
  --pv-border: #2a2a33;
  --pv-text: #f2f2f5;
  --pv-text-dim: #a3a3ad;
  --pv-accent: #ff3d6e;
  --pv-accent-2: #6e6bff;
  --pv-radius: 14px;
  --pv-radius-sm: 8px;
  --pv-gap: 14px;
  --pv-header-h: 64px;
  --pv-max: 1600px;
  --pv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html, body{background:var(--pv-bg); color:var(--pv-text);}
body{
  font-family: var(--pv-font);
  line-height:1.5;
  margin:0;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit; text-decoration:none;}
img, video{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
input, textarea, select{font-family:inherit;}
.pv-container{max-width:var(--pv-max); margin:0 auto; padding:0 16px;}
.pv-visually-hidden{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
::selection{background:var(--pv-accent); color:#fff;}

/* Touch-friendly tap targets */
button, .pv-tap, a.pv-btn, .pv-icon-btn{min-height:44px; min-width:44px;}

/* =========================================================
   1. Header / Navbar
========================================================= */
.pv-header{
  position:sticky; top:0; z-index:100;
  height:var(--pv-header-h);
  display:flex; align-items:center;
  background:rgba(11,11,13,.9);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--pv-border);
}
.pv-header-inner{
  display:flex; align-items:center; gap:16px;
  width:100%;
  position:relative;
}
.pv-logo{display:flex; align-items:center; gap:8px; flex-shrink:0; font-weight:800; font-size:20px; letter-spacing:-.02em;}
 .pv-logo img{height:var(--pv-logo-height, 32px); width:auto; max-height:120px; border-radius:6px;}
.pv-logo span{color:var(--pv-accent);}

.pv-nav-menu{display:none; gap:4px; list-style:none; margin:0; padding:0; flex-shrink:0;}
.pv-nav-menu li a{display:block; padding:10px 12px; border-radius:20px; color:var(--pv-text-dim); font-weight:600; font-size:14px;}
.pv-nav-menu li a:hover, .pv-nav-menu li a.current{background:var(--pv-surface-2); color:var(--pv-text);}

.pv-search-wrap{
  position:relative;
  flex:1 1 auto;
  max-width:560px;
  margin:0 auto;
}
.pv-search-form{
  display:flex; align-items:center; gap:2px;
  background:var(--pv-surface);
  border:1px solid var(--pv-border);
  border-radius:22px;
  padding:0 6px 0 6px;
  height:38px;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 6px 16px rgba(0,0,0,.18);
}
.pv-search-form:hover{border-color:#3a3a45;}
.pv-search-form:focus-within{
  border-color:var(--pv-accent);
  background:var(--pv-surface-2);
  box-shadow:0 0 0 4px rgba(255,61,110,.14), 0 6px 16px rgba(0,0,0,.22);
}
.pv-search-form .pv-search-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:28px; height:28px; margin-left:2px; color:var(--pv-text-dim); pointer-events:none;
  transition:color .18s ease;
}
.pv-search-form:focus-within .pv-search-icon{color:var(--pv-accent);}
.pv-search-form input[type="search"]{
  flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--pv-text); font-size:14px; font-weight:500; height:100%; padding:0 4px;
}
.pv-search-form input::placeholder{color:var(--pv-text-dim); font-weight:400;}
.pv-search-submit{
  background:var(--pv-accent); border:0; color:#fff; border-radius:18px;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .15s ease, filter .15s ease;
}
.pv-search-submit:hover{filter:brightness(1.1);}
.pv-search-submit:active{transform:scale(.92);}
.pv-search-results{
  position:absolute; top:calc(100% + 10px); left:0; right:0;
  max-height:70vh; overflow-y:auto;
  background:var(--pv-surface-2); border:1px solid var(--pv-border);
  border-radius:18px; box-shadow:0 24px 48px rgba(0,0,0,.55);
  padding:8px; display:none; z-index:200;
}
.pv-search-results.is-open{display:block;}
.pv-search-result{display:flex; gap:10px; padding:8px; border-radius:var(--pv-radius-sm); align-items:center; transition:background-color .12s ease; color:var(--pv-text); font-family:inherit; text-align:left; cursor:pointer;}
.pv-search-result:hover{background:var(--pv-surface);}
 .pv-search-result img{width:68px; height:42px; object-fit:cover; border-radius:8px; flex-shrink:0;}
 .pv-search-result{min-width:0;}
 .pv-search-result > span{display:block; min-width:0; overflow:hidden;}
 .pv-search-result .pv-sr-title{font-size:13px; font-weight:600; line-height:1.3; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
 .pv-search-result .pv-sr-cat{font-size:11px; color:var(--pv-text-dim);}
.pv-search-empty, .pv-search-loading{padding:16px; text-align:center; color:var(--pv-text-dim); font-size:13px;}

.pv-header-actions{display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto;}
.pv-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:transparent; border:1px solid transparent; color:var(--pv-text);
}
.pv-icon-btn:hover{background:var(--pv-surface-2); border-color:var(--pv-border);}
.pv-desktop-only{display:none;}
.pv-icon-btn-label{
  width:auto; border-radius:999px; gap:6px; padding:0 14px 0 12px;
  border-color:var(--pv-border); background:var(--pv-surface-2);
}
.pv-icon-btn-label:hover{border-color:var(--pv-accent);}
.pv-icon-btn-label .pv-icon-btn-text{font-size:13px; font-weight:600; white-space:nowrap;}
@media (max-width:360px){
  .pv-icon-btn-label{width:40px; padding:0; gap:0;}
  .pv-icon-btn-label .pv-icon-btn-text{display:none;}
}

/* Search box lives under the category bar on mobile/tablet (relocated via JS);
   hide it from the header while it's still a direct child there to avoid a flash. */
.pv-header-inner > .pv-search-wrap{display:none;}
.pv-mobile-search-slot{padding:0 16px 12px; max-width:var(--pv-max); margin:0 auto;}
.pv-mobile-search-slot .pv-search-wrap{max-width:none; margin:0;}
/* Multi-Play page already has its own video-adding box; don't duplicate the
   relocated navbar search underneath the category bar on mobile there. */
.pv-multiplay-page .pv-mobile-search-slot{display:none;}

@media (min-width:900px){
  .pv-nav-menu{display:flex;}
  .pv-desktop-only{display:flex;}
  .pv-header-inner > .pv-search-wrap{
    display:block;
    position:absolute; left:50%; top:50%;
    transform:translate(-50%, -50%);
    flex:none; width:100%; max-width:380px; margin:0;
  }
  .pv-mobile-search-slot{display:none;}
}

/* =========================================================
   1b. Slidable category bar (below navbar, all pages)
========================================================= */
.pv-cat-bar{
  position:sticky; top:var(--pv-header-h); z-index:90;
  background:var(--pv-bg);
  border-bottom:1px solid var(--pv-border);
}
.pv-cat-bar-scroll{
  display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:10px 16px; max-width:var(--pv-max); margin:0 auto;
}
.pv-cat-bar-scroll::-webkit-scrollbar{display:none;}
.pv-cat-chip{
  flex-shrink:0; white-space:nowrap;
  padding:8px 16px; border-radius:20px; font-size:13px; font-weight:600;
  background:var(--pv-surface); border:1px solid var(--pv-border); color:var(--pv-text-dim);
}
.pv-cat-chip:hover, .pv-cat-chip.is-current{background:var(--pv-accent); border-color:var(--pv-accent); color:#fff;}

/* =========================================================
   2. Masonry Feed (Homepage / Archive)
========================================================= */
.pv-feed{
  column-count:2; column-gap:var(--pv-gap);
  padding:20px 0 40px;
}
@media (min-width:600px){ .pv-feed{column-count:3;} }
@media (min-width:900px){ .pv-feed{column-count:4;} }
@media (min-width:1250px){ .pv-feed{column-count:5;} }
@media (min-width:1550px){ .pv-feed{column-count:6;} }

.pv-card{
  break-inside:avoid;
  margin-bottom:var(--pv-gap);
  border-radius:var(--pv-radius);
  overflow:hidden;
  background:var(--pv-surface);
  border:1px solid var(--pv-border);
  display:block;
  position:relative;
}
.pv-card-media{position:relative; width:100%; background:#000;}
.pv-card-media video, .pv-card-media img.pv-poster-fallback{width:100%; height:auto; display:block;}
.pv-hd-badge{
  position:absolute; left:8px; top:8px; z-index:2;
  background:var(--pv-accent); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.03em; padding:2px 6px; border-radius:4px; line-height:1.4;
  }
  .pv-hd-badge-side{left:5px; top:5px; font-size:9px; padding:1px 4px; border-radius:3px;}
  .pv-hd-badge-feed{left:14px; top:14px; font-size:12px; padding:3px 8px; border-radius:5px;}
  .pv-card-duration{
  position:absolute; right:8px; bottom:8px;
  background:rgba(0,0,0,.75); color:#fff; font-size:11px; font-weight:700;
  padding:3px 6px; border-radius:6px; letter-spacing:.02em;
}
.pv-card-playing::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--pv-accent); border-radius:var(--pv-radius);
}
.pv-card-body{padding:10px 12px 12px;}
.pv-card-title{font-size:14px; font-weight:700; margin:0 0 4px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere; word-break:break-word;}
.pv-card-meta{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--pv-text-dim);}
.pv-card-cat{color:var(--pv-accent-2); font-weight:600;}

.pv-empty-state{padding:60px 16px; text-align:center; color:var(--pv-text-dim);}

/* =========================================================
   3. Single Video Page
========================================================= */
.pv-single-wrap{padding:24px 0 56px;}
.pv-single-grid{display:flex; flex-direction:column; gap:28px;}
@media (min-width:1000px){
  .pv-single-grid{flex-direction:row; align-items:flex-start;}
  .pv-single-main{flex:1 1 auto; min-width:0;}
  .pv-single-sidebar{flex:0 0 340px;}
}

.pv-player{
  position:relative; background:#000; border-radius:var(--pv-radius); overflow:hidden;
  border:1px solid var(--pv-border);
}
.pv-player video, .pv-player iframe{width:100%; height:auto; aspect-ratio:16/9; display:block; background:#000;}
.pv-player iframe{border:0;}
.pv-player.is-loading{opacity:.55;}

.pv-single-title{font-size:22px; font-weight:800; margin:0; line-height:1.3;
  overflow-wrap:anywhere; word-break:break-word;}
  @media (min-width:700px){ .pv-single-title{font-size:26px;} }
  
  .pv-single-taxo{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}

  /* Collapsible title + category + tags (single video & fullscreen) */
  .pv-meta-wrap{margin:16px 0 8px;}
  .pv-meta-row{display:flex; align-items:baseline; gap:10px; flex-wrap:nowrap;}
  .pv-meta-row .pv-meta-title{flex:1 1 auto; min-width:0; margin:0;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;}
  .pv-meta-wrap.is-expanded .pv-meta-row .pv-meta-title{-webkit-line-clamp:unset; overflow:visible;}
  .pv-meta-row .pv-chip-duration{flex:0 0 auto;}
  .pv-meta-toggle{
    flex:0 0 auto; background:none; border:1px solid var(--pv-border); color:var(--pv-accent-2);
    font-size:12px; font-weight:700; padding:5px 12px; border-radius:14px; cursor:pointer;
    white-space:nowrap; transition:background .15s ease, border-color .15s ease;
  }
  .pv-meta-toggle:hover{background:var(--pv-surface-2); border-color:var(--pv-accent-2);}
  .pv-meta-extra.pv-meta-extra{display:none !important; margin-top:10px;}
  .pv-meta-wrap.is-expanded .pv-meta-extra.pv-meta-extra{display:flex !important;}
.pv-chip{
  display:inline-flex; align-items:center; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:16px; background:var(--pv-surface-2); color:var(--pv-text-dim); border:1px solid var(--pv-border);
  max-width:100%; overflow-wrap:anywhere; word-break:break-word;
}
.pv-chip.pv-chip-cat{color:var(--pv-accent-2); border-color:transparent;}

.pv-action-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 0; border-top:1px solid var(--pv-border); border-bottom:1px solid var(--pv-border); margin-bottom:18px;
}
.pv-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pv-surface-2); border:1px solid var(--pv-border); color:var(--pv-text);
  padding:0 16px; border-radius:22px; font-size:14px; font-weight:600;
}
.pv-btn:hover{border-color:var(--pv-accent);}
.pv-btn.is-active{background:var(--pv-accent); border-color:var(--pv-accent); color:#fff;}
.pv-btn svg{width:18px; height:18px; flex-shrink:0;}
.pv-btn-report{margin-left:auto;}
.pv-btn:disabled{opacity:.5; pointer-events:none;}

.pv-single-desc{color:var(--pv-text-dim); font-size:15px; line-height:1.6; margin-bottom:8px; white-space:pre-line;
  overflow-wrap:anywhere; word-break:break-word;}
.pv-single-desc.is-collapsed{max-height:4.8em; overflow:hidden;}
.pv-desc-toggle{background:none; border:0; color:var(--pv-accent); font-weight:700; font-size:13px; padding:6px 0;}

.pv-sidebar-title{font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--pv-text-dim); margin:0 0 12px;}
.pv-side-list{display:flex; flex-direction:column; gap:12px;}
.pv-side-card{display:flex; gap:10px; border-radius:var(--pv-radius-sm); padding:6px; border:1px solid transparent;}
.pv-side-card:hover{background:var(--pv-surface); border-color:var(--pv-border);}
.pv-side-media{position:relative; width:140px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#000;}
.pv-side-media video, .pv-side-media img{width:100%; height:80px; object-fit:cover;}
.pv-side-duration{position:absolute; right:5px; bottom:5px; background:rgba(0,0,0,.75); color:#fff; font-size:10px; font-weight:700; padding:2px 5px; border-radius:5px;}
.pv-side-info{min-width:0;}
.pv-side-info .pv-card-title{font-size:13px; margin-bottom:3px;}
.pv-side-info .pv-card-meta{font-size:11px;}

.pv-related-section{margin-top:44px;}
.pv-related-section .pv-section-title{font-size:18px; font-weight:800; margin-bottom:16px;}

/* =========================================================
   3b. TikTok-style vertical feed (single video page)
========================================================= */
.pv-feed-outer{position:relative;}
.pv-feed-viewport{
  height:calc(100vh - var(--pv-header-h) - 32px);
  max-height:920px;
  overflow-y:auto; scroll-snap-type:y mandatory;
  border-radius:var(--pv-radius); background:#000;
  scrollbar-width:none;
  /* Feed scrolling and site/page scrolling are two fully separate scroll
     systems - this stops the browser from ever chaining scroll/swipe
     input from the feed into the page behind it, at the top/bottom of
     the feed or while in fullscreen. */
  overscroll-behavior:contain;
}
.pv-feed-viewport::-webkit-scrollbar{display:none;}
.pv-feed-sentinel,.pv-feed-top-sentinel{height:1px;}

.pv-feed-slide{
  scroll-snap-align:start; scroll-snap-stop:always;
  height:calc(100vh - var(--pv-header-h) - 32px);
  max-height:920px;
  display:flex; flex-direction:column;
  border-bottom:1px solid var(--pv-border);
}
.pv-feed-player{
  position:relative; flex:1 1 auto; min-height:0; background:#000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.pv-feed-video{width:100%; height:100%; object-fit:contain; background:#000;}
.pv-feed-embed{width:100%; height:100%;}
.pv-feed-embed iframe{width:100%; height:100%; border:0;}
.pv-feed-player img{width:100%; height:100%; object-fit:contain;}

.pv-sound-toggle{
  position:absolute; top:12px; right:12px; z-index:5;
  width:38px; height:38px; border-radius:50%;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
}

.pv-feed-rail{
  position:absolute; right:10px; bottom:16px; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.pv-feed-rail-btn{
  background:none; border:0; color:#fff; display:flex; flex-direction:column; align-items:center; gap:3px;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));
}
 .pv-feed-rail-btn svg{transition:transform .15s ease;}
 .pv-feed-rail-btn:active svg{transform:scale(1.2);}
 .pv-feed-rail-btn.is-active{color:var(--pv-accent);}
.pv-feed-rail-btn.pv-feed-fav-btn.is-active{color:#ffd23d;}
.pv-feed-rail-btn.pv-mp-add-btn:disabled{opacity:.5; pointer-events:none;}
 .pv-feed-rail-count{font-size:11px; font-weight:700;}

 .pv-rail-icon-only{margin-top:6px;}
 .pv-rail-icon-circle{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); backdrop-filter:blur(2px);
  filter:none;
  }
 .pv-rail-icon-only:active .pv-rail-icon-circle{background:rgba(255,255,255,.28); transform:scale(.94);}
.pv-rail-icon-circle svg[hidden]{display:none !important;}
.pv-rail-icon-circle svg{display:block;}

/* Fullscreen: the browser's Fullscreen API is applied to .pv-feed-outer,
   so slides/viewport just need to fill the true viewport instead of the
   calc() that leaves room for the header. Scrolling keeps working because
   the scrollable viewport element stays the same, just resized. */
.pv-feed-outer:fullscreen{background:#000;}
.pv-feed-outer:fullscreen .pv-feed-viewport,
.pv-feed-outer:fullscreen .pv-feed-slide{
  height:100vh; max-height:none; border-radius:0;
}

/* One-time swipe-up hint shown to first-time visitors, centered over the
   video. Plays a short finger-swipe animation then fades out at 1.5s. */
.pv-swipe-hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  display:none; flex-direction:column; align-items:center; gap:10px;
  color:#fff; font-size:13px; font-weight:600; z-index:20;
  pointer-events:none; text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.pv-swipe-hint.is-visible{display:flex; animation:pv-swipe-hint-fade 1.5s ease-in forwards;}
.pv-swipe-hint.is-fading{opacity:0; transition:opacity .3s ease;}

.pv-swipe-hint-finger{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(2px);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  animation:pv-swipe-finger-move 1s ease-in-out infinite;
}
.pv-swipe-hint-track{
  position:relative; width:2px; height:34px;
  background:linear-gradient(to top, rgba(255,255,255,.05), rgba(255,255,255,.7));
  border-radius:2px; overflow:hidden;
}
.pv-swipe-hint-arrow{
  position:absolute; left:-3px; bottom:0; width:8px; height:8px;
  border-left:2px solid #fff; border-top:2px solid #fff;
  transform:rotate(45deg); animation:pv-swipe-arrow-move 1s ease-in-out infinite;
}
@keyframes pv-swipe-hint-fade{
  0%, 70%{opacity:1;}
  100%{opacity:0;}
}
@keyframes pv-swipe-finger-move{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
@keyframes pv-swipe-arrow-move{
  0%{bottom:0; opacity:0;}
  15%{opacity:1;}
  100%{bottom:100%; opacity:0;}
}

.pv-feed-caption{padding:14px 16px 18px; background:var(--pv-surface); flex-shrink:0;}
.pv-feed-title{font-size:17px; font-weight:800; margin:0; line-height:1.3;
  overflow-wrap:anywhere; word-break:break-word;}
  
  .pv-feed-caption .pv-meta-wrap{margin:0 0 8px;}
  .pv-feed-taxo{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
  .pv-feed-taxo.pv-meta-extra{margin-top:8px; margin-bottom:0;}
 .pv-feed-desc{color:var(--pv-text-dim); font-size:13px; line-height:1.55; margin:0; white-space:pre-line;
  overflow-wrap:anywhere; word-break:break-word;}
.pv-feed-desc.is-collapsed{max-height:3.1em; overflow:hidden;}

@media (min-width:700px){
  .pv-feed-caption{padding:16px 22px 20px;}
  .pv-feed-title{font-size:19px;}
}

/* =========================================================
   4. Report modal & reaction toast
========================================================= */
.pv-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:16px;
}
.pv-modal-overlay.is-open{display:flex;}
.pv-modal{
  background:var(--pv-surface); border:1px solid var(--pv-border); border-radius:var(--pv-radius);
  width:100%; max-width:420px; padding:22px; max-height:85vh; overflow-y:auto;
}
.pv-modal h3{margin:0 0 6px; font-size:18px;}
.pv-modal p.pv-modal-sub{color:var(--pv-text-dim); font-size:13px; margin:0 0 16px;}
.pv-report-option{display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:8px; cursor:pointer;}
.pv-report-option:hover{background:var(--pv-surface-2);}
.pv-report-option input{width:18px; height:18px; flex-shrink:0;}
.pv-modal textarea{
  width:100%; margin-top:10px; background:var(--pv-surface-2); border:1px solid var(--pv-border);
  border-radius:8px; color:var(--pv-text); padding:10px; min-height:80px; resize:vertical; font-size:14px;
}
.pv-modal-footer{display:flex; justify-content:flex-end; gap:10px; margin-top:16px;}
.pv-btn-primary{background:var(--pv-accent); border-color:var(--pv-accent); color:#fff;}
.pv-btn-ghost{background:transparent;}
.pv-modal-close{position:absolute; top:14px; right:14px; background:none; border:0; color:var(--pv-text-dim); font-size:22px; line-height:1;}
.pv-modal{position:relative;}

.pv-toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--pv-surface-2); color:var(--pv-text); border:1px solid var(--pv-border);
  padding:12px 18px; border-radius:24px; font-size:14px; font-weight:500; z-index:1100; opacity:0;
  transition:opacity .2s, transform .2s; pointer-events:none;
  display:flex; align-items:center; gap:10px; max-width:min(90vw, 380px); box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.pv-toast.is-visible{opacity:1; transform:translateX(-50%) translateY(0);}
.pv-toast-icon{flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.pv-toast-icon svg{width:12px; height:12px;}
.pv-toast.pv-toast-success{border-color:rgba(34,197,94,.4);}
.pv-toast.pv-toast-success .pv-toast-icon{background:rgba(34,197,94,.16); color:#4ade80;}
.pv-toast.pv-toast-error{border-color:rgba(239,68,68,.4);}
.pv-toast.pv-toast-error .pv-toast-icon{background:rgba(239,68,68,.16); color:#f87171;}

.pv-share-modal-menu{display:flex; flex-direction:column; gap:4px;}
.pv-share-modal-menu a, .pv-share-modal-menu button{
  display:flex; align-items:center; width:100%; text-align:left;
  padding:11px 10px; border-radius:8px; background:none; border:0; color:var(--pv-text); font-size:14px; font-weight:600;
}
.pv-share-modal-menu a:hover, .pv-share-modal-menu button:hover{background:var(--pv-surface-2);}

/* Share dropdown */
.pv-share-wrap{position:relative;}
.pv-share-menu{
  position:absolute; top:calc(100% + 8px); left:0; background:var(--pv-surface-2);
  border:1px solid var(--pv-border); border-radius:12px; padding:8px; min-width:190px;
  display:none; z-index:50;
}
.pv-share-menu.is-open{display:block;}
.pv-share-menu a, .pv-share-menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 10px; border-radius:8px; background:none; border:0; color:var(--pv-text); font-size:14px;
}
.pv-share-menu a:hover, .pv-share-menu button:hover{background:var(--pv-surface);}

/* =========================================================
   5. Footer
========================================================= */
.pv-footer{border-top:1px solid var(--pv-border); padding:28px 0; margin-top:20px; color:var(--pv-text-dim); font-size:13px;}
.pv-footer-inner{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;}
.pv-footer a{color:var(--pv-text-dim);}
.pv-footer a:hover{color:var(--pv-text);}

/* =========================================================
   6. Search page
========================================================= */
.pv-page-heading{padding:24px 0 4px; font-size:20px; font-weight:800;}

/* =========================================================
   6b. Multi-Play page
========================================================= */
 .pv-mp-page{padding-top:40px; padding-bottom:56px; min-height:calc(100vh - 220px); display:flex; flex-direction:column;}

 .pv-mp-addbox-wrap{display:flex; justify-content:center; margin-bottom:32px; padding:0 4px;}
 .pv-mp-addbox{position:relative; width:100%; max-width:600px;}
 .pv-mp-addbox form{
	display:flex; align-items:center; gap:4px;
	background:linear-gradient(180deg, var(--pv-surface-2), var(--pv-surface));
	border:1px solid #2c2c36;
	border-radius:30px;
	height:56px;
	padding:0 6px 0 20px;
	box-shadow:0 12px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
	transition:border-color .15s, box-shadow .15s;
	}
 .pv-mp-addbox form:hover{border-color:#3a3a45;}
 .pv-mp-addbox form:focus-within{
	border-color:var(--pv-accent);
	box-shadow:0 0 0 4px rgba(255,61,110,.16), 0 12px 32px rgba(0,0,0,.45);
	}
 .pv-mp-addbox .pv-search-icon{
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
	width:20px; height:20px; margin-right:8px; color:var(--pv-text-dim); pointer-events:none;
	transition:color .15s;
	}
 .pv-mp-addbox form:focus-within .pv-search-icon{color:var(--pv-accent);}
 .pv-mp-addbox input{flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--pv-text); font-size:15px; font-weight:500; height:100%;}
 .pv-mp-addbox input::placeholder{color:var(--pv-text-dim); font-weight:400;}
 .pv-mp-addbox .pv-btn{flex-shrink:0; height:44px; border-radius:24px; padding:0 22px; font-weight:700;}
 .pv-mp-addbox .pv-search-results{top:calc(100% + 12px); left:0; right:0;}

.pv-mp-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-top:1px solid var(--pv-border); border-bottom:1px solid var(--pv-border); margin-bottom:18px;
}
.pv-mp-count{font-size:13px; font-weight:600; color:var(--pv-text-dim);}
.pv-mp-toolbar-actions{display:flex; gap:8px; flex-wrap:wrap;}
.pv-mp-toolbar-actions .pv-btn{height:36px; font-size:13px; padding:0 14px;}
.pv-btn-danger{color:#f87171;}
.pv-btn-danger:hover{border-color:#f87171;}

.pv-mp-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--pv-gap);
}

.pv-mp-card{
  border-radius:var(--pv-radius); overflow:hidden;
  background:var(--pv-surface); border:1px solid var(--pv-border);
  transition:border-color .15s, transform .15s;
}
.pv-mp-card:hover{border-color:#3a3a45;}
 .pv-mp-video-wrap{position:relative; width:100%; min-height:60px; background:#000; display:flex; align-items:center; justify-content:center;}
 .pv-mp-video-wrap video{width:100%; height:auto; max-height:80vh; object-fit:contain; display:block;}
 .pv-mp-video-wrap img{width:100%; height:auto; max-height:80vh; object-fit:contain; display:block;}
 .pv-mp-embed{position:relative; width:100%; aspect-ratio:16/9;}
 .pv-mp-embed iframe{width:100%; height:100%; border:0; display:block;}
.pv-mp-mute{
  position:absolute; width:34px; height:34px; border-radius:50%;
  background:rgba(11,11,13,.7); border:1px solid rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s;
}
.pv-mp-mute svg{width:16px; height:16px;}
.pv-mp-mute{left:8px; bottom:8px;}
.pv-mp-mute:hover{background:rgba(0,0,0,.85);}
.pv-mp-mute[aria-pressed="true"]{background:var(--pv-accent); border-color:var(--pv-accent);}
.pv-mp-mute[aria-pressed="true"] .pv-mp-icon-muted{display:none;}
.pv-mp-mute[aria-pressed="true"] .pv-mp-icon-unmuted{display:block !important;}

.pv-mp-remove{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
  background:transparent; border:0; color:rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition:color .15s, background .15s;
}
.pv-mp-remove svg{width:14px; height:14px; stroke-width:1.75;}
.pv-mp-remove:hover{color:#fff; background:rgba(0,0,0,.45);}
.pv-mp-mute[aria-pressed="true"]{background:var(--pv-accent); border-color:var(--pv-accent);}
.pv-mp-mute[aria-pressed="true"] .pv-mp-icon-muted{display:none;}
.pv-mp-mute[aria-pressed="true"] .pv-mp-icon-unmuted{display:block !important;}

/* Loading skeleton */
.pv-skel{background:linear-gradient(90deg, var(--pv-surface) 25%, var(--pv-surface-2) 37%, var(--pv-surface) 63%); background-size:400% 100%; animation:pv-shimmer 1.4s ease infinite;}
@keyframes pv-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* Card skeleton placeholder (shown while a feed batch is loading) */
.pv-card-skel{border-radius:var(--radius, 12px); overflow:hidden; background:var(--pv-surface); border:1px solid var(--pv-border);}
.pv-card-skel .pv-skel-media{aspect-ratio:16/9; }
.pv-card-skel .pv-skel-line{height:12px; margin:10px 12px 0; border-radius:6px;}
.pv-card-skel .pv-skel-line.short{width:55%; margin-bottom:12px;}

/* =========================================================
   7. Comments
========================================================= */

.form-submit{margin-top:12px;}