/* ==============================
   HEADER
   ============================== */

[hidden] {
  display: none !important;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
  background: transparent;
  transition: var(--transition);
}

.header.scrolled {
  background: rgba(7, 7, 15, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.logo-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  animation: logoShine 3s ease-in-out infinite;
}

@keyframes logoShine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.logo-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--accent-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Nav */
.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-glass);
  border-radius: var(--radius-full);
  padding: 4px;
  border: 1px solid var(--border-color);
}

.nav-item {
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: var(--transition);
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-glass-hover);
}

.nav-item.active {
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-glass);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.hamburger:hover {
  color: var(--text-primary);
  background: var(--bg-glass-hover);
}

/* Mobile Drawer Overlay */
.mob-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mob-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mob-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 80vw;
  z-index: 99999;
  background: linear-gradient(180deg, rgba(12,12,30,0.99), rgba(8,8,22,0.99));
  backdrop-filter: blur(32px);
  border-right: 1px solid rgba(124,58,237,0.12);
  box-shadow: 4px 0 40px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}

@keyframes mobDrawerIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes mobDrawerOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.mob-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-color);
}

.mob-drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.mob-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--bg-glass);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.mob-drawer-close:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

.mob-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mob-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  width: 100%;
}

.mob-nav-item i {
  width: 20px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
}

.mob-nav-item:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

.mob-nav-item.active {
  color: #fff;
  background: rgba(124, 58, 237, 0.2);
}

/* User Section */
.user-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-signin {
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--accent-gradient);
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25);
}

.btn-signin:hover {
  background: var(--accent-gradient-hover);
  box-shadow: 0 6px 25px rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 6px;
  border-radius: var(--radius-full);
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  transition: var(--transition);
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.user-menu-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.user-menu-chevron:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

.user-menu.open .user-menu-chevron i {
  transform: rotate(180deg);
}

.user-menu-chevron i {
  transition: transform 0.25s ease;
}

.user-menu:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-active);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #1e1538 100%);
  border: 1.5px solid rgba(129, 140, 248, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 800;
  color: #e0e7ff;
  letter-spacing: -0.2px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.user-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(129, 140, 248, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.user-menu:hover .user-avatar {
  border-color: rgba(167, 139, 250, 0.75);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 16px rgba(139, 92, 246, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: 1001;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 6px 4px;
}

.user-menu.open .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown-item {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition);
  cursor: pointer;
}

.user-dropdown-item:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

.user-dropdown-item.danger {
  color: #ef4444;
}

.user-dropdown-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* ==============================
   MAIN CONTENT
   ============================== */

.main {
  padding-top: var(--header-height);
  position: relative;
  z-index: 1;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: tabFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tabSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==============================
   TEMPLATES SECTION
   ============================== */

.templates-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* Hero Categories */
.hero-categories {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 36px auto 28px;
}

.hero-cat {
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-glass);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.2px;
  backdrop-filter: blur(12px);
}

.hero-cat:hover {
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.15);
}

.hero-cat.active {
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.35);
}

.hero-cat i {
  font-size: 16px;
}


/* Filter Bar */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.filter-group-wrap {
  display: contents;
}

.filter-scroll-hint {
  display: none;
}

.filter-group {
  display: flex;
  gap: 4px;
  background: var(--bg-glass);
  border-radius: var(--radius-sm);
  padding: 3px;
  border: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.filter-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.filter-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-glass-hover);
}

.filter-btn.active {
  color: #fff;
  background: var(--accent-gradient);
}

.search-box {
  display: flex;
  align-items: center;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 0 16px;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  transition: var(--transition);
}

.search-box:focus-within {
  border-color: var(--accent-purple);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.1);
}

.search-box i {
  flex-shrink: 0;
  color: var(--text-muted);
}

.search-box input {
  padding: 10px 12px;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  width: 100%;
}

.search-box input::placeholder {
  color: var(--text-muted);
}

/* Template Grid */
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .template-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.template-card {
  background: var(--bg-card);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  backdrop-filter: blur(10px);
}

.template-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-active);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow), var(--shadow);
}

.template-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 5;
  padding-top: 83.333%;
  background: var(--bg-secondary);
  overflow: hidden;
}

.template-preview video,
.template-preview img,
.template-preview canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.template-preview canvas {
  display: block;
}

.template-type-badge {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  color: #7bc8ff;
  border: 1px solid rgba(123, 200, 255, 0.25);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.template-action-btn:hover {
  background: var(--accent-gradient-hover);
  transform: scale(1.02);
}

.template-action-btn.outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
}

.template-action-btn.outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}

/* ==============================
   NO RESULTS
   ============================== */

.no-results {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
}

.no-results-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--text-muted);
}

.no-results h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.no-results p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
}

/* Pagination */
.pagination {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 0 8px;
}

.page-btn {
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-glass);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  transition: var(--transition);
}

.page-btn:hover {
  border-color: var(--accent-purple);
  color: var(--accent-purple-light);
  background: rgba(124,58,237,0.06);
}

.page-btn.page-active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  cursor: default;
}

.page-btn.page-prev,
.page-btn.page-next {
  font-size: 12px;
  padding: 0 12px;
}

/* ==============================
   FAVORITES, HISTORY, CONTACT, ABOUT
   ============================== */

.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 40px 24px;
}

.coming-soon-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 32px;
}

.coming-soon h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  background: var(--accent-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.coming-soon p {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 400px;
  line-height: 1.5;
}

/* ==============================
   MODAL
   ============================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-overlay.open /* ---------------------------------------
   MM MODAL - PREMIUM REDESIGN
   --------------------------------------- */

.premium-modal {
  width: 80vw;
  max-height: 92vh;
  margin: 0 auto;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(20,20,48,0.97) 0%, rgba(12,12,32,0.98) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(124, 58, 237, 0.15);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Inter', -apple-system, sans-serif;
}

.modal-overlay.open .premium-modal {
  transform: scale(1);
  opacity: 1;
}

.mm-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 0;
}

/* Glass Panels Base */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

/* -------------------
   LEFT MEDIA SECTION
   ------------------- */
.mm-media-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.mm-header-glass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 100%);
  z-index: 10;
}

.mm-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mm-type-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(124, 58, 237, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #a78bfa;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.mm-header-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mm-name {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.mm-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.mm-owner {
  color: var(--accent-primary);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.mm-sep {
  color: rgba(255, 255, 255, 0.3);
}

.mm-date {
  color: rgba(255, 255, 255, 0.5);
}

.mm-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mm-reaction-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mm-reaction-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-1px);
}

.mm-reaction-btn.active {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
}

.mm-reaction-btn.active i {
  color: #f87171;
}

.mm-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mm-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: rotate(90deg);
}

.mm-media-content {
  display: flex;
  flex: 1;
  padding: 0 24px 24px;
  gap: 20px;
  min-height: 0;
  align-items: center;
}

.mm-preview-col, .mm-upload-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mm-preview-wrap, .mm-upload-area {
  width: 100%;
  aspect-ratio: 6 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: 14px;
}

.mm-preview-wrap video, .mm-preview-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.mm-modal-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255,255,255,0.35);
  position: absolute;
  inset: 0;
  background: var(--bg-secondary);
  z-index: 1;
  border-radius: 14px;
}
.mm-modal-fallback .ht-media-error-icon {
  font-size: 42px;
}

.mm-upload-area {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.2);
}

.mm-upload-area:hover {
  border-color: var(--accent-primary);
  background: rgba(124, 58, 237, 0.08);
  box-shadow: inset 0 0 24px rgba(124, 58, 237, 0.1);
}

.mm-upload-dragover {
  border-color: var(--accent-primary) !important;
  background: rgba(124, 58, 237, 0.15) !important;
  box-shadow: 0 0 32px rgba(124, 58, 237, 0.2), inset 0 0 32px rgba(124, 58, 237, 0.15) !important;
}

.mm-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.mm-upload-default, .mm-upload-drop-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mm-upload-drop-hint .mm-upload-icon-wrap {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.mm-drop-icon {
  animation: mmDropBounce 1s ease-in-out infinite;
}

@keyframes mmDropBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.mm-upload-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.mm-upload-area:hover .mm-upload-icon-wrap {
  color: var(--accent-primary);
  transform: scale(1.1);
  background: rgba(124, 58, 237, 0.15);
}

.mm-upload-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.mm-upload-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.mm-upload-limits {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 4px;
}

.mm-upload-browse-btn {
  margin-top: 12px;
  padding: 10px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mm-upload-browse-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.mm-upload-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.mm-upload-preview img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.mm-upload-remove {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  transition: all 0.2s ease;
  font-size: 16px;
}

.mm-upload-remove:hover {
  transform: scale(1.15) rotate(90deg);
  background: rgb(248, 113, 113);
}

/* -------------------
   MEDIA DIVIDER & HEADERS
   ------------------- */

.mm-col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mm-col-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
  font-size: 14px;
}

.mm-media-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 48px;
  padding-top: 36px;
}

.mm-divider-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent);
}

.mm-divider-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  margin: 12px 0;
}

.mm-divider-arrow {
  animation: mmArrowPulse 2s ease-in-out infinite;
}

@keyframes mmArrowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); color: var(--accent-purple-light, #a78bfa); border-color: rgba(124, 58, 237, 0.3); }
}

/* -------------------
   RIGHT CONTROLS SECTION
   ------------------- */
.mm-controls-section {
  width: 440px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 14px;
  overflow: hidden;
  max-height: 100%;
}

.mm-desc-box {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 12px;
  margin-bottom: 0;
  color: rgba(240, 240, 240, 0.8);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 300;
}

.mm-desc-box i {
  color: var(--accent-primary);
  font-size: 16px;
  margin-top: 2px;
}

.mm-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}

.mm-setting-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mm-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
}

.mm-segmented-control {
  display: flex;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mm-seg-btn {
  flex: 1;
  margin: 0 2px;
  padding: 8px 4px;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mm-seg-btn:hover:not(:disabled):not(.active) {
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.14));
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mm-seg-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.mm-seg-btn:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.7);
  outline-offset: 2px;
}

.mm-seg-btn.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.85), rgba(236, 72, 153, 0.85));
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45), 0 2px 6px rgba(236, 72, 153, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transform: scale(1.02);
}

/* --- Cost change animations --- */
@keyframes costTextGlowUp {
  0% { transform: scale(1); text-shadow: 0 0 0px transparent; color: inherit; }
  40% { transform: scale(1.06); text-shadow: 0 0 20px rgba(250,204,21,0.5), 0 0 40px rgba(250,204,21,0.2); color: #fde047; }
  70% { transform: scale(1.03); text-shadow: 0 0 10px rgba(250,204,21,0.3); color: #fde047; }
  100% { transform: scale(1); text-shadow: 0 0 0px transparent; color: inherit; }
}
@keyframes costTextGlowDown {
  0% { transform: scale(1); text-shadow: 0 0 0px transparent; color: inherit; }
  40% { transform: scale(1.06); text-shadow: 0 0 20px rgba(96,165,250,0.5), 0 0 40px rgba(96,165,250,0.2); color: #93c5fd; }
  70% { transform: scale(1.03); text-shadow: 0 0 10px rgba(96,165,250,0.3); color: #93c5fd; }
  100% { transform: scale(1); text-shadow: 0 0 0px transparent; color: inherit; }
}
.cost-text-up {
  animation: costTextGlowUp 0.5s ease-out;
}
.cost-text-down {
  animation: costTextGlowDown 0.5s ease-out;
}

.mm-cost-diff {
  position: absolute;
  top: -18px;
  right: -8px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: none;
}
.mm-cost-diff.show-up {
  opacity: 1;
  animation: diffUp 1s ease-out forwards;
}
.mm-cost-diff.show-down {
  opacity: 1;
  animation: diffDown 1s ease-out forwards;
}
@keyframes diffUp {
  0% { opacity: 1; transform: translateY(4px) scale(0.8); background: rgba(250,204,21,0.2); color: #fde047; }
  30% { opacity: 1; transform: translateY(-8px) scale(1.1); background: rgba(250,204,21,0.25); color: #facc15; }
  100% { opacity: 0; transform: translateY(-24px) scale(0.9); background: rgba(250,204,21,0.1); color: #fde047; }
}
@keyframes diffDown {
  0% { opacity: 1; transform: translateY(-4px) scale(0.8); background: rgba(96,165,250,0.2); color: #93c5fd; }
  30% { opacity: 1; transform: translateY(8px) scale(1.1); background: rgba(96,165,250,0.25); color: #60a5fa; }
  100% { opacity: 0; transform: translateY(24px) scale(0.9); background: rgba(96,165,250,0.1); color: #93c5fd; }
}

.mm-cost-indicator {
  position: relative;
}

.mm-cost-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mm-seg-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.mm-seg-btn.mm-fpsbtn-disabled {
  position: relative;
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.8);
  text-decoration-thickness: 2px;
  transform: scale(0.96);
}
.mm-seg-btn.mm-fpsbtn-disabled::after {
  content: '\f023';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: -5px;
  right: -2px;
  width: 15px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  color: #fecaca;
  background: rgba(239, 68, 68, 0.85);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

.mm-pipeline-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 8px;
}

.mm-pipeline-container::-webkit-scrollbar {
  width: 4px;
}

.mm-pipeline-container::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.4);
  border-radius: 4px;
}

.mm-psection-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

#mmPipelineToggles {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mm-ptoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
}

.mm-ptoggle:hover:not(.mm-pdisabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(4px);
}

.mm-pinfo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mm-picon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.mm-ptoggle:hover:not(.mm-pdisabled) .mm-picon {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.mm-ptexts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mm-plabel {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.mm-pdesc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.mm-pdisabled {
  opacity: 0.4;
}

.mm-plocked {
  opacity: 0.85;
  border-left: 2px solid var(--accent);
}
.mm-plocked .mm-slider {
  cursor: not-allowed;
  background-color: rgba(255, 255, 255, 0.15) !important;
}
.mm-plocked .mm-sinput:checked + .mm-slider {
  background: var(--accent-gradient) !important;
  opacity: 0.7;
}

.mm-pright {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mm-pcost {
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Switches */
.mm-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.mm-sinput {
  opacity: 0;
  width: 0;
  height: 0;
}

.mm-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  transition: .3s;
}

.mm-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: .3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.mm-sinput:checked + .mm-slider {
  background: var(--accent-gradient);
}

.mm-sinput:checked + .mm-slider:before {
  transform: translateX(20px);
}

/* Action Area (Fixed/Sticky at Bottom) */
.mm-action-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  z-index: 10;
}

.mm-cost-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.mm-cost-icon {
  color: #fbbf24;
}

.mm-generate-btn {
  position: relative;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: var(--accent-gradient);
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.mm-generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.6);
}

.mm-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.mm-generate-btn.mm-btn-insufficient {
  position: relative;
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.55), rgba(124, 58, 237, 0.35));
  color: #ffd9d9;
}

.mm-generate-btn.mm-btn-busy {
  position: relative;
  opacity: 0.85;
  cursor: not-allowed;
  transform: none;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(217, 119, 6, 0.3), rgba(124, 58, 237, 0.35)) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #fef3c7 !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.2) !important;
}

.mm-generate-btn.mm-btn-busy i {
  color: #fbbf24;
}

.mm-gen-block-overlay {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  z-index: 5;
  cursor: not-allowed;
  background: transparent;
}

.mm-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--accent-primary);
  font-size: 14px;
  font-weight: 600;
}

.mm-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(124, 58, 237, 0.2);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: mm-spin 1s linear infinite;
}

@keyframes mm-spin {
  to { transform: rotate(360deg); }
}

/* RESULT OVERLAY */
.mm-result {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(24px);
  border-radius: 24px;
  padding: 24px;
}

.mm-result-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mm-result-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.mm-result-box {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

#mmResultVideo, #mmResultImage {
  width: 100%;
  max-height: 60vh;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  background: #000;
}

.mm-result-actions {
  display: flex;
  gap: 16px;
  width: 100%;
}

.mm-rbtn {
  flex: 1;
  padding: 14px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mm-rbtn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mm-rbtn.primary {
  background: var(--accent-gradient);
  border: none;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
}

.mm-rbtn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.5);
}

