/* PayToStream — Main Stylesheet */
/* Optimized for Nigerian Content Creators */

/* ─────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  --bg: #06080f;
  --bg2: #090d1a;
  --surf: #0d1424;
  --surf2: #111d36;
  --glass: rgba(255,255,255,.065);
  --glass-b: rgba(255,255,255,.13);
  --text: #edf1fb;
  --muted: #8a95b2;
  --faint: #4e5a74;
  --gold: #fbbf24;
  --green: #22c55e;
  --red: #ef4444;
  /* accent overridden by JS per-category */
  --A: #2563eb;
  --A2: #60a5fa;
  --Ag: rgba(37,99,235,.5);
  --As: rgba(37,99,235,.18);
  --R: 18px;
  --ease: cubic-bezier(.22,1,.36,1);
  --sh: 0 24px 60px -10px rgba(0,0,0,.75);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Montserrat', Arial, sans-serif;
}

body { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; max-width:100%; }
.hs-title, .hs-desc { overflow-wrap:break-word; word-break:break-word; }
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(1300px 650px at 75% -5%, var(--As), transparent 60%),
              radial-gradient(800px 500px at -5% 40%, rgba(255,255,255,.025), transparent 60%);
  transition: background 1s var(--ease);
}
h1,h2,h3,h4 {  font-family: 'Segoe UI', Montserrat, Arial, sans-serif; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a { text-decoration:none; color:inherit; }
input,select { font-family:inherit; }
::selection { background:var(--A); color:#fff; }
::-webkit-scrollbar { width:8px; height:6px; }
::-webkit-scrollbar-thumb { background:#1b2540; border-radius:99px; }
::-webkit-scrollbar-track { background:transparent; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
img { display:block; object-fit:cover; }

/* ─── REAL IMAGE LAYER ON CARDS ─── */
.card-thumb img, .album-thumb img, .game-thumb img, .live-thumb img,
.pod-art img, .social-av img, .img-art img { position:absolute; inset:0; width:100%; height:100%; transition:transform .6s var(--ease); }
.card:hover .card-thumb img { transform:scale(1.09); }
.album-card:hover .album-thumb img { transform:scale(1.07); }
.game-card:hover .game-thumb img { transform:scale(1.08); }
.live-card:hover .live-thumb img { transform:scale(1.08); }
.img-card:hover .img-art img { transform:scale(1.1); }
.pod-card:hover .pod-art img { transform:scale(1.08); }
/* Hero banner image — GPU-composited, fade-in on decode.
   image-rendering:high-quality and filter: removed (they were masking
   quality loss, not fixing it). The real fix is proper source resolution
   and responsive srcset — see heroImgTag() in app.js. */
.hs-bg img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform, opacity;
  opacity:0;
  transition:transform 8s ease-out, opacity .45s ease-out;
}
/* Set by JS on load so no half-decoded frame is ever shown */
.hs-bg img.is-loaded { opacity:1; }
/* Safety net: reveal after 3 s regardless, in case the load handler misses */
.hs-bg img { animation:heroReveal 0s linear 3s forwards; }
@keyframes heroReveal { to { opacity:1; } }
/* Ken Burns carries translateZ(0) so the compositor layer is kept active */
.hero-slide.is-active .hs-bg img { transform:scale(1.02) translateZ(0); }
/* Dark fill — hero box is never blank-white while the image loads */
.hs-bg { background:#060a18; }
/* Respect reduced-motion: keep the fade, skip the slow scale push */
@media (prefers-reduced-motion: reduce) {
  .hs-bg img,
  .hero-slide.is-active .hs-bg img { transform:translateZ(0); transition:opacity .3s ease-out; }
}

/* ─── DETAIL PAGE OVERLAY ─── */
.detail-overlay { position:fixed; top:60px; left:0; right:0; bottom:0; z-index:400; background:var(--bg); overflow-y:auto; display:none; }
.detail-overlay.open { display:block; animation:slideInDetail .4s var(--ease); }
@keyframes slideInDetail { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
.detail-back { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; padding:14px 24px; background:rgba(6,8,15,.9); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,.07); }
.detail-back-btn { display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:600; color:var(--muted); transition:color .2s; cursor:pointer; }
.detail-back-btn:hover { color:var(--text); }
.detail-back-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.detail-hero { position:relative; height:460px; overflow:hidden; }
.detail-hero img { width:100%; height:100%; object-fit:cover; }
.detail-hero-ov { position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 0%,rgba(6,8,15,.55) 50%,transparent 100%); }
.detail-hero-badges { position:absolute; bottom:32px; left:60px; z-index:2; display:flex; gap:10px; }
/* Flat header — no hero image, just dark background with the status badge.
   Used for Live / Social / Games / Podcasts / Donate detail pages. */
.detail-flat-header {
  padding:0; position:relative; height:0px; overflow:hidden;
  display:flex; align-items:flex-start; padding-top:32px; padding-left:60px; gap:10px;
}
.detail-flat-header .dfh-bg {
  position:absolute; inset:0; z-index:0;
}
.detail-flat-header .dfh-bg img {
  width:100%; height:100%; object-fit:cover; filter:blur(18px) brightness(.38) saturate(1.4);
  transform:scale(1.08);
}
.detail-flat-header .dfh-ov {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(6,8,18,.55) 0%, var(--bg) 100%);
}
.detail-flat-header .dfh-content { position:relative; z-index:2; display:flex; gap:10px; }
.detail-body { padding:0 60px 80px; max-width:1140px; margin:0 auto; }
.detail-layout { display:grid; grid-template-columns:1fr 320px; gap:32px; margin-top:28px; }
.detail-title { font-size:2.8rem; font-weight:900; letter-spacing:-.04em; line-height:1; }
.detail-meta-row { display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; font-size:.88rem; color:var(--muted); }
.detail-desc { font-size:.96rem; line-height:1.7; color:rgba(200,210,235,.85); margin-top:16px; max-width:68ch; }
.detail-section-title { font-size:1.08rem; font-weight:800; margin:26px 0 14px; display:flex; align-items:center; gap:10px; }
.detail-section-title .bar { width:4px; height:18px; border-radius:99px; background:linear-gradient(to bottom,var(--A2),var(--A)); flex-shrink:0; }
.detail-aside-card { background:var(--surf); border-radius:20px; padding:22px; border:1px solid rgba(255,255,255,.07); margin-bottom:16px; }
.detail-aside-card h4 { font-size:.95rem; font-weight:800; margin-bottom:14px; }
.detail-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.detail-stat { background:var(--surf2); border-radius:12px; padding:12px; text-align:center; }
.detail-stat-val { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:1.18rem; font-weight:800; color:var(--A2); }
.detail-stat-lbl { font-size:.69rem; color:var(--faint); margin-top:3px; }
.track-list { display:flex; flex-direction:column; gap:2px; }
.track-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; transition:background .2s; cursor:pointer; }
.track-row:hover { background:var(--glass); }
.track-num {  font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:.76rem; color:var(--faint); width:20px; text-align:center; flex-shrink:0; }
.track-info { flex:1; }
.track-title { font-size:.88rem; font-weight:600; }
.track-artist { font-size:.73rem; color:var(--muted); margin-top:2px; }
.track-dur {  font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:.74rem; color:var(--faint); }
.review-list { display:flex; flex-direction:column; gap:12px; }
.review-item { background:var(--surf2); border-radius:14px; padding:16px; }
.review-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.review-name { font-weight:600; font-size:.88rem; }
.review-stars { color:var(--gold); font-size:.8rem; }
.review-text { font-size:.82rem; color:var(--muted); line-height:1.55; }
.episode-row { display:flex; gap:14px; padding:13px; background:var(--surf2); border-radius:14px; cursor:pointer; transition:background .2s; margin-bottom:8px; }
.episode-row:hover { background:rgba(255,255,255,.07); }
.episode-thumb { width:80px; height:80px; border-radius:10px; overflow:hidden; flex-shrink:0; position:relative; }
.episode-thumb img { width:100%; height:100%; object-fit:cover; }
.episode-info { flex:1; }
.episode-title { font-size:.88rem; font-weight:700; margin-bottom:4px; }
.episode-meta { font-size:.73rem; color:var(--muted); }
.book-reader-preview { background:var(--surf2); border-radius:14px; padding:24px; line-height:1.8; font-size:.92rem; color:rgba(200,210,235,.85); max-height:280px; overflow:hidden; position:relative; }
.book-reader-preview::after { content:''; position:absolute; bottom:0; left:0; right:0; height:80px; background:linear-gradient(to top,var(--surf2),transparent); }
.image-grid-det { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.image-grid-item { aspect-ratio:1; border-radius:10px; overflow:hidden; cursor:pointer; position:relative; }
.image-grid-item img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.image-grid-item:hover img { transform:scale(1.06); }
.campaign-prog-wrap { margin:18px 0; }
.campaign-prog-bar { height:14px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.campaign-prog-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--A),var(--A2)); position:relative; overflow:hidden; }
.campaign-prog-fill::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent,rgba(255,255,255,.4),transparent); animation:shimmer 1.8s infinite; }
.campaign-nums { display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); margin-top:8px; }
.campaign-nums b { color:var(--text); }
.supporter-list { display:flex; flex-direction:column; gap:8px; }
.supporter-row { display:flex; align-items:center; gap:12px; padding:10px; background:var(--surf2); border-radius:12px; }
.supporter-amt { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-weight:800; font-size:.92rem; color:var(--green); margin-left:auto; }
.stream-chat-box { background:var(--surf); border-radius:16px; padding:16px; }
.stream-chat-msgs { height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.chat-msg { font-size:.78rem; line-height:1.4; }
.chat-user { font-weight:700; color:var(--A2); }
.chat-input-row { display:flex; gap:8px; }
.chat-input-row input { flex:1; padding:9px 13px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid var(--glass-b); color:var(--text); font-size:.82rem; outline:none; }
.chat-input-row button { padding:9px 16px; border-radius:10px; background:var(--A); color:#fff; font-weight:700; font-size:.78rem; }
.leaderboard-row { display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.05); }
.lb-rank { font-family:'JetBrains Mono'; font-size:.85rem; width:24px; font-weight:800; flex-shrink:0; }
.lb-name { flex:1; font-weight:600; font-size:.88rem; }
.lb-score { font-family:'JetBrains Mono'; font-size:.8rem; color:var(--A2); }
.screenshot-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.screenshot-row::-webkit-scrollbar { display:none; }
.screenshot-item { flex-shrink:0; width:260px; height:155px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.1); }
.screenshot-item img { width:100%; height:100%; object-fit:cover; }
.social-posts-grid { display:flex; flex-direction:column; gap:10px; }
.social-post-row { background:var(--surf2); border-radius:14px; overflow:hidden; display:flex; gap:0; cursor:pointer; transition:background .2s; }
.social-post-row:hover { background:rgba(255,255,255,.07); }
.social-post-thumb { width:120px; height:90px; flex-shrink:0; }
.social-post-thumb img { width:100%; height:100%; object-fit:cover; }
.social-post-info { padding:14px; flex:1; }
.social-post-title { font-size:.88rem; font-weight:600; margin-bottom:4px; }
.social-post-meta { font-size:.75rem; color:var(--muted); }
@media(max-width:900px) { .detail-layout { grid-template-columns:1fr; } .detail-body { padding:0 20px 60px; } .detail-hero { height:300px; } .detail-hero-badges { left:20px; bottom:20px; } .detail-title { font-size:2rem; } }
@media(max-width:640px) { .detail-body { padding:0 14px 50px; } .detail-title { font-size:1.7rem; } }

