@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('/static/fonts/outfit-300.ttf') format('truetype');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/outfit-400.ttf') format('truetype');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/outfit-500.ttf') format('truetype');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/outfit-600.ttf') format('truetype');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/outfit-700.ttf') format('truetype');}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;font-family:'Outfit',system-ui,sans-serif;}
:root{
  --bg:#000000;--bg2:#060606;--surface:#0a0a0a;--card:#0d0d0d;--card-hi:#131313;
  --border:#1c1c1c;--border-hi:#252525;
  --accent:#f5c518;--accent2:#ffd700;--accent3:#c9a800;
  --accent-lo:rgba(245,197,24,.08);--accent-glo:rgba(245,197,24,.15);
  --text:#e8e8e8;--text2:#606060;--text3:#2e2e2e;
  --radius:12px;--radius-sm:8px;--radius-lg:16px;
}
html{scroll-behavior:auto;}

body{background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:3px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px;}::-webkit-scrollbar-thumb:hover{background:var(--accent);}
nav{position:fixed;top:0;left:0;right:0;z-index:1000;min-height:60px;padding:0 max(16px,3vw);display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.96);border-bottom:1.5px solid var(--border);}
body{padding-top:60px;}
#sv-page{min-height:calc(100vh - 60px);}
.logo{font-size:1.2rem;font-weight:800;letter-spacing:-.03em;color:var(--text);text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.logo em{font-style:normal;color:var(--accent);}
.logo-icon{width:28px;height:28px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-icon svg{fill:#000;width:9px;height:9px; margin-left: 2px;}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.nav-links{display:flex;align-items:center;gap:8px;}
.search-wrap{flex:1;display:flex;justify-content:flex-end;max-width:280px;}
.search-box{position:relative;width:100%;}
.search-box input{height:36px;padding:0 14px 0 38px;width:100%;min-width:0;background:var(--surface);border:1.5px solid var(--border);border-radius:50px;color:var(--text);font-size:.82rem;outline:none;transition:border-color .25s,box-shadow .25s;}
.search-box input::placeholder{color:var(--text2);}
.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-lo);}
.search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--text2);fill:none;pointer-events:none;transition:stroke .25s;}
.search-box input:focus~.search-ico,.search-box:focus-within .search-ico{stroke:var(--accent);}
.nav-btn{height:36px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;background:transparent;border:2px solid var(--border);border-radius:50px;color:var(--text2);font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .25s,color .25s;flex-shrink:0;text-decoration:none;}
.nav-btn:hover{border-color:var(--accent);color:var(--accent);}
.nav-btn:disabled{opacity:.35;cursor:default;pointer-events:none;}
/* ── Hamburger menu ── */
.nav-ham{display:none;margin-left:auto;width:38px;height:38px;background:transparent;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;padding:0;}
.nav-ham span{display:block;width:16px;height:2px;background:var(--text);border-radius:2px;transition:transform .22s,opacity .22s,background .22s;}
.nav-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-ham.open span:nth-child(2){opacity:0;}
.nav-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-drawer{display:none;position:fixed;top:60px;left:0;right:0;z-index:999;background:rgba(5,5,5,.98);border-bottom:1.5px solid var(--border);padding:12px 16px 18px;flex-direction:column;gap:8px;}
.nav-drawer.open{display:flex;}
.nav-drawer .nav-btn{width:100%;justify-content:flex-start;border-radius:var(--radius-sm);height:42px;padding:0 14px;}
.nav-drawer .search-box{width:100%;}
.nav-drawer .search-box input{width:100%;}
@media(max-width:700px){
  .nav-links{display:none;}
  .search-wrap{display:none;}
  .nav-ham{display:flex;}
  .nav-desktop-only{display:none!important;}
}
.page{max-width:1400px;margin:0 auto;padding:0 max(16px,3vw);}
.hero{padding:40px 0 28px;display:flex;flex-direction:column;gap:10px;}
.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 7px;background:var(--accent-lo);border:1px solid rgba(245,197,24,.18);border-radius:50px;width:fit-content;}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.hero-badge span{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.hero h1{font-size:clamp(1.2rem,4.5vw,3rem);font-weight:900;line-height:1.05;letter-spacing:-.04em;}
.hero h1 .hi{color:var(--accent);}
.hero-sub{font-size:.9rem;color:var(--text2);max-width:480px;}
.stats{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;}
.stat{display:flex;flex-direction:column;gap:2px;padding:10px 16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);min-width:72px;transition:border-color .25s;}
.stat:hover{border-color:var(--border-hi);}
.stat-n{font-size:1.6rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--accent);}
.stat-l{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);}
.sec-row{display:flex;align-items:center;gap:10px;padding:20px 0 14px;}
.sec-row h2{font-size:.95rem;font-weight:700;letter-spacing:-.01em;}
.pill{font-size:.62rem;font-weight:800;letter-spacing:.06em;color:var(--accent);background:var(--accent-lo);border:1.5px solid rgba(245,197,24,.14);padding:2px 9px;border-radius:50px;}
.divider{flex:1;height:1.5px;background:var(--border);}
.albums-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;padding-bottom:16px;}
@media(max-width:1200px){.albums-grid{grid-template-columns:repeat(5,1fr);}}
@media(max-width:900px){.albums-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:500px){.albums-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}
/* ── Album slot wrapper — border-radius clip owner ── */
.alb-slot{
  border-radius:12px;
  outline:1.5px solid rgba(255,255,255,.08);
  outline-offset:-1px;
}
/* ── Ambient blurred poster glow behind each card ── */
.card-ambient{
  position:absolute;inset:-8px;z-index:-1;
  background-size:cover;background-position:center;
  filter:blur(22px) brightness(.55) saturate(1.3);
  transform:scale(1.08);
  border-radius:16px;
  opacity:0;
  transition:opacity 1s ease;
  pointer-events:none;
}
.card-ambient.ambient-loaded{opacity:1;}
/* ── Album card — Netflix full-bleed poster style ── */
.album-card{
  text-decoration:none;color:inherit;
  position:relative;display:block;
  width:100%;height:100%;
  border-radius:12px;
  background:var(--surface);
  transition:transform .28s ease;
  cursor:pointer;
}
/* Shadow via pseudo — opacity transition is compositor-only, zero repaint */
.album-card::after{
  content:'';position:absolute;inset:0;border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.6);
  opacity:0;transition:opacity .28s ease;pointer-events:none;z-index:0;
}
.album-card:hover{transform:translateY(-2px);}
.album-card:hover::after{opacity:1;}