.mm-result-error {
  text-align: center;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.mm-error-icon {
  font-size: 64px;
  color: #f87171;
  margin-bottom: 8px;
}

#mmErrorText {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   GENERATE MODAL - MOBILE MASTER RESPONSIVE SUITE (< 900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .premium-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 94vh !important;
    max-height: 94vh !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: translateY(20px) scale(1) !important;
  }

  .modal-overlay.open .premium-modal {
    transform: translateY(0) scale(1) !important;
  }

  .mm-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Sticky Modal Header (Perfect End-to-End Spread) */
  .mm-header-glass {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    background: rgba(12, 12, 30, 0.96) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .mm-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .mm-type-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .mm-header-titles {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .mm-name {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  .mm-header-meta {
    font-size: 10.5px !important;
    opacity: 0.75 !important;
  }

  .mm-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }

  .mm-reaction-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
    border-radius: 14px !important;
    gap: 5px !important;
  }

  .mm-close-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
  }

  /* Media Section (Upload & Preview) */
  .mm-media-section {
    border-right: none !important;
    width: 100% !important;
    flex: none !important;
  }

  .mm-media-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 16px !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mm-upload-col,
  .mm-preview-col {
    width: 100% !important;
    flex: none !important;
  }

  .mm-col-header {
    margin-bottom: 6px !important;
    font-size: 11px !important;
  }

  .mm-col-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /* Preview Container - PRESERVES TRUE ASPECT RATIO, ZERO CROPPING */
  .mm-preview-wrap {
    width: 100% !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 180px !important;
    max-height: 340px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .mm-preview-wrap video,
  .mm-preview-wrap img {
    width: 100% !important;
    height: auto !important;
    max-height: 340px !important;
    object-fit: contain !important; /* Never crop top/bottom or sides */
    border-radius: 12px !important;
  }

  .mm-upload-area {
    width: 100% !important;
    aspect-ratio: auto !important;
    min-height: 130px !important;
    max-height: 220px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mm-upload-preview img {
    max-height: 200px !important;
    object-fit: contain !important;
  }

  .mm-upload-placeholder {
    padding: 12px 10px !important;
    gap: 4px !important;
  }

  .mm-upload-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    margin-bottom: 2px !important;
  }

  .mm-upload-title {
    font-size: 13px !important;
  }

  .mm-upload-hint {
    font-size: 11px !important;
  }

  .mm-upload-limits {
    font-size: 9.5px !important;
  }

  .mm-upload-browse-btn {
    margin-top: 4px !important;
    padding: 5px 16px !important;
    font-size: 11.5px !important;
  }

  /* Horizontal Divider with down arrow on mobile */
  .mm-media-divider {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 2px 0 !important;
  }

  .mm-divider-line {
    flex: 1 !important;
    height: 1px !important;
    width: auto !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent) !important;
  }

  .mm-divider-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
    margin: 0 8px !important;
    transform: rotate(90deg) !important;
  }

  /* Controls Section (Quality, FPS, Duration, Pipeline) */
  .mm-controls-section {
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    flex: none !important;
    gap: 12px !important;
  }

  .mm-desc-box {
    padding: 8px 12px !important;
    font-size: 11.5px !important;
    border-radius: 10px !important;
  }

  .mm-settings-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .mm-setting-group {
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  .mm-label {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }

  .mm-segmented-control {
    width: 100% !important;
    display: flex !important;
    gap: 4px !important;
  }

  .mm-seg-btn {
    flex: 1 !important;
    padding: 6px 4px !important;
    font-size: 11.5px !important;
  }

  /* Pipeline Toggles */
  .mm-pipeline-container {
    width: 100% !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  .mm-ptoggle {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .mm-picon {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }

  .mm-plabel {
    font-size: 12.5px !important;
  }

  .mm-pdesc {
    font-size: 11px !important;
  }

  /* Sticky Bottom Action Bar */
  .mm-action-area {
    position: sticky !important;
    bottom: 0 !important;
    background: rgba(10, 10, 26, 0.97) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    margin: 10px -16px 0 !important;
    border-top: 1px solid rgba(124, 58, 237, 0.3) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6) !important;
    z-index: 40 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .mm-cost-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    width: fit-content !important;
  }

  .mm-cost-icon {
    color: #fbbf24 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
  }

  .mm-cost-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #fff !important;
  }

  .mm-cost-text span {
    color: #fbbf24 !important;
    font-weight: 700 !important;
  }

  .mm-generate-btn {
    height: 46px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    width: 100% !important;
  }

  /* Result Overlay */
  [hidden],
  .mm-result[hidden],
  #mmResult[hidden] {
    display: none !important;
  }

  .mm-result:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-y: auto !important;
    background: rgba(8, 8, 22, 0.96) !important;
  }

  .mm-result-box {
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
  }

  #mmResultVideo, #mmResultImage {
    max-height: 50vh !important;
  }

  .mm-result-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .mm-rbtn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: 0 10px;
  }

  .logo-mark {
    width: 32px;
    height: 32px;
  }

  .user-points {
    font-size: 11px;
    gap: 3px;
  }

  .user-points i {
    font-size: 11px !important;
  }

  .user-points span {
    font-size: 11px;
  }

  .header .btn-signin {
    font-size: 11px;
    padding: 6px 10px;
  }

  .header .btn-signin i {
    font-size: 11px;
  }

  .template-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .mm-upload-col { padding: 12px; }
  .mm-preview-col { padding: 12px; }

  .auth-glass {
    max-width: 96vw;
    padding: 24px 18px 20px;
    border-radius: 18px;
  }

  .auth-title { font-size: 22px; }
  .auth-subtitle { font-size: 13px; }
  .auth-glass-close { top: 10px; right: 10px; }

  .acc-drawer {
    width: 100vw;
  }

  .acc-body {
    padding: 12px;
  }

  .acc-header {
    padding: 16px 12px 14px;
  }

  .acc-header-left {
    gap: 10px;
  }

  .acc-name { font-size: 15px; }
  .acc-email { font-size: 12px; }

  .acc-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .acc-stat { padding: 12px; }
  .acc-stat-value { font-size: 18px; }

  .acc-quick-grid {
    grid-template-columns: 1fr;
  }

  .acc-referral-code-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .acc-referral-code {
    text-align: center;
  }

  .footer-inner {
    padding: 40px 16px 24px;
  }

  .legal-content {
    padding: 20px 14px;
    font-size: 14px;
  }

  .legal-content h1 { font-size: 20px; }
  .legal-back { padding: 12px 14px; }

  .ht-card .ht-bottom {
    padding: 8px 10px;
  }

  .ht-meta {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
  }

  .ht-points, .ht-likes, .ht-date {
    font-size: 11px;
  }

  .template-card {
    border-radius: 14px;
  }

  .template-name-tag {
    font-size: 14px;
  }

  .template-top-bar {
    padding: 10px;
  }

  .template-bottom-bar {
    padding: 32px 10px 10px;
  }

  .template-like-display,
  .template-fav-btn,
  .template-type-badge,
  .template-points-label {
    padding: 4px 10px;
    font-size: 10px;
    gap: 4px;
  }

  .template-type-badge i,
  .template-like-display i,
  .template-fav-btn i,
  .template-points-label i {
    font-size: 9px;
  }

  .template-owner-label {
    font-size: 10px;
  }

  .template-hover-overlay {
    display: none;
  }

  .verified-badge {
    width: 14px;
    height: 14px;
    font-size: 8px;
  }
}

/* ==============================
   HERO SECTION
   ============================== */

.hero-section {
  position: relative;
  overflow: hidden;
  padding: 60px 24px 24px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}



.hero-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -1.2px;
  color: var(--text-primary);
  animation: heroFadeDown 0.6s ease both;
}

.hero-highlight {
  background: linear-gradient(135deg, #a78bfa, #60a5fa, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--text-muted);
  max-width: 700px;
  margin: 16px auto 0;
  line-height: 1.6;
  font-weight: 400;
  animation: heroFadeDown 0.6s ease both;
  animation-delay: 0.2s;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

@keyframes heroFadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==============================
   SKELETON LOADING
   ============================== */

.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.skeleton-preview {
  width: 100%;
  padding-top: 56.25%;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.skeleton-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.06), transparent);
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

.skeleton-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: var(--bg-glass);
  position: relative;
  overflow: hidden;
}

.skeleton-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.08), transparent);
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-35 { width: 35%; }

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

/* ==============================
   PREMIUM CARD ENHANCEMENTS
   ============================== */

.template-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: cardFadeIn 0.5s ease forwards;
  border: 1px solid var(--border-color);
  background: transparent;
}

.template-card:hover {
  border-color: var(--accent-purple);
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 0 40px rgba(124, 58, 237, 0.2),
    0 8px 50px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(124, 58, 237, 0.05);
}

.template-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 5;
  padding-top: 83.333%;
  background: var(--bg-secondary);
  overflow: hidden;
}

.template-preview video,
.template-preview img,
.template-preview canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.template-preview canvas {
  display: block;
}

/* ==============================
   HERO SECTION
   ============================== */

.hero-section {
  position: relative;
  overflow: hidden;
  padding: 60px 24px 24px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}



.hero-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -1.2px;
  color: var(--text-primary);
  animation: heroFadeDown 0.6s ease both;
}

.hero-highlight {
  background: linear-gradient(135deg, #a78bfa, #60a5fa, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--text-muted);
  max-width: 700px;
  margin: 16px auto 0;
  line-height: 1.6;
  font-weight: 400;
  animation: heroFadeDown 0.6s ease both;
  animation-delay: 0.2s;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

@keyframes heroFadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==============================
   SKELETON LOADING
   ============================== */

.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.skeleton-preview {
  width: 100%;
  padding-top: 56.25%;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.skeleton-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.06), transparent);
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

.skeleton-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: var(--bg-glass);
  position: relative;
  overflow: hidden;
}

.skeleton-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.08), transparent);
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-35 { width: 35%; }

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

/* ==============================
   PREMIUM CARD ENHANCEMENTS
   ============================== */

.template-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: cardFadeIn 0.5s ease forwards;
  border: 1px solid transparent;
  background: transparent;
}

.template-card:hover {
  border-color: var(--accent-purple);
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 0 40px rgba(124, 58, 237, 0.2),
    0 8px 50px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(124, 58, 237, 0.05);
}

.template-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 5;
  padding-top: 83.333%;
  background: #0b0914;
  overflow: hidden;
}

/* Full container modern blur + animated aurora glass loader */
.template-skeleton-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(124, 58, 237, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(168, 85, 247, 0.2) 0%, transparent 55%),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(147, 51, 234, 0.12) 35%,
      rgba(192, 132, 252, 0.22) 50%,
      rgba(147, 51, 234, 0.12) 65%,
      rgba(255, 255, 255, 0.01) 100%
    );
  background-size: 100% 100%, 100% 100%, 260% 100%;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: templateAuroraPulse 3s ease-in-out infinite alternate, templateSkeletonWave 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

@keyframes templateSkeletonWave {
  0% { background-position: 0% 0%, 0% 0%, 200% 0; }
  100% { background-position: 0% 0%, 0% 0%, -200% 0; }
}

@keyframes templateAuroraPulse {
  0% { opacity: 0.7; filter: blur(0px); }
  50% { opacity: 1; filter: blur(1px); }
  100% { opacity: 0.75; filter: blur(0px); }
}

/* Hide skeleton loader once media finishes loading or error */
.template-preview:has(video.loaded) .template-skeleton-loader,
.template-preview:has(img.loaded) .template-skeleton-loader,
.template-preview:has(.ht-media-error) .template-skeleton-loader,
.template-preview:has(.template-no-preview) .template-skeleton-loader {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.template-no-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.template-no-preview i {
  font-size: 24px;
  opacity: 0.4;
}

.template-preview video,
.template-preview img,
.template-preview canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), filter 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.template-preview video.loaded,
.template-preview img.loaded,
.template-preview canvas {
  opacity: 1;
  filter: blur(0px);
}

.template-preview canvas {
  display: block;
}

.template-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.template-top-bar * {
  pointer-events: auto;
}

.template-card:hover .template-top-bar {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.template-card:hover .template-top-bar * {
  pointer-events: none;
}

.template-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.template-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.template-type-badge.video {
  color: #7dd3fc;
}
.template-type-badge.video i {
  color: #7dd3fc;
}

.template-type-badge.image {
  color: #6ee7b7;
}
.template-type-badge.image i {
  color: #6ee7b7;
}

/* Premium Glassmorphic Sample Input Card (positioned at top-left) */
.template-sample-input-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.35s ease, transform 0.35s ease;
  width: 74px;
  height: 74px;
}

.template-sample-input-badge::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(124, 58, 237, 0.25);
  border-top-color: #7c3aed;
  animation: templateSampleSpin 0.8s linear infinite;
}

.template-sample-input-badge:has(img.loaded)::before,
.template-sample-input-badge:has(img.error)::before {
  display: none;
}

.template-sample-input-badge img {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  max-width: 72px;
  max-height: 72px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
  opacity: 0;
}

.template-sample-input-badge img.loaded,
.template-sample-input-badge img.error {
  opacity: 1;
}

.template-sample-input-badge img.error {
  filter: grayscale(1) brightness(0.6);
}

.template-card:hover .template-sample-input-badge {
  opacity: 0;
  transform: translateY(-10px) scale(0.92);
  pointer-events: none;
}

@keyframes templateSampleSpin {
  to { transform: rotate(360deg); }
}

.template-like-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.template-like-display.liked {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.template-like-display.liked i {
  color: #f87171;
}

.template-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.template-fav-btn:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.template-fav-btn.active {
  background: rgba(234, 179, 8, 0.2);
  border-color: rgba(234, 179, 8, 0.4);
  color: #facc15;
}

.template-fav-btn.active i {
  color: #facc15;
}

.template-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 36px 8px 8px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  pointer-events: none;
}

.template-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 70%;
}

.template-name-tag {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.template-owner-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 4px;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  color: #fff;
  font-size: 8px;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

.mm-owner.verified {
  color: #60a5fa;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.template-points-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(234, 179, 8, 0.05));
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #fde047;
  backdrop-filter: blur(8px);
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.15);
}

.template-points-label i {
  color: #fbbf24;
}

/* Favorited card highlight in favorites tab */
#tab-favorites .template-card {
  border-color: rgba(234, 179, 8, 0.25);
}

#tab-favorites .template-card .template-fav-btn.active {
  background: rgba(234, 179, 8, 0.4);
  border-color: #eab308;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.3);
}

.template-fav-btn:disabled,
.mm-reaction-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

/* Hover overlay & Card Glow */
.template-card {
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.template-card:hover {
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.3), 0 0 0 1px rgba(167, 139, 250, 0.4);
  transform: translateY(-4px);
}

/* Hover action bar — media stays fully visible, actions slide in at the bottom */
.template-hover-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.85) 100%);
  opacity: 0;
  transform: translateY(14px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.template-card:hover .template-hover-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.template-bottom-bar {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.template-card:hover .template-bottom-bar {
  opacity: 0;
  transform: translateY(10px);
}

.template-hover-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.82), rgba(147, 51, 234, 0.82));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none !important;
  outline: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
  transition: all 0.25s ease;
  opacity: 0.92;
}

.template-hover-btn i {
  font-size: 13px;
  transition: transform 0.3s ease;
}

.template-hover-btn:hover {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.95), rgba(126, 34, 206, 0.95));
  opacity: 1;
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.6);
  transform: translateY(-2px);
}

.template-hover-btn:hover i {
  transform: rotate(15deg) scale(1.1);
}

.template-hover-btn.report-btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  box-shadow: none;
}

.template-hover-btn.report-btn:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.35);
  box-shadow: none;
}

/* Mute toggle — template grid (shown on hover) */
.template-mute-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.template-card:hover .template-mute-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.template-mute-btn:hover {
  background: rgba(255, 255, 255, 0.7);
}

.template-mute-btn:hover i {
  color: rgba(0, 0, 0, 0.7);
}

/* Play/stop — template grid (shown on hover, video only) */
.template-play-btn {
  position: absolute;
  top: 12px;
  right: 52px;
  z-index: 6;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.template-card:hover .template-play-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.template-play-btn:hover {
  background: rgba(255, 255, 255, 0.7);
}

.template-play-btn:hover i {
  color: rgba(0, 0, 0, 0.7);
}

body.grid-autoplay-enabled .template-play-btn {
  display: none !important;
}

/* Mute toggle — generate modal (always visible) */
.mm-mute-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.3s ease;
}

.mm-mute-btn:hover {
  background: rgba(255, 255, 255, 0.7);
}

.mm-mute-btn:hover i {
  color: rgba(0, 0, 0, 0.7);
}

.mm-play-btn {
  right: 60px;
}

