/* ============================================================
   KR Dev X — Components (Cards, Modals, Panels, Buttons, etc.)
   ============================================================ */

/* ==================== SCRIPT CARD ==================== */
.script-card {
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-normal);
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.script-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 20px rgba(139,92,246,0.10);
  border-color: rgba(139,92,246,0.25);
}

/* Glowing border on hover */
.script-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  background: linear-gradient(60deg, transparent 20%, #8B5CF6 40%, #A78BFA 60%, transparent 80%);
  background-size: 300% 300%;
  z-index: -1;
  border-radius: calc(var(--radius-md) + 1px);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: borderFlow 3s linear infinite;
  pointer-events: none;
}

.script-card:hover::before { opacity: 0.06; }

@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: -300% 50%; }
}

/* Card Image (16:9 Widescreen Video Standard) */
.card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  background: #0a0a14;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.card-image img {
  width: 100%; 
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.25s ease;
}

.script-card:hover .card-image img { transform: scale(1.06); }

/* Image loading skeleton */
.card-image.image-loading { pointer-events: none; }
.card-image.image-loading img { opacity: 0; }
.card-image.image-loading .card-overlay { opacity: 0; }

.card-image.image-loading::before,
.card-image.image-loading::after {
  pointer-events: none;
  z-index: 6;
}

/* Card Overlay */
.card-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.script-card:hover .card-overlay { opacity: 1; }
.card-overlay i { font-size: 2.2rem; color: white; }

/* ==================== HOVER VIDEO PREVIEW (YouTube shots) ====================
   The card "comes alive" while the pointer rests on it: 3 in-video shots
   from YouTube (img.youtube.com/vi/<id>/1..3.jpg) crossfade over the
   static thumbnail with a slow Ken Burns zoom. Zero storage on our side —
   shots stream from YouTube's CDN directly to the visitor's browser.
   Only ONE preview plays at a time; fast mouse passes (<400ms) never start.
   =================================================================== */
.hover-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  will-change: opacity;
}

.hover-preview.hp-on {
  opacity: 1;
  transition: opacity 0.35s ease;
}

.hp-shot {
  position: absolute;
  inset: -6%;                    /* slight oversize so the Ken Burns zoom never reveals edges */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.7s ease, transform 3.4s cubic-bezier(0.25, 0.6, 0.35, 1);
  will-change: opacity, transform;
}

.hp-shot.hp-show {
  opacity: 1;
}

/* Ken Burns A: gentle push-in */
.hp-shot.hp-zoom-a.hp-show { transform: scale(1.12); }
/* Ken Burns B: push-in from the other corner */
.hp-shot.hp-zoom-b.hp-show { transform: scale(1.14) translate(-1.2%, 0.8%); }

/* Soft dark scrim so badges stay readable over bright shots */
.hp-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,8,0.45) 0%, rgba(5,5,8,0.05) 45%, rgba(5,5,8,0.15) 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.hover-preview.hp-on .hp-scrim { opacity: 1; }

/* While the preview plays, dim the static thumbnail behind it */
.script-card .card-image > img {
  transition: transform 0.5s ease, opacity 0.25s ease, filter 0.4s ease;
}
.hover-preview.hp-on ~ .card-overlay { opacity: 0; } /* hide the big play glyph — the card is ALREADY showing content */

/* "Preview" pill — tells the user the card is interactive media */
.hp-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ede9fe;
  background: rgba(10, 10, 16, 0.72);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.script-card:hover .hp-badge {
  opacity: 1;
  transform: translateY(0);
}
.hp-badge i { font-size: 0.6rem; color: #a78bfa; }

/* Low-power devices: keep the static thumbnail (the animation cost of
   several crossfading layers is real on old phones via remote desktop etc.) */
@media (update: slow), (prefers-reduced-motion: reduce) {
  .hp-shot { transition: opacity 0.4s ease; }
  .hp-shot.hp-zoom-a.hp-show, .hp-shot.hp-zoom-b.hp-show { transform: none; }
}

/* Locked Card */
.script-card.locked .card-image img {
  filter: blur(4px) grayscale(0.5);
  opacity: 0.7;
}

.script-card.locked .card-overlay i.fa-lock {
  font-size: 2.2rem;
  color: white;
  opacity: 1;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.script-card.locked:hover .card-image img {
  transform: scale(1);
  filter: blur(6px) grayscale(0.6);
}

/* Badges (Compact & Modern Overlay) */
.card-badges {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 10;
  max-width: calc(100% - 16px);
  justify-content: flex-end;
}

.card-badge {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: 0.4px;
  white-space: nowrap;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.card-badge.category {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e4e4e7;
  font-weight: 700;
}

.card-badge.new {
  background: rgba(16, 185, 129, 0.95);
  color: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

.card-badge.hot {
  background: linear-gradient(135deg, #f97316 0%, #f43f5e 100%);
  color: #ffffff;
  border: 1px solid rgba(244, 63, 94, 0.35);
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35);
  animation: hotPulse 2s infinite alternate;
}

@keyframes hotPulse {
  0%   { transform: scale(1);    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35); }
  100% { transform: scale(1.05); box-shadow: 0 2px 14px rgba(244, 63, 94, 0.65); }
}

.card-badge.vip {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #ffffff;
  border: 1px solid rgba(139, 92, 246, 0.4);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

.card-badge.booster {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  color: #fff;
  border: 1px solid rgba(236, 72, 153, 0.4);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
}

/* Card Content */
.card-content {
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-description {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.card-meta span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Download counter — the digits are the one number visitors scan the grid for,
   so they get the brand violet. The icon stays the muted meta grey the date
   icon uses, which is why the colour lives on .dl-count and not the wrapper. */
.card-downloads .dl-count {
  color: #A78BFA;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(139, 92, 246, 0.35);
}

/* Card Reactions (Hidden on Grid Cards to keep layout clean & minimal; visible inside Details Modal) */
.card-reactions {
  display: none !important;
}

.card-reaction-pill:hover {
  background: rgba(139,92,246,0.08);
  border-color: rgba(139,92,246,0.2);
}

.reaction-count { font-weight: 600; }

/* Card Footer Row */
.card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

/* Price Pill */
.fl-price-pill {
  padding: 0.2rem 0.7rem;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.fl-price-pill.free {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.25);
}

.fl-price-pill.vip {
  background: rgba(241,196,15,0.12);
  color: #f1c40f;
  border: 1px solid rgba(241,196,15,0.25);
}

/* Bookmark Button */
.fl-bookmark-btn {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.82rem;
}

.fl-bookmark-btn:hover,
.fl-bookmark-btn.saved {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.3);
  color: #8B5CF6;
}

/* No Scripts */
.no-scripts {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem;
  color: var(--text-secondary);
}

.no-scripts i {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.2;
  display: block;
}

/* ==================== SKELETON CARDS ==================== */
.skeleton-block,
.skeleton-line,
.skeleton-circle,
.script-card.skeleton-card .card-image,
.card-image.image-loading::before {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.055);
}

.skeleton-block::after,
.skeleton-line::after,
.skeleton-circle::after,
.script-card.skeleton-card .card-image::after,
.card-image.image-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.08) 65%,
    rgba(255,255,255,0)    100%
  );
  animation: skeletonShimmer 1.35s linear infinite;
}

@keyframes skeletonShimmer { 100% { transform: translateX(100%); } }

.script-card.skeleton-card {
  min-height: 342px;
  cursor: progress;
  pointer-events: none;
}

.script-card.skeleton-card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255,255,255,0.07);
}

.script-card.skeleton-card::before { display: none; }
.script-card.skeleton-card .card-content { padding: 1rem; }

.skeleton-card-badges {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  display: flex;
  gap: 0.4rem;
  z-index: 10;
}

.skeleton-badge { width: 62px; height: 24px; border-radius: 6px; }
.skeleton-line  { height: 14px; border-radius: 6px; }
.skeleton-title-line { height: 18px; width: 78%; margin-bottom: 0.55rem; }
.skeleton-desc-line  { width: 100%; margin-bottom: 0.45rem; }
.skeleton-desc-line.short { width: 72%; }

.skeleton-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 0.55rem;
  margin: 0.9rem 0 0.95rem;
}