/* ── Full-bleed image fills entire card ── */
.album-art{position:absolute;inset:0;background:var(--surface);}
.album-art .lqip-wrap{position:absolute;inset:0;background-size:cover;background-position:center;image-rendering:pixelated;filter:blur(18px);transform:scale(1.18);will-change:opacity;}
.album-art .lqip-wrap.lqip-done{opacity:0;pointer-events:none;}
.album-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;opacity:0;}
.album-art img.loaded{opacity:1;}



.album-art .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#080808;}
.fallback-icon{width:44px;height:44px;opacity:.15;border-radius:12px;background:var(--border-hi);display:flex;align-items:center;justify-content:center;}
.fallback-icon svg{fill:var(--text2);width:22px;height:22px;}

/* ── Cinematic gradient — bottom 55% scrim, seamless blend ── */
.album-art-overlay{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to top,
      rgba(0,0,0,1)      0%,
      rgba(0,0,0,.97)    14%,
      rgba(0,0,0,.85)    28%,
      rgba(0,0,0,.52)    44%,
      rgba(0,0,0,.18)    60%,
      transparent        78%
    );
}

/* ── Top badges — float over image ── */
.album-rating-badge{
  position:absolute;top:10px;left:10px;z-index:4;
  background:rgba(0,0,0,.68);
  color:var(--accent);font-size:.6rem;font-weight:700;
  padding:3px 8px;border-radius:6px;
  border:1.5px solid rgba(245,197,24,.28);
  letter-spacing:.02em;
}
.album-badge{
  position:absolute;top:10px;right:10px;z-index:4;
  background:rgba(220,175,10,.92);color:#000;
  font-size:.52rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:50px;
}
.album-type-badge{display:inline-flex;align-items:center;font-size:.56rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:4px;}
.album-type-series{background:rgba(99,102,241,.22);color:#a5b4fc;border:1px solid rgba(99,102,241,.35);}
.album-type-movie{background:rgba(245,197,24,.12);color:var(--accent);border:1px solid rgba(245,197,24,.26);}

/* ── Info panel — lives inside card, pinned bottom, part of the image ── */
.album-info{
  position:absolute;bottom:0;left:0;right:0;z-index:4;
  padding:0 12px 14px;
  display:flex;flex-direction:column;gap:3px;
}
.album-info h3{
  font-size:.84rem;font-weight:800;line-height:1.25;
  letter-spacing:-.02em;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;
  /* Cinematic text — feels embedded in the poster image */
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.5);
  font-family:'Outfit',system-ui,sans-serif;
  mix-blend-mode:normal;
}
.album-info p{font-size:.62rem;color:rgba(255,255,255,.52);font-weight:500;margin-top:1px;text-shadow:0 1px 4px rgba(0,0,0,.9);}
.album-card-plot{font-size:.6rem;color:rgba(255,255,255,.45);line-height:1.4;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.9);}
.album-meta-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:3px;}
.album-year{font-size:.62rem;font-weight:600;color:rgba(255,255,255,.42);text-shadow:0 1px 4px rgba(0,0,0,.9);}