/* ─── QR DETAIL OVERLAY — Creative Modern UI ─── */
.qr-detail-overlay {
  position:fixed; inset:0; z-index:510; background:rgba(2,4,12,.88); backdrop-filter:blur(20px);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.qr-detail-overlay.open { display:flex; animation:veilIn .3s; }
.qr-detail-modal {
  width:min(480px,100%); border-radius:28px; overflow:hidden; position:relative;
  background:linear-gradient(145deg,#0d1424,#070c1c);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 44px 100px -20px rgba(0,0,0,.95);
  animation:modalIn .4s var(--ease);
}
.qr-detail-header {
  padding:20px 20px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.qr-detail-close {
  width:32px;height:32px;border-radius:9px;background:var(--glass);border:1px solid var(--glass-b);
  display:grid;place-items:center;cursor:pointer;
}
.qr-detail-close svg { width:12px;height:12px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round; }
.qr-detail-body { padding:24px; text-align:center; }
.qr-detail-preview {
  width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; margin-bottom:20px; position:relative;
  background:var(--surf2);
}
.qr-detail-preview img { width:100%;height:100%;object-fit:cover; }
.qr-detail-preview-ov {
  position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);
  display:flex;align-items:flex-end;padding:14px;
}
.qr-detail-badge {
  padding:4px 10px;border-radius:99px;font-size:.65rem;font-weight:800;letter-spacing:.08em;
  background:linear-gradient(120deg,var(--A),var(--A2));color:#fff;
}
.qr-frame {
  width:280px;height:280px;border-radius:20px;background:#fff;padding:14px;
  margin:0 auto 18px;position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 20px 60px -10px var(--Ag);
}
@media(max-width:520px){
  .qr-frame { width:86vw; height:86vw; max-width:340px; max-height:340px; }
}
.qr-frame .pm-scan { animation:scan 2.4s ease-in-out infinite; }
.qr-detail-title { font-size:1.1rem;font-weight:800;margin-bottom:6px; }
.qr-detail-creator { font-size:.8rem;color:var(--muted);margin-bottom:16px; }
.qr-detail-price {
  font-family: 'Segoe UI', Montserrat, Arial, sans-serif;font-size:2rem;font-weight:900;
  background:linear-gradient(120deg,var(--A2),var(--A));-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:4px;
}
.qr-detail-info { font-size:.72rem;color:var(--faint);margin-bottom:20px; }
.qr-detail-steps {
  display:flex;flex-direction:column;gap:9px;background:rgba(255,255,255,.04);
  border-radius:14px;padding:14px;text-align:left;margin-bottom:20px;
}
.qr-detail-step { display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--muted); }
.qr-detail-step i {
  width:22px;height:22px;border-radius:99px;background:var(--As);color:var(--A2);
  display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.63rem;flex-shrink:0;
}
.qr-detail-or { font-size:.75rem;color:var(--faint);text-align:center;margin:0 0 14px;position:relative; }
.qr-detail-or::before,.qr-detail-or::after {
  content:'';position:absolute;top:50%;width:40%;height:1px;background:rgba(255,255,255,.1);
}
.qr-detail-or::before{left:0}.qr-detail-or::after{right:0}
.qr-pay-btn {
  width:100%;padding:14px;border-radius:14px;font-weight:800;font-size:.92rem;
  background:linear-gradient(120deg,var(--A),var(--A2));color:#fff;border:none;cursor:pointer;
  box-shadow:0 8px 24px -8px var(--Ag);transition:transform .2s,box-shadow .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.qr-pay-btn:hover { transform:translateY(-2px);box-shadow:0 14px 32px -8px var(--Ag); }
.qr-pay-btn svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; }

/* ─── VIDEO DETAILS PAGE ─── */
.vid-det-overlay {
  position:fixed;top:60px;left:0;right:0;bottom:0;z-index:405;background:var(--bg);overflow-y:auto;display:none;
}
.vid-det-overlay.open { display:block;animation:slideInDetail .4s var(--ease); }
.vid-det-hero { position:relative;height:clamp(300px,55vh,580px);overflow:hidden;background:#000; }
.vid-det-hero-img { width:100%;height:100%;object-fit:cover;opacity:.7; }
.vid-det-hero-ov { position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 0%,rgba(6,8,15,.3) 60%,transparent 100%); }
.vid-det-play-overlay {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;
}
.vid-det-play-circle {
  width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(12px);
  border:2px solid rgba(255,255,255,.3);display:grid;place-items:center;
  transition:transform .2s,background .2s;
}
.vid-det-play-overlay:hover .vid-det-play-circle { transform:scale(1.1);background:rgba(255,255,255,.25); }
.vid-det-play-circle svg { width:30px;height:30px;fill:#fff;stroke:none;margin-left:4px; }
.vid-det-body { padding:0 clamp(16px,5vw,64px) 80px;max-width:1160px;margin:0 auto; }
.vid-det-layout { display:grid;grid-template-columns:1fr 340px;gap:36px;margin-top:24px; }
@media(max-width:900px){ .vid-det-layout{grid-template-columns:1fr} }
.vid-det-title { font-size:clamp(1.6rem,4vw,2.8rem);font-weight:900;letter-spacing:-.03em;line-height:1.05; }
.vid-det-meta { display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-top:10px; }
/* Compact about section */
.vid-about-strip {
  display:flex;flex-wrap:wrap;gap:0;margin-top:20px;
  background:var(--surf);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.07);
}
.vid-about-cell {
  flex:1 1 160px;padding:14px 16px;border-right:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.vid-about-cell:last-child{border-right:none}
.vid-about-lbl { font-size:.63rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700;margin-bottom:4px; }
.vid-about-val { font-size:.85rem;font-weight:600; }
.vid-creator-card {
  display:flex;align-items:center;gap:14px;background:var(--surf);border-radius:16px;
  padding:16px;border:1px solid rgba(255,255,255,.07);margin-top:18px;
}
.vid-creator-info { flex:1; }
.vid-creator-name { font-size:.96rem;font-weight:800; }
.vid-creator-bio { font-size:.78rem;color:var(--muted);line-height:1.5;margin-top:4px; }
.vid-creator-actions { display:flex;gap:8px;margin-top:12px; }
.vid-creator-btn { padding:7px 16px;border-radius:99px;font-size:.75rem;font-weight:700;border:none;cursor:pointer;transition:all .2s; }
.vid-creator-btn.view { background:var(--surf2);color:var(--text);border:1px solid rgba(255,255,255,.12); }
.vid-creator-btn.tip { background:linear-gradient(120deg,var(--A),var(--A2));color:#fff; }
/* Aside unlock card */
.vid-aside-unlock { background:var(--surf);border-radius:20px;padding:22px;border:1px solid rgba(255,255,255,.07);position:sticky;top:80px; }
.vid-aside-preview { width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:16px;position:relative;cursor:pointer; }
.vid-aside-preview img { width:100%;height:100%;object-fit:cover;transition:transform .4s; }
.vid-aside-preview:hover img { transform:scale(1.04); }
.vid-aside-play { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.vid-aside-play-dot { width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center; }
.vid-aside-play-dot svg { width:18px;height:18px;fill:#000;stroke:none;margin-left:2px; }

/* ─── GALLERY DETAILS PAGE ─── */
.gallery-det-overlay {
  position:fixed;top:60px;left:0;right:0;bottom:0;z-index:406;background:var(--bg);overflow-y:auto;display:none;
}
.gallery-det-overlay.open { display:block;animation:slideInDetail .4s var(--ease); }
.gallery-det-hero { position:relative;height:340px;overflow:hidden; }
.gallery-det-hero img { width:100%;height:100%;object-fit:cover; }
.gallery-det-hero-ov { position:absolute;inset:0;background:linear-gradient(to top,var(--bg),transparent 60%); }
.gallery-det-body { padding:0 clamp(16px,5vw,64px) 80px;max-width:1160px;margin:0 auto; }
.gallery-grid-full {
  columns:4;column-gap:10px;
}
@media(max-width:900px){.gallery-grid-full{columns:3}}
@media(max-width:600px){.gallery-grid-full{columns:2}}
.gallery-full-item { break-inside:avoid;margin-bottom:10px;border-radius:10px;overflow:hidden;cursor:pointer;position:relative;display:block; }
.gallery-full-item img { width:100%;display:block;transition:transform .4s var(--ease); }
.gallery-full-item:hover img { transform:scale(1.04); }
.gallery-full-ov {
  position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 50%);
  opacity:0;transition:opacity .25s;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;
}
.gallery-full-item:hover .gallery-full-ov { opacity:1; }
.gallery-creator-strip {
  display:flex;align-items:center;gap:14px;background:var(--surf);border-radius:16px;
  padding:16px 20px;border:1px solid rgba(255,255,255,.07);margin:20px 0;
}

/* ─── MUSIC ABOUT & CREATOR SECTION ─── */
.music-about-section {
  display:none; padding:0 clamp(16px,4vw,40px) 28px;max-width:1160px;margin:0 auto;
}
.music-about-section.visible { display:block; }
.music-about-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
@media(max-width:700px){.music-about-grid{grid-template-columns:1fr}}.music-about-card { background:var(--surf);border-radius:16px;padding:18px;border:1px solid rgba(255,255,255,.07); }
.music-about-card h3 { font-size:.9rem;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.music-about-card h3 .bar { width:4px;height:16px;border-radius:99px;background:linear-gradient(to bottom,var(--A2),var(--A));flex-shrink:0; }
.music-about-row { display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.82rem; }
.music-about-row:last-child{border-bottom:none}
.music-about-lbl { color:var(--muted); }
.music-about-val { font-weight:600; }
.music-creator-bar {
  display:flex;align-items:center;gap:14px;background:var(--surf);border-radius:16px;
  padding:16px 20px;border:1px solid rgba(255,255,255,.07);margin-top:16px;
}

/* ─── IMMERSIVE EBOOK READER ─── */
.ebook-reader-overlay { z-index:460; }
.ebook-immersive-modal {
  width:min(880px,98vw);max-height:96vh;border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 60px 120px rgba(0,0,0,.95), -8px 0 40px rgba(0,0,0,.5), 8px 0 40px rgba(0,0,0,.5);
  animation:bookOpen .5s var(--ease);
  perspective:1200px;
}
@keyframes bookOpen {
  from{opacity:0;transform:perspective(1200px) rotateY(-10deg) scale(.92)}
  to{opacity:1;transform:perspective(1200px) rotateY(0deg) scale(1)}
}

/* ── Real book page-turn animation ── */
@keyframes pageTurnLeft {
  0%  { transform:perspective(1200px) rotateY(0deg); opacity:1; transform-origin:right center; }
  50% { transform:perspective(1200px) rotateY(-90deg); opacity:.6; transform-origin:right center; }
  51% { transform:perspective(1200px) rotateY(90deg); opacity:.6; transform-origin:left center; }
  100%{ transform:perspective(1200px) rotateY(0deg); opacity:1; transform-origin:left center; }
}
@keyframes pageTurnRight {
  0%  { transform:perspective(1200px) rotateY(0deg); opacity:1; transform-origin:left center; }
  50% { transform:perspective(1200px) rotateY(90deg); opacity:.6; transform-origin:left center; }
  51% { transform:perspective(1200px) rotateY(-90deg); opacity:.6; transform-origin:right center; }
  100%{ transform:perspective(1200px) rotateY(0deg); opacity:1; transform-origin:right center; }
}
.ebook-page.turning-left  { animation:pageTurnLeft  .45s cubic-bezier(.45,0,.55,1); }
.ebook-page.turning-right { animation:pageTurnRight .45s cubic-bezier(.45,0,.55,1); }

/* ── Page curl shadow on right edge of left page ── */
.ebook-left-page::after {
  content:'';position:absolute;top:0;right:0;bottom:0;width:30px;pointer-events:none;
  background:linear-gradient(to left,rgba(0,0,0,.07) 0%,transparent 100%);
}

.ebook-toolbar {
  background:#1a1209;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(139,90,43,.3);flex-shrink:0;
}
.ebook-toolbar-left { display:flex;align-items:center;gap:10px; }
.ebook-toolbar-title { font-size:.85rem;font-weight:700;color:#d4b896; }
.ebook-ctrl-btn { width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;cursor:pointer; }
.ebook-ctrl-btn svg { width:12px;height:12px;stroke:#d4b896;fill:none;stroke-width:2;stroke-linecap:round; }
.ebook-page-wrap { display:flex;flex:1;overflow:hidden;min-height:0; }
.ebook-spine-visual {
  width:28px;flex-shrink:0;
  background:linear-gradient(to right,#1a0f07,#2a1a0e,#1a0f07);
  border-right:2px solid rgba(139,90,43,.4);
  display:flex;align-items:center;justify-content:center;
}
.ebook-spine-text {
  font-size:.5rem;font-weight:700;letter-spacing:.15em;color:rgba(212,184,150,.4);
  writing-mode:vertical-rl;text-transform:uppercase;white-space:nowrap;
}
.ebook-pages { flex:1;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;position:relative; }
@media(max-width:660px){ .ebook-pages{grid-template-columns:1fr} .ebook-right-page{display:none} }
.ebook-page {
  padding:40px clamp(24px,5%,56px);overflow-y:auto;
  font-family:Georgia,serif;font-size:1rem;line-height:1.9;color:#2d1b0e;
  position:relative;
  transition:box-shadow .2s;
}
.ebook-left-page { background:#fdf8f0;border-right:2px solid #ddd0b6; box-shadow:inset -4px 0 12px rgba(0,0,0,.06); }
.ebook-right-page { background:#faf5eb; box-shadow:inset 4px 0 8px rgba(0,0,0,.03); }
.ebook-page h2 { font-size:1.2rem;font-weight:800;margin-bottom:18px;color:#1a0f07;font-family:Georgia,serif;line-height:1.3; }
.ebook-page p { margin-bottom:14px;text-indent:2em; }
.ebook-page p:first-of-type { text-indent:0; }
.ebook-page p:first-of-type::first-letter {
  font-size:3.2em;float:left;line-height:.75;margin:0 8px -4px 0;font-family:Georgia,serif;
  color:var(--A);font-weight:400;
}
.ebook-page-num { font-size:.65rem;color:#a08060;text-align:center;padding:10px;border-top:1px solid #e8d9c0;margin-top:auto;font-family:Georgia,serif;font-style:italic; }
.ebook-footer {
  background:#1a1209;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(139,90,43,.3);flex-shrink:0;
}

/* ── Page slider (replaces prev/next buttons) ── */
.ebook-slider-wrap { flex:1;display:flex;flex-direction:column;gap:4px; }
.ebook-slider-track {
  position:relative;height:6px;border-radius:99px;background:rgba(212,184,150,.2);cursor:pointer;
}
.ebook-slider-fill { height:100%;border-radius:99px;background:linear-gradient(90deg,#b45309,#d97706);transition:width .25s ease;pointer-events:none; }
.ebook-slider-thumb {
  position:absolute;top:50%;transform:translateY(-50%) translateX(-50%);
  width:18px;height:18px;border-radius:50%;background:#d97706;
  border:3px solid #fdf8f0;box-shadow:0 2px 8px rgba(0,0,0,.4);
  cursor:grab;transition:transform .15s, box-shadow .15s;
}
.ebook-slider-thumb:active { cursor:grabbing; transform:translateY(-50%) translateX(-50%) scale(1.2); box-shadow:0 4px 14px rgba(180,83,9,.5); }
.ebook-slider-labels { display:flex;justify-content:space-between;font-size:.6rem;color:#a08060;font-family:Georgia,serif;font-style:italic;padding:0 2px; }

.ebook-buy-btn { padding:10px 22px;border-radius:8px;font-weight:800;font-size:.85rem;background:linear-gradient(120deg,var(--A),var(--A2));color:#fff;border:none;cursor:pointer;white-space:nowrap; }
.ebook-turn-effect {
  position:absolute;top:0;right:0;bottom:0;width:60px;pointer-events:none;
  background:linear-gradient(to left,rgba(0,0,0,.12),transparent);
}

/* ─── ABOUT SECTION — matches screenshot exactly ─── */
.about-compact {
  padding:0 clamp(16px,4vw,40px) 32px; max-width:1160px; margin:0 auto;
  display:none;
}
.about-compact.visible { display:block; animation:slideInDetail .35s var(--ease); }
.about-compact-grid { display:grid; grid-template-columns:1fr 360px; gap:16px; }
@media(max-width:900px){ .about-compact-grid{grid-template-columns:1fr} }
.about-compact-card {
  background:var(--surf); border-radius:16px; padding:20px 22px;
  border:1px solid rgba(255,255,255,.07);
}
.about-compact-card-title {
  font-size:.95rem; font-weight:800; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.about-compact-card-title .bar { width:4px; height:16px; border-radius:99px; background:linear-gradient(to bottom,var(--A2),var(--A)); flex-shrink:0; }
/* Meta rows with icon — matches screenshot layout */
.about-meta-2col { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.about-meta-row {
  display:flex; align-items:flex-start; gap:12px; padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.about-meta-row:nth-child(even) { border-left:1px solid rgba(255,255,255,.05); }
.about-meta-row:last-child,:nth-last-child(2).about-meta-row { border-bottom:none; }
.about-meta-icon-wrap {
  width:32px; height:32px; border-radius:9px; background:var(--surf2);
  display:grid; place-items:center; flex-shrink:0; margin-top:2px;
}
.about-meta-icon-wrap svg { width:14px; height:14px; stroke:var(--muted); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.about-meta-lbl { font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-bottom:3px; text-align:left; }
.about-meta-val { font-size:.88rem; font-weight:600; line-height:1.3; text-align:left; }
/* Creator aside */
.about-creator-card { background:var(--surf); border-radius:16px; padding:20px 22px; border:1px solid rgba(255,255,255,.07); }
.creator-avatar-lg { width:60px; height:60px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--As); }
.creator-name-lg { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:1.1rem; font-weight:800; display:flex; align-items:center; gap:6px; }
.creator-bio-lg { font-size:.82rem; color:var(--muted); line-height:1.6; margin-top:4px; max-width:36ch; }
.creator-action-row { display:flex; gap:10px; margin-top:16px; }
.creator-action-btn { flex:1; padding:10px 14px; border-radius:10px; font-weight:700; font-size:.82rem; text-align:center; cursor:pointer; transition:all .2s; border:none; display:flex; align-items:center; justify-content:center; gap:6px; }
.creator-action-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.creator-action-btn.view { background:var(--A); color:#fff; }
.creator-action-btn.view:hover { transform:translateY(-1px); box-shadow:0 6px 18px -6px var(--Ag); }
.creator-action-btn.tip { background:var(--surf2); color:var(--text); border:1px solid rgba(255,255,255,.1); }
.creator-action-btn.tip:hover { background:rgba(255,255,255,.1); }
.about-compact-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
@media(max-width:700px){.about-compact-grid{grid-template-columns:1fr}}
.about-compact-card { background:var(--surf);border-radius:16px;padding:18px;border:1px solid rgba(255,255,255,.07); }
.about-compact-card-title { font-size:.88rem;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px; }
.about-compact-card-title .bar { width:4px;height:15px;border-radius:99px;background:linear-gradient(to bottom,var(--A2),var(--A));flex-shrink:0; }
.about-meta-row { display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.81rem; }
.about-meta-row:last-child{border-bottom:none}
.about-meta-lbl { color:var(--muted);display:flex;align-items:center;gap:7px; }
.about-meta-lbl svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6; }
.about-meta-val { font-weight:600;text-align:left;max-width:200px; }
.about-creator-card { background:var(--surf);border-radius:16px;padding:18px;border:1px solid rgba(255,255,255,.07); }

/* ─── IMAGE GALLERY DETAIL ─── */
.img-gallery-det-overlay {
  position:fixed;top:60px;left:0;right:0;bottom:0;z-index:407;background:var(--bg);overflow-y:auto;display:none;
}
.img-gallery-det-overlay.open { display:block;animation:slideInDetail .4s var(--ease); }

/* ─── EBOOK DETAILS PAGE ─── */
.ebook-det-overlay {
  position:fixed;top:60px;left:0;right:0;bottom:0;z-index:408;background:var(--bg);overflow-y:auto;display:none;
}
.ebook-det-overlay.open { display:block;animation:slideInDetail .4s var(--ease); }

/* ─── IMAGE INDIVIDUAL DETAILS PAGE ─── */
/* ── Image detail overlay ── */
.img-det-overlay {
  position:fixed;inset:0;z-index:452;background:rgba(0,0,0,.97);
  display:none;
}
.img-det-overlay.open { display:flex;animation:veilIn .3s; }

/* Two-column: image left fills remaining space, details right fixed 380px */
.img-det-modal {
  width:100%;height:100vh;background:var(--bg);
  display:grid;grid-template-columns:1fr 380px;overflow:hidden;
}
@media(max-width:860px){
  .img-det-modal{grid-template-columns:1fr;height:auto;overflow:visible;}
  .img-det-left{height:60vw!important;min-height:280px;}
  .img-det-right{height:auto;overflow-y:visible;}
}

/* Left: full-height black stage — image fills it, never overflows */
.img-det-left {
  position:relative;background:#0a0a0a;
  height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* Image scales to fit the stage in either dimension — works for portrait & landscape */
.img-det-main-img {
  max-width:100%;max-height:100%;
  width:100%;height:100%;
  object-fit:contain;display:block;
}

/* Copyright: tiled diagonal watermark across entire image area */
.img-det-copyright {
  position:absolute;inset:0;overflow:hidden;
  pointer-events:none;user-select:none;
  display:flex;align-items:center;justify-content:center;
}
.img-det-copyright::before {
  content:attr(data-copy);
  display:block;
  font-size:clamp(.9rem,2.5vw,1.6rem);font-weight:900;
  color:rgba(255,255,255,.22);letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;transform:rotate(-28deg);
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}

/* Right: scrollable details panel */
.img-det-right {
  background:var(--surf);padding:0;
  border-left:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;
  height:100vh;overflow-y:auto;
}
.img-det-right-head {
  padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.07);
  position:sticky;top:0;background:var(--surf);z-index:2;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.img-det-right-body { padding:20px;flex:1;display:flex;flex-direction:column;gap:16px; }
.img-det-close {
  width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;cursor:pointer;
}
.img-det-close svg { width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round; }
.img-det-title { font-size:1.15rem;font-weight:800;line-height:1.3; }
.img-det-creator { display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--muted); }
.img-det-tags { display:flex;flex-wrap:wrap;gap:6px; }
.img-det-tag { padding:4px 11px;border-radius:99px;background:var(--surf2);font-size:.7rem;color:var(--muted);border:1px solid rgba(255,255,255,.06); }
.img-det-specs { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.img-det-spec { background:var(--surf2);border-radius:10px;padding:11px 13px; }
.img-det-spec-lbl { font-size:.62rem;color:var(--faint);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;font-weight:700; }
.img-det-spec-val { font-size:.84rem;font-weight:600; }
.img-det-licence {
  background:rgba(20,184,166,.07);border:1px solid rgba(20,184,166,.22);border-radius:12px;padding:14px;
}
.img-det-licence-title { font-size:.78rem;font-weight:800;color:#5eead4;margin-bottom:6px; }
.img-det-licence-text { font-size:.72rem;color:var(--muted);line-height:1.55; }
.img-det-price-row {
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surf2);border-radius:12px;padding:14px 16px;margin-top:auto;
}
.img-det-price { font-family: 'Segoe UI', Montserrat, Arial, sans-serif;font-size:1.6rem;font-weight:900;color:var(--A2); }
.img-det-price-sub { font-size:.68rem;color:var(--faint);margin-top:2px; }
.img-det-buy-btn {
  padding:12px 22px;border-radius:11px;font-weight:800;font-size:.9rem;
  background:linear-gradient(120deg,var(--A),var(--A2));color:#fff;border:none;cursor:pointer;
  box-shadow:0 6px 20px -6px var(--Ag);transition:transform .2s,box-shadow .2s;
}
.img-det-buy-btn:hover { transform:translateY(-2px);box-shadow:0 10px 28px -6px var(--Ag); }

@media(max-width:640px){
  .vid-det-layout{grid-template-columns:1fr}
  .about-compact-grid{grid-template-columns:1fr}
  .music-about-grid{grid-template-columns:1fr}
}
.nav {
  position:sticky; top:0; z-index:440;
  display:flex; align-items:center; height:60px; gap:6px; padding:0 24px;
  background:rgba(6,8,15,.82); backdrop-filter:blur(22px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .4s;
}
.nav-logo {
  font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-weight:900; font-size:1.38rem; letter-spacing:-.5px;
  background:linear-gradient(120deg,var(--A2),var(--A) 60%); -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap; flex-shrink:0; margin-right:8px; transition:background .5s;
}
.nav-links { display:flex; gap:1px; flex:1; overflow-x:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-btn {
  padding:6px 13px; border-radius:99px; font-size:.83rem; font-weight:500;
  color:var(--muted); white-space:nowrap; transition:all .25s var(--ease);
}
.nav-btn:hover { color:var(--text); background:var(--glass); }
.nav-btn.active {
  color:#fff; font-weight:700;
  background:linear-gradient(120deg,var(--A),var(--A2));
  box-shadow:0 4px 18px -4px var(--Ag);
}
/* Sub-navigation bar (Videos › Series, Music › Album, etc.) */
.sub-nav-bar {
  display:none; align-items:center; gap:6px;
  padding:8px 24px; background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow-x:auto; scrollbar-width:none;
}
.sub-nav-bar::-webkit-scrollbar { display:none; }
.sub-nav-bar.visible { display:flex; }
.sub-nav-sep { color:var(--faint); font-size:.8rem; margin:0 2px; }
.sub-nav-item {
  padding:5px 14px; border-radius:99px; font-size:.8rem; font-weight:600;
  color:var(--muted); white-space:nowrap; cursor:pointer;
  transition:all .22s var(--ease); border:1px solid transparent;
}
.sub-nav-item:hover { color:var(--text); background:var(--glass); }
.sub-nav-item.active {
  color:var(--A2); background:var(--As);
  border-color:var(--Ag);
}
/* Sub-page containers */
.subpage { display:none; }
.subpage.visible { display:block; }
.icon-btn {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--glass-b); transition:all .25s; position:relative;
}
.icon-btn:hover { background:rgba(255,255,255,.12); transform:translateY(-1px); }
.icon-btn svg { width:17px; height:17px; stroke:var(--text); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cart-badge {
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; border-radius:99px;
  background:var(--A); font-size:.6rem; font-weight:800; display:grid; place-items:center;
  padding:0 3px; border:2px solid var(--bg); color:#fff;
}
.nav-login {
  padding:8px 18px; border-radius:11px; font-weight:700; font-size:.85rem; color:#fff;
  background:linear-gradient(120deg,var(--A),var(--A2)); box-shadow:0 6px 18px -6px var(--Ag);
  transition:all .3s;
}
.nav-login:hover { transform:translateY(-2px); box-shadow:0 10px 26px -6px var(--Ag); }

/* ─────────────────────────────────────────────
   MOBILE NAV — hamburger + slide-in drawer
───────────────────────────────────────────── */
.nav-hamburger {
  display:none; width:40px; height:40px; border-radius:11px; place-items:center;
  background:var(--glass); border:1px solid var(--glass-b); flex-shrink:0; transition:background .2s;
}
.nav-hamburger:active { background:rgba(255,255,255,.14); }
.nav-hamburger svg { width:20px; height:20px; stroke:var(--text); fill:none; stroke-width:2.2; stroke-linecap:round; }
.drawer-backdrop {
  position:fixed; inset:0; z-index:498; background:rgba(3,5,12,.6);
  backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.drawer-backdrop.open { opacity:1; pointer-events:auto; }
.drawer {
  position:fixed; top:0; left:0; bottom:0; z-index:499; width:min(82vw,330px);
  background:var(--bg2); border-right:1px solid rgba(255,255,255,.08);
  box-shadow:24px 0 60px -20px rgba(0,0,0,.7);
  transform:translateX(-105%); transition:transform .34s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.open { transform:none; }
.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.07);
}
.drawer-close {
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--glass-b);
}
.drawer-close svg { width:16px; height:16px; stroke:var(--text); fill:none; stroke-width:2.2; stroke-linecap:round; }
.drawer-list { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:4px; }
.drawer-item {
  display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:14px;
  color:var(--muted); font-size:.95rem; font-weight:600;
  transition:background .2s var(--ease), color .2s; cursor:pointer;
}
.drawer-item:hover { background:var(--glass); color:var(--text); }
.drawer-item.active {
  background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff;
  box-shadow:0 8px 22px -8px var(--Ag);
}
.drawer-item .di-ico { font-size:1.25rem; width:30px; text-align:center; flex-shrink:0; }
.drawer-item .di-arrow { margin-left:auto; opacity:.45; display:flex; }
.drawer-item .di-arrow svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; }
.drawer-foot {
  padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.07);
}

@media (max-width:768px) {
  .nav { padding:0 14px; gap:10px; height:56px; }
  .nav-hamburger { display:grid; }
  .nav-links { display:none; }
  .nav-logo { margin-right:auto; }
  .nav-logo img { height:34px !important; }
  .nav-login { display:none; }
  .nav-right { gap:8px; }
  .icon-btn { width:36px; height:36px; }
  .sub-nav-bar { padding:8px 14px; }
  .breadcrumb { padding:10px 14px 0; }
}

/* ─────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────── */
.breadcrumb {
  display:flex; align-items:center; gap:7px; padding:12px 24px 0;
  font-size:.78rem; color:var(--faint); position:relative; z-index:1;
}
.breadcrumb a { transition:color .2s; }
.breadcrumb a:hover { color:var(--A2); }
.breadcrumb .sep { opacity:.4; }

/* ─────────────────────────────────────────────
   HERO CAROUSEL — FULL SCREEN BANNER
───────────────────────────────────────────── */
.hero-outer {
  position:relative; z-index:1; overflow:hidden;
  margin:10px 0 0;
}
.hero-track {
  display:flex; will-change:transform;
  transition:transform .75s var(--ease);
}
.hero-slide {
  min-width:100%; position:relative;
  height:clamp(520px, 74vh, 860px); overflow:hidden; flex-shrink:0;
}
/* Full-bleed background art */
.hs-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hs-bg-art { position:absolute; inset:0; transition:transform 8s ease-out; }
.hero-slide.is-active .hs-bg-art { transform:scale(1.065); }
/* Overlay gradients */
.hs-ov {
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.hs-ov-cinema {
  background:
    linear-gradient(105deg, rgba(4,6,16,.88) 0%, rgba(4,6,16,.62) 28%, rgba(4,6,16,.08) 58%, rgba(4,6,16,0) 100%),
    linear-gradient(to top, rgba(4,6,16,.78) 0%, transparent 55%);
}
/* Main content area */
.hs-content {
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:flex-end;
  padding:0 60px 80px; max-width:740px;
  left:0; right:auto;
}
/* Top-aligned variant — used for Live, Social, Games, Podcasts, Donate
   so the title/info/CTA block sits at the top of the slide instead of the bottom */
.hs-content.hs-top {
  align-items:flex-start;
  padding:96px 60px 0;
}
.hs-inner { display:flex; flex-direction:column; gap:15px; text-align:left; align-items:flex-start; }
/* Badges */
.badge-row { display:flex; gap:9px; flex-wrap:wrap; }
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:99px; font-size:.67rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
}
.badge-primary { background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff; box-shadow:0 4px 14px -4px var(--Ag); }
.badge-glass { background:rgba(255,255,255,.1); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); color:var(--text); }
.badge-live { background:linear-gradient(120deg,#dc2626,#f97316); color:#fff; animation:livePulse 1.6s infinite; }
.badge-star { background:rgba(251,191,36,.15); border:1px solid rgba(251,191,36,.35); color:#fbbf24; }
.live-dot { width:7px; height:7px; border-radius:99px; background:#fff; animation:blinkDot 1.2s infinite; }
@keyframes blinkDot { 50%{ opacity:.2; } }
@keyframes livePulse { 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.6); } 50%{ box-shadow:0 0 0 8px rgba(239,68,68,0); } }
/* Hero title */
.hs-title {
  font-size:clamp(2.5rem,5.6vw,5rem); font-weight:900; line-height:.96;
  letter-spacing:-.03em; text-shadow:0 6px 40px rgba(0,0,0,.7);
}
.hs-title .hl { background:linear-gradient(115deg,var(--A2),var(--A)); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Meta row */
.hs-meta { display:flex; align-items:center; gap:13px; flex-wrap:wrap; font-size:.89rem; color:var(--muted); }
.hs-creator { display:flex; align-items:center; gap:8px; color:var(--text); font-weight:600; }
.av {
  width:30px; height:30px; border-radius:99px; display:grid; place-items:center;
  font-weight:800; font-size:.72rem; color:#fff;
  background:linear-gradient(135deg,var(--A),var(--A2)); border:2px solid rgba(255,255,255,.25);
  font-family: 'Segoe UI', Montserrat, Arial, sans-serif; flex-shrink:0;
}
.tick { width:14px; height:14px; border-radius:99px; background:var(--A); display:inline-grid; place-items:center; flex-shrink:0; }
.tick svg { width:8px; height:8px; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* Description */
.hs-desc { font-size:.94rem; line-height:1.65; color:rgba(200,210,230,.9); max-width:56ch; text-shadow:0 2px 12px rgba(0,0,0,.5); }
/* Stats */
.hs-stats { display:flex; gap:18px; flex-wrap:wrap; }
.hs-stat { display:flex; align-items:center; gap:7px; font-size:.83rem; color:var(--muted); }
.hs-stat svg { width:15px; height:15px; stroke:var(--A2); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hs-stat b { color:var(--text); font-weight:700; }
/* Donate progress */
.donate-prog { max-width:440px; margin-top:2px; }
.dp-bar { height:11px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.dp-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--A),var(--A2)); width:0; transition:width 1.5s var(--ease); position:relative; overflow:hidden; }
.dp-fill::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent,rgba(255,255,255,.4),transparent); animation:shimmer 1.8s infinite; }
@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.dp-nums { display:flex; justify-content:space-between; font-size:.79rem; color:var(--muted); margin-top:7px; }
.dp-nums b { color:var(--text); }
/* Action buttons */
.hs-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
.btn {
  display:inline-flex; align-items:center; gap:9px; padding:12px 24px;
  border-radius:13px; font-weight:700; font-size:.91rem; cursor:pointer; border:none; font-family:inherit;
  transition:all .3s var(--ease); position:relative; overflow:hidden;
}
.btn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.btn-primary {
  background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff;
  box-shadow:0 10px 28px -8px var(--Ag);
}
.btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%); transform:translateX(-110%); transition:transform .65s; }
.btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 16px 38px -8px var(--Ag); }
.btn-primary:hover::after { transform:translateX(110%); }
.btn-ghost { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); color:var(--text); }
.btn-ghost:hover { background:rgba(255,255,255,.17); transform:translateY(-2px); }
.btn-outline { background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--text); }
.btn-outline:hover { background:rgba(255,255,255,.08); }
.btn-sm { padding:9px 17px; font-size:.8rem; border-radius:10px; }
.btn-green { background:linear-gradient(120deg,#16a34a,#22c55e); color:#fff; box-shadow:0 8px 22px -8px rgba(34,197,94,.5); }

/* Unlock card — right side of hero */
.unlock-card {
  position:absolute; right:50px; top:50%; transform:translateY(-50%);
  width:330px; z-index:20;
  background:rgba(8,12,26,.68); backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid rgba(255,255,255,.15); border-radius:20px; padding:20px;
  box-shadow:0 24px 56px -12px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Top-aligned variant — used alongside .hs-top so the unlock/join card lines up
   with the top content block instead of floating mid-slide */
.unlock-card.uc-top {
  top:96px; transform:none;
}
.uc-title { font-size:.95rem; font-weight:700; margin-bottom:11px; }
.uc-tabs { display:flex; gap:3px; background:rgba(255,255,255,.07); border-radius:10px; padding:3px; margin-bottom:12px; }
.uc-tab {
  flex:1; padding:7px; border-radius:8px; font-size:.77rem; font-weight:600;
  color:var(--muted); transition:all .22s; cursor:pointer;
}
.uc-tab.active { background:var(--A); color:#fff; box-shadow:0 4px 12px -4px var(--Ag); }
.uc-body { display:flex; gap:13px; align-items:center; }
.uc-qr {
  width:130px; height:130px; border-radius:11px; background:#fff;
  padding:6px; flex-shrink:0; transition:transform .3s;
  display:flex; align-items:center; justify-content:center; line-height:0;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  border:1px solid rgba(0,0,0,.06);
}
.unlock-card:hover .uc-qr { transform:scale(1.05) rotate(-1.5deg); }
.uc-qr svg, .uc-qr img { width:100%; height:100%; display:block; object-fit:contain; }
.uc-info { font-size:.81rem; color:var(--muted); line-height:1.45; }
.uc-info b { color:var(--text); }
.uc-price { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:1.42rem; font-weight:800; margin-top:5px; background:linear-gradient(120deg,var(--A2),var(--A)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.uc-secure { display:flex; align-items:center; gap:6px; margin-top:11px; padding-top:11px; border-top:1px solid rgba(255,255,255,.09); font-size:.69rem; color:var(--faint); }
.uc-secure svg { width:11px; height:11px; stroke:var(--green); fill:none; stroke-width:2; flex-shrink:0; }
.uc-pin { display:none; }
.uc-pin input { width:100%; padding:10px; border-radius:9px; background:rgba(255,255,255,.07); border:1px solid var(--glass-b); color:var(--text); font-size:1.05rem; letter-spacing:.5em; text-align:center; outline:none; margin-bottom:9px; }
.uc-pin input:focus { border-color:var(--A); }
.uc-pin button { width:100%; padding:11px; border-radius:9px; font-weight:700; background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff; }

/* Carousel nav */
.hero-prev, .hero-next {
  position:absolute; top:50%; transform:translateY(-50%); z-index:25;
  width:46px; height:46px; border-radius:99px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.18);
  transition:all .3s; cursor:pointer;
}
.hero-prev { left:18px; }
.hero-next { right:360px; }
.hero-prev:hover, .hero-next:hover { background:rgba(255,255,255,.22); transform:translateY(-50%) scale(1.1); }
.hero-prev svg, .hero-next svg { width:19px; height:19px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
/* Dots */
.hero-dots { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:25; }
.hdot { width:8px; height:8px; border-radius:99px; background:rgba(255,255,255,.28); border:none; cursor:pointer; transition:all .35s; }
.hdot.active { width:28px; background:var(--A2); }

/* MicroSeries hero — vertical preview poster card (centre of the hero) */
.hero-preview {
  position:absolute; top:50%; left:56%; transform:translate(-50%,-50%);
  z-index:18; width:clamp(244px,23vw,300px); aspect-ratio:9/15.5;
  border-radius:18px; overflow:hidden; cursor:pointer;
  background:#0a0e1c; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 70px -16px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hero-preview:hover { transform:translate(-50%,-50%) translateY(-4px); box-shadow:0 44px 88px -16px rgba(0,0,0,.85); }
.hp-poster { position:absolute; inset:0; }
.hp-poster img { width:100%; height:100%; object-fit:cover; }
.hp-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,6,14,.92) 0%, rgba(4,6,14,.18) 34%, transparent 55%, rgba(4,6,14,.35) 100%);
}
.hp-ep-badge {
  position:absolute; top:12px; left:12px; z-index:3;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:99px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  font-size:.7rem; font-weight:800; letter-spacing:.02em; color:#fff;
}
.hp-ep-badge svg { width:10px; height:10px; fill:#fff; }
.hp-play { position:absolute; inset:0; display:grid; place-items:center; z-index:3; }
.hp-play-ring {
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.2); backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.6); display:grid; place-items:center;
  transition:transform .25s var(--ease), background .25s; box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.hero-preview:hover .hp-play-ring { transform:scale(1.1); background:rgba(255,255,255,.32); }
.hp-play-ring svg { width:24px; height:24px; fill:#fff; margin-left:3px; }
.hp-title {
  position:absolute; left:0; right:0; bottom:116px; z-index:3; padding:0 14px;
  font-size:1.18rem; font-weight:900; line-height:1.05; color:#fff; letter-spacing:-.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hp-thumbs { position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; gap:4px; padding:8px; }
.hp-thumb { flex:1; aspect-ratio:1; border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,.1); }
.hp-thumb img { width:100%; height:100%; object-fit:cover; }
/* Slide counter */
.slide-counter { position:absolute; bottom:30px; right:365px; z-index:25; font-family:'JetBrains Mono'; font-size:.73rem; color:rgba(255,255,255,.42); font-weight:700; }
/* Progress bar */
.hero-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.08); z-index:25; }
.hero-progress-fill { height:100%; background:linear-gradient(90deg,var(--A),var(--A2)); transform-origin:left; transition:width .12s linear; }

/* ─────────────────────────────────────────────
   ABOUT THIS VIDEO (videos category)
───────────────────────────────────────────── */
.about-section { display:none; padding:0 24px; margin-top:28px; position:relative; z-index:1; }
.about-section.visible { display:block; }
.about-grid { display:grid; grid-template-columns:1fr 310px; gap:22px; }
.about-card {
  background:var(--surf); border-radius:var(--R); padding:26px;
  border:1px solid rgba(255,255,255,.07);
}
.about-card h3 { font-size:1.18rem; font-weight:800; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.about-card h3 .bar { width:4px; height:22px; border-radius:99px; background:linear-gradient(to bottom,var(--A2),var(--A)); flex-shrink:0; }
.meta-table { display:grid; grid-template-columns:1fr 1fr; }
.meta-row {
  display:flex; gap:12px; align-items:flex-start; padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.meta-row:nth-child(odd) { padding-right:20px; border-right:1px solid rgba(255,255,255,.055); }
.meta-row:nth-child(even) { padding-left:20px; }
.meta-row:nth-last-child(1), .meta-row:nth-last-child(2) { border-bottom:none; }
.meta-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--As); flex-shrink:0; }
.meta-icon svg { width:15px; height:15px; stroke:var(--A2); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.meta-label { font-size:.68rem; color:var(--faint); font-weight:600; text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
.meta-val { font-size:.88rem; font-weight:600; color:var(--text); line-height:1.35; }
/* Creator card */
.creator-aside h3 { font-size:1.05rem; font-weight:800; margin-bottom:16px; }
.creator-profile { display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.creator-av { width:64px; height:64px; border-radius:99px; overflow:hidden; flex-shrink:0; border:2px solid var(--As); position:relative; }
.creator-name { font-size:.98rem; font-weight:700; display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.creator-bio { font-size:.8rem; color:var(--muted); line-height:1.5; }
.creator-btn {
  width:100%; padding:10px; border-radius:11px; font-weight:700; font-size:.82rem;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:9px; transition:all .25s;
}
.creator-btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.creator-btn.view { background:var(--As); color:var(--A2); border:1px solid rgba(59,130,246,.3); }
.creator-btn.view:hover { background:rgba(59,130,246,.28); }
.creator-btn.tip { background:var(--glass); border:1px solid var(--glass-b); color:var(--text); }
.creator-btn.tip:hover { background:rgba(255,255,255,.12); }

/* ─────────────────────────────────────────────
   TOOLBAR (search / filter)
───────────────────────────────────────────── */
.toolbar { display:flex; gap:12px; padding:24px 24px 4px; align-items:center; flex-wrap:wrap; position:relative; z-index:1; }
.search-box {
  flex:1; min-width:220px; display:flex; align-items:center; gap:9px; padding:11px 15px;
  background:var(--glass); border:1px solid var(--glass-b); border-radius:13px; backdrop-filter:blur(10px); transition:border-color .25s;
}
.search-box:focus-within { border-color:var(--A); }
.search-box svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:2; flex-shrink:0; stroke-linecap:round; }
.search-box input { flex:1; background:none; border:none; outline:none; color:var(--text); font-size:.89rem; }
.search-box input::placeholder { color:var(--faint); }
.sel-wrap { position:relative; }
.sel-wrap::after { content:'▾'; position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; font-size:.76rem; }
.sel-wrap select {
  appearance:none; padding:11px 36px 11px 15px; border-radius:13px;
  background:var(--surf); border:1px solid var(--glass-b); color:var(--text); font-size:.85rem; font-weight:500; outline:none; cursor:pointer; font-family:inherit;
}

/* ─────────────────────────────────────────────
   CONTENT SECTIONS
───────────────────────────────────────────── */
.section { padding:28px 24px 8px; position:relative; z-index:1; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.section-head h2 { font-size:1.38rem; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
.section-head h2 .bar { width:4px; height:21px; border-radius:99px; background:linear-gradient(to bottom,var(--A2),var(--A)); flex-shrink:0; }
.view-all { font-size:.82rem; font-weight:600; color:var(--A2); display:flex; align-items:center; gap:5px; transition:gap .25s; white-space:nowrap; }
.view-all:hover { gap:9px; }
/* Horizontal scroll row */
.h-scroll { display:flex; gap:15px; overflow-x:auto; padding-bottom:10px; scrollbar-width:none; }
.h-scroll::-webkit-scrollbar { display:none; }
/* "Best Of" genre tile row — used for Music genre showcase */
.genre-tile-row { display:flex; gap:18px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.genre-tile-row::-webkit-scrollbar { display:none; }
.genre-tile-wrap { flex-shrink:0; width:190px; }
.genre-tile {
  width:190px; height:190px; border-radius:18px; position:relative; overflow:hidden;
  cursor:pointer; display:flex; align-items:flex-start; padding:18px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.55);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.genre-tile:hover { transform:translateY(-4px) scale(1.015); box-shadow:0 26px 52px -14px rgba(0,0,0,.65); }
.genre-tile-label { font-size:1.34rem; font-weight:800; color:#fff; letter-spacing:-.01em; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.genre-tile-play {
  position:absolute; bottom:14px; right:14px; width:34px; height:34px; border-radius:99px;
  background:rgba(0,0,0,.32); backdrop-filter:blur(6px); display:grid; place-items:center;
  opacity:0; transform:scale(.8); transition:all .22s;
}
.genre-tile:hover .genre-tile-play { opacity:1; transform:scale(1); }
.genre-tile-play svg { width:14px; height:14px; fill:#fff; margin-left:1px; }
.genre-tile-caption { margin-top:10px; font-size:.85rem; color:var(--muted); font-weight:500; }
.genre-tile-nav {
  flex-shrink:0; width:38px; height:38px; border-radius:99px; background:var(--surf2);
  border:1px solid rgba(255,255,255,.1); display:grid; place-items:center; cursor:pointer;
  color:var(--text); transition:background .2s;
}
.genre-tile-nav:hover { background:var(--glass); }
.genre-tile-nav svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
/* Grid for "about" sections etc */
.grid-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }

/* ── VIEW ALL overlay — full category/section grid ── */
.viewall-overlay { position:fixed; inset:0; z-index:460; background:var(--bg); overflow-y:auto; display:none; }
.viewall-overlay.open { display:block; animation:slideInDetail .35s var(--ease); }
.viewall-head {
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
  padding:14px 20px; background:rgba(6,8,15,.92); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.viewall-back { display:flex; align-items:center; gap:7px; font-weight:700; font-size:.9rem; color:var(--text); cursor:pointer; transition:color .2s; }
.viewall-back:hover { color:var(--A2); }
.viewall-back svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.viewall-title { font-weight:800; font-size:1rem; }
.viewall-body { padding:22px 24px 70px; max-width:1240px; margin:0 auto; }
.viewall-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:18px; }
.viewall-grid > * { width:100% !important; flex:0 0 auto !important; }
@media (max-width:640px) {
  .viewall-head { padding:12px 16px; }
  .viewall-body { padding:16px 16px 60px; }
  .viewall-grid { grid-template-columns:repeat(auto-fill,minmax(144px,1fr)); gap:13px; }
}

/* ═══════════════════════════════════════════════════════════
   SUB-PAGE STYLES — Series / Music Album / Catalog / Gallery
═══════════════════════════════════════════════════════════ */
/* Sub-page wrapper */
.subpage-wrap { max-width:1100px; margin:0 auto; padding:28px 28px 60px; }
.subpage-hero {
  display:grid; grid-template-columns:260px 1fr; gap:28px;
  align-items:start; margin-bottom:32px;
  background:var(--surf2); border-radius:18px; padding:24px;
  border:1px solid rgba(255,255,255,.07);
}
@media(max-width:700px){ .subpage-hero { grid-template-columns:1fr; } }
.subpage-cover {
  width:100%; aspect-ratio:1; border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:3rem; box-shadow:0 16px 40px -10px rgba(0,0,0,.55);
}
.subpage-cover-16-9 {
  width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:3rem; box-shadow:0 16px 40px -10px rgba(0,0,0,.55);
}
.subpage-meta { display:flex; flex-direction:column; gap:10px; }
.subpage-badge { display:inline-flex; }
.subpage-title { font-size:1.8rem; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.subpage-artist { font-size:1rem; color:var(--muted); font-weight:600; }
.subpage-desc { font-size:.88rem; color:var(--muted); line-height:1.6; }
.subpage-stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:4px; }
.subpage-stat { display:flex; flex-direction:column; gap:2px; }
.subpage-stat-val { font-size:1.1rem; font-weight:800; color:var(--A2); }
.subpage-stat-lbl { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); }
.subpage-ctas { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.subpage-section-head { font-size:1.1rem; font-weight:800; letter-spacing:-.02em; margin:24px 0 14px; display:flex; align-items:center; gap:10px; }
.subpage-section-head .bar { width:4px; height:18px; border-radius:99px; background:linear-gradient(to bottom,var(--A2),var(--A)); flex-shrink:0; }

/* Series: season accordion cards */
.season-card {
  background:var(--surf2); border:1px solid rgba(255,255,255,.07);
  border-radius:16px; margin-bottom:14px; overflow:hidden;
}
.season-header {
  display:flex; align-items:center; gap:14px; padding:16px 20px;
  cursor:pointer; user-select:none; transition:background .2s;
}
.season-header:hover { background:var(--glass); }
.season-num {
  width:32px; height:32px; border-radius:99px; background:var(--As);
  color:var(--A2); font-size:.78rem; font-weight:800; display:grid; place-items:center; flex-shrink:0;
}
.season-title { font-size:.95rem; font-weight:700; flex:1; }
.season-price { font-size:.88rem; font-weight:800; color:var(--A2); }
.season-toggle { width:22px; height:22px; display:grid; place-items:center; color:var(--muted); transition:transform .2s; }
.season-card.open .season-toggle { transform:rotate(90deg); }
.season-body { display:none; border-top:1px solid rgba(255,255,255,.06); }
.season-card.open .season-body { display:block; }
.ep-row {
  display:grid; grid-template-columns:28px 1fr auto auto auto;
  align-items:center; gap:14px; padding:12px 20px;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .2s;
}
.ep-row:last-child { border-bottom:none; }
.ep-row:hover { background:rgba(255,255,255,.03); }
.ep-num { font-size:.72rem; color:var(--faint); font-weight:700; text-align:center; }
.ep-cell-title { display:flex; align-items:center; gap:8px; min-width:0; }
.ep-title { font-size:.86rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep-dur { font-size:.75rem; color:var(--muted); white-space:nowrap; }
.ep-free-badge { font-size:.62rem; font-weight:800; color:#34d399; background:rgba(52,211,153,.15); border-radius:99px; padding:2px 8px; white-space:nowrap; flex-shrink:0; }
.ep-price { font-size:.82rem; font-weight:700; color:var(--A2); white-space:nowrap; text-align:right; min-width:62px; }
.ep-action {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:.74rem; font-weight:700; padding:7px 14px; border-radius:99px;
  transition:transform .15s var(--ease), background .2s, border-color .2s; flex-shrink:0;
}
.ep-action svg { width:13px; height:13px; }
.ep-action.ep-buy { background:var(--As); color:var(--A2); border:1px solid var(--Ag); }
.ep-action.ep-buy:hover { background:var(--A); color:#fff; transform:translateY(-1px); }
.ep-action.ep-play { background:rgba(52,211,153,.12); color:#34d399; border:1px solid rgba(52,211,153,.35); }
.ep-action.ep-play:hover { background:rgba(52,211,153,.22); transform:translateY(-1px); }
@media (max-width:560px) {
  .ep-row { grid-template-columns:24px 1fr auto; gap:10px; }
  .ep-dur, .ep-price { display:none; }
}

/* Music Album: track table */
.album-track-table { width:100%; border-collapse:collapse; }
.album-track-table thead th { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.07); text-align:left; }
.album-track-row { transition:background .2s; }
.album-track-row:hover { background:rgba(255,255,255,.04); }
.album-track-row td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; }
.album-track-row:last-child td { border-bottom:none; }
.album-thumb { width:38px; height:38px; border-radius:8px; display:grid; place-items:center; font-size:1.1rem; flex-shrink:0; }
.album-track-name { font-size:.88rem; font-weight:600; }
.album-track-sub { font-size:.72rem; color:var(--muted); }
.album-track-dur { font-size:.8rem; color:var(--muted); text-align:center; }
.album-track-price { font-size:.85rem; font-weight:800; color:var(--A2); text-align:right; }

/* Catalog: book list */
.catalog-book-row {
  display:grid; grid-template-columns:54px 1fr auto; gap:14px; align-items:center;
  padding:14px 18px; background:var(--surf2); border-radius:12px; margin-bottom:10px;
  border:1px solid rgba(255,255,255,.06); transition:border-color .2s;
}
.catalog-book-row:hover { border-color:rgba(255,255,255,.14); }
.catalog-book-cover {
  width:54px; height:72px; border-radius:6px; display:grid; place-items:center;
  font-size:1.4rem; flex-shrink:0;
}
.catalog-book-title { font-size:.9rem; font-weight:700; margin-bottom:2px; }
.catalog-book-meta { font-size:.74rem; color:var(--muted); }
.catalog-book-formats { display:flex; gap:4px; margin-top:5px; }
.catalog-fmt-chip { font-size:.6rem; font-weight:800; color:var(--A2); background:var(--As); border-radius:4px; padding:2px 6px; }
.catalog-book-price { font-size:.95rem; font-weight:800; color:var(--A2); white-space:nowrap; }

/* Gallery Collection: gallery grid */
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;
}
.gallery-card {
  border-radius:16px; overflow:hidden; background:var(--surf2);
  border:1px solid rgba(255,255,255,.07); transition:transform .28s var(--ease), box-shadow .28s;
  cursor:pointer;
}
.gallery-card:hover { transform:translateY(-3px); box-shadow:0 20px 48px -14px rgba(0,0,0,.55); }
.gallery-card-cover {
  height:160px; display:flex; align-items:flex-end; padding:14px;
  position:relative; font-size:2.5rem;
}
.gallery-card-body { padding:14px; }
.gallery-card-title { font-size:1rem; font-weight:800; margin-bottom:4px; }
.gallery-card-meta { font-size:.78rem; color:var(--muted); margin-bottom:10px; }
.gallery-card-footer { display:flex; align-items:center; justify-content:space-between; }
.gallery-card-price { font-size:1rem; font-weight:800; color:var(--A2); }
.gallery-img-list { padding:14px 18px; border-top:1px solid rgba(255,255,255,.06); display:none; }
.gallery-img-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.82rem; }
.gallery-img-row:last-child { border-bottom:none; }
.gallery-img-name { color:var(--text); }
.gallery-img-price { font-weight:700; color:var(--A2); }

/* ─────────────────────────────────────────────
   CARD TYPES
───────────────────────────────────────────── */
/* ── Standard content card ── */
.card {
  flex-shrink:0; width:220px; border-radius:16px; background:var(--surf);
  overflow:hidden; cursor:pointer; position:relative;
  border:1px solid rgba(255,255,255,.07);
  transition:transform .42s var(--ease), box-shadow .42s var(--ease), border-color .42s;
  animation:fadeUp .55s var(--ease) backwards;
}
@keyframes fadeUp { from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px; z-index:6; pointer-events:none;
  background:linear-gradient(135deg,var(--A),transparent 38%,transparent 62%,var(--A2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s;
}
.card:hover { transform:translateY(-10px) scale(1.025); box-shadow:0 28px 56px -14px rgba(0,0,0,.8), 0 0 40px -16px var(--Ag); }
.card:hover::before { opacity:1; }
.card-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; }
.card-thumb .art { position:absolute; inset:0; transition:transform .6s var(--ease); }
.card:hover .card-thumb .art { transform:scale(1.09); }
.card-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,8,20,.9),transparent 52%); }
.chip-row { position:absolute; top:9px; left:9px; right:9px; display:flex; justify-content:space-between; align-items:flex-start; z-index:3; }
.chip { padding:3px 9px; border-radius:7px; font-size:.59rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.4); }
.chip-dur { background:rgba(0,0,0,.68); backdrop-filter:blur(6px);  font-family: 'Segoe UI', Montserrat, Arial, sans-serif; }
.chip-price { background:rgba(0,0,0,.72); backdrop-filter:blur(6px); font-family:'Segoe UI', Montserrat, Arial, sans-serif; font-size:.7rem; letter-spacing:.04em; }
.chip-live { background:linear-gradient(120deg,#dc2626,#f97316); animation:livePulse 1.6s infinite; }
.play-ov { position:absolute; inset:0; display:grid; place-items:center; z-index:3; opacity:0; transition:opacity .3s; background:rgba(0,0,0,.18); }
.card:hover .play-ov { opacity:1; }
.play-ring {
  width:50px; height:50px; border-radius:99px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.38);
  transform:scale(.65); transition:transform .35s var(--ease);
}
.card:hover .play-ring { transform:scale(1); }
.play-ring svg { width:18px; height:18px; fill:#fff; margin-left:3px; }
.card-body { padding:12px 13px 14px; }
.card-title {  font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:.97rem; font-weight:700; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-creator { display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--muted); margin-bottom:9px; }
.card-creator .av { width:18px; height:18px; font-size:.48rem; border-width:1.5px; }
.card-stats { display:flex; gap:11px; font-size:.71rem; color:var(--faint); margin-bottom:11px; }
.card-stats span { display:flex; align-items:center; gap:4px; }
.card-stats svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gold { color:var(--gold); }
.card-foot { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.price { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-weight:800; font-size:1.06rem; }
.price.free { color:var(--green); }
/* Card mini-QR — sized for reliable scanning from low-MP phone cameras.
   Bumped from 65px to 96px so each of the QR's 29 modules is ~3px on
   screen (below that, cheap sensors fail to lock the pattern). */
.mini-qr {
  width:96px; height:96px;
  padding:6px; background:#ffffff;
  border-radius:10px; flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,0,0,0.22);
  border:1px solid rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; align-items:center; justify-content:center; line-height:0;
  cursor:pointer;
}
.mini-qr img { display:block; width:100%; height:100%; object-fit:contain; }
.mini-qr:hover { transform:scale(1.06); box-shadow:0 6px 18px rgba(0,0,0,.3); }
.card:hover .mini-qr { transform:scale(1.04); }
.pay-btn {
  padding:7px 13px; border-radius:9px; font-weight:700; font-size:.74rem; color:#fff;
  background:linear-gradient(120deg,var(--A),var(--A2)); transition:all .25s; box-shadow:0 4px 14px -6px var(--Ag); white-space:nowrap;
}
.pay-btn:hover { transform:translateY(-2px); }
.pay-btn.owned { background:linear-gradient(120deg,#16a34a,#22c55e); box-shadow:0 4px 12px -6px rgba(34,197,94,.5); }
.prog-bar { height:6px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin-bottom:9px; }
.prog-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--A),var(--A2)); position:relative; overflow:hidden; }
.prog-fill::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent,rgba(255,255,255,.38),transparent); animation:shimmer 1.8s infinite; }

/* ── Album card (music) ── */
.album-card {
  flex-shrink:0; width:176px; border-radius:15px; overflow:hidden; cursor:pointer;
  background:var(--surf); border:1px solid rgba(255,255,255,.07);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.album-card:hover { transform:translateY(-8px) scale(1.04); box-shadow:0 22px 48px rgba(0,0,0,.75); }
.album-thumb { position:relative; aspect-ratio:1; overflow:hidden; }
.album-thumb .art { position:absolute; inset:0; transition:transform .5s; }
.album-card:hover .album-thumb .art { transform:scale(1.08); }
.album-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,8,20,.75),transparent 52%); }
.album-body { padding:10px 12px 13px; }
.album-title { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.album-artist { font-size:.71rem; color:var(--muted); display:flex; align-items:center; gap:5px; }
.album-price { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-weight:800; font-size:.9rem; margin-top:7px; color:var(--A2); }

/* ── Image / masonry card ── */
.img-card {
  flex-shrink:0; border-radius:13px; overflow:hidden; cursor:pointer; position:relative;
  transition:transform .35s var(--ease); width:200px;
}
.img-card:hover { transform:scale(1.04) translateY(-6px); }
.img-art { position:relative; overflow:hidden; border-radius:13px; }
.img-art .art { display:block; width:100%; transition:transform .5s; }
.img-card:hover .img-art .art { transform:scale(1.07); }
.img-ov {
  position:absolute; inset:0; border-radius:13px;
  background:linear-gradient(to top,rgba(5,8,20,.95),transparent 50%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:13px;
  opacity:0; transition:opacity .3s;
}
.img-card:hover .img-ov { opacity:1; }

/* ── Game card ── */
.game-card {
  flex-shrink:0; width:260px; border-radius:16px; overflow:hidden; cursor:pointer;
  background:var(--surf); border:1px solid rgba(255,255,255,.07);
  transition:transform .42s var(--ease), box-shadow .42s;
}
.game-card:hover { transform:translateY(-10px); box-shadow:0 28px 56px rgba(0,0,0,.8), 0 0 44px -16px var(--Ag); }
.game-thumb { position:relative; height:155px; overflow:hidden; }
.game-thumb .art { position:absolute; inset:0; transition:transform .6s; }
.game-card:hover .game-thumb .art { transform:scale(1.08); }
.game-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,8,20,.92),transparent 40%); }

/* ── Live card ── */
.live-card {
  flex-shrink:0; width:275px; border-radius:16px; overflow:hidden; cursor:pointer;
  background:var(--surf); border:1px solid rgba(255,255,255,.07);
  transition:transform .42s var(--ease), box-shadow .42s;
}
.live-card:hover { transform:translateY(-8px); box-shadow:0 26px 52px rgba(0,0,0,.8), 0 0 40px -14px rgba(239,68,68,.4); }
.live-thumb { position:relative; height:165px; overflow:hidden; }
.live-thumb .art { position:absolute; inset:0; transition:transform .5s; }
.live-card:hover .live-thumb .art { transform:scale(1.06); }

/* ── Podcast card ── */
.pod-card {
  flex-shrink:0; width:195px; border-radius:16px; overflow:hidden; cursor:pointer;
  background:var(--surf); border:1px solid rgba(255,255,255,.07);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.pod-card:hover { transform:translateY(-8px); box-shadow:0 22px 44px rgba(0,0,0,.7); }
.pod-art { position:relative; aspect-ratio:1; overflow:hidden; border-radius:12px; margin:9px 9px 0; }
.pod-art .art { position:absolute; inset:0; transition:transform .5s; }
.pod-card:hover .pod-art .art { transform:scale(1.07); }

/* ── Social creator card ── */
.social-card {
  flex-shrink:0; width:195px; border-radius:18px; background:var(--surf);
  border:1px solid rgba(255,255,255,.07); overflow:hidden; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s;
  padding:18px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
}
.social-card:hover { transform:translateY(-8px); box-shadow:0 22px 44px rgba(0,0,0,.7); }
.social-av { width:70px; height:70px; border-radius:99px; overflow:hidden; position:relative; border:2.5px solid var(--As); flex-shrink:0; }
.social-av .art { position:absolute; inset:0; }

/* ── Wide feature card ── */
.card-wide {
  flex-shrink:0; width:340px; border-radius:18px; overflow:hidden; cursor:pointer;
  background:var(--surf); border:1px solid rgba(255,255,255,.07);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.card-wide:hover { transform:translateY(-8px) scale(1.015); box-shadow:0 28px 56px rgba(0,0,0,.7); }
.card-wide-thumb { position:relative; height:195px; overflow:hidden; }
.card-wide-thumb .art { position:absolute; inset:0; transition:transform .6s var(--ease); }
.card-wide:hover .card-wide-thumb .art { transform:scale(1.07); }
.card-wide-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,8,20,.95),transparent 45%); }

/* ─────────────────────────────────────────────
   CATEGORY-SPECIFIC SCENE FX
───────────────────────────────────────────── */
.scene { position:absolute; inset:0; overflow:hidden; }
.blob {
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.75;
  animation:drift 14s ease-in-out infinite alternate;
}
@keyframes drift { from{ transform:translate(0,0) scale(1); } to{ transform:translate(44px,-36px) scale(1.14); } }
.grid-lines {
  position:absolute; inset:0; opacity:.13;
  background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 72% 52% at 70% 42%,black,transparent);
  -webkit-mask-image:radial-gradient(ellipse 72% 52% at 70% 42%,black,transparent);
}
.poster-panel { position:absolute; right:330px; top:0; bottom:0; left:42%; }
.poster-panel .art { position:absolute; inset:0; }
/* Waveform */
.wave-row {
  position:absolute; bottom:0; left:0; right:0; height:150px;
  display:flex; align-items:flex-end; gap:4px; padding:0 36px; opacity:.44; z-index:2;
}
.wave-row span {
  flex:1; background:linear-gradient(to top,var(--A),var(--A2)); border-radius:3px 3px 0 0;
  animation:wv 1.3s ease-in-out infinite alternate;
}
@keyframes wv { from{ height:8%; } to{ height:var(--h,72%); } }
/* Eq rings */
.eq-rings { position:absolute; right:16%; top:50%; transform:translateY(-50%); width:0; height:0; }
.eq-rings span { position:absolute; border-radius:50%; border:2px solid var(--A); opacity:0; animation:eqr 2.6s ease-out infinite; transform:translate(-50%,-50%); }
@keyframes eqr { from{ width:100px; height:100px; opacity:.7; } to{ width:450px; height:450px; opacity:0; } }
/* Float chips */
.fchip {
  position:absolute; padding:9px 14px; border-radius:13px;
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16);
  font-size:.77rem; font-weight:600; animation:bob 5s ease-in-out infinite alternate;
  display:flex; align-items:center; gap:7px; z-index:3; white-space:nowrap;
}
@keyframes bob { from{ transform:translateY(0) rotate(-1deg); } to{ transform:translateY(-18px) rotate(1.5deg); } }
/* Books */
.book {
  position:absolute; border-radius:5px 12px 12px 5px; box-shadow:-10px 18px 40px rgba(0,0,0,.5);
  animation:bookTlt 7s ease-in-out infinite alternate;
}
@keyframes bookTlt { from{ transform:rotate(var(--r,-4deg)) translateY(0); } to{ transform:rotate(calc(var(--r,-4deg)+2deg)) translateY(-14px); } }
.book::before { content:''; position:absolute; left:0; top:0; bottom:0; width:8px; background:rgba(0,0,0,.35); border-radius:5px 0 0 5px; }
/* Pixel particles */
.pix { position:absolute; border-radius:3px; animation:pixFloat 6s linear infinite; opacity:.7; }
@keyframes pixFloat { from{ transform:translateY(110%) rotate(0); } to{ transform:translateY(-700px) rotate(290deg); } }
/* Collage tiles */
.ctile {
  position:absolute; border-radius:13px; overflow:hidden;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 14px 34px rgba(0,0,0,.5);
  animation:bob 6s ease-in-out infinite alternate;
}

/* ─────────────────────────────────────────────
   MUSIC — SPOTIFY ROW STYLE
───────────────────────────────────────────── */
.music-table { width:100%; border-collapse:collapse; }
.music-table-header { display:grid; grid-template-columns:40px 1fr 120px 80px 90px 80px; gap:0; padding:6px 16px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:4px; }
.music-table-header span { font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); }
.music-row {
  display:grid; grid-template-columns:40px 1fr 120px 80px 90px 80px;
  gap:0; padding:8px 16px; border-radius:10px; cursor:pointer;
  align-items:center; transition:background .18s;
}
.music-row:hover { background:var(--glass); }
.music-row.playing { background:var(--As); }
.music-num { font-family:'JetBrains Mono'; font-size:.78rem; color:var(--faint); text-align:center; position:relative; }
.music-row.playing .music-num { color:var(--A2); }
.music-row:hover .music-num-text { display:none; }
.music-play-icon { display:none; }
.music-row:hover .music-play-icon { display:block; }
.music-row.playing .music-num-text { display:none; }
.music-row.playing .music-play-icon { display:block; color:var(--A2); }
.music-info { display:flex; align-items:center; gap:12px; }
.music-art { width:44px; height:44px; border-radius:8px; overflow:hidden; flex-shrink:0; position:relative; }
.music-art img { width:100%; height:100%; object-fit:cover; }
.music-title-wrap { flex:1; min-width:0; }
.music-title { font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-artist { font-size:.74rem; color:var(--muted); margin-top:2px; }
.music-album-col { font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-qr-col { display:flex; justify-content:center; }
/* Music-row mini-QR — same scan-friendly sizing as .mini-qr. */
.music-mini-qr {
  width:90px; height:90px;
  padding:5px; background:#ffffff;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
  border:1px solid rgba(0,0,0,.06);
  transition:transform .2s ease;
  display:flex; align-items:center; justify-content:center; line-height:0;
  cursor:pointer;
}
.music-mini-qr img { display:block; width:100%; height:100%; object-fit:contain; }
.music-mini-qr:hover { transform:scale(1.06); }
.music-dur { font-family:'JetBrains Mono'; font-size:.76rem; color:var(--faint); text-align:right; }
.music-price-col { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.music-buy-btn {
  padding:5px 12px; border-radius:99px; font-size:.74rem; font-weight:700;
  background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff; border:none; cursor:pointer; transition:all .2s;
}
.music-buy-btn.owned { background:rgba(34,197,94,.2); color:var(--green); }
.music-buy-btn:hover { transform:scale(1.06); }

/* Music mini player bar */
.music-player-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:350;
  background:linear-gradient(to top,rgba(6,8,15,.98),rgba(10,14,30,.96));
  backdrop-filter:blur(24px); border-top:1px solid rgba(255,255,255,.1);
  padding:12px 24px; display:none; align-items:center; gap:16px;
}
.music-player-bar.visible { display:flex; }
.mpb-art { width:52px; height:52px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.mpb-art img { width:100%; height:100%; object-fit:cover; }
.mpb-info { flex:0 0 200px; min-width:0; }
.mpb-title { font-size:.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mpb-artist { font-size:.73rem; color:var(--muted); }
.mpb-controls { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.mpb-btns { display:flex; align-items:center; gap:18px; }
.mpb-btn { background:none; border:none; cursor:pointer; color:var(--muted); transition:color .2s; padding:4px; display:flex; align-items:center; }
.mpb-btn:hover { color:var(--text); }
.mpb-btn.play { width:36px; height:36px; border-radius:50%; background:var(--text); color:var(--bg); display:grid; place-items:center; }
.mpb-btn.play:hover { transform:scale(1.08); background:#fff; }
.mpb-btn.play svg { width:14px; height:14px; fill:currentColor; stroke:none; }
.mpb-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mpb-progress { width:100%; display:flex; align-items:center; gap:8px; }
.mpb-time { font-family:'JetBrains Mono'; font-size:.65rem; color:var(--faint); flex-shrink:0; }
.mpb-track { flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.15); cursor:pointer; position:relative; }
.mpb-track-fill { height:100%; border-radius:99px; background:var(--A2); pointer-events:none; transition:width .5s linear; }
.mpb-track:hover .mpb-track-fill { background:#fff; }
.mpb-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.mpb-buy { padding:8px 16px; border-radius:99px; font-size:.78rem; font-weight:700; background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff; border:none; cursor:pointer; white-space:nowrap; }
.mpb-vol { display:flex; align-items:center; gap:6px; }
.mpb-vol-slider { width:80px; -webkit-appearance:none; height:4px; border-radius:99px; background:rgba(255,255,255,.2); outline:none; cursor:pointer; }
.mpb-vol-slider::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; cursor:pointer; }
.mpb-sample-badge { padding:2px 8px; border-radius:99px; font-size:.6rem; font-weight:800; letter-spacing:.08em; background:rgba(251,191,36,.15); border:1px solid rgba(251,191,36,.35); color:#fbbf24; text-transform:uppercase; }

/* ─────────────────────────────────────────────
   IMAGES — UNIFORM VERTICAL GRID (Shutterstock style)
───────────────────────────────────────────── */
.img-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 4px;
}
@media(max-width:900px){ .img-masonry { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:640px){
  .img-masonry { grid-template-columns: repeat(2, 1fr); }
  .img-masonry-card .mini-qr { display:none; }
}
.img-masonry-card {
  border-radius:10px; overflow:hidden;
  cursor:pointer; position:relative; display:block;
  border:1px solid rgba(255,255,255,.06);
  aspect-ratio: 3/4;
}
.img-masonry-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .4s var(--ease); }
.img-masonry-card:hover img { transform:scale(1.04); }
.img-masonry-ov {
  position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.82) 0%,transparent 50%);
  opacity:0; transition:opacity .25s; display:flex; flex-direction:column; justify-content:flex-end; padding:12px;
}
.img-masonry-card:hover .img-masonry-ov { opacity:1; }
.img-masonry-copyright {
  position:absolute; bottom:8px; right:8px; top:auto; left:auto; transform:none;
  font-size:.58rem; font-weight:800; color:rgba(255,255,255,.55); letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap; pointer-events:none;
  text-shadow:0 1px 4px rgba(0,0,0,.8); user-select:none;
  background:rgba(0,0,0,.45); padding:2px 6px; border-radius:4px; backdrop-filter:blur(4px);
}
.ilb-wm-logo {
  position:absolute; bottom:14px; left:16px; z-index:3; pointer-events:none; user-select:none;
  opacity:.65; filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.7));
  max-width:110px; max-height:36px;
}
.ilb-wm-logo img { width:100%; height:auto; display:block; object-fit:contain; }

/* ─── MINI DRAMA EPISODE LIST ─── */
.drama-overlay {
  position:fixed; top:60px; left:0; right:0; bottom:0; z-index:430; background:var(--bg); overflow-y:auto; display:none;
}
.drama-overlay.open { display:block; animation:slideInDetail .4s var(--ease); }
.drama-hero { position:relative; height:clamp(220px,38vh,380px); overflow:hidden; background:#000; }
.drama-hero img { width:100%; height:100%; object-fit:cover; opacity:.75; }
.drama-hero-ov { position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 0%,rgba(6,8,15,.2) 60%,transparent 100%); }
.drama-body { padding:0 clamp(14px,4vw,56px) 80px; max-width:1100px; margin:0 auto; }
.drama-title { font-size:clamp(1.5rem,3.5vw,2.4rem); font-weight:900; letter-spacing:-.03em; line-height:1.05; margin-top:-32px; position:relative; z-index:2; }
.drama-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.84rem; color:var(--muted); margin-top:8px; }
.drama-desc { font-size:.92rem; line-height:1.65; color:rgba(200,210,235,.85); margin-top:12px; max-width:62ch; }
.drama-season-tabs { display:flex; gap:8px; margin:22px 0 16px; flex-wrap:wrap; }
.drama-season-tab {
  padding:7px 18px; border-radius:99px; font-size:.8rem; font-weight:700; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:var(--muted);
  transition:all .2s;
}
.drama-season-tab.active { background:var(--A); border-color:var(--A); color:#fff; box-shadow:0 4px 14px -4px var(--Ag); }
.drama-ep-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.drama-ep-card {
  border-radius:12px; overflow:hidden; background:var(--surf2); cursor:pointer;
  border:1px solid rgba(255,255,255,.07); transition:transform .25s var(--ease), box-shadow .25s;
  position:relative;
}
.drama-ep-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px -10px rgba(0,0,0,.7); }
.drama-ep-thumb { position:relative; aspect-ratio:9/14; overflow:hidden; }
.drama-ep-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.drama-ep-card:hover .drama-ep-thumb img { transform:scale(1.06); }
.drama-ep-thumb-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 55%); }
.drama-ep-num { position:absolute; top:8px; left:10px; font-size:.65rem; font-weight:800; color:rgba(255,255,255,.8); }
.drama-ep-dur { position:absolute; bottom:8px; right:8px; font-size:.62rem; font-weight:700; background:rgba(0,0,0,.6); padding:2px 6px; border-radius:4px; color:#fff; }
.drama-ep-free { position:absolute; top:8px; right:8px; font-size:.58rem; font-weight:800; background:#22c55e; padding:2px 7px; border-radius:99px; color:#fff; }
.drama-ep-play { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .2s; }
.drama-ep-card:hover .drama-ep-play { opacity:1; }
.drama-ep-play-ring { width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(8px); border:1.5px solid rgba(255,255,255,.4); display:grid; place-items:center; }
.drama-ep-play-ring svg { width:18px; height:18px; fill:#fff; margin-left:3px; }
.drama-ep-info { padding:10px 11px 12px; }
.drama-ep-title { font-size:.82rem; font-weight:700; line-height:1.3; margin-bottom:4px; }
.drama-ep-meta { font-size:.68rem; color:var(--muted); display:flex; justify-content:space-between; align-items:center; }
.drama-ep-price { font-size:.78rem; font-weight:800; color:var(--A2); }
.drama-ep-locked { position:absolute; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center; }
.drama-ep-locked svg { width:26px; height:26px; stroke:rgba(255,255,255,.8); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.drama-section-title { font-size:1rem; font-weight:800; margin:22px 0 12px; display:flex; align-items:center; gap:10px; }
.drama-section-title .bar { width:4px; height:16px; border-radius:99px; background:linear-gradient(to bottom,var(--A2),var(--A)); flex-shrink:0; }
.drama-about-strip {
  display:flex; flex-wrap:wrap; gap:0; margin-top:20px;
  background:var(--surf); border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.07);
}
.drama-about-cell { flex:1 1 140px; padding:12px 15px; border-right:1px solid rgba(255,255,255,.06); }
.drama-about-cell:last-child{border-right:none}
.drama-about-lbl { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin-bottom:3px; }
.drama-about-val { font-size:.82rem; font-weight:600; }
.img-masonry-price { font-size:.75rem; font-weight:800; color:#fff; }
.img-masonry-title { font-size:.78rem; font-weight:600; color:rgba(255,255,255,.9); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.img-masonry-meta { font-size:.65rem; color:rgba(255,255,255,.6); }

/* Image lightbox detail */
.img-lightbox {
  position:fixed; inset:0; z-index:450; background:rgba(0,0,0,.92);
  display:none; align-items:center; justify-content:center;
}
.img-lightbox.open { display:flex; animation:veilIn .3s; }
.ilb-wrap {
  display:grid; grid-template-columns:1fr 320px; max-width:1100px; width:calc(100% - 48px);
  max-height:90vh; background:var(--surf); border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 44px 90px rgba(0,0,0,.9);
  animation:modalIn .4s var(--ease);
}
.ilb-img-wrap { position:relative; overflow:hidden; background:#000; }
.ilb-img-wrap img { width:100%; height:100%; object-fit:contain; max-height:90vh; display:block; }
.ilb-copyright {
  position:absolute; bottom:10px; right:12px;
  font-size:.62rem; font-weight:800; color:rgba(255,255,255,.65); letter-spacing:.1em;
  text-transform:uppercase; pointer-events:none; white-space:nowrap; user-select:none;
  background:rgba(0,0,0,.45); padding:3px 8px; border-radius:4px; backdrop-filter:blur(4px);
}
.ilb-info { padding:24px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.ilb-title { font-size:1.1rem; font-weight:800; line-height:1.3; }
.ilb-creator { display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--muted); }
.ilb-tags { display:flex; flex-wrap:wrap; gap:6px; }
.ilb-tag { padding:3px 10px; border-radius:99px; background:var(--surf2); font-size:.7rem; color:var(--muted); }
.ilb-specs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ilb-spec { background:var(--surf2); border-radius:10px; padding:10px 12px; }
.ilb-spec-label { font-size:.64rem; color:var(--faint); text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
.ilb-spec-val { font-size:.82rem; font-weight:600; }
.ilb-license { background:rgba(20,184,166,.08); border:1px solid rgba(20,184,166,.25); border-radius:12px; padding:12px; }
.ilb-license-title { font-size:.76rem; font-weight:700; color:#5eead4; margin-bottom:4px; }
.ilb-license-text { font-size:.7rem; color:var(--muted); line-height:1.5; }
.ilb-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:10px; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); display:grid; place-items:center; cursor:pointer; border:1px solid rgba(255,255,255,.15); z-index:10; }
.ilb-close svg { width:14px; height:14px; stroke:#fff; stroke-width:2.4; fill:none; stroke-linecap:round; }
@media(max-width:760px){ .ilb-wrap { grid-template-columns:1fr; max-height:95vh; } .ilb-img-wrap { height:260px; } }

/* ─────────────────────────────────────────────
   EBOOKS — KINDLE/AMAZON STYLE
───────────────────────────────────────────── */
.ebook-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:20px; padding:4px;
}
.ebook-card {
  cursor:pointer; transition:transform .3s var(--ease);
  display:flex; flex-direction:column; gap:10px;
}
.ebook-card:hover { transform:translateY(-5px); }
.ebook-cover-wrap { position:relative; border-radius:4px 10px 10px 4px; overflow:hidden; box-shadow:-6px 10px 28px rgba(0,0,0,.6), inset -3px 0 8px rgba(0,0,0,.3); aspect-ratio:0.67; }
.ebook-cover-wrap img { width:100%; height:100%; object-fit:cover; }
.ebook-spine { position:absolute; left:0; top:0; bottom:0; width:12px; background:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,.15),transparent); }
.ebook-kindle-badge { position:absolute; bottom:8px; right:8px; background:#f90; border-radius:4px; padding:2px 6px; font-size:.6rem; font-weight:800; color:#000; }
.ebook-meta { display:flex; flex-direction:column; gap:3px; }
.ebook-title { font-size:.85rem; font-weight:700; line-height:1.3; }
.ebook-author { font-size:.73rem; color:var(--muted); }
.ebook-stars { font-size:.72rem; color:var(--gold); }
.ebook-price-row { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.ebook-price { font-size:.82rem; font-weight:800; color:var(--A2); }
.ebook-buy { padding:5px 12px; border-radius:6px; font-size:.72rem; font-weight:700; background:var(--A); color:#fff; border:none; cursor:pointer; }
.ebook-formats { display:flex; gap:4px; margin-top:3px; }
.ebook-fmt { padding:2px 6px; border-radius:4px; font-size:.6rem; font-weight:700; background:var(--surf2); color:var(--muted); border:1px solid rgba(255,255,255,.08); }

/* ─────────────────────────────────────────────
   MICROSERIES — vertical poster cards (myvurt style)
   Sized to match the eBook grid (same width & poster height)
───────────────────────────────────────────── */
.micro-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:20px; padding:4px;
}
.micro-card {
  cursor:pointer; transition:transform .3s var(--ease);
  display:flex; flex-direction:column; gap:10px;
}
.micro-card:hover { transform:translateY(-5px); }
.micro-poster {
  position:relative; aspect-ratio:0.67; border-radius:14px; overflow:hidden;
  box-shadow:-6px 10px 28px rgba(0,0,0,.55); background:#0b0f1d;
}
.micro-poster img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.micro-card:hover .micro-poster img { transform:scale(1.06); }
.micro-poster-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(3,5,12,.92) 0%, rgba(3,5,12,.32) 40%, transparent 64%);
}
.micro-ep-badge {
  position:absolute; top:10px; left:10px; z-index:3;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:99px;
  background:rgba(0,0,0,.62); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);
  font-size:.66rem; font-weight:800; letter-spacing:.02em; color:#fff;
}
.micro-ep-badge svg { width:9px; height:9px; fill:#fff; }
.micro-play { position:absolute; inset:0; display:grid; place-items:center; z-index:3; }
.micro-play-ring {
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.55); display:grid; place-items:center;
  transition:transform .25s var(--ease), background .25s; box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.micro-card:hover .micro-play-ring { transform:scale(1.1); background:rgba(255,255,255,.26); }
.micro-play-ring svg { width:20px; height:20px; fill:#fff; margin-left:3px; }
.micro-poster-info { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:10px 12px 12px; }
.micro-poster-title {
  font-size:.92rem; font-weight:800; line-height:1.2; color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.micro-poster-sub { font-size:.66rem; font-weight:600; color:rgba(255,255,255,.74); margin-top:3px; }
.micro-meta { display:flex; flex-direction:column; gap:6px; }
.micro-meta-top { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.72rem; color:var(--muted); }
.micro-meta-creator { display:flex; align-items:center; gap:5px; min-width:0; }
.micro-meta-creator .av { width:18px; height:18px; font-size:.46rem; flex-shrink:0; }
.micro-meta-creator .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.micro-price-row { display:flex; align-items:center; justify-content:space-between; }
.micro-price { font-size:.82rem; font-weight:800; color:var(--A2); }
.micro-price.free { color:var(--green); }
.micro-watch { padding:5px 12px; border-radius:6px; font-size:.72rem; font-weight:700; background:var(--A); color:#fff; border:none; cursor:pointer; transition:filter .2s; }
.micro-watch:hover { filter:brightness(1.1); }

/* eBook reader preview overlay */
.ebook-reader-overlay {
  position:fixed; inset:0; z-index:460; background:rgba(0,0,0,.92);
  display:none; align-items:center; justify-content:center;
}
.ebook-reader-overlay.open { display:flex; animation:veilIn .3s; }
.ebook-reader-modal {
  width:min(780px,95vw); max-height:90vh; border-radius:18px; overflow:hidden;
  background:#1a1209; border:1px solid rgba(255,255,255,.1); box-shadow:0 44px 90px rgba(0,0,0,.9);
  animation:modalIn .4s var(--ease); display:flex; flex-direction:column;
}
.ebook-reader-header {
  display:flex; align-items:center; justify-content:space-between; padding:14px 20px;
  background:#1a1209; border-bottom:1px solid rgba(255,255,255,.08);
}
.ebook-reader-title { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:.95rem; font-weight:700; }
.ebook-reader-body {
  flex:1; overflow-y:auto; padding:40px 60px; background:#fdf6e3; color:#2d1b0e;
  font-family:Georgia,serif; font-size:1.05rem; line-height:1.85;
}
@media(max-width:600px){ .ebook-reader-body { padding:24px 20px; } }
.ebook-reader-body h2 { font-size:1.4rem; font-weight:800; margin-bottom:20px; font-family:Georgia,serif; }
.ebook-reader-body p { margin-bottom:16px; text-indent:2em; }
.ebook-reader-body p:first-of-type { text-indent:0; }
.ebook-reader-footer {
  padding:14px 20px; background:#1a1209; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ebook-reader-buy { padding:10px 22px; border-radius:8px; font-weight:700; font-size:.88rem; background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff; border:none; cursor:pointer; }
.ebook-reader-sample-note { font-size:.75rem; color:var(--faint); }
.ebook-reader-progress { display:flex; align-items:center; gap:8px; font-size:.72rem; color:var(--faint); }

/* ─────────────────────────────────────────────
   VIDEO PREVIEW PLAYER
───────────────────────────────────────────── */
.video-player-overlay {
  position:fixed; inset:0; z-index:455; background:rgba(0,0,0,.95);
  display:none; align-items:center; justify-content:center;
}
.video-player-overlay.open { display:flex; animation:veilIn .3s; }
.video-player-modal {
  width:min(900px,96vw); border-radius:16px; overflow:hidden;
  background:#000; border:1px solid rgba(255,255,255,.1); box-shadow:0 44px 90px rgba(0,0,0,.95);
  animation:modalIn .4s var(--ease); position:relative;
}
.vpm-player { position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; }
.vpm-thumb { width:100%; height:100%; object-fit:cover; }
.vpm-play-btn {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s;
}
.vpm-play-btn:hover { background:rgba(0,0,0,.2); }
.vpm-play-circle {
  width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.92);
  display:grid; place-items:center; box-shadow:0 8px 32px rgba(0,0,0,.7);
  transition:transform .2s;
}
.vpm-play-btn:hover .vpm-play-circle { transform:scale(1.1); }
.vpm-play-circle svg { width:28px; height:28px; fill:#000; stroke:none; margin-left:4px; }
.vpm-controls {
  position:absolute; bottom:0; left:0; right:0; padding:12px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.9),transparent);
}
.vpm-progress { width:100%; height:5px; border-radius:99px; background:rgba(255,255,255,.25); cursor:pointer; margin-bottom:10px; }
.vpm-prog-fill { height:100%; border-radius:99px; background:var(--A2); width:0%; transition:width .5s linear; }
.vpm-ctrl-row { display:flex; align-items:center; gap:14px; }
.vpm-ctrl-btn { background:none; border:none; color:#fff; cursor:pointer; padding:2px; display:grid; place-items:center; }
.vpm-ctrl-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vpm-time { font-family:'JetBrains Mono'; font-size:.7rem; color:rgba(255,255,255,.8); }
.vpm-trailer-badge { padding:3px 10px; border-radius:99px; font-size:.65rem; font-weight:800; background:rgba(239,68,68,.8); color:#fff; margin-left:auto; }
.vpm-info { padding:16px 20px; background:var(--surf); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.vpm-info-title { font-size:1rem; font-weight:800; }
.vpm-info-meta { font-size:.77rem; color:var(--muted); margin-top:4px; }
.vpm-close-btn { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:10px; background:rgba(0,0,0,.7); display:grid; place-items:center; cursor:pointer; border:1px solid rgba(255,255,255,.15); z-index:10; }
.vpm-close-btn svg { width:14px; height:14px; stroke:#fff; stroke-width:2.4; fill:none; stroke-linecap:round; }
.vpm-buy-btn { padding:10px 22px; border-radius:10px; font-weight:700; font-size:.88rem; background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff; border:none; cursor:pointer; white-space:nowrap; }

/* ─────────────────────────────────────────────
   MERCHANT PROFILE PAGE
───────────────────────────────────────────── */
.merchant-overlay {
  position:fixed; top:60px; left:0; right:0; bottom:0; z-index:420; background:var(--bg); overflow-y:auto;
  display:none;
}
.merchant-overlay.open { display:block; animation:slideInDetail .4s var(--ease); }
.merchant-banner { position:relative; height:260px; overflow:hidden; }
.merchant-banner img { width:100%; height:100%; object-fit:cover; }
.merchant-banner-ov { position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 0%,rgba(6,8,15,.3) 100%); }
.merchant-header { padding:0 40px; max-width:1100px; margin:0 auto; }
.merchant-avatar-row { display:flex; align-items:flex-end; gap:20px; margin-top:-56px; position:relative; z-index:2; margin-bottom:16px; }
.merchant-avatar { width:110px; height:110px; border-radius:50%; overflow:hidden; border:4px solid var(--bg); background:var(--surf); flex-shrink:0; }
.merchant-avatar img { width:100%; height:100%; object-fit:cover; }
.merchant-name { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:1.6rem; font-weight:900; }
.merchant-handle { font-size:.85rem; color:var(--muted); margin-top:3px; }
.merchant-action-row { display:flex; gap:10px; margin-left:auto; padding-bottom:8px; flex-wrap:wrap; }
.merchant-btn { padding:9px 20px; border-radius:10px; font-weight:700; font-size:.85rem; cursor:pointer; border:none; }
.merchant-btn.pay { background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff; }
.merchant-btn.follow { background:var(--surf2); color:var(--text); border:1px solid rgba(255,255,255,.12); }
.merchant-stats-row { display:flex; gap:28px; flex-wrap:wrap; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:16px; }
.merchant-stat { display:flex; flex-direction:column; gap:2px; }
.merchant-stat-val { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-weight:800; font-size:1.1rem; }
.merchant-stat-lbl { font-size:.72rem; color:var(--muted); }
.merchant-about { font-size:.9rem; color:rgba(200,210,235,.8); line-height:1.7; max-width:72ch; margin-bottom:14px; }
.merchant-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.merchant-tag { padding:5px 14px; border-radius:99px; border:1px solid rgba(255,255,255,.15); font-size:.76rem; color:var(--muted); }
.merchant-website { font-size:.82rem; color:var(--A2); margin-bottom:10px; }
.merchant-socials { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.merchant-social-link { display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:10px; background:var(--surf2); font-size:.78rem; font-weight:600; color:var(--text); border:1px solid rgba(255,255,255,.07); transition:background .2s; }
.merchant-social-link:hover { background:rgba(255,255,255,.1); }
.merchant-content-title { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:1.1rem; font-weight:800; margin-bottom:14px; padding-top:10px; }
.merchant-video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.merchant-video-card { cursor:pointer; border-radius:10px; overflow:hidden; background:var(--surf); border:1px solid rgba(255,255,255,.07); transition:transform .3s; }
.merchant-video-card:hover { transform:translateY(-4px); }
.merchant-video-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; }
.merchant-video-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.merchant-video-card:hover .merchant-video-thumb img { transform:scale(1.06); }
.merchant-video-chip { position:absolute; top:8px; right:8px; padding:3px 8px; border-radius:6px; font-size:.63rem; font-weight:800; }
.merchant-video-body { padding:10px 12px; }
.merchant-video-title { font-size:.82rem; font-weight:700; margin-bottom:4px; line-height:1.3; }
.merchant-video-meta { font-size:.68rem; color:var(--muted); display:flex; justify-content:space-between; }
.merchant-back-btn { display:flex; align-items:center; gap:8px; padding:14px 24px; font-size:.88rem; font-weight:600; color:var(--muted); cursor:pointer; transition:color .2s; position:sticky; top:0; z-index:10; background:rgba(6,8,15,.9); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,.07); }
.merchant-back-btn:hover { color:var(--text); }
.merchant-back-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:640px){ .merchant-header { padding:0 16px; } .merchant-avatar-row { flex-wrap:wrap; } .merchant-action-row { margin-left:0; } }

/* ═══════════════════════════════════════════════════════════
   UNIQUE ITEMS SECTION — v2
═══════════════════════════════════════════════════════════ */

/* ── Section Header ── */
.ui-section-header { padding:48px 32px 16px; max-width:1240px; margin:0 auto; }
.ui-section-eyebrow { font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--A2);margin-bottom:12px;display:flex;align-items:center;gap:8px; }
.ui-section-eyebrow::before { content:''; display:block; width:20px; height:2px; background:var(--A2); border-radius:99px; }
.ui-section-title { font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:700;line-height:1.0;letter-spacing:-.04em; }
.ui-section-sub { font-size:.9rem;color:var(--muted);margin-top:12px;max-width:560px;line-height:1.65; }

/* ── Filter Bar ── */
.ui-filter-bar { display:flex;align-items:center;gap:8px;padding:0 32px;max-width:1240px;margin:24px auto 0;flex-wrap:wrap; }
.ui-filter-btn { padding:7px 18px;border-radius:99px;font-size:.75rem;font-weight:700;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;font-family:inherit; }
.ui-filter-btn:hover { border-color:var(--A2);color:var(--A2); }
.ui-filter-btn.active { background:var(--A);border-color:var(--A);color:#fff;box-shadow:0 4px 16px -6px var(--Ag); }

/* ── Country Availability Banner ── */
.ui-country-banner { margin:20px 32px 0;max-width:1176px;padding:13px 18px;border-radius:12px;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.28);display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--A2); }
.ui-country-banner svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0; }

/* ── Vendor Grid ── */
.ui-vendor-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:24px 32px 60px;max-width:1240px;margin:0 auto; }
@media(max-width:700px){ .ui-vendor-grid { grid-template-columns:1fr;padding:16px 16px 60px; } }

/* ── Vendor Tile (larger, richer) ── */
.ui-vendor-tile {
  position:relative;background:var(--surf);border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s;
  display:flex;flex-direction:column;
}
.ui-vendor-tile:hover { transform:translateY(-7px);box-shadow:0 28px 70px -12px rgba(0,0,0,.7);border-color:rgba(255,255,255,.22); }
.ui-vendor-banner { position:relative;height:130px;overflow:hidden;flex-shrink:0; }
.ui-vendor-banner img { width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease); }
.ui-vendor-tile:hover .ui-vendor-banner img { transform:scale(1.07); }
.ui-vendor-banner-ov { position:absolute;inset:0;background:linear-gradient(to top,rgba(13,20,36,.98) 0%,rgba(13,20,36,.15) 55%,transparent 100%); }
/* Country flag pill */
.ui-vendor-country { position:absolute;top:14px;left:14px;padding:4px 12px;border-radius:99px;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);font-size:.65rem;font-weight:700;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:5px; }
/* Category pill */
.ui-vendor-badge { position:absolute;top:14px;right:14px;padding:4px 12px;border-radius:99px;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);font-size:.65rem;font-weight:700;color:var(--A2);letter-spacing:.08em;text-transform:uppercase; }
/* Availability indicator bottom of image */
.ui-vendor-avail-strip { position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.06); }
.ui-vendor-avail-fill { height:100%;border-radius:99px;background:linear-gradient(90deg,var(--A),var(--A2));transition:width .6s var(--ease); }

.ui-vendor-body { padding:14px 18px 10px;flex:1;display:flex;flex-direction:column;gap:10px; }
.ui-vendor-avatar-row { display:flex;align-items:center;gap:10px;margin-bottom:0; }
.ui-vendor-av { width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--A),var(--A2));display:grid;place-items:center;font-weight:900;font-size:.85rem;color:#fff;flex-shrink:0;font-family:'Montserrat',sans-serif; }
.ui-vendor-name-wrap { flex:1;min-width:0; }
.ui-vendor-name { font-family:'Cormorant Garamond',Georgia,serif;font-size:1.45rem;font-weight:700;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ui-vendor-cat-lbl { font-size:.68rem;font-weight:700;color:var(--A2);text-transform:uppercase;letter-spacing:.1em; }
.ui-vendor-tagline { font-size:.8rem;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.ui-vendor-footer { display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-top:1px solid rgba(255,255,255,.07); }
.ui-vendor-item-count { display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--text); }
.ui-vendor-item-count .dot { width:7px;height:7px;border-radius:50%; }
.ui-vendor-cta-lbl { font-size:.8rem;font-weight:700;color:var(--A2);display:flex;align-items:center;gap:5px;transition:gap .2s; }
.ui-vendor-tile:hover .ui-vendor-cta-lbl { gap:9px; }
.ui-vendor-cta-lbl svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }

/* ── Vendor Collection Page ── */
#uiVendorOverlay { position:fixed;top:60px;left:0;right:0;bottom:0;z-index:410;background:var(--bg);overflow-y:auto;display:none; }
#uiVendorOverlay.open { display:block;animation:slideInDetail .4s var(--ease); }
.ui-vendor-det-hero { display:none; }
.ui-vendor-det-info { display:none; }
.uiv-nav { position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;padding:12px 32px;background:rgba(6,8,15,.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.07); }
@media(max-width:720px){ .uiv-nav { padding:11px 16px; } }
.uiv-back-btn { display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:var(--muted);cursor:pointer;transition:color .2s;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:6px 13px;border-radius:8px;font-family:inherit; }
.uiv-back-btn:hover { color:var(--text);background:rgba(255,255,255,.12); }
.uiv-back-btn svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
.uiv-crumb { font-size:.75rem;color:var(--faint); }
.uiv-crumb-name { font-size:.78rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.uiv-header { display:grid;grid-template-columns:260px 1fr;gap:32px;padding:28px 60px 24px;max-width:1240px;margin:0 auto;align-items:start; }
@media(max-width:900px){ .uiv-header { grid-template-columns:160px 1fr;gap:20px;padding:20px 24px 18px; } }
@media(max-width:580px){ .uiv-header { grid-template-columns:1fr;padding:18px 16px; } }
.uiv-img-wrap { width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px -12px rgba(0,0,0,.6); }
.uiv-img-wrap img { width:100%;height:100%;object-fit:cover;display:block; }
.uiv-info { display:flex;flex-direction:column;padding-top:2px; }
.ui-vendor-det-name { font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2.2rem,5vw,4rem);font-weight:700;letter-spacing:-.04em;line-height:.95; }
.ui-vendor-det-desc { font-size:.95rem;color:rgba(180,195,230,.82);line-height:1.7;max-width:680px;margin-top:14px; }
.ui-vendor-det-meta-row { display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:.78rem;color:var(--muted); }
.ui-vendor-det-meta-row .pill { padding:4px 13px;border-radius:99px;background:var(--surf2);border:1px solid rgba(255,255,255,.09);font-size:.7rem;font-weight:600; }
.ui-vendor-det-country-note { display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.25);font-size:.77rem;color:var(--A2);margin-top:14px; }
.ui-vendor-det-country-note svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0; }
.ui-items-section-head { padding:10px 60px 14px;max-width:1240px;margin:0 auto;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);border-top:1px solid rgba(255,255,255,.06); }
@media(max-width:720px){ .ui-items-section-head { padding:10px 16px 12px; } }

/* ── Item Grid ── */
.ui-items-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;padding:0 60px 80px;max-width:1240px;margin:0 auto; }
@media(max-width:720px){ .ui-items-grid { padding:0 16px 60px;gap:12px;grid-template-columns:1fr 1fr; } }
.ui-item-card { background:var(--surf);border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.07);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s;display:flex;flex-direction:column; }
.ui-item-card:hover { transform:translateY(-5px);box-shadow:0 22px 56px -10px rgba(0,0,0,.65);border-color:rgba(255,255,255,.2); }
.ui-item-card.sold-out { opacity:.42;pointer-events:none; }
.ui-item-thumb { position:relative;height:220px;overflow:hidden;flex-shrink:0; }
.ui-item-thumb img { width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease); }
.ui-item-card:hover .ui-item-thumb img { transform:scale(1.06); }
/* Availability badge */
.ui-avail-badge { position:absolute;bottom:10px;left:10px;padding:5px 11px;border-radius:99px;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);font-size:.64rem;font-weight:800;display:flex;align-items:center;gap:5px;white-space:nowrap; }
.ui-avail-badge.critical { color:#ef4444; }
.ui-avail-badge.ok { color:#22c55e; }
.ui-avail-badge.half { color:#fbbf24; }
.ui-avail-badge.last { color:#f97316;animation:pulseAvail 1.8s ease-in-out infinite; }
@keyframes pulseAvail { 0%,100%{opacity:1} 50%{opacity:.55} }
.ui-avail-dot { width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0; }
/* Edition label */
.ui-edition-tag { position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:6px;font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--A2);color:#000; }
.ui-item-body { padding:15px 17px 18px;flex:1;display:flex;flex-direction:column; }
.ui-item-title { font-size:.9rem;font-weight:700;line-height:1.35;margin-bottom:auto; }
.ui-item-price-row { display:flex;align-items:center;justify-content:space-between;margin-top:13px; }
.ui-item-price { font-size:1.12rem;font-weight:900;color:var(--text); }
.ui-item-shipping-lbl { font-size:.62rem;color:var(--green);font-weight:700; }

/* ── Unique Item Detail Overlay ── */
#uniqueItemDetOverlay { position:fixed;top:60px;left:0;right:0;bottom:0;z-index:420;background:var(--bg);overflow-y:auto;display:none; }
#uniqueItemDetOverlay.open { display:block;animation:slideInDetail .4s var(--ease); }
.uid-layout { display:grid;grid-template-columns:1fr 400px;gap:0;max-width:1240px;margin:0 auto;padding:36px 60px 80px;align-items:start; }
@media(max-width:920px){ .uid-layout { grid-template-columns:1fr;padding:20px 20px 60px; } }

/* Dynamic image layouts */
.uid-images { margin-bottom:0; }
.uid-images.layout-1 .uid-img-wrap { border-radius:18px;overflow:hidden;aspect-ratio:4/3; }
.uid-images.layout-2 { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.uid-images.layout-2 .uid-img-wrap { border-radius:14px;overflow:hidden;aspect-ratio:1; }
.uid-images.layout-3 { display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:10px; }
.uid-images.layout-3 .uid-img-wrap:first-child { border-radius:16px;overflow:hidden;grid-row:1/3;aspect-ratio:3/4; }
.uid-images.layout-3 .uid-img-wrap:not(:first-child) { border-radius:14px;overflow:hidden;aspect-ratio:1.15; }
.uid-images.layout-4 { display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;gap:10px; }
.uid-images.layout-4 .uid-img-wrap:first-child { grid-row:1/3;border-radius:16px;overflow:hidden;aspect-ratio:3/4; }
.uid-images.layout-4 .uid-img-wrap:not(:first-child) { border-radius:12px;overflow:hidden;aspect-ratio:1.1; }
.uid-img-wrap img { width:100%;height:100%;object-fit:cover;display:block; }

/* Info panel */
.uid-info { padding-left:52px; position:sticky; top:20px; }
@media(max-width:920px){ .uid-info { padding-left:0;margin-top:32px;position:static; } }
.uid-eyebrow { font-size:.65rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--A2);margin-bottom:12px;display:flex;align-items:center;gap:8px; }
.uid-title { font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:700;line-height:1.03;letter-spacing:-.03em; }
.uid-desc { font-size:.9rem;color:rgba(180,195,230,.82);line-height:1.72;margin-top:16px; }

/* Availability block */
.uid-avail-block { margin-top:24px;padding:18px 20px;background:var(--surf2);border-radius:16px;border:1px solid rgba(255,255,255,.08); }
.uid-avail-label { font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px; }
.uid-avail-row { display:flex;align-items:center;justify-content:space-between; }
.uid-avail-val { font-size:1.6rem;font-weight:900;letter-spacing:-.04em; }
.uid-avail-val.last { color:#f97316; }
.uid-avail-val.ok { color:var(--text); }
.uid-avail-val.critical { color:#ef4444; }
.uid-avail-sub { font-size:.72rem;color:var(--muted);margin-top:3px; }
.uid-avail-bar { height:5px;background:rgba(255,255,255,.07);border-radius:99px;margin-top:14px;overflow:hidden; }
.uid-avail-bar-fill { height:100%;border-radius:99px;background:linear-gradient(90deg,var(--A),var(--A2));transition:width .7s var(--ease); }

/* Shipping note */
.uid-shipping-note { margin-top:14px;padding:11px 14px;background:rgba(34,197,94,.08);border-radius:10px;border:1px solid rgba(34,197,94,.2);font-size:.78rem;color:var(--green);display:flex;align-items:center;gap:8px; }
.uid-shipping-note svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0; }

/* Price + Buy */
.uid-price-row { display:flex;align-items:flex-end;gap:10px;margin-top:22px; }
.uid-price { font-size:2.4rem;font-weight:900;line-height:1;letter-spacing:-.04em; }
.uid-price-meta { font-size:.78rem;color:var(--faint);margin-bottom:4px;line-height:1.4; }
.uid-buy-btn { width:100%;margin-top:16px;padding:17px 24px;border-radius:16px;font-weight:800;font-size:1rem;background:linear-gradient(120deg,var(--A),var(--A2));color:#fff;border:none;cursor:pointer;box-shadow:0 10px 32px -8px var(--Ag);transition:transform .22s,box-shadow .22s;display:flex;align-items:center;justify-content:center;gap:10px;font-family:inherit; }
.uid-buy-btn:hover { transform:translateY(-2px);box-shadow:0 16px 40px -8px var(--Ag); }
.uid-buy-btn:disabled { background:var(--surf2);color:var(--muted);cursor:not-allowed;box-shadow:none;transform:none; }
.uid-buy-note { font-size:.7rem;color:var(--faint);text-align:center;margin-top:10px;line-height:1.55; }

/* Vendor credit */
.uid-vendor-credit { display:flex;align-items:center;gap:14px;margin-top:20px;padding:15px 18px;background:var(--surf2);border-radius:14px;cursor:pointer;border:1px solid rgba(255,255,255,.07);transition:border-color .2s,background .2s; }
.uid-vendor-credit:hover { border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06); }
.uid-vendor-av { width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--A),var(--A2));display:grid;place-items:center;font-weight:800;font-size:.78rem;color:#fff;flex-shrink:0; }
.uid-vendor-cred-name { font-size:.88rem;font-weight:700; }
.uid-vendor-cred-lbl { font-size:.7rem;color:var(--muted);margin-top:1px; }

/* ── Address Confirm In-App Modal ── */
.addr-modal-veil { position:fixed;inset:0;z-index:600;background:rgba(2,4,12,.82);backdrop-filter:blur(18px);display:none;align-items:center;justify-content:center;padding:16px; }
.addr-modal-veil.open { display:flex;animation:veilIn .3s; }
.addr-modal { width:min(540px,100%);max-height:92vh;overflow-y:auto;border-radius:24px;background:linear-gradient(158deg,#0e1730,#070c1c);border:1px solid rgba(255,255,255,.13);box-shadow:0 44px 90px -20px rgba(0,0,0,.9);animation:modalIn .4s var(--ease);position:relative; }
.addr-modal-head { padding:28px 28px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.addr-modal-title { font-size:1.2rem;font-weight:800;letter-spacing:-.02em; }
.addr-modal-sub { font-size:.8rem;color:var(--muted);margin-top:5px;line-height:1.55; }
.addr-close-btn { width:32px;height:32px;border-radius:9px;background:var(--glass);border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:all .2s; }
.addr-close-btn:hover { background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.35); }
.addr-close-btn svg { width:14px;height:14px;stroke:var(--text);stroke-width:2.2;fill:none;stroke-linecap:round; }
.addr-modal-body { padding:24px 28px 28px;display:flex;flex-direction:column;gap:14px; }
.addr-step-indicator { display:flex;align-items:center;gap:0;margin-bottom:4px; }
.addr-step { display:flex;align-items:center;gap:0;flex:1; }
.addr-step-dot { width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.18);display:grid;place-items:center;font-size:.7rem;font-weight:800;color:var(--muted);flex-shrink:0;transition:all .3s; }
.addr-step-dot.active { border-color:var(--A);background:var(--A);color:#fff; }
.addr-step-dot.done { border-color:var(--green);background:var(--green);color:#fff; }
.addr-step-line { flex:1;height:2px;background:rgba(255,255,255,.1);transition:background .3s; }
.addr-step-line.done { background:var(--green); }
.addr-step-lbl { font-size:.64rem;font-weight:700;color:var(--faint);text-align:center;margin-top:4px; }
.addr-field-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
@media(max-width:480px){ .addr-field-row { grid-template-columns:1fr; } }
.addr-field { display:flex;flex-direction:column;gap:5px; }
.addr-field label { font-size:.68rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase; }
.addr-field input, .addr-field select { padding:11px 14px;border-radius:11px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);color:var(--text);font-size:.88rem;font-family:inherit;outline:none;transition:border-color .2s;width:100%; }
.addr-field input:focus, .addr-field select:focus { border-color:var(--A); }
.addr-field input::placeholder { color:var(--faint); }
.addr-country-note { font-size:.72rem;color:var(--A2);display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(37,99,235,.1);border-radius:8px;border:1px solid rgba(37,99,235,.2); }
.addr-country-note svg { width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0; }
.addr-confirm-btn { width:100%;padding:15px;border-radius:14px;font-size:.95rem;font-weight:800;background:linear-gradient(120deg,var(--A),var(--A2));color:#fff;border:none;cursor:pointer;font-family:inherit;box-shadow:0 8px 24px -8px var(--Ag);transition:all .25s;display:flex;align-items:center;justify-content:center;gap:8px; }
.addr-confirm-btn:hover { transform:translateY(-2px);box-shadow:0 14px 32px -8px var(--Ag); }
.addr-success-screen { display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 28px 28px;gap:14px; }
.addr-success-icon { width:64px;height:64px;border-radius:50%;background:rgba(34,197,94,.15);border:2px solid rgba(34,197,94,.35);display:grid;place-items:center; }
.addr-success-icon svg { width:28px;height:28px;stroke:#22c55e;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
.addr-success-title { font-size:1.3rem;font-weight:800; }
.addr-success-sub { font-size:.85rem;color:var(--muted);line-height:1.6;max-width:36ch; }
.addr-txn-id { font-size:.72rem;font-weight:700;letter-spacing:.1em;padding:8px 16px;background:var(--surf2);border-radius:8px;color:var(--A2);font-family:'JetBrains Mono',monospace; }

.modal-veil {
  position:fixed; inset:0; z-index:500; background:rgba(2,4,12,.76); backdrop-filter:blur(16px);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.modal-veil.open { display:flex; animation:veilIn .3s; }
@keyframes veilIn { from{ opacity:0; } to{ opacity:1; } }
.pay-modal {
  width:min(900px,100%); max-height:94vh; overflow-y:auto; border-radius:24px; position:relative;
  background:linear-gradient(158deg,#0e1730,#070c1c); border:1px solid rgba(255,255,255,.13);
  box-shadow:0 44px 90px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  animation:modalIn .4s var(--ease);
}
@keyframes modalIn { from{ opacity:0; transform:translateY(26px) scale(.97); } to{ opacity:1; transform:none; } }
.pm-close {
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px;
  background:var(--glass); border:1px solid var(--glass-b); display:grid; place-items:center; z-index:5; transition:all .22s; cursor:pointer;
}
.pm-close:hover { background:rgba(239,68,68,.22); border-color:rgba(239,68,68,.4); }
.pm-close svg { width:14px; height:14px; stroke:var(--text); stroke-width:2.4; fill:none; stroke-linecap:round; }
.pm-head { padding:24px 60px 0 28px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.pm-thumb { width:58px; height:58px; border-radius:13px; overflow:hidden; flex-shrink:0; border:1px solid var(--glass-b); }
.pm-head h3 { font-size:1.16rem; font-weight:800; }
.pm-sub { font-size:.78rem; color:var(--muted); margin-top:3px; }
.pm-price-block { margin-left:auto; text-align:right; }
.pm-price-block b { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-size:1.58rem; font-weight:800; background:linear-gradient(120deg,var(--A2),var(--A)); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
.pm-price-block span { font-size:.67rem; color:var(--faint); letter-spacing:.08em; text-transform:uppercase; }
.pm-layout { display:grid; grid-template-columns:320px 1fr; margin-top:20px; }
.pm-left {
  padding:26px 28px; border-right:1px solid rgba(255,255,255,.08); border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  background:radial-gradient(280px 180px at 50% 0%,var(--As),transparent);
}
.pm-qr-wrap { width:280px; height:280px; border-radius:18px; background:#fff; padding:14px; position:relative; box-shadow:0 16px 44px -10px var(--Ag); }
@media(max-width:520px){
  .pm-qr-wrap { width:84vw; height:84vw; max-width:340px; max-height:340px; }
}
.pm-scan { position:absolute; left:10px; right:10px; height:2.5px; border-radius:99px; top:13px; background:linear-gradient(90deg,transparent,var(--A),transparent); animation:scan 2.4s ease-in-out infinite; box-shadow:0 0 12px var(--A); }
@keyframes scan { 0%,100%{ top:13px; } 50%{ top:calc(100% - 16px); } }
.pm-left h4 { font-size:.94rem; font-weight:700; }
.pm-left p { font-size:.79rem; color:var(--muted); line-height:1.55; max-width:29ch; }
.pm-steps { display:flex; flex-direction:column; gap:8px; width:100%; text-align:left; }
.pm-step { display:flex; gap:9px; align-items:center; font-size:.77rem; color:var(--muted); }
.pm-step i { width:20px; height:20px; border-radius:99px; background:var(--As); color:var(--A2); display:grid; place-items:center; font-style:normal; font-weight:800; font-size:.63rem; flex-shrink:0; font-family: 'Segoe UI', Montserrat, Arial, sans-serif; }
.pm-right { padding:26px 28px; border-top:1px solid rgba(255,255,255,.08); }
.pm-right h4 { font-size:.94rem; font-weight:700; margin-bottom:3px; }
.pm-hint { font-size:.78rem; color:var(--muted); margin-bottom:18px; }
.fld { margin-bottom:13px; }
.fld label { display:block; font-size:.69rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.fld-row { display:flex; gap:9px; }
.fld input {
  width:100%; padding:12px 14px; border-radius:11px; background:rgba(255,255,255,.06);
  border:1.5px solid var(--glass-b); color:var(--text); font-size:.91rem; outline:none; transition:all .22s;
}
.fld input:focus { border-color:var(--A); box-shadow:0 0 0 3px var(--As); }
.fld input:disabled { opacity:.4; }
.fld input.otp { letter-spacing:.7em; text-align:center; font-family:'JetBrains Mono'; font-weight:700; font-size:1.08rem; }
.prefix { display:flex; align-items:center; padding:0 13px; border-radius:11px; background:rgba(255,255,255,.06); border:1.5px solid var(--glass-b); font-weight:700; font-size:.88rem; color:var(--muted); flex-shrink:0; }
.pm-btn {
  width:100%; padding:12px; border-radius:11px; font-weight:700; font-size:.88rem;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; border:none; font-family:inherit; transition:all .28s;
}
.pm-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pm-btn.solid { background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff; box-shadow:0 8px 22px -8px var(--Ag); }
.pm-btn.solid:hover:not(:disabled) { transform:translateY(-2px); }
.pm-btn.line { background:var(--glass); border:1.5px solid var(--glass-b); color:var(--text); }
.pm-btn.line:hover:not(:disabled) { background:rgba(255,255,255,.1); }
.pm-btn:disabled { opacity:.38; cursor:not-allowed; }
.pm-btn.confirm { background:linear-gradient(120deg,#16a34a,#22c55e); box-shadow:0 8px 22px -8px rgba(34,197,94,.5); color:#fff; }
.otp-status { font-size:.75rem; margin-top:-5px; margin-bottom:13px; min-height:18px; display:flex; align-items:center; gap:5px; }
.otp-status.ok { color:var(--green); } .otp-status.err { color:var(--red); } .otp-status.info { color:var(--A2); }
.demo-otp { padding:1px 8px; border-radius:6px; background:var(--As); color:var(--A2); font-family:'JetBrains Mono'; font-weight:700; }
/* Success */
.pm-success { display:none; flex-direction:column; align-items:center; text-align:center; padding:52px 28px 58px; gap:13px; }
.sring { width:100px; height:100px; border-radius:99px; display:grid; place-items:center; background:radial-gradient(circle,rgba(34,197,94,.22),transparent 70%); position:relative; }
.sring::before { content:''; position:absolute; inset:13px; border-radius:99px; border:3px solid var(--green); animation:popR .6s var(--ease); }
@keyframes popR { from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.sring svg { width:42px; height:42px; stroke:var(--green); stroke-width:2.8; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:draw .7s .25s var(--ease) forwards; }
@keyframes draw { to{ stroke-dashoffset:0; } }
.pm-success h3 { font-size:1.42rem; font-weight:800; }
.pm-success p { color:var(--muted); font-size:.88rem; max-width:38ch; line-height:1.6; }
.confetti-p { position:absolute; border-radius:2px; animation:confFall 1.8s ease-in forwards; z-index:6; }
@keyframes confFall { from{ transform:translateY(-10px) rotate(0); opacity:1; } to{ transform:translateY(340px) rotate(570deg); opacity:0; } }

/* ─────────────────────────────────────────────
   TOAST
───────────────────────────────────────────── */
.toast-stack { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:600; display:flex; flex-direction:column; gap:9px; align-items:center; pointer-events:none; }
.toast {
  padding:12px 20px; border-radius:13px; background:rgba(12,20,44,.95); backdrop-filter:blur(16px);
  border:1px solid var(--glass-b); font-size:.85rem; font-weight:600;
  display:flex; align-items:center; gap:9px; box-shadow:0 14px 38px rgba(0,0,0,.6);
  animation:toastIn .35s var(--ease);
}
@keyframes toastIn { from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.toast.out { animation:toastOut .3s var(--ease) forwards; }
@keyframes toastOut { to{ opacity:0; transform:translateY(10px); } }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.footer { margin-top:52px; padding:38px 24px 28px; border-top:1px solid rgba(255,255,255,.07); position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:30px; }
.footer-logo { font-family: 'Segoe UI', Montserrat, Arial, sans-serif; font-weight:900; font-size:1.28rem; background:linear-gradient(120deg,var(--A2),var(--A)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:9px; }
.footer-tagline { font-size:.8rem; color:var(--faint); line-height:1.65; max-width:34ch; }
.footer-social { display:flex; gap:9px; margin-top:15px; }
.footer-social a { width:35px; height:35px; border-radius:9px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--glass-b); font-size:.82rem; transition:all .25s; }
.footer-social a:hover { background:var(--As); border-color:rgba(59,130,246,.4); }
.footer-col h5 { font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:13px; }
.footer-col a { display:block; font-size:.8rem; color:var(--faint); margin-bottom:8px; transition:color .2s; }
.footer-col a:hover { color:var(--A2); }
.pay-pills { display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
.pay-pill { padding:4px 12px; border-radius:7px; background:rgba(255,255,255,.06); border:1px solid var(--glass-b); font-size:.7rem; font-weight:600; color:var(--muted); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:19px; border-top:1px solid rgba(255,255,255,.06); font-size:.76rem; color:var(--faint); flex-wrap:wrap; gap:9px; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width:1100px) {
  .unlock-card { right:26px; width:266px; }
  .hero-next { right:306px; }
  .hero-preview { left:54%; width:clamp(220px,26vw,278px); }
}
/* ── Mobile hero = premium OTT overlay banner (Netflix / Prime / Hotstar):
      one full-bleed image per screen, strong bottom gradient, title +
      meta + actions overlaid at the bottom. Desktop (>900px) is untouched. ── */
@media (max-width:900px) {
  .hero-outer { margin-top:0; }
  .hero-slide { height:clamp(500px,86vh,720px); min-height:0; display:block; }
  .hs-bg { position:absolute; inset:0; height:auto; }
  .hs-bg img { width:100%; height:100%; object-fit:cover; object-position:top center; }
  /* Strong bottom-up gradient for text readability */
  .hs-ov-cinema {
    display:block;
    background:linear-gradient(to top,
      rgba(4,6,14,.97) 0%, rgba(4,6,14,.88) 20%, rgba(4,6,14,.5) 46%,
      rgba(4,6,14,.16) 68%, rgba(4,6,14,.4) 100%);
  }
  /* Content pinned to the bottom, full width, left-aligned */
  .hs-content, .hs-content.hs-top {
    position:absolute; inset:auto 0 0 0; max-width:100%;
    display:flex; align-items:flex-end;
    padding:0 18px calc(26px + env(safe-area-inset-bottom));
  }
  .hs-inner { gap:11px; align-items:flex-start; width:100%; }
  .hs-title { font-size:clamp(1.9rem,7vw,2.7rem); line-height:1.03; }
  .hs-meta { font-size:.82rem; gap:9px; }
  .hs-desc {
    font-size:.88rem; max-width:none;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .hs-stats { display:none; }
  .hs-actions { width:100%; gap:9px; margin-top:6px; }
  .hs-actions .btn { flex:1 1 auto; justify-content:center; min-width:0; }
  .hs-actions .btn-outline.btn-sm { flex:0 0 auto; }
  /* Inline QR card hidden on mobile — the Unlock action button covers payment */
  .unlock-card { display:none; }
  /* Series preview poster floats in the upper area of the banner */
  .hero-preview {
    position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
    width:min(178px,42vw); aspect-ratio:9/13.5; margin:0; z-index:6;
  }
  .hero-preview:hover { transform:translate(-50%,-50%) translateY(-3px); }
  .hp-title { display:none; }
  .hp-play-ring { width:52px; height:52px; }
  .hp-play-ring svg { width:19px; height:19px; }
  /* Carousel controls over the image, dots near the bottom */
  .hero-prev, .hero-next { top:46%; width:38px; height:38px; }
  .hero-prev { left:10px; }
  .hero-next { right:10px; }
  .hero-dots { bottom:14px; top:auto; }
  .slide-counter, .hero-progress { display:none; }
  /* non-hero adjustments */
  .about-grid { grid-template-columns:1fr; }
  .pm-layout { grid-template-columns:1fr; }
  .pm-left { border-right:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .breadcrumb,.toolbar,.section,.about-section,.footer { padding-left:16px; padding-right:16px; }
}
@media (max-width:640px) {
  .hero-slide { height:clamp(460px,82vh,640px); }
  .hs-content, .hs-content.hs-top { padding:0 15px calc(22px + env(safe-area-inset-bottom)); }
  .hs-title { font-size:clamp(1.75rem,8vw,2.3rem); }
  .hero-preview { width:min(100%,100%); }
  .meta-table { grid-template-columns:1fr; }
  .meta-row:nth-child(odd) { border-right:none; padding-right:0; }
  .meta-row:nth-child(even) { padding-left:0; }
  .btn { padding:11px 16px; font-size:.85rem; }
  .footer-grid { grid-template-columns:1fr; }
  /* Music table: drop Genre / QR / Duration columns so it fits */
  .music-table-header, .music-row { grid-template-columns:30px 1fr auto; }
  .music-table-header span:nth-child(3), .music-table-header span:nth-child(4),
  .music-table-header span:nth-child(5),
  .music-album-col, .music-qr-col, .music-dur { display:none; }
}

/* ── DONATE CREATIVE DETAIL PAGE ── */
.donate-det-hero {
  position:relative; height:clamp(260px,42vh,420px); overflow:hidden;
}
.donate-det-hero img { width:100%; height:100%; object-fit:cover; }
.donate-det-hero-ov {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(6,8,15,.15) 0%, rgba(6,8,15,.5) 55%, var(--bg) 100%);
}
.donate-det-hero-content {
  position:absolute; bottom:0; left:0; right:0; padding:28px 36px;
}
.donate-det-category {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:99px; font-size:.65rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--A); color:#fff; margin-bottom:10px;
}
.donate-det-title {
  font-size:clamp(1.6rem,4vw,2.8rem); font-weight:900; letter-spacing:-.03em;
  line-height:1.05; color:#fff; text-shadow:0 4px 20px rgba(0,0,0,.5);
}
.donate-layout { display:grid; grid-template-columns:1fr 320px; gap:28px; padding:24px 36px 80px; max-width:1100px; margin:0 auto; }
@media(max-width:860px){ .donate-layout { grid-template-columns:1fr; padding:16px 20px 60px; } }
.donate-desc-card {
  background:var(--surf); border-radius:18px; padding:24px;
  border:1px solid rgba(255,255,255,.07); margin-bottom:20px;
}
.donate-desc-card h3 {
  font-size:1rem; font-weight:800; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.donate-desc-card h3 .bar { width:4px; height:16px; border-radius:99px; background:linear-gradient(to bottom,var(--A2),var(--A)); flex-shrink:0; }
.donate-desc-text { font-size:.9rem; line-height:1.75; color:rgba(200,215,240,.88); }
.donate-perks-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.donate-perk {
  background:var(--surf2); border-radius:12px; padding:14px;
  border:1px solid rgba(255,255,255,.06);
}
.donate-perk-icon { font-size:1.4rem; margin-bottom:6px; }
.donate-perk-title { font-size:.82rem; font-weight:700; margin-bottom:3px; }
.donate-perk-desc { font-size:.7rem; color:var(--muted); line-height:1.45; }
.donate-impact-bar {
  display:flex; align-items:stretch; gap:10px; margin-top:16px;
  background:var(--surf2); border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.donate-impact-item {
  flex:1; padding:14px 12px; text-align:center;
  border-right:1px solid rgba(255,255,255,.06);
}
.donate-impact-item:last-child { border-right:none; }
.donate-impact-emoji { font-size:1.5rem; margin-bottom:4px; }
.donate-impact-label { font-size:.68rem; color:var(--muted); line-height:1.4; }
/* Sticky donate sidebar */
.donate-sidebar { position:sticky; top:80px; display:flex; flex-direction:column; gap:14px; }
.donate-action-card {
  background:var(--surf); border-radius:20px; padding:22px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 60px -16px rgba(0,0,0,.6);
}
.donate-amounts {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0;
}
.donate-amt-btn {
  padding:10px 6px; border-radius:11px; font-size:.88rem; font-weight:800;
  background:var(--surf2); border:1.5px solid rgba(255,255,255,.1); color:var(--text);
  cursor:pointer; transition:all .2s; text-align:center;
}
.donate-amt-btn:hover, .donate-amt-btn.selected {
  background:var(--A); border-color:var(--A); color:#fff;
  box-shadow:0 4px 16px -6px var(--Ag);
}
.donate-custom-wrap { margin-top:2px; }
.donate-custom-input {
  width:100%; padding:11px 14px; border-radius:11px;
  background:var(--surf2); border:1.5px solid rgba(255,255,255,.15); color:var(--text);
  font-size:1rem; font-weight:700; font-family:inherit; outline:none;
  transition:border-color .2s; display:none;
}
.donate-custom-input.visible { display:block; }
.donate-custom-input:focus { border-color:var(--A); }
.donate-custom-input::placeholder { color:var(--faint); font-weight:400; }
.donate-main-btn {
  width:100%; padding:14px; border-radius:13px; font-size:.95rem; font-weight:800;
  background:linear-gradient(120deg,var(--A),var(--A2)); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px;
  box-shadow:0 8px 24px -8px var(--Ag); transition:all .25s;
}
.donate-main-btn:hover { transform:translateY(-2px); box-shadow:0 14px 32px -8px var(--Ag); }
.donate-secure-note {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:10px; font-size:.68rem; color:var(--faint);
}
.donate-creator-mini {
  background:var(--surf); border-radius:16px; padding:18px;
  border:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:14px;
}

/* ── EPISODE NUMBER GRID (ReelShort style) ── */
.ep-num-grid-wrap { padding:0 0 28px; }
.ep-range-tabs { display:flex; gap:2px; margin-bottom:16px; flex-wrap:wrap; }
.ep-range-tab {
  padding:5px 14px; border-radius:6px; font-size:.75rem; font-weight:700; cursor:pointer;
  border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--muted);
  transition:all .18s;
}
.ep-range-tab.active { background:var(--A); border-color:var(--A); color:#fff; }
.ep-num-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:8px;
}
.ep-num-btn {
  aspect-ratio:1; border-radius:10px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; cursor:pointer; position:relative;
  background:var(--surf2); border:1.5px solid rgba(255,255,255,.08);
  transition:all .2s; font-size:.85rem; font-weight:800; color:var(--text);
}
.ep-num-btn:hover { border-color:var(--A); background:var(--As); color:var(--A2); transform:scale(1.06); }
.ep-num-btn.free { border-color:rgba(34,197,94,.35); }
.ep-num-btn.free::after {
  content:'FREE'; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  font-size:.48rem; font-weight:800; background:#22c55e; color:#fff;
  padding:1px 5px; border-radius:99px; letter-spacing:.06em; white-space:nowrap;
}
.ep-num-btn.locked { color:var(--faint); }
.ep-num-btn.locked .ep-lock-icon { font-size:.6rem; position:absolute; top:4px; right:5px; color:var(--faint); }
.ep-num-btn.current { background:var(--A); border-color:var(--A2); color:#fff; }
.ep-num-btn .ep-playing-bars {
  display:flex; gap:2px; align-items:flex-end; height:12px; margin-bottom:2px;
}
.ep-num-btn .ep-playing-bars span {
  width:3px; border-radius:1px; background:#fff;
  animation:epBar .6s ease-in-out infinite alternate;
}
.ep-num-btn .ep-playing-bars span:nth-child(1){ height:60%; animation-delay:0s; }
.ep-num-btn .ep-playing-bars span:nth-child(2){ height:100%; animation-delay:.15s; }
.ep-num-btn .ep-playing-bars span:nth-child(3){ height:45%; animation-delay:.3s; }
@keyframes epBar { from{ transform:scaleY(.4); } to{ transform:scaleY(1); } }
.ep-info-strip {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--surf2); border-radius:12px; margin-bottom:16px;
  border:1px solid rgba(255,255,255,.07);
}
.ep-info-thumb { width:56px; height:80px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.ep-info-thumb img { width:100%; height:100%; object-fit:cover; }
.ep-info-meta { flex:1; }
.ep-info-num { font-size:.68rem; font-weight:700; color:var(--A2); text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
.ep-info-title { font-size:.92rem; font-weight:700; margin-bottom:5px; }
.ep-info-dur { font-size:.74rem; color:var(--muted); }

/* ─── DARK / LIGHT MODE TOGGLE ─── */
body.light-mode {
  --bg: #f0f2f8;
  --bg2: #e8eaf4;
  --surf: #ffffff;
  --surf2: #e8ecf8;
  --glass: rgba(0,0,0,.07);
  --glass-b: rgba(0,0,0,.13);
  --text: #0d1120;
  --muted: #4a5580;
  --faint: #7a86a8;
}
body.light-mode::before {
  background: radial-gradient(1300px 650px at 75% -5%, rgba(37,99,235,.06), transparent 60%);
}
body.light-mode .nav { background: rgba(240,242,248,.95); border-bottom: 1px solid rgba(0,0,0,.1); }
body.light-mode .footer { background: #e2e6f4; }
body.light-mode .music-table-header span, body.light-mode .track-num, body.light-mode .track-dur { color: var(--faint); }
body.light-mode .nav-btn { color: var(--muted); }
body.light-mode .nav-btn.active { color: var(--text); }
body.light-mode ::-webkit-scrollbar-thumb { background: #c0c8e4; }

.theme-toggle-btn {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--glass-b); cursor:pointer;
  transition:all .25s; font-size:1.1rem; user-select:none;
}
.theme-toggle-btn:hover { background:rgba(255,255,255,.15); transform:translateY(-1px); }

/* ═══════════════════════════════════════════════════════════
   LIVE MARKETPLACE (real API items, NGN)
═══════════════════════════════════════════════════════════ */
.live-mp { max-width:1400px; margin:48px auto 24px; padding:0 20px; }
.live-mp-head { display:flex; flex-direction:column; gap:4px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--glass-b); }
.live-mp-head h2 { margin:0; font-family:Outfit,sans-serif; font-size:1.35rem; font-weight:900; letter-spacing:.01em; }
.live-mp-head p { margin:0; font-size:.82rem; color:var(--muted); }

.mp-row { margin:22px 0 32px; }
.mp-row-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.mp-row-head h2 { margin:0; font-family:Outfit,sans-serif; font-size:1.05rem; font-weight:800; }
.mp-row-count { font-size:.7rem; color:var(--faint); letter-spacing:.03em; text-transform:uppercase; }

.mp-row-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.mp-empty { padding:24px 12px; text-align:center; color:var(--faint); font-size:.85rem; border:1px dashed var(--glass-b); border-radius:10px; }

.mp-card { display:flex; flex-direction:column; background:var(--glass); border:1px solid var(--glass-b); border-radius:12px; overflow:hidden; transition:transform .18s, border-color .18s; cursor:pointer; }
.mp-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.28); }
.mp-card-qr { cursor:pointer; }
.mp-card-qr:hover { transform:scale(1.08); transition:transform .15s; }

.mp-card-banner { position:relative; aspect-ratio:16/10; background:#0b1024; overflow:hidden; }
.mp-card-banner img { width:100%; height:100%; object-fit:cover; display:block; }
.mp-card-banner-fallback { position:absolute; inset:0; background:linear-gradient(135deg,#1b559b,#0b1024); }
.mp-card-qr { position:absolute; bottom:8px; right:8px; width:44px; height:44px; padding:3px; border-radius:6px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.35); }

.mp-card-body { display:flex; flex-direction:column; gap:6px; padding:11px 12px 13px; }
.mp-card-merchant { display:flex; align-items:center; gap:7px; }
.mp-card-merchant img { width:22px; height:22px; border-radius:50%; object-fit:cover; }
.mp-card-merchant-fallback { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#60a5fa,#1b559b); display:inline-block; }
.mp-card-handle { font-size:.72rem; color:var(--muted); font-weight:600; }
.mp-card-title { margin:0; font-family:Outfit,sans-serif; font-size:.93rem; font-weight:700; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mp-card-desc { margin:0; font-size:.75rem; color:var(--faint); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mp-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding-top:8px; border-top:1px solid var(--glass-b); }
.mp-card-price { font-family:Outfit,sans-serif; font-weight:900; font-size:1rem; color:var(--A2, #60a5fa); }
.mp-card-cat { font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }

/* ═══════════════════════════════════════════════════════════
   DETAIL-PAGE QR — sized generously (260px) so a low-MP camera can
   lock focus at arm's length (~30cm). White frame + 2px light
   border keep the finder patterns visually crisp.
═══════════════════════════════════════════════════════════ */
.detail-qr-block {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:1rem; margin:0 auto 14px;
  text-align:center;
}
.detail-qr-frame {
  width:260px; height:260px;
  padding:8px; background:#ffffff;
  border:2px solid #e9ecef;
  border-radius:12px;
  box-shadow:0 6px 22px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center; line-height:0;
}
.detail-qr-frame img,
.detail-qr-frame .ampa-qr,
.detail-qr-frame .ampa-qr img,
.detail-qr-frame svg { width:100%; height:100%; display:block; object-fit:contain; }
.detail-qr-caption { text-align:center; }
.detail-qr-label { font-family:Outfit,sans-serif; font-weight:800; font-size:.95rem; color:var(--text); margin-bottom:2px; }
.detail-qr-sub   { font-size:.72rem; color:var(--muted); letter-spacing:.02em; margin-bottom:6px; }
.detail-qr-price {
  font-family:Outfit,sans-serif; font-weight:900; font-size:1.35rem;
  background:linear-gradient(120deg,var(--A2),var(--A));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media(max-width:480px){
  .detail-qr-frame { width:88vw; height:88vw; max-width:320px; max-height:320px; }
}

/* ═══════════════════════════════════════════════════════════
   TIP (creator support) — shown on free / eligibleForTip items
═══════════════════════════════════════════════════════════ */
.price-tip-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:99px;
  background:linear-gradient(120deg,#ec4899,#f43f5e);
  color:#fff; font-family:Outfit,sans-serif; font-weight:700; font-size:.78rem;
  border:none; cursor:pointer;
  box-shadow:0 4px 12px rgba(244,63,94,.35);
  transition:transform .18s, box-shadow .18s;
}
.price-tip-btn svg { width:12px; height:12px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.price-tip-btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(244,63,94,.45); }

.tip-body { padding:22px 24px 24px; }
.tip-pills { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.tip-pill {
  padding:10px 16px; border-radius:12px;
  background:var(--glass); border:1px solid var(--glass-b);
  color:var(--text); font-family:Outfit,sans-serif; font-weight:800; font-size:.9rem;
  cursor:pointer; transition:all .18s;
}
.tip-pill:hover { border-color:rgba(255,255,255,.22); transform:translateY(-1px); }
.tip-pill.active {
  background:linear-gradient(120deg,var(--A),var(--A2));
  border-color:transparent; color:#fff;
  box-shadow:0 6px 18px var(--Ag);
}
.tip-custom-wrap { margin-bottom:18px; }
.tip-custom-wrap label {
  display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px;
}
.tip-custom-row {
  display:flex; align-items:center; gap:0;
  border:1px solid var(--glass-b); border-radius:10px; overflow:hidden;
  background:var(--surf);
}
.tip-custom-row .prefix {
  padding:12px 14px; background:var(--glass);
  font-family:Outfit,sans-serif; font-weight:800; font-size:1rem; color:var(--muted);
  border-right:1px solid var(--glass-b);
}
.tip-custom-row input {
  flex:1; padding:12px 14px; border:none; background:transparent;
  color:var(--text); font-family:Outfit,sans-serif; font-weight:700; font-size:1rem;
  outline:none;
}
.tip-custom-row input:focus { background:rgba(255,255,255,.03); }