.skeleton-meta-row .skeleton-line { flex: 1; height: 13px; }
.skeleton-button { width: 100%; height: 42px; border-radius: var(--radius-sm); }

/* ==================== BOOT SKELETON (full page structure) ====================
   Replaces the old centered spinner. Shows the page's real shape — taskbar,
   hero, stats, sidebar, card grid — with a synchronized shimmer. The boot
   skeleton lives in index.html and is removed the instant renderApp draws.
   =================================================================== */
#bootSkeleton {
  min-height: 100vh;
  animation: fadeInPage 0.4s ease-out;
}

/* shared shimmer for all boot skeleton pieces */
#bootSkeleton [class^="sk-"] {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.055);
  border-radius: 8px;
}
#bootSkeleton [class^="sk-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.07) 35%,
    rgba(139,92,246,0.10) 50%,
    rgba(255,255,255,0.07) 65%,
    rgba(255,255,255,0)    100%
  );
  animation: skeletonShimmer 1.35s linear infinite;
}
/* Stagger the wave slightly per row for a premium feel */
#bootSkeleton .sk-grid [class^="sk-"]::after,
#bootSkeleton .sk-grid .script-card::after { animation-delay: 0.08s; }

/* Taskbar */
#bootSkeleton .sk-taskbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 56px;
  background: rgba(5, 5, 8, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  max-width: 1440px;
  margin: 0 auto;
}
#bootSkeleton .sk-tb-left, #bootSkeleton .sk-tb-right { display: flex; align-items: center; gap: 0.9rem; }
#bootSkeleton .sk-logo { width: 34px; height: 34px; border-radius: 10px; }
#bootSkeleton .sk-tb-link { height: 14px; border-radius: 7px; }
#bootSkeleton .sk-tb-link.w80 { width: 80px; } #bootSkeleton .sk-tb-link.w70 { width: 70px; }
#bootSkeleton .sk-tb-link.w60 { width: 60px; } #bootSkeleton .sk-tb-link.w50 { width: 50px; }
#bootSkeleton .sk-tb-link.w40 { width: 44px; }
#bootSkeleton .sk-avatar { width: 34px; height: 34px; border-radius: 50%; }

/* Layout container mirrors .dashboard-container EXACTLY */
#bootSkeleton .sk-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--spacing-md, 1rem);
}

/* Hero — same padding rhythm as .fl-hero */
#bootSkeleton .sk-hero {
  padding: 1.5rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
  text-align: center;
}
#bootSkeleton .sk-line { height: 14px; border-radius: 7px; }
#bootSkeleton .sk-line.large { height: 22px; border-radius: 8px; }
#bootSkeleton .sk-line.center { margin: 0 auto; }
#bootSkeleton .sk-line.w70c { width: 70%; max-width: 560px; }
#bootSkeleton .sk-line.w45c { width: 45%; max-width: 420px; }

/* ── Paid-ads section — 1:1 with .dashboard-top-banner ── */
#bootSkeleton .sk-ads { width: 100%; }
#bootSkeleton .sk-ads-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
#bootSkeleton .sk-ads-rule { flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
#bootSkeleton .sk-ads-text { width: 86px; height: 11px; border-radius: 5px; }
#bootSkeleton .sk-banner-full {
  width: 100%;
  height: 120px;                    /* default top banner height */
  border-radius: var(--radius-md, 14px);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.75rem;
}
#bootSkeleton .sk-banner-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
#bootSkeleton .sk-banner-half {
  height: 110px;
  border-radius: var(--radius-md, 14px);
  border: 1px solid rgba(255,255,255,0.06);
}

/* ── Stats bar — same grid as .fl-stats-bar: repeat(4,1fr) auto ── */
#bootSkeleton .sk-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 0.75rem;
  padding: 0.75rem 0;
  align-items: center;
}
#bootSkeleton .sk-stat-tile {
  height: 62px;                     /* matches real .fl-stat-tile padding rhythm */
  border-radius: var(--radius-md, 14px);
  border: 1px solid rgba(255,255,255,0.06);
}
#bootSkeleton .sk-stat-cta {
  height: 62px;
  min-width: 220px;                 /* the premium callout is a wide button */
  border-radius: var(--radius-md, 14px);
  border: 1px solid rgba(139,92,246,0.14);
}

/* Body: sidebar + grid — mirrors .content-shell EXACTLY */
#bootSkeleton .sk-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--spacing-md, 1rem);
  align-items: start;
}

/* Sidebar */
#bootSkeleton .sk-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: sticky;
  top: 72px;
}
#bootSkeleton .sk-search { height: 42px; border-radius: 10px; margin-bottom: 0.5rem; }
#bootSkeleton .sk-side-link { height: 38px; border-radius: 9px; }
#bootSkeleton .sk-side-link.w90 { width: 90%; } #bootSkeleton .sk-side-link.w85 { width: 85%; }
#bootSkeleton .sk-side-link.w80 { width: 80%; } #bootSkeleton .sk-side-link.w75 { width: 75%; }
#bootSkeleton .sk-side-link.w70 { width: 70%; } #bootSkeleton .sk-side-link.w60 { width: 60%; }

/* Card grid — mirrors .scripts-grid exactly: 3 cols default, 2 @1200, 1 @600 */
#bootSkeleton .sk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 1200px) {
  #bootSkeleton .sk-grid { grid-template-columns: repeat(2, 1fr); }
  #bootSkeleton .sk-body { grid-template-columns: 200px 1fr; }
}
@media (max-width: 900px) {
  /* Real app keeps the sidebar visible but static (stacked above the grid) */
  #bootSkeleton .sk-body { grid-template-columns: 1fr; }
  #bootSkeleton .sk-sidebar { position: static; max-height: none; }
  #bootSkeleton .sk-stats-bar { grid-template-columns: repeat(2, 1fr); }
  #bootSkeleton .sk-stat-cta { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  #bootSkeleton .sk-grid { grid-template-columns: 1fr; }
  #bootSkeleton .sk-stats-bar { grid-template-columns: 1fr 1fr; }
}

/* Real skeleton cards inside the boot grid reuse the shimmer from above */
#bootSkeleton .script-card.skeleton-card { pointer-events: none; }
#bootSkeleton .script-card.skeleton-card .card-image { background: rgba(255,255,255,0.05); }