/* ── Hover reveal: accent underline on title ── */
.album-card:hover .album-info h3{color:var(--accent);}
.album-card{
  border: #272727 1.5px solid;
  
  overflow: hidden;
  
}

/* ── Back to top button ── */
#bttBtn{
  position:fixed;bottom:32px;right:28px;z-index:2000;
  width:42px;height:42px;border-radius:50%;
  background:rgba(10,10,10,.88);
  border:1.5px solid var(--border-hi);
  color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .25s,transform .25s,border-color .2s,color .2s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#bttBtn.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
#bttBtn:hover{border-color:var(--accent);color:var(--accent);}
#bttBtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}


/* ── Video grid ── */
.videos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:80px;}
@media(max-width:900px){.videos-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.videos-grid{grid-template-columns:1fr;}}
/* ── Video card ── */
.video-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:border-color .25s;height:100%;}
.video-card:hover{border-color:rgba(245,197,24,.3);}
/* ── Abstract art area ── */
.video-art{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--surface);}
.art-bg{position:absolute;inset:0;}
.art-glow{position:absolute;inset:0;pointer-events:none;}
.art-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(245,197,24,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(245,197,24,.04) 1px,transparent 1px);background-size:28px 28px;}
.art-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(0,0,0,.55) 100%);pointer-events:none;}
/* ── Play overlay ── */
.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease;background:rgba(0,0,0,.28);}
.video-card:hover .play-overlay{opacity:1;}
.play-circle{width:46px;height:46px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;transform:scale(.82);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;box-shadow:0 0 0 0 rgba(245,197,24,0);}
.video-card:hover .play-circle{transform:scale(1);box-shadow:0 0 28px rgba(245,197,24,.4);}
.play-circle svg{fill:#000;width:16px;height:16px;margin-left:3px;}
.dur-badge{position:absolute;bottom:7px;right:7px;background:rgba(0,0,0,.9);color:var(--text);font-size:.6rem;font-weight:600;padding:2px 6px;border-radius:5px;letter-spacing:.02em;z-index:3;}
.resume-progress-bar{position:absolute;bottom:0;left:0;height:4px;width:100%;background:rgba(255,255,255,0.18);z-index:3;overflow:hidden;pointer-events:none;}
.resume-progress-fill{height:100%;background:var(--accent);transition:width .2s;}

/* ── Top badge rows (flex containers to prevent any overlapping) ── */
.badge-row-left{position:absolute;top:7px;left:7px;display:flex;align-items:center;gap:5px;z-index:4;}
.badge-row-right{position:absolute;top:7px;right:7px;display:flex;align-items:center;gap:5px;z-index:4;}

.ep-badge{position:relative;background:rgba(0,0,0,.88);color:var(--accent);font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:5px;border:1px solid rgba(245,197,24,.25);letter-spacing:.05em;display:inline-flex;align-items:center;line-height:1.3;}
.cc-badge{background:#16a34a !important;color:#fff !important;border:1px solid rgba(34,197,94,.4) !important;font-weight:800 !important;cursor:pointer;transition:transform .15s,opacity .15s;}
.cc-badge:hover{transform:scale(1.06);opacity:.9;}
.watched-badge{position:relative;background:rgba(46,125,50,0.92);color:#fff;font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:5px;border:1px solid rgba(76,175,80,0.35);letter-spacing:.05em;display:inline-flex;align-items:center;line-height:1.3;}
.unfinished-badge{position:relative;background:rgba(230,81,0,0.92);color:#fff;font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:5px;border:1px solid rgba(230,81,0,0.35);letter-spacing:.05em;display:inline-flex;align-items:center;line-height:1.3;}

/* ── Subtitle selector modal ── */
.sub-modal-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto;margin:16px 0 6px;padding-right:4px;}
.sub-modal-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#141414;border:1.5px solid #222;padding:10px 14px;border-radius:10px;transition:border-color .18s,background .18s;}
.sub-modal-item:hover{border-color:var(--accent);background:rgba(245,197,24,.04);}
.sub-modal-item.active{border-color:#22c55e;background:rgba(34,197,94,.06);}
.sub-modal-item-title{font-size:.8rem;font-weight:600;color:#e8e8e8;word-break:break-word;line-height:1.3;}
.sub-modal-item-meta{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:.68rem;color:#777;}
.sub-modal-tag{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;font-size:.62rem;font-weight:700;text-transform:uppercase;}
.sub-modal-tag.tg{background:rgba(0,136,204,.15);color:#0088cc;border:1px solid rgba(0,136,204,.3);}
.sub-modal-tag.yify{background:rgba(46,125,50,.15);color:#4caf50;border:1px solid rgba(76,175,80,.3);}
.sub-modal-tag.subdl{background:rgba(234,88,12,.15);color:#f97316;border:1px solid rgba(249,115,22,.3);}
.sub-modal-tag.subsource{background:rgba(168,85,247,.15);color:#a855f7;border:1px solid rgba(168,85,247,.3);}
.sub-modal-tag.match{background:rgba(245,197,24,.15);color:var(--accent);border:1px solid rgba(245,197,24,.3);}
.sub-modal-select-btn{flex-shrink:0;background:var(--accent);color:#000;border:none;border-radius:6px;padding:6px 14px;font-size:.72rem;font-weight:700;cursor:pointer;transition:opacity .15s;}
.sub-modal-select-btn:hover{opacity:.85;}
.sub-modal-select-btn.active{background:#22c55e;color:#fff;cursor:default;}

/* ── Video body ── */
.video-body{padding:12px 13px 16px;flex:none;display:flex;flex-direction:column;gap:5px;min-height:0;}
.video-name{font-size:.85rem;font-weight:600;line-height:1.4;min-height:calc(.85rem * 1.4 * 3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-clamp:3;overflow:hidden;color:var(--text);word-break:break-word;overflow-wrap:break-word;}
.video-meta-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.video-quality{font-size:.68rem;font-weight:700;color:var(--accent);letter-spacing:.04em;}
.video-duration,.video-size{font-size:.68rem;font-weight:500;color:var(--text2);}
.meta-dot{font-size:.55rem;color:var(--text3);}
/* ── Play button row ── */
.play-btn-row{padding-top:10px;display:flex;gap:5px;}
.play-btn{height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:#000;font-size:.76rem;font-weight:700;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:opacity .2s;flex:1;}
.play-btn:hover{opacity:.85;}
.play-btn svg{fill:#000;width:11px;height:11px;}
.play-btn-copy{height:32px;width:32px;padding:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);cursor:pointer;transition:border-color .2s,color .2s;}
.play-btn-copy:hover{border-color:var(--border-hi);color:var(--text);}
.breadcrumb{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--text2);text-decoration:none;transition:color .2s;}
.breadcrumb:hover{color:var(--accent);}
.breadcrumb svg{stroke:currentColor;fill:none;}
.album-header{padding:20px 0 20px;border-bottom:1.5px solid var(--border);margin-bottom:20px;}
.album-header-label{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);margin-bottom:8px;}
.album-header h1{font-size:clamp(1.5rem,5vw,3rem);font-weight:900;letter-spacing:-.04em;line-height:1.05;}
.album-header-sub{font-size:.84rem;color:var(--text2);margin-top:6px;font-weight:500;}
.empty{grid-column:1/-1;padding:72px 20px;text-align:center;color:var(--text2);}
.empty-icon{width:56px;height:56px;border-radius:14px;background:var(--surface);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.empty-icon svg{stroke:var(--text2);fill:none;width:24px;height:24px;}
.empty h3{font-size:1rem;font-weight:700;color:var(--text2);margin-bottom:5px;}
.fi{opacity:0;animation:fi 1.1s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes fi{to{opacity:1;}}
.fi-skip{opacity:1!important;animation:none!important;}
/* glow orbs replaced with body pseudo — zero compositing cost vs filter:blur on fixed */
.glow-orb{display:none;}
/* ── Virtual grid promoted layer — prevents repaint on transform changes ── */
#videosGrid .video-card{will-change:transform;}
.season-tabs{display:none;align-items:center;gap:6px;padding:14px 0 0;flex-wrap:wrap;}
.season-tab{height:34px;padding:0 16px;background:transparent;border:1.5px solid var(--border);border-radius:50px;color:var(--text2);font-size:.78rem;font-weight:700;cursor:pointer;letter-spacing:.01em;transition:border-color .18s,color .18s,background .18s,transform .18s;white-space:nowrap;}
.season-tab:hover{border-color:var(--border-hi);color:var(--text);transform:translateY(-1px);}
.season-tab.active{border-color:var(--accent);color:#000;background:var(--accent);}
/* ── Poster lazy-load fade — handled by .album-art img rule above ── */
/* ── Custom alert overlay ── */
.sv-alert-overlay{position:fixed;inset:0;z-index:9900;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.sv-alert-card{background:#0d0d0d;border:1.5px solid #252525;border-radius:16px;padding:28px 28px 22px;max-width:380px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.8);}
.sv-alert-title{font-size:1rem;font-weight:800;color:#e8e8e8;margin-bottom:10px;}
.sv-alert-body{font-size:.82rem;color:#606060;line-height:1.6;margin-bottom:22px;white-space:pre-wrap;}
.sv-alert-row{display:flex;gap:10px;justify-content:flex-end;}
.sv-alert-cancel{height:38px;padding:0 18px;border-radius:8px;border:1.5px solid #1c1c1c;background:transparent;color:#606060;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;}
.sv-alert-cancel:hover{border-color:#252525;color:#e8e8e8;}
.sv-alert-confirm{height:38px;padding:0 18px;border-radius:8px;border:none;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;}
.sv-alert-confirm.danger{background:#c0392b;color:#fff;}
.sv-alert-confirm.danger:hover{background:#e74c3c;}
.sv-alert-confirm.normal{background:#f5c518;color:#000;}
.sv-alert-confirm.normal:hover{opacity:.88;}

/* Performance: content-visibility for off-screen cards */
.video-card{content-visibility:auto;contain-intrinsic-size:0 300px;}
/* Reduce paint on scroll */
#albumsGrid,#videosGrid{will-change:transform;}
/* Smooth scroll with reduced motion support */
@media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}}
/* GPU promotion for frequently animated elements */
.play-overlay,.play-circle,.album-card::after{will-change:transform,opacity;}
/* ── Custom tooltip — suppresses native, renders styled one ── */
[data-tip]{position:relative;}
[data-tip][title]{pointer-events:auto;}
/* Kill native tooltip - Positioned from BELOW by default (top: 100% + 8px) */
[data-tip]::before{content:attr(data-tip);
  position:absolute;bottom:auto;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);
  background:#111;color:var(--text);
  font-size:.68rem;font-weight:600;line-height:1.4;letter-spacing:.01em;
  white-space:nowrap;max-width:220px;white-space:normal;text-align:center;
  padding:5px 10px;border-radius:7px;
  border:1.5px solid var(--border-hi);
  box-shadow:0 8px 24px rgba(0,0,0,.7);
  pointer-events:none;z-index:9999;
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease;
}
/* Arrow - Positioned at the top edge of the box, pointing UP (border-bottom-color: #252525) */
[data-tip]::after{content:'';
  position:absolute;bottom:auto;top:calc(100% + 0px);left:50%;transform:translateX(-50%) translateY(-4px);
  border:5px solid transparent;border-bottom-color:#252525;
  pointer-events:none;z-index:9999;
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease;
}
[data-tip]:hover::before,[data-tip]:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
[data-tip]:hover::after{transform:translateX(-50%) translateY(0);}

/* Placement: top (arrow points DOWN) */
[data-tip-pos="top"]::before{top:auto;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);}
[data-tip-pos="top"]::after{top:auto;bottom:calc(100% + 0px);border-bottom-color:transparent;border-top-color:#252525;transform:translateX(-50%) translateY(4px);}
[data-tip-pos="top"]:hover::before,[data-tip-pos="top"]:hover::after{transform:translateX(-50%) translateY(0);}

/* Placement: bottom (same as default) */
[data-tip-pos="bottom"]::before{bottom:auto;top:calc(100% + 8px);transform:translateX(-50%) translateY(-4px);}
[data-tip-pos="bottom"]::after{bottom:auto;top:calc(100% + 0px);border-top-color:transparent;border-bottom-color:#252525;transform:translateX(-50%) translateY(-4px);}
[data-tip-pos="bottom"]:hover::before,[data-tip-pos="bottom"]:hover::after{transform:translateX(-50%) translateY(0);}

/* Placement: left */
[data-tip-pos="left"]::before{bottom:auto;top:50%;left:auto;right:calc(100% + 8px);transform:translateY(-50%) translateX(4px);}
[data-tip-pos="left"]::after{bottom:auto;top:50%;left:auto;right:calc(100% + 2px);border-top-color:transparent;border-left-color:#252525;transform:translateY(-50%) translateX(4px);}
[data-tip-pos="left"]:hover::before,[data-tip-pos="left"]:hover::after{transform:translateY(-50%) translateX(0);}

/* Placement: right */
[data-tip-pos="right"]::before{bottom:auto;top:50%;left:calc(100% + 8px);transform:translateY(-50%) translateX(-4px);}
[data-tip-pos="right"]::after{bottom:auto;top:50%;left:calc(100% + 2px);border-top-color:transparent;border-right-color:#252525;transform:translateY(-50%) translateX(-4px);}
[data-tip-pos="right"]:hover::before,[data-tip-pos="right"]:hover::after{transform:translateY(-50%) translateX(0);}