/* ─────────────────────────────────────────
   SKELETONS
───────────────────────────────────────── */
.sk-t{aspect-ratio:16/9;border-radius:14px;background:var(--bg3);animation:pulse 1.7s ease-in-out infinite}
.sk-l{height:13px;border-radius:4px;margin:10px 4px 4px;background:var(--bg3);animation:pulse 1.7s ease-in-out infinite}
.sk-l.s{width:55%;margin-top:6px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.rc-sk{border-radius:16px;background:var(--rc-bg);border:1px solid var(--rc-border);overflow:hidden}
.rc-sk-img{aspect-ratio:16/9;background:var(--bg3);animation:pulse 1.7s ease-in-out infinite}
.rc-sk-line{height:13px;border-radius:4px;margin:14px 16px 6px;background:var(--bg3);animation:pulse 1.7s ease-in-out infinite}
.rc-sk-line.s{width:55%;margin-top:0;margin-bottom:16px}
.empty-grid{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--muted);text-align:center}
.empty-grid svg{color:var(--faint);margin-bottom:14px}
.empty-grid h3{font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px}
.empty-grid p{font-size:13px}

/* ─────────────────────────────────────────
   LOCK OVERLAYS & UPGRADE
───────────────────────────────────────── */
.locked-content{position:relative;overflow:hidden;min-height:160px}
.lock-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:24px;
  background:linear-gradient(180deg,transparent 0%,var(--desc-bg) 30%);
  z-index:2;
}
.lock-overlay svg{color:var(--muted);opacity:.7}
.lock-overlay p{font-size:14px;color:var(--muted);max-width:260px;line-height:1.5}
.upgrade-btn,.upgrade-btn:hover,.upgrade-btn:visited,
#rc-view-doc .upgrade-btn,#vv-desc-box .upgrade-btn,#vv-desc-inner .upgrade-btn,#guide-view-doc .upgrade-btn,#liquid-view-desc .upgrade-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 22px;border-radius:19px;
  background:var(--accent);color:#0f0f0f;
  font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;
  text-decoration:none;border:none;cursor:pointer;
  transition:opacity .15s,transform .1s;white-space:nowrap;
}
.upgrade-btn:hover{opacity:.88;transform:scale(1.03)}

.blur-wrap{position:relative;min-height:160px;max-height:260px;overflow:hidden}
.blur-inner{filter:blur(6px);-webkit-filter:blur(6px);opacity:.4;user-select:none;pointer-events:none}

/* ─────────────────────────────────────────
   PIP
───────────────────────────────────────── */
#pip-player{position:fixed;bottom:24px;right:16px;width:280px;z-index:998;background:var(--pip-bg);border:1px solid var(--pip-border);border-radius:14px;box-shadow:0 12px 48px rgba(0,0,0,.6);overflow:hidden;display:none;animation:pipin .25s cubic-bezier(.34,1.56,.64,1);cursor:move;user-select:none}
@media(min-width:601px){#pip-player{width:320px;right:24px}}
#pip-player.show{display:block}
@keyframes pipin{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
#pip-video-wrap{width:100%;aspect-ratio:16/9;background:#000;position:relative}
#pip-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
#pip-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--pip-bg)}
#pip-title{flex:1;font-size:11px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pip-expand,#pip-close{width:26px;height:26px;border-radius:7px;background:var(--btn-bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background .15s;flex-shrink:0}
#pip-expand:hover{background:var(--btn-bg-h);color:var(--text)}
#pip-expand svg,#pip-close svg{width:13px;height:13px}
#pip-close:hover{background:#3a1a1a;color:#f87171}

/* ─────────────────────────────────────────
   TOASTS
───────────────────────────────────────── */
#toasts{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:90vw}
@media(min-width:601px){#toasts{bottom:24px}}
.toast{background:var(--bg3);border:1px solid var(--border);border-radius:99px;padding:9px 18px;font-size:13px;font-weight:500;color:var(--text);box-shadow:0 4px 20px rgba(0,0,0,.35);animation:tin .25s ease-out;display:flex;align-items:center;gap:7px}
.t-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}