/* ==================== RIGHT PANELS (OFFSET TO PRESERVE QUICK-ACTION DOCK) ==================== */
.right-panel {
  position: fixed;
  right: -440px;
  top: 64px;
  height: calc(100vh - 84px);
  width: 380px;
  max-width: calc(100vw - 72px);
  background: rgba(12, 12, 16, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: -8px 12px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(168, 85, 247, 0.12);
  z-index: 950;
  opacity: 0;
  pointer-events: none;
  transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-panel.active {
  right: 56px;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.right-panel-backdrop {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.right-panel-backdrop.active {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .right-panel {
    top: 56px;
    height: calc(100vh - 66px);
    width: calc(100vw - 24px);
    max-width: 400px;
  }
  .right-panel.active {
    right: 12px;
  }
}

.panel-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-header h3 {
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.close-panel {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.close-panel:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}

.panel-content {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}

.empty-state i {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  display: block;
  opacity: 0.3;
}

/* Saved Items */
.saved-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.saved-item:hover {
  background: rgba(139,92,246,0.05);
  border-color: rgba(139,92,246,0.12);
}

.saved-item img {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.saved-item-info { flex: 1; min-width: 0; }
.saved-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.saved-item-meta { font-size: 0.72rem; color: var(--text-muted); }

/* Notification Items */
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  position: relative;
}

.notification-item:hover {
  background: rgba(139,92,246,0.05);
  border-color: rgba(139,92,246,0.15);
  transform: translateX(4px);
}

.notification-item.unread {
  background: rgba(139,92,246,0.06);
}

.notif-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.notif-icon.success  { background: rgba(22,199,132,0.15); color: #4ade80; }
.notif-icon.info     { background: rgba(139,92,246,0.15);  color: var(--accent-primary); }
.notif-icon.warning  { background: rgba(255,193,7,0.15);   color: #ffc107; }
.notif-icon.error    { background: rgba(233,69,96,0.15);   color: var(--accent-danger); }
.notif-icon.upload,
.notif-icon.download,
.notif-icon.comment,
.notif-icon.like     { background: rgba(139,92,246,0.15);  color: var(--accent-primary); }

.notif-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.notif-content strong { color: var(--text-primary); font-weight: 600; font-size: 0.9rem; }
.notif-content p      { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.4; margin: 0; }
.notif-time           { font-size: 0.72rem; color: var(--text-muted); }

.unread-dot {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 7px; height: 7px;
  background: #8B5CF6;
  border-radius: 50%;
  animation: dotPulse 2s infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}

/* ==================== SCRIPT MODAL ==================== */
.script-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.script-modal.active { display: flex; opacity: 1; }
.script-modal.closing { display: flex; opacity: 0; pointer-events: none; }

.script-modal-content {
  display: flex;
  flex-direction: row;
  width: 92%;
  max-width: 1020px;
  height: auto;
  min-height: 480px;
  max-height: 85vh;
  background: rgba(11, 11, 15, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 35px rgba(139,92,246,0.12);
  transform: translateY(20px) scale(0.94);
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.35s ease;
  opacity: 0;
}

.script-modal.active .script-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.script-modal.closing .script-modal-content {
  transform: scale(0.88);
  opacity: 0;
}

/* Modal Close */
.script-modal-close {
  position: absolute;
  top: 12px; right: 16px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  cursor: pointer;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  z-index: 20;
  transition: color 0.25s ease, background 0.25s ease, transform 0.3s ease;
  transform: rotate(0deg);
}

.script-modal-close:hover {
  color: #ff3b3b;
  background: rgba(255,255,255,0.15);
  transform: rotate(90deg);
}

/* Modal Media (16:9 Widescreen Video Standard - Uncropped Full View) */
.script-modal-media {
  flex: 1.35;
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}

.modal-media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07070b;
  overflow: hidden;
}

/* Ambient glow blurred backdrop */
.modal-media-blur-bg {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  object-fit: cover;
  filter: blur(40px) brightness(0.35) saturate(1.4);
  opacity: 0.75;
  pointer-events: none;
}

/* Main uncropped 16:9 image */
.modal-media-main-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  display: block;
}

.modal-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

.action-play-btn {
  position: absolute;
  z-index: 5;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #8B5CF6;
  color: #000;
  border: none;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 25px rgba(139,92,246,0.6);
  transition: transform 0.2s, background-color 0.2s;
}

.action-play-btn:hover {
  transform: scale(1.1);
  background: #a78bfa;
}

.action-play-btn i {
  margin-left: 3px;
}

.script-modal-media iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  position: relative;
  z-index: 10;
}

/* ── Autoplay preview layer ────────────────────────────────────────────────
   The player sits above the poster and crossfades in only once YouTube
   reports real playback (.video-live on the wrapper), so the visitor never
   sees a black rectangle or a spinner where the thumbnail used to be. */
.modal-video-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.modal-media-wrapper.video-live .modal-video-frame {
  opacity: 1;
  pointer-events: auto;
}

.modal-video-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Once the video is live the poster chrome would only fight with YouTube's own
   controls, so it steps aside. */
.modal-media-wrapper.video-live .action-play-btn,
.modal-media-wrapper.video-live .media-overlay-controls,
.modal-media-wrapper.video-live .modal-media-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Sound toggle. Physical top-left on purpose: the modal close button is pinned
   top-right in both LTR and RTL, and these two must never overlap. */
.modal-sound-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 14;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 0.35s ease, background 0.2s ease, border-color 0.2s ease;
}

.modal-media-wrapper.video-live .modal-sound-btn { opacity: 1; }
.modal-sound-btn[hidden] { display: none; }
.modal-sound-btn:hover {
  background: rgba(139, 92, 246, 0.85);
  border-color: rgba(139, 92, 246, 1);
}

/* Icon-only by default; the label appears only when the browser refused our
   unmute and a real tap is the only way to get sound. */
.modal-sound-btn span { display: none; }
.modal-sound-btn.needs-tap span { display: inline; }
.modal-sound-btn.needs-tap {
  background: rgba(139, 92, 246, 0.92);
  border-color: rgba(167, 139, 250, 1);
  animation: smSoundPulse 2s ease-in-out infinite;
}

@keyframes smSoundPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
}

@media (max-width: 768px) {
  .modal-sound-btn { top: 10px; left: 10px; height: 32px; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-video-frame { transition: none; }
  .modal-sound-btn.needs-tap { animation: none; }
}

.media-overlay-controls {
  position: absolute;
  bottom: 20px; left: 20px; right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.action-icon-btns { display: flex; gap: 10px; }

.action-icon-btns button {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.2s;
}

.action-icon-btns button:hover { background: rgba(255,255,255,0.1); }

.watch-on-youtube {
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.2s;
}

.watch-on-youtube:hover {
  background: rgba(255,0,0,0.8);
  border-color: rgba(255,0,0,1);
}

/* Modal Details */
.script-modal-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: transparent;
}

.script-modal-details::-webkit-scrollbar { width: 4px; }
.script-modal-details::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.sm-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.sm-badge {
  background: rgba(0,0,0,0.55) !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

/* Promo variants — several can appear at once (NEW + HOT) */
.sm-badge.new {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #6ee7b7 !important;
}

.sm-badge.hot {
  background: rgba(244, 63, 94, 0.16) !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
  color: #fda4af !important;
}

.sm-badge.vip {
  background: rgba(139, 92, 246, 0.18) !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
  color: #c4b5fd !important;
}

.sm-title {
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.sm-description {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin: 0 0 16px 0;
  max-height: 80px;
  overflow-y: auto;
}

.sm-uploader-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sm-uploader-info { display: flex; align-items: center; gap: 10px; }

.sm-uploader-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.sm-uploader-name { font-size: 13px; font-weight: 500; color: #fff; }
.sm-uploaded-date { font-size: 12px; color: rgba(255,255,255,0.4); display: block; }

.sm-stats {
  display: flex;
  gap: 15px;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}

.sm-stats span { display: flex; align-items: center; gap: 5px; }

/* Modal Actions */
.sm-actions {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sm-btn-download {
  width: 100%;
  background: linear-gradient(135deg, #8B5CF6 0%, #f97316 100%);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(139,92,246,0.2);
}

.sm-btn-download:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(139,92,246,0.3); }
.sm-btn-download:active { transform: scale(0.98); }
.sm-btn-download:disabled { cursor: progress; opacity: 0.75; transform: none; box-shadow: none; }

.sm-secondary-actions { display: flex; gap: 10px; }
.sm-secondary-actions .sm-btn-secondary { flex: 1; }

.sm-btn-secondary {
  flex: 1;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  font-family: var(--font-family);
}

.sm-btn-secondary:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.12);
}

.sm-btn-secondary.active {
  background: rgba(139,92,246,0.1);
  color: #8B5CF6;
  border-color: rgba(139,92,246,0.25);
}

.sm-btn-secondary:disabled { cursor: progress; opacity: 0.75; }

/* Reactions */
.sm-reactions-container {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sm-section-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

.sm-section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sm-section-header-row .sm-section-title { margin-bottom: 0; }
.sm-reactions-total { font-size: 10px; color: rgba(255,255,255,0.4); }

.sm-reactions { display: flex; flex-wrap: wrap; gap: 6px; }

.sm-reaction {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 4px 8px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  transition: all 0.2s;
  font-family: var(--font-family);
}

.sm-reaction:hover, .sm-reaction.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* Comments — fixed height so the modal card never grows with comment count */
.sm-comments-container {
  padding: 24px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sm-comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  height: 220px;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  flex-shrink: 0;
}

.sm-comments-list::-webkit-scrollbar { width: 5px; }
.sm-comments-list::-webkit-scrollbar-track { background: transparent; }
.sm-comments-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}
.sm-comments-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

.sm-comment { display: flex; gap: 12px; }
.sm-comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.sm-comment-avatar-wrap {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.sm-comment-avatar-img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  position: absolute; inset: 0;
}
.sm-comment-avatar-fallback {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #25143f, #8b3dff);
  color: #fff; font-weight: 900; font-size: 0.75rem;
  position: absolute; inset: 0;
}

/* Standalone comment avatars (comments.js) */
.comment-avatar-wrap {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.comment-avatar-img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  position: absolute; inset: 0;
}
.comment-avatar-fallback {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #25143f, #8b3dff);
  color: #fff; font-weight: 900; font-size: 0.75rem;
  position: absolute; inset: 0;
}

.sm-comment-body {
  background: rgba(255,255,255,0.03);
  padding: 12px;
  border-radius: 8px;
  flex: 1;
}

.sm-comment-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.sm-comment-name  { font-size: 13px; font-weight: 600; color: #fff; }
.sm-comment-time  { font-size: 11px; color: rgba(255,255,255,0.3); }
.sm-comment-text  { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.4; word-break: break-word; }

.sm-comment-input-area {
  background: #111113;
  z-index: 10;
  padding: 16px 0 0;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.sm-comment-input-row { position: relative; display: flex; align-items: center; }

.sm-comment-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 12px 40px 12px 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  font-family: var(--font-family);
}

.sm-comment-input:focus { border-color: #8B5CF6; }

.sm-comment-submit {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #8B5CF6;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

/* Modal Loading Skeleton */
.modal-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  background: #050505;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-skeleton-media {
  flex: 1.5;
  border-right: 1px solid rgba(255,255,255,0.05);
}

.modal-skeleton-details {
  flex: 1;
  padding: 24px;
  background: #111113;
}

.modal-skeleton-badges,
.modal-skeleton-actions { display: flex; gap: 8px; margin-bottom: 18px; }

.modal-skeleton-user { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
.modal-skeleton-comments { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }

.sm-skeleton-block,
.sm-skeleton-line,
.sm-skeleton-avatar,
.sm-skeleton-button,
.modal-skeleton-media {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.055);
}

.sm-skeleton-block::after,
.sm-skeleton-line::after,
.sm-skeleton-avatar::after,
.sm-skeleton-button::after,
.modal-skeleton-media::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.08) 65%,
    rgba(255,255,255,0)    100%
  );
  animation: modalSkeletonShimmer 1.35s linear infinite;
}

@keyframes modalSkeletonShimmer { 100% { transform: translateX(100%); } }

.sm-skeleton-block { width: 84px; height: 25px; border-radius: 5px; }
.sm-skeleton-block.short { width: 58px; }
.sm-skeleton-line { width: 100%; height: 14px; border-radius: 7px; margin-bottom: 10px; }
.sm-skeleton-line.title { width: 78%; height: 24px; margin-bottom: 18px; }
.sm-skeleton-line.medium { width: 70%; }
.sm-skeleton-line.small { width: 140px; }
.sm-skeleton-line.tiny { width: 92px; height: 11px; }
.sm-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.sm-skeleton-button { height: 48px; border-radius: 8px; margin-bottom: 12px; }

/* ==================== VIP MODAL ==================== */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal.active { display: flex; }

.modal-content {
  background: #0e0e1c;
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,0.6);
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 { font-size: 1.3rem; font-weight: 700; }

.close-modal {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.close-modal:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}

/* VIP Modal Content */
.vip-modal-content {
  background: #08080f;
  border: 1px solid rgba(139,92,246,0.15);
  box-shadow: 0 0 60px rgba(0,0,0,0.9), 0 0 30px rgba(139,92,246,0.08);
  max-width: 480px;
  padding: 3rem 2rem 2rem;
  text-align: center;
}

.vip-modal-header { margin-bottom: 2.5rem; }

.crown-icon-wrapper {
  width: 75px; height: 75px;
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 0 30px rgba(139,92,246,0.35);
}

.crown-icon-wrapper i { font-size: 2.2rem; color: white; }

.vip-modal-header h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; color: white; }
.vip-modal-header p  { color: var(--text-muted); font-size: 1rem; }

.vip-description { color: var(--text-secondary); line-height: 1.6; margin-bottom: 2rem; }

.vip-actions { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 2rem; }

.btn-vip-connect {
  background: linear-gradient(135deg, #5865F2 0%, #8B5CF6 100%);
  color: white;
  border: none;
  padding: 0.95rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(88, 101, 242, 0.35);
  font-family: var(--font-family);
  width: 100%;
}

.btn-vip-connect:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
  background: linear-gradient(135deg, #4752c4 0%, #7c3aed 100%);
}

.btn-vip-recover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s;
  width: 100%;
}

.btn-vip-recover:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.vip-requirements {
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  padding: 1.25rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.vip-requirements h3 {
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: #a78bfa;
  margin-bottom: 0.875rem;
  font-weight: 800;
}

.vip-requirements ul { list-style: none; padding: 0; }

.vip-requirements li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.65rem;
  font-size: 0.88rem;
  font-weight: 500;
}

.vip-requirements li:last-child { margin-bottom: 0; }

.vip-requirements li i { color: #22c55e; font-size: 0.95rem; }

.btn-back {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0.5rem auto 0;
  transition: color 0.2s;
  font-family: var(--font-family);
}

.btn-back:hover { color: #ffffff; text-decoration: underline; }

/* ==================== UPLOAD MODAL ==================== */
.upload-modal .modal-content {
  background: #0e0e1c;
}

.modal-content form { padding: 1.5rem; }

.form-group { margin-bottom: 1.5rem; }

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.8rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: var(--font-family);
  transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: rgba(139,92,246,0.5);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}

.form-group select option { background: #0e0e1c; }
.form-group textarea { resize: vertical; min-height: 100px; }

.form-group small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.77rem;
  color: var(--text-muted);
}

.file-upload { margin-bottom: 0.4rem; }
.file-upload input[type="file"] { display: none; }

.file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(255,255,255,0.02);
  border: 2px dashed rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.file-upload-label:hover {
  border-color: rgba(139,92,246,0.4);
  background: rgba(139,92,246,0.04);
}

.file-upload-label i { font-size: 1.75rem; margin-bottom: 0.5rem; color: var(--text-muted); }

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* Upload Toggle Buttons */
.upload-toggle-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.toggle-btn {
  flex: 1;
  padding: 0.6rem 0.875rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-family);
}

.toggle-btn.active {
  background: #8B5CF6;
  color: #09090b;
  border-color: #8B5CF6;
}

.toggle-btn:hover:not(.active) {
  background: rgba(255,255,255,0.04);
  border-color: rgba(139,92,246,0.3);
}

.upload-mode { animation: fadeIn 0.3s ease; }

/* ==================== BUTTONS ==================== */
.btn-primary,
.btn-secondary {
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-family);
}

.btn-primary { background: #8B5CF6; color: #09090b; }
.btn-primary:hover { background: #6D28D9; transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.1);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}

/* ==================== LOGIN MODAL ==================== */
.login-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
}

.login-modal.active { display: flex; }

.login-card {
  background: #08080f;
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 440px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8), 0 0 40px rgba(139,92,246,0.08);
  animation: fadeIn 0.3s ease;
}

.login-logo {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
}

.login-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.login-subtitle {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.discord-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: #5865F2;
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  font-family: var(--font-family);
  box-shadow: 0 4px 15px rgba(88,101,242,0.3);
}

.discord-btn:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(88,101,242,0.4);
}

/* ==================== SIGN IN TO DOWNLOAD CARD ==================== */
.signin-download-card {
  position: relative;
  max-width: 440px;
  padding: 2.25rem 2rem;
  background: rgba(18, 18, 23, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8), 0 0 30px rgba(139,92,246,0.12);
}

.login-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.login-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.login-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.login-brand-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.2);
}