@keyframes cardFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tg-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  grid-column: 1 / -1;
}
.tg-spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,0.06);
  border-top-color: var(--accent-purple);
  border-radius: 50%;
  animation: tgSpin 0.7s linear infinite;
}
@keyframes tgSpin {
  to { transform: rotate(360deg); }
}

/* ==============================
   SECTION HEADER REFINEMENT
   ============================== */

.ts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ts-count {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ==============================
   AUTH MODALS - Premium Redesign
   ============================== */

.auth-glass {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(20, 20, 46, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 24px;
  box-shadow:
    0 0 60px rgba(124, 58, 237, 0.08),
    0 0 120px rgba(124, 58, 237, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 40px 36px 32px;
  position: relative;
  transform: scale(0.92);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.open .auth-glass {
  transform: scale(1);
  opacity: 1;
}

.auth-glass-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 15px;
  transition: var(--transition);
  border: 1px solid transparent;
}

.auth-glass-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border-color: var(--border-color);
  transform: rotate(90deg);
}

.auth-form {
  animation: authFadeIn 0.4s ease;
}

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

.auth-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
}

.auth-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.2;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.4;
}

.auth-bonus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -14px 0 20px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(16,185,129,0.07));
  border: 1px solid rgba(34,197,94,0.35);
  color: #4ade80;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 16px rgba(34,197,94,0.15);
  text-shadow: 0 0 10px rgba(74,222,128,0.3);
}
.auth-bonus i {
  font-size: 12px;
  filter: drop-shadow(0 0 6px rgba(74,222,128,0.5));
}

/* Input Groups */
.auth-field {
  margin-bottom: 16px;
}

.auth-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
  transition: var(--transition);
  z-index: 1;
}

.auth-input-group input {
  width: 100%;
  padding: 13px 14px 13px 42px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.3s ease;
}

.auth-input-group input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.auth-input-group input:focus {
  border-color: var(--accent-purple);
  background: rgba(124, 58, 237, 0.04);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08), 0 0 30px rgba(124, 58, 237, 0.05);
}

.auth-input-group input:focus ~ .auth-input-icon,
.auth-input-group input:focus + .auth-input-icon {
  color: var(--accent-purple-light);
}

.auth-code-input {
  letter-spacing: 8px;
  text-align: center;
  font-size: 18px !important;
  font-weight: 700;
  padding-left: 14px !important;
}

.auth-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  padding-left: 2px;
}

/* Terms checkbox */
.auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
}

.auth-terms input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.auth-terms-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid rgba(124, 58, 237, 0.4);
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: all 0.2s ease;
}

.auth-terms input:checked + .auth-terms-box {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

.auth-terms input:focus-visible + .auth-terms-box {
  outline: 2px solid var(--accent-purple-light);
  outline-offset: 2px;
}

.auth-terms-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.auth-terms-text a {
  color: var(--accent-purple-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-terms-text a:hover {
  color: var(--accent-purple);
}

/* Password Strength */
.auth-pw-strength {
  margin-top: 12px;
  animation: authFadeIn 0.3s ease;
}

.auth-pw-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.auth-pw-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: all 0.4s ease;
}

.auth-pw-reqs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-pw-reqs li {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.3s ease;
}

.auth-pw-reqs li i {
  font-size: 12px;
  width: 14px;
  text-align: center;
  transition: all 0.3s ease;
}

.auth-pw-reqs li.met {
  color: #4ade80;
}

.auth-pw-reqs li.met i {
  color: #4ade80;
}

/* Messages */
.turnstile-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 12px;
}

.auth-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: #f87171;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: authFadeIn 0.25s ease;
}

.auth-error::before {
  content: '\f071';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  flex-shrink: 0;
}

.auth-success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: #4ade80;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: authFadeIn 0.25s ease;
}

.auth-success::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  flex-shrink: 0;
}

/* Button */
.auth-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent-gradient);
  transition: all 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.auth-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.auth-btn:hover::before {
  transform: translateX(100%);
}

.auth-btn:hover {
  background: var(--accent-gradient-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.35);
}

.auth-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.auth-btn.loading {
  pointer-events: none;
  opacity: 0.85;
}

.auth-btn.loading .auth-btn-text,
.auth-btn.loading .auth-btn-arrow {
  opacity: 0;
}

.auth-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpin 0.6s linear infinite;
  position: absolute;
}

@keyframes authSpin {
  to { transform: rotate(360deg); }
}

.auth-btn-arrow {
  font-size: 13px;
  transition: transform 0.3s ease;
}

.auth-btn:hover .auth-btn-arrow {
  transform: translateX(3px);
}

/* Links */
.auth-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-links a {
  font-size: 13px;
  color: var(--accent-purple-light);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.auth-links a:hover {
  color: var(--accent-blue-light);
  opacity: 0.9;
}

/* ==============================
   LEGAL PAGES & FOOTER
   ============================== */

.main.legal-active .tab-content {
  display: none !important;
}

.legal-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 120px 24px 60px;
  animation: authFadeIn 0.5s ease;
}

.legal-back {
  margin-bottom: 32px;
}

.legal-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--accent-purple-light);
  transition: var(--transition);
  text-decoration: none;
}

.legal-back a:hover {
  color: var(--accent-blue-light);
  gap: 12px;
}

.legal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 48px;
}

.legal-content h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.2;
}

.legal-content .legal-updated {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 36px;
  margin-bottom: 12px;
}

.legal-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 24px;
  margin-bottom: 8px;
}

.legal-content p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.legal-content ul,
.legal-content ol {
  margin: 12px 0 16px;
  padding-left: 24px;
}

.legal-content li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.legal-content li::marker {
  color: var(--accent-purple-light);
}

.legal-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal-content a {
  color: var(--accent-purple-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content .legal-notice {
  margin-top: 36px;
  margin-bottom: 20px;
  padding: 20px 24px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.legal-content .legal-notice strong {
  color: var(--accent-purple-light);
}

/* ==============================
   FOOTER
   ============================== */

.footer {
  background: rgba(7, 7, 15, 0.95);
  border-top: 1px solid var(--border-color);
  padding: 60px 24px 0;
  margin-top: 80px;
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 60px;
  padding-bottom: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 340px;
  margin: auto 0;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 120px;
  justify-self: end;
  width: auto;
}

.footer-col {
  min-width: 140px;
}

.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.footer-col a {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 0;
  transition: var(--transition);
  white-space: nowrap;
}

.footer-col a i {
  width: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  transition: var(--transition);
  margin-right: 8px;
  flex-shrink: 0;
}

.footer-col a:hover {
  color: var(--accent-purple-light);
}

.footer-col a:hover i {
  color: var(--accent-purple-light);
}

.footer-bottom {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition);
}

.footer-social-link i {
  font-size: 15px;
  transition: transform var(--transition);
}

.footer-social-link:hover {
  color: var(--accent-purple-light);
}

.footer-social-link:hover i {
  transform: scale(1.15);
}

/* ==============================
   AGE VERIFICATION GATE
   ============================== */


/* APP LOADER */
.app-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  transition: opacity 0.5s ease;
}

.app-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.app-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.app-loader-ring {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-loader-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(124, 58, 237, 0.12);
  border-top-color: var(--accent-primary);
  animation: loader-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.app-loader-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(124, 58, 237, 0.06);
  border-bottom-color: rgba(124, 58, 237, 0.3);
  animation: loader-spin 2s cubic-bezier(0.4, 0, 0.2, 1) infinite reverse;
}

.app-loader-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  animation: loader-logo-glow 2s ease-in-out infinite;
}

.app-loader-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.15) 40%, transparent 50%);
  animation: loader-shine 3s ease-in-out infinite;
}

.app-loader-brand {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--accent-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: loader-brand-pulse 2s ease-in-out infinite;
}

.app-loader-dots {
  display: flex;
  gap: 6px;
  margin-top: -4px;
}

.app-loader-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  opacity: 0.25;
  animation: loader-dot-bounce 1.4s ease-in-out infinite both;
}

.app-loader-dots span:nth-child(1) { animation-delay: 0s; }
.app-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.app-loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes loader-logo-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
  50% { box-shadow: 0 0 30px 8px rgba(124, 58, 237, 0.25); }
}

@keyframes loader-shine {
  0%, 100% { transform: translateX(-100%) rotate(25deg); }
  50% { transform: translateX(200%) rotate(25deg); }
}

@keyframes loader-brand-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes loader-dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.25; }
  40% { transform: scale(1.2); opacity: 1; }
}


.age-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(8, 8, 18, 0.88);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  overflow-y: auto;
}

.age-gate.open {
  opacity: 1;
  visibility: visible;
}

.age-card {
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: rgba(17, 17, 40, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 28px;
  padding: 40px 44px 36px;
  text-align: center;
  box-shadow:
    0 0 80px rgba(124, 58, 237, 0.12),
    0 0 180px rgba(124, 58, 237, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.age-card::-webkit-scrollbar {
  width: 6px;
}

.age-card::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.3);
  border-radius: 6px;
}

.age-gate.open .age-card {
  transform: translateY(0) scale(1);
}

.age-18-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 22px;
  text-transform: uppercase;
  animation: agePulse 2s ease-in-out infinite;
}

.age-warning-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dc2626, #ef4444);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  margin: 0 auto 20px;
  box-shadow: 0 0 40px rgba(220, 38, 38, 0.3);
}

@keyframes agePulse {
  0%, 100% { box-shadow: 0 0 40px rgba(220, 38, 38, 0.3); }
  50% { box-shadow: 0 0 60px rgba(220, 38, 38, 0.55); }
}

.age-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.3;
}

.age-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.age-text strong {
  color: var(--text-primary);
}

.age-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}

.age-rule {
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 16px;
  padding: 16px;
  transition: all 0.3s ease;
}

.age-rule:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.25);
  transform: translateY(-2px);
}

.age-rule-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(79, 70, 229, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #a78bfa;
  margin-bottom: 12px;
}

.age-rule-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.age-rule-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.age-policies {
  margin-bottom: 20px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  text-align: left;
}

.age-policies-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.age-policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.age-policy-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.age-policy-link:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.4);
  color: #ddd6fe;
  transform: translateY(-1px);
}

.age-commit {
  margin-bottom: 20px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 16px;
  text-align: left;
}

.age-commit-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.age-commit-title i {
  color: #34d399;
}

.age-commit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.age-commit-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
  transition: all 0.3s ease;
}

.age-commit-item:hover {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.04);
}

.age-commit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.age-commit-head i {
  color: #34d399;
  font-size: 14px;
}

.age-commit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.age-commit-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 999px;
  padding: 4px 10px;
  letter-spacing: 0.3px;
}

.age-commit-chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.7);
}

.age-commit-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.age-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
  text-align: left;
}

.age-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.age-checkbox:hover {
  border-color: rgba(124, 58, 237, 0.25);
}

.age-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.age-checkbox-box {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.25s ease;
  margin-top: 1px;
}

.age-checkbox input:checked + .age-checkbox-box {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.4);
}

.age-checkbox-box i {
  font-size: 11px;
}

.age-checkbox-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.age-checkbox-text strong {
  color: var(--text-primary);
}

.age-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  background: rgba(234, 179, 8, 0.06);
  border: 1px solid rgba(234, 179, 8, 0.15);
  border-radius: 12px;
  text-align: left;
}

.age-note i {
  color: #fbbf24;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.age-note strong {
  color: var(--text-secondary);
}

.age-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.age-btn {
  width: 100%;
  padding: 15px 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  box-sizing: border-box;
  text-decoration: none;
}

.age-btn-confirm {
  color: #fff;
  background: var(--accent-gradient);
  border: none;
}

.age-btn-confirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(0.4);
}

.age-btn-confirm:disabled::before {
  display: none;
}

.age-btn-confirm:disabled:hover {
  transform: none;
  box-shadow: none;
}

.age-btn-confirm:not(:disabled)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.age-btn-confirm:not(:disabled):hover::before {
  transform: translateX(100%);
}

.age-btn-confirm:not(:disabled):hover {
  background: var(--accent-gradient-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.35);
}

.age-btn-confirm:not(:disabled):active {
  transform: translateY(0);
}

.age-btn-leave {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.age-btn-leave:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.age-footer {
  margin-top: 20px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .age-card {
    padding: 32px 22px 24px;
    border-radius: 22px;
  }

  .age-rules {
    grid-template-columns: 1fr;
  }

  .age-commit-grid {
    grid-template-columns: 1fr;
  }

  .age-title {
    font-size: 21px;
  }
}

/* ==============================
   USER POINTS
   ============================== */

.user-points {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Odometer digit animation */
#pointsDisplay.odi-mode {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  height: 1.2em;
  overflow: hidden;
}

.odi-digit {
  display: inline-block;
  height: 100%;
  position: relative;
}

.odi-strip {
  display: flex;
  flex-direction: column;
  transition: transform 0s;
  will-change: transform;
}

.odi-sep {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 1.2em;
  font-variant-numeric: tabular-nums;
  padding: 0 1px;
}

.odi-val {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.2em;
  line-height: 1.2em;
  font-variant-numeric: tabular-nums;
}

/* Spin highlight pulse on points badge */
.user-points.spin-highlight {
  animation: spinPointsPulse 1.5s ease;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.3);
}

@keyframes spinPointsPulse {
  0% { box-shadow: 0 0 0 rgba(234, 179, 8, 0); }
  30% { box-shadow: 0 0 25px rgba(234, 179, 8, 0.5); }
  100% { box-shadow: 0 0 0 rgba(234, 179, 8, 0); }
}

.template-points-cost {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==============================
   HISTORY
   ============================== */

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.ht-card {
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid var(--border-color);
  background: transparent;
  cursor: pointer;
}

.ht-card:hover {
  border-color: var(--accent-purple);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.15), 0 4px 30px rgba(0,0,0,0.4);
}

.ht-preview {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 83.333%;
  background: var(--bg-secondary);
  overflow: hidden;
}

.ht-preview video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ht-preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
  cursor: zoom-in;
}

/* Media error fallback inside ht-preview */
.ht-media-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg-secondary);
  color: rgba(255,255,255,0.35);
  z-index: 1;
}
.ht-media-error-icon {
  font-size: 48px;
  opacity: 0.18;
}
.ht-media-error span {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.35;
  letter-spacing: 0.3px;
}

.ht-preview video::-webkit-media-controls,
.ht-preview video::-webkit-media-controls-panel,
.ht-preview video::-webkit-media-controls-enclosure {
  display: none !important;
}



/* Name — top-left */
.ht-name {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Actions — top-right */
.ht-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ht-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  color: #fff;
}

.ht-btn.like {
  color: rgba(255,255,255,0.9);
}
.ht-btn.like.active {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: 1px solid #f87171;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.6), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: scale(1.08);
}
.ht-btn.like.active i {
  font-weight: 900;
  color: #fff;
}
.ht-btn.like:hover {
  background: rgba(239, 68, 68, 0.4);
}
.ht-btn.download:hover {
  background: rgba(124, 58, 237, 0.6);
}

.ht-btn.delete:hover {
  background: rgba(239, 68, 68, 0.6);
}

.ht-btn:disabled {
  opacity: 0.5;
  cursor: wait;
  pointer-events: none;
}

.history-tabs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.history-tab {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 8px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-tab:hover {
  border-color: var(--accent-purple);
  color: var(--text);
}

.history-tab.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

.history-tab i {
  font-size: 14px;
}

.ht-clear-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.08);
  color: #f87171;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ht-clear-btn:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.35);
}

.ht-clear-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Play button — center */
.ht-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.ht-play-btn.playing {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
}

.ht-card:hover .ht-play-btn:not(.playing) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Bottom area */
.ht-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 24px 10px 8px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ht-card:hover .ht-bottom {
  opacity: 1;
}

/* Controls row */
.ht-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ht-seek-wrap {
  flex: 1;
  display: flex;
  align-items: center;
}

.ht-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  outline: none;
  cursor: pointer;
}

.ht-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

.ht-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}



.ht-fs-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ht-fs-modal:fullscreen {
  width: 100vw;
  height: 100vh;
}
.ht-fs-modal video {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}
.ht-fs-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10002;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ht-fs-close:hover { background: rgba(124,58,237,0.8); }

.ht-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ht-gallery-modal .ht-gallery-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
}
.ht-gallery-modal .ht-gallery-img-wrap img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
}
.ht-gallery-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255,255,255,0.3);
}
.ht-gallery-fallback i {
  font-size: 64px;
  opacity: 0.15;
}
.ht-gallery-fallback span {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.45;
}