.signin-download-card .login-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}

.signin-download-card .login-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

/* Info Box */
.login-info-box {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  text-align: left;
  margin-bottom: 1.25rem;
}

.login-info-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.35rem;
}

.login-info-text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
  margin: 0;
}

/* Discord CTA button */
.signin-discord-btn {
  background: #5865F2;
  border-radius: var(--radius-sm);
  padding: 0.875rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(88, 101, 242, 0.35);
  transition: all var(--transition-fast);
}

.signin-discord-btn:hover {
  background: #4752c4;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(88, 101, 242, 0.5);
}

/* Feature List */
.login-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}

.login-feature-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.login-feature-item i {
  font-size: 0.85rem;
  width: 16px;
  text-align: center;
}

/* ==================== REPORT MODAL ====================
   Centered modal above the product card (product z-index 9999). */
.report-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.report-modal.active { display: flex; }

.report-modal-content {
  background: #111113;
  padding: 1.75rem;
  border-radius: 1rem;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.report-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin: 0;
}

.close-btn {
  background: rgba(255,255,255,0.06);
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 1.35rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}

.close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

.report-subtitle {
  color: rgba(255,255,255,0.45);
  margin: 0 0 1rem;
  font-size: 0.85rem;
}

.report-reason-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1.1rem;
}