.ht-gallery-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10001;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.ht-gallery-close:hover { background: rgba(239,68,68,0.7); border-color: rgba(239,68,68,0.5); }

.ht-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10001;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.ht-gallery-nav:hover { background: rgba(124,58,237,0.7); border-color: rgba(124,58,237,0.5); }
.ht-gallery-nav.prev { left: 24px; }
.ht-gallery-nav.next { right: 24px; }
.ht-gallery-nav:disabled { opacity: 0.2; cursor: default; }

.ht-gallery-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 500;
  background: rgba(0,0,0,0.5);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
}

.ht-gallery-download {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 10001;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.ht-gallery-download:hover { background: rgba(124,58,237,0.7); border-color: rgba(124,58,237,0.5); }
.ht-fs-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 24px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
}
.ht-fs-play {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ht-fs-seek {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  outline: none;
  cursor: pointer;
}
.ht-fs-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.ht-fs-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}
.ht-fs-time {
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ht-fs-btn,
.ht-mute-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.ht-fs-btn:hover,
.ht-mute-btn:hover {
  color: #fff;
}

/* Meta row */
.ht-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.ht-points i {
  color: var(--accent-yellow, #eab308);
  font-size: 10px;
  margin-right: 3px;
}
.ht-likes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ht-likes i {
  font-size: 10px;
}
.ht-likes i.fa-solid {
  color: #ef4444;
}

@media (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-desc {
    max-width: 100%;
  }
}

/* ==========================================================================
   MOBILE FOOTER MASTER REDESIGN (< 768px & < 480px)
   ========================================================================== */
@media (max-width: 768px) {
  .footer {
    padding: 36px 16px 24px !important;
    margin-top: 48px !important;
    background: linear-gradient(180deg, rgba(10, 10, 24, 0.98) 0%, rgba(6, 6, 16, 0.99) 100%) !important;
    border-top: 1px solid rgba(124, 58, 237, 0.15) !important;
  }

  .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    padding-bottom: 24px !important;
  }

  .footer-brand {
    align-items: center !important;
    text-align: center !important;
  }

  .footer-logo {
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  .footer-desc {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  .footer-links {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  .footer-col {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .footer-col h4 {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #a78bfa !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
  }

  .footer-col a {
    font-size: 12.5px !important;
    padding: 6px 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    gap: 7px !important;
  }

  .footer-col a i {
    width: 16px !important;
    font-size: 11.5px !important;
    color: #c084fc !important;
    margin-right: 0 !important;
  }

  .footer-col a:active {
    color: #fff !important;
  }

  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 18px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-align: center !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.45) !important;
  }

  .footer-social {
    gap: 10px !important;
  }

  .footer-social-link {
    background: rgba(36, 161, 222, 0.12) !important;
    border: 1px solid rgba(36, 161, 222, 0.3) !important;
    color: #38bdf8 !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    gap: 6px !important;
  }

  .legal-content {
    padding: 28px 20px;
  }

  .legal-content h1 {
    font-size: 24px;
  }

  .legal-container {
    padding: 100px 16px 40px;
  }

  .legal-content .legal-notice {
    padding: 16px;
  }

  .history-grid {
    grid-template-columns: 1fr;
  }
}

/* ==============================
   GENERATION TOAST
   ============================== */

/* ========================================================
   BACKUP: ORIGINAL GENERATION TOAST CSS (Pre-Aug 2026)
   ========================================================
   .gen-toast { position: fixed; bottom: 32px; right: 32px; z-index: 1000000; min-width: 320px; max-width: 420px; padding: 18px 22px; border-radius: var(--radius-lg); background: rgba(16, 16, 30, 0.92); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 12px 48px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 14px; transform: translateX(120%); opacity: 0; }
   .gen-toast:not(.processing).open { animation: toastSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
   .gen-toast.hiding, .gen-toast.processing.hiding { animation: toastSlideOut 0.4s ease forwards; }
   .gen-toast.processing.open { animation: toastSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards, toastGlowPulse 3s ease-in-out infinite 0.5s; }
   .gen-toast-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
   .gen-toast.processing .gen-toast-icon { background: rgba(124,58,237,0.15); color: #a78bfa; animation: toast-pulse 1.5s ease-in-out infinite; }
   .gen-toast.processing .gen-toast-title { background: linear-gradient(135deg, #a78bfa, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
   ======================================================== */

/* ==============================
   GENERATION TOAST (UPGRADED AI MEDIA CREATION)
   ============================== */

.gen-toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 1000000;
  min-width: 330px;
  max-width: 420px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(15, 13, 29, 0.94);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  overflow: hidden;
}

.gen-toast:not(.processing).open {
  animation: toastSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gen-toast.hiding,
.gen-toast.processing.hiding {
  animation: toastSlideOut 0.4s ease forwards !important;
}

.gen-toast.processing.open {
  animation: toastSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards, toastAiPulse 3s ease-in-out infinite 0.5s;
}

/* Processing (AI Creation) Premium Theme */
.gen-toast.processing {
  background: linear-gradient(135deg, rgba(25, 17, 52, 0.97) 0%, rgba(13, 11, 28, 0.98) 100%);
  border: 1px solid rgba(168, 85, 247, 0.42);
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.75), 0 0 35px rgba(139, 92, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Neon laser scanning line along top border */
.gen-toast.processing::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a855f7 25%, #ec4899 50%, #6366f1 75%, transparent);
  animation: toastBeamScan 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 10;
}

/* Atmospheric glow in top-right corner */
.gen-toast.processing::after {
  content: '';
  position: absolute;
  top: -24px;
  right: -24px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(236, 72, 153, 0.08) 50%, transparent 80%);
  pointer-events: none;
  filter: blur(8px);
}

@keyframes toastBeamScan {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

@keyframes toastAiPulse {
  0%, 100% {
    box-shadow: 0 18px 56px rgba(0,0,0,0.75), 0 0 25px rgba(139, 92, 246, 0.22);
    border-color: rgba(168, 85, 247, 0.38);
  }
  50% {
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 45px rgba(168, 85, 247, 0.45), 0 0 20px rgba(236, 72, 153, 0.3);
    border-color: rgba(192, 132, 252, 0.7);
  }
}

@keyframes toastSlideIn {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}

/* --- AI CREATION ANIMATED ICON ORB --- */
.gen-toast-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ai-gen-icon-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-gen-glow {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, rgba(124, 58, 237, 0.15) 60%, transparent 80%);
  animation: aiOrbBreathe 2s ease-in-out infinite alternate;
}

.ai-gen-ring {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #c084fc;
  border-right-color: #ec4899;
  border-bottom-color: rgba(124, 58, 237, 0.3);
  animation: aiRingSpin 2s linear infinite;
}

.ai-gen-ring-inner {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(168, 85, 247, 0.6);
  border-top-color: #38bdf8;
  animation: aiRingSpinRev 3.5s linear infinite;
}

.ai-gen-core {
  position: relative;
  z-index: 3;
  font-size: 17px;
  color: #ffffff;
  filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.95)) drop-shadow(0 0 4px rgba(236, 72, 153, 0.8));
  animation: aiCoreSparkle 2s ease-in-out infinite;
}

.ai-sparkle-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #c084fc;
  z-index: 4;
}

.ai-sparkle-dot.dot-1 {
  top: 4px;
  right: 6px;
  animation: aiSparkleDot 1.8s ease-in-out infinite 0.2s;
}

.ai-sparkle-dot.dot-2 {
  bottom: 5px;
  left: 6px;
  animation: aiSparkleDot 1.8s ease-in-out infinite 0.9s;
}

@keyframes aiRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes aiRingSpinRev {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

@keyframes aiOrbBreathe {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

@keyframes aiCoreSparkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    color: #ffffff;
    filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.95)) drop-shadow(0 0 4px rgba(236, 72, 153, 0.8));
  }
  50% {
    transform: scale(1.15) rotate(12deg);
    color: #f5d0fe;
    filter: drop-shadow(0 0 16px rgba(236, 72, 153, 1)) drop-shadow(0 0 8px rgba(168, 85, 247, 0.9));
  }
}

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

/* Success / Info / Error / Warning Icons */
.gen-toast.success .gen-toast-icon {
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.25);
  font-size: 18px;
}

.gen-toast.info .gen-toast-icon {
  background: rgba(59, 130, 246, 0.16);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
  font-size: 18px;
}

.gen-toast.error .gen-toast-icon {
  background: rgba(239, 68, 68, 0.16);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-size: 18px;
}

.gen-toast.warning .gen-toast-icon {
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
  font-size: 18px;
}

/* Toast Body, Titles & Texts */
.gen-toast-body {
  flex: 1;
  min-width: 0;
}

.gen-toast-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gen-toast-text {
  font-size: 12.5px;
  color: rgba(226, 232, 240, 0.85);
  line-height: 1.42;
}

.gen-toast.processing .gen-toast-title {
  background: linear-gradient(135deg, #ffffff 0%, #d8b4fe 40%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}

.gen-toast.success .gen-toast-title {
  background: linear-gradient(135deg, #86efac 0%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gen-toast.success {
  background: linear-gradient(135deg, rgba(16, 36, 26, 0.96) 0%, rgba(10, 24, 18, 0.98) 100%);
  border: 1px solid rgba(34, 197, 94, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 25px rgba(34, 197, 94, 0.2);
}

.gen-toast.error {
  background: linear-gradient(135deg, rgba(40, 16, 20, 0.96) 0%, rgba(24, 10, 12, 0.98) 100%);
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 25px rgba(239, 68, 68, 0.2);
}

.gen-toast.warning {
  background: linear-gradient(135deg, rgba(40, 28, 12, 0.96) 0%, rgba(26, 18, 8, 0.98) 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 25px rgba(245, 158, 11, 0.2);
}

/* --- Mobile Responsive Centered Generation Toast (< 768px) --- */
@media (max-width: 768px) {
  .gen-toast {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 12px 16px !important;
    border-radius: 16px !important;
    transform: translateY(140%);
    opacity: 0;
    box-sizing: border-box !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
    animation: none !important;
  }

  .gen-toast.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  .gen-toast.hiding {
    transform: translateY(140%) !important;
    opacity: 0 !important;
  }

  .gen-toast.processing.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    animation: toastAiPulse 3s ease-in-out infinite 0.5s !important;
  }

  .gen-toast-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  .gen-toast-title {
    font-size: 13.5px !important;
  }

  .gen-toast-text {
    font-size: 12px !important;
  }
}

/* Success toast (centered) */
.success-toast-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s 0.5s;
}

.success-toast-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s 0s;
}

.success-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: linear-gradient(160deg, rgba(20,20,48,0.96) 0%, rgba(12,12,32,0.98) 100%);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 20px;
  padding: 36px 48px;
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.5s;
  pointer-events: none;
  box-shadow: 0 0 120px rgba(0,0,0,0.6), 0 0 80px rgba(34,197,94,0.08);
}

.success-toast.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0s;
  pointer-events: auto;
}

.success-toast-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.success-toast-close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-primary);
}

.success-toast-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(34,197,94,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #22c55e;
  flex-shrink: 0;
}

.success-toast-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.success-toast-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.success-toast-text {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ==============================
   HISTORY — PROCESSING CARD
   ============================== */

.ht-status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  margin: 16px 0;
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(59,130,246,0.06));
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, margin 0.35s ease, padding 0.35s ease;
  opacity: 1;
  transform: translateY(0);
  animation: hts-banner-in 0.4s ease-out;
}

.ht-status-banner.closing {
  opacity: 0;
  transform: translateY(-10px);
  margin: 0;
  padding: 0 18px;
  pointer-events: none;
}

@keyframes hts-banner-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.ht-status-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(167,139,250,0.18) 45%, rgba(196,132,252,0.25) 50%, rgba(167,139,250,0.18) 55%, transparent 70%, transparent 100%);
  animation: hts-shimmer 2.5s ease-in-out infinite;
}

@keyframes hts-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes hts-banner-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ht-status-banner i {
  font-size: 16px;
  color: #a78bfa;
  flex-shrink: 0;
  z-index: 1;
  animation: hts-sparkle 2s ease-in-out infinite;
}

@keyframes hts-sparkle {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.ht-status-banner span {
  z-index: 1;
}

.ht-media-card {
  pointer-events: none;
  cursor: default;
  animation: ht-media-glow 2.5s ease-in-out infinite;
}

.ht-media-card:hover {
  transform: none;
  box-shadow: none;
}

@keyframes ht-media-glow {
  0%, 100% { border-color: var(--border-color); }
  50% { border-color: rgba(124,58,237,0.35); }
}

.ht-media-preview {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 83.333%;
  background: #0b0b14;
  overflow: hidden;
}

.ht-media-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ht-media-bg-video {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(124,58,237,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(59,130,246,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(244,114,182,0.05) 0%, transparent 40%);
}

.ht-media-bg-photo {
  background:
    radial-gradient(ellipse at 35% 40%, rgba(249,115,22,0.09) 0%, transparent 60%),
    radial-gradient(ellipse at 65% 55%, rgba(217,70,239,0.06) 0%, transparent 50%);
}

.ht-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, rgba(11,11,20,0.6) 100%);
}

/* ── Frame stacking (video) ── */
.ht-frame-stack {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 106px;
  height: 68px;
  z-index: 4;
}

.ht-frame-card {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  border: 1px solid rgba(139,92,246,0.4);
  background:
    linear-gradient(145deg, rgba(124,58,237,0.4), rgba(59,130,246,0.25)),
    radial-gradient(120% 120% at 30% 20%, rgba(167,139,250,0.35), transparent 60%),
    #17122b;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  transform-origin: center bottom;
  animation: ht-frame-cycle 14s linear infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity, filter;
}

.ht-frame-card::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(255,255,255,0.09) 50%, transparent 58%) 0 0 / 140% 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 4px);
  animation: ht-frame-scan 2.6s linear infinite;
}

.ht-frame-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 27px;
  height: 27px;
  font-size: 13px;
  color: #fff;
  background: rgba(124,58,237,0.55);
  border: 1px solid rgba(196,181,253,0.6);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(139,92,246,0.45), inset 0 0 6px rgba(196,181,253,0.3);
  z-index: 1;
  animation: ht-frame-icon-pulse 2.2s ease-in-out infinite;
}

.ht-frame-icon::before {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  line-height: 1;
}

@keyframes ht-frame-icon-pulse {
  0%, 100% { box-shadow: 0 0 7px rgba(139,92,246,0.35), inset 0 0 5px rgba(196,181,253,0.25); }
  50% { box-shadow: 0 0 16px rgba(139,92,246,0.75), inset 0 0 8px rgba(196,181,253,0.4); }
}

@keyframes ht-frame-scan {
  from { background-position: -60% 0, 0 0; }
  to { background-position: 160% 0, 0 0; }
}

@keyframes ht-frame-cycle {
  0%   { transform: translateY(-34px) translateX(var(--dx)) rotate(var(--in)) scale(0.85); opacity: 1; z-index: 20; filter: brightness(1.4) saturate(1.25); }
  4.5% { transform: translateY(0) translateX(var(--dx)) rotate(var(--rot)) scale(1.07); opacity: 1; z-index: 20; filter: brightness(1.2) saturate(1.1); }
  5.5% { transform: translateY(4px) translateX(var(--dx)) rotate(var(--rot)) scale(1.04); opacity: 1; z-index: 2; filter: brightness(1.05); }
  45%  { transform: translateY(18px) translateX(var(--dx)) rotate(var(--rot)) scale(0.96); opacity: 0.7; filter: brightness(0.8); }
  100% { transform: translateY(42px) translateX(var(--dx)) rotate(var(--rot)) scale(0.85); opacity: 0; z-index: 1; filter: brightness(0.45); }
}

/* ── Core rings (shared) ── */
.ht-media-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ht-media-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(124,58,237,0.25);
  width: 82px;
  height: 82px;
  animation: ht-media-ring-spin 6s linear infinite;
}

.ht-media-ring-2 {
  width: 104px;
  height: 104px;
  border-color: rgba(59,130,246,0.2);
  border-style: dashed;
  animation-duration: 8s;
  animation-direction: reverse;
}

.ht-media-ring-photo {
  border-color: rgba(251,146,60,0.3);
  width: 90px;
  height: 90px;
}

.ht-media-ring-photo.ht-media-ring-2 {
  border-color: rgba(217,70,239,0.25);
  width: 112px;
  height: 112px;
}

@keyframes ht-media-ring-spin {
  to { transform: rotate(360deg); }
}