.report-reason-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  padding: 14px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-family);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.report-reason-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

.report-reason-btn.selected {
  background: rgba(139,92,246,0.18);
  border-color: #8B5CF6;
  color: #fff;
}

.report-field-label {
  display: block;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}

.report-details-input {
  width: 100%;
  min-height: 96px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #fff;
  padding: 12px;
  font-size: 0.88rem;
  font-family: var(--font-family);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.report-details-input:focus { border-color: #8B5CF6; }
.report-details-input::placeholder { color: rgba(255,255,255,0.28); }

.report-dropzone {
  margin-top: 1rem;
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  color: rgba(255,255,255,0.55);
}

.report-dropzone:hover,
.report-dropzone.dragover {
  border-color: #8B5CF6;
  background: rgba(139,92,246,0.08);
}

.report-dropzone i {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.45);
  display: block;
  margin-bottom: 6px;
}

.report-dropzone-title {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

.report-dropzone-sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}

.report-preview {
  margin-top: 10px;
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 10px;
}

.report-preview.visible { display: flex; }

.report-preview img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

.report-preview-name {
  flex: 1;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-preview-remove {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
}

.report-actions {
  display: flex;
  gap: 10px;
  margin-top: 1.35rem;
}

.btn-cancel, .btn-submit-report {
  flex: 1;
  padding: 0.85rem 1rem;
  border-radius: 0.55rem;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.2s, opacity 0.2s;
  font-family: var(--font-family);
}

.btn-cancel {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
}

.btn-cancel:hover { background: rgba(255,255,255,0.12); color: #fff; }

.btn-submit-report {
  background: #8B5CF6;
  color: #fff;
}

.btn-submit-report:hover { background: #7C3AED; }
.btn-submit-report:disabled { opacity: 0.55; cursor: not-allowed; }

/* Legacy radio layout kept for any other callers */
.report-options { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }

.report-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,0.05);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s;
}

.report-option:hover { background: rgba(255,255,255,0.1); }
.report-option input { display: none; }
.report-option label { flex: 1; color: white; font-size: 0.9rem; cursor: pointer; }

.radio-custom {
  width: 20px; height: 20px;
  border: 2px solid #8B5CF6;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.report-option input:checked + .radio-custom::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: #8B5CF6;
  border-radius: 50%;
}

/* ==================== MODAL RESPONSIVE ==================== */
@media (max-width: 900px) {
  .script-modal-content {
    flex-direction: column;
    height: 90vh;
    overflow-y: auto;
  }

  .modal-loading-overlay { flex-direction: column; overflow-y: auto; }

  .modal-skeleton-media {
    flex: none;
    height: 40vh;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .modal-skeleton-details { flex: none; width: 100%; }

  .script-modal-media {
    flex: none;
    height: 40vh;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .script-modal-details { flex: none; width: 100%; overflow-y: visible; }
}

/* ==================== AD OVERLAY (Modal Interstitial — Adsterra) ==================== */
#adOverlay {
  position: absolute;
  inset: 0;
  z-index: 999;
  background: rgba(10, 10, 14, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-radius: 16px;
  overflow-y: auto;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Reading window: overlay is mounted but invisible and click-through for the
   first couple of seconds so the user can glance at the description. */
#adOverlay.ad-pending {
  opacity: 0;
  pointer-events: none;
}

.ad-card {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(180deg, #17171d 0%, #121217 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: adCardIn 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes adCardIn {
  from { transform: translateY(12px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.ad-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ad-sponsored {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #a1a1aa;
}
.ad-sponsored i { font-size: 0.7rem; color: #8B5CF6; }

.ad-progress-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin: 2px 0 6px;
}
.ad-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8B5CF6, #a78bfa);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}
#adOverlay.skippable .ad-progress-wrap { display: none; }

/* Ad slot — sized for a 300x250 Adsterra banner, shrinks when unconfigured */
#modalAdSlot {
  width: 300px;
  max-width: 100%;
  min-height: 250px;
  margin: 0 auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
#modalAdSlot iframe { display: block; border: 0; max-width: 100%; }

#modalAdSlot.ad-slot-empty {
  min-height: 120px;
  width: 100%;
  max-width: 340px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.72rem;
}

/* Skip button — hidden while the progress bar runs; shown when ready */
#adSkipBtn {
  width: 100%;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: inherit;
  cursor: not-allowed;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.15s, box-shadow 0.2s, background 0.25s, color 0.25s;
}
#adSkipBtn .ad-skip-go { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Skip button — active state, after the progress bar completes */
#adOverlay.skippable #adSkipBtn {
  display: inline-flex;
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
}
#adOverlay.skippable #adSkipBtn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(139, 92, 246, 0.45); }
#adOverlay.skippable #adSkipBtn:active { transform: scale(0.98); }

.ad-subtext {
  font-size: 0.72rem;
  color: #71717a;
  text-align: center;
  line-height: 1.5;
}

/* Scroll lock while the ad is up. Scoped to .ad-locked (added when the ad
   appears, removed on skip) so it no longer permanently overrides
   `overflow-y: auto` in the <=900px layout. */
.script-modal-content.ad-locked { overflow: hidden; }

/* Keep the X above the overlay so a user is never trapped behind the ad */
.script-modal-close { z-index: 1000; }

/* ==================== AD SLOT LOADING SKELETON ====================
   Shows a shimmer animation inside #modalAdSlot while the Adsterra
   iframe is still loading. The JS adds .ad-loading to the slot just
   before appending the iframe, then removes it on iframe onload.
   ================================================================= */
#modalAdSlot.ad-loading {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  overflow: hidden;
}
#modalAdSlot.ad-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(139, 92, 246, 0.07) 40%,
    rgba(139, 92, 246, 0.15) 50%,
    rgba(139, 92, 246, 0.07) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: adShimmer 1.6s ease-in-out infinite;
}
#modalAdSlot.ad-loading::after {
  content: 'Loading Ad...';
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
  pointer-events: none;
}
@keyframes adShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==================== DOWNLOAD PREPARING OVERLAY ====================
   Full-viewport overlay that shows for ~4 seconds when the user clicks
   Download, before opening the download link. Gives a premium branded
   feel instead of a raw redirect. JS creates and removes this element.
   =================================================================== */
#dlPrepOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 9, 11, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: dlOverlayIn 0.3s ease;
}
@keyframes dlOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dl-prep-card {
  background: linear-gradient(180deg, #17171d 0%, #121217 100%);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 20px;
  padding: 1.6rem 1.4rem;
  width: min(390px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(139,92,246,0.1);
  animation: dlCardIn 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes dlCardIn {
  from { transform: translateY(16px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Embedded Sponsor Slot inside Download Preparation Card */
.dl-prep-ad-slot {
  width: 100%;
  max-width: 320px;
  min-height: 270px;
  background: rgba(18, 14, 28, 0.75);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  margin: 0.2rem 0;
}
.dl-prep-ad-header {
  width: 100%;
  padding: 5px 12px;
  background: rgba(139, 92, 246, 0.12);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 700;
  color: #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dl-prep-ad-body {
  width: 100%;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.dl-prep-ad-body iframe {
  border: 0;
  display: block;
  max-width: 100%;
}
.dl-prep-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(109,40,217,0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  animation: dlIconPulse 1.6s ease-in-out infinite;
}
@keyframes dlIconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.35); }
  50%       { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
}
.dl-prep-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin: 0;
}
.dl-prep-subtitle {
  font-size: 0.8rem;
  color: #71717a;
  text-align: center;
  margin: -0.5rem 0 0;
  line-height: 1.5;
}
.dl-prep-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.dl-prep-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8B5CF6, #a78bfa);
  border-radius: 999px;
  transition: width linear;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}
/* Phase-1 "preparing" state: looping slide instead of a percentage fill */
.dl-prep-bar-indeterminate {
  width: 35% !important;
  animation: dlPrepSlide 1.1s ease-in-out infinite;
}
@keyframes dlPrepSlide {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}
.dl-prep-counter {
  font-size: 0.78rem;
  color: #8B5CF6;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dl-prep-note {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.2);
  text-align: center;
  line-height: 1.5;
}

/* ==================== UNLOCKED GLOW ==================== */
@keyframes unlockedGlow {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); background-color: #16a34a; color: #fff; border-color: #22c55e; }
  50%  { box-shadow: 0 0 20px 10px rgba(34,197,94,0); background-color: #22c55e; color: #fff; border-color: #4ade80; }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.unlocked-glow { animation: unlockedGlow 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; }

/* ============================================================
   FLOATING VERTICAL DOCK (FAR RIGHT EDGE)
   ============================================================ */
.fl-rail-root {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

/* Closed rail bar — vertical icon strip */
.fl-rail-bar {
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 6px;
  background: rgba(18, 18, 23, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  border-radius: 16px 0 0 16px;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
}

/* Individual icon button */
.fl-rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
  outline: none;
}

.fl-rail-btn i {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.18s ease, transform 0.18s ease;
}

.fl-rail-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.fl-rail-btn:hover i {
  color: #ffffff;
  transform: scale(1.1);
}

/* Expanded state — icons + panel side by side */
.fl-rail-expanded {
  display: flex;
  flex-direction: row-reverse;
  background: rgba(15, 15, 20, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: none;
  border-radius: 16px 0 0 16px;
  box-shadow: -8px 0 35px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  height: 240px;
  animation: flRailExpand 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flRailExpand {
  0%   { opacity: 0; transform: translateX(15px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Icons column inside expanded state */
.fl-rail-expanded-icons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px;
  gap: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  width: 48px;
}

/* Panel content area */
.fl-rail-panel {
  display: flex;
  flex-direction: column;
  width: 220px;
  min-width: 220px;
  height: 100%;
}

.fl-rail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 38px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.fl-rail-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

.fl-rail-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  color: rgba(255, 255, 255, 0.4);
}

.fl-rail-panel-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.fl-rail-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 4px;
}

.fl-rail-panel-body::-webkit-scrollbar { width: 3px; }
.fl-rail-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.fl-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 8px;
  margin: 2px 0;
  transition: all 0.15s;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.fl-rail-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.fl-rail-item.highlight {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  margin-bottom: 6px;
}

.fl-rail-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.fl-rail-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
}

.fl-rail-empty {
  padding: 16px 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .fl-rail-root { display: none !important; }
}

/* ============================================================
   WALL OF SHAME STYLES & SCAMMER DETAIL MODAL
   ============================================================ */
.shame-hero {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
  width: 100%;
}

.shame-icon-glow {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #ef4444;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.35);
  animation: shamePulse 2.5s infinite alternate;
}

@keyframes shamePulse {
  0%   { transform: scale(1); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); }
  100% { transform: scale(1.08); box-shadow: 0 0 35px rgba(239, 68, 68, 0.6); }
}

.shame-title {
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.shame-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 650px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.shame-stats-row {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.shame-stat-box {
  padding: 0.75rem 1.5rem;
  background: rgba(20, 20, 25, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 130px;
}

.shame-stat-number {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ef4444;
}

.shame-stat-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shame-grid-section {
  width: 100%;
  margin-top: 1.5rem;
}

.shame-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.75rem;
}

.shame-grid-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.shame-badge-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  padding: 0.25rem 0.65rem;
  border-radius: 50px;
}

.shame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.shame-card {
  background: rgba(18, 18, 22, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.shame-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ef4444, #f97316);
  opacity: 0.7;
}

.shame-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.15);
}

.shame-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.shame-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.shame-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(239, 68, 68, 0.4);
  object-fit: cover;
}

.shame-ban-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  background: #ef4444;
  border: 2px solid #111;
  border-radius: 50%;
}

.shame-user-info { flex: 1; min-width: 0; }
.shame-user-name { font-size: 0.95rem; font-weight: 700; color: #fff; line-height: 1.3; }
.shame-user-tag { font-size: 0.75rem; color: var(--text-muted); font-family: monospace; }

.shame-case-id {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  font-family: monospace;
}

.shame-card-badges {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.shame-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
}

.shame-card-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Evidence thumbnail on the list card — so a reader can see that proof exists
   (and roughly what it is) without opening the case modal first. */
.shame-card-evidence {
  position: relative;
  margin: 0.5rem 0 0.85rem;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(239, 68, 68, 0.22);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.shame-card:hover .shame-card-evidence {
  border-color: rgba(239, 68, 68, 0.5);
}

.shame-card-evidence img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.shame-card-evidence-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  padding: 0.3rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fca5a5;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  pointer-events: none;
}

.shame-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.shame-view-btn {
  color: #ef4444;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ============================================================
   SCAMMER DETAIL MODAL WITH BANNED STAMP
   ============================================================ */
.scammer-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: fadeIn 0.25s ease;
}

.scammer-modal-card {
  background: #0f0f14;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-lg);
  width: 100%;
  /* Wider than the old 580px: evidence screenshots are the point of this modal
     and chat grabs are very wide, so every extra pixel of width is extra
     legibility before the reader has to open the full-size viewer. */
  max-width: 780px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(239, 68, 68, 0.15);
  padding: 1.75rem;
}

.scammer-modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
}

.scammer-modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Tilted BANNED Stamp */
.banned-stamp-overlay {
  position: absolute;
  top: 40px; right: 40px;
  border: 3px dashed #ef4444;
  color: #ef4444;
  padding: 0.35rem 1.25rem;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  transform: rotate(-18deg);
  pointer-events: none;
  opacity: 0.85;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
  z-index: 5;
}

.scammer-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.scammer-modal-avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 2px solid #ef4444;
  object-fit: cover;
}

.scammer-modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.scammer-modal-meta {
  display: flex;
  gap: 1rem;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.scammer-modal-meta code {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.scammer-modal-case {
  margin-left: auto;
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
}

.scammer-record-box {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.scammer-record-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: #ef4444;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.scammer-record-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin-bottom: 0.6rem;
}

.scammer-record-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.scammer-evidence-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.scammer-evidence-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Evidence screenshots arrive in wildly different aspect ratios (a Discord chat
   grab is typically very wide and short — e.g. 1847x243, 7.6:1). A fixed height
   plus `object-fit: cover` cropped such images to their centre band, which for a
   dark chat screenshot is empty background — the evidence looked like a blank
   black box. `contain` shows the WHOLE screenshot, always.
   min-height + centring gives ultra-wide grabs letterbox room so the caption
   strip below never sits on top of the image itself. */
.scammer-evidence-preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
  min-height: 200px;
  padding-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.scammer-evidence-preview:hover {
  border-color: rgba(239, 68, 68, 0.55);
}

.scammer-evidence-preview img {
  width: 100%;
  height: auto;
  /* Tall grabs are capped; wide-and-short grabs are shown at full width.
     Either way the reader can click through to the full-size viewer. */
  max-height: 70vh;
  object-fit: contain;
  /* Evidence has to be legible — no dimming. */
  opacity: 1;
  display: block;
}

.scammer-evidence-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  pointer-events: none;
}

.scammer-modal-footer {
  display: flex;
  gap: 0.75rem;
}

/* Full-size evidence viewer (opened by clicking the preview) */
.evidence-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 3.25rem;
  cursor: zoom-out;
  animation: evidenceLightboxIn 0.15s ease;
}

.evidence-lightbox img {
  max-width: 96vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

.evidence-lightbox-hint {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #a1a1aa;
  pointer-events: none;
}

@keyframes evidenceLightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.scammer-appeal-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  background: #ef4444;
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background 0.2s;
}

.scammer-appeal-btn:hover {
  background: #dc2626;
}

.scammer-close-btn {
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.scammer-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ============================================================
   DISCORD VERIFICATION SUCCESS PAGE & OAUTH MODAL
   ============================================================ */
.verification-page-container {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.verification-card {
  background: rgba(18, 18, 23, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  max-width: 480px;
  width: 100%;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(34, 197, 94, 0.1);
  animation: fadeIn 0.35s ease;
}

.verification-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  border: 2px solid #22c55e;
  color: #22c55e;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
  animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes successPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.verification-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.verification-subtitle {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.verification-details-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 2rem;
}

.verification-user-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  text-align: left;
}

.verification-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #22c55e;
  object-fit: cover;
}

.verification-user-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.verification-username {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 700;
}

.verification-guild {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.verification-badge-verified {
  font-size: 0.72rem;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 0.25rem 0.6rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.verification-actions {
  display: flex;
  justify-content: center;
}

.btn-return-dashboard {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: #8B5CF6;
  color: #09090b;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.35);
}

.btn-return-dashboard:hover {
  background: #7c3aed;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.5);
}

/* Discord OAuth Modal */
.discord-oauth-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.discord-oauth-card {
  background: #18191c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  padding: 1.75rem;
  position: relative;
  animation: fadeIn 0.25s ease;
}

.discord-oauth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.discord-oauth-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.discord-oauth-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.15s;
}

.discord-oauth-close:hover { color: #fff; }

.discord-app-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.discord-app-avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #202225;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.discord-app-avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.discord-perms-list {
  background: #2f3136;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.discord-perms-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #b9bbbe;
  letter-spacing: 0.5px;
  margin-bottom: 0.875rem;
}

.discord-perm-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.discord-perm-item:last-child { margin-bottom: 0; }

.discord-perm-item div strong {
  display: block;
  font-size: 0.82rem;
  color: #dcddde;
  line-height: 1.3;
}

.discord-perm-item div small {
  font-size: 0.72rem;
  color: #72767d;
}

.discord-oauth-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.btn-oauth-cancel {
  padding: 0.625rem 1.25rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: text-decoration 0.15s;
}

.btn-oauth-cancel:hover { text-decoration: underline; }

.btn-oauth-authorize {
  padding: 0.625rem 1.5rem;
  background: #5865F2;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s;
}

.btn-oauth-authorize:hover {
  background: #4752c4;
}

/* ============================================================
   KR Dev X — Verification Required Page (Pixel-Perfect Matching)
   ============================================================ */
.vr-page-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 70px);
  padding: 2.5rem 1.25rem;
  position: relative;
  z-index: 10;
}

.vr-card {
  width: 100%;
  max-width: 480px;
  background: rgba(14, 12, 26, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 20px;
  padding: 2.5rem 2rem 2rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(139, 92, 246, 0.1);
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.vr-shield-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(88, 101, 242, 0.15);
  border: 1px solid rgba(88, 101, 242, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: #5865F2;
  font-size: 26px;
  box-shadow: 0 0 25px rgba(88, 101, 242, 0.25);
}

.vr-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

.vr-subtitle {
  font-size: 0.85rem;
  color: #a1a1aa;
  line-height: 1.5;
  margin-bottom: 1.6rem;
}

.vr-subtitle strong {
  color: #ffffff;
}

.vr-steps-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.vr-step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem 0.95rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  text-align: left;
  transition: border-color 0.2s;
}

.vr-step-item:hover {
  border-color: rgba(139, 92, 246, 0.25);
}

.vr-step-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #5865F2;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.vr-step-content {
  flex: 1;
}

.vr-step-content h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 2px 0;
}

.vr-step-content p {
  font-size: 0.73rem;
  color: #71717a;
  line-height: 1.4;
  margin: 0;
}

.vr-step-content code {
  background: rgba(88, 101, 242, 0.15);
  color: #a78bfa;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.7rem;
}

.vr-btn-discord-server {
  width: 100%;
  padding: 0.82rem 1.25rem;
  background: #5865F2;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  margin-bottom: 1rem;
  transition: all 0.2s;
  box-shadow: 0 4px 18px rgba(88, 101, 242, 0.35);
}

.vr-btn-discord-server:hover {
  background: #4752c4;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(88, 101, 242, 0.45);
}

.vr-status-box {
  padding: 0.75rem 0.95rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.vr-status-icon {
  color: #f59e0b;
  font-size: 0.85rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.vr-status-text {
  font-size: 0.73rem;
  color: #fcd34d;
  line-height: 1.45;
}

.vr-status-text strong {
  color: #fbbf24;
}

.vr-footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 1.4rem 0 1rem;
}

.vr-retry-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.vr-retry-label {
  font-size: 0.76rem;
  color: #71717a;
}

.vr-btn-login-retry {
  padding: 0.55rem 1.15rem;
  background: rgba(88, 101, 242, 0.12);
  color: #ffffff;
  border: 1px solid rgba(88, 101, 242, 0.35);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  font-family: inherit;
}

.vr-btn-login-retry:hover {
  background: #5865F2;
  border-color: #5865F2;
  transform: translateY(-1px);
}

/* ==================== ADBLOCK DETECTION WALL ====================
   Shows when the user has an ad blocker active. Overlays the
   entire viewport and blocks downloads until they disable it.
   ================================================================ */
#adblockWall {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 8, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: abwIn 0.35s ease;
}
@keyframes abwIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.abw-card {
  background: linear-gradient(180deg, #18181f 0%, #111117 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(239,68,68,0.12);
  animation: abwCardIn 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes abwCardIn {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.abw-icon {
  font-size: 2.8rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.5));
}

.abw-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
  margin: 0;
  letter-spacing: -0.3px;
}

.abw-subtitle {
  font-size: 0.83rem;
  color: #a1a1aa;
  text-align: center;
  line-height: 1.65;
  margin: -0.2rem 0 0;
  max-width: 340px;
}

.abw-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.06);
}