/* ── Polaroid (photo) ── */
.ht-polaroid {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  background: #f6f4f1;
  padding: 6px 6px 22px 6px;
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  z-index: 4;
  animation: ht-polaroid-float 3.4s ease-in-out infinite;
}

@keyframes ht-polaroid-float {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1.2deg); }
  50% { transform: translateX(-50%) translateY(-6px) rotate(1deg); }
}

.ht-polaroid-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(135deg, rgba(249,115,22,0.18), rgba(217,70,239,0.10)),
    #15121f;
  overflow: hidden;
}

.ht-polaroid-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.14) 48%, transparent 60%);
  background-size: 200% 200%;
  animation: ht-sheen-sweep 2.8s ease-in-out infinite;
}

@keyframes ht-sheen-sweep {
  0% { background-position: -80% 0; }
  100% { background-position: 180% 0; }
}

.ht-polaroid-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: rgba(251,191,36,0.7);
  animation: ht-polaroid-icon-pulse 2s ease-in-out infinite;
}

@keyframes ht-polaroid-icon-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

.ht-polaroid-cap {
  text-align: center;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8b7f76;
  padding-top: 7px;
  font-weight: 600;
}

/* ── Scanline shimmer (photo) ── */
.ht-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 26%;
  z-index: 3;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(251,191,36,0.05) 40%,
    rgba(251,146,60,0.10) 50%,
    rgba(251,191,36,0.05) 60%,
    transparent 100%);
  animation: ht-scanline-move 2.6s ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
}

@keyframes ht-scanline-move {
  0% { transform: translateY(-120%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(320%); opacity: 0; }
}

/* ── Label ── */
.ht-media-label {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(244,114,182,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ht-media-label-photo {
  color: rgba(251,146,60,0.6);
}

.ht-media-label-video {
  color: rgba(167,139,250,0.7);
}

.ht-media-label-video .ht-media-dot {
  background: #a78bfa;
  animation-name: ht-media-dot-blink-video;
}

@keyframes ht-media-dot-blink-video {
  0%, 100% { opacity: 0.2; background: #7c3aed; }
  50% { opacity: 1; background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,0.8); }
}

.ht-media-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f472b6;
  animation: ht-media-dot-blink 1.2s ease-in-out infinite;
}

.ht-media-text {
  display: inline-block;
}

.ht-media-text.ht-text-in {
  animation: ht-text-in 0.45s ease both;
}

@keyframes ht-text-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); filter: blur(1px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.ht-media-label-photo .ht-media-dot {
  background: #fb923c;
}

@keyframes ht-media-dot-blink {
  0%, 100% { opacity: 0.2; background: #c084fc; }
  50% { opacity: 1; background: #f472b6; box-shadow: 0 0 6px rgba(244,114,182,0.8); }
}

.ht-media-label-photo .ht-media-dot {
  animation-name: ht-media-dot-blink-photo;
}

@keyframes ht-media-dot-blink-photo {
  0%, 100% { opacity: 0.2; background: #d97706; }
  50% { opacity: 1; background: #fb923c; box-shadow: 0 0 6px rgba(251,146,60,0.8); }
}

/* ==============================
   ACCOUNT DASHBOARD PANEL
   ============================== */

.acc-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  transition: opacity 0.35s ease;
}

.acc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 30%;
  max-width: 100vw;
  height: 100vh;
  background: linear-gradient(160deg, rgba(18,18,40,0.97) 0%, rgba(10,10,28,0.98) 100%);
  backdrop-filter: blur(32px);
  border-left: 1px solid rgba(124,58,237,0.15);
  box-shadow: -8px 0 60px rgba(0,0,0,0.5), 0 0 80px rgba(124,58,237,0.05);
  display: flex;
  flex-direction: column;
  animation: accSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 99999;
}

@keyframes accSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes accSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.acc-overlay.closing {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.acc-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.acc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #1e1538 100%);
  border: 2px solid rgba(129, 140, 248, 0.5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 16px rgba(99, 102, 241, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #e0e7ff;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.acc-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(129, 140, 248, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.acc-header-text {
  min-width: 0;
}

.acc-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acc-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.acc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.acc-badge-verified {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.acc-member-since {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.acc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 14px;
}

.acc-loading i {
  font-size: 24px;
  color: var(--accent-purple-light);
}

.acc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.acc-stat {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  transition: var(--transition);
}

.acc-stat:hover {
  border-color: var(--border-active);
  background: rgba(124, 58, 237, 0.04);
}

.acc-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 16px;
}

.acc-stat-icon.gold { background: rgba(234, 179, 8, 0.12); color: #eab308; }
.acc-stat-icon.purple { background: rgba(124, 58, 237, 0.12); color: #a78bfa; }
.acc-stat-icon.blue { background: rgba(59, 130, 246, 0.12); color: #60a5fa; }
.acc-stat-icon.pink { background: rgba(236, 72, 153, 0.12); color: #f472b6; }
.acc-stat-icon.green { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.acc-stat-icon.cyan { background: rgba(6, 182, 212, 0.12); color: #22d3ee; }

.acc-stat-value {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.2;
}

.acc-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

#accReferralCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.acc-referral-pts {
  font-size: 10px;
  font-weight: 700;
  color: #f59e0b;
  opacity: 0.9;
  letter-spacing: 0.3px;
  line-height: 1;
}

.acc-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.acc-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
}

.acc-quick-btn i {
  font-size: 18px;
  color: var(--accent-purple-light);
}

.acc-quick-btn:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: var(--border-active);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.acc-row-static {
  cursor: default;
  pointer-events: auto;
}

.acc-row-static:hover {
  background: transparent;
  border-color: transparent;
}

.acc-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-right: 4px;
  flex-shrink: 0;
}

.acc-status-pill.on {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.acc-status-pill.off {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
}

.acc-referral-card {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(59, 130, 246, 0.08) 100%);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 8px;
}

.acc-referral-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.acc-referral-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--accent-purple-light);
}

.acc-referral-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.acc-referral-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.acc-referral-code-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.acc-referral-code {
  flex: 1;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--text-primary);
}

.acc-copy-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.acc-copy-btn:hover {
  background: rgba(124, 58, 237, 0.15);
  color: var(--accent-purple-light);
  border-color: var(--border-active);
}

.acc-referral-share {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.acc-referral-share:hover {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
}

.acc-email {
  margin-top: 5px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.acc-close-btn:hover {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border-color: rgba(239,68,68,0.2);
  transform: rotate(90deg);
}

.acc-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 32px;
}

.acc-body::-webkit-scrollbar { width: 4px; }
.acc-body::-webkit-scrollbar-track { background: transparent; }
.acc-body::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.2); border-radius: 4px; }

/* Points Card */
.acc-points-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(59,130,246,0.06) 100%);
  border: 1px solid rgba(124,58,237,0.12);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.acc-points-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(234,179,8,0.15), rgba(234,179,8,0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent-yellow, #eab308);
  flex-shrink: 0;
}

.acc-points-info {
  flex: 1;
}

.acc-points-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.acc-points-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  font-family: var(--font-display);
}

.acc-points-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-yellow, #eab308);
  background: rgba(234,179,8,0.1);
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

/* Section Title */
.acc-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
  margin-top: 20px;
}

.acc-section-title:first-of-type {
  margin-top: 0;
}

.acc-section-danger {
  color: rgba(239,68,68,0.6);
}

/* Transaction History */
.acc-tx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.acc-tx-chip {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.2px;
}
.acc-tx-chip:hover {
  color: var(--text-primary);
  border-color: rgba(124,58,237,0.4);
  background: rgba(124,58,237,0.08);
}
.acc-tx-chip.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(124,58,237,0.4), rgba(99,102,241,0.28));
  border-color: rgba(124,58,237,0.6);
  box-shadow: 0 0 16px rgba(124,58,237,0.28);
}
.acc-tx-container {
  margin-bottom: 20px;
}
.acc-tx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: rgba(255,255,255,0.3);
  gap: 10px;
  font-size: 13px;
}
.acc-tx-empty i {
  font-size: 28px;
  opacity: 0.5;
}
.acc-tx-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.acc-tx-list::-webkit-scrollbar {
  width: 4px;
}
.acc-tx-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
}
.acc-tx-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: rgba(167,139,250,0.5);
  font-size: 14px;
}
.acc-tx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s;
}
.acc-tx-item:hover {
  background: rgba(255,255,255,0.06);
}
.acc-tx-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.acc-tx-icon.credit {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
}
.acc-tx-icon.debit {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}
.acc-tx-icon.refund {
  background: rgba(250,204,21,0.12);
  color: #facc15;
}
.acc-tx-icon.spin {
  background: rgba(168,85,247,0.12);
  color: #a855f7;
}
.acc-tx-icon.payment {
  background: rgba(34,211,238,0.12);
  color: #22d3ee;
}
.acc-tx-icon.referral {
  background: rgba(244,114,182,0.12);
  color: #f472b6;
}
.acc-tx-body {
  flex: 1;
  min-width: 0;
}
.acc-tx-desc {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-tx-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}
.acc-tx-amount {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.acc-tx-amount.credit {
  color: #22c55e;
}
.acc-tx-amount.debit {
  color: #ef4444;
}
.acc-tx-amount.refund {
  color: #facc15;
}

.pricing-faq {
  margin-top: 64px;
}
.howto-wrap {
  display: flex;
  justify-content: center;
  margin: -16px 0 28px;
}
.howto-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(96, 165, 250, 0.1));
  color: #c4b5fd;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.howto-btn:hover {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.28), rgba(96, 165, 250, 0.2));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25);
}
.pricing-faq-title {
  text-align: center;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pricing-faq-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 32px;
}
.pricing-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  transition: var(--transition);
}
.pricing-faq-item:hover {
  border-color: rgba(124, 58, 237, 0.3);
}
.pricing-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.pricing-faq-q i {
  font-size: 14px;
  color: #a78bfa;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.pricing-faq-item.open .pricing-faq-q i {
  transform: rotate(45deg);
}
.pricing-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.pricing-faq-item.open .pricing-faq-a {
  max-height: 320px;
}
.pricing-faq-a p {
  padding: 0 22px 20px;
  margin: 0;
  color: rgba(255,255,255,0.55);
  font-size: 13.5px;
  line-height: 1.7;
}

/* Row Items */
.acc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  font-family: var(--font);
  color: var(--text-primary);
  margin-bottom: 4px;
}

button.acc-row:hover {
  background: rgba(255,255,255,0.03);
  border-color: var(--border-color);
}

button.acc-row:active {
  background: rgba(255,255,255,0.05);
  transform: scale(0.99);
}

.acc-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(124,58,237,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--accent-purple-light);
  flex-shrink: 0;
}

.acc-row-text {
  flex: 1;
  min-width: 0;
}

.acc-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.acc-row-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 1px;
}

.acc-row-arrow {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

button.acc-row:hover .acc-row-arrow {
  transform: translateX(3px);
  color: var(--accent-purple-light);
}

/* Toggle Switch */
.acc-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.acc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.acc-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  transition: background 0.3s ease;
}

.acc-toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.acc-toggle input:checked + .acc-toggle-slider {
  background: var(--accent-gradient);
}

.acc-toggle input:checked + .acc-toggle-slider::before {
  transform: translateX(20px);
}

.acc-toggle input:disabled + .acc-toggle-slider {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* Danger Button */
.acc-danger-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.1);
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
}

.acc-danger-btn:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.2);
}

.acc-danger-btn:active {
  transform: scale(0.98);
}

/* Responsive */
@media (max-width: 480px) {
  .acc-drawer {
    width: 100vw;
  }

  .acc-header {
    padding: 18px 16px 14px;
  }

  .acc-body {
    padding: 16px;
  }

  .acc-stats {
    gap: 8px;
  }

  .acc-stat {
    padding: 12px 10px;
  }

  .acc-stat-value {
    font-size: 18px;
  }

  .acc-quick-grid {
    gap: 8px;
  }

  .acc-quick-btn {
    padding: 12px 8px;
    font-size: 12px;
  }

  .acc-points-value {
    font-size: 24px;
  }
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.section-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-purple-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* ==============================
   CUSTOM DIALOG
   ============================== */

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dialog-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.dialog-overlay.closing {
  opacity: 0;
  pointer-events: none;
}


.dialog-box {
  width: 460px;
  max-width: 92vw;
  max-height: 85vh;
  background: linear-gradient(160deg, rgba(20,20,48,0.97) 0%, rgba(12,12,32,0.98) 100%);
  backdrop-filter: blur(32px);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: 20px;
  box-shadow: 0 0 80px rgba(0,0,0,0.5), 0 0 60px rgba(124,58,237,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.92) translateY(10px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.dialog-overlay.open .dialog-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.dialog-overlay.closing .dialog-box {
  transform: scale(0.92) translateY(10px);
  opacity: 0;
}

#accTxOverlay .dialog-box {
  width: 680px;
  max-height: 82vh;
}

#howToPayOverlay .dialog-box {
  width: 680px;
}

.dialog-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.dialog-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.dialog-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
}

.dialog-close:hover {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  border-color: rgba(239,68,68,0.15);
  transform: rotate(90deg);
}

.dialog-body {
  padding: 24px;
  overflow-y: auto;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.dialog-body p {
  margin-bottom: 16px;
}

.dialog-body p:last-child {
  margin-bottom: 0;
}

.dialog-body .dlg-code {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--accent-purple-light);
  word-break: break-all;
  user-select: all;
  margin-bottom: 16px;
}

.dialog-body .dlg-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.dialog-body .dlg-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: rgba(0,0,0,0.25);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.dialog-body .dlg-input:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

.dialog-body .dlg-input::placeholder {
  color: var(--text-muted);
}

.dialog-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.dialog-footer .dlg-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  border: none;
  white-space: nowrap;
}

.dialog-footer .dlg-btn.primary {
  background: var(--accent-gradient);
  color: #fff;
}

.dialog-footer .dlg-btn.primary:hover {
  background: var(--accent-gradient-hover);
  transform: scale(1.02);
}

.dialog-footer .dlg-btn.primary:active {
  transform: scale(0.98);
}

.dialog-footer .dlg-btn.secondary {
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.dialog-footer .dlg-btn.secondary:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-primary);
}

.dialog-footer .dlg-btn.danger {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.12);
}

.dialog-footer .dlg-btn.danger:hover {
  background: rgba(239,68,68,0.18);
}

/* Single button center */
.dialog-footer.single {
  justify-content: center;
}

.dialog-footer.single .dlg-btn {
  flex: none;
  min-width: 120px;
}

/* Dialog body action buttons */
.dlg-body-btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dlg-body-btn.primary {
  background: var(--accent-gradient);
  color: #fff;
}

.dlg-body-btn.primary:hover {
  background: var(--accent-gradient-hover);
  transform: scale(1.03);
}

.dlg-body-btn.primary:active {
  transform: scale(0.97);
}

.dlg-body-btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.dlg-body-btn.secondary {
  background: rgba(124, 58, 237, 0.1);
  color: var(--accent-purple-light);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.dlg-body-btn.secondary:hover {
  background: rgba(124, 58, 237, 0.18);
}

/* Dialog copy rows */
.dlg-copy-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.dlg-copy-row .dlg-input {
  flex: 1;
  margin: 0;
}

.dlg-referral-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

  .dlg-referral-link .dlg-link-text {
    flex: 1;
    word-break: break-all;
    font-size: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    color: var(--accent-blue-light);
  }

/* Report dialog */
.report-field {
  margin-bottom: 14px;
}

.report-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.report-field textarea,
.report-field input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  font-size: 14px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.25s ease;
}

.report-field textarea:focus,
.report-field input[type="email"]:focus {
  border-color: rgba(124, 58, 237, 0.5);
}

.report-select-wrap {
  position: relative;
}

.report-select-wrap select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color 0.25s ease;
}

.report-select-wrap select:focus {
  border-color: rgba(124, 58, 237, 0.5);
}

.report-select-wrap select option {
  background: #1a1a2e;
  color: #fff;
}

.report-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 12px;
}

/* ---------------------------------------------------------------
   Custom premium dropdown (cdrop)
---------------------------------------------------------------- */
.cdrop {
  position: relative;
}

.cdrop-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 13.5px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.cdrop-trigger:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.4);
}

.cdrop-trigger.open {
  border-color: var(--accent-purple);
  background: rgba(124, 58, 237, 0.08);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12), 0 0 24px rgba(124, 58, 237, 0.06);
}

.cdrop-trigger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 11px;
  color: var(--accent-purple-light);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(236, 72, 153, 0.18));
  border: 1px solid rgba(124, 58, 237, 0.3);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.12);
}

.cdrop-value {
  flex: 1;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cdrop-arrow {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.cdrop-trigger.open .cdrop-arrow {
  transform: rotate(180deg);
}

.cdrop-menu {
  position: fixed;
  z-index: 1000001;
  max-height: min(300px, 55vh);
  overflow-y: auto;
  padding: 6px;
  background: linear-gradient(160deg, rgba(28, 28, 62, 0.98), rgba(14, 14, 36, 0.98));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(124, 58, 237, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top center;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
}

.cdrop-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.cdrop-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cdrop-opt:hover {
  background: rgba(124, 58, 237, 0.14);
  color: #fff;
}

.cdrop-opt.sel {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.14));
  color: #fff;
}

.cdrop-opt-icon {
  flex-shrink: 0;
  width: 18px;
  font-size: 12px;
  color: var(--accent-purple-light);
  text-align: center;
}

.cdrop-opt-check {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--accent-purple-light);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cdrop-opt.sel .cdrop-opt-check {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 480px) {
  .dialog-box {
    max-width: 96vw;
    border-radius: 16px;
  }
  .dialog-hdr { padding: 14px 18px; }
  .dialog-body { padding: 18px; }
  .dialog-footer { padding: 14px 18px 18px; }
}

/* ===== PRICING ===== */
.pricing-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

.pricing-title {
  text-align: center;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
  margin-bottom: 40px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
}

.pricing-card:hover {
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(124, 58, 237, 0.1);
}

.pricing-popular {
  border-color: rgba(124, 58, 237, 0.4);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(59, 130, 246, 0.06));
  transform: scale(1.04);
  z-index: 2;
}

.pricing-popular:hover {
  transform: scale(1.04) translateY(-4px);
}

.pricing-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 18px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pricing-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.pricing-plan-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.pricing-plan-price {
  font-size: 28px;
  font-weight: 800;
  color: #a78bfa;
}

.pricing-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pricing-plan-price-old {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.6;
}

.pricing-discount-pill {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 0;
  color: var(--text-muted);
  font-size: 15px;
}

.pricing-loading i {
  font-size: 28px;
  color: #a78bfa;
}

.pricing-points {
  font-size: 14px;
  font-weight: 600;
  color: #fbbf24;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pricing-bonus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34,197,94,0.16), rgba(16,185,129,0.08));
  border: 1px solid rgba(34,197,94,0.35);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
  box-shadow: 0 0 14px rgba(34,197,94,0.15), inset 0 0 10px rgba(34,197,94,0.06);
  text-shadow: 0 0 10px rgba(74,222,128,0.35);
}
.pricing-bonus i {
  font-size: 10px;
  filter: drop-shadow(0 0 6px rgba(74,222,128,0.5));
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-features li i {
  color: #4ade80;
  font-size: 12px;
  flex-shrink: 0;
}

.pricing-btn {
  width: 100%;
  padding: 13px;
  border: 1px solid rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.12);
  color: #ffffff;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.3px;
}

.pricing-btn i {
  font-size: 14px;
}

.pricing-btn:hover {
  background: rgba(124, 58, 237, 0.24);
  border-color: rgba(124, 58, 237, 0.6);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.3);
}

.pricing-btn-primary {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
}

.pricing-btn-primary:hover {
  background: linear-gradient(135deg, #6d28d9, #4338ca);
  border-color: rgba(168, 85, 247, 0.65);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.5);
}

.pricing-btn:disabled {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pricing-popular {
    transform: none;
  }
  .pricing-popular:hover {
    transform: translateY(-4px);
  }
}

/* ===== CONTACT ===== */
.contact-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  animation: heroFadeDown 0.6s ease forwards;
}

.contact-header {
  text-align: center;
  margin-bottom: 40px;
}

.contact-title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.contact-form-wrap {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}

.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  backdrop-filter: blur(12px);
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--text-muted);
}

.contact-field textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border: none;
  cursor: not-allowed;
  opacity: 0.5;
  transition: var(--transition);
  position: relative;
}

.contact-submit-hint {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 4px;
}

@media (max-width: 768px) {
  .contact-section {
    max-width: 100% !important;
    padding: 24px 16px 40px !important;
  }

  .contact-header {
    margin-bottom: 24px !important;
  }

  .contact-title {
    font-size: 24px !important;
  }

  .contact-subtitle {
    font-size: 13.5px !important;
    padding: 0 8px !important;
  }

  .contact-form-wrap {
    max-width: 100% !important;
    width: 100% !important;
  }

  .contact-form {
    padding: 20px 16px !important;
    border-radius: 18px !important;
    gap: 16px !important;
  }

  .contact-form-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .contact-field input,
  .contact-field textarea {
    font-size: 14px !important;
    padding: 11px 13px !important;
  }

  .contact-submit {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
  }
}

/* Template request form */
.treq-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.treq-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.treq-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
  line-height: 1.6;
}

.treq-field textarea:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

.treq-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: -8px;
}

.treq-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  align-self: flex-start;
}

.treq-submit:hover {
  background: linear-gradient(135deg, #6d28d9, #4f46e5);
  box-shadow: 0 4px 20px rgba(124,58,237,0.4);
  transform: translateY(-1px);
}

.treq-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.treq-status {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
}

.treq-status.success {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  color: #86efac;
}

.treq-status.error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  color: #fca5a5;
}

.treq-status i {
  margin-right: 8px;
}

/* =============================================
   FREE SPIN WHEEL
   ============================================= */
.spin-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.spin-heading {
  text-align: center;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.spin-heading i {
  margin-right: 10px;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: initial;
  background-clip: unset;
  color: var(--accent-pink);
}
.spin-heading-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
  margin-bottom: 40px;
}

.spin-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
}

.wheel-area {
  flex-shrink: 0;
}

.wheel-wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  width: 440px;
  height: 440px;
}

.wheel-glow-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 460px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(233,30,99,0.2) 0%, rgba(156,39,176,0.1) 40%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: pulse-glow 4s infinite alternate;
  transition: opacity 0.6s ease;
}

/* Spin ready — full glow */
.wheel-wrapper.spin-ready .wheel-glow-bg {
  opacity: 1;
  animation: pulse-glow 4s infinite alternate;
}

/* Spin cooldown — dimmed state */
.wheel-wrapper.spin-cooldown {
  cursor: default;
}

.wheel-wrapper.spin-cooldown .wheel-glow-bg {
  opacity: 0.15;
  animation: none;
}

.wheel-wrapper.spin-cooldown #spinWheel {
  filter: brightness(0.45) saturate(0.3);
  transition: filter 0.6s ease;
}

.wheel-wrapper.spin-cooldown .spin-pointer {
  opacity: 0.3;
  filter: none;
  text-shadow: none;
}

.wheel-wrapper.spin-cooldown::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, transparent 45%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Active bright state */
.wheel-wrapper.spin-ready #spinWheel {
  filter: brightness(1) saturate(1);
  transition: filter 0.6s ease;
}

@keyframes pulse-glow {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

#spinWheel {
  width: 440px;
  height: 440px;
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(233, 30, 99, 0.3), inset 0 0 40px rgba(156, 39, 176, 0.2);
}

.spin-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 42px;
  color: #fff;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
  text-shadow: 0 0 15px rgba(233,30,99,0.8), 0 0 30px #fff;
  animation: pointer-pulse 2s infinite;
}

@keyframes pointer-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.15); }
}

.spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.3);
  background: linear-gradient(135deg, #e91e63, #9c27b0, #673ab7);
  background-size: 200% 200%;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 0 30px rgba(233,30,99,0.5), inset 0 0 15px rgba(255,255,255,0.4);
  animation: btn-glow 3s infinite alternate;
}

@keyframes btn-glow {
  0% { background-position: 0% 50%; box-shadow: 0 0 20px rgba(233,30,99,0.5), inset 0 0 15px rgba(255,255,255,0.4); }
  100% { background-position: 100% 50%; box-shadow: 0 0 40px rgba(156,39,176,0.8), inset 0 0 20px rgba(255,255,255,0.6); }
}

.spin-btn:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.15);
  border-color: #fff;
}

.spin-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  animation: none;
  background: #333;
  box-shadow: none;
  border-color: rgba(255,255,255,0.1);
}

.spin-btn i {
  font-size: 12px;
}

.spin-sidebar {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spin-status-wrapper {
  margin-top: 30px;
  text-align: center;
}

.spin-status-text {
  font-size: 15px;
  color: #fff;
  line-height: 1.6;
  font-weight: 500;
}

.spin-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.spin-cd-icon {
  font-size: 28px;
  color: #ff9800;
}
.spin-cd-title {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
}
.spin-cd-timer {
  display: flex;
  align-items: center;
  gap: 6px;
}
.spin-cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.spin-cd-num {
  font-size: 32px;
  font-weight: 800;
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  color: #fff;
  line-height: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 52px;
  text-align: center;
}
.spin-cd-label {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 16px;
}

.spin-prizes-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  text-align: center;
}

.spin-prizes-title i {
  margin-right: 6px;
  color: var(--accent-yellow);
}

.spin-prize-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}

.spin-prize-row:last-child {
  border-bottom: none;
}

.spin-prize-label {
  color: var(--text-primary);
  font-weight: 600;
}

.spin-prize-chance {
  color: var(--text-muted);
  font-size: 12px;
}

/* Result overlay */
.spin-result-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: overlayFadeIn 0.3s ease;
}

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

.spin-result-modal {
  background: linear-gradient(145deg, #1e1e3a, #2a1a3e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 40px 48px;
  text-align: center;
  min-width: 320px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.spin-result-icon {
  margin-bottom: 16px;
}

.spin-result-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.spin-result-amount {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, #eab308, #e91e63);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.spin-result-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.spin-result-close {
  padding: 12px 32px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #e91e63, #9c27b0);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.spin-result-close:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(233,30,99,0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .spin-layout {
    flex-direction: column;
    align-items: center;
  }
  .wheel-wrapper {
    width: 320px;
    height: 320px;
  }
  #spinWheel {
    width: 320px;
    height: 320px;
  }
  .spin-sidebar {
    min-width: unset;
    width: 100%;
    max-width: 360px;
  }
  .spin-result-modal {
    min-width: unset;
    width: 90%;
    padding: 30px 24px;
  }
}


/* Special Free Spin Nav Button (Premium/Elegant) */
.nav-item-special, .mob-nav-special {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(234, 179, 8, 0.15)) !important;
  background-size: 200% 200% !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  border: 1px solid rgba(234, 179, 8, 0.3) !important;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.1), inset 0 0 5px rgba(234, 179, 8, 0.05) !important;
  animation: premium-bg 6s ease infinite, premium-pulse 3s infinite alternate !important;
  border-radius: var(--radius-full);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-item-special i, .mob-nav-special i {
  color: #eab308 !important;
  animation: premium-bounce 3s infinite ease-in-out;
}

.nav-item-special:hover, .mob-nav-special:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(14, 165, 233, 0.4)) !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.3), 0 0 20px rgba(14, 165, 233, 0.2) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.nav-item-special:hover i, .mob-nav-special:hover i {
  color: #fff !important;
  animation: none;
}

@keyframes premium-bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes premium-pulse {
  0% { border-color: rgba(234, 179, 8, 0.1); }
  100% { border-color: rgba(234, 179, 8, 0.4); }
}

@keyframes premium-bounce {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-2px); filter: brightness(1.2); }
}

.nav-item-special.active, .mob-nav-special.active {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.5), rgba(124, 58, 237, 0.5)) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(234, 179, 8, 0.8) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
  transform: translateY(-1px) !important;
}

.nav-item-special.active i, .mob-nav-special.active i {
  color: #fff !important;
  animation: none !important;
}

/* =======================================================
   BUY POINTS (crypto payment)
   ======================================================= */
#payOverlay .dialog-box {
  width: 720px;
  max-height: 82vh;
}
.acc-row-accent {
  background: linear-gradient(90deg, rgba(234,179,8,0.06), rgba(234,179,8,0.02));
  border-color: rgba(234,179,8,0.14);
}
button.acc-row-accent:hover {
  background: linear-gradient(90deg, rgba(234,179,8,0.12), rgba(234,179,8,0.04));
  border-color: rgba(234,179,8,0.3);
}
.pay-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 0;
  color: var(--text-muted);
  font-size: 14px;
}
.pay-loading i { font-size: 28px; color: var(--accent-purple-light); }
.pay-packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.pay-pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.pay-pkg:hover { border-color: rgba(124,58,237,0.4); background: rgba(124,58,237,0.05); }
.pay-pkg.selected {
  border-color: var(--accent-purple-light);
  background: rgba(124,58,237,0.1);
  box-shadow: 0 0 20px rgba(124,58,237,0.12);
}
.pay-pkg-points {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.pay-pkg-pts-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #c084fc;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(124, 58, 237, 0.08));
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 1.5px 6px;
  border-radius: 6px;
  line-height: 1.2;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.15);
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.4);
}
.pay-pkg-bonus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 1px 0 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34,197,94,0.16), rgba(16,185,129,0.08));
  border: 1px solid rgba(34,197,94,0.35);
  color: #4ade80;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(34,197,94,0.15);
  text-shadow: 0 0 8px rgba(74,222,128,0.35);
}
.pay-pkg-bonus i {
  font-size: 9px;
  filter: drop-shadow(0 0 5px rgba(74,222,128,0.5));
}
.pay-pkg-name { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.pay-pkg-usd { font-size: 12px; color: var(--text-muted); }
.pay-pkg-usd-old {
  text-decoration: line-through;
  color: var(--text-muted);
  opacity: 0.6;
  margin-right: 6px;
}
.pay-pkg-tag {
  position: absolute;
  top: -8px;
  right: -6px;
  background: #eab308;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  display: none;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pay-pkg-tag.show { display: block; }
.pay-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.pay-networks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.pay-net {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: var(--transition);
  min-width: 0;
  overflow: hidden;
}
.pay-net:hover { border-color: rgba(124,58,237,0.4); }
.pay-net.selected {
  border-color: var(--accent-purple-light);
  background: rgba(124,58,237,0.1);
}
.pay-net-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.pay-net-icon.tron { background: rgba(232,65,66,0.12); color: #ff4747; }
.pay-net-icon.bsc { background: rgba(240,185,11,0.12); color: #f0b90b; }
.pay-net-icon.poly { background: rgba(130,71,229,0.12); color: #a26bff; }
.pay-net-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.pay-net-name { font-size: 14.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-net-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-net-min { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; }
.pay-net.disabled { opacity: 0.45; cursor: not-allowed; }
.pay-net.disabled:hover { border-color: var(--border-color); }
.pay-net.disabled .pay-net-icon { filter: grayscale(0.8); }
.pay-net-guide {
  margin: 12px 0 14px;
  padding: 11px 13px;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.45;
  transition: all 0.2s ease;
}
.pay-net-guide-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}
.pay-net-guide-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 12.5px;
}
.pay-net-guide-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-net-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}
.pay-net-pill.speed {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.22);
}
.pay-net-pill.gas {
  background: rgba(234, 179, 8, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(234, 179, 8, 0.22);
}
.pay-net-guide-desc {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.pay-net-guide-desc strong {
  color: var(--text-primary);
}
.pay-submit {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.pay-submit:hover { filter: brightness(1.15); transform: translateY(-1px); }
.pay-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.pay-status-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.02);
  margin-bottom: 10px;
}
.pay-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.pay-status-step.active .pay-status-dot {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,0.6);
  animation: payPulse 1.6s ease infinite;
}
.pay-status-step.active { border-color: rgba(34,197,94,0.25); }
.pay-status-step.done { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.05); }
.pay-status-step.done .pay-status-dot { background: #22c55e; }
.pay-status-txt { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.pay-status-txt strong { color: var(--text-primary); }
.pay-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 0 18px;
}
.pay-qr {
  width: 210px;
  height: 210px;
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}
.pay-amount {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.pay-amount small { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pay-addr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.03);
  margin: 14px 0;
}
.pay-addr-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pay-copy-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.pay-copy-btn:hover { background: rgba(124,58,237,0.12); color: var(--accent-purple-light); border-color: rgba(124,58,237,0.4); }
.pay-countdown {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.pay-countdown strong { color: #fbbf24; }
.pay-note {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(234,179,8,0.05);
  border: 1px solid rgba(234,179,8,0.1);
  margin-bottom: 12px;
}
.pay-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 0 26px;
  text-align: center;
}
.pay-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #22c55e;
}
.pay-success-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.pay-success-sub { font-size: 13.5px; color: var(--text-muted); }
.pay-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 0 20px;
  text-align: center;
}
.pay-expired-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ef4444;
}
.pay-expired-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.pay-expired-sub { font-size: 13px; color: var(--text-muted); }
.pay-tx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--accent-purple-light);
  text-decoration: none;
  margin-top: 4px;
}
.pay-tx-link:hover { text-decoration: underline; }
@keyframes payPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (max-width: 640px) {
  .pay-networks { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .pay-packages { gap: 6px; }
  .pay-pkg { padding: 12px 4px; }
  .pay-pkg-points { font-size: 15px; }
  .pay-qr { width: 180px; height: 180px; }
  .pay-amount { font-size: 22px; }
}

/* ===== SITE SETTINGS NOTICES ===== */
.mm-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.mm-notice i { margin-top: 2px; flex-shrink: 0; }

.template-disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 640px;
  margin: -10px auto 26px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(129, 140, 248, 0.28);
  color: #c7d2fe;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.08);
}
.template-disclaimer i {
  flex-shrink: 0;
  font-size: 11px;
  color: #a5b4fc;
}
@media (max-width: 768px) {
  .template-disclaimer {
    white-space: normal;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    margin: -4px auto 14px !important;
    max-width: calc(100% - 24px) !important;
    border-radius: 999px !important;
    gap: 5px !important;
    opacity: 0.85 !important;
    line-height: 1.3 !important;
  }
  .template-disclaimer i {
    font-size: 10px !important;
  }
}

.pricing-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  font-size: 14px;
  line-height: 1.5;
}
.pricing-banner i { flex-shrink: 0; }
.pricing-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.spin-cd-blocked {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 20px;
  padding: 28px 24px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.08);
}
.spin-cd-blocked .spin-cd-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(245, 158, 11, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  font-size: 24px;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.25), inset 0 0 12px rgba(245, 158, 11, 0.08);
}

/* ===== HOW TO PAY ===== */
.howto-dialog .dialog-body {
  max-height: min(68vh, 640px);
  overflow-y: auto;
  padding-right: 8px;
}
.howto-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.howto-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(16, 185, 129, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 10px;
}
.howto-note i { filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.5)); flex-shrink: 0; }
.howto-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
}
.howto-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(96, 165, 250, 0.15));
  border: 1px solid rgba(167, 139, 250, 0.45);
  color: #c4b5fd;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}
.howto-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-primary, #e2e8f0);
  padding-top: 3px;
}
.howto-warn {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.howto-warn h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fbbf24;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}
.howto-warn ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.howto-warn li {
  color: #d6c7a8;
  font-size: 13.5px;
  line-height: 1.55;
}
.howto-warn strong { color: #fcd34d; }

.pay-howto-link {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.pay-howto-link i { margin-right: 4px; }
.pay-howto-link button {
  background: none;
  border: none;
  padding: 0;
  color: #a78bfa;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.pay-howto-link button:hover { color: #c4b5fd; }




/* =======================================================
   ULTRA-PREMIUM GENERATION ANIMATION SYSTEM (VIDEO & PHOTO)
   ======================================================= */

.ht-media-card {
  pointer-events: none;
  cursor: default;
  position: relative;
  animation: ht-media-glow 2.5s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.ht-media-card:hover {
  transform: none;
  box-shadow: none;
}

@keyframes ht-media-glow {
  0%, 100% { border-color: rgba(124, 58, 237, 0.25); box-shadow: 0 0 15px rgba(124, 58, 237, 0.1); }
  50% { border-color: rgba(167, 139, 250, 0.55); box-shadow: 0 0 25px rgba(124, 58, 237, 0.25); }
}

.ht-media-preview {
  position: relative;
  width: 100%;
  padding-top: 125%;
  background: #090812;
  overflow: hidden;
}

.ht-media-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ht-media-bg-video {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(124, 58, 237, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse at 70% 70%, rgba(59, 130, 246, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(236, 72, 153, 0.08) 0%, transparent 45%);
}

.ht-media-bg-photo {
  background:
    radial-gradient(ellipse at 35% 35%, rgba(249, 115, 22, 0.16) 0%, transparent 65%),
    radial-gradient(ellipse at 65% 65%, rgba(217, 70, 239, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 20%, rgba(251, 191, 36, 0.08) 0%, transparent 45%);
}

.ht-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(9, 8, 18, 0.4) 0%, transparent 40%, rgba(9, 8, 18, 0.85) 100%);
}

/* ── HUD Elements (Video REC & Photo Focus) ── */
.ht-hud-rec {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

.ht-hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: ht-rec-blink 1s ease-in-out infinite alternate;
}

@keyframes ht-rec-blink {
  from { opacity: 0.3; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1.1); }
}

.ht-hud-focus {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.9);
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.45);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(251, 191, 36, 0.25);
  backdrop-filter: blur(4px);
}

/* ── Film Sprockets (Video) ── */
.ht-sprockets-left, .ht-sprockets-right {
  position: absolute;
  top: -100%;
  bottom: -100%;
  width: 10px;
  z-index: 3;
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 35%, transparent 40%);
  background-size: 10px 18px;
  background-repeat: repeat-y;
  animation: ht-sprocket-roll 1.2s linear infinite;
}

.ht-sprockets-left { left: 4px; }
.ht-sprockets-right { right: 4px; }

@keyframes ht-sprocket-roll {
  from { transform: translateY(0); }
  to { transform: translateY(18px); }
}

/* ── Audio / Motion Waveform Equalizer (Video) ── */
.ht-waveform {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  padding: 0 6px;
}

.ht-waveform span {
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #c4b5fd 0%, #7c3aed 100%);
  border-radius: 2px;
  animation: ht-wave-bounce 1.2s ease-in-out infinite alternate;
}

.ht-waveform span:nth-child(1) { animation-delay: 0.1s; }
.ht-waveform span:nth-child(2) { animation-delay: 0.3s; }
.ht-waveform span:nth-child(3) { animation-delay: 0.5s; }
.ht-waveform span:nth-child(4) { animation-delay: 0.2s; }
.ht-waveform span:nth-child(5) { animation-delay: 0.4s; }
.ht-waveform span:nth-child(6) { animation-delay: 0.6s; }
.ht-waveform span:nth-child(7) { animation-delay: 0.15s; }
.ht-waveform span:nth-child(8) { animation-delay: 0.35s; }

@keyframes ht-wave-bounce {
  0% { height: 15%; opacity: 0.3; }
  100% { height: 100%; opacity: 0.95; }
}

/* ── Frame Stacking (Video) ── */
.ht-frame-stack {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 72px;
  z-index: 4;
}

.ht-frame-card {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background:
    linear-gradient(145deg, rgba(124, 58, 237, 0.45), rgba(59, 130, 246, 0.3)),
    radial-gradient(120% 120% at 30% 20%, rgba(196, 181, 253, 0.4), transparent 60%),
    #15102a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  transform-origin: center bottom;
  animation: ht-frame-cycle 14s linear infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity, filter;
}

.ht-frame-card::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%) 0 0 / 140% 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
  animation: ht-frame-scan 2.6s linear infinite;
}

.ht-frame-icon {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  font-size: 13px;
  color: #fff;
  background: rgba(124, 58, 237, 0.65);
  border: 1.5px solid rgba(196, 181, 253, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.55), inset 0 0 6px rgba(196, 181, 253, 0.4);
  z-index: 1;
  animation: ht-frame-icon-pulse 2.2s ease-in-out infinite;
}

@keyframes ht-frame-icon-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(139, 92, 246, 0.4), inset 0 0 5px rgba(196, 181, 253, 0.3); }
  50% { box-shadow: 0 0 18px rgba(139, 92, 246, 0.85), inset 0 0 9px rgba(196, 181, 253, 0.5); }
}

@keyframes ht-frame-scan {
  from { background-position: -60% 0, 0 0; }
  to { background-position: 160% 0, 0 0; }
}

@keyframes ht-frame-cycle {
  0%   { transform: translateY(-34px) translateX(var(--dx)) rotate(var(--in)) scale(0.85); opacity: 1; z-index: 20; filter: brightness(1.4) saturate(1.25); }
  4.5% { transform: translateY(0) translateX(var(--dx)) rotate(var(--rot)) scale(1.07); opacity: 1; z-index: 20; filter: brightness(1.2) saturate(1.1); }
  5.5% { transform: translateY(4px) translateX(var(--dx)) rotate(var(--rot)) scale(1.04); opacity: 1; z-index: 2; filter: brightness(1.05); }
  45%  { transform: translateY(18px) translateX(var(--dx)) rotate(var(--rot)) scale(0.96); opacity: 0.7; filter: brightness(0.8); }
  100% { transform: translateY(42px) translateX(var(--dx)) rotate(var(--rot)) scale(0.85); opacity: 0; z-index: 1; filter: brightness(0.45); }
}

/* ── Polaroid (Photo) ── */
.ht-polaroid {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 64%;
  background: #f7f5f2;
  padding: 7px 7px 22px 7px;
  border-radius: 4px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 4;
  animation: ht-polaroid-float 3.6s ease-in-out infinite;
}

@keyframes ht-polaroid-float {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1.5deg); }
  50% { transform: translateX(-50%) translateY(-7px) rotate(1.2deg); }
}

.ht-polaroid-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.2), rgba(217, 70, 239, 0.12)),
    #13101d;
  overflow: hidden;
  border-radius: 2px;
}

.ht-polaroid-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.18) 48%, transparent 62%);
  background-size: 200% 200%;
  animation: ht-sheen-sweep 2.8s ease-in-out infinite;
}

@keyframes ht-sheen-sweep {
  0% { background-position: -80% 0; }
  100% { background-position: 180% 0; }
}

/* Aperture Iris Lens Animation */
.ht-iris-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.ht-iris {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px dashed rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 15px rgba(251, 146, 60, 0.35);
  animation: ht-iris-spin 8s linear infinite;
}

@keyframes ht-iris-spin {
  0% { transform: rotate(0deg) scale(0.92); }
  50% { transform: rotate(180deg) scale(1.08); border-color: rgba(217, 70, 239, 0.6); }
  100% { transform: rotate(360deg) scale(0.92); }
}

.ht-polaroid-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: rgba(251, 191, 36, 0.85);
  z-index: 4;
  animation: ht-polaroid-icon-pulse 2s ease-in-out infinite;
}

@keyframes ht-polaroid-icon-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)); }
}

.ht-polaroid-cap {
  text-align: center;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8c8077;
  padding-top: 7px;
  font-weight: 700;
}

/* ── Prism RGB Scanline (Photo) ── */
.ht-scanline-prism {
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  z-index: 3;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(239, 68, 68, 0.08) 20%,
    rgba(251, 191, 36, 0.16) 45%,
    rgba(168, 85, 247, 0.12) 75%,
    transparent 100%);
  animation: ht-scanline-move 2.6s ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
}

@keyframes ht-scanline-move {
  0% { transform: translateY(-120%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(320%); opacity: 0; }
}

/* ── Status Label & Rotating Text ── */
.ht-media-label {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ht-media-label-photo {
  color: rgba(251, 146, 60, 0.95);
  text-shadow: 0 0 10px rgba(251, 146, 60, 0.3);
}

.ht-media-label-video {
  color: rgba(196, 181, 253, 0.95);
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

.ht-media-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f472b6;
  animation: ht-media-dot-blink 1.2s ease-in-out infinite;
}

.ht-media-label-video .ht-media-dot {
  background: #c4b5fd;
  animation-name: ht-media-dot-blink-video;
}

@keyframes ht-media-dot-blink-video {
  0%, 100% { opacity: 0.25; background: #7c3aed; box-shadow: none; }
  50% { opacity: 1; background: #c4b5fd; box-shadow: 0 0 8px rgba(196, 181, 253, 0.9); }
}

@keyframes ht-media-dot-blink {
  0%, 100% { opacity: 0.25; background: #f97316; box-shadow: none; }
  50% { opacity: 1; background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.9); }
}

.ht-media-text {
  display: inline-block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ht-media-text.ht-text-in {
  animation: ht-text-fade-in 0.3s ease forwards;
}

@keyframes ht-text-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ── 60FPS Smooth 3D Film Reel Stack ── */
.ht-frame-stack {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 112px;
  height: 74px;
  z-index: 4;
  perspective: 500px;
}

.ht-frame-card {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1.5px solid rgba(196, 181, 253, 0.5);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.6), rgba(59, 130, 246, 0.35)),
    #130e28;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  transform-style: preserve-3d;
  animation: ht-frame-cycle-smooth 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.ht-frame-card::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(90deg, transparent 0 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%) 0 0 / 140% 100% no-repeat;
  animation: ht-frame-scan 2.2s ease-in-out infinite;
}

.ht-frame-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border: 1.5px solid rgba(196, 181, 253, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.6);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ht-frame-icon-pulse 2s ease-in-out infinite;
}

@keyframes ht-frame-cycle-smooth {
  0% {
    transform: translate3d(0, -36px, -70px) rotateX(18deg) rotateZ(var(--rot)) scale(0.8);
    opacity: 0;
  }
  15% {
    transform: translate3d(0, -16px, -25px) rotateX(8deg) rotateZ(var(--rot)) scale(0.92);
    opacity: 0.75;
  }
  40% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(var(--rot)) scale(1.05);
    opacity: 1;
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.45);
  }
  75% {
    transform: translate3d(0, 20px, -35px) rotateX(-8deg) rotateZ(var(--rot)) scale(0.9);
    opacity: 0.65;
  }
  100% {
    transform: translate3d(0, 40px, -90px) rotateX(-18deg) rotateZ(var(--rot)) scale(0.75);
    opacity: 0;
  }
}


/* ── 60FPS Smooth Quantum Polaroid Photo Animation ── */
.ht-polaroid {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 66%;
  background: linear-gradient(180deg, #faf8f5 0%, #ebe7e0 100%);
  padding: 8px 8px 24px 8px;
  border-radius: 6px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(249, 115, 22, 0.15);
  z-index: 4;
  perspective: 600px;
  animation: ht-polaroid-float-3d 3.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes ht-polaroid-float-3d {
  0%, 100% {
    transform: translate3d(-50%, 0, 0) rotateX(4deg) rotateZ(-1.8deg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 15px rgba(249, 115, 22, 0.12);
  }
  50% {
    transform: translate3d(-50%, -8px, 12px) rotateX(-2deg) rotateZ(1.5deg);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7), 0 0 28px rgba(249, 115, 22, 0.25);
  }
}

.ht-polaroid-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.22), rgba(217, 70, 239, 0.14)),
    #110e1a;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
}

.ht-polaroid-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  background-size: 220% 220%;
  animation: ht-sheen-sweep 2.6s ease-in-out infinite;
  z-index: 2;
}

@keyframes ht-sheen-sweep {
  0% { background-position: -90% 0; }
  100% { background-position: 190% 0; }
}

.ht-iris-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.ht-iris {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px dashed rgba(251, 191, 36, 0.65);
  box-shadow: 0 0 18px rgba(251, 146, 60, 0.4), inset 0 0 10px rgba(217, 70, 239, 0.2);
  animation: ht-iris-spin 7s linear infinite;
  will-change: transform;
}

@keyframes ht-iris-spin {
  0% { transform: rotate(0deg) scale(0.92); }
  50% { transform: rotate(180deg) scale(1.08); border-color: rgba(217, 70, 239, 0.75); }
  100% { transform: rotate(360deg) scale(0.92); }
}

.ht-polaroid-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fbbf24;
  z-index: 4;
  animation: ht-polaroid-icon-pulse 2s ease-in-out infinite;
}

@keyframes ht-polaroid-icon-pulse {
  0%, 100% { opacity: 0.65; transform: scale(0.94); filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4)); }
  50% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.85)); }
}

.ht-polaroid-cap {
  text-align: center;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #7c7068;
  padding-top: 8px;
  font-weight: 800;
}

.ht-scanline-prism {
  position: absolute;
  left: 0;
  right: 0;
  height: 32%;
  z-index: 5;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(239, 68, 68, 0.1) 20%,
    rgba(251, 191, 36, 0.22) 50%,
    rgba(168, 85, 247, 0.14) 80%,
    transparent 100%);
  animation: ht-scanline-move 2.4s ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes ht-scanline-move {
  0% { transform: translate3d(0, -120%, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate3d(0, 320%, 0); opacity: 0; }
}


/* Polaroid Minimalist Spectrum Bar */
.ht-polaroid-spectrum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  padding-top: 10px;
}

.ht-polaroid-spectrum span {
  width: 9px;
  height: 2.5px;
  border-radius: 1px;
  opacity: 0.85;
}

.ht-polaroid-spectrum span:nth-child(1) { background: #ef4444; }
.ht-polaroid-spectrum span:nth-child(2) { background: #f59e0b; }
.ht-polaroid-spectrum span:nth-child(3) { background: #10b981; }
.ht-polaroid-spectrum span:nth-child(4) { background: #3b82f6; }


/* ── Premium Kinetic Text Blur & Slide Transition ── */
.ht-media-text {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.ht-media-text.ht-text-in {
  animation: ht-text-kinetic-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ht-text-kinetic-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.95);
    filter: blur(5px);
    letter-spacing: 2.5px;
  }
  60% {
    opacity: 0.85;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    letter-spacing: 1.5px;
  }
}


/* =======================================================
   HISTORY CARDS STAGGERED CASCADE ENTRANCE & EXIT ANIMATIONS
   ======================================================= */

.ht-grid {
  transition: opacity 0.18s cubic-bezier(0.4, 0, 1, 1), transform 0.18s cubic-bezier(0.4, 0, 1, 1);
}

.ht-grid.ht-grid-exit {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.96);
  pointer-events: none;
}

/* Staggered entrance animation for cards */
.ht-card {
  animation: htCardCascadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--card-i, 0) * 0.04s);
  will-change: transform, opacity, filter;
}

@keyframes htCardCascadeIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.92);
    filter: blur(4px);
  }
  60% {
    opacity: 0.85;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}


/* Explicit Card Exit Animation when switching tabs */
.ht-grid-exit .ht-card,
.ht-card.ht-card-exit {
  animation: htCardCascadeOut 0.22s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

@keyframes htCardCascadeOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -18px, 0) scale(0.94);
    filter: blur(5px);
  }
}


/* Status Banner Redirect Button */
.ht-banner-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(168, 85, 247, 0.4));
  border: 1px solid rgba(196, 181, 253, 0.45);
  border-radius: 20px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  position: relative;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ht-banner-link:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(168, 85, 247, 0.65));
  border-color: rgba(196, 181, 253, 0.85);
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.45);
}

.ht-banner-link i {
  font-size: 11px;
  color: #e9d5ff;
  transition: transform 0.2s ease;
}

.ht-banner-link:hover i {
  transform: translateX(2px);
}


/* FREE SPIN READY BADGE REDESIGN */
.spin-ready-badge {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(5, 150, 105, 0.08)) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 12px 35px -8px rgba(16, 185, 129, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  padding: 18px 28px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  animation: spinBadgeFloat 3s ease-in-out infinite alternate !important;
}

@keyframes spinBadgeFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

.spin-ready-icon-wrap {
  width: 54px !important;
  height: 54px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.65), inset 0 2px 4px rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: spinIconPulse 2s ease-in-out infinite !important;
}

@keyframes spinIconPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 22px rgba(16, 185, 129, 0.6); }
  50% { transform: scale(1.08); box-shadow: 0 0 35px rgba(16, 185, 129, 0.85); }
}

.spin-ready-text-wrap {
  text-align: left !important;
}

.spin-ready-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #ffffff, #a7f3d0) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
}

.spin-ready-sub {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 500 !important;
}

.spin-ready-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 10px #10b981 !important;
  display: inline-block !important;
  animation: dotBlink 1.5s ease-in-out infinite !important;
}

@keyframes dotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}


/* FREE SPIN CLAIMED BADGE REDESIGN */
.spin-claimed-badge {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(217, 119, 6, 0.08)) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 12px 35px -8px rgba(245, 158, 11, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  padding: 18px 28px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.spin-claimed-icon-wrap {
  width: 54px !important;
  height: 54px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.65), inset 0 2px 4px rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.spin-claimed-text-wrap {
  text-align: left !important;
}

.spin-claimed-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #ffffff, #fef3c7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
}

.spin-claimed-sub {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}


/* FREE SPIN COUNTDOWN TIMER CARD REDESIGN */
.spin-timer-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(217, 119, 6, 0.05)) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 12px 35px -8px rgba(245, 158, 11, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  padding: 20px 28px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.spin-timer-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.spin-timer-orb {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: spinOrbRotate 6s linear infinite !important;
}

@keyframes spinOrbRotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

.spin-timer-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #ffffff, #fef3c7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 1px !important;
}

.spin-timer-boxes {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.spin-timer-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.spin-timer-num {
  font-size: 28px !important;
  font-weight: 800 !important;
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  min-width: 58px !important;
  text-align: center !important;
  line-height: 1 !important;
}

.spin-timer-label {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
}

.spin-timer-colon {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #f59e0b !important;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.6) !important;
  margin-top: -16px !important;
  animation: colonPulse 1s ease-in-out infinite alternate !important;
}

@keyframes colonPulse {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}


/* FREE SPIN UNAVAILABLE BADGE REDESIGN (REDDISH CRIMSON GLASS) */
.spin-unavailable-badge {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(185, 28, 28, 0.08)) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 12px 35px -8px rgba(239, 68, 68, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  padding: 18px 28px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.spin-unavailable-icon-wrap {
  width: 54px !important;
  height: 54px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.65), inset 0 2px 4px rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.spin-unavailable-text-wrap {
  text-align: left !important;
}

.spin-unavailable-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #ffffff, #fca5a5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
}

.spin-unavailable-sub {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}


/* HOW TO PAY MODAL REDESIGN */
#howToPayOverlay .dialog-box {
  width: 760px !important;
  max-width: 94vw !important;
  max-height: 88vh !important;
}

.dialog-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.dialog-subtitle {
  font-size: 12px !important;
  color: var(--text-muted, rgba(255, 255, 255, 0.5)) !important;
  font-weight: 500 !important;
}

.howto-note {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(5, 150, 105, 0.05)) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #a7f3d0 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

.howto-note-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #10b981 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.howto-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

@media (max-width: 640px) {
  .howto-grid {
    grid-template-columns: 1fr !important;
  }
}

.howto-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  transition: all 0.2s ease !important;
}

.howto-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

.howto-card-final {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(124, 58, 237, 0.05)) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  margin-bottom: 16px !important;
}

.howto-num {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(124, 58, 237, 0.15)) !important;
  border: 1px solid rgba(167, 139, 250, 0.5) !important;
  color: #ddd6fe !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.25) !important;
}

.howto-num-check {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
}

.howto-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.howto-step-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  line-height: 1.3 !important;
}

.howto-text {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.howto-text strong {
  color: #c4b5fd !important;
}

.howto-warn {
  margin-top: 4px !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
  background: rgba(245, 158, 11, 0.06) !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
}

.howto-warn h4 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #fbbf24 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}

.howto-warn-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

@media (max-width: 640px) {
  .howto-warn-grid {
    grid-template-columns: 1fr !important;
  }
}

.howto-warn-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: #fef3c7 !important;
}

.howto-warn-item i {
  color: #f59e0b !important;
  font-size: 14px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

body.has-announcement-banner .mob-drawer {
  top: 40px !important;
}

@keyframes announcementSlideDown {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.site-announcement-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.site-announcement-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

.site-announcement-text {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  letter-spacing: 0.2px !important;
}

.site-announcement-text a {
  color: #ffffff !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

.site-announcement-close {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.site-announcement-close:hover {
  background: rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* 1. GREENISH THEME (Good News / Success) */
.site-announcement-banner.theme-green {
  background: linear-gradient(90deg, #059669 0%, #10b981 50%, #047857 100%) !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35) !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.4) !important;
}

/* 2. ORANGISH THEME (Warning / Info / Notice) */
.site-announcement-banner.theme-orange {
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #b45309 100%) !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35) !important;
  border-bottom: 1px solid rgba(252, 211, 77, 0.4) !important;
}

/* 3. REDDISH THEME (Critical Error / Alert) */
.site-announcement-banner.theme-red {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #b91c1c 100%) !important;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.35) !important;
  border-bottom: 1px solid rgba(248, 113, 113, 0.4) !important;
}


/* GLOBAL SITE ANNOUNCEMENT BANNER */
.site-announcement-banner {
  width: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  min-height: 40px !important;
  z-index: 1005 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 48px 8px 20px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  animation: announcementSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition: all 0.25s ease !important;
}

.site-announcement-banner[hidden] {
  display: none !important;
}

body.has-announcement-banner .header {
  top: 40px !important;
}

body.has-announcement-banner .main {
  padding-top: calc(var(--header-height) + 40px) !important;
}


/* COOKIE CONSENT BANNER REDESIGN */
.cookie-banner {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  max-width: 440px !important;
  width: calc(100vw - 48px) !important;
  z-index: 99990 !important;
  background: linear-gradient(145deg, rgba(20, 20, 48, 0.96), rgba(12, 12, 32, 0.98)) !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(124, 58, 237, 0.2) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  opacity: 0 !important;
  transform: translateY(20px) scale(0.95) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cookie-banner.open {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.cookie-banner[hidden] {
  display: none !important;
}

.cookie-content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.cookie-icon {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.12)) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #f59e0b !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3) !important;
}

.cookie-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  text-align: left !important;
}

.cookie-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.cookie-desc {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 0 !important;
}

.cookie-desc a {
  color: #c4b5fd !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.cookie-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

.cookie-btn {
  padding: 8px 18px !important;
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.cookie-btn-essential {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.cookie-btn-essential:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.cookie-btn-accept {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35) !important;
}

.cookie-btn-accept:hover {
  background: linear-gradient(135deg, #6d28d9, #9333ea) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 480px) {
  .cookie-banner {
    left: 12px !important;
    bottom: 12px !important;
    width: calc(100vw - 24px) !important;
  }
}

/* ==========================================================================
   COMPREHENSIVE MULTI-DEVICE RESPONSIVE SUITE (TABLET, MOBILE & ULTRA-WIDE)
   ========================================================================== */

/* ── Ultra-Wide Screens & 4K Displays (> 1440px) ── */
@media (min-width: 1440px) {
  .header-inner,
  .main,
  .footer-inner,
  .legal-container {
    max-width: 1380px !important;
    margin: 0 auto !important;
  }
}

/* ── Landscape Tablets & iPad Pro (901px – 1180px) ── */
@media (min-width: 901px) and (max-width: 1180px) {
  .header-inner {
    padding: 0 20px;
  }

  .nav {
    gap: 4px;
  }

  .nav-item {
    padding: 6px 12px;
    font-size: 13px;
  }

  .template-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  .history-grid,
  .favorites-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  .pricing-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }

  .bp-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }

  .modal-content,
  .auth-glass,
  .buy-points-modal,
  .diag-modal {
    max-width: 88vw !important;
  }
}

/* ── All Handheld & Tablet Screens (< 900px) Header Engine ── */
@media (max-width: 900px) {
  .hamburger {
    display: inline-flex !important;
  }

  .header .nav {
    display: none !important;
  }

  /* Show ONLY the Logo Icon on mobile header, hide "Nonnic" text */
  .header .logo-text {
    display: none !important;
  }

  .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
  }

  .logo {
    margin-right: auto !important;
    margin-left: 10px !important;
  }

  .logo-mark {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
  }

  .user-section {
    margin-left: auto !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ── Portrait Tablets & iPad Air / iPad Mini (769px – 900px) ── */
@media (min-width: 769px) and (max-width: 900px) {
  .template-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .history-grid,
  .favorites-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .bp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .age-card {
    max-width: 85vw !important;
    padding: 32px 28px !important;
  }

  .age-commit-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .modal-content,
  .auth-glass,
  .buy-points-modal,
  .diag-modal {
    max-width: 92vw !important;
  }
}

/* ── Large Mobile & Phablets / Foldables (481px – 768px) ── */
@media (min-width: 481px) and (max-width: 768px) {
  .hamburger {
    display: inline-flex !important;
  }

  .header .nav {
    display: none !important;
  }

  .header-inner {
    padding: 0 16px;
  }

  .logo {
    margin-right: auto;
    margin-left: 12px;
  }

  .user-section {
    margin-left: 0;
    gap: 8px;
  }

  .template-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .history-grid,
  .favorites-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .bp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .age-commit-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .mm-layout {
    flex-direction: column !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }

  .mm-controls-section,
  .mm-preview-section {
    width: 100% !important;
    padding: 16px !important;
  }
}

/* ── All Handheld Devices (< 768px) General Rules ── */
@media (max-width: 768px) {
  /* Prevent iOS Safari auto-zoom on input focus */
  input, select, textarea {
    font-size: 16px !important;
  }

  button, a {
    -webkit-tap-highlight-color: transparent;
  }

  /* Hero Section */
  .hero-section {
    padding: 36px 16px 20px;
    text-align: center;
  }

  .hero-title {
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .hero-subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    margin: 0 auto 20px !important;
  }

  .hero-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .hero-cat {
    padding: 9px 16px;
    font-size: 13.5px;
  }

  /* Template Filters & Search Bar */
  .filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  .filter-group-wrap {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .filter-scroll-hint {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
    opacity: 0;
    visibility: hidden;
  }

  .filter-scroll-hint.visible {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .filter-scroll-hint-left {
    left: 0 !important;
    background: linear-gradient(90deg, rgba(12, 12, 30, 0.98) 0%, rgba(12, 12, 30, 0.85) 50%, rgba(8, 8, 22, 0) 100%) !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
  }

  .filter-scroll-hint-right {
    right: 0 !important;
    background: linear-gradient(90deg, rgba(8, 8, 22, 0) 0%, rgba(12, 12, 30, 0.85) 50%, rgba(12, 12, 30, 0.98) 100%) !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }

  .filter-scroll-hint-left i {
    color: #c084fc !important;
    font-size: 15px !important;
    animation: filterSwipePulseLeft 1.5s infinite ease-in-out !important;
  }

  .filter-scroll-hint-right i {
    color: #c084fc !important;
    font-size: 15px !important;
    animation: filterSwipePulseRight 1.5s infinite ease-in-out !important;
  }

  @keyframes filterSwipePulseLeft {
    0%, 100% {
      transform: translateX(3px);
      opacity: 0.45;
      filter: drop-shadow(0 0 0px transparent);
    }
    50% {
      transform: translateX(-3px);
      opacity: 1;
      filter: drop-shadow(0 0 10px #c084fc);
    }
  }

  @keyframes filterSwipePulseRight {
    0%, 100% {
      transform: translateX(-3px);
      opacity: 0.45;
      filter: drop-shadow(0 0 0px transparent);
    }
    50% {
      transform: translateX(3px);
      opacity: 1;
      filter: drop-shadow(0 0 10px #c084fc);
    }
  }

  .filter-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    touch-action: pan-x !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
  }

  .filter-group::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    user-select: none !important;
  }

  .search-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
  }

  /* Modals & Overlays */
  .modal-overlay {
    padding: 10px;
  }

  .modal-content,
  .auth-glass,
  .buy-points-modal,
  .diag-modal,
  .report-modal,
  .user-modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 18px !important;
    margin: auto !important;
  }

  .mm-media-content {
    flex-direction: column !important;
    height: auto !important;
    min-height: 260px !important;
  }

  /* Horizontal Scroll Tabs */
  .history-tabs,
  .pricing-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .history-tabs::-webkit-scrollbar,
  .pricing-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Spin Wheel Canvas */
  .spin-wheel-container {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ── Smartphones (< 480px) ── */
@media (max-width: 480px) {
  .header-inner {
    padding: 0 10px;
  }

  .logo {
    margin-left: 8px;
  }

  .logo-text {
    font-size: 16px;
  }

  .logo-mark {
    width: 28px;
    height: 28px;
    font-size: 13px;
    border-radius: 8px;
  }

  /* Hide username on ultra-small screens, show avatar & points */
  .user-name {
    display: none !important;
  }

  .user-points {
    padding: 4px 8px;
    font-size: 11.5px;
    gap: 4px;
  }

  .header .btn-signin {
    padding: 6px 10px;
    font-size: 11px;
  }

  .hero-title {
    font-size: 22px !important;
  }

  .template-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .history-grid,
  .favorites-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .bp-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Age Gate Modal Card */
  .age-card {
    padding: 20px 14px !important;
    max-width: 95vw !important;
    border-radius: 18px !important;
  }

  .age-commit-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .age-rules {
    gap: 10px !important;
  }

  .age-btn {
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* Mobile Drawer Safe Areas */
  .mob-drawer {
    width: 270px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .cookie-banner {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
  }
}