.abw-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.abw-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: #d4d4d8;
  line-height: 1.5;
}

.abw-step-num {
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #a78bfa;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.abw-btn-retry {
  width: 100%;
  padding: 0.85rem 1.2rem;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
  transition: transform 0.15s, box-shadow 0.2s;
  margin-top: 0.3rem;
}
.abw-btn-retry:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.5);
}
.abw-btn-retry:active { transform: scale(0.98); }

.abw-btn-retry.checking {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  box-shadow: none;
  cursor: not-allowed;
}

.abw-note {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.22);
  text-align: center;
  line-height: 1.5;
}

/* Download blocking indicator on the modal button when adblock is on */
.sm-btn-download.adblock-blocked {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: rgba(255,255,255,0.6) !important;
  cursor: not-allowed;
}

/* ============================================================
   IN-FEED NATIVE SPONSOR CARD
   Matches standard script cards with refined cyber accents.
   ============================================================ */
.script-card.is-infeed-ad,
.script-card.is-partner-card {
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: linear-gradient(180deg, #181126 0%, #120d1f 100%);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.08);
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.script-card.is-infeed-ad:hover,
.script-card.is-partner-card:hover {
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow: 0 14px 40px rgba(139, 92, 246, 0.25);
  transform: translateY(-4px);
}
.script-card.is-infeed-ad .infeed-image-slot,
.script-card.is-partner-card .partner-slot {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: rgba(15, 10, 25, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}
.script-card.is-infeed-ad .infeed-image-slot iframe,
.script-card.is-partner-card .partner-slot iframe {
  width: 300px;
  height: 250px;
  max-width: 100%;
  border: none;
  display: block;
}
.card-badge.sponsored {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.card-badge.partner {
  background: rgba(139, 92, 246, 0.25);
  color: #ddd6fe;
  border: 1px solid rgba(139, 92, 246, 0.45);
}
.fl-price-pill.sponsor-pill {
  background: rgba(245, 158, 11, 0.15);
  color: #fef08a;
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-weight: 800;
  letter-spacing: 0.6px;
}
.fl-infeed-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff !important;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
}
.fl-infeed-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
  filter: brightness(1.1);
}

/* ============================================================
   FLOATING SOCIAL BAR / CORNER SPONSOR NOTIFICATION WIDGET
   ============================================================ */
.kr-social-bar {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 48px);
  background: rgba(18, 14, 28, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 25px rgba(139, 92, 246, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  pointer-events: none;
}
.kr-social-bar.visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.kr-social-bar.closing {
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
.kr-sb-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.kr-sb-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.kr-sb-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kr-sb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 2px 7px;
  border-radius: 999px;
}
.kr-sb-status {
  font-size: 0.68rem;
  color: #a1a1aa;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kr-sb-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: sbPulse 1.8s infinite;
}
@keyframes sbPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.kr-sb-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.kr-sb-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(109, 40, 217, 0.15));
  border: 1px solid rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
  font-size: 1rem;
  flex-shrink: 0;
}
.kr-sb-details {
  flex: 1;
}
.kr-sb-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 3px 0;
  line-height: 1.3;
}
.kr-sb-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}
.kr-sb-actions {
  display: flex;
  justify-content: flex-end;
}
.kr-sb-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff !important;
  text-decoration: none;
  transition: all 0.2s;
}
.kr-sb-cta:hover {
  filter: brightness(1.12);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}
@media (max-width: 600px) {
  .kr-social-bar {
    bottom: 75px;
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
  }
}

/* ============================================================
   XP TOAST
   ============================================================ */
.xp-toast {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 10000;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #1c1917;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.4);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.xp-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   BOTTOM-LEFT LANGUAGE FLOAT (pill + SELECT A LANGUAGE menu)
   ============================================================ */
.lang-float {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 900;
}
.lang-float-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 20, 24, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f4f4f5;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: var(--font-family);
}
.lang-float-btn:hover {
  border-color: rgba(139, 92, 246, 0.45);
  color: #fff;
}
.lang-float-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.lang-float-chevron {
  font-size: 0.62rem;
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.lang-float.open .lang-float-chevron {
  transform: rotate(180deg);
}
.lang-float-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  padding: 8px;
  background: rgba(18, 18, 22, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.lang-float.open .lang-float-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.lang-float-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 6px;
}
.lang-float-head i {
  color: #a78bfa;
  font-size: 0.8rem;
}
.lang-float-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9rem;
  font-family: var(--font-family);
  cursor: pointer;
  text-align: start;
}
.lang-float-option:hover,
.lang-float-option.active {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.lang-float-option i {
  margin-left: auto;
  opacity: 0;
  color: #a78bfa;
}
.lang-float-option.active i {
  opacity: 1;
}
.lang-float-option img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.lang-float-opt-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.lang-float-opt-name {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
}
.lang-float-opt-country {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.2;
}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.lb-hero {
  text-align: center;
  padding: 36px 16px 24px;
}
.lb-hero-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  font-size: 1.6rem;
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.15);
}
.lb-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
}
.lb-subtitle {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
  margin: 0;
}
.lb-list-section {
  max-width: 720px;
  margin: 0 auto 48px;
}
.lb-loading {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 28px;
  font-size: 0.9rem;
}
.lb-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  padding: 40px 16px;
}
.lb-empty i {
  font-size: 1.8rem;
  margin-bottom: 10px;
  display: block;
  color: #fbbf24;
}
.lb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(18, 18, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lb-row:hover {
  transform: scale(1.02);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.lb-row.is-me {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.08);
}
.lb-rank {
  min-width: 42px;
  font-weight: 800;
  font-size: 0.95rem;
  text-align: center;
}
.lb-rank-1 .lb-rank { color: #c084fc; }
.lb-rank-2 .lb-rank { color: #60a5fa; }
.lb-rank-3 .lb-rank { color: #34d399; }
.lb-rank-n .lb-rank { color: rgba(255, 255, 255, 0.55); }

/* Top 3 podium rows — purple / blue / green */
.lb-rank-1 {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.28) 0%, rgba(88, 28, 135, 0.35) 55%, rgba(18, 18, 22, 0.9) 100%);
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.18), inset 0 0 0 1px rgba(168, 85, 247, 0.12);
}
.lb-rank-1 .lb-xp {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(192, 132, 252, 0.45);
  color: #e9d5ff;
}
.lb-rank-1:hover {
  border-color: rgba(192, 132, 252, 0.7);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.3);
}

.lb-rank-2 {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.28) 0%, rgba(30, 58, 138, 0.35) 55%, rgba(18, 18, 22, 0.9) 100%);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.18), inset 0 0 0 1px rgba(59, 130, 246, 0.12);
}
.lb-rank-2 .lb-xp {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(96, 165, 250, 0.45);
  color: #dbeafe;
}
.lb-rank-2:hover {
  border-color: rgba(96, 165, 250, 0.7);
  box-shadow: 0 8px 28px rgba(59, 130, 246, 0.3);
}

.lb-rank-3 {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.28) 0%, rgba(6, 78, 59, 0.35) 55%, rgba(18, 18, 22, 0.9) 100%);
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.18), inset 0 0 0 1px rgba(16, 185, 129, 0.12);
}
.lb-rank-3 .lb-xp {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(52, 211, 153, 0.45);
  color: #d1fae5;
}
.lb-rank-3:hover {
  border-color: rgba(52, 211, 153, 0.7);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.3);
}

.lb-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.lb-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lb-name {
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  flex-wrap: wrap;
}
.lb-vip {
  color: #fbbf24;
  margin-inline-start: 4px;
  font-size: 0.75rem;
}
.lb-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lb-role-owner { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.lb-role-staff { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.28); }
.lb-role-member { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); }
.lb-xp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.28);
  color: #fbbf24;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
}
.lb-xp i { font-size: 0.7rem; }

@media (max-width: 560px) {
  .lb-row { gap: 10px; padding: 10px 12px; }
  .lb-rank { min-width: 32px; font-size: 0.85rem; }
  .lb-xp { font-size: 0.72rem; padding: 5px 8px; }
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.pf-card {
  max-width: 720px;
  margin: 24px auto 48px;
  background: rgba(16, 16, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pf-banner {
  height: 140px;
  position: relative;
}
.pf-banner-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(139, 92, 246, 0.35), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 255, 255, 0.05), transparent 50%);
}
.pf-body {
  padding: 0 28px 28px;
  position: relative;
}
.pf-avatar-wrap {
  margin-top: -56px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 180deg, var(--pf-ring, #64748b), #8b5cf6, var(--pf-ring, #64748b));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  position: relative;
}
.pf-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #101014;
  display: block;
  background: #1a1a1f;
}
.pf-identity {
  margin-top: 14px;
}
.pf-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pf-name {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
}
.pf-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pf-role-owner { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
.pf-role-staff { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.pf-role-member { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); }
.pf-role-verified { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.pf-role-vip { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.4); }
.pf-sub {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.88rem;
}
.pf-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pf-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}
.pf-meta-item i {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
}
.pf-meta-item.pf-meta-vip {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.28);
  color: #fbbf24;
}
.pf-meta-item.pf-meta-vip i {
  color: #fbbf24;
}
.pf-level {
  margin-top: 22px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
}
.pf-level-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pf-level-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}
.pf-level-num {
  font-weight: 800;
  color: #a78bfa;
  font-size: 1.05rem;
}
.pf-bar-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.pf-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa, #c4b5fd);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
  transition: width 0.5s ease;
}
.pf-level-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}
.pf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.pf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  text-align: center;
}
.pf-stat i {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.95rem;
}
.pf-stat-num {
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
}
.pf-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.pf-stat-xp {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.06);
}
.pf-stat-xp i,
.pf-stat-xp .pf-stat-num {
  color: #fbbf24;
}
.pf-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.profile-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.14);
  color: #c4b5fd;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.2s ease, transform 0.15s ease;
}
.profile-back-btn:hover {
  background: rgba(139, 92, 246, 0.28);
  transform: translateY(-1px);
}
.profile-back-btn.ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
}
.profile-missing {
  text-align: center;
  padding: 72px 20px;
  max-width: 480px;
  margin: 0 auto;
}
.profile-missing i {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 16px;
}
.profile-missing h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.5rem;
}
.profile-missing p {
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 20px;
}
@media (max-width: 560px) {
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
  .pf-body { padding: 0 16px 20px; }
}