*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --bg: #060614;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-deep: rgba(255, 255, 255, 0.065);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --text: #f0f0f8;
  --text-dim: rgba(240, 240, 248, 0.7);
  --text-muted: rgba(240, 240, 248, 0.62);
  --accent: #8b5cf6;
  --accent-light: #a78bfa;
  --accent-glow: rgba(139, 92, 246, 0.35);
  --accent2: #ec4899;
  --accent2-glow: rgba(236, 72, 153, 0.3);
  --accent3: #06d6a0;
  --accent3-glow: rgba(6, 214, 160, 0.3);
  --accent4: #3b82f6;
  --gradient-main: linear-gradient(
    135deg,
    #8b5cf6 0%,
    #a855f7 40%,
    #ec4899 100%
  );
  --gradient-warm: linear-gradient(135deg, #f97316, #ec4899);
  --gradient-cool: linear-gradient(135deg, #06d6a0, #3b82f6);
  --radius: 20px;
  --radius-lg: 24px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
#app {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px 120px;
  min-height: 100vh;
}
@media (min-width: 768px) {
  #app {
    max-width: 720px;
  }
}
@media (min-width: 1024px) {
  #app {
    max-width: 1100px;
    padding: 0 32px 120px;
  }
}
@media (min-width: 1400px) {
  #app {
    max-width: 1300px;
    padding: 0 40px 120px;
  }
}
@media (min-width: 1700px) {
  #app {
    max-width: 1440px;
    padding: 0 48px 120px;
  }
}
@media (min-width: 768px) {
  .header {
    padding: 16px 24px;
  }
  .trending-card {
    width: 155px;
  }
  .trending-scroll {
    gap: 16px;
  }
  .section-title-text {
    font-size: 1.2rem;
  }
  .daily-pick-card {
    padding: 22px;
  }
}
@media (min-width: 1024px) {
  .header {
    padding: 18px 28px;
    border-radius: 20px;
  }
  .trending-card {
    width: 170px;
  }
  .trending-scroll {
    gap: 18px;
  }
}
#particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  animation: blobFloat 35s infinite ease-in-out;
}
.blob-1 {
  width: 350px;
  height: 350px;
  background: var(--accent);
  top: -150px;
  left: -100px;
}
.blob-2 {
  width: 300px;
  height: 300px;
  background: var(--accent2);
  top: 35%;
  right: -120px;
  animation-delay: -8s;
  animation-duration: 40s;
}
.blob-3 {
  width: 250px;
  height: 250px;
  background: var(--accent3);
  bottom: -100px;
  left: 20%;
  animation-delay: -16s;
  animation-duration: 38s;
}
.blob-4 {
  display: none;
}
@keyframes blobFloat {
  0%,
  to {
    transform: translate(0) scale(1) rotate(0);
  }
  25% {
    transform: translate(40px, -50px) scale(1.15) rotate(5deg);
  }
  50% {
    transform: translate(-30px, 30px) scale(0.9) rotate(-5deg);
  }
  75% {
    transform: translate(20px, 40px) scale(1.1) rotate(3deg);
  }
}
.glass-deep {
  background: var(--glass-deep);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px #0000004d;
  transition:
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.glass-deep:hover {
  border-color: var(--glass-border-hover);
}
.glass-pill {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  transition: all 0.3s var(--ease);
}
.glass-pill:hover {
  background: #ffffff14;
  border-color: var(--glass-border-hover);
}
.header {
  position: sticky;
  top: 8px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin: 8px 0 18px;
  gap: 12px;
  border-radius: var(--radius-lg);
}
.header-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.logo-icon {
  font-size: 1.35rem;
}
.logo-text {
  color: var(--text);
}
.logo-accent {
  color: var(--accent-light);
}
.tab-switch {
  display: flex;
  gap: 4px;
  background: #ffffff0a;
  border-radius: 12px;
  padding: 3px;
}
.tab-btn {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tab-icon {
  font-size: 0.9rem;
}
.tab-btn.active {
  background: var(--gradient-main);
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.tab-btn:hover:not(.active) {
  color: var(--text);
  background: #ffffff0f;
}
.header-right {
  flex-shrink: 0;
}
.user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}
.user-btn:hover {
  color: var(--text);
}
.user-name {
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Support / Bug Report Banner */
.support-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(139, 92, 246, .06);
  border: 1px solid rgba(139, 92, 246, .15);
  color: var(--text-dim);
  text-decoration: none;
  font-size: .8rem;
  transition: all .2s var(--ease);
}
.support-banner:hover {
  background: rgba(139, 92, 246, .12);
  border-color: rgba(139, 92, 246, .3);
  color: var(--text);
  transform: translateY(-1px);
}
.support-banner-icon { font-size: 1rem; flex-shrink: 0; }
.support-banner-text { flex: 1; line-height: 1.3; }
.support-banner-arrow {
  flex-shrink: 0;
  opacity: .5;
  transition: opacity .2s, transform .2s;
}
.support-banner:hover .support-banner-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.ai-section {
  position: relative;
  z-index: 1;
  padding: 20px;
  margin-bottom: 16px;
  overflow: hidden;
}
.ai-section:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  background: var(--gradient-main);
  opacity: 0.12;
  z-index: -1;
}
.ai-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ai-badge {
  background: var(--gradient-main);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.5px;
}
@keyframes badgePulse {
  0%,
  to {
    box-shadow: 0 0 0 0 var(--accent-glow);
  }
  50% {
    box-shadow: 0 0 16px 4px var(--accent-glow);
  }
}
.ai-header h2 {
  font-size: 1rem;
  font-weight: 700;
}
.ai-input-wrap {
  position: relative;
  margin-bottom: 12px;
}
.ai-input {
  width: 100%;
  background: #ffffff0a;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.88rem;
  padding: 14px 50px 14px 16px;
  resize: none;
  outline: none;
  transition: all 0.3s var(--ease);
  line-height: 1.5;
}
.ai-input::placeholder {
  color: var(--text-muted);
}
.ai-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: #ffffff0f;
}
.ai-search-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: var(--gradient-main);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
  box-shadow: 0 2px 12px var(--accent-glow);
}
.ai-search-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 20px var(--accent-glow);
}
.ai-search-btn:active {
  transform: scale(0.95);
}
.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-chip {
  border: none;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 100px;
  cursor: pointer;
  background: #ffffff0a;
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.ai-chip:hover {
  background: #8b5cf61f;
  border-color: var(--accent);
  color: var(--accent-light);
  transform: translateY(-1px);
}
.section-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.title-glow {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tab-content-wrapper {
  position: relative;
}
.tab-pane {
  animation: tabFadeIn 0.35s var(--ease);
}
@keyframes tabFadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tab-pane-exit {
  animation: tabFadeOut 0.2s var(--ease) forwards;
}
@keyframes tabFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.mood-section {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}
.mood-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mood-btn {
  border: none;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  background: #ffffff0f;
  border: 1px solid var(--glass-border);
  color: var(--text);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.mood-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100px;
  opacity: 0;
  transition: opacity 0.3s;
}
.mood-btn:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: var(--glass-border-hover);
  box-shadow: 0 4px 16px #0003;
}
.mood-btn.active {
  background: var(--gradient-main) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px var(--accent-glow), 0 0 0 2px rgba(139, 92, 246, 0.5), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transform: translateY(-2px) scale(1.05) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.filters-section {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  overflow: hidden;
}
.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.filters-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}
.filters-icon {
  font-size: 1.1rem;
}
.filters-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reset-filters-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.3s var(--ease);
  display: flex;
}
.reset-filters-btn:hover {
  color: var(--accent);
  background: #8b5cf61a;
}
.chevron {
  transition: transform 0.3s var(--ease);
  color: var(--text-dim);
}
.filters-section.open .chevron {
  transform: rotate(180deg);
}
.filters-body {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition:
    max-height 0.4s var(--ease),
    visibility 0s linear 0.4s;
}
.filters-section.open .filters-body {
  max-height: 500px;
  visibility: visible;
  transition:
    max-height 0.4s var(--ease),
    visibility 0s linear 0s;
}
.filters-group {
  padding: 0 18px 18px;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.filter-row:last-child {
  margin-bottom: 0;
}
.filter-row label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
  min-width: 95px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-emoji {
  font-size: 1rem;
}
.glass-select {
  flex: 1;
  appearance: none;
  background: #ffffff0a;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.85rem;
  padding: 10px 34px 10px 14px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.glass-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.glass-select option {
  background: #1a1a2e;
  color: var(--text);
}
.glass-select.small {
  max-width: 100px;
}
.year-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.range-dash {
  color: var(--text-muted);
}
.range-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.glass-range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 3px;
  background: #ffffff14;
  outline: none;
}
.glass-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gradient-main);
  cursor: pointer;
  box-shadow: 0 2px 10px var(--accent-glow);
  transition: transform 0.2s var(--spring);
}
.glass-range::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}
.range-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-light);
  min-width: 30px;
  text-align: center;
}
.hidden {
  display: none !important;
}
.pick-section {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.pick-btn {
  position: relative;
  width: 100%;
  padding: 20px 32px;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  overflow: hidden;
  font-family: var(--font);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.pick-btn:active,
.pick-btn:focus {
  outline: none;
}
.pick-btn-bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-main);
  border-radius: var(--radius-lg);
  transition: all 0.4s var(--ease);
}
.pick-btn-bg:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  0% {
    transform: translate(-50%);
  }
  to {
    transform: translate(50%);
  }
}
.pick-btn:hover .pick-btn-bg {
  transform: scale(1.02);
  box-shadow: 0 8px 40px var(--accent-glow);
}
.pick-btn:active .pick-btn-bg {
  transform: scale(0.98);
}
.pick-btn-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
}
.pick-btn-icon {
  font-size: 1.5rem;
  display: inline-block;
  animation: diceShake 3s infinite;
}
@keyframes diceShake {
  0%,
  85%,
  to {
    transform: rotate(0) scale(1);
  }
  87% {
    transform: rotate(20deg) scale(1.1);
  }
  89% {
    transform: rotate(-20deg) scale(1.1);
  }
  91% {
    transform: rotate(15deg) scale(1.05);
  }
  93% {
    transform: rotate(-15deg) scale(1.05);
  }
  95% {
    transform: rotate(5deg);
  }
  97% {
    transform: rotate(-5deg);
  }
}
.lucky-btn {
  padding: 12px 28px;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  letter-spacing: 0.01em;
}
.lucky-btn:hover {
  border-color: var(--accent3);
  color: var(--accent3);
  background: #06d6a00f;
  border-style: solid;
}
.lucky-sparkle {
  transition: transform 0.3s var(--spring);
}
.lucky-btn:hover .lucky-sparkle {
  transform: rotate(20deg) scale(1.2);
}
.result-section {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
  animation: slideUp 0.5s var(--ease);
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.result-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--glass-border);
  touch-action: pan-y;
}
.result-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(0.3);
  transform: scale(1.2);
  z-index: 0;
}
.result-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  padding: 20px;
  background: #060614a6;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cardReveal 0.6s var(--ease);
}
@keyframes cardReveal {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.result-poster-wrap {
  position: relative;
  flex-shrink: 0;
  width: 140px;
  height: 210px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px #0006;
}
.result-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.result-card:hover .result-poster {
  transform: scale(1.05);
}
.result-rating-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #0009;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(251, 191, 36, 0.2);
}
.result-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.result-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.result-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.meta-tag {
  background: #ffffff0f;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.result-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-dim);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  flex: 1;
}
.result-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: #ffffff0a;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.action-btn:hover {
  background: #ffffff14;
  color: var(--text);
  transform: translateY(-1px);
  border-color: var(--glass-border-hover);
}
.action-btn svg {
  flex-shrink: 0;
}
.save-btn.saved {
  background: #ec48991f;
  border-color: #ec48994d;
  color: var(--accent2);
}
.save-btn.saved svg {
  fill: var(--accent2);
}
.trailer-btn:hover {
  border-color: #8b5cf666;
  color: var(--accent-light);
}
.link-btn:hover {
  border-color: #3b82f666;
  color: #60a5fa;
}
.ai-analyze-btn {
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(99,102,241,.15));
  border-color: rgba(139,92,246,.4);
  color: #c084fc;
  text-decoration: none;
}
.ai-analyze-btn:hover {
  background: linear-gradient(135deg, rgba(139,92,246,.3), rgba(99,102,241,.25));
  border-color: rgba(139,92,246,.7);
  color: #e0b3ff;
  box-shadow: 0 2px 12px rgba(139,92,246,.25);
}
.ai-analyze-btn svg {
  color: #818cf8;
}
@media (max-width: 600px) {
  .ai-analyze-btn {
    padding: 7px 10px;
    font-size: 0.7rem;
  }
  .ai-analyze-btn span {
    display: none;
  }
}
.saved-item-link {
  cursor: pointer;
  font-size: 1.1rem;
  opacity: 0.6;
  transition: opacity 0.2s;
  margin-right: 4px;
  text-decoration: none;
}
.saved-item-link:hover {
  opacity: 1;
}
.more-btn {
  position: relative;
  width: 100%;
  padding: 16px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  background: var(--glass-deep);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s var(--ease);
}
.more-btn-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 92, 246, 0.08),
    transparent
  );
  animation: shimmer 3s infinite;
}
.more-btn:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px #0000004d;
}
.saved-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.saved-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.saved-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}
.saved-count {
  background: var(--gradient-main);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  min-width: 24px;
  text-align: center;
}
.saved-body {
  border-top: 1px solid var(--glass-border);
}
.saved-tabs {
  display: flex;
  padding: 10px 18px 0;
  gap: 8px;
}
.saved-tab {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.saved-tab.active {
  background: #ffffff0f;
  color: var(--text);
}
.saved-list {
  padding: 12px 18px 18px;
  max-height: 350px;
  overflow-y: auto;
}
.saved-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-md);
  transition: all 0.3s var(--ease);
  margin-bottom: 4px;
  border: 1px solid transparent;
}
.saved-item:hover {
  background: #ffffff0a;
  border-color: var(--glass-border);
}
.saved-item-poster {
  width: 45px;
  height: 65px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px #0000004d;
}
.saved-item-info {
  flex: 1;
  min-width: 0;
}
.saved-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-item-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.saved-item-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 6px;
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
  border-radius: 6px;
}
.saved-item-remove:hover {
  color: var(--accent2);
  background: #ec48991a;
}
.saved-item.dragging {
  opacity: 0.45;
  transform: scale(0.97);
  box-shadow: 0 0 0 2px var(--accent);
}
.saved-item.drag-over {
  border-color: var(--accent-light);
  background: #8b5cf61a;
}
.saved-item {
  cursor: grab;
}
.saved-item:active {
  cursor: grabbing;
}
.saved-item .drag-handle {
  color: var(--text-muted);
  font-size: 1rem;
  cursor: grab;
  flex-shrink: 0;
  padding: 0 4px;
  user-select: none;
  transition: color 0.2s;
}
.saved-item .drag-handle:hover {
  color: var(--text-dim);
}
.guest-picks-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 100px;
  background: #ffffff0a;
  border: 1px solid var(--glass-border);
  margin: 8px auto 0;
  transition: all 0.3s var(--ease);
  cursor: default;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guest-picks-badge.warning {
  color: #f97316;
  border-color: #f973164d;
  background: #f9731614;
}
.guest-picks-badge.exhausted {
  color: #fff;
  border-color: var(--accent2);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  cursor: pointer;
  animation: shake 0.5s var(--ease);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.35);
}
.guest-picks-badge.exhausted:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(236, 72, 153, 0.45);
}
.guest-picks-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@keyframes shake {
  0%,
  to {
    transform: translate(0);
  }
  20% {
    transform: translate(-4px);
  }
  40% {
    transform: translate(4px);
  }
  60% {
    transform: translate(-3px);
  }
  80% {
    transform: translate(3px);
  }
}
.save-btn.saved svg {
  fill: var(--accent2);
  stroke: var(--accent2);
  animation: heartPulse 0.4s var(--spring);
}
@keyframes heartPulse {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  60% {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}
.result-card {
  cursor: default;
}
.double-click-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 3rem;
  pointer-events: none;
  z-index: 10;
  animation: heartFloat 0.8s var(--spring) forwards;
}
@keyframes heartFloat {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -70%) scale(1.2);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -90%) scale(0.8);
    opacity: 0;
  }
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-main);
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}
.swipe-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1rem;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.1s;
  opacity: 0;
}
.swipe-hint-right {
  right: 10px;
  background: #06d6a033;
  border: 2px solid rgba(6, 214, 160, 0.5);
  color: #06d6a0;
}
.swipe-hint-left {
  left: 10px;
  background: #8b5cf633;
  border: 2px solid rgba(139, 92, 246, 0.5);
  color: var(--accent-light);
}
.pull-refresh-indicator {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  backdrop-filter: blur(12px);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  z-index: 10000;
  transition: none;
}
.pull-refresh-indicator.pull-ready {
  color: var(--accent-light);
  border-color: var(--accent);
}
.pull-refresh-indicator.pull-refreshing {
  color: var(--accent-light);
}
.pull-refresh-icon {
  font-size: 1.1rem;
  transition: transform 0.2s;
}
.pull-refresh-indicator.pull-ready .pull-refresh-icon {
  transform: rotate(180deg);
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.context-menu {
  position: fixed;
  z-index: 10001;
  background: #12121cf2;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 32px #00000080;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.context-menu-visible {
  opacity: 1;
  transform: scale(1);
}
.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
}
.context-menu-item:hover,
.context-menu-item:active {
  background: #8b5cf61f;
}
.context-menu-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.hide-seen-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.hide-seen-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.empty-msg {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 24px 0;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: #000000bf;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-content {
  position: relative;
  width: 100%;
  max-width: 500px;
  padding: 20px;
  margin: auto 0;
  animation: cardReveal 0.3s var(--ease);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  transition: transform 0.2s;
}
.modal-close:hover {
  transform: rotate(90deg);
}
.trailer-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  margin-top: 8px;
}
.trailer-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.watched-btn {
  background: #ffffff0f;
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
}
.watched-btn:hover {
  background: #8b5cf61f;
  border-color: #8b5cf64d;
  color: var(--text);
}
.watched-btn.active {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-color: #8b5cf64d;
  color: #fff;
}
.saved-category-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.saved-cat-tab {
  flex: 1;
  padding: 8px 12px;
  background: #ffffff0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff9;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.saved-cat-tab.active {
  background: #6366f133;
  border-color: #6366f166;
  color: #fff;
}
.saved-cat-tab:hover:not(.active) {
  background: #ffffff14;
}
.watched-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.stat-badge {
  padding: 4px 10px;
  background: #ffffff0f;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #ffffffb3;
}
.stat-badge b {
  color: #a78bfa;
}
.saved-item-move {
  cursor: pointer;
  font-size: 1rem;
  background: #8b5cf633;
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #a78bfa;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-right: 4px;
  flex-shrink: 0;
}
.saved-item-move:hover {
  background: #8b5cf666;
  transform: scale(1.1);
}
.saved-item-rate {
  cursor: pointer;
  font-size: 1.1rem;
  background: #fbbf2426;
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-right: 4px;
  flex-shrink: 0;
}
.saved-item-rate:hover {
  background: #fbbf244d;
  transform: scale(1.1);
}
.user-rating-badge {
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 600;
}
.saved-item-date {
  font-size: 0.7rem;
  color: #ffffff59;
}
.rating-modal-content {
  max-width: 400px;
  text-align: center;
  padding: 24px;
}
.rating-modal-title {
  color: #fff;
  margin: 0 0 16px;
  font-size: 1.1rem;
}
.rating-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
}
.rating-star {
  font-size: 1.8rem;
  background: none;
  border: none;
  color: #fff3;
  cursor: pointer;
  transition:
    color 0.15s,
    transform 0.15s;
  padding: 2px;
}
.rating-star:hover {
  transform: scale(1.2);
}
.rating-star.active {
  color: #fbbf24;
}
.rating-save-btn {
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 0.9rem;
}
#movie-night-section {
  display: none !important;
}
.movie-night-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #f97316, #ef4444, #ec4899);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.movie-night-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 20px #ef444466;
}
.movie-night-icon {
  font-size: 1.3rem;
}
.movie-night-content {
  max-width: 600px;
  padding: 24px;
  max-height: 85vh;
  overflow-y: auto;
}
.mn-title {
  color: #fff;
  text-align: center;
  margin: 0 0 8px;
  font-size: 1.3rem;
}
.mn-desc {
  color: #fff9;
  text-align: center;
  margin: 0 0 16px;
  font-size: 0.9rem;
}
.mn-participants {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.mn-input {
  flex: 1;
  padding: 10px 14px;
  background: #ffffff14;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  outline: none;
}
.mn-input:focus {
  border-color: #6366f180;
}
.mn-add-btn {
  padding: 10px 16px;
  background: #6366f14d;
  border: 1px solid rgba(99, 102, 241, 0.5);
  border-radius: 10px;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
}
.mn-add-btn:hover {
  background: #6366f180;
}
.mn-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.mn-name-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #6366f133;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  color: #c4b5fd;
  font-size: 0.85rem;
}
.mn-name-tag button {
  background: none;
  border: none;
  color: #fff6;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
}
.mn-hint {
  color: #ffffff59;
  font-size: 0.8rem;
  text-align: center;
  margin: 8px 0;
}
.mn-start-btn,
.mn-next-btn,
.mn-result-btn,
.mn-countdown-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  transition: opacity 0.2s;
}
.mn-start-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mn-again-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: #ffffff14;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #ffffffb3;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 8px;
}
.mn-picks {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mn-pick-card {
  position: relative;
  width: 90px;
  text-align: center;
}
.mn-pick-poster {
  width: 80px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}
.mn-pick-title {
  font-size: 0.7rem;
  color: #ffffffb3;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mn-pick-remove {
  position: absolute;
  top: -4px;
  right: 2px;
  background: #ef4444cc;
  border: none;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mn-search {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.mn-search-input {
  flex: 1;
}
.mn-search-btn {
  padding: 10px 14px;
  background: #6366f14d;
  border: 1px solid rgba(99, 102, 241, 0.5);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
}
.mn-search-results {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.mn-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.mn-result:hover {
  background: #ffffff14;
}
.mn-result-poster {
  width: 40px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}
.mn-result-info {
  flex: 1;
}
.mn-result-title {
  color: #fff;
  font-size: 0.9rem;
}
.mn-result-year {
  color: #fff6;
  font-size: 0.8rem;
}
.mn-loading,
.mn-no-results {
  color: #ffffff80;
  text-align: center;
  padding: 16px;
  font-size: 0.9rem;
}
.mn-vote-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.mn-vote-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #ffffff0d;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.mn-vote-card:hover {
  border-color: #6366f166;
  background: #6366f11a;
}
.mn-vote-card.voted {
  border-color: #6366f199;
  background: #6366f126;
}
.mn-vote-poster {
  width: 50px;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
}
.mn-vote-info {
  flex: 1;
}
.mn-vote-title {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}
.mn-vote-by {
  color: #fff6;
  font-size: 0.8rem;
}
.mn-vote-count {
  color: #a78bfa;
  font-size: 0.85rem;
  font-weight: 600;
}
.mn-voter-select {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.mn-voter-select label {
  color: #fff9;
  font-size: 0.85rem;
}
.mn-voter-select select {
  flex: 1;
  padding: 8px 12px;
  background: #ffffff14;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
}
.mn-winner-card {
  text-align: center;
  margin: 16px 0;
}
.mn-winner-poster {
  width: 160px;
  height: 240px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto 12px;
  display: block;
  box-shadow: 0 4px 20px #6366f14d;
}
.mn-winner-title {
  color: #fff;
  margin: 0;
  font-size: 1.2rem;
}
.mn-winner-year {
  color: #ffffff80;
  margin: 4px 0 0;
}
.mn-countdown-display {
  text-align: center;
  margin: 24px 0;
}
.mn-countdown-time {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #f97316, #ef4444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mn-winner-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 16px 0;
}
.mn-mini-poster {
  width: 40px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}
.mn-mini-title {
  color: #fffc;
  font-size: 0.9rem;
}
.mn-countdown-btns {
  margin-top: 12px;
}
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #060614b3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.spinner-ring {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent);
  border-right-color: var(--accent2);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.loading-text {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-weight: 500;
}
.toast {
  position: fixed;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translate(-50%);
  background: #141428e6;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  padding: 12px 24px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  z-index: 2000;
  animation: toastIn 0.3s var(--spring);
  box-shadow: 0 8px 32px #0006;
}
@keyframes toastIn {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%) translateY(0) scale(1);
  }
}
.demo-banner {
  position: relative;
  z-index: 1;
  background: #8b5cf614;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.5;
}
.demo-banner code {
  background: #ffffff0f;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #ffffff1a;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
@media (max-width: 480px) {
  .header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .header-left {
    order: 1;
  }
  .tab-switch {
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .header-right {
    order: 2;
    margin-left: auto;
  }
  .result-poster-wrap {
    width: 110px;
    height: 165px;
  }
  .result-title {
    font-size: 1rem;
  }
  .result-actions {
    gap: 4px;
  }
  .action-btn span {
    display: none;
  }
  .action-btn {
    padding: 8px 10px;
  }
}
.lang-switch {
  display: flex;
  gap: 2px;
  background: #ffffff0a;
  border-radius: 8px;
  padding: 2px;
}
.lang-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  letter-spacing: 0.5px;
}
.lang-btn.active {
  background: var(--gradient-main);
  color: #fff;
}
.lang-btn:hover:not(.active) {
  color: var(--text);
  background: #ffffff0f;
}
.auth-modal-content {
  padding: 32px 24px 24px;
  max-width: 380px;
}
.auth-title {
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 24px;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
}
.glass-input {
  width: 100%;
  background: #ffffff0a;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 12px 16px;
  outline: none;
  transition: all 0.3s var(--ease);
}
.glass-input::placeholder {
  color: var(--text-muted);
}
.glass-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: #ffffff0f;
}
.auth-error {
  background: #ef44441a;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.82rem;
  text-align: center;
}
.auth-privacy {
  display: flex;
  align-items: flex-start;
  margin-top: 4px;
}
.auth-privacy.hidden {
  display: none;
}
.auth-privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.auth-privacy-check {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.auth-privacy-text {
  flex: 1;
}
.auth-privacy-text a {
  color: var(--accent-light);
  text-decoration: underline;
}
.auth-privacy-text a:hover {
  color: #fff;
}
.auth-submit {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gradient-main);
  color: #fff;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--accent-glow);
}
.auth-submit:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(0.92);
  box-shadow: 0 2px 10px var(--accent-glow);
}
.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.auth-switch-btn {
  background: none;
  border: none;
  color: var(--accent-light);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: 4px;
  text-decoration: underline;
  transition: color 0.2s;
}
.auth-switch-btn:hover {
  color: var(--accent);
}
.profile-modal-content {
  width: min(92vw, 440px);
  padding: 24px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}
.profile-modal-content::-webkit-scrollbar {
  width: 5px;
}
.profile-modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.profile-modal-content::-webkit-scrollbar-thumb {
  background: #8b5cf64d;
  border-radius: 99px;
}
.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.profile-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: var(--gradient-main);
  box-shadow: 0 10px 30px var(--accent-glow);
}
.profile-title {
  font-size: 1.35rem;
  font-weight: 900;
}
.profile-email {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-top: 4px;
  word-break: break-all;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.profile-stat {
  padding: 16px;
  border-radius: 18px;
  background: #ffffff0e;
  border: 1px solid var(--glass-border);
  text-align: center;
}
.profile-stat-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}
.profile-stat b {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
}
.profile-stat small {
  color: var(--text-dim);
  font-size: 0.78rem;
}
.profile-saved-line {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: #ffffff0a;
  color: var(--text-dim);
  text-align: center;
}
.profile-saved-line b {
  color: var(--text);
}
.profile-saved-line span {
  margin: 0 8px;
  color: var(--text-muted);
}
.profile-logout-btn {
  width: 100%;
  margin-top: 18px;
  padding: 14px 18px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #ef4444, #ec4899);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 30px #ef444440;
}
.profile-level {
  margin: 4px 0 18px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #8b5cf61f, #ec489914);
  border: 1px solid var(--glass-border);
}
.profile-level-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.profile-level-badge {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--gradient-main);
  color: #fff;
  font-weight: 900;
  font-size: 1.2rem;
  box-shadow: 0 8px 22px var(--accent-glow);
  flex-shrink: 0;
}
.profile-level-info {
  flex: 1;
  min-width: 0;
}
.profile-level-name {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
}
.profile-level-sub {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.profile-level-tonext {
  margin-left: 6px;
  color: var(--text-muted);
}
.profile-progress-track {
  height: 8px;
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
}
.profile-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-main);
  border-radius: 999px;
  transition: width 0.6s var(--ease);
  box-shadow: 0 0 12px var(--accent-glow);
}
.profile-tabs {
  display: flex;
  gap: 8px;
  background: #ffffff0a;
  padding: 4px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.profile-tab-btn {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  font-size: 0.9rem;
}
.profile-tab-btn.active {
  background: var(--gradient-main);
  color: #fff;
  box-shadow: 0 6px 16px var(--accent-glow);
}
.profile-panel.hidden {
  display: none;
}
.profile-history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}
.profile-hf-btn {
  padding: 6px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: #ffffff0a;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.profile-hf-btn.active {
  background: var(--gradient-main);
  color: #fff;
  border-color: transparent;
}
.profile-history-clear {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
}
.profile-history-clear:hover {
  color: #ef4444;
  border-color: #ef4444;
}
.profile-history-list {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}
.profile-history-item {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background: #ffffff0a;
  border: 1px solid var(--glass-border);
}
.phi-poster {
  width: 44px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  background: #0000004d;
  flex-shrink: 0;
}
.phi-info {
  min-width: 0;
}
.phi-title {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phi-meta {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.phi-when {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.phi-link {
  color: var(--accent);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background 0.2s;
}
.phi-link:hover {
  background: #8b5cf626;
}
.profile-history-more {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--glass-border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-dim);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.profile-history-more:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.profile-history-empty {
  padding: 30px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
@media (max-width: 480px) {
  .profile-history-list {
    max-height: 50vh;
  }
  .profile-history-item {
    grid-template-columns: 40px 1fr auto;
  }
  .phi-link {
    display: none;
  }
  .profile-tabs {
    font-size: 0.85rem;
  }
  .profile-level-badge {
    width: 40px;
    height: 40px;
  }
}
.saved-section,
.result-section,
#trailer-modal,
#auth-modal {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}
@media (max-width: 768px) {
  .blob-1 {
    width: 260px;
    height: 260px;
    filter: blur(60px);
    opacity: 0.32;
  }
  .blob-2 {
    width: 240px;
    height: 240px;
    filter: blur(60px);
    opacity: 0.32;
  }
  .blob-3 {
    width: 220px;
    height: 220px;
    filter: blur(55px);
    opacity: 0.28;
  }
  .blob-4 {
    display: none;
  }
  .glass-deep {
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
  }
  .glass-pill {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .result-card-bg {
    display: none;
  }
  .pick-btn:before,
  .ai-search-btn:before {
    animation: none;
  }
  #particles-canvas {
    display: none !important;
  }
  .mood-grid {
    gap: 6px;
  }
  .mood-btn {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
  .ai-section,
  .filters-section,
  .saved-section {
    padding: 16px;
  }
  .pick-btn {
    font-size: 1rem;
    padding: 14px 18px;
  }
}
@media (max-width: 480px) {
  .profile-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .profile-stat {
    padding: 12px;
  }
  .profile-stat b {
    font-size: 1.2rem;
  }
  .filters-body {
    padding: 12px;
  }
  .filter-row {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .blob,
  #particles-canvas {
    display: none;
  }
}
.blob,
.pick-btn,
.lucky-btn,
.result-card {
  will-change: transform;
}
img.result-poster,
.saved-item img {
  will-change: auto;
}
.daily-pick-section {
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(139, 92, 246, .2);
  background: linear-gradient(135deg, rgba(139,92,246,.06), rgba(236,72,153,.03));
  position: relative;
  overflow: hidden;
}
.daily-pick-section::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(139,92,246,.12), transparent 70%);
  pointer-events: none;
}
.daily-pick-header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.daily-pick-badge {
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(236,72,153,.1));
  padding: 5px 11px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, .2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.daily-pick-timer {
  font-size: .68rem;
  color: #c4b5fd;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
  opacity: .85;
}
.daily-pick-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
}
.daily-pick-poster {
  width: 110px;
  min-width: 110px;
  border-radius: 14px;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: #ffffff0a;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.daily-pick-card:hover .daily-pick-poster {
  transform: scale(1.03);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.daily-pick-info {
  flex: 1;
  min-width: 0;
}
.daily-pick-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 2px;
  line-height: 1.3;
}
.daily-pick-orig {
  font-size: .78rem;
  color: var(--text-mute);
  font-style: italic;
  margin-bottom: 6px;
  line-height: 1.2;
}
.daily-pick-orig:empty { display: none; }
.daily-pick-meta {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.daily-pick-meta span { display: inline-flex; align-items: center; gap: 3px; }
.daily-pick-genres {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.daily-pick-genres:empty { display: none; }
.dp-genre-chip {
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.2);
  color: #c4b5fd;
  letter-spacing: .2px;
}
.daily-pick-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.daily-pick-extra {
  font-size: .78rem;
  color: var(--text-mute);
  margin-top: 6px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.daily-pick-extra:empty { display: none; }
.daily-pick-extra .dp-director::before { content: "🎬 "; }
.daily-pick-extra .dp-cast::before { content: "🎭 "; }

.fab-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
}
.fab-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, .35);
  background: rgba(139, 92, 246, .12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(139, 92, 246, .2), 0 0 0 0 rgba(139, 92, 246, 0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
  opacity: 1;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    opacity 0.2s,
    color 0.2s,
    border-color 0.2s,
    background 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.fab-btn:hover {
  transform: scale(1.1) translateY(-2px);
  color: #fff;
  border-color: var(--accent);
  background: rgba(139, 92, 246, .22);
  box-shadow: 0 6px 24px #8b5cf644, 0 0 0 3px rgba(139, 92, 246, .1);
}
.fab-btn.active {
  color: #fff;
  background: rgba(139, 92, 246, .28);
  border-color: var(--accent);
  box-shadow: 0 6px 24px #8b5cf655;
}
.fab-icon {
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.fab-icon-close {
  pointer-events: none;
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg) scale(.6);
  transition: opacity .25s, transform .25s;
}
.fab-btn.active .fab-icon {
  opacity: 0;
  transform: rotate(90deg) scale(.6);
}
.fab-btn.active .fab-icon-close {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.fab-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  animation: fabSlideIn 0.25s ease-out;
}
.fab-menu.hidden {
  display: none;
}
@keyframes fabSlideIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.fab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 28px;
  border: 1px solid var(--glass-border);
  background: #0f0f23eb;
  backdrop-filter: blur(12px);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  transition:
    background 0.2s,
    transform 0.15s;
  white-space: nowrap;
  box-shadow: 0 4px 16px #0006;
}
.fab-item:hover {
  background: #8b5cf626;
  transform: translate(-4px);
}
.fab-item-icon {
  font-size: 1.1rem;
}
.profile-streak {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #fb923c1f;
  border: 1px solid rgba(251, 146, 60, 0.2);
  margin-left: auto;
  flex-shrink: 0;
}
.streak-fire {
  font-size: 1.1rem;
}
.streak-count {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fb923c;
}
.streak-label {
  font-size: 0.75rem;
  color: #fb923c;
  opacity: 0.8;
}
.streak-warm .streak-fire {
  filter: drop-shadow(0 0 6px #ff6347);
}
.streak-warm .streak-count,
.streak-warm .streak-label {
  color: tomato;
}
.streak-hot .streak-fire {
  filter: drop-shadow(0 0 8px #ffd700);
}
.streak-hot .streak-count,
.streak-hot .streak-label {
  color: gold;
}
.streak-fire-100 .streak-fire {
  filter: drop-shadow(0 0 10px #ffa500);
  font-size: 1.3rem;
}
.streak-fire-100 .streak-count,
.streak-fire-100 .streak-label {
  color: orange;
}
.streak-epic .streak-fire {
  filter: drop-shadow(0 0 12px #ff4500);
  font-size: 1.4rem;
}
.streak-epic .streak-count,
.streak-epic .streak-label {
  color: #ff4500;
}
.streak-legendary .streak-fire {
  filter: drop-shadow(0 0 14px #ff0000);
  font-size: 1.5rem;
  animation: streak-pulse 1.2s ease-in-out infinite;
}
.streak-legendary .streak-count,
.streak-legendary .streak-label {
  color: red;
}
@keyframes streak-pulse {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
.profile-username-section {
  margin-bottom: 16px;
  padding: 12px 0;
}
.profile-username-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.profile-username-at {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-light);
  padding: 0 4px;
}
.profile-username-input {
  flex: 1;
  font-size: 0.9rem;
  padding: 8px 12px;
  border-radius: 12px;
  min-width: 0;
}
.profile-username-save {
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.profile-username-save:hover {
  background: var(--accent-light);
}
.profile-username-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 6px;
  padding-left: 28px;
}
.profile-public-link {
  display: inline-block;
  margin-top: 8px;
  padding-left: 28px;
  font-size: 0.8rem;
  color: var(--accent-light);
  text-decoration: none;
}
.profile-public-link:hover {
  text-decoration: underline;
}
.announcement-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #8b5cf61f;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius);
  margin-bottom: 16px;
  animation: cardReveal 0.4s var(--ease);
}
.announcement-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.announcement-text {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
}
.announcement-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}
.announcement-close:hover {
  color: var(--text);
}
.trending-section {
  margin-bottom: 20px;
}
.section-header {
  margin-bottom: 12px;
}
.section-title-text {
  font-size: 1.1rem;
  font-weight: 800;
}
.trending-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.trending-scroll::-webkit-scrollbar {
  display: none;
}
.trending-card {
  flex-shrink: 0;
  width: 130px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}
.trending-card:hover {
  transform: translateY(-4px);
}
.trending-poster {
  width: 130px;
  height: 195px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--glass-border);
}
.trending-name {
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-meta {
  font-size: 0.7rem;
  color: var(--text-dim);
}
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.achievement-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  border-radius: var(--radius-md);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  text-align: center;
  transition: all 0.2s var(--ease);
}
.achievement-item.earned {
  background: #8b5cf61a;
  border-color: #8b5cf640;
}
.achievement-item.locked {
  opacity: 0.4;
  filter: grayscale(0.8);
}
.achievement-icon {
  font-size: 1.4rem;
  margin-bottom: 4px;
}
.achievement-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.achievement-desc {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--glass);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s;
}
.share-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  border-radius: 2px;
  animation: confettiFall 2.5s ease-in forwards;
}
@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  to {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}
.ad-banner {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: min(320px, calc(100vw - 48px));
  background: #0f0f23f2;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px;
  z-index: 9998;
  box-shadow: 0 12px 40px #00000080;
  animation: adSlideIn 0.4s var(--spring);
}
@keyframes adSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.ad-banner-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.ad-banner-close:hover {
  color: var(--text);
}
.ad-banner-content {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
}
@media (max-width: 540px) {
  .fab-container {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
  }
  .fab-btn {
    width: 40px;
    height: 40px;
  }
  .fab-icon,
  .fab-icon-close {
    width: 18px;
    height: 18px;
  }
  .fab-item {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .daily-pick-poster {
    width: 85px;
    min-width: 85px;
  }
  .daily-pick-title {
    font-size: 1rem;
  }
  .ad-banner {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: 16px;
  }
}
.site-top-banner {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #8b5cf6f5, #ec4899f5);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  text-align: center;
  box-shadow: 0 4px 20px #00000047;
}
.site-top-banner a {
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffffff2e;
  border: 1px solid rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}
.ad-banner-content strong {
  display: block;
  margin-bottom: 4px;
}
.ad-banner-content p {
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.4;
}
.ad-action,
.site-popup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--gradient-main, linear-gradient(135deg, #8b5cf6, #ec4899));
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}
.site-popup-ad {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #000000ad;
  backdrop-filter: blur(12px);
}
.site-popup-card {
  width: min(92vw, 440px);
  position: relative;
  padding: 28px;
  border-radius: 26px;
  background: #0d0d20f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 90px #0000008c;
  text-align: center;
  color: var(--text, #fff);
}
.site-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #ffffffa6;
  font-size: 1.7rem;
  cursor: pointer;
}
.site-popup-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}
.site-popup-card h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}
.site-popup-card p {
  color: var(--text-dim, rgba(255, 255, 255, 0.66));
  line-height: 1.55;
  margin-bottom: 18px;
}
.site-popup-card small {
  display: block;
  margin-top: 12px;
  color: #ffffff6b;
}
.profile-edit-grid {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.profile-edit-grid textarea {
  min-height: 72px;
  resize: vertical;
}
/* Profile field groups */
.profile-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.1);
}
.profile-field-label {
  font-size: .85rem;
  font-weight: 700;
  color: #c4b5fd;
}
.profile-field-hint {
  font-size: .72rem;
  color: #64748b;
}
/* Color picker */
.profile-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-color-picker {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  padding: 0;
}
.profile-color-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.profile-color-picker::-webkit-color-swatch { border-radius: 10px; border: 2px solid rgba(255,255,255,.15); }
.profile-color-preview {
  font-size: .82rem;
  font-family: monospace;
  color: #94a3b8;
}
/* Favorite film search */
.profile-fav-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.18);
}
.profile-fav-mini-poster {
  width: 36px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
}
.profile-fav-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: #f87171;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
}
.profile-fav-results, .profile-rec-results {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-fav-result-item, .profile-rec-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
  color: inherit;
}
.profile-fav-result-item:hover, .profile-rec-result-item:hover {
  background: rgba(139,92,246,.12);
}
.profile-fav-result-item img, .profile-rec-result-item img {
  width: 32px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
/* Social grid */
.profile-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.profile-social-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-social-item span {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.profile-social-item .glass-input {
  flex: 1;
  min-width: 0;
}
/* Recommendations list */
.profile-rec-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-rec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.1);
}
.profile-rec-item img {
  width: 32px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.profile-rec-item .rec-info {
  flex: 1;
  min-width: 0;
}
.profile-rec-item .rec-title {
  font-weight: 600;
  font-size: .85rem;
}
.profile-rec-item .rec-comment-input {
  width: 100%;
  margin-top: 4px;
}
.profile-rec-item .rec-remove {
  background: none;
  border: none;
  color: #f87171;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
/* v59 — title + remove styling for the new render layout. */
.profile-rec-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: .85rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-rec-item-icon { font-size: 1.4rem; flex-shrink: 0; }
.profile-rec-item-remove {
  background: none;
  border: none;
  color: #f87171;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background .15s ease, transform .15s ease;
}
.profile-rec-item-remove:hover { background: rgba(248,113,113,.12); transform: scale(1.08); }
/* Showcase badges grid */
.profile-showcase-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-showcase-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 14px;
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.15);
  cursor: pointer;
  transition: all .15s;
  font-size: .82rem;
}
.profile-showcase-badge.selected {
  background: rgba(139,92,246,.22);
  border-color: #8b5cf6;
  box-shadow: 0 0 12px rgba(139,92,246,.2);
}
.profile-showcase-badge:hover {
  background: rgba(139,92,246,.15);
}

.profile-share-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.profile-share-btn {
  border: 1px solid var(--glass-border);
  background: #ffffff0f;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 640px) {
  .site-top-banner {
    font-size: 0.82rem;
    align-items: flex-start;
  }
  .site-top-banner a {
    padding: 5px 9px;
  }
  .site-popup-card {
    padding: 24px 18px;
  }
}
.promo-banner {
  position: relative;
  z-index: 2;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: cardReveal 0.5s var(--ease);
}
.promo-banner-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  z-index: 0;
}
.promo-banner[data-gradient="purple"] .promo-banner-glow {
  background: linear-gradient(135deg, #8b5cf640, #ec48992e);
  box-shadow:
    0 0 40px #8b5cf626,
    inset 0 0 60px #ec489914;
}
.promo-banner[data-gradient="blue"] .promo-banner-glow {
  background: linear-gradient(135deg, #3b82f640, #06d6a02e);
  box-shadow:
    0 0 40px #3b82f626,
    inset 0 0 60px #06d6a014;
}
.promo-banner[data-gradient="fire"] .promo-banner-glow {
  background: linear-gradient(135deg, #f9731640, #ef44442e);
  box-shadow:
    0 0 40px #f9731626,
    inset 0 0 60px #ef444414;
}
.promo-banner[data-gradient="green"] .promo-banner-glow {
  background: linear-gradient(135deg, #06d6a040, #10b9812e);
  box-shadow:
    0 0 40px #06d6a026,
    inset 0 0 60px #10b98114;
}
.promo-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.promo-banner-icon {
  font-size: 2rem;
  flex-shrink: 0;
  animation: promoPulse 2.5s ease-in-out infinite;
}
@keyframes promoPulse {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
.promo-banner-body {
  flex: 1;
  min-width: 0;
}
.promo-banner-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
.promo-banner-btn {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--gradient-main);
  box-shadow: 0 4px 16px var(--accent-glow);
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.promo-banner-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--accent-glow);
}
.feedback-mini-btn {
  opacity: 0.5;
  padding: 6px !important;
  min-width: auto !important;
}
.feedback-mini-btn:hover {
  opacity: 1;
}
.feedback-dialog {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00000080;
  backdrop-filter: blur(6px);
}
.feedback-dialog.hidden {
  display: none;
}
.feedback-dialog-card {
  width: min(90vw, 380px);
  padding: 20px;
  border-radius: var(--radius-md);
  position: relative;
}
.feedback-dialog-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
}
.feedback-dialog-input {
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px;
  font-family: var(--font);
  font-size: 0.9rem;
  resize: vertical;
  margin-bottom: 10px;
}
.feedback-dialog-send {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gradient-main);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
}
.feedback-dialog-select {
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 0.85rem;
  margin-bottom: 10px;
  appearance: auto;
}
.bottom-fab-cluster {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: calc(18px + env(safe-area-inset-left, 0px));
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.bottom-fab-cluster > * {
  pointer-events: auto;
}
.feedback-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0f0f23d9;
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  transition:
    opacity 0.2s,
    transform 0.2s,
    color 0.2s,
    border-color 0.2s;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px #0000004d;
}
.feedback-fab:hover {
  opacity: 1;
  transform: scale(1.1);
  color: var(--accent-light);
  border-color: var(--accent);
}
.feedback-fab.hidden {
  display: none;
}
.scroll-top-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: #0f0f23d9;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 20px #0000004d;
  animation: fadeInUp 0.3s var(--ease);
}
.scroll-top-btn:hover {
  color: var(--accent-light);
  border-color: var(--accent);
  background: #8b5cf626;
  transform: translateY(-3px);
  box-shadow: 0 6px 24px #8b5cf633;
}
.staff-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: #8b5cf626;
  color: #c4b5fd;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 20px #8b5cf640;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-decoration: none;
  font-size: 18px;
}
.staff-fab:hover {
  color: #fff;
  border-color: var(--accent);
  background: #8b5cf64d;
  transform: translateY(-3px);
  box-shadow: 0 6px 24px #8b5cf666;
}
.staff-fab.hidden {
  display: none;
}
@media (max-width: 480px) {
  .bottom-fab-cluster {
    left: calc(12px + env(safe-area-inset-left, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  .feedback-fab,
  .scroll-top-btn,
  .staff-fab {
    width: 40px;
    height: 40px;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.result-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow:
    var(--glass-shadow),
    0 0 30px #8b5cf614;
}
.game-profile-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
}
.game-profile-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.game-profile-rating-value {
  font-size: 2rem;
  font-weight: 900;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.game-profile-rating-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.game-profile-record {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
}
.game-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  font-size: 1.1rem;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  border-radius: 12px;
  transition: all 0.3s var(--ease);
}
/* ─── Wordle CTA banner (homepage) ─────────────────────────────── */
.wordle-cta-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  margin: 0 0 18px;
  text-decoration: none;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(236, 72, 153, 0.12) 55%, rgba(6, 182, 212, 0.10));
  border: 1px solid rgba(139, 92, 246, 0.35);
  box-shadow: 0 10px 36px -16px rgba(139, 92, 246, 0.55);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.wordle-cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 50%, rgba(139, 92, 246, 0.18), transparent 55%),
              radial-gradient(circle at 100% 50%, rgba(236, 72, 153, 0.14), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}
.wordle-cta-banner:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 139, 250, 0.7);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.30), rgba(236, 72, 153, 0.22) 55%, rgba(6, 182, 212, 0.16));
  box-shadow: 0 16px 42px -14px rgba(139, 92, 246, 0.75);
}
.wordle-cta-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.55));
  animation: wordleCtaIconPulse 2.6s ease-in-out infinite;
}
@keyframes wordleCtaIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.wordle-cta-text {
  flex: 1;
  min-width: 0;
}
.wordle-cta-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.wordle-cta-title > span:first-child {
  background: linear-gradient(135deg, #fff, #c4b5fd 60%, #f0abfc);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wordle-cta-pill {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 2.5px 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
  animation: wordleCtaPillPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
  -webkit-text-fill-color: #fff;
}
@keyframes wordleCtaPillPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(236, 72, 153, 0.45); }
  50% { box-shadow: 0 0 16px rgba(236, 72, 153, 0.85); }
}
.wordle-cta-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.wordle-cta-arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
  display: inline-flex;
}
.wordle-cta-banner:hover .wordle-cta-arrow {
  transform: translateX(3px);
  color: #fff;
}
@media (max-width: 640px) {
  .wordle-cta-banner {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 14px;
    margin-bottom: 14px;
  }
  .wordle-cta-icon { font-size: 1.55rem; }
  .wordle-cta-title { font-size: 0.88rem; gap: 6px; }
  .wordle-cta-pill { font-size: 0.55rem; padding: 2px 7px; }
  .wordle-cta-sub { font-size: 0.72rem; line-height: 1.3; }
  .wordle-cta-arrow svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wordle-cta-icon, .wordle-cta-pill { animation: none; }
}
.game-header-btn:hover {
  border-color: var(--accent);
  background: #8b5cf626;
  transform: scale(1.05);
}
.game-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #000000b3;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.game-modal-card {
  position: relative;
  width: min(94vw, 440px);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background: #0d0d20f5;
  box-shadow: 0 30px 90px #00000080;
  animation: cardReveal 0.35s var(--ease);
}
.game-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #ffffff80;
  font-size: 1.6rem;
  cursor: pointer;
  transition: color 0.2s;
}
.game-modal-close:hover {
  color: #fff;
}
.game-screen {
  text-align: center;
}
.game-header-title {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 8px;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.game-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 18px;
}
.game-my-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
}
.game-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  min-width: 100px;
}
.game-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.game-stat-value {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent-light);
}
.game-stat-small {
  font-size: 0.85rem;
}
.game-play-btn {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--gradient-main);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  font-family: inherit;
  box-shadow: 0 4px 20px var(--accent-glow);
}
.game-play-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--accent-glow);
}
.game-cancel-btn {
  margin-top: 14px;
  padding: 10px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.game-cancel-btn:hover {
  border-color: var(--text-muted);
  color: var(--text);
}
.game-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 16px;
  border-radius: 12px;
  background: #8b5cf61a;
  border: 1px solid rgba(139, 92, 246, 0.25);
  font-weight: 800;
  font-size: 1rem;
  color: var(--accent-light);
  transition: all 0.3s;
}
.game-timer-warning {
  background: #ef444426;
  border-color: #ef444466;
  color: #f87171;
  animation: timerPulse 0.5s ease infinite alternate;
}
@keyframes timerPulse {
  0% {
    transform: scale(1);
  }
  to {
    transform: scale(1.03);
  }
}
.game-timer-icon {
  font-size: 1.1rem;
}
.game-timer-value {
  font-size: 1.5rem;
  font-weight: 900;
}
.game-leaderboard {
  margin-top: 22px;
  text-align: left;
}
.game-lb-title {
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.game-lb-body {
  max-height: 220px;
  overflow-y: auto;
}
.game-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 0.2s;
}
.game-lb-row:nth-child(-n + 3) {
  border-color: var(--glass-border);
  background: var(--glass);
}
.game-lb-pos {
  font-weight: 800;
  min-width: 28px;
}
.game-lb-avatar {
  font-size: 1.2rem;
}
.game-lb-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.82rem;
}
.game-lb-rating {
  font-weight: 900;
  color: var(--accent-light);
  font-size: 0.85rem;
}
.game-lb-stats {
  color: var(--text-muted);
  font-size: 0.72rem;
  min-width: 55px;
  text-align: right;
}
.game-empty {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 16px;
}
.game-search-anim {
  padding: 40px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.game-search-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--glass-border);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
.game-search-spinner.small {
  width: 22px;
  height: 22px;
  border-width: 2px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.game-search-text {
  font-size: 1.1rem;
  font-weight: 800;
}
.game-search-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.game-play-header {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 14px;
}
.game-movie-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.game-movie-poster {
  width: 140px;
  height: 210px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 30px #0006;
}
.game-movie-title {
  font-size: 1.05rem;
  font-weight: 800;
}
.game-inputs {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.game-input-group {
  flex: 1;
  text-align: left;
}
.game-input-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.game-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  transition: border-color 0.2s;
  -moz-appearance: textfield;
}
.game-input::-webkit-outer-spin-button,
.game-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.game-input:focus {
  outline: none;
  border-color: var(--accent);
}
.game-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 600;
}
.game-result-movie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.game-result-poster {
  width: 100px;
  height: 150px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--glass-border);
}
.game-result-title {
  font-size: 1rem;
  font-weight: 800;
}
.game-result-real {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
  font-size: 1.1rem;
}
.game-result-compare {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.game-result-col {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  text-align: center;
  font-size: 0.85rem;
}
.game-result-col-title {
  font-weight: 800;
  margin-bottom: 6px;
  font-size: 0.8rem;
}
.game-result-vs {
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.game-verdict {
  padding: 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 16px;
  text-align: center;
}
.game-win {
  background: #06d6a01f;
  border: 1px solid rgba(6, 214, 160, 0.3);
  color: #06d6a0;
}
.game-lose {
  background: #ef44441f;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.game-draw {
  background: #fbbf241f;
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
.game-result-actions {
  display: flex;
  gap: 10px;
}
.game-result-actions .game-play-btn {
  flex: 1;
}
.game-result-actions .game-cancel-btn {
  flex: 0;
  white-space: nowrap;
  margin-top: 0;
}
.game-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.game-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.25s var(--ease);
}
.game-secondary-btn:hover {
  border-color: var(--accent);
  color: var(--text);
  background: #8b5cf614;
}
.game-rematch-btn {
  background: transparent !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  flex: 1;
}
.game-rematch-btn:hover {
  background: #8b5cf61f !important;
}
.game-result-rating-change {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 8px;
  font-weight: 600;
}
.game-lb-streak {
  font-size: 0.75rem;
  color: #fbbf24;
  margin-left: 4px;
}
.game-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.game-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: border-color 0.2s;
}
.game-history-item.game-win {
  border-left: 3px solid #06d6a0;
}
.game-history-item.game-lose {
  border-left: 3px solid #ef4444;
}
.game-history-item.game-draw {
  border-left: 3px solid #fbbf24;
}
.game-history-movie {
  font-weight: 700;
  font-size: 0.9rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-history-details {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.game-history-rating {
  font-weight: 800;
}
.game-history-item.game-win .game-history-rating {
  color: #06d6a0;
}
.game-history-item.game-lose .game-history-rating {
  color: #ef4444;
}
.game-history-item.game-draw .game-history-rating {
  color: #fbbf24;
}
.game-my-streak {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fbbf24;
  margin-top: 4px;
}
.game-my-total {
  font-size: 0.78rem;
  color: var(--text-muted);
}
@media (max-width: 480px) {
  .game-modal-card {
    padding: 22px 14px;
  }
  .game-inputs {
    flex-direction: column;
    gap: 10px;
  }
  .game-my-stats {
    flex-direction: column;
    gap: 8px;
  }
  .game-history-details {
    gap: 6px;
    font-size: 0.72rem;
  }
}
.donate-modal-content {
  max-width: 440px;
  text-align: center;
}
.donate-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.donate-icon {
  font-size: 2rem;
  animation: heartPulse 1.5s infinite;
}
.donate-title {
  font-size: 1.3rem;
  font-weight: 800;
}
.donate-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 20px;
}
.donate-progress-section {
  margin-bottom: 22px;
  padding: 14px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
}
.donate-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.donate-progress-amount {
  color: var(--accent-light);
}
.donate-progress-bar {
  height: 8px;
  background: #ffffff0f;
  border-radius: 100px;
  overflow: hidden;
}
.donate-progress-fill {
  height: 100%;
  background: var(--gradient-main);
  border-radius: 100px;
  transition: width 1s var(--ease);
}
.donate-help-section {
  text-align: left;
  margin-bottom: 20px;
}
.donate-help-section h3 {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.donate-help-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.donate-help-list li {
  font-size: 0.82rem;
  color: var(--text-dim);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.donate-help-list li:last-child {
  border-bottom: none;
}
.donate-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.donate-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.donate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px #0003;
}
.donate-btn-mono:hover {
  border-color: #4dc2f7;
  background: #4dc2f714;
}
.donate-btn-coffee:hover {
  border-color: #fd0;
  background: #ffdd0014;
}
.donate-btn-patreon:hover {
  border-color: #ff424d;
  background: #ff424d14;
}
.donate-btn-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.donate-btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.donate-btn-name {
  font-weight: 700;
  font-size: 0.92rem;
}
.donate-btn-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.donate-thanks {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}
.footer-faq-btn,
.footer-wordle-btn {
  cursor: pointer;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  font-family: var(--font);
}
.footer-faq-btn:hover,
.footer-wordle-btn:hover {
  color: var(--accent-light);
  border-color: var(--accent);
  background: #8b5cf61a;
}
.footer-faq-btn svg,
.footer-wordle-btn svg {
  fill: currentColor;
}
/* Footer "Блог" link — same shape as other footer-link buttons, themed
   in the brand purple/pink so it stands out a bit from /faq /wordle. */
.footer-blog-btn {
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c4b5fd !important;
  background: rgba(139, 92, 246, 0.10) !important;
}
.footer-blog-btn:hover {
  border-color: rgba(236, 72, 153, 0.55) !important;
  background: rgba(236, 72, 153, 0.16) !important;
  color: #fff !important;
}
.footer-blog-btn svg {
  fill: currentColor;
}
/* Large blog promo block on the home page (above the footer). Picksy-styled
   gradient card with mascot, title, copy, and CTA button. Stacks on narrow
   screens, centred on tablet+. */
.home-blog-cta {
  position: relative;
  margin: 60px auto 24px;
  padding: 0 16px;
  max-width: 1100px;
  z-index: 1;
}
.home-blog-cta-inner {
  /* `position: relative` was missing — the ::before halo was being
     positioned against an outer ancestor and bleeding past the rounded
     card, creating a vertical seam visible behind the box. */
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 26px 28px;
  background:
    radial-gradient(circle at 18% 30%, rgba(139, 92, 246, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 92% 78%, rgba(236, 72, 153, 0.18) 0%, transparent 58%),
    linear-gradient(135deg,
      rgba(139, 92, 246, 0.18) 0%,
      rgba(236, 72, 153, 0.12) 50%,
      rgba(6, 214, 160, 0.10) 100%);
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 22px;
  box-shadow: 0 18px 50px -22px rgba(139, 92, 246, 0.45);
  overflow: hidden;
  isolation: isolate;
}
/* Direct children (mascot/body/button) need to sit above the gradient
   background but still inside the card. No more absolutely-positioned
   pseudo-element — the radial glows are folded into the background stack
   above, which avoids the leak-out halo entirely. */
.home-blog-cta-inner > * {
  position: relative;
  z-index: 1;
}
.home-blog-cta-mascot {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  font-size: 32px;
  border-radius: 18px;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(236, 72, 153, 0.55);
  flex-shrink: 0;
}
.home-blog-cta-title {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 65%, #f9a8d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-blog-cta-text {
  margin: 0;
  color: rgba(245, 245, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 640px;
}
.home-blog-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 28px -10px rgba(139, 92, 246, 0.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.home-blog-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(236, 72, 153, 0.65);
}
@media (max-width: 760px) {
  .home-blog-cta-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 22px 18px;
    gap: 14px;
  }
  .home-blog-cta-mascot { margin: 0 auto; }
  .home-blog-cta-text { margin: 0 auto; }
  .home-blog-cta-btn { width: 100%; }
}
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding: 24px 0 calc(80px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--glass-border);
}
.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-brand {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}
.footer-links {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  transition: all 0.3s var(--ease);
}
.footer-link:hover {
  color: var(--accent-light);
  border-color: var(--accent);
  background: #8b5cf61a;
}
.footer-link svg {
  opacity: 0.7;
  transition: opacity 0.3s;
}
.footer-link:hover svg {
  opacity: 1;
}
@media (max-width: 480px) {
  .header {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 12px;
    gap: 8px;
  }
  .header-left {
    order: 1;
  }
  .header-right {
    order: 2;
  }
  .tab-switch {
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .tab-btn {
    flex: 1;
    justify-content: center;
    font-size: 0.72rem;
    padding: 7px 6px;
  }
  .lang-switch {
    gap: 2px;
  }
  .lang-btn {
    font-size: 0.7rem;
    padding: 4px 8px;
  }
  .user-btn {
    padding: 5px 8px;
    font-size: 0.72rem;
  }
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}
.trending-scroll,
.trending-card {
  touch-action: pan-y pan-x !important;
  overscroll-behavior-x: contain;
}
.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 200ms ease, filter 200ms ease, box-shadow 200ms ease;
  margin-left: 6px;
  vertical-align: middle;
}
.tier-free {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.tier-free::before {
  content: '○';
  margin-right: 4px;
  opacity: 0.8;
}
.tier-premium {
  background: linear-gradient(135deg, #f59e0b, #f7c948);
  color: #1a1a2e;
  border: 1px solid rgba(245, 166, 35, 0.7);
  box-shadow: 0 4px 14px -3px rgba(247, 201, 72, 0.6);
}
.tier-premium::before {
  content: '★';
  margin-right: 4px;
}
.tier-pro {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  border: 1px solid rgba(168, 85, 247, 0.7);
  box-shadow: 0 4px 14px -3px rgba(168, 85, 247, 0.55);
}
.tier-pro::before {
  content: '⚡';
  margin-right: 4px;
}
.tier-badge:hover {
  transform: translateY(-1px) scale(1.06);
  filter: brightness(1.15);
}
.freemium-limits-bar {
  background: #f5a6231a;
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 12px;
  padding: 8px 16px;
  margin-bottom: 16px;
  text-align: center;
}
.freemium-limits-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.freemium-limit-item {
  font-size: 0.85rem;
  color: #ddd;
}
.freemium-upgrade-btn {
  background: linear-gradient(135deg, #f5a623, #f7c948);
  color: #1a1a2e;
  border: none;
  padding: 4px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.freemium-upgrade-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.upgrade-modal-card {
  max-width: 800px;
  width: 95%;
  padding: 32px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .upgrade-modal-card {
    max-width: 100%;
    width: 100%;
    padding: 20px 16px;
    max-height: 85vh;
    border-radius: 16px;
  }
  .plans-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .plan-card {
    padding: 16px 14px !important;
  }
  .upgrade-title {
    font-size: 1.3rem !important;
  }
}
.upgrade-title {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #f5a623, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.plan-card {
  background: #ffffff0a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  position: relative;
  transition: all 0.3s;
}
.plan-card:hover {
  border-color: #ffffff40;
  transform: translateY(-2px);
}
.plan-popular {
  border-color: #f5a623;
}
.plan-current {
  border-color: #a855f7;
  background: #a855f70f;
}
.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%);
  background: linear-gradient(135deg, #f5a623, #f7c948);
  color: #1a1a2e;
  padding: 2px 14px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 800;
}
.plan-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}
.plan-name {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.plan-price {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: #f5a623;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
}
.plan-feature-yes {
  padding: 4px 0;
  color: #6ee7b7;
  font-size: 0.85rem;
}
.plan-feature-no {
  padding: 4px 0;
  color: #666;
  font-size: 0.85rem;
  text-decoration: line-through;
}
.plan-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  transition: all 0.2s;
}
.plan-btn:hover:not(:disabled) {
  filter: brightness(1.15);
  transform: scale(1.02);
}
.plan-btn-current {
  background: #ffffff1a;
  color: #888;
  cursor: default;
}
.plan-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.sub-plans-banner {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: linear-gradient(135deg, #8b5cf61f, #ec489914);
  padding: 16px 20px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s;
}
.sub-plans-banner:hover {
  border-color: #8b5cf680;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px #8b5cf626;
}
.sub-plans-banner-glow {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 92, 246, 0.08),
    transparent
  );
  animation: bannerShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bannerShimmer {
  0%,
  to {
    transform: translate(-100%);
  }
  50% {
    transform: translate(250%);
  }
}
.sub-plans-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.sub-plans-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sub-plans-banner-icon {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3));
}
.sub-plans-banner-title {
  font-size: 1rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a78bfa, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sub-plans-banner-desc {
  font-size: 0.78rem;
  color: #ffffff8c;
  margin-top: 2px;
}
.sub-plans-banner-btn {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  pointer-events: none;
}
.sub-plans-banner:hover .sub-plans-banner-btn {
  filter: brightness(1.15);
  transform: scale(1.03);
}
@media (max-width: 600px) {
  .sub-plans-banner-content {
    flex-direction: column;
    text-align: center;
  }
  .sub-plans-banner-left {
    flex-direction: column;
    gap: 6px;
  }
}
.profile-badges,
.profile-head .profile-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.profile-head .profile-badges-row > .tier-badge {
  margin-left: 0;
}
/* -----------------------------------------------------------------
 * Profile badges — unified pill style v2 (refresh).
 * Applies to mini-profile, public profile and anywhere a role/tier
 * badge is rendered. Each role gets its own color story with a soft
 * matching glow; hover gently scales the badge.
 * ---------------------------------------------------------------- */
.profile-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  border: 1px solid rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.45);
  cursor: default;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.profile-verified-badge svg {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}
.profile-verified-badge:hover {
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.65);
}
.profile-admin-badge,
.profile-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.1;
  white-space: nowrap;
  transition: transform 200ms ease, filter 200ms ease, box-shadow 200ms ease;
}
.profile-admin-badge:hover,
.profile-role-badge:hover {
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.12);
}
.profile-admin-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border: 1px solid rgba(245, 158, 11, 0.6);
  box-shadow: 0 4px 14px -2px rgba(245, 158, 11, 0.45);
}
/* Superadmin gets its own gradient (pink → violet) so it visually
 * outranks plain Admin. Class is added by JS together with .profile-admin-badge. */
.profile-admin-badge.profile-admin-badge-super {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  border-color: rgba(236, 72, 153, 0.6);
  box-shadow: 0 4px 14px -2px rgba(236, 72, 153, 0.55);
}
/* Generic fallback for any unknown role */
.profile-role-badge {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(99, 102, 241, 0.2));
  color: #ddd6fe;
  border: 1px solid rgba(139, 92, 246, 0.45);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.18);
}
/* Per-role colour variants (selectors match the role-<slug> class
 * already produced by renderProfileBadges, so they win over the
 * generic .profile-role-badge above.) */
.profile-role-badge.role-media {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #fff;
  border-color: rgba(6, 182, 212, 0.55);
  box-shadow: 0 4px 14px -3px rgba(6, 182, 212, 0.5);
}
.profile-role-badge.role-moderator {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 4px 14px -3px rgba(59, 130, 246, 0.5);
}
.profile-role-badge.role-content-manager {
  background: linear-gradient(135deg, #10b981, #14b8a6);
  color: #fff;
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 4px 14px -3px rgba(16, 185, 129, 0.5);
}
.profile-role-badge.role-editor {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #1a1a2e;
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 4px 14px -3px rgba(251, 191, 36, 0.55);
}
.profile-role-badge.role-support {
  background: linear-gradient(135deg, #a855f7, #c084fc);
  color: #fff;
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 4px 14px -3px rgba(168, 85, 247, 0.5);
}
.trial-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #10b98126, #3b82f626);
  border: 1px solid rgba(16, 185, 129, 0.25);
  cursor: pointer;
  transition: all 0.2s;
}
.trial-banner:hover {
  background: linear-gradient(135deg, #10b98140, #3b82f640);
  transform: translateY(-1px);
}
.trial-banner-icon {
  font-size: 2rem;
}
.trial-banner-text {
  flex: 1;
}
.trial-banner-text strong {
  display: block;
  color: #10b981;
  font-size: 0.95rem;
}
.trial-banner-text small {
  color: #ffffff80;
  font-size: 0.78rem;
}
.trial-banner-btn {
  background: linear-gradient(135deg, #10b981, #3b82f6);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.trial-banner.trial-used {
  background: #ffffff0a;
  border-color: #ffffff14;
  cursor: default;
  opacity: 0.7;
}
.trial-banner.trial-used:hover {
  background: #ffffff0a;
  transform: none;
}
.trial-banner.trial-used .trial-banner-text strong {
  color: #94a3b8;
}
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.role-media {
  background: linear-gradient(135deg, #06b6d42e, #3b82f61f);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.3);
  box-shadow: 0 0 12px #06b6d42e;
}
.role-moderator {
  background: #3b82f626;
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.role-content-manager {
  background: #10b98126;
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.role-editor {
  background: #fbbf2426;
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}
.role-support {
  background: #a855f726;
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.2);
}
.role-admin {
  background: #ef444426;
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.role-superadmin {
  background: linear-gradient(135deg, #8b5cf626, #ec489926);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.2);
}
.plan-pricing-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  width: 100%;
}
.plan-day-btn {
  background: #ffffff0a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffffb3;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.plan-day-btn:hover {
  background: #8b5cf61a;
  border-color: #8b5cf64d;
}
.plan-day-btn.plan-day-active {
  background: linear-gradient(135deg, #8b5cf633, #ec489933);
  border-color: #8b5cf6;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 8px #8b5cf633;
}
.game-lobby-section {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.game-lobby-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  background: #8b5cf614;
  color: #a78bfa;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.game-lobby-btn:hover {
  background: #8b5cf626;
  transform: translateY(-1px);
}
.game-lobby-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border-radius: 16px;
  background: #8b5cf614;
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.game-lobby-code {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 6px;
  color: #a78bfa;
  font-family:
    JetBrains Mono,
    Fira Code,
    monospace;
}
.game-lobby-copy-btn {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}
.game-join-lobby-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.game-join-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #ffffff0a;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  outline: none;
}
.game-join-input:focus {
  border-color: #8b5cf6;
}
.game-join-btn {
  background: linear-gradient(135deg, #10b981, #3b82f6);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.game-my-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 700;
}
.game-rank-progress {
  width: 120px;
  height: 6px;
  background: #ffffff14;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.game-rank-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  background: #0a0a14f2;
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  animation: slideUp 0.4s ease;
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.cookie-text {
  color: #ffffffb8;
  font-size: 0.85rem;
  line-height: 1.5;
}
.cookie-link {
  color: #a78bfa;
  text-decoration: underline;
  font-weight: 600;
}
.cookie-accept-btn {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s;
}
.cookie-accept-btn:hover {
  transform: scale(1.05);
}
.profile-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.profile-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #ffffff0a;
  color: #fffc;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.profile-tool-btn:hover {
  background: #8b5cf61a;
  border-color: #8b5cf640;
  transform: translateY(-2px);
}
.profile-tool-icon {
  font-size: 1.5rem;
}
.profile-sub-info {
  padding: 14px;
  border-radius: 14px;
  background: #8b5cf60f;
  border: 1px solid rgba(139, 92, 246, 0.12);
  color: #ffffffb3;
  font-size: 0.85rem;
  line-height: 1.6;
}
.profile-staff-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  background: #8b5cf614;
  color: #a78bfa;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s;
}
.profile-staff-link:hover {
  background: #8b5cf626;
  transform: translateY(-1px);
}
.share-menu {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.share-menu-overlay {
  position: absolute;
  inset: 0;
  background: #0009;
}
.share-menu-content {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 24px 20px 32px;
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: slideUp 0.3s ease;
}
.share-menu-title {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 8px;
  text-align: center;
}
.share-menu-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #ffffff0a;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.share-menu-btn:hover {
  background: #8b5cf61f;
  border-color: #8b5cf640;
}
.share-menu-btn span:first-child {
  font-size: 1.3rem;
  width: 28px;
  text-align: center;
}
.profile-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 6px;
}
.hero-section {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px 16px 28px;
  margin-bottom: 20px;
}
.hero-tagline {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero-tagline:before,
.hero-tagline:after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
}
.hero-title {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.hero-title .hero-gradient {
  color: var(--accent-light);
}
.hero-title .hero-brand {
  color: var(--text);
  font-weight: 900;
}
.hero-subtitle {
  font-size: 0.95rem;
  color: var(--text-dim);
  max-width: 360px;
  margin: 0 auto 24px;
  line-height: 1.5;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border: none;
  border-radius: 100px;
  background: var(--gradient-main);
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 24px var(--accent-glow);
}
.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--accent-glow);
}
.hero-cta:active {
  transform: translateY(0);
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}
.hero-stat {
  text-align: center;
}
.hero-stat-value {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
}
.hero-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  .hero-title {
    font-size: 2.6rem;
  }
  .hero-subtitle {
    font-size: 1.05rem;
  }
}
/* ============================================================
   LIVE BAR v2 — broadcast-ticker style.
   Distinct from the three colored CTA banners below (Quiz / Match
   / Wordle): no purple/pink gradient body, no big icon, no big
   call-to-action label. Instead: dark obsidian glass strip with a
   red LIVE pill, slim metric chips, and a thin scan-line shimmer.
   Single row, no flex-wrap — text-overflow handles narrow widths.
   ============================================================ */
.live-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px 9px 10px;
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.92);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(15, 17, 26, 0.92) 0%, rgba(20, 14, 28, 0.86) 100%);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 22px -14px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 220ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 220ms ease,
    box-shadow 220ms ease;
}
.live-bar:hover,
.live-bar:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 28px -16px rgba(239, 68, 68, 0.45);
  outline: none;
}
.live-bar:active { transform: translateY(0); }
.live-bar-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 40%,
    rgba(239, 68, 68, 0.08) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  animation: liveBarScan 4.5s linear infinite;
}
@keyframes liveBarScan {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Red LIVE badge — the visual anchor that signals "broadcast" */
.live-bar-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.6) inset,
    0 0 14px rgba(239, 68, 68, 0.35);
  flex-shrink: 0;
  -webkit-text-fill-color: #fff;
}
.live-bar-pulse {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: liveBarPulse 1.5s ease-in-out infinite;
}
.live-bar-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: liveBarRing 1.5s ease-out infinite;
}
@keyframes liveBarPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes liveBarRing {
  0%   { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}
.live-bar-badge-text { display: inline-block; }
/* Stream — horizontal flow of metric chips, single row */
.live-bar-stream {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.live-bar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1.2;
}
.live-bar-chip + .live-bar-chip {
  position: relative;
  padding-left: 14px;
}
.live-bar-chip + .live-bar-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.35);
  transform: translateY(-50%);
}
.live-bar-chip-ico {
  font-size: 0.85em;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.95;
}
.live-bar-chip-online .live-bar-chip-ico {
  color: #34d399;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
  font-size: 0.7em;
  animation: liveBarDot 1.6s ease-in-out infinite;
}
@keyframes liveBarDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.live-bar-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.live-bar-chip-online .live-bar-chip-text { color: #d1fae5; font-weight: 600; }
.live-bar-chip-recent .live-bar-chip-text { color: rgba(226, 232, 240, 0.85); }
.live-bar-chip-popular .live-bar-chip-text { color: #fde68a; }
.live-bar-chip-flash { animation: liveChipFlash .6s ease !important; }
@keyframes liveChipFlash {
  0% { background: transparent; }
  30% { background: rgba(139,92,246,.25); transform: scale(1.04); }
  100% { background: transparent; transform: scale(1); }
}
.live-bar-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.65);
  transition: transform 220ms ease, color 220ms ease, background 220ms ease, border-color 220ms ease;
}
.live-bar:hover .live-bar-arrow {
  transform: translateX(2px);
  color: #fff;
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.5);
}
@media (max-width: 640px) {
  .live-bar { gap: 9px; padding: 8px 10px 8px 9px; font-size: 0.74rem; border-radius: 12px; }
  .live-bar-badge { padding: 3px 7px 3px 6px; font-size: 0.6rem; gap: 4px; }
  .live-bar-stream { gap: 10px; }
  .live-bar-chip + .live-bar-chip { padding-left: 10px; }
  .live-bar-arrow { width: 20px; height: 20px; }
  /* On phones drop the popular chip — keep online + recent in one row */
  .live-bar-chip-popular { display: none; }
}
@media (max-width: 380px) {
  .live-bar-chip-recent .live-bar-chip-text { max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-bar-scan,
  .live-bar-pulse,
  .live-bar-pulse::after,
  .live-bar-chip-online .live-bar-chip-ico { animation: none !important; }
}
.ai-mood-picker {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ai-mood-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-mood-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ai-mood-option {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  background: #ffffff0a;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.ai-mood-option:hover {
  background: #8b5cf61a;
  border-color: var(--accent);
  color: var(--accent-light);
}
.ai-mood-option.active {
  background: #8b5cf626;
  border-color: var(--accent);
  color: var(--accent-light);
}
.auth-benefits {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.auth-benefits-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 12px;
  text-align: center;
}
.auth-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.auth-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #ffffff08;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.auth-benefit-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.brand-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 16px;
  margin-top: 16px;
  margin-bottom: -80px;
}
.brand-mascot {
  font-size: 2.5rem;
  margin-bottom: 8px;
  display: block;
  animation: mascotBounce 3s infinite ease-in-out;
}
@keyframes mascotBounce {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.brand-quote {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 4px;
}
.brand-signature {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}
.pick-btn {
  box-shadow: 0 4px 24px var(--accent-glow);
}
.pick-btn:hover {
  box-shadow: 0 8px 40px var(--accent-glow);
}
.trending-section {
  margin-bottom: 12px;
}
.section-header {
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  .hero-title {
    font-size: 1.6rem;
  }
  .hero-stats {
    gap: 16px;
  }
  .hero-cta {
    padding: 12px 24px;
    font-size: 0.9rem;
  }
  .live-bar {
    gap: 10px;
    font-size: 0.72rem;
  }
  .auth-benefits-grid {
    grid-template-columns: 1fr;
  }
}
@keyframes skeletonPulse {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
  to {
    opacity: 0.4;
  }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--glass) 25%,
    var(--glass-deep) 50%,
    var(--glass) 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: 12px;
}
.skeleton-poster {
  width: 200px;
  height: 300px;
  border-radius: 16px;
}
.skeleton-title {
  width: 60%;
  height: 28px;
  margin-bottom: 12px;
}
.skeleton-text {
  width: 90%;
  height: 16px;
  margin-bottom: 8px;
}
.skeleton-text-short {
  width: 40%;
  height: 16px;
}
.skeleton-card {
  display: flex;
  gap: 20px;
  padding: 24px;
  border-radius: 20px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}
.skeleton-card .skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
}
.error-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
}
.error-state-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.6;
}
.error-state-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.error-state-desc {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.error-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.error-state-btn:hover {
  background: var(--glass-deep);
  border-color: var(--accent);
}
.kbd-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
  background: var(--glass-deep);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 12px 20px;
  color: var(--text-dim);
  font-size: 0.8rem;
  display: flex;
  gap: 16px;
  z-index: 100;
  backdrop-filter: blur(20px);
  transition: opacity 0.3s;
  pointer-events: none;
}
.kbd-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: #ffffff1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 0.75rem;
  font-family: inherit;
  color: var(--text);
  margin-right: 4px;
}
.daily-pick-card {
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.daily-pick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #8b5cf633;
}

/* ─── Detail Page Modal ─── */
.detail-modal-content {
  max-width: 720px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  border-radius: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}
.detail-modal-content::-webkit-scrollbar {
  width: 6px;
}
.detail-modal-content::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}
.detail-modal-content .modal-close {
  position: sticky;
  top: 12px;
  right: 12px;
  z-index: 10;
  float: right;
  margin: 12px 12px 0 0;
}
.detail-page {
  padding: 0 0 24px 0;
}
.detail-backdrop {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 24px 24px 0 0;
  display: block;
}
.detail-backdrop-placeholder {
  width: 100%;
  height: 120px;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.2),
    rgba(236, 72, 153, 0.1)
  );
  border-radius: 24px 24px 0 0;
}
.detail-main {
  display: flex;
  gap: 20px;
  padding: 0 24px;
  margin-top: -60px;
  position: relative;
  z-index: 2;
}
.detail-poster {
  width: 140px;
  min-width: 140px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  aspect-ratio: 2/3;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
}
.detail-header {
  flex: 1;
  padding-top: 64px;
}
.detail-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.3;
}
.detail-tagline {
  color: #94a3b8;
  font-size: 0.88rem;
  font-style: italic;
  margin-bottom: 8px;
}
.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 600;
}
.detail-badge-rating {
  background: rgba(250, 204, 21, 0.15);
  color: #facc15;
}
.detail-badge-year {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}
.detail-badge-runtime {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}
.detail-badge-budget {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}
.detail-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0 24px;
}
.detail-genre-tag {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.15);
}
.detail-overview {
  padding: 0 24px;
  margin-bottom: 20px;
}
.detail-overview p {
  color: #cbd5e1;
  font-size: 0.92rem;
  line-height: 1.7;
}
.detail-section {
  padding: 0 24px;
  margin-bottom: 20px;
}
.detail-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.detail-directors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0 24px;
}
.detail-director-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(236, 72, 153, 0.1);
  color: #f472b6;
  font-size: 0.82rem;
  font-weight: 600;
}
.detail-cast-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.2) transparent;
  -webkit-overflow-scrolling: touch;
}
.detail-cast-scroll::-webkit-scrollbar {
  height: 4px;
}
.detail-cast-scroll::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.2);
  border-radius: 2px;
}
.detail-cast-card {
  flex: 0 0 100px;
  text-align: center;
}
.detail-cast-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(139, 92, 246, 0.2);
}
.detail-cast-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-cast-character {
  font-size: 0.68rem;
  color: #94a3b8;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-trailer-wrap {
  position: relative;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.detail-trailer-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.detail-similar-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.2) transparent;
  -webkit-overflow-scrolling: touch;
}
.detail-similar-scroll::-webkit-scrollbar {
  height: 4px;
}
.detail-similar-scroll::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.2);
  border-radius: 2px;
}
.detail-similar-card {
  flex: 0 0 120px;
  cursor: pointer;
  transition: transform 0.2s;
}
.detail-similar-card:hover {
  transform: translateY(-4px);
}
.detail-similar-poster {
  width: 120px;
  height: 180px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
}
.detail-similar-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-top: 6px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-similar-rating {
  font-size: 0.68rem;
  color: #facc15;
  margin-top: 2px;
}
.detail-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detail-review-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
}
.detail-review-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.detail-review-avatar {
  font-size: 1.4rem;
}
.detail-review-author {
  font-weight: 600;
  font-size: 0.85rem;
  color: #e2e8f0;
}
.detail-review-date {
  font-size: 0.72rem;
  color: #64748b;
  margin-left: auto;
}
.detail-review-rating {
  color: #facc15;
  font-size: 0.78rem;
  font-weight: 600;
}
.detail-review-text {
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-review-text.expanded {
  -webkit-line-clamp: unset;
  display: block;
}
.detail-review-expand {
  background: none;
  border: none;
  color: #a78bfa;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 4px;
  font-family: inherit;
}
.detail-community-section {
  padding: 0 24px;
  margin-bottom: 20px;
}
.detail-community-rating {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.15);
}
.detail-community-score {
  font-size: 2rem;
  font-weight: 800;
  color: #a78bfa;
}
.detail-community-info {
  flex: 1;
}
.detail-community-label {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-bottom: 4px;
}
.detail-community-count {
  font-size: 0.78rem;
  color: #64748b;
}
.detail-community-stars {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.detail-community-star {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.2);
  background: transparent;
  color: #94a3b8;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-community-star:hover,
.detail-community-star.active {
  background: rgba(139, 92, 246, 0.2);
  color: #facc15;
  border-color: #a78bfa;
}
.detail-review-form {
  margin-top: 16px;
}
.detail-review-textarea {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(139, 92, 246, 0.15);
  color: #e2e8f0;
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
  min-height: 60px;
  outline: none;
  transition: border-color 0.2s;
}
.detail-review-textarea:focus {
  border-color: #8b5cf6;
}
.detail-review-submit {
  margin-top: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s;
}
.detail-review-submit:hover {
  transform: translateY(-1px);
}
.detail-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 24px;
  margin-bottom: 16px;
}
.detail-meta-item {
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.detail-meta-label {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.detail-meta-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #e2e8f0;
}
.detail-actions {
  display: flex;
  gap: 8px;
  padding: 0 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.detail-action-btn {
  flex: 1;
  min-width: 120px;
  padding: 12px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.detail-action-primary {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  border: none;
}
.detail-action-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}
.detail-action-secondary {
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.detail-action-secondary:hover {
  background: rgba(139, 92, 246, 0.2);
}
.skeleton-poster-detail {
  width: 140px;
  height: 210px;
  border-radius: 16px;
}
.detail-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 24px;
  margin-bottom: 12px;
}
.detail-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  color: #94a3b8;
}

@media (max-width: 540px) {
  .detail-modal-content {
    width: 100vw;
    max-width: 100vw;
    border-radius: 20px 20px 0 0;
    max-height: 95vh;
  }
  .detail-main {
    flex-direction: column;
    align-items: center;
    margin-top: -40px;
    padding: 0 16px;
  }
  .detail-poster {
    width: 160px;
  }
  .detail-header {
    padding-top: 16px;
    text-align: center;
  }
  .detail-badges {
    justify-content: center;
  }
  .detail-title {
    font-size: 1.3rem;
  }
  .detail-genres,
  .detail-overview,
  .detail-section,
  .detail-directors,
  .detail-meta-grid,
  .detail-actions,
  .detail-community-section,
  .detail-info-row {
    padding: 0 16px;
  }
}

/* ─── Mood AI Input ─── */
.mood-ai-input-wrap {
  margin-top: 16px;
  padding: 0 4px;
}
.mood-ai-label {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mood-ai-row {
  display: flex;
  gap: 8px;
}
.mood-ai-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  color: #e2e8f0;
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s;
}
.mood-ai-input:focus {
  border-color: #8b5cf6;
}
.mood-ai-input::placeholder {
  color: #64748b;
}
.mood-ai-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.mood-ai-btn:hover {
  transform: translateY(-1px);
}
.mood-ai-result {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.12);
  display: none;
}
.mood-ai-result.visible {
  display: block;
  animation: fadeIn 0.3s ease;
}
.mood-ai-result-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 4px;
}
.mood-ai-result-desc {
  font-size: 0.82rem;
  color: #94a3b8;
}
.mood-ai-result-apply {
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.2);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.mood-ai-result-apply:hover {
  background: rgba(139, 92, 246, 0.25);
}

/* ─── Detail page link on result card ─── */
.result-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.15);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.result-detail-link:hover {
  background: rgba(139, 92, 246, 0.2);
  transform: translateY(-1px);
}

/* Make saved item posters/titles clickable */
.saved-item-poster,
.saved-item-title {
  cursor: pointer;
  transition: opacity 0.2s;
}
.saved-item-poster:hover {
  opacity: 0.8;
}
.saved-item-title:hover {
  color: #a78bfa;
}

/* ─── TV Show Status & Seasons Progress ─── */
.detail-tv-status-section {
  margin: 16px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.detail-tv-status-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.detail-tv-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.detail-status-ongoing {
  background: linear-gradient(
    135deg,
    rgba(6, 214, 160, 0.2),
    rgba(59, 130, 246, 0.2)
  );
  color: #06d6a0;
  border: 1px solid rgba(6, 214, 160, 0.3);
}
.detail-status-ended {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-tv-stat {
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.detail-seasons-progress {
  margin-top: 8px;
}
.detail-seasons-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.detail-seasons-bar-wrap {
  display: flex;
  width: 100%;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  gap: 2px;
}
.detail-season-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  transition: opacity 0.2s;
}
.detail-season-seg:hover {
  opacity: 0.85;
}
.detail-season-seg-aired {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: #fff;
}
.detail-season-seg-upcoming {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
}
.detail-season-seg-label {
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.detail-seasons-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.detail-season-legend-item {
  font-size: 0.75rem;
  color: var(--text-dim);
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.detail-season-legend-item strong {
  color: var(--text);
}
.duo-section {
  margin: 16px 0 8px;
  padding: 16px;
  display: flex;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
}
.duo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  font-family: var(--font);
  color: var(--text);
  transition: all 0.3s var(--ease);
  border-radius: 100px;
  backdrop-filter: blur(8px);
}
/* v121: legacy hover wrapped in (hover: hover) only. On iOS the original
   rule fired even on tap (sticky :hover), causing the button to "pop out"
   after release. Confined to true pointing devices now. */
@media (hover: hover) and (pointer: fine) {
  .duo-btn:hover {
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.18);
    border-color: var(--accent);
    background: rgba(139, 92, 246, 0.1);
  }
}
.duo-btn:active {
  /* explicit baseline transform so iOS doesn't inherit a stale translate */
  transform: none;
}
.duo-btn-icon {
  font-size: 1.15rem;
}
.duo-btn-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.duo-btn-badge {
  background: var(--gradient-main);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  letter-spacing: 0.5px;
}
.duo-modal-content {
  max-width: 460px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 22px;
}
.duo-header {
  text-align: center;
  margin-bottom: 24px;
}
.duo-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 6px;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.duo-header p {
  color: var(--text-dim);
  font-size: 0.88rem;
}
.duo-lobby {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.duo-user-info {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  text-align: center;
}
.duo-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 13px 16px;
  outline: none;
  transition: all 0.3s var(--ease);
}
.duo-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.duo-input::placeholder {
  color: var(--text-muted);
}
.duo-actions {
  display: flex;
  gap: 10px;
}
.duo-actions .duo-action-btn {
  flex: 1;
}
.duo-action-btn {
  padding: 13px 18px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.duo-action-btn.primary {
  background: var(--gradient-main);
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.duo-action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--accent-glow);
}
.duo-action-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid var(--glass-border);
}
.duo-action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--glass-border-hover);
}
.duo-or {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 4px 0;
}
.duo-join-row {
  display: flex;
  gap: 10px;
}
.duo-join-row .duo-input {
  flex: 1;
}
.duo-join-row .duo-action-btn {
  flex-shrink: 0;
  width: auto;
  padding: 13px 20px;
}
.duo-code-display {
  text-align: center;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  border: 1px dashed var(--glass-border);
}
.duo-code-display p {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin-bottom: 12px;
}
.duo-code-value {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.35em;
  font-family: "Courier New", monospace;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: pointer;
  transition: transform 0.2s;
}
.duo-code-value:hover {
  transform: scale(1.05);
}
.duo-code-value:active {
  transform: scale(0.97);
}
.duo-status {
  text-align: center;
  margin-top: 16px;
}
.duo-status-text {
  color: var(--text-dim);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.duo-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: duoSpin 0.8s linear infinite;
  display: inline-block;
}
@keyframes duoSpin {
  to {
    transform: rotate(360deg);
  }
}
.duo-prefs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.duo-prefs-title {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}
.duo-genre-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.duo-genre-chip {
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.duo-genre-chip:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--accent);
  color: var(--accent-light);
}
.duo-genre-chip.selected {
  background: var(--gradient-main);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 12px var(--accent-glow);
}
.duo-result {
  text-align: center;
}
.duo-result-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 16px;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.duo-movie-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: 18px;
  border: 1px solid var(--glass-border);
  margin-bottom: 16px;
}
.duo-movie-poster {
  width: 140px;
  height: 210px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto 14px;
  display: block;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.duo-movie-name {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.duo-movie-year {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.duo-movie-overview {
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.5;
  margin-bottom: 14px;
  text-align: left;
}
.duo-match-bar {
  margin: 14px 0;
}
.duo-match-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.duo-match-label span:last-child {
  color: var(--accent-light);
}
.duo-match-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  overflow: hidden;
}
.duo-match-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--gradient-main);
  transition: width 1s var(--spring);
}
.duo-reasoning {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 12px;
  text-align: left;
}
.duo-reasoning p {
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.5;
}
.duo-reasoning strong {
  color: var(--accent-light);
  font-weight: 700;
}
.duo-result-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}
.duo-partner-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: rgba(6, 214, 160, 0.08);
  border: 1px solid rgba(6, 214, 160, 0.18);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  color: var(--accent3);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ───────── Duo lobby redesign (v2) ───────── */
.duo-modal-content {
  max-width: 520px !important;
}
.duo-header.duo-header-hero {
  position: relative;
  padding: 14px 0 8px;
  margin-bottom: 10px;
}
.duo-hero-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 22px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(139, 92, 246, 0.35), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, rgba(236, 72, 153, 0.35), transparent 60%),
    rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  font-size: 30px;
  animation: duoHeroPulse 2.4s ease-in-out infinite;
}
.duo-hero-icon .duo-hero-spark {
  position: absolute;
  top: -6px;
  right: -8px;
  font-size: 16px;
  animation: duoSparkFloat 2.4s ease-in-out infinite;
}
@keyframes duoHeroPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 28px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255,255,255,0.08); }
  50%      { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255,255,255,0.12); }
}
@keyframes duoSparkFloat {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); opacity: 0.9; }
  50%      { transform: translate(-2px, -4px) rotate(8deg); opacity: 1; }
}

.duo-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 16px;
  padding: 10px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(236, 72, 153, 0.10));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.duo-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.duo-step-num {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gradient-main);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}
.duo-step-arrow {
  color: var(--text-muted);
  font-weight: 800;
}
.duo-step.duo-step-final {
  color: var(--accent-light);
  border-color: rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.10);
}

.duo-lobby-v2 {
  gap: 12px !important;
}
.duo-lobby-v2 .duo-user-info {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 100px;
  width: max-content;
  margin: 0 auto;
  font-size: 0.88rem;
}
.duo-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-main);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.duo-user-name {
  font-weight: 700;
  color: var(--text);
}
.duo-action-create {
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center;
  gap: 14px;
  text-align: left;
  border-radius: 16px !important;
  font-size: 0.95rem !important;
}
.duo-action-create .duo-btn-icon {
  font-size: 24px;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}
.duo-btn-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.15;
}
.duo-btn-title {
  font-size: 0.98rem;
  font-weight: 800;
}
.duo-btn-sub {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.85;
}

.duo-or-lined {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.duo-or-lined::before,
.duo-or-lined::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.duo-or-lined span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.duo-join-row-v2 .duo-input-code {
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 800;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 1.05rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px dashed rgba(255, 255, 255, 0.16);
}
.duo-join-row-v2 .duo-input-code:focus {
  border-style: solid;
  border-color: var(--accent);
}
.duo-action-join {
  font-weight: 800 !important;
}

/* History */
.duo-history {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.duo-history-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.duo-history-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.06);
}
.duo-history-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 128px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.duo-history-scroll::-webkit-scrollbar { height: 6px; }
.duo-history-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 100px; }
.duo-history-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.22s var(--ease), background 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.duo-history-card:hover {
  transform: translateY(-3px);
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.20);
}
.duo-history-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.duo-history-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.duo-history-score {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  border-radius: 100px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
}
.duo-history-info { padding: 0 2px; }
.duo-history-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.duo-history-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.duo-history-rating {
  color: var(--accent-light);
  font-weight: 700;
}
.duo-history-partner {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Make Duo result card clickable */
.duo-movie-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.duo-movie-card-link:hover {
  transform: translateY(-2px);
  background: rgba(139, 92, 246, 0.07);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.20);
}
.duo-movie-open-hint {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-light);
  text-align: center;
  letter-spacing: 0.02em;
}
.duo-result-actions {
  flex-wrap: wrap;
}
.duo-result-actions a.duo-action-btn {
  text-decoration: none;
}

/* Trending meta: prevent year/rating clipping on very narrow widths */
.trending-card .trending-meta,
.trending-card-meta {
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: auto !important;
  max-width: 100%;
  padding-right: 6px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}
.trending-card { overflow: visible !important; }
.trending-scroll { padding-right: 8px !important; }

@media (max-width: 480px) {
  .duo-steps { padding: 8px 6px; gap: 4px; }
  .duo-step { padding: 5px 7px; font-size: 0.7rem; }
  .duo-step-arrow { display: none; }
  .duo-history-scroll { grid-auto-columns: 112px; gap: 10px; }
  .duo-action-create { padding: 14px !important; }
  .duo-action-create .duo-btn-icon { width: 34px; height: 34px; font-size: 20px; }
  .duo-btn-title { font-size: 0.92rem; }
  .duo-btn-sub { font-size: 0.7rem; }
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}
.auth-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  margin-bottom: 12px;
}
.auth-google-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.auth-google-btn:active {
  transform: translateY(0);
}

/* ===== ENHANCED DESIGN v2 ===== */

/* --- Google Button Container --- */
#google-btn-container {
  width: 100%;
  min-height: 44px;
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.3s var(--ease);
  margin-bottom: 8px;
}
#google-btn-container:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
#google-btn-container iframe {
  border-radius: 12px !important;
}

/* --- Auth Modal Enhanced --- */
.auth-modal-content {
  padding: 36px 28px 28px !important;
  max-width: 400px !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  background: rgba(10, 10, 30, 0.92) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(139, 92, 246, 0.08) !important;
}
.auth-title {
  font-size: 1.5rem !important;
  margin-bottom: 28px !important;
  letter-spacing: -0.02em;
}
.auth-submit {
  padding: 16px !important;
  border-radius: 14px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 24px var(--accent-glow) !important;
  text-transform: none;
}
.auth-submit:hover {
  box-shadow: 0 8px 32px var(--accent-glow) !important;
  transform: translateY(-2px) !important;
}
.auth-submit:active {
  background: linear-gradient(135deg, #22b8e8 0%, #0d9f7a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.2) !important;
  transform: translateY(0) scale(0.98) !important;
  filter: none !important;
}
.auth-field label {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
.auth-form .glass-input {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s var(--ease) !important;
}
.auth-form .glass-input:focus {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.2),
    0 4px 16px rgba(139, 92, 246, 0.1) !important;
}
.auth-benefits {
  margin-top: 24px !important;
  padding-top: 20px !important;
}
.auth-benefit {
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.25s var(--ease);
}
.auth-benefit:hover {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.15) !important;
  transform: translateY(-1px);
}
.auth-divider {
  margin: 20px 0 !important;
}

/* Custom Google button enhanced + animated */
@keyframes googleBtnShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes googleBtnGlow {
  0%,
  100% {
    box-shadow:
      0 0 8px rgba(66, 133, 244, 0.15),
      0 0 0 0 rgba(66, 133, 244, 0);
  }
  50% {
    box-shadow:
      0 0 18px rgba(66, 133, 244, 0.25),
      0 0 40px rgba(139, 92, 246, 0.08);
  }
}
@keyframes googleIconSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.auth-google-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  border: 1px solid rgba(66, 133, 244, 0.25) !important;
  border-radius: 14px !important;
  background: linear-gradient(
    135deg,
    rgba(66, 133, 244, 0.1),
    rgba(234, 67, 53, 0.06),
    rgba(251, 188, 5, 0.06),
    rgba(52, 168, 83, 0.1)
  ) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.4s var(--ease) !important;
  margin-bottom: 8px !important;
  position: relative;
  overflow: hidden;
  animation: googleBtnGlow 3s ease-in-out infinite !important;
}
.auth-google-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.08) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: googleBtnShimmer 3s ease-in-out infinite;
}
.auth-google-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(66, 133, 244, 0.3),
    rgba(234, 67, 53, 0.2),
    rgba(251, 188, 5, 0.2),
    rgba(52, 168, 83, 0.3)
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.auth-google-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(66, 133, 244, 0.18),
    rgba(234, 67, 53, 0.1),
    rgba(251, 188, 5, 0.1),
    rgba(52, 168, 83, 0.18)
  ) !important;
  border-color: rgba(66, 133, 244, 0.4) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 8px 32px rgba(66, 133, 244, 0.2),
    0 0 0 1px rgba(66, 133, 244, 0.2),
    0 0 60px rgba(66, 133, 244, 0.06) !important;
  animation: none !important;
}
.auth-google-btn:hover::after {
  opacity: 1;
}
.auth-google-btn:hover svg {
  animation: googleIconSpin 0.6s var(--ease);
}
.auth-google-btn:active {
  transform: translateY(0) scale(0.98) !important;
  transition: transform 0.1s !important;
}
.auth-google-btn svg {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.auth-google-btn span {
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, #4285f4, #ea4335, #fbbc05, #34a853);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* --- Profile Modal Enhanced --- */
.profile-modal-content {
  width: min(94vw, 460px) !important;
  padding: 0 !important;
  overflow: visible !important;
  overflow-y: auto !important;
  max-height: 90vh !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(139, 92, 246, 0.08) !important;
  border-radius: 24px !important;
}
.profile-head {
  position: relative;
  padding: 24px 20px 18px !important;
  margin-bottom: 0 !important;
  background: linear-gradient(
    145deg,
    rgba(139, 92, 246, 0.18) 0%,
    rgba(236, 72, 153, 0.1) 60%,
    rgba(6, 214, 160, 0.06) 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px 24px 0 0;
  gap: 12px !important;
}
@media (min-width: 420px) {
  .profile-head {
    padding: 28px 24px 22px !important;
    gap: 14px !important;
  }
}
.profile-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(139, 92, 246, 0.25) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 80% 100%,
      rgba(236, 72, 153, 0.18) 0%,
      transparent 55%
    );
  pointer-events: none;
}
.profile-avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  font-size: 28px !important;
  box-shadow:
    0 10px 30px rgba(139, 92, 246, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.1) !important;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (min-width: 420px) {
  .profile-avatar {
    width: 68px !important;
    height: 68px !important;
    border-radius: 20px !important;
    font-size: 32px !important;
  }
}
.profile-avatar:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow:
    0 14px 40px rgba(139, 92, 246, 0.4),
    0 0 0 3px rgba(255, 255, 255, 0.14) !important;
}
.profile-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
@media (min-width: 420px) {
  .profile-title {
    font-size: 1.3rem !important;
  }
}
.profile-email {
  position: relative;
  z-index: 1;
  font-size: .78rem !important;
  opacity: .65;
}
.tier-badge {
  position: relative;
  z-index: 1;
}
.profile-level {
  margin: 0 !important;
  padding: 12px 20px !important;
  border-radius: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.06),
    rgba(236, 72, 153, 0.03)
  ) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
@media (min-width: 420px) {
  .profile-level {
    padding: 14px 24px !important;
  }
}
.profile-level-badge {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 1.1rem !important;
  box-shadow:
    0 6px 20px var(--accent-glow),
    0 0 0 2px rgba(255, 255, 255, 0.08) !important;
}
@media (min-width: 420px) {
  .profile-level-badge {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 1.25rem !important;
  }
}
.profile-progress-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
@media (min-width: 420px) {
  .profile-progress-track {
    height: 8px !important;
  }
}
.profile-progress-fill {
  height: 100% !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 14px var(--accent-glow),
    0 0 4px var(--accent) !important;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* Profile body area */
.profile-username-section,
.profile-edit-grid,
.profile-tabs,
.profile-panel,
.profile-section {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (min-width: 420px) {
  .profile-username-section,
  .profile-edit-grid,
  .profile-tabs,
  .profile-panel,
  .profile-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
.profile-tabs {
  margin: 12px 16px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex !important;
  gap: 4px !important;
}
@media (min-width: 420px) {
  .profile-tabs {
    margin: 14px 24px !important;
  }
}
.profile-tab-btn {
  padding: 9px 10px !important;
  border-radius: 11px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  transition: all .2s var(--ease) !important;
  flex: 1 !important;
  text-align: center !important;
  white-space: nowrap;
}
.profile-tab-btn.active {
  box-shadow: 0 4px 16px var(--accent-glow) !important;
  background: var(--gradient-main) !important;
  color: #fff !important;
}

/* Enhanced stat cards */
.profile-stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  padding: 0 16px !important;
  margin-top: 4px;
}
@media (min-width: 420px) {
  .profile-stats {
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 0 24px !important;
  }
}
.profile-stat {
  padding: 14px 8px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.25s var(--ease) !important;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.profile-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.1),
    rgba(236, 72, 153, 0.08)
  );
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.profile-stat:hover {
  border-color: rgba(139, 92, 246, 0.2) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.profile-stat:hover::before {
  opacity: 1;
}
.profile-stat-icon {
  font-size: 22px !important;
  margin-bottom: 4px !important;
  position: relative;
  z-index: 1;
}
.profile-stat b {
  font-size: 1.3rem !important;
  position: relative;
  z-index: 1;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1.2;
}
.profile-stat small {
  position: relative;
  z-index: 1;
  font-size: 0.68rem !important;
  opacity: .7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Saved line */
.profile-saved-line {
  margin: 10px 16px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: .78rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  flex-wrap: wrap;
  line-height: 1.4;
  color: var(--text-dim);
}
.profile-saved-line b {
  color: var(--text);
  font-weight: 800;
}
@media (min-width: 420px) {
  .profile-saved-line {
    margin: 10px 24px !important;
  }
}

/* Tools grid */
.profile-tool-btn {
  padding: 14px 8px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: all 0.25s var(--ease) !important;
}
.profile-tool-btn:hover {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.12) !important;
}
.profile-tool-icon {
  font-size: 1.5rem !important;
}

/* Logout button */
.profile-logout-btn {
  margin: 14px 16px !important;
  width: calc(100% - 32px) !important;
  padding: 12px !important;
  border-radius: 12px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  background: rgba(239, 68, 68, .12) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, .2) !important;
  box-shadow: none !important;
  transition: all 0.25s var(--ease) !important;
}
.profile-logout-btn:hover {
  background: rgba(239, 68, 68, .2) !important;
  border-color: rgba(239, 68, 68, .35) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.15) !important;
  color: #fff !important;
}
@media (min-width: 420px) {
  .profile-logout-btn {
    margin: 16px 24px !important;
    width: calc(100% - 48px) !important;
    padding: 14px !important;
  }
}

/* Achievement cards */
.achievement-item {
  padding: 14px 8px !important;
  border-radius: 14px !important;
  transition: all 0.3s var(--ease) !important;
}
.achievement-item.earned {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
}
.achievement-item.earned:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.15);
}

/* --- Overall Design Enhancements --- */

/* Enhanced hero section */
.hero-section h1 {
  letter-spacing: -0.03em;
  line-height: 1.15 !important;
}

/* Better glass effects globally */
.glass-deep {
  background: rgba(12, 12, 30, 0.75) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
}
.glass-deep:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Enhanced AI section */
.ai-section {
  border-radius: 22px !important;
  padding: 22px !important;
}
.ai-section::before {
  border-radius: 22px !important;
  opacity: 0.1 !important;
}
.ai-input {
  border-radius: 16px !important;
  padding: 16px 52px 16px 18px !important;
  font-size: 0.9rem !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.ai-input:focus {
  background: rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.2),
    0 4px 20px rgba(139, 92, 246, 0.1) !important;
}
.ai-search-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}
.ai-chip {
  padding: 8px 14px !important;
  border-radius: 100px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.25s var(--ease) !important;
}
.ai-chip:hover {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15) !important;
}

/* Enhanced mood buttons */
.mood-btn {
  padding: 11px 18px !important;
  border-radius: 100px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.mood-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}
.mood-btn.active {
  box-shadow: 0 6px 24px var(--accent-glow) !important;
}

/* Enhanced result card */
.result-card {
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  transition: all 0.3s var(--ease);
}
.result-card:hover {
  border-color: rgba(139, 92, 246, 0.15) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
}
.result-card-inner {
  padding: 22px !important;
  background: rgba(6, 6, 20, 0.75) !important;
}

/* Enhanced buttons globally */
.btn-primary {
  border-radius: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  transition: all 0.3s var(--ease) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
}

/* FAB enhancements */
.fab-container .fab-main {
  box-shadow:
    0 8px 32px var(--accent-glow),
    0 0 0 2px rgba(255, 255, 255, 0.08) !important;
}
.fab-item {
  border-radius: 14px !important;
  transition: all 0.25s var(--ease) !important;
}
.fab-item:hover {
  transform: translateX(-4px) !important;
}

/* Enhanced section titles */
.section-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

/* Trending cards polish */
.trending-card {
  border-radius: 16px !important;
  overflow: visible !important;
  transition: all 0.3s var(--ease) !important;
}
.trending-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
}

/* Glass input polish */
.glass-input {
  border-radius: 12px !important;
  transition: all 0.3s var(--ease) !important;
}

/* Glass select polish */
.glass-select {
  border-radius: 12px !important;
}

/* Modal overlay enhance */
.modal-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Smooth page transitions */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-section,
.ai-section,
.mood-section,
.filter-section,
.result-section {
  animation: fadeSlideUp 0.5s var(--ease) both;
}
.mood-section {
  animation-delay: 0.05s;
}
.filter-section {
  animation-delay: 0.1s;
}
.ai-section {
  animation-delay: 0.15s;
}

/* History items polish */
.profile-history-item {
  border-radius: 14px !important;
  padding: 10px !important;
  transition: all 0.25s var(--ease) !important;
}
.profile-history-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(139, 92, 246, 0.15) !important;
  transform: translateX(2px);
}

/* Share menu polish */
.share-menu-content {
  border-radius: 20px !important;
  padding: 20px !important;
}
.share-menu-btn {
  border-radius: 14px !important;
  transition: all 0.25s var(--ease) !important;
}
.share-menu-btn:hover {
  transform: translateX(4px) !important;
}

/* Streak badge polish */
.profile-streak {
  border-radius: 24px !important;
  padding: 8px 16px !important;
  backdrop-filter: blur(8px);
}

/* Scrollbar styling for all scrollable areas */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.25);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.4);
}

/* Selection color */
::selection {
  background: rgba(139, 92, 246, 0.35);
  color: #fff;
}

/* Profile section titles */
.profile-section-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em;
}

/* Profile username styling */
.profile-username-save {
  border-radius: 12px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  transition: all 0.25s var(--ease) !important;
}
.profile-username-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--accent-glow);
}

/* Profile share button */
.profile-share-btn {
  border-radius: 12px !important;
  padding: 10px 16px !important;
  transition: all 0.25s var(--ease) !important;
}
.profile-share-btn:hover {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: rgba(139, 92, 246, 0.25) !important;
  transform: translateY(-1px);
}

/* Subscription info */
.profile-sub-info {
  border-radius: 16px !important;
  padding: 16px !important;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.08),
    rgba(236, 72, 153, 0.05)
  ) !important;
  border: 1px solid rgba(139, 92, 246, 0.1) !important;
}

/* Daily pick card */
.daily-pick-card {
  border-radius: 20px !important;
  transition: all 0.3s var(--ease) !important;
}
.daily-pick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

/* Duo modal */
.duo-modal-content {
  border-radius: 24px !important;
  overflow: hidden !important;
}

/* Rating modal */
.rating-modal-content {
  border-radius: 22px !important;
}

/* Tooltip-like hover effect for interactive elements */
button,
a,
.mood-btn,
.ai-chip,
.trending-card {
  -webkit-tap-highlight-color: transparent;
}

/* Profile modal close button positioning fix */
.profile-modal-content .modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 10 !important;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  transition: all 0.25s var(--ease);
}
.profile-modal-content .modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  transform: rotate(90deg) scale(1.1);
}

/* Google login: show only one designed button, keep official Google iframe invisible for real sign-in click */
.google-login-wrap {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  margin-bottom: 8px !important;
}
.google-login-wrap .auth-google-btn {
  margin-bottom: 0 !important;
  pointer-events: none !important;
}
#google-btn-container {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 52px !important;
  opacity: 0.01 !important;
  z-index: 5 !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
#google-btn-container > div,
#google-btn-container iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 52px !important;
}

/* Mobile header menu fix */
@media (max-width: 768px) {
  .top-menu,
  .categories-menu,
  .nav-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }

  .top-menu::-webkit-scrollbar,
  .categories-menu::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .top-menu a,
  .categories-menu a,
  .nav-tabs a {
    flex-shrink: 0;
  }
}

/* Old conflicting mobile trending rules removed — consolidated in TRENDING FIX section below */
/* ===== TRENDING FIX: PC + TABLET + MOBILE ===== */

/* Базово для всіх екранів */
.trending-section {
  width: 100% !important;
  overflow: visible !important;
}

.trending-scroll {
  display: flex !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 4px 0 14px !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.trending-scroll::-webkit-scrollbar {
  height: 6px;
}

.trending-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 20px;
}

.trending-card {
  flex: 0 0 180px !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  overflow: visible !important;
}

.trending-card img,
.trending-card .trending-poster {
  width: 100% !important;
  height: 270px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  display: block !important;
}

.trending-card .trending-name,
.trending-card-title,
.trending-title {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 0 2px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

.trending-card .trending-meta,
.trending-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 4px !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: var(--text-dim) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* ПК */
@media (min-width: 1024px) {
  .trending-scroll {
    gap: 20px !important;
  }

  .trending-card {
    flex-basis: 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
  }

  .trending-card img,
  .trending-card .trending-poster {
    height: 285px !important;
  }

  .trending-card .trending-name,
  .trending-card-title,
  .trending-title {
    font-size: 16px !important;
  }

  .trending-card .trending-meta,
  .trending-card-meta {
    font-size: 14px !important;
  }
}

/* Широкий ПК */
@media (min-width: 1400px) {
  .trending-card {
    flex-basis: 205px !important;
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
  }

  .trending-card img,
  .trending-card .trending-poster {
    height: 308px !important;
  }
}

/* Планшет */
@media (min-width: 769px) and (max-width: 1023px) {
  .trending-card {
    flex-basis: 170px !important;
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
  }

  .trending-card img,
  .trending-card .trending-poster {
    height: 255px !important;
  }
}

/* Мобільний */
@media (max-width: 768px) {
  .trending-scroll {
    gap: 14px !important;
    padding-left: 0 !important;
    padding-right: 12px !important;
  }

  .trending-card {
    flex-basis: 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  .trending-card img,
  .trending-card .trending-poster {
    height: 225px !important;
  }

  .trending-card .trending-name,
  .trending-card-title,
  .trending-title {
    font-size: 13px !important;
  }

  .trending-card .trending-meta,
  .trending-card-meta {
    font-size: 12px !important;
  }
}

/* ===== DESIGN IMPROVEMENTS v3 ===== */

/* Hero section enhancements */
.hero-section {
  padding-top: 20px !important;
  padding-bottom: 28px !important;
}
.hero-title {
  letter-spacing: -0.03em !important;
}
.hero-gradient {
  color: var(--accent-light) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Hero CTA — slow ambient glow, paused on hover and reduced motion */
@keyframes ctaPulse {
  0%,
  100% {
    box-shadow: 0 4px 20px var(--accent-glow);
  }
  50% {
    box-shadow:
      0 5px 26px var(--accent-glow),
      0 0 40px rgba(139, 92, 246, 0.08);
  }
}
.hero-cta {
  animation: ctaPulse 4.5s ease-in-out infinite !important;
}
.hero-cta:hover {
  animation: none !important;
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 8px 40px var(--accent-glow) !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta {
    animation: none !important;
  }
  .hero-cta:hover {
    transform: translateY(-2px) !important;
  }
}

/* Trending card hover glow */
.trending-card {
  transition: all 0.3s var(--ease) !important;
  border-radius: 18px !important;
}
.trending-card:hover {
  transform: translateY(-6px) scale(1.03) !important;
  filter: brightness(1.05);
}
.trending-card:hover .trending-poster {
  box-shadow:
    0 12px 40px rgba(139, 92, 246, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Improved mood buttons */
.mood-btn {
  transition: all 0.3s var(--spring) !important;
}

/* Better pick button */
.pick-btn {
  transition: all 0.35s var(--spring) !important;
}
.pick-btn:hover {
  transform: translateY(-3px) scale(1.03) !important;
}

/* Lucky button shimmer */
@keyframes luckyShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
.lucky-btn {
  position: relative !important;
  overflow: hidden !important;
}
.lucky-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: luckyShimmer 4s ease-in-out infinite;
}

/* Saved section improvements */
.saved-section {
  transition: all 0.3s var(--ease) !important;
  background: rgba(139, 92, 246, 0.03) !important;
  border: 1px solid rgba(139, 92, 246, 0.12) !important;
  border-radius: var(--radius-lg, 18px) !important;
  margin-bottom: 16px !important;
}
.saved-section:hover {
  border-color: rgba(139, 92, 246, 0.25) !important;
  background: rgba(139, 92, 246, 0.06) !important;
}

/* Live bar pulse — superseded by .live-bar-pulse in the v2 LIVE BAR section
   above. Kept empty for backwards-compat with any 3rd-party CSS overrides. */

/* Cookie consent improvements */
.cookie-consent {
  border-top: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Footer enhancements */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.footer-brand {
  opacity: 0.6;
  transition: opacity 0.3s;
}
.footer-brand:hover {
  opacity: 1;
}

/* Better focus states for accessibility */
.tab-btn:focus-visible,
.mood-btn:focus-visible,
.pick-btn:focus-visible,
.ai-chip:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Smooth page load animation */
@keyframes pageLoad {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.main-content > section,
.main-content > .pick-section,
.main-content > .live-bar {
  animation: pageLoad 0.5s var(--ease) both;
}
.main-content > :nth-child(2) {
  animation-delay: 0.05s;
}
.main-content > :nth-child(3) {
  animation-delay: 0.1s;
}
.main-content > :nth-child(4) {
  animation-delay: 0.15s;
}
.main-content > :nth-child(5) {
  animation-delay: 0.2s;
}
.main-content > :nth-child(6) {
  animation-delay: 0.25s;
}
.main-content > :nth-child(7) {
  animation-delay: 0.3s;
}

/* Mobile header improvements */
@media (max-width: 480px) {
  .header {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
  .tab-btn {
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
  }
  .logo {
    font-size: 1rem !important;
  }
  .user-btn {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
  }
  .user-name {
    max-width: 50px !important;
  }
  .lang-switch {
    gap: 1px !important;
    padding: 1px !important;
  }
  .lang-btn {
    font-size: 0.6rem !important;
    padding: 3px 5px !important;
  }
}

/* Result card poster shadow */
.result-poster {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.3s var(--ease) !important;
}
.result-poster:hover {
  transform: scale(1.02) !important;
}

/* Action buttons hover state */
.action-btn {
  transition: all 0.25s var(--ease) !important;
}
.action-btn:hover {
  transform: translateY(-2px) !important;
  background: rgba(139, 92, 246, 0.12) !important;
  color: var(--accent-light) !important;
}

/* Brand footer */
.brand-footer {
  text-align: center !important;
  padding: 32px 16px !important;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.brand-footer:hover {
  opacity: 1;
}
.brand-mascot {
  font-size: 2rem !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* FAQ + Wordle button glow */
.footer-faq-btn,
.footer-wordle-btn {
  transition: all 0.3s var(--ease) !important;
}
.footer-faq-btn:hover,
.footer-wordle-btn:hover {
  color: #a78bfa !important;
  text-shadow: 0 0 12px rgba(139, 92, 246, 0.3) !important;
}

/* ===== DESIGN IMPROVEMENTS v4 — additional enhancements ===== */

/* --- Animated gradient border on hero CTA --- */
.hero-cta {
  position: relative !important;
  z-index: 1;
  isolation: isolate;
}
.hero-cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    #8b5cf6,
    #ec4899,
    #06d6a0,
    #3b82f6,
    #8b5cf6
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  filter: blur(6px);
}
.hero-cta:hover::before {
  opacity: 0.6;
}

/* --- Tab switch: animated underline indicator --- */
.tab-switch {
  position: relative !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 100px !important;
  padding: 4px !important;
}
.tab-btn {
  position: relative !important;
  z-index: 1;
  border-radius: 100px !important;
  transition: all 0.3s var(--ease) !important;
}
.tab-btn.active {
  background: var(--gradient-main) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}

/* --- AI section: floating badge animation --- */
@keyframes aiBadgeFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
.ai-badge {
  animation: aiBadgeFloat 3s ease-in-out infinite !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.2),
    rgba(236, 72, 153, 0.15)
  ) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--accent-light) !important;
}

/* --- Live bar: typing animation for popular item --- */
@keyframes liveBarSlide {
  0% {
    opacity: 0;
    transform: translateX(8px);
  }
  10% {
    opacity: 1;
    transform: translateX(0);
  }
  90% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-8px);
  }
}
/* (Old .live-bar override removed — v2 LIVE BAR provides its own styling.) */

/* --- Mood button: active state ring --- */
.mood-btn.active {
  position: relative !important;
  background: var(--gradient-main) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px var(--accent-glow), 0 0 0 2px rgba(139, 92, 246, 0.5) !important;
  transform: translateY(-2px) scale(1.05) !important;
  font-weight: 800 !important;
}
.mood-btn.active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 100px;
  background: var(--gradient-main);
  z-index: -1;
  opacity: 0.5;
  filter: blur(6px);
}

/* --- Filters section: smooth expand with border glow --- */
.filters-section {
  border-radius: 20px !important;
  transition: all 0.35s var(--ease) !important;
}
.filters-section:hover {
  border-color: rgba(139, 92, 246, 0.12) !important;
}
.filters-header {
  cursor: pointer !important;
  padding: 16px 20px !important;
  border-radius: 20px !important;
  transition: background 0.2s !important;
}
.filters-header:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
.filters-header .chevron {
  transition: transform 0.3s var(--ease) !important;
}

/* --- Pick button: keep the original simple --gradient-main look (purple→
   pink), no rainbow override, no animation on the bg.  Matches the
   previously-shipped design that the user confirmed looked correct. --- */

/* --- Lucky button: sparkle animation --- */
@keyframes luckySparkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  25% {
    opacity: 0.6;
    transform: scale(1.3) rotate(15deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  75% {
    opacity: 0.6;
    transform: scale(1.3) rotate(-15deg);
  }
}
.lucky-sparkle {
  animation: luckySparkle 2s ease-in-out infinite !important;
  display: inline-block !important;
}

/* --- Result card: entrance animation --- */
@keyframes resultCardIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.result-section:not(.hidden) .result-card {
  animation: resultCardIn 0.5s var(--spring) both !important;
}

/* --- Result card poster: parallax tilt on hover --- */
.result-poster-wrap {
  perspective: 600px !important;
  transition: transform 0.3s var(--ease) !important;
}
.result-poster-wrap:hover .result-poster {
  transform: rotateY(-3deg) rotateX(2deg) scale(1.02) !important;
  box-shadow: 12px 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* --- Save button: heart beat animation when saved --- */
@keyframes heartBeat {
  0%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.25);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.15);
  }
  60% {
    transform: scale(1);
  }
}
.save-btn.saved {
  animation: heartBeat 0.8s var(--ease) !important;
}

/* --- Section headers: gradient underline --- */
.section-title .title-glow {
  position: relative !important;
  display: inline-block !important;
}
.section-title .title-glow::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--gradient-main);
  opacity: 0.5;
}

/* --- Saved section: counter badge glow --- */
.saved-count-badge {
  background: var(--gradient-main) !important;
  box-shadow: 0 2px 10px var(--accent-glow) !important;
  font-weight: 800 !important;
}

/* --- Toast notifications: slide + fade --- */
@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.toast {
  animation: toastSlideIn 0.3s var(--spring) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* --- Cookie consent: improved layout --- */
.cookie-consent {
  border-radius: 20px 20px 0 0 !important;
  padding: 16px 24px !important;
  background: rgba(12, 12, 30, 0.95) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* --- Scroll progress bar at top of page --- */
.scroll-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3px !important;
  background: var(--gradient-main) !important;
  z-index: 9999 !important;
  transition: width 0.1s linear !important;
  box-shadow: 0 0 8px var(--accent-glow) !important;
}

/* --- Skeleton loading placeholders --- */
@keyframes skeletonPulse {
  0%,
  100% {
    opacity: 0.06;
  }
  50% {
    opacity: 0.12;
  }
}
.skeleton {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  animation: skeletonPulse 1.5s ease-in-out infinite !important;
}

/* --- Enhanced text selection on dark bg --- */
::selection {
  background: rgba(139, 92, 246, 0.4) !important;
  color: #fff !important;
}
::-moz-selection {
  background: rgba(139, 92, 246, 0.4) !important;
  color: #fff !important;
}

/* --- Improved tooltip style --- */
[title] {
  position: relative;
}

/* --- Subscription banner: gradient shimmer --- */
@keyframes subBannerShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
.sub-plans-banner {
  position: relative !important;
  overflow: hidden !important;
}
.sub-plans-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  background-size: 200% 100%;
  animation: subBannerShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

/* --- Auth benefits grid: staggered entrance --- */
@keyframes benefitPop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.auth-benefit {
  animation: benefitPop 0.4s var(--spring) both !important;
}
.auth-benefit:nth-child(1) {
  animation-delay: 0.05s !important;
}
.auth-benefit:nth-child(2) {
  animation-delay: 0.1s !important;
}
.auth-benefit:nth-child(3) {
  animation-delay: 0.15s !important;
}
.auth-benefit:nth-child(4) {
  animation-delay: 0.2s !important;
}

/* --- Profile avatar: hover rotate and glow --- */
.profile-avatar {
  transition: all 0.4s var(--ease) !important;
}
.profile-avatar:hover {
  transform: rotate(10deg) scale(1.1) !important;
  box-shadow:
    0 16px 48px rgba(139, 92, 246, 0.45),
    0 0 0 4px rgba(255, 255, 255, 0.15) !important;
}

/* --- Achievement item: earned sparkle --- */
.achievement-item.earned {
  position: relative !important;
  overflow: hidden !important;
}
.achievement-item.earned::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(139, 92, 246, 0.1),
    transparent,
    rgba(236, 72, 153, 0.08),
    transparent
  );
  animation: achieveRotate 8s linear infinite;
  pointer-events: none;
}
@keyframes achieveRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Header: glass blur on scroll --- */
.header {
  transition: all 0.3s var(--ease) !important;
}
.header.scrolled {
  background: rgba(6, 6, 20, 0.9) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* --- Mobile improvements v2 --- */
@media (max-width: 768px) {
  .hero-title {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }
  .hero-subtitle {
    font-size: 0.85rem !important;
    padding: 0 8px !important;
  }
  .hero-cta {
    padding: 14px 28px !important;
    font-size: 0.9rem !important;
  }
  .hero-stats {
    gap: 16px !important;
  }
  .hero-stat-value {
    font-size: 1.3rem !important;
  }
  .ai-section {
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .ai-input {
    font-size: 0.85rem !important;
  }
  .mood-grid {
    gap: 8px !important;
  }
  .mood-btn {
    padding: 9px 14px !important;
    font-size: 0.78rem !important;
  }
  .pick-btn {
    border-radius: 18px !important;
  }
  .result-card-inner {
    padding: 16px !important;
  }
  .filters-section {
    border-radius: 16px !important;
  }
  .auth-modal-content {
    max-width: 92vw !important;
    padding: 28px 20px 22px !important;
  }
}

/* --- Tablet fine-tuning --- */
@media (min-width: 769px) and (max-width: 1023px) {
  .hero-title {
    font-size: 2rem !important;
  }
  .hero-stats {
    gap: 24px !important;
  }
  .ai-section {
    padding: 20px !important;
  }
}

/* --- Wide desktop: more breathing room --- */
@media (min-width: 1400px) {
  .main-content {
    max-width: 820px !important;
  }
  .hero-title {
    font-size: 2.8rem !important;
  }
  .hero-subtitle {
    font-size: 1.05rem !important;
  }
  .ai-section {
    padding: 28px !important;
  }
  .mood-btn {
    padding: 12px 22px !important;
    font-size: 0.88rem !important;
  }
}

/* --- Reduced motion: respect user preferences --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* v84 modal/nav polish */
.modal,
#auth-modal,
#profile-modal,
#trailer-modal,
#rating-modal,
#donate-modal,
#collection-picker-modal,
#collection-edit-modal,
#collection-detail-modal,
#recent-picks-modal {
  z-index: 20000 !important;
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.68) !important;
}

.auth-modal-content,
.profile-modal-content {
  background: rgba(13, 15, 19, 0.96) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 72px rgba(0,0,0,0.52) !important;
}

.auth-title,
.profile-title {
  background: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
}

.auth-mascot {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.auth-mascot::before,
.auth-mascot-pulse,
.auth-mascot-name-ai-spark {
  display: none !important;
}

.auth-mascot-avatar {
  background: rgba(56,189,248,0.1) !important;
  border: 1px solid rgba(56,189,248,0.2) !important;
  box-shadow: none !important;
}

.auth-mascot-name,
.auth-mascot-text {
  color: rgba(244,244,245,0.78) !important;
}

.auth-mascot-name-ai {
  background: rgba(16,185,129,0.14) !important;
  color: #bbf7d0 !important;
  box-shadow: none !important;
}

.auth-google-btn,
.auth-field input,
.profile-field-group input,
.profile-field-group textarea {
  border-radius: 8px !important;
}

@media (max-width: 720px) {
  .modal:not(.hidden) ~ .mobile-nav,
  body:has(.modal:not(.hidden)) .mobile-nav,
  body:has(#auth-modal:not(.hidden)) .mobile-nav,
  body:has(#profile-modal:not(.hidden)) .mobile-nav {
    display: none !important;
  }
}

/* --- Print styles --- */
@media print {
  .header,
  .fab-container,
  .cookie-consent,
  .live-bar,
  canvas {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .result-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}

/* ============================
   v5: Desktop PC Design Improvements
   ============================ */

/* --- Desktop: wider layout & better spacing --- */
@media (min-width: 1024px) {
  #app {
    max-width: 1100px !important;
    padding: 0 32px 120px !important;
  }

  .header {
    padding: 16px 32px !important;
    margin: 12px 0 24px !important;
    border-radius: 20px !important;
  }

  .logo {
    font-size: 1.3rem !important;
  }

  .tab-btn {
    font-size: 0.88rem !important;
    padding: 10px 20px !important;
  }

  .hero-section {
    padding: 48px 0 40px !important;
  }

  .hero-title {
    font-size: 2.4rem !important;
    letter-spacing: -0.02em !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }

  .hero-cta {
    font-size: 1.05rem !important;
    padding: 16px 40px !important;
  }

  .hero-stats {
    gap: 40px !important;
    margin-top: 28px !important;
  }

  .hero-stat-value {
    font-size: 1.6rem !important;
  }

  .ai-section {
    padding: 28px !important;
    border-radius: 24px !important;
  }

  .ai-header h2 {
    font-size: 1.15rem !important;
  }

  .ai-input {
    font-size: 0.95rem !important;
    padding: 16px 54px 16px 20px !important;
  }

  .ai-chip {
    font-size: 0.82rem !important;
    padding: 8px 16px !important;
  }

  .mood-section {
    margin-bottom: 20px !important;
  }

  .mood-btn {
    font-size: 0.88rem !important;
    padding: 11px 20px !important;
  }

  .mood-grid {
    gap: 10px !important;
  }

  .section-title {
    font-size: 1.15rem !important;
    margin-bottom: 16px !important;
  }

  .filters-section {
    border-radius: 20px !important;
  }

  .filters-header {
    padding: 16px 24px !important;
  }

  .filters-title {
    font-size: 1.05rem !important;
  }

  .daily-pick-card {
    padding: 24px !important;
    border-radius: 20px !important;
  }

  .live-bar {
    padding: 10px 14px 10px 12px !important;
    border-radius: 14px !important;
    font-size: 0.82rem !important;
  }

  .result-card {
    padding: 28px !important;
    border-radius: 24px !important;
  }

  .result-poster-wrap {
    width: 180px !important;
    height: 270px !important;
  }

  .result-title {
    font-size: 1.3rem !important;
  }

  .result-desc {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  .action-btn {
    font-size: 0.85rem !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
  }

  .pick-btn {
    font-size: 1.1rem !important;
    padding: 18px 0 !important;
    border-radius: 18px !important;
  }

  .lucky-btn {
    font-size: 0.9rem !important;
    padding: 12px 28px !important;
  }

  .saved-section {
    border-radius: 20px !important;
  }

  .brand-footer {
    padding: 40px 20px !important;
    font-size: 0.9rem !important;
  }

  .footer-links {
    gap: 6px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-link {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
    gap: 4px !important;
  }
  .footer-link svg {
    width: 14px !important;
    height: 14px !important;
  }

  .lang-btn {
    font-size: 0.78rem !important;
    padding: 5px 10px !important;
  }

  .user-btn {
    font-size: 0.85rem !important;
    padding: 8px 14px !important;
  }

  .user-name {
    max-width: 100px !important;
  }
}

/* --- Wide desktop: extra enhancements --- */
@media (min-width: 1400px) {
  #app {
    max-width: 1300px !important;
    padding: 0 40px 120px !important;
  }

  .header {
    padding: 18px 40px !important;
  }

  .hero-title {
    font-size: 2.8rem !important;
  }

  .hero-subtitle {
    font-size: 1.08rem !important;
    max-width: 520px !important;
  }

  .hero-stats {
    gap: 56px !important;
  }

  .hero-stat-value {
    font-size: 1.8rem !important;
  }

  .ai-section {
    padding: 32px !important;
  }

  .ai-input {
    font-size: 1rem !important;
  }

  .result-poster-wrap {
    width: 200px !important;
    height: 300px !important;
  }

  .result-title {
    font-size: 1.45rem !important;
  }

  .trending-card {
    width: 210px !important;
    flex-basis: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
  }

  .trending-card img,
  .trending-card .trending-poster {
    height: 315px !important;
  }

  .user-name {
    max-width: 120px !important;
  }
}

/* --- Ultra-wide desktop --- */
@media (min-width: 1700px) {
  #app {
    max-width: 1440px !important;
    padding: 0 48px 120px !important;
  }

  .header {
    padding: 20px 48px !important;
  }

  .hero-title {
    font-size: 3.2rem !important;
  }

  .hero-subtitle {
    font-size: 1.15rem !important;
    max-width: 600px !important;
  }

  .hero-cta {
    font-size: 1.15rem !important;
    padding: 18px 48px !important;
  }

  .ai-section {
    padding: 36px !important;
  }

  .mood-btn {
    font-size: 0.95rem !important;
    padding: 13px 24px !important;
  }

  .result-card {
    padding: 32px !important;
  }

  .result-poster-wrap {
    width: 220px !important;
    height: 330px !important;
  }

  .trending-card {
    width: 230px !important;
    flex-basis: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
  }

  .trending-card img,
  .trending-card .trending-poster {
    height: 345px !important;
  }
}

/* --- Daily pick card: better desktop layout --- */
@media (min-width: 768px) {
  .daily-pick-card .daily-pick-content {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .daily-pick-card .daily-pick-poster {
    width: 100px !important;
    height: 150px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }

  .daily-pick-card .daily-pick-info {
    flex: 1 !important;
  }
}

/* --- Smoother glass borders on desktop --- */
@media (min-width: 1024px) {
  .glass-deep {
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  .glass-deep:hover {
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }
}

/* --- Mobile: ensure lang-switch is always visible --- */
@media (max-width: 768px) {
  .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .lang-switch {
    display: flex !important;
  }

  .lang-btn {
    font-size: 0.65rem !important;
    padding: 3px 6px !important;
  }
}

@media (max-width: 380px) {
  .lang-switch {
    display: flex !important;
  }

  .lang-btn {
    font-size: 0.58rem !important;
    padding: 2px 4px !important;
  }

  .user-name {
    max-width: 40px !important;
  }

  .tab-btn {
    padding: 5px 8px !important;
    font-size: 0.68rem !important;
  }
}

/* --- AI loading improvements --- */
.ai-section .loading-dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
}

.ai-section .loading-dots span {
  width: 6px;
  height: 6px;
  background: var(--accent-light);
  border-radius: 50%;
  animation: aiDotPulse 1.4s infinite ease-in-out both;
}

.ai-section .loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.ai-section .loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes aiDotPulse {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- Better scrollbar for trending on desktop --- */
@media (min-width: 1024px) {
  .trending-scroll {
    padding-bottom: 8px !important;
  }

  .trending-scroll::-webkit-scrollbar {
    height: 6px;
  }

  .trending-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
  }

  .trending-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }

  .trending-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* --- Fix: desktop hover on trending cards --- */
@media (min-width: 1024px) {
  .trending-card {
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease) !important;
  }

  .trending-card:hover {
    transform: translateY(-6px) scale(1.03) !important;
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2) !important;
  }
}

/* --- Improved pick button desktop glow --- */
@media (min-width: 1024px) {
  .pick-btn {
    box-shadow: 0 4px 24px var(--accent-glow) !important;
    transition: all 0.3s var(--ease) !important;
  }

  .pick-btn:hover {
    box-shadow: 0 8px 40px var(--accent-glow), 0 0 60px rgba(139, 92, 246, 0.15) !important;
    transform: translateY(-2px) !important;
  }
}

/* --- Desktop: better saved section --- */
@media (min-width: 1024px) {
  .saved-section {
    padding: 20px 24px !important;
  }

  .saved-header {
    font-size: 1.05rem !important;
  }
}

/* ============================
   PC Compact Fix — centralized, smaller layout
   ============================ */

/* Reduce max-width so content never sprawls across full screen */
@media (min-width: 1024px) {
  #app {
    max-width: 860px !important;
    padding: 0 28px 100px !important;
  }

  .hero-section {
    padding: 36px 0 28px !important;
  }

  .hero-title {
    font-size: 2rem !important;
  }

  .hero-subtitle {
    font-size: 0.92rem !important;
    max-width: 420px !important;
  }

  .hero-cta {
    font-size: 0.95rem !important;
    padding: 13px 32px !important;
  }

  .hero-stats {
    gap: 28px !important;
    margin-top: 20px !important;
  }

  .hero-stat-value {
    font-size: 1.4rem !important;
  }

  .hero-stat-label {
    font-size: 0.68rem !important;
  }

  .pick-btn {
    font-size: 0.98rem !important;
    padding: 15px 0 !important;
  }
}

@media (min-width: 1400px) {
  #app {
    max-width: 960px !important;
    padding: 0 32px 100px !important;
  }

  .hero-title {
    font-size: 2.2rem !important;
  }

  .hero-subtitle {
    font-size: 0.95rem !important;
    max-width: 460px !important;
  }

  .hero-cta {
    font-size: 1rem !important;
    padding: 14px 36px !important;
  }

  .hero-stat-value {
    font-size: 1.5rem !important;
  }

  .hero-stats {
    gap: 36px !important;
  }
}

@media (min-width: 1700px) {
  #app {
    max-width: 1040px !important;
    padding: 0 36px 100px !important;
  }

  .hero-title {
    font-size: 2.4rem !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
    max-width: 500px !important;
  }

  .hero-cta {
    font-size: 1.05rem !important;
    padding: 15px 40px !important;
  }

  .hero-stat-value {
    font-size: 1.6rem !important;
  }
}

/* Fix: trending cards scale with smaller container */
@media (min-width: 1400px) {
  .trending-card {
    width: 170px !important;
    flex-basis: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
  }

  .trending-card img,
  .trending-card .trending-poster {
    height: 255px !important;
  }
}

@media (min-width: 1700px) {
  .trending-card {
    width: 180px !important;
    flex-basis: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }

  .trending-card img,
  .trending-card .trending-poster {
    height: 270px !important;
  }
}

/* Fix: result card poster proportional to smaller layout */
@media (min-width: 1400px) {
  .result-poster-wrap {
    width: 160px !important;
    height: 240px !important;
  }
}

/* Fix: main-content constraint also for wide screens */
@media (min-width: 1024px) {
  .main-content {
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════
   ENHANCEMENTS — Receipt, Onboarding, Transitions, etc.
   ═══════════════════════════════════════════════════════ */

/* ─── Receipt Modal ─── */
.receipt-modal { z-index: 10000; }
.receipt-content {
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.receipt-paper {
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f23 100%);
  padding: 28px 24px;
  font-family: 'Courier New', monospace;
  position: relative;
}
.receipt-paper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 8px,
    rgba(255,255,255,0.06) 8px,
    rgba(255,255,255,0.06) 16px
  );
}
.receipt-header {
  text-align: center;
  margin-bottom: 12px;
}
.receipt-logo {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 2px;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.receipt-title {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.receipt-divider {
  text-align: center;
  color: rgba(255,255,255,0.12);
  font-size: 0.75rem;
  letter-spacing: 2px;
  margin: 12px 0;
  overflow: hidden;
}
.receipt-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.receipt-val {
  font-weight: 700;
  color: var(--text);
  text-align: right;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.receipt-price {
  font-size: 1.1rem;
  color: var(--accent3);
}
.receipt-status {
  text-align: center;
  padding: 14px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
}
.receipt-status-icon {
  font-size: 1.2rem;
  margin-right: 6px;
}
.receipt-confirmed {
  background: rgba(6, 214, 160, 0.1);
  border: 1px solid rgba(6, 214, 160, 0.3);
  color: #06d6a0;
}
.receipt-pending {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
.receipt-rejected {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.receipt-list-badge.rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.receipt-footer {
  text-align: center;
}
.receipt-link-row {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.receipt-link {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
  font-size: 0.7rem;
}
.receipt-link:hover {
  text-decoration: underline;
}
.receipt-copy-btn {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.8rem;
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  margin-bottom: 12px;
}
.receipt-copy-btn:hover {
  background: rgba(139,92,246,0.15);
  border-color: var(--accent);
}
.receipt-barcode {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.15);
  letter-spacing: 1px;
  margin-top: 8px;
  overflow: hidden;
  white-space: nowrap;
}

/* Receipt list */
.receipt-list-content {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px;
}
.receipt-list-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.receipt-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}
.receipt-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.receipt-list-item:hover {
  border-color: var(--accent);
  background: rgba(139,92,246,0.06);
}
.receipt-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.receipt-list-id {
  font-size: 0.75rem;
  font-family: 'Courier New', monospace;
  color: var(--text-dim);
}
.receipt-list-plan {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.receipt-list-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.receipt-list-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.receipt-list-badge.confirmed {
  background: rgba(6,214,160,0.12);
  color: #06d6a0;
}
.receipt-list-badge.pending {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
}

/* ─── Onboarding ─── */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(6,6,20,0.92);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.onboarding-overlay.onboarding-visible {
  opacity: 1;
  pointer-events: all;
}
.onboarding-overlay.onboarding-hidden {
  opacity: 0;
  pointer-events: none;
}
.onboarding-card {
  background: var(--glass-deep);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 40px 32px 32px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  position: relative;
  animation: onboardingCardIn 0.5s var(--spring);
}
.onboarding-card-exit {
  animation: onboardingCardOut 0.2s var(--ease) forwards;
}
.onboarding-card-enter {
  animation: onboardingCardIn 0.4s var(--spring);
}
@keyframes onboardingCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes onboardingCardOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-15px) scale(0.97); }
}
.onboarding-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: all 0.3s var(--ease);
}
.onboarding-dot.active {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform: scale(1.2);
}
.onboarding-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
  animation: onboardingBounce 0.6s var(--spring);
}
@keyframes onboardingBounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.onboarding-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 10px;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.onboarding-desc {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 24px;
}
.onboarding-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.onboarding-skip {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.82rem;
  padding: 10px 20px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.onboarding-skip:hover {
  color: var(--text);
  border-color: var(--glass-border-hover);
}
.onboarding-next {
  background: var(--gradient-main);
  border: none;
  color: #fff;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s var(--spring);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.onboarding-next:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 24px var(--accent-glow);
}
.onboarding-next:active {
  transform: scale(0.96);
}

/* ─── PICKSY-AI onboarding (mascot tour) ─── */
.picksy-onboarding .picksy-onb-card {
  max-width: 440px;
  padding: 22px 24px 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.picksy-onboarding .picksy-onb-card > .onboarding-progress {
  margin-bottom: 0;
}
.picksy-onboarding .onboarding-actions {
  margin-top: 4px;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.picksy-onboarding .onboarding-skip {
  padding: 12px 22px;
  font-size: 0.86rem;
  background: rgba(255,255,255,0.04);
}
.picksy-onboarding .onboarding-skip:hover {
  background: rgba(255,255,255,0.08);
}
.picksy-onboarding .onboarding-next {
  padding: 12px 26px;
  font-size: 0.9rem;
}
.picksy-onboarding .picksy-onb-card::before {
  content: '';
  position: absolute;
  inset: -40% 30% auto -30%;
  height: 200px;
  background: radial-gradient(closest-side, rgba(167,139,250,.28), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: picksyOnbHaloDrift 9s ease-in-out infinite;
}
@keyframes picksyOnbHaloDrift {
  0%, 100% { transform: translate(0, 0); opacity: .85; }
  50%      { transform: translate(40px, 18px); opacity: 1; }
}
.picksy-onboarding .onboarding-skip-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.picksy-onboarding .onboarding-skip-x:hover {
  color: var(--text);
  border-color: var(--glass-border-hover);
  transform: rotate(90deg);
}
.picksy-onb-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1;
}
.picksy-onb-figure {
  margin-top: 4px;
}
.picksy-onb-figure .picksy-figure {
  width: 110px !important;
  height: 110px !important;
}
.picksy-onb-bubble {
  position: relative;
  max-width: 360px;
  width: 100%;
  padding: 14px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(167,139,250,.16), rgba(236,72,153,.08));
  border: 1px solid rgba(167,139,250,.35);
  box-shadow: 0 12px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
  color: #f5f5ff;
  animation: picksyOnbBubbleIn 0.55s cubic-bezier(.2,.7,.2,1.1) both;
}
.picksy-onb-bubble::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, rgba(167,139,250,.32), rgba(236,72,153,.16));
  border-left: 1px solid rgba(167,139,250,.35);
  border-top: 1px solid rgba(167,139,250,.35);
}
.picksy-onb-bubble-in {
  animation: picksyOnbBubbleIn 0.5s cubic-bezier(.2,.7,.2,1.1) both;
}
@keyframes picksyOnbBubbleIn {
  0%   { opacity: 0; transform: translateY(-8px) scale(.94); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.picksy-onb-intro {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}
.picksy-onb-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 8px;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.picksy-onb-desc {
  font-size: .9rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 10px;
  min-height: 3.4em;
}
.picksy-onb-typing::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  color: var(--accent);
  animation: picksyOnbCaret 0.85s steps(1) infinite;
}
@keyframes picksyOnbCaret {
  50% { opacity: 0; }
}
.picksy-onb-hint {
  display: inline-block;
  font-size: .78rem;
  color: var(--text);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  padding: 5px 10px;
  border-radius: 100px;
  margin-top: 4px;
}
.picksy-onb-hint:empty {
  display: none;
}
@media (max-width: 480px) {
  .picksy-onboarding .picksy-onb-card { padding: 14px 16px 18px; }
  .picksy-onb-figure .picksy-figure { width: 92px !important; height: 92px !important; }
  .picksy-onb-bubble { padding: 12px 14px 14px; }
  .picksy-onb-title { font-size: 1.05rem; }
  .picksy-onb-desc { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .picksy-onb-figure .picksy-figure { animation: none !important; }
  .picksy-onboarding .picksy-onb-card::before { animation: none !important; }
  .picksy-onb-typing::after { display: none; }
}

/* ─── Page Transitions (scroll-in animations) ─── */
.section-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.section-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Enhanced Confetti ─── */
.enhanced-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
}
.enhanced-confetti .confetti-piece {
  position: absolute;
  top: -20px;
  animation: confettiEnhancedFall linear forwards;
}
.confetti-circle { border-radius: 50%; }
.confetti-square { border-radius: 2px; }
@keyframes confettiEnhancedFall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) translateX(var(--confetti-x, 0px)) rotate(var(--confetti-rot, 720deg)) scale(0.3);
    opacity: 0;
  }
}

/* ─── Book Reader Modal ─── */
.book-reader-modal { z-index: 10000; }
.book-reader-content {
  max-width: 540px;
  margin: 0 auto;
  padding: 28px 24px;
  max-height: 85vh;
  overflow-y: auto;
}
.book-reader-header {
  margin-bottom: 20px;
}
.book-reader-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.book-reader-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.book-reader-meta span {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.book-reader-body {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
}
.book-reader-text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-dim);
  max-height: 400px;
  overflow-y: auto;
}
.book-reader-fulllink {
  display: block;
  text-align: center;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 12px;
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: var(--radius-md);
  transition: all 0.2s var(--ease);
}
.book-reader-fulllink:hover {
  background: rgba(139,92,246,0.08);
  border-color: var(--accent);
}

/* Reading time meta tag */
.meta-tag-time {
  background: rgba(6,214,160,0.1) !important;
  border-color: rgba(6,214,160,0.25) !important;
  color: #06d6a0 !important;
}

/* Reader button styling */
.reader-btn {
  color: var(--accent3) !important;
  border-color: rgba(6,214,160,0.3) !important;
}
.reader-btn:hover {
  background: rgba(6,214,160,0.1) !important;
}

/* ─── Combined Mood Selection Indicator ─── */
.mood-btn.active {
  position: relative;
  background: var(--gradient-main) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px var(--accent-glow), 0 0 0 2px rgba(139, 92, 246, 0.5) !important;
  transform: translateY(-2px) scale(1.05) !important;
  font-weight: 800 !important;
}
.mood-btn.active::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: var(--accent3);
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: 0 0 8px var(--accent3-glow);
  z-index: 2;
}

/* ─── Prefers Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .blob { animation: none !important; }
  .section-animate {
    opacity: 1 !important;
    transform: none !important;
  }
  .confetti-container,
  .enhanced-confetti,
  .swipe-particles,
  .onboarding-overlay {
    display: none !important;
  }
}
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
.reduced-motion .blob { animation: none !important; }
.reduced-motion .section-animate {
  opacity: 1 !important;
  transform: none !important;
}
.reduced-motion .confetti-container,
.reduced-motion .enhanced-confetti {
  display: none !important;
}

/* ─── Design Review: Button & UI Consistency Fixes ─── */
.action-btn:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}
.lucky-btn:active {
  transform: scale(0.96);
  border-color: var(--accent3);
  color: var(--accent3);
}
.lucky-btn:focus {
  outline: none;
  border-color: var(--accent3);
  box-shadow: 0 0 0 2px rgba(6, 214, 160, 0.3);
}
.tab-btn:active {
  transform: scale(0.95);
}
.tab-btn:focus {
  outline: none;
}
.mood-btn:active {
  transform: scale(0.95) !important;
}
.mood-btn:focus {
  outline: none;
}
.user-btn:active {
  transform: scale(0.96);
}
.user-btn:focus {
  outline: none;
}
@media (max-width: 768px) {
  .action-btn:active,
  .pick-btn:active,
  .lucky-btn:active,
  .tab-btn:active,
  .mood-btn:active,
  .user-btn:active {
    -webkit-tap-highlight-color: transparent;
  }
  .pick-btn:focus,
  .lucky-btn:focus,
  .action-btn:focus {
    outline: none;
  }
}

/* ─── Enhanced Skeleton Shimmer ─── */
.skeleton-card .skeleton {
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.04) 30%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.04) 70%
  );
  background-size: 300% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}
.skeleton-card .skeleton-poster {
  width: 120px;
  min-height: 180px;
  border-radius: var(--radius-md);
}
.skeleton-card .skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Profile Receipts ─── */
.profile-receipts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}
.profile-receipt-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}
.profile-receipt-item:hover {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.3);
  transform: translateY(-1px);
}
.receipt-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.receipt-item-plan {
  font-weight: 800;
  font-size: 0.95rem;
  color: #a78bfa;
}
.receipt-item-price {
  font-weight: 900;
  font-size: 1.1rem;
  color: #10b981;
}
.receipt-item-meta {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.receipt-item-confirmed {
  color: #10b981;
  font-weight: 600;
}
.receipt-item-pending {
  color: #f59e0b;
  font-weight: 600;
}
.profile-receipts-empty {
  text-align: center;
  color: rgba(255,255,255,0.4);
  padding: 24px 0;
  font-size: 0.9rem;
}

/* ─── PC / Desktop Optimization ─── */
@media (min-width: 1024px) {
  .profile-modal-content {
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
  }
  .profile-tabs {
    display: flex;
    gap: 4px;
  }
  .profile-tab-btn {
    flex: 1;
    text-align: center;
  }
  .profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .profile-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .profile-edit-grid textarea {
    grid-column: 1 / -1;
  }
  .profile-edit-grid .profile-share-actions {
    grid-column: 1 / -1;
  }
  .receipt-modal .receipt-content {
    max-width: 480px;
  }
}

@media (min-width: 1400px) {
  .profile-modal-content {
    max-width: 640px;
  }
  .profile-stats {
    gap: 16px;
  }
  .profile-stat {
    padding: 22px !important;
  }
  .receipt-modal .receipt-content {
    max-width: 520px;
  }
}

@media (min-width: 1700px) {
  .profile-modal-content {
    max-width: 720px;
  }
}

/* =========================================================================
   DESIGN FIXES v5 — header on mobile (PREMIUM/PRO badge), more-btn overflow,
   misc design touch-ups requested by users.
   These rules live at the end of the file so they win the cascade and only
   target known elements; nothing here uses `!important` carelessly.
   ========================================================================= */

/* Header — make sure the row never overflows when the tier badge is added.
   On wide screens the badge sits in `.header-left` next to the logo; on
   mobile we shrink the badge a lot and let the header wrap if it absolutely
   has to so it never breaks layout the way it did before. */
.header {
  flex-wrap: wrap;
  row-gap: 6px;
}
.header-left {
  flex-wrap: wrap;
  min-width: 0;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#sub-tier-badge.tier-badge {
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}

@media (max-width: 540px) {
  .header {
    padding: 8px 10px !important;
    gap: 6px !important;
    row-gap: 6px;
  }
  .header-left {
    gap: 6px;
  }
  .logo {
    font-size: 0.95rem !important;
  }
  .logo-icon {
    font-size: 1.1rem;
  }
  /* Compact tier badge so PREMIUM/PRO never pushes the header into 2 rows
     that look broken. On small screens we keep it short & tight. */
  #sub-tier-badge.tier-badge {
    margin-left: 4px;
    padding: 2px 7px;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    border-radius: 14px;
  }
  /* Also shrink the small "🎮" header button so it doesn't crowd the row. */
  .game-header-btn {
    padding: 4px 8px !important;
    font-size: 0.85rem !important;
  }
  /* Tab switch a touch tighter on small screens. */
  .tab-btn {
    padding: 6px 9px !important;
    font-size: 0.7rem !important;
  }
  .tab-icon {
    font-size: 0.85rem;
  }
}


/* Extra-narrow phones — collapse PREMIUM to a star icon so the header
   stays on one visual row even on 320–360px screens. */
@media (max-width: 380px) {
  #sub-tier-badge.tier-badge {
    font-size: 0;
    padding: 4px 6px;
  }
  #sub-tier-badge.tier-badge::before {
    content: "★";
    font-size: 0.7rem;
    color: inherit;
  }
  #sub-tier-badge.tier-pro::before {
    content: "🚀";
    font-size: 0.72rem;
  }
  #sub-tier-badge.tier-free::before {
    content: "○";
  }
}

/* "Ще" / more-btn — on mobile the existing 16px padding + active scale made
   the button visually pop out of its grid cell. Tighten paddings and remove
   any active-state transform that could cause overflow. */
.more-btn {
  font-size: 0.95rem;
  padding: 12px 16px;
  border-radius: var(--radius);
  contain: layout paint;
}
.more-btn:active {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) inset;
}
.more-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 540px) {
  .more-btn {
    padding: 10px 14px;
    font-size: 0.88rem;
    border-radius: 14px;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 380px) {
  .more-btn {
    padding: 9px 12px;
    font-size: 0.82rem;
  }
}

/* Receipt modal copy button — bring its small visual style in line with
   the redesigned /pay page so they look like part of the same flow. */
.receipt-link {
  word-break: break-all;
  overflow-wrap: anywhere;
}
.receipt-copy-btn {
  margin-top: 8px;
}

/* Subscription plans modal — gracefully handle long plan names on mobile. */
@media (max-width: 540px) {
  .plan-name {
    font-size: 1.05rem !important;
  }
  .plan-feature-yes,
  .plan-feature-no {
    font-size: 0.82rem;
  }
}

/* Live bar v2 keeps a single row across all viewports — narrow-screen
   trimming is handled by the .live-bar-chip-popular { display:none }
   rule in the LIVE BAR v2 block above. */

/* =========================================================================
   DESIGN FIXES v6 — receipt modal mobile polish, pick-button safety nets,
   prevent any horizontal overflow on tiny screens.
   ========================================================================= */

/* Ensure no element accidentally pushes the document past viewport width. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}
#app {
  max-width: 100%;
  overflow-x: clip;
}

/* Pick button: keep the gradient and text inside the rounded shell on every
   viewport. Without min-width:0 + box-sizing the inner content would
   occasionally bleed past the rounded edges on Chrome mobile. */
.pick-btn,
.pick-btn-bg,
.pick-btn-content {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.pick-btn-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Receipt modal: on mobile the receipt paper used to clip its bottom buttons
   when the soft keyboard was open or the viewport was very short. Make the
   inner content scrollable and cap the height so it always fits the screen. */
.receipt-modal .receipt-content {
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.receipt-modal .receipt-paper {
  word-break: break-word;
}
.receipt-modal .receipt-link-row {
  flex-wrap: wrap;
  gap: 6px;
}
.receipt-modal .receipt-link {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 540px) {
  .receipt-modal .receipt-content {
    max-width: 94vw;
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }
  .receipt-modal .receipt-paper {
    padding: 14px 12px;
  }
  .receipt-modal .receipt-row {
    font-size: 0.82rem;
  }
  .receipt-modal .receipt-status {
    font-size: 0.78rem;
    padding: 10px;
  }
  .receipt-modal .receipt-barcode {
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Receipts list — the badge sometimes pushed long ids onto a 2nd line which
   looked broken. Let it wrap softly. */
.receipt-list-item {
  flex-wrap: wrap;
  gap: 8px;
}
.receipt-list-info {
  min-width: 0;
  flex: 1 1 60%;
}
.receipt-list-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}

/* =========================================================================
   DESIGN FIXES v10 — keep the production "Підібрати" button as it was, fix
   the "Ще" / .more-btn so its translucent body never lets the page bleed
   through on press, make the header live in the normal document flow (it
   scrolls with the page, no longer sticky), hide the header behind modals
   like the profile, and keep the Tinder-style swipe entrance for the
   result card and the staggered tile fade-in.
   ========================================================================= */

/* ------- 1. PICK BUTTON — single, clipped, gradient-on-the-button shell.
   The earlier `<span class="pick-btn-bg">` scaled separately on press so
   a faint pale rectangle leaked through.  We collapse the visual into the
   button itself, keep the shimmer in a clipped ::before, and never scale
   the inner span.  This is the v7 layout the user confirmed looked good. */
button.pick-btn,
.pick-section .pick-btn {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: none !important;
  padding: 18px 28px !important;
  border-radius: 18px !important;
  background: var(--gradient-main) !important;
  box-shadow:
    0 8px 22px rgba(124, 58, 237, 0.32),
    0 2px 6px rgba(236, 72, 153, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer;
  transform-origin: center center;
  transition:
    transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s var(--ease),
    filter 0.2s var(--ease) !important;
  will-change: transform, box-shadow;
}
.pick-btn .pick-btn-bg { display: none !important; }
button.pick-btn::before,
.pick-section .pick-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 48%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.18) 52%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: pickyBtnSheen 4.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
button.pick-btn .pick-btn-content,
.pick-section .pick-btn .pick-btn-content {
  position: relative !important;
  z-index: 2 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
@keyframes pickyBtnSheen {
  0%   { background-position: -120% 0; }
  60%  { background-position: 120% 0; }
  100% { background-position: 120% 0; }
}
button.pick-btn:hover,
.pick-section .pick-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 36px rgba(124, 58, 237, 0.5),
    0 4px 12px rgba(236, 72, 153, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
  filter: brightness(1.05) saturate(1.08);
}
button.pick-btn:active,
.pick-section .pick-btn:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow:
    0 3px 10px rgba(124, 58, 237, 0.3),
    0 1px 3px rgba(236, 72, 153, 0.18),
    inset 0 2px 4px rgba(0, 0, 0, 0.18) !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease !important;
  filter: brightness(0.96);
}
button.pick-btn:focus,
button.pick-btn:focus-visible,
.pick-section .pick-btn:focus,
.pick-section .pick-btn:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.35),
    0 8px 22px rgba(124, 58, 237, 0.32),
    0 2px 6px rgba(236, 72, 153, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
}
@media (max-width: 768px) {
  button.pick-btn,
  .pick-section .pick-btn {
    padding: 16px 20px !important;
    border-radius: 16px !important;
    font-size: 1rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  button.pick-btn,
  .pick-section .pick-btn,
  button.pick-btn::before,
  .pick-section .pick-btn::before { animation: none !important; }
}

/* ------- 2. "Ще" / .more-btn — same fix family as the pick button.
   The translucent .more-btn used to show the dark page bg through itself
   when pressed because hover added translateY(-2px) and the bg scaled
   independently of the inner shimmer.  Force a clipped shell, kill all
   active-state transforms that exposed the parent, and keep the shimmer
   inside the rounded edge. */
button.more-btn,
.result-card .more-btn,
.result-section .more-btn {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-deep) !important;
  -webkit-tap-highlight-color: transparent !important;
  transform-origin: center center;
  contain: layout paint !important;
  transition:
    transform 0.18s var(--spring),
    box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease),
    background 0.22s var(--ease) !important;
}
button.more-btn .more-btn-shimmer {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mix-blend-mode: screen;
}
button.more-btn > :not(.more-btn-shimmer) {
  position: relative;
  z-index: 1;
}
button.more-btn:hover,
.result-card .more-btn:hover,
.result-section .more-btn:hover {
  border-color: rgba(168, 85, 247, 0.55) !important;
  background: rgba(139, 92, 246, 0.14) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 8px 24px rgba(139, 92, 246, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
button.more-btn:active,
.result-card .more-btn:active,
.result-section .more-btn:active {
  transform: translateY(0) scale(0.985) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  background: rgba(139, 92, 246, 0.18) !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.28),
    0 0 0 0 rgba(139, 92, 246, 0) !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.08s ease !important;
}
button.more-btn:focus,
button.more-btn:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(168, 85, 247, 0.5),
    0 4px 14px rgba(139, 92, 246, 0.22) !important;
}

/* ------- 3. HEADER — sticky while scrolling, keeps the glass-morphic
   background so it still feels alive against the animated canvas behind
   it.  The user wants the header to follow you while scrolling (so it
   never hides off-screen) without being fully `position: fixed`.
   `position: sticky; top: 8px` does exactly that.  We also relax the
   parent overflow rules below so sticky isn't trapped by an ancestor
   scroll context. */
header.header,
header.header.glass-deep,
.header,
.header.scrolled,
header.header.scrolled {
  position: sticky !important;
  top: 8px !important;
  z-index: 50 !important;
  background:
    linear-gradient(
      135deg,
      rgba(139, 92, 246, 0.08) 0%,
      rgba(236, 72, 153, 0.06) 100%
    ),
    rgba(15, 15, 35, 0.6) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
@media (max-width: 540px) {
  header.header,
  .header { border-radius: 16px !important; }
}

/* `position: sticky` is broken if any ancestor has `overflow: hidden|clip|
   auto|scroll`.  The v6 safety net set `overflow-x: hidden` on the body
   and `overflow-x: clip` on #app — both kill sticky in some browsers.
   Move horizontal-overflow protection onto the descendant tile rows that
   actually need it instead. */
html,
body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
#app {
  overflow: visible !important;
}

/* Hide the header on the profile modal and any other in-app modal so the
   "mini-profile" view feels like its own page.  :has() lets us react to
   any modal becoming visible without touching JS. */
body:has(#profile-modal:not(.hidden)) header.header,
body:has(.modal:not(.hidden)) header.header,
body.modal-open header.header {
  display: none !important;
}

/* ------- 4. RESULT CARD — Tinder-style swipe entrance animations.
   gestures.js still handles the live drag (rotate, scale, stamps,
   particles, fly-out).  These keyframes only fire when JS adds the
   .swipe-enter / .swipe-enter-from-* class to the card. ------- */
@keyframes pickyCardDealCenter {
  0%   { opacity: 0; transform: translateY(80px) scale(0.86) rotateZ(-2deg); filter: blur(8px); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.02) rotateZ(0.4deg); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateZ(0); filter: blur(0); }
}
@keyframes pickyCardDealLeft {
  0%   { opacity: 0; transform: translateX(-110vw) translateY(20px) rotateZ(-22deg) scale(0.85); filter: blur(4px); }
  55%  { opacity: 1; transform: translateX(12px) translateY(-4px) rotateZ(2deg) scale(1.015); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotateZ(0) scale(1); filter: blur(0); }
}
@keyframes pickyCardDealRight {
  0%   { opacity: 0; transform: translateX(110vw) translateY(20px) rotateZ(22deg) scale(0.85); filter: blur(4px); }
  55%  { opacity: 1; transform: translateX(-12px) translateY(-4px) rotateZ(-2deg) scale(1.015); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotateZ(0) scale(1); filter: blur(0); }
}

.result-card.swipe-enter {
  animation: pickyCardDealCenter 0.62s cubic-bezier(0.22, 1.2, 0.36, 1) both !important;
  will-change: transform, opacity, filter;
}
.result-card.swipe-enter-from-left {
  animation: pickyCardDealLeft 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) both !important;
  will-change: transform, opacity, filter;
}
.result-card.swipe-enter-from-right {
  animation: pickyCardDealRight 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) both !important;
  will-change: transform, opacity, filter;
}

/* Quick shine sweep that runs on every newly-dealt card. */
@keyframes pickyCardShine {
  0%   { opacity: 0; transform: translateX(-130%) skewX(-18deg); }
  30%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateX(130%) skewX(-18deg); }
}
.result-card.swipe-enter::after,
.result-card.swipe-enter-from-left::after,
.result-card.swipe-enter-from-right::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 35%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.0) 65%,
    transparent 100%
  );
  animation: pickyCardShine 0.8s ease-out 0.15s both;
  z-index: 8;
  border-radius: inherit;
  mix-blend-mode: screen;
}

.result-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.result-card.swiping .result-poster,
.result-card.swiping .result-poster-wrap:hover .result-poster {
  transform: none !important;
}

/* ─── Collections Section ─── */
.collections-section {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  overflow: hidden;
  background: rgba(6, 214, 160, 0.03);
  border: 1px solid rgba(6, 214, 160, 0.12);
  border-radius: var(--radius-lg, 18px);
}
.collections-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
.collections-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
}
.collections-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.collections-create-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--gradient-main);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
  touch-action: manipulation;
  line-height: 1;
}
.collections-create-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.collections-create-btn:active {
  transform: scale(0.95);
}
.collections-count {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
}
.collections-body {
  padding: 0 14px 14px;
}
.collections-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}
.col-tab {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s var(--ease);
}
.col-tab:hover { border-color: rgba(167,139,250,.45); color:#fff; }
.col-tab.active {
  background: rgba(139,92,246,0.22);
  border-color: rgba(167,139,250,.55);
  color: #fff;
}
.col-tab-count {
  background: rgba(139,92,246,0.35);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.66rem;
  font-weight: 800;
  min-width: 16px;
  display: inline-block;
  text-align: center;
}
.collections-list.hidden { display: none; }
.collections-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.collection-card.shared-card .collection-name::after{
  content:'👥';margin-left:6px;font-size:.85rem;opacity:.85;
}
.collection-card .col-shared-by{
  font-size:.72rem;color:var(--text-dim);margin-top:2px;
}
.collection-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  touch-action: manipulation;
}
.collection-card:hover {
  border-color: var(--glass-border-hover);
  background: rgba(255,255,255,0.07);
  transform: translateY(-1px);
}
.collection-card:active {
  transform: scale(0.98);
}
.collection-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.collection-emoji {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
}
.collection-info {
  flex: 1;
  min-width: 0;
}
.collection-name {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collection-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.collection-actions-row {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.col-action-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s var(--ease);
  touch-action: manipulation;
}
.col-action-btn:hover {
  background: rgba(255,255,255,0.1);
}
.col-preview {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  align-items: center;
}
.col-preview-img {
  width: 40px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--glass-border);
}
.col-preview-more {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 4px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}

.col-open-btn {
  color: var(--accent, #8b5cf6);
}
.col-open-btn:hover {
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
}
.col-save-btn {
  font-size: 1rem;
}
.col-unsave-btn {
  font-size: 0.85rem;
}
.col-detail-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,0.4);
  background: rgba(139,92,246,0.15);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  font-family: inherit;
  margin: 8px 0;
}
.col-detail-save-btn:hover {
  background: rgba(139,92,246,0.3);
  border-color: rgba(167,139,250,0.6);
}
.saved-card .collection-name::after {
  content: '📥';
  margin-left: 6px;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ─── Collection Detail Header ─── */
.col-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.col-detail-header-info {
  flex: 1;
  min-width: 0;
}
.col-detail-header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}
.col-detail-settings-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.2s var(--ease);
  color: var(--text-muted);
}
.col-detail-settings-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.col-settings-dropdown {
  position: absolute;
  top: 42px;
  right: 0;
  min-width: 200px;
  background: var(--glass-bg, rgba(30,20,50,0.95));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 6px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.col-settings-dropdown.hidden { display: none; }
.col-settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 0.84rem;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.col-settings-item:hover {
  background: rgba(255,255,255,0.08);
}
.col-settings-item .col-set-icon {
  font-size: 1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.col-settings-item.danger { color: #f87171; }
.col-settings-item.danger:hover { background: rgba(248,113,113,0.12); }
.col-settings-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 4px 8px;
}
.col-visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(139,92,246,0.2);
  color: #a78bfa;
  margin-left: 8px;
}

/* ─── Collection Picker Modal ─── */
.col-picker-modal-content {
  max-width: 400px;
  width: calc(100vw - 32px);
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
}
.col-picker-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.col-picker-item-info {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.col-picker-section{
  font-size:.7rem;
  font-weight:800;
  color:var(--text-dim);
  letter-spacing:.04em;
  margin-top:6px;
  padding:4px 6px;
  border-top:1px solid var(--glass-border);
  text-transform:uppercase;
}
.col-picker-new {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 2px dashed var(--glass-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  width: 100%;
  text-align: left;
  touch-action: manipulation;
}
.col-picker-new:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: rgba(139,92,246,0.08);
}
.col-picker-new-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gradient-main);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
}
.col-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  width: 100%;
  text-align: left;
  touch-action: manipulation;
}
.col-picker-item:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--glass-border-hover);
}
.col-picker-item-active {
  border-color: var(--accent) !important;
  background: rgba(139,92,246,0.1) !important;
}
.col-picker-emoji {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.col-picker-name {
  flex: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-picker-badge {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 100px;
}
.col-picker-check {
  color: var(--accent-light);
  font-weight: 700;
  font-size: 1rem;
}

/* ─── Collection Edit/Create Modal ─── */
.col-edit-modal-content {
  max-width: 380px;
  width: calc(100vw - 32px);
  padding: 24px;
}
.col-edit-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.col-edit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.col-edit-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.col-edit-emoji-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.col-edit-emoji-input {
  width: 60px !important;
  text-align: center;
  font-size: 1.4rem !important;
  padding: 8px !important;
}
.col-edit-emoji-picker-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  touch-action: manipulation;
}
.col-edit-emoji-picker-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--glass-border-hover);
}
.col-edit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.col-edit-cancel {
  padding: 10px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
}
.col-edit-cancel:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.col-edit-save {
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gradient-main);
  color: #fff;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 16px var(--accent-glow);
  touch-action: manipulation;
}
.col-edit-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--accent-glow);
}
.col-edit-save:active {
  transform: scale(0.97);
}

/* ─── Collection Detail Modal ─── */
.col-detail-modal-content {
  max-width: 480px;
  width: calc(100vw - 32px);
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
}
.col-detail-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.col-detail-count {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ── Collection share/publish row inside detail modal ── */
.col-detail-share-row{
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(236,72,153,0.06));
  border: 1px solid rgba(139,92,246,0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.col-detail-share-row:empty{display:none}
.col-share-hint{font-size:.84rem;color:rgba(255,255,255,.65);text-align:center;padding:6px 0}
.col-share-actions{display:flex;flex-wrap:wrap;gap:8px}
.col-share-pub-btn,.col-share-action,.col-share-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:11px;font-weight:700;font-size:.82rem;font-family:inherit;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;
  transition:all .2s ease
}
.col-share-pub-btn:hover,.col-share-action:hover,.col-share-link:hover{
  border-color:#a78bfa;background:rgba(139,92,246,.18);transform:translateY(-1px)
}
.col-share-pub-btn.is-published{
  background:linear-gradient(135deg, rgba(6,182,212,.25), rgba(139,92,246,.20));
  border-color:rgba(6,182,212,.45)
}
.col-share-link{background:linear-gradient(135deg,#8b5cf6,#ec4899);border:none}
.col-share-link:hover{filter:brightness(1.1)}
.col-share-stats{display:flex;gap:14px;font-size:.78rem;color:rgba(255,255,255,.65);font-weight:600}
.col-share-stats span{display:inline-flex;align-items:center;gap:4px}
@media (max-width:560px){
  .col-detail-share-row{padding:10px 12px;border-radius:12px;gap:8px}
  .col-share-pub-btn,.col-share-action,.col-share-link{padding:7px 10px;font-size:.76rem;border-radius:10px}
}

.col-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.col-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  transition: all 0.2s var(--ease);
  cursor: pointer;
}
.col-detail-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(168, 85, 247, 0.45);
  transform: translateY(-1px);
}
.col-detail-item:active {
  transform: translateY(0);
}
.col-detail-item:focus-visible {
  outline: 2px solid var(--accent-light, #a855f7);
  outline-offset: 2px;
}
.col-detail-poster {
  width: 40px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.col-detail-info {
  flex: 1;
  min-width: 0;
}
.col-detail-item-title {
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-detail-item-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.col-detail-item-desc {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.col-detail-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.col-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  white-space: nowrap;
}
.col-chip-runtime {
  background: rgba(6,214,160,0.12);
  color: #06d6a0;
  border-color: rgba(6,214,160,0.22);
}
.col-chip-seasons {
  background: rgba(56,189,248,0.12);
  color: #38bdf8;
  border-color: rgba(56,189,248,0.22);
}
.col-chip-pages {
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  border-color: rgba(245,158,11,0.22);
}
.col-detail-link {
  font-size: 1rem;
  text-decoration: none;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
}
.col-detail-link:hover {
  background: rgba(255,255,255,0.1);
}
.col-detail-remove {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255,60,60,0.06);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  touch-action: manipulation;
}
.col-detail-remove:hover {
  background: rgba(255,60,60,0.2);
  color: #ff6b6b;
  transform: scale(1.1);
}
.col-detail-remove:active {
  transform: scale(0.9);
}

/* ─── Emoji Quick Picker ─── */
.emoji-quick-picker {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--glass-deep);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  margin-top: 4px;
  animation: tabFadeIn 0.2s var(--ease);
}
.emoji-pick-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  touch-action: manipulation;
}
.emoji-pick-btn:hover {
  background: rgba(255,255,255,0.1);
  transform: scale(1.15);
}

/* ─── Collection Add Button in result card ─── */
.collection-add-btn svg {
  transition: all 0.2s;
}
.collection-add-btn:hover svg {
  stroke: var(--accent-light);
}

/* ─── Mobile adjustments for collections ─── */
@media (max-width: 480px) {
  .col-picker-modal-content,
  .col-edit-modal-content,
  .col-detail-modal-content {
    width: calc(100vw - 16px);
    border-radius: 20px 20px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    margin: 0;
    animation: slideUpModal 0.3s var(--ease);
  }
  .col-detail-modal-content {
    max-height: 90vh;
  }
}
@keyframes slideUpModal {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ------- 2. Trending / saved tiles get a subtle staggered fade-in. ------- */
@keyframes pickyTileFadeIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.trending-row .trending-card,
.saved-grid > *,
.results-grid > * {
  animation: pickyTileFadeIn 0.45s var(--ease) both;
}
.trending-row .trending-card:nth-child(1),
.saved-grid > *:nth-child(1),
.results-grid > *:nth-child(1) { animation-delay: 0.02s; }
.trending-row .trending-card:nth-child(2),
.saved-grid > *:nth-child(2),
.results-grid > *:nth-child(2) { animation-delay: 0.06s; }
.trending-row .trending-card:nth-child(3),
.saved-grid > *:nth-child(3),
.results-grid > *:nth-child(3) { animation-delay: 0.10s; }
.trending-row .trending-card:nth-child(4),
.saved-grid > *:nth-child(4),
.results-grid > *:nth-child(4) { animation-delay: 0.14s; }
.trending-row .trending-card:nth-child(n+5),
.saved-grid > *:nth-child(n+5),
.results-grid > *:nth-child(n+5) { animation-delay: 0.18s; }

/* ─── Support Section ─── */
.support-section {
  margin: 24px 0 16px;
  padding: 0;
}
.support-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(236, 72, 153, 0.25);
  border-radius: var(--radius-lg, 18px);
  transition: all 0.3s var(--ease);
}
.support-card:hover {
  border-color: rgba(236, 72, 153, 0.45);
  box-shadow: 0 4px 24px rgba(236, 72, 153, 0.12);
}
.support-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.support-info {
  flex: 1;
  min-width: 0;
}
.support-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
}
.support-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.support-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  border: none;
  border-radius: 100px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.3);
}
.support-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(236, 72, 153, 0.4);
}
.support-btn:active {
  transform: translateY(0);
}
.support-btn-icon {
  font-size: 1.1rem;
}
@media (max-width: 600px) {
  .support-card {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 20px 16px;
  }
  .support-btn {
    width: 100%;
    justify-content: center;
  }
}



/* ─── 🎁 Gift to a friend (modal) ────────────────────────────────────── */
.gift-modal{position:fixed;inset:0;z-index:9000;background:rgba(6,6,20,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:18px;animation:giftFadeIn .25s ease}
@keyframes giftFadeIn{from{opacity:0}to{opacity:1}}
.gift-modal-card{position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;overflow-x:hidden;background:linear-gradient(180deg,rgba(28,28,54,.95),rgba(14,14,32,.98));border:1px solid rgba(255,255,255,.12);border-radius:24px;color:#f3f3ff;padding:22px 24px 24px;box-shadow:0 30px 80px -10px rgba(0,0,0,.65),0 0 0 1px rgba(139,92,246,.08) inset;animation:giftSlideIn .35s cubic-bezier(.5,1.4,.4,1) both}
@keyframes giftSlideIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.gift-close{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#a8a8c8;font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:all .25s cubic-bezier(.4,0,.2,1);padding:0}
.gift-close:hover{background:rgba(236,72,153,.2);border-color:rgba(236,72,153,.4);color:#fff;transform:scale(1.05)}
.gift-close:active{transform:scale(.92)}
.gift-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.gift-head-emoji{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#8b5cf6,#ec4899);display:grid;place-items:center;font-size:30px;flex-shrink:0;box-shadow:0 12px 28px -4px rgba(139,92,246,.45)}
.gift-head-title{font-size:18px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.01em}
.gift-head-sub{font-size:12.5px;color:#a8a8c8;margin-top:4px;line-height:1.4}

.gift-preview{position:relative;height:184px;border-radius:20px;background:radial-gradient(ellipse at top,rgba(139,92,246,.22) 0%,rgba(236,72,153,.06) 40%,rgba(0,0,0,.28) 80%);border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;margin-bottom:18px;overflow:hidden;transition:background .3s ease}
.gift-preview[data-theme="halloween"]{background:radial-gradient(ellipse at top,rgba(249,115,22,.26),rgba(0,0,0,.3) 75%)}
.gift-preview[data-theme="christmas"]{background:radial-gradient(ellipse at top,rgba(22,163,74,.22),rgba(220,38,38,.08) 45%,rgba(0,0,0,.3) 80%)}
.gift-preview[data-theme="birthday"]{background:radial-gradient(ellipse at top,rgba(236,72,153,.24),rgba(6,182,212,.12) 50%,rgba(0,0,0,.25) 85%)}
.gift-preview[data-theme="valentines"]{background:radial-gradient(ellipse at top,rgba(225,29,72,.26),rgba(0,0,0,.3) 80%)}
.gift-preview[data-theme="newyear"]{background:radial-gradient(ellipse at top,rgba(59,130,246,.24),rgba(167,139,250,.14) 55%,rgba(0,0,0,.25) 85%)}
.gift-preview-glow{position:absolute;left:50%;top:50%;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,.38),transparent 72%);filter:blur(44px);transform:translate(-50%,-50%);pointer-events:none}
.gift-preview-shimmer{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);background-size:220% 100%;animation:giftShimmer 6s ease-in-out infinite}
@keyframes giftShimmer{0%{background-position:200% 0}100%{background-position:-100% 0}}
.gift-preview-box{position:relative;width:126px;height:118px;animation:giftBob 3.6s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
@keyframes giftBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
.gift-preview-base{position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(135deg,#a78bfa,#ec4899);border-radius:12px;box-shadow:0 16px 30px -6px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.18)}
.gift-preview-lid{position:absolute;top:14%;left:-4%;width:108%;height:36%;background:linear-gradient(135deg,#8b5cf6,#ec4899);border-radius:12px 12px 6px 6px;box-shadow:0 10px 18px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.2)}
.gift-preview-ribbon-v{position:absolute;left:50%;top:0;bottom:0;width:18px;margin-left:-9px;background:linear-gradient(180deg,#fde68a,#b45309);box-shadow:inset -2px 0 0 rgba(0,0,0,.18)}
.gift-preview-ribbon-h{position:absolute;left:0;right:0;top:34%;height:18px;background:linear-gradient(90deg,#fde68a,#b45309);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.gift-preview-bow{position:absolute;left:50%;top:-14px;transform:translateX(-50%);font-size:40px;animation:giftWobble 3.4s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
@keyframes giftWobble{0%,100%{transform:translateX(-50%) rotate(-6deg)}50%{transform:translateX(-50%) rotate(6deg)}}
.gift-preview-sparkle{position:absolute;color:#fde68a;font-size:18px;pointer-events:none;text-shadow:0 0 12px rgba(253,230,138,.7);animation:giftSparkle 2.6s ease-in-out infinite}
.gift-preview-sparkle-1{top:-22px;left:-18px;animation-delay:.0s}
.gift-preview-sparkle-2{bottom:-12px;right:-18px;font-size:14px;animation-delay:1.2s}
@keyframes giftSparkle{0%,100%{opacity:.25;transform:scale(.9) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(18deg)}}
.gift-preview[data-theme="halloween"] .gift-preview-base,.gift-preview[data-theme="halloween"] .gift-preview-lid{background:linear-gradient(135deg,#f97316,#7c2d12)}
.gift-preview[data-theme="halloween"] .gift-preview-ribbon-v,.gift-preview[data-theme="halloween"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#000,#222)}
.gift-preview[data-theme="christmas"] .gift-preview-base,.gift-preview[data-theme="christmas"] .gift-preview-lid{background:linear-gradient(135deg,#16a34a,#dc2626)}
.gift-preview[data-theme="christmas"] .gift-preview-ribbon-v,.gift-preview[data-theme="christmas"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#fde047,#a16207)}
.gift-preview[data-theme="birthday"] .gift-preview-base,.gift-preview[data-theme="birthday"] .gift-preview-lid{background:linear-gradient(135deg,#ec4899,#06b6d4)}
.gift-preview[data-theme="birthday"] .gift-preview-ribbon-v,.gift-preview[data-theme="birthday"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#fde047,#a16207)}
.gift-preview[data-theme="valentines"] .gift-preview-base,.gift-preview[data-theme="valentines"] .gift-preview-lid{background:linear-gradient(135deg,#e11d48,#fb7185)}
.gift-preview[data-theme="valentines"] .gift-preview-ribbon-v,.gift-preview[data-theme="valentines"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#fde047,#a16207)}
.gift-preview[data-theme="newyear"] .gift-preview-base,.gift-preview[data-theme="newyear"] .gift-preview-lid{background:linear-gradient(135deg,#3b82f6,#a78bfa)}
.gift-preview[data-theme="newyear"] .gift-preview-ribbon-v,.gift-preview[data-theme="newyear"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#fde047,#a16207)}
.gift-preview-poster{position:absolute;right:14px;bottom:14px;width:54px;height:auto;border-radius:6px;box-shadow:0 8px 18px rgba(0,0,0,.5);opacity:.85}

.gift-section{margin-bottom:16px;animation:giftSectionIn .4s ease both}
.gift-section:nth-child(1){animation-delay:.05s}
.gift-section:nth-child(2){animation-delay:.1s}
.gift-section:nth-child(3){animation-delay:.15s}
.gift-section:nth-child(4){animation-delay:.2s}
.gift-section:nth-child(5){animation-delay:.25s}
.gift-section:nth-child(6){animation-delay:.3s}
.gift-section:nth-child(7){animation-delay:.35s}
@keyframes giftSectionIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.gift-section .gift-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:#cfcfee;margin-bottom:8px;text-transform:uppercase;letter-spacing:.6px}
.gift-section .gift-meta{font-weight:600;color:#8888a8;text-transform:none;letter-spacing:0;font-size:11px}
.gift-note-count{color:#8888a8;font-weight:600;font-size:11px;text-transform:none;letter-spacing:0}

.gift-themes{display:flex;flex-wrap:wrap;gap:7px}
.gift-theme{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#cfcfee;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s}
.gift-theme:hover{background:rgba(255,255,255,.09);color:#fff}
.gift-theme.active{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(139,92,246,.35);animation:giftThemeSelect .3s ease}
@keyframes giftThemeSelect{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

#gift-note{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px 13px;color:#fff;font-family:inherit;font-size:14px;line-height:1.55;resize:vertical;min-height:70px}
#gift-note:focus{outline:none;border-color:#a78bfa;box-shadow:0 0 0 3px rgba(139,92,246,.2)}
.gift-suggest-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gift-note-suggest{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.14);color:#a8a8c8;padding:5px 10px;border-radius:999px;font-size:11.5px;cursor:pointer;font-family:inherit;text-align:left;line-height:1.3}
.gift-note-suggest:hover{background:rgba(139,92,246,.16);color:#fff;border-color:rgba(139,92,246,.4)}

.gift-voice-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gift-voice-rec{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:0;padding:9px 16px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.gift-voice-rec.recording{background:linear-gradient(135deg,#ef4444,#dc2626);animation:giftRecPulse 1.2s ease-in-out infinite}
@keyframes giftRecPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.gift-voice-clear{background:rgba(255,255,255,.05);color:#cfcfee;border:1px solid rgba(255,255,255,.12);padding:8px 13px;border-radius:10px;font-size:12.5px;font-weight:600;cursor:pointer}
.gift-voice-status{color:#a8a8c8;font-size:12.5px;font-weight:600}

.gift-sched-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#gift-sched{flex:1;min-width:170px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 11px;color:#fff;font-family:inherit;font-size:13px;color-scheme:dark}
#gift-sched:focus{outline:none;border-color:#a78bfa;box-shadow:0 0 0 3px rgba(139,92,246,.2)}
.gift-sched-quick{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#cfcfee;padding:8px 11px;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer}
.gift-sched-quick:hover{background:rgba(139,92,246,.18);color:#fff}
.gift-sched-clear{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#cfcfee;padding:8px 12px;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;line-height:1}

.gift-create-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px 24px;border-radius:16px;background:linear-gradient(135deg,#8b5cf6 0%,#ec4899 50%,#8b5cf6 100%);background-size:200% 100%;color:#fff;font-size:15.5px;font-weight:800;border:0;cursor:pointer;margin-top:12px;letter-spacing:.02em;box-shadow:0 12px 30px -6px rgba(236,72,153,.45),0 0 0 1px rgba(255,255,255,.1) inset;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);animation:giftCtaGradient 4s ease infinite}
.gift-create-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);background-size:300% 100%;animation:giftCtaShimmer 3s ease-in-out infinite;pointer-events:none;border-radius:inherit}
@keyframes giftCtaGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes giftCtaShimmer{0%{background-position:200% 0}100%{background-position:-100% 0}}
.gift-create-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 40px -8px rgba(236,72,153,.55),0 0 20px rgba(139,92,246,.25),0 0 0 1px rgba(255,255,255,.15) inset;filter:brightness(1.06)}
.gift-create-btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.gift-create-btn:disabled{opacity:.6;cursor:wait;animation:none}
.gift-create-btn:disabled::before{animation:none}

.gift-step-share{padding:8px 0}
.gift-success{text-align:center;margin-bottom:18px}
.gift-success-icon{font-size:54px;margin-bottom:8px;animation:giftSparkle 2.4s ease-in-out infinite}
@keyframes giftSparkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(8deg)}}
.gift-success-title{font-size:22px;font-weight:900;color:#fff;margin-bottom:6px}
.gift-success-sub{font-size:13px;color:#a8a8c8}
.gift-link-box{display:flex;gap:8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:6px;margin-bottom:14px}
#gift-link{flex:1;background:transparent;border:0;color:#fff;padding:8px 10px;font-size:13px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace}
#gift-link:focus{outline:none}
.gift-share-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:8px;margin-bottom:14px}
.gift-share-btn{padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#cfcfee;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.gift-share-btn:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-1px)}
.gift-share-btn.copied{background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(34,197,94,.18));border-color:rgba(16,185,129,.5);color:#a7f3d0;animation:giftCopiedPulse .55s ease}
@keyframes giftCopiedPulse{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.gift-share-tg:hover{background:rgba(34,158,217,.18);border-color:rgba(34,158,217,.4);color:#fff}
.gift-share-wa:hover{background:rgba(37,211,102,.18);border-color:rgba(37,211,102,.4);color:#fff}
.gift-share-vb:hover{background:rgba(127,80,236,.2);border-color:rgba(127,80,236,.4);color:#fff}
.gift-share-em:hover{background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.4);color:#fff}
.gift-share-ig:hover{background:linear-gradient(135deg,rgba(225,29,72,.18),rgba(245,158,11,.18));border-color:rgba(236,72,153,.4);color:#fff}
.gift-share-fb:hover{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.4);color:#fff}
.gift-restart{display:block;width:100%;padding:11px;border-radius:11px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.16);color:#a8a8c8;font-size:13px;font-weight:600;cursor:pointer}
.gift-restart:hover{color:#fff;background:rgba(255,255,255,.08)}

/* Gift action button on result card */
.action-btn.gift-btn{background:linear-gradient(135deg,rgba(236,72,153,.15),rgba(139,92,246,.15));border-color:rgba(236,72,153,.35)}
.action-btn.gift-btn:hover{background:linear-gradient(135deg,rgba(236,72,153,.28),rgba(139,92,246,.28));transform:translateY(-2px)}
.action-btn.gift-btn svg{color:#fda4af}

/* ─── Gift Tabs ──────────────────────────────────────────── */
.gift-tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:12px;padding:3px;margin-bottom:16px}
.gift-tab{flex:1;border:none;background:transparent;color:var(--text-dim);font-family:inherit;font-size:13px;font-weight:700;padding:9px 12px;border-radius:10px;cursor:pointer;transition:all .2s}
.gift-tab:hover{color:#fff}
.gift-tab.active{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;box-shadow:0 4px 14px rgba(139,92,246,.3)}

/* ─── Gift Mode Row ──────────────────────────────────────── */
.gift-mode-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.gift-mode-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 8px;cursor:pointer;text-align:center;transition:all .25s;color:#cfcfee;font-family:inherit}
.gift-mode-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.gift-mode-btn.active{background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(236,72,153,.18));border-color:rgba(139,92,246,.5);box-shadow:0 4px 18px rgba(139,92,246,.2);animation:giftModeSelect .35s ease}
@keyframes giftModeSelect{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.gift-mode-icon{display:block;font-size:24px;margin-bottom:4px}
.gift-mode-label{display:block;font-size:12.5px;font-weight:800;color:#fff;margin-bottom:2px}
.gift-mode-desc{display:block;font-size:10.5px;color:#8888a8;line-height:1.3}

/* ─── Max Opens Slider ───────────────────────────────────── */
.gift-max-opens-row{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;background:rgba(0,0,0,.2);border-radius:10px}
.gift-max-opens-row label{font-size:12px;color:#a8a8c8;font-weight:600;white-space:nowrap}
.gift-max-opens-row input[type="range"]{flex:1;accent-color:#8b5cf6;height:6px}
.gift-max-val{font-size:14px;font-weight:800;color:#a78bfa;min-width:24px;text-align:center}

/* ─── Group Info ─────────────────────────────────────────── */
.gift-group-info{margin-top:8px;padding:10px 14px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:10px}
.gift-group-text{font-size:12px;color:#93c5fd;line-height:1.5}

/* ─── Recipient Name Input ───────────────────────────────── */
.gift-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px 13px;color:#fff;font-family:inherit;font-size:14px;line-height:1.4}
.gift-input:focus{outline:none;border-color:#a78bfa;box-shadow:0 0 0 3px rgba(139,92,246,.2)}
.gift-input::placeholder{color:#6b6b8a}

/* ─── Gift Options (toggles) ─────────────────────────────── */
.gift-options-section{border-top:1px solid rgba(255,255,255,.06);padding-top:14px}
.gift-option-row{margin-bottom:8px}
.gift-toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:#cfcfee;user-select:none}
.gift-toggle-label input[type="checkbox"]{display:none}
.gift-toggle-slider{position:relative;width:36px;height:20px;background:rgba(255,255,255,.1);border-radius:999px;flex-shrink:0;transition:background .2s}
.gift-toggle-slider::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#666;transition:all .2s}
.gift-toggle-label input:checked+.gift-toggle-slider{background:linear-gradient(135deg,#8b5cf6,#ec4899)}
.gift-toggle-label input:checked+.gift-toggle-slider::after{left:18px;background:#fff}

/* ─── Picksy AI Gift Helper ──────────────────────────────── */
.gift-ai-helper{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;margin-top:14px;background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(236,72,153,.10) 55%,rgba(245,158,11,.06));border:1px solid rgba(139,92,246,.28);border-radius:16px;animation:giftAiIn .4s ease both;cursor:pointer;transition:transform .2s var(--ease,cubic-bezier(.22,1,.36,1)),border-color .2s ease,box-shadow .2s ease}
.gift-ai-helper:hover{transform:translateY(-1px);border-color:rgba(236,72,153,.5);box-shadow:0 10px 26px -16px rgba(236,72,153,.5)}
.gift-ai-helper:focus-visible{outline:2px solid rgba(236,72,153,.7);outline-offset:2px}
@keyframes giftAiIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.gift-ai-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,rgba(196,168,255,.4),rgba(91,33,182,.6));box-shadow:0 4px 14px rgba(139,92,246,.4);animation:giftAiPulse 3s ease-in-out infinite;overflow:hidden;padding:3px;box-sizing:border-box}
.gift-ai-avatar .picksy-mascot{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
/* Force the gift helper mascot to a small fixed size, regardless of the
   default `data-size` rules in mascot.css (which start at 86px for sm). */
.gift-ai-avatar .picksy-figure-gift{width:36px!important;height:36px!important;flex-shrink:0}
.gift-ai-avatar .picksy-figure-gift svg{width:100%!important;height:100%!important;display:block}
.gift-ai-avatar img{width:100%;height:100%;object-fit:cover}
@keyframes giftAiPulse{0%,100%{box-shadow:0 4px 14px rgba(139,92,246,.4)}50%{box-shadow:0 4px 22px rgba(236,72,153,.55)}}
@keyframes giftAiMascotBump{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.95) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.gift-ai-mascot-bump{animation:giftAiMascotBump .55s var(--ease,cubic-bezier(.22,1,.36,1))}
.gift-ai-content{flex:1;min-width:0}
.gift-ai-name{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#a78bfa;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.gift-ai-name::after{content:"AI";font-size:9px;padding:1.5px 6px;border-radius:8px;background:linear-gradient(135deg,#f59e0b,#ec4899);color:#fff;letter-spacing:.7px}
.gift-ai-text{font-size:12.5px;color:#d0d0f0;line-height:1.45;transition:opacity .2s}
.gift-ai-text.gift-ai-typing{opacity:.55}
.gift-ai-help-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(139,92,246,.4);transition:transform .2s var(--ease,cubic-bezier(.22,1,.36,1)),box-shadow .2s ease,filter .2s ease;letter-spacing:.2px}
.gift-ai-help-btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(236,72,153,.5);filter:brightness(1.08)}
.gift-ai-help-btn:active{transform:translateY(0)}
.gift-ai-help-btn-label{white-space:nowrap}
@media (max-width:480px){.gift-ai-help-btn-label{display:none}.gift-ai-help-btn{padding:8px 10px}}

/* ─── Gift Stats Badge ───────────────────────────────────── */
.gift-stats-badge{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);border-radius:10px;margin-bottom:14px;font-size:12.5px;color:#cfcfee;font-weight:600}
.gift-stat-sep{color:#555}

/* ─── Gift QR Section ────────────────────────────────────── */
.gift-qr-section{text-align:center;margin-bottom:16px;padding:16px;background:rgba(0,0,0,.25);border-radius:14px;border:1px solid rgba(255,255,255,.06)}
#gift-qr-canvas{border-radius:10px;margin-bottom:10px;display:block;margin-left:auto;margin-right:auto}
.gift-copy-qr{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cfcfee;padding:8px 16px;border-radius:10px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s}
.gift-copy-qr:hover{background:rgba(139,92,246,.18);color:#fff}

/* ─── Gift Share X/Twitter button ────────────────────────── */
.gift-share-tw:hover{background:rgba(29,161,242,.18);border-color:rgba(29,161,242,.4);color:#fff}
.gift-share-link:hover{background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.4);color:#fff}

/* ─── New theme previews ─────────────────────────────────── */
.gift-preview[data-theme="summer"]{background:radial-gradient(ellipse at top,rgba(245,158,11,.20),rgba(6,182,212,.12) 70%)}
.gift-preview[data-theme="summer"] .gift-preview-base,.gift-preview[data-theme="summer"] .gift-preview-lid{background:linear-gradient(135deg,#f59e0b,#06b6d4)}
.gift-preview[data-theme="summer"] .gift-preview-ribbon-v,.gift-preview[data-theme="summer"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#fff,#fde047)}
.gift-preview[data-theme="movienight"]{background:radial-gradient(ellipse at top,rgba(139,92,246,.22),rgba(30,27,75,.3) 70%)}
.gift-preview[data-theme="movienight"] .gift-preview-base,.gift-preview[data-theme="movienight"] .gift-preview-lid{background:linear-gradient(135deg,#1e1b4b,#8b5cf6)}
.gift-preview[data-theme="movienight"] .gift-preview-ribbon-v,.gift-preview[data-theme="movienight"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#fbbf24,#b45309)}
.gift-preview[data-theme="graduation"]{background:radial-gradient(ellipse at top,rgba(30,58,95,.25),rgba(251,191,36,.12) 70%)}
.gift-preview[data-theme="graduation"] .gift-preview-base,.gift-preview[data-theme="graduation"] .gift-preview-lid{background:linear-gradient(135deg,#1e3a5f,#334155)}
.gift-preview[data-theme="graduation"] .gift-preview-ribbon-v,.gift-preview[data-theme="graduation"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#fbbf24,#eab308)}
.gift-preview[data-theme="thankyou"]{background:radial-gradient(ellipse at top,rgba(16,185,129,.18),rgba(167,139,250,.12) 70%)}
.gift-preview[data-theme="thankyou"] .gift-preview-base,.gift-preview[data-theme="thankyou"] .gift-preview-lid{background:linear-gradient(135deg,#10b981,#a78bfa)}
.gift-preview[data-theme="thankyou"] .gift-preview-ribbon-v,.gift-preview[data-theme="thankyou"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#fde047,#a16207)}
.gift-preview[data-theme="anniversary"]{background:radial-gradient(ellipse at top,rgba(225,29,72,.18),rgba(251,191,36,.12) 70%)}
.gift-preview[data-theme="anniversary"] .gift-preview-base,.gift-preview[data-theme="anniversary"] .gift-preview-lid{background:linear-gradient(135deg,#e11d48,#fbbf24)}
.gift-preview[data-theme="anniversary"] .gift-preview-ribbon-v,.gift-preview[data-theme="anniversary"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#fff,#fda4af)}
.gift-preview[data-theme="horror"]{background:radial-gradient(ellipse at top,rgba(124,45,18,.25),rgba(0,0,0,.3) 70%)}
.gift-preview[data-theme="horror"] .gift-preview-base,.gift-preview[data-theme="horror"] .gift-preview-lid{background:linear-gradient(135deg,#7c2d12,#1c1917)}
.gift-preview[data-theme="horror"] .gift-preview-ribbon-v,.gift-preview[data-theme="horror"] .gift-preview-ribbon-h{background:linear-gradient(90deg,#dc2626,#7f1d1d)}

/* ─── Gift History ───────────────────────────────────────── */
.gift-history-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-right:30px}
.gift-history-tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:10px;padding:3px;margin-bottom:14px}
.gift-htab{flex:1;border:none;background:transparent;color:var(--text-dim);font-family:inherit;font-size:12.5px;font-weight:700;padding:8px;border-radius:8px;cursor:pointer;transition:all .2s}
.gift-htab.active{background:rgba(139,92,246,.22);color:#fff}
.gift-htab:hover{color:#fff}
.gift-history-list{max-height:400px;overflow-y:auto;padding-right:4px}
.gift-history-loading,.gift-history-empty{text-align:center;padding:40px 10px;color:#8888a8;font-size:13px}
.gift-history-item{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;margin-bottom:8px;cursor:pointer;transition:all .2s}
.gift-history-item:hover{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.2);transform:translateX(2px)}
.gift-hist-poster{width:48px;height:72px;object-fit:cover;border-radius:8px;flex-shrink:0}
.gift-hist-poster-empty{width:48px;height:72px;border-radius:8px;background:rgba(139,92,246,.15);display:grid;place-items:center;font-size:22px;flex-shrink:0}
.gift-hist-info{flex:1;min-width:0}
.gift-hist-title{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gift-hist-meta{font-size:11px;color:#8888a8;margin-top:3px}
.gift-hist-to{font-size:11px;color:#a78bfa;margin-top:2px}
.gift-hist-reactions{display:flex;gap:4px;margin-top:4px}
.gift-hist-react{font-size:16px}
.gift-hist-arrow{color:#555;font-size:18px;flex-shrink:0}

/* ─── Gift modal — mobile overhaul (≤640px) ──────────────────
 * IMPORTANT: this block sits AFTER all the desktop gift styles
 * so its single-class rules win the cascade without `!important`
 * (otherwise e.g. `.gift-mode-row{grid-template-columns:repeat(3,1fr)}`
 * defined later would override the mobile single-column layout
 * and make the 3 mode buttons overflow the screen).
 *
 * Goals: 44px+ touch targets, true fixed CTA at the viewport
 * bottom (one-handed reach), clearer section visuals, safe-area
 * insets, and prevent any horizontal overflow.
 */
@media(max-width:640px){
  .gift-modal{padding:0;align-items:stretch}
  .gift-modal-card{
    max-width:100%;width:100%;max-height:100vh;height:100vh;height:100dvh;
    border-radius:0;
    padding:14px 14px 14px 14px;
    overflow-x:hidden;overscroll-behavior:contain;scroll-padding-bottom:120px;
  }
  .gift-close{width:42px;height:42px;min-height:42px;border-radius:11px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
  .gift-tabs{position:sticky;top:0;z-index:5;margin:-4px -4px 14px;padding:5px;
    background:linear-gradient(180deg,rgba(20,20,40,.96),rgba(20,20,40,.85));
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px}
  .gift-tab{padding:11px 12px;font-size:13.5px;min-height:44px}
  .gift-head{gap:10px;align-items:center;margin-bottom:12px}
  .gift-head-emoji{font-size:34px}
  .gift-head-title{font-size:17px;line-height:1.25}
  .gift-head-sub{font-size:12.5px;line-height:1.3}
  /* Preview — keep the poster overlay inside the card */
  .gift-preview{height:150px;margin-bottom:14px;border-radius:18px;overflow:hidden}
  .gift-preview-box{width:108px;height:96px}
  .gift-preview-bow{font-size:34px}
  .gift-preview-poster{right:10px;bottom:10px;width:46px}
  /* Sections — clearer cards with breathing room */
  .gift-section{margin-bottom:14px;padding:12px;border-radius:14px;
    background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
  .gift-section .gift-label{font-size:11.5px;margin-bottom:10px;color:#dcdcf8}
  .gift-section .gift-meta{font-size:10.5px}
  /* Mode row — vertical stack, 64px tap targets, no horizontal overflow */
  .gift-mode-row{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}
  .gift-mode-btn{display:grid;grid-template-columns:auto 1fr;align-items:center;
    gap:12px;padding:12px 14px;text-align:left;border-radius:14px;min-height:64px;
    width:100%;min-width:0}
  .gift-mode-icon{display:block;font-size:26px;margin:0}
  .gift-mode-label{display:block;font-size:14px;margin-bottom:2px;white-space:normal}
  .gift-mode-desc{display:block;font-size:12px;color:#a0a0c0;line-height:1.35;white-space:normal}
  /* Max opens slider */
  .gift-max-opens-row{padding:10px 12px;gap:12px}
  .gift-max-opens-row input[type="range"]{height:24px}
  .gift-max-val{font-size:15px;min-width:30px}
  /* Inputs */
  .gift-input{padding:13px 14px;font-size:15px;min-height:48px;border-radius:12px}
  /* Themes */
  .gift-themes{gap:8px}
  .gift-themes .gift-theme{padding:10px 14px;font-size:13px;min-height:42px;border-radius:11px}
  /* Note */
  #gift-note{font-size:15px;min-height:96px;padding:12px 14px;border-radius:12px}
  .gift-note-count{font-size:11px}
  .gift-suggest-row{gap:6px;margin-top:8px}
  .gift-note-suggest{padding:9px 12px;font-size:13px;min-height:38px;border-radius:10px}
  /* Voice */
  .gift-voice-rec{padding:12px 18px;font-size:14px;min-height:48px;border-radius:12px}
  .gift-voice-clear{padding:11px 14px;font-size:13px;min-height:42px}
  .gift-voice-status{font-size:12.5px;flex-basis:100%}
  /* Schedule */
  .gift-sched-row{display:flex;flex-wrap:wrap;gap:8px}
  .gift-sched-row #gift-sched{flex:1 1 100%;min-width:0;padding:13px 14px;
    font-size:15px;min-height:48px}
  .gift-sched-row .gift-sched-quick{flex:1 1 0;min-width:0;padding:11px 8px;
    font-size:13.5px;min-height:44px;border-radius:11px}
  .gift-sched-row .gift-sched-clear{flex:0 0 auto;width:46px;min-height:44px;
    border-radius:11px}
  /* Toggles */
  .gift-options-section{padding-top:14px}
  .gift-toggle-label{gap:12px;font-size:14px;padding:10px 0;line-height:1.35}
  .gift-toggle-slider{width:44px;height:26px;flex-shrink:0}
  .gift-toggle-slider::after{width:20px;height:20px;top:3px;left:3px}
  .gift-toggle-label input:checked+.gift-toggle-slider::after{left:21px}
  /* Fixed primary CTA — pinned to the viewport bottom on phones so it's
   * always one-thumb-reachable. `position:sticky` inside the modal's
   * overflow:auto container is unreliable on iOS Safari (sometimes
   * "sticks" mid-scroll), so we use fixed positioning here. The card
   * gets a matching padding-bottom so content never hides under it. */
  .gift-create-btn{
    position:relative;left:auto;right:auto;
    bottom:auto;
    z-index:1;margin:12px 0 0;width:100%;
    padding:18px 16px;font-size:16px;min-height:58px;border-radius:14px;
    box-shadow:0 12px 30px -6px rgba(236,72,153,.45)
  }
  .gift-ai-helper{
    position:sticky;bottom:0;left:0;right:0;
    z-index:9100;margin:8px -14px 0;padding:10px 14px;
    border-radius:0;
    background:linear-gradient(135deg,rgba(20,16,40,.96),rgba(30,20,50,.94));
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:none;border-top:1px solid rgba(139,92,246,.2);
    animation:none
  }
  .gift-ai-avatar{width:28px;height:28px}
  .gift-ai-text{font-size:12px}
  /* Share step */
  .gift-success-title{font-size:18px}
  .gift-success-sub{font-size:13px}
  .gift-share-grid{grid-template-columns:1fr 1fr;gap:8px}
  .gift-share-btn{padding:13px 12px;font-size:14px;min-height:48px}
  .gift-qr-frame canvas{width:100%;max-width:240px;height:auto}
  .gift-restart{padding:13px;min-height:48px;font-size:14px}
}

/* Very narrow phones — keep the layout from clipping */
@media(max-width:360px){
  .gift-modal-card{padding-left:12px;padding-right:12px}
  .gift-section{padding:10px}
  .gift-share-grid{grid-template-columns:1fr}
}

/* ─── Gift Opening Page ──────────────────────────────────── */
.gift-open-page{position:fixed;inset:0;z-index:10000;background:radial-gradient(ellipse at top,#1a1230 0%,#070716 60%,#04040c 100%);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.gift-open-bg{position:fixed;inset:0;pointer-events:none}
.gift-open-bg::before{content:'';position:absolute;left:50%;top:30%;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,.22),transparent 72%);filter:blur(60px);transform:translate(-50%,-50%);pointer-events:none}
.gift-open-particles{position:absolute;inset:0;overflow:hidden}
.gift-open-particle{position:absolute;border-radius:50%;opacity:.5;animation:giftParticleFloat 5s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes giftParticleFloat{0%{transform:translateY(0) scale(1);opacity:.5}100%{transform:translateY(-60px) scale(.6);opacity:0}}
.gift-open-card{position:relative;z-index:1;width:100%;max-width:500px;background:linear-gradient(180deg,rgba(28,28,54,.95),rgba(14,14,32,.98));border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:30px 26px;box-shadow:0 30px 80px -10px rgba(0,0,0,.7),0 0 0 1px rgba(139,92,246,.08) inset;text-align:center;animation:giftSlideIn .5s cubic-bezier(.5,1.4,.4,1) both;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gift-open-greeting{font-size:20px;font-weight:800;color:#fff;margin-bottom:6px}
.gift-open-from{font-size:13px;color:#a8a8c8;margin-bottom:14px}
.gift-open-sched{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);border-radius:12px;margin-bottom:16px;font-size:13px;color:#fbbf24}

/* Unwrap animation */
.gift-open-unwrap{position:relative;height:210px;display:grid;place-items:center;margin-bottom:16px}
.gift-open-box{position:relative;width:148px;height:138px;animation:giftBob 3.4s ease-in-out infinite;transition:transform .6s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 22px 28px rgba(0,0,0,.5));will-change:transform}
.gift-open-box-base{position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(135deg,#a78bfa,#ec4899);border-radius:14px;box-shadow:0 16px 30px -6px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.2)}
.gift-open-box-lid{position:absolute;top:14%;left:-3%;width:106%;height:36%;background:linear-gradient(135deg,#8b5cf6,#ec4899);border-radius:14px 14px 6px 6px;box-shadow:0 10px 18px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.22);transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .5s ease;transform-origin:bottom left;will-change:transform,opacity}
.gift-open-box-ribbon-v{position:absolute;left:50%;top:0;bottom:0;width:20px;margin-left:-10px;background:linear-gradient(180deg,#fde68a,#b45309);box-shadow:inset -2px 0 0 rgba(0,0,0,.18)}
.gift-open-box-ribbon-h{position:absolute;left:0;right:0;top:34%;height:20px;background:linear-gradient(90deg,#fde68a,#b45309);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.gift-open-box-bow{position:absolute;left:50%;top:-14px;transform:translateX(-50%);font-size:44px;transition:transform .6s,opacity .5s;animation:giftWobble 3.4s ease-in-out infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.gift-open-unwrap.opened .gift-open-box-lid{transform:rotate(-75deg) translateY(-20px);opacity:.35}
.gift-open-unwrap.opened .gift-open-box-bow{transform:translateX(-50%) translateY(-30px) scale(.5);opacity:0}
.gift-open-unwrap.opened .gift-open-box{animation:none}
@media (max-width:640px){
  .gift-open-unwrap{height:170px}
  /* Drop the idle bobbing animation completely on phones — it reads as
   * "spinning" while the user is waiting for the network. They'll still
   * see the lid-rotation transition when they tap. */
  .gift-open-box{width:128px;height:118px;transition-duration:.32s;animation:none}
  .gift-open-box-lid{transition-duration:.32s}
  .gift-open-box-bow{font-size:36px;transition-duration:.32s;animation:none}
}
@media (prefers-reduced-motion: reduce){
  .gift-open-box,.gift-open-box-lid,.gift-open-box-bow,.gift-preview-box,.gift-preview-bow,.gift-preview-shimmer,.gift-preview-sparkle,.gift-open-particle{animation:none !important;transition-duration:.18s !important}
}

.gift-open-btn{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);padding:14px 32px;border-radius:14px;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:16px;font-weight:800;border:none;cursor:pointer;box-shadow:0 12px 30px -6px rgba(236,72,153,.45);white-space:nowrap;animation:giftBtnPulse 2s ease-in-out infinite}
@keyframes giftBtnPulse{0%,100%{box-shadow:0 12px 30px -6px rgba(236,72,153,.45)}50%{box-shadow:0 12px 40px -4px rgba(236,72,153,.6)}}
.gift-open-btn:hover{filter:brightness(1.1);transform:translateX(-50%) translateY(-2px)}
.gift-open-btn:disabled{opacity:.6;cursor:wait}

/* Revealed content */
@keyframes giftContentReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.gift-open-content{text-align:center}
.gift-open-content.hidden{display:none}
.gift-open-poster{width:160px;max-width:50%;height:auto;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.5);margin-bottom:16px}
.gift-open-title{font-size:22px;font-weight:900;color:#fff;margin-bottom:4px}
.gift-open-year{font-weight:600;color:#a8a8c8;font-size:16px}
.gift-open-overview{font-size:13px;color:#a8a8c8;line-height:1.6;margin:10px 0 16px;max-height:120px;overflow-y:auto;text-align:left}
.gift-open-note{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:14px;color:#e8e8ff;line-height:1.5;text-align:left}
.gift-open-note-icon{margin-right:4px}
.gift-open-voice{margin-bottom:14px}
.gift-open-voice-label{font-size:12px;font-weight:700;color:#cfcfee;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}

/* Gift open actions */
.gift-open-actions{display:flex;gap:10px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.gift-open-action-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 22px;border-radius:12px;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:14px;font-weight:700;border:none;cursor:pointer;text-decoration:none;transition:all .2s}
.gift-open-action-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.gift-open-picksy-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}

/* Gift reactions */
.gift-open-reaction{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.gift-open-reaction-label{font-size:12px;font-weight:700;color:#a8a8c8;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.gift-open-reaction-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.gift-react-btn{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:20px;cursor:pointer;transition:all .2s;display:grid;place-items:center}
.gift-react-btn:hover{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.3);transform:scale(1.15)}
.gift-react-btn.reacted{background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(236,72,153,.2));border-color:rgba(139,92,246,.5);transform:scale(1.1);box-shadow:0 4px 14px rgba(139,92,246,.3)}

/* Gift group wishes */
.gift-open-group-wishes{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);text-align:left}
.gift-open-group-title{font-size:12px;font-weight:700;color:#cfcfee;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.gift-open-wish{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 14px;margin-bottom:6px;font-size:13px;color:#e8e8ff;line-height:1.4}
.gift-wish-author{font-weight:700;color:#a78bfa;margin-right:4px}

/* Gift 404 */
.gift-open-notfound{text-align:center;padding:40px 30px}
.gift-open-404-icon{font-size:64px;margin-bottom:16px}
.gift-open-notfound h2{font-size:22px;font-weight:900;color:#fff;margin-bottom:8px}
.gift-open-notfound p{font-size:13px;color:#a8a8c8;line-height:1.6;margin-bottom:20px}

/* Gift open theme variants */
.gift-open-theme-summer .gift-open-card{background:linear-gradient(180deg,#1a2e40,#0e1e30)}
.gift-open-theme-summer .gift-open-box-base,.gift-open-theme-summer .gift-open-box-lid{background:linear-gradient(135deg,#f59e0b,#06b6d4)}
.gift-open-theme-halloween .gift-open-card{background:linear-gradient(180deg,#1a1008,#0e0a06)}
.gift-open-theme-halloween .gift-open-box-base,.gift-open-theme-halloween .gift-open-box-lid{background:linear-gradient(135deg,#f97316,#7c2d12)}
.gift-open-theme-christmas .gift-open-card{background:linear-gradient(180deg,#0f1f14,#0a140e)}
.gift-open-theme-christmas .gift-open-box-base,.gift-open-theme-christmas .gift-open-box-lid{background:linear-gradient(135deg,#16a34a,#dc2626)}
.gift-open-theme-birthday .gift-open-box-base,.gift-open-theme-birthday .gift-open-box-lid{background:linear-gradient(135deg,#ec4899,#06b6d4)}
.gift-open-theme-valentines .gift-open-card{background:linear-gradient(180deg,#1f0a14,#140810)}
.gift-open-theme-valentines .gift-open-box-base,.gift-open-theme-valentines .gift-open-box-lid{background:linear-gradient(135deg,#e11d48,#fb7185)}
.gift-open-theme-newyear .gift-open-box-base,.gift-open-theme-newyear .gift-open-box-lid{background:linear-gradient(135deg,#3b82f6,#a78bfa)}
.gift-open-theme-movienight .gift-open-card{background:linear-gradient(180deg,#13112e,#0a0920)}
.gift-open-theme-movienight .gift-open-box-base,.gift-open-theme-movienight .gift-open-box-lid{background:linear-gradient(135deg,#1e1b4b,#8b5cf6)}
.gift-open-theme-graduation .gift-open-box-base,.gift-open-theme-graduation .gift-open-box-lid{background:linear-gradient(135deg,#1e3a5f,#334155)}
.gift-open-theme-graduation .gift-open-box-ribbon-v,.gift-open-theme-graduation .gift-open-box-ribbon-h{background:linear-gradient(90deg,#fbbf24,#eab308)}
.gift-open-theme-thankyou .gift-open-box-base,.gift-open-theme-thankyou .gift-open-box-lid{background:linear-gradient(135deg,#10b981,#a78bfa)}
.gift-open-theme-anniversary .gift-open-card{background:linear-gradient(180deg,#1f0a14,#140810)}
.gift-open-theme-anniversary .gift-open-box-base,.gift-open-theme-anniversary .gift-open-box-lid{background:linear-gradient(135deg,#e11d48,#fbbf24)}
.gift-open-theme-horror .gift-open-card{background:linear-gradient(180deg,#0e0806,#0a0604)}
.gift-open-theme-horror .gift-open-box-base,.gift-open-theme-horror .gift-open-box-lid{background:linear-gradient(135deg,#7c2d12,#1c1917)}
.gift-open-theme-horror .gift-open-box-ribbon-v,.gift-open-theme-horror .gift-open-box-ribbon-h{background:linear-gradient(90deg,#dc2626,#7f1d1d)}

@media(max-width:520px){
  .gift-open-page{padding:0}
  .gift-open-card{max-height:100vh;border-radius:0;padding:24px 18px;overflow-y:auto}
  .gift-open-poster{width:120px}
  .gift-open-title{font-size:18px}
  .gift-react-btn{width:36px;height:36px;font-size:18px}
}

/* ===========================================================
 * Picksy v52 — Extras (DNA / Psychoanalysis / Cinema Zodiac)
 *           profile theme + cover upload + share card + QR
 * =========================================================== */

/* ── CSS theme variables (set dynamically by Extras.applyProfileColors) ── */
:root{
  --profile-accent: #8b5cf6;
  --profile-accent-2: #ec4899;
  --profile-accent-grad: linear-gradient(135deg, #8b5cf6, #ec4899);
  --profile-accent-soft: rgba(139,92,246,.18);
  --profile-accent-glow: rgba(139,92,246,.45);
}

/* ── Profile head/avatar adapt to accent ── */
.profile-modal-content{transition:background-image .3s ease}
.profile-head .profile-avatar{
  background-image: var(--profile-accent-grad);
  box-shadow: 0 6px 20px var(--profile-accent-glow);
  transition: background-image .3s ease, box-shadow .3s ease;
}
.profile-avatar.has-img{background-color:#0a0a14;background-blend-mode:normal}
.profile-modal-content .profile-title,
.profile-modal-content .profile-section-title{
  background: var(--profile-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.profile-modal-content .profile-section-title{
  -webkit-text-fill-color: initial; /* keep emojis visible */
  color:#e8e8ff;
}
.profile-modal-content .btn-primary,
.profile-modal-content .profile-username-save{
  background: var(--profile-accent-grad);
  border:none;
  color:#fff;
  box-shadow: 0 6px 18px var(--profile-accent-glow);
}
.profile-modal-content .btn-secondary{
  background: var(--profile-accent-soft);
  border:1px solid var(--profile-accent);
  color:#fff;
}

/* ── Banner / Avatar device upload ── */
.profile-banner-upload-row{
  display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;
}
.profile-upload-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:10px;
  background:var(--profile-accent-soft);
  border:1px dashed var(--profile-accent);
  color:#fff;cursor:pointer;font-size:13px;font-weight:500;
  transition:transform .15s ease, background .15s ease;
}
.profile-upload-btn:hover{transform:translateY(-1px);background:var(--profile-accent-glow)}
.profile-upload-clear{
  width:34px;height:34px;border-radius:8px;border:none;cursor:pointer;
  background:rgba(239,68,68,.15);color:#fca5a5;font-size:16px;
}
.profile-upload-clear:hover{background:rgba(239,68,68,.30)}
.profile-banner-preview{
  width:100%;max-height:160px;object-fit:cover;border-radius:12px;margin-top:8px;
  border:1px solid rgba(255,255,255,.12);
}
.profile-avatar-preview{
  width:96px;height:96px;border-radius:50%;object-fit:cover;margin-top:8px;
  border:3px solid var(--profile-accent);box-shadow:0 6px 20px var(--profile-accent-glow);
}

/* ── Color palette ── */
.profile-color-presets{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(74px, 1fr));
  gap:8px;margin-bottom:12px;
}
.profile-color-chip{
  position:relative;border:none;cursor:pointer;border-radius:14px;
  height:46px;color:#fff;font-size:11px;font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:6px 8px;
  transition:transform .15s ease, box-shadow .2s ease;
}
.profile-color-chip:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.profile-color-chip.active{outline:2px solid #fff;outline-offset:2px}
.profile-color-chip-name{display:block;line-height:1}
/* Locked color presets — visible but greyed out, with a 🔒 marker.
 * Free tier sees only the first 3 chips usable; the rest are locked. */
.profile-color-chip-locked{filter:grayscale(.85) brightness(.62);cursor:not-allowed}
.profile-color-chip-locked:hover{transform:none;box-shadow:none}
.profile-color-chip-lock{
  position:absolute;top:6px;right:6px;
  font-size:11px;line-height:1;
  background:rgba(0,0,0,.55);color:#fff;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-shadow:none;
}

/* ── Movie DNA locked card (Free tier upgrade prompt) ── */
.dna-locked-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:28px 22px;border-radius:18px;text-align:center;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent, #8b5cf6) 14%, rgba(15,15,35,.55)), rgba(15,15,35,.45));
  border:1px solid color-mix(in srgb, var(--accent, #8b5cf6) 28%, rgba(255,255,255,.06));
  position:relative;overflow:hidden;
}
.dna-locked-card::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent, #8b5cf6) 35%, transparent), transparent 60%),
             radial-gradient(circle at 100% 100%, rgba(236,72,153,.25), transparent 60%);
  opacity:.55;
}
.dna-locked-card > *{position:relative;z-index:1}
.dna-locked-icon{font-size:2.4rem;line-height:1;filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--accent,#8b5cf6) 40%,transparent))}
.dna-locked-title{font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:.3px}
.dna-locked-msg{font-size:.92rem;color:#cbd5e1;line-height:1.5;max-width:520px}
.dna-locked-btn{
  margin-top:6px;padding:11px 22px;border-radius:999px;border:none;cursor:pointer;
  font-weight:800;font-size:.92rem;color:#fff;
  background:linear-gradient(135deg, var(--accent, #8b5cf6), #ec4899);
  box-shadow:0 8px 22px color-mix(in srgb, var(--accent, #8b5cf6) 35%, transparent);
  transition:transform .15s ease, box-shadow .2s ease;
}
.dna-locked-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb, var(--accent, #8b5cf6) 45%, transparent)}
.profile-color-custom-row{display:flex;gap:14px;flex-wrap:wrap}
.profile-color-custom{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);
  padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08)}
.profile-color-custom-label{font-size:12px;color:#cbd5e1;min-width:14px}

/* ── Visibility toggles section (above save button) ── */
.profile-vis-section{
  margin:18px 0 14px;padding:18px;border-radius:18px;
  background:linear-gradient(160deg, var(--profile-accent-soft, rgba(139,92,246,.10)), rgba(255,255,255,.02));
  border:1px solid var(--profile-accent, rgba(139,92,246,.25));
  position:relative;overflow:hidden;
}
.profile-vis-section::after{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:radial-gradient(circle at 12% -10%, var(--profile-accent, rgba(139,92,246,.3)), transparent 50%);
  opacity:.35;
}
.profile-vis-section > *{position:relative;z-index:1}
.profile-vis-title{margin:0 0 4px;font-size:15px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px}
.profile-vis-hint{margin:0 0 14px;font-size:13px;color:#cbd5e1;line-height:1.45}
.profile-vis-row{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:8px;
}
/* iOS-style switch */
.profile-vis-toggle{
  --pv-on: var(--profile-accent, #8b5cf6);
  position:relative;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select:none;
  /* Allow grid items to shrink and wrap so labels never get clipped. */
  min-width:0;overflow:hidden;
}
.profile-vis-toggle:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
.profile-vis-toggle input[type=checkbox]{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.profile-vis-knob{
  position:relative;flex-shrink:0;width:38px;height:22px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.profile-vis-knob::after{
  content:"";position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);transition:transform .2s ease, background .2s ease;
}
.profile-vis-toggle input:checked + .profile-vis-knob{
  background:var(--pv-on);border-color:var(--pv-on);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pv-on) 18%, transparent);
}
.profile-vis-toggle input:checked + .profile-vis-knob::after{transform:translateX(16px)}
.profile-vis-toggle input:focus-visible + .profile-vis-knob{outline:2px solid var(--pv-on);outline-offset:2px}
.profile-vis-text{display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:600;line-height:1.2;min-width:0;flex:1 1 auto;overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.profile-vis-text b{font-style:normal;font-size:18px;font-weight:normal}

/* Showcase grid layout — clickable badges */
.profile-showcase-hint{font-size:12px;color:rgba(203,213,225,.78);margin:4px 0 8px;line-height:1.4}
.profile-showcase-grid.profile-showcase-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:8px;
}
.profile-showcase-badge{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 8px;border-radius:14px;cursor:pointer;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.profile-showcase-badge:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.profile-showcase-badge.selected{
  background:linear-gradient(135deg, var(--profile-accent, #8b5cf6), #ec4899);
  border-color:transparent;color:#fff;
  box-shadow:0 8px 22px color-mix(in srgb, var(--profile-accent, #8b5cf6) 35%, transparent);
}
.profile-showcase-badge.selected::after{
  content:"✓";position:absolute;top:6px;right:8px;font-weight:800;color:#fff;font-size:13px;
}
.profile-showcase-badge.locked{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
.profile-showcase-badge .profile-showcase-icon{font-size:22px;line-height:1}
.profile-showcase-badge .profile-showcase-name{font-size:11px;font-weight:700;color:#e2e8f0;line-height:1.15}
.profile-showcase-badge.selected .profile-showcase-name{color:#fff}
.profile-showcase-empty{font-size:13px;color:rgba(203,213,225,.6);grid-column:1/-1;text-align:center;padding:14px}

.profile-section-hidden{display:none !important}

/* ── Generic Extras section frame ── */
.extras-section{
  margin-top:18px;padding:16px;border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
}
.extras-section-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;
}
.extras-badge{
  background:var(--profile-accent-grad);color:#fff;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;letter-spacing:.4px;
}
.extras-badge-ai{background:linear-gradient(135deg,#22d3ee,#a855f7)}
.extras-section-body{position:relative;min-height:60px}
.extras-loading,.extras-empty,.dna-loading,.dna-empty,.psycho-loading,.zodiac-loading{
  text-align:center;color:#94a3b8;padding:20px;font-size:14px;
}
.extras-empty{font-style:italic}
.dna-empty-mini{color:#64748b;font-size:13px}

/* ── DNA stats / summary ── */
.dna-stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;
}
.dna-stat{
  background:rgba(255,255,255,.04);padding:10px 6px;border-radius:12px;text-align:center;
  border:1px solid rgba(255,255,255,.06);
}
.dna-stat-icon{font-size:18px;display:block;margin-bottom:2px}
.dna-stat b{display:block;font-size:18px;color:#fff}
.dna-stat small{display:block;color:#94a3b8;font-size:11px;margin-top:2px}

.dna-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.dna-summary-item{
  display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;
  background:var(--profile-accent-soft);border:1px solid var(--profile-accent);
}
.dna-summary-emoji{font-size:24px}
.dna-summary-label{font-size:11px;color:#cbd5e1;text-transform:uppercase;letter-spacing:.5px}
.dna-summary-value{font-size:15px;color:#fff;font-weight:700;margin-top:2px}

.dna-block-title{
  font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:#cbd5e1;
  margin:18px 0 8px;font-weight:700;
}

/* Genre helix bars */
.dna-helix{display:flex;flex-direction:column;gap:6px}
.dna-helix-row{display:grid;grid-template-columns:1fr 4fr 32px;gap:8px;align-items:center}
.dna-helix-name{font-size:13px;color:#e8e8ff}
.dna-helix-track{height:14px;background:rgba(255,255,255,.06);border-radius:7px;overflow:hidden}
.dna-helix-fill{
  height:100%;background:var(--profile-accent-grad);
  width:0;animation: dnaFillIn .9s ease forwards;border-radius:7px;
  box-shadow:0 0 12px var(--profile-accent-glow);
}
.dna-helix-count{font-size:12px;color:#94a3b8;text-align:right}
@keyframes dnaFillIn{from{width:0}to{}}

/* Mood chart */
.dna-mood-chart{display:flex;flex-direction:column;gap:6px}
.dna-mood-row{display:grid;grid-template-columns:90px 1fr 40px;gap:8px;align-items:center}
.dna-mood-label{font-size:12px;color:#cbd5e1}
.dna-mood-bar{height:10px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.dna-mood-fill{height:100%;border-radius:5px;transition:width .6s ease}
.dna-mood-fill.dna-mood-dark{background:linear-gradient(90deg,#7c3aed,#3730a3)}
.dna-mood-fill.dna-mood-deep{background:linear-gradient(90deg,#0ea5e9,#0369a1)}
.dna-mood-fill.dna-mood-light{background:linear-gradient(90deg,#fbbf24,#f97316)}
.dna-mood-fill.dna-mood-high{background:linear-gradient(90deg,#ef4444,#dc2626)}
.dna-mood-pct{font-size:12px;color:#94a3b8;text-align:right}

.dna-decades{display:flex;flex-wrap:wrap;gap:6px}
.dna-chip{
  padding:6px 10px;border-radius:14px;background:rgba(255,255,255,.05);
  color:#e8e8ff;font-size:13px;border:1px solid rgba(255,255,255,.08);
}

.dna-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;justify-content:flex-end}
.dna-actions .btn-primary,.dna-actions .btn-secondary{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:13px;cursor:pointer;border:none;
}

/* ── Share Card preview modal ── */
.dna-share-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.dna-share-modal.hidden{display:none}
.dna-share-overlay{position:absolute;inset:0;background:rgba(2,6,23,.86);backdrop-filter:blur(10px)}
.dna-share-card{position:relative;width:100%;max-width:min(440px,92vw);max-height:94vh;overflow:auto;
  border-radius:26px;padding:22px 18px 18px;display:flex;flex-direction:column;gap:14px;align-items:center;
  background:linear-gradient(180deg, rgba(20,20,40,.9), rgba(10,10,28,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.55);}
.dna-share-head{text-align:center;display:flex;flex-direction:column;gap:4px;padding:0 30px}
.dna-share-title{font-size:18px;font-weight:700;color:#fff;letter-spacing:.2px}
.dna-share-sub{font-size:13px;color:rgba(255,255,255,.65);line-height:1.4}
.dna-share-img{max-width:100%;width:100%;border-radius:18px;box-shadow:0 22px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;display:block;background:#0b0b1f}
.dna-share-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.dna-share-actions .btn-primary,.dna-share-actions .btn-secondary{flex:1 1 140px;min-width:140px;font-size:14px;padding:11px 14px;border-radius:12px;font-weight:600}
.dna-share-close{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.10);border:none;color:#fff;font-size:22px;cursor:pointer;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s}
.dna-share-close:hover{background:rgba(255,255,255,.20)}
@media (max-width:480px){
  .dna-share-card{padding:18px 12px 14px;border-radius:22px}
  .dna-share-actions .btn-primary,.dna-share-actions .btn-secondary{flex:1 1 100%}
}

/* ── Recommend widget ── */
.extras-rec-card{
  display:flex;gap:12px;padding:12px;border-radius:14px;
  background:linear-gradient(135deg, var(--profile-accent-soft), rgba(255,255,255,.02));
  border:1px solid var(--profile-accent);
}
.extras-rec-poster{width:96px;height:144px;object-fit:cover;border-radius:10px;flex-shrink:0}
.extras-rec-info{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.extras-rec-title{font-size:16px;font-weight:700;color:#fff;line-height:1.25}
.extras-rec-meta{font-size:12px;color:#94a3b8}
.extras-rec-reason{font-size:13px;color:#cbd5e1;margin-top:4px}
.extras-rec-actions{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}

/* ── Кінозодіак ── */
.zodiac-card{
  position:relative;padding:18px;border-radius:18px;
  background:radial-gradient(circle at top right, var(--profile-accent-soft), transparent 60%),
             linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--profile-accent);
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  overflow:hidden;
}
.zodiac-symbol{font-size:54px;line-height:1;filter:drop-shadow(0 4px 12px var(--profile-accent-glow))}
.zodiac-name{font-size:22px;font-weight:800;color:#fff;letter-spacing:.5px}
.zodiac-desc{color:#cbd5e1;font-size:14px;max-width:480px;line-height:1.55}
.zodiac-compat{width:100%;margin-top:10px}
.zodiac-compat-title{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:#94a3b8;margin:8px 0 4px}
.zodiac-compat-row{font-size:13px;color:#fff}
.zodiac-compat-yes{color:#4ade80}
.zodiac-compat-no{color:#fb7185}
.zodiac-share-btn{margin-top:12px}

/* ── Психоаналіз ── */
.psycho-card{
  position:relative;padding:22px 18px;border-radius:18px;
  background:linear-gradient(135deg, rgba(34,211,238,.08), rgba(168,85,247,.08));
  border:1px solid rgba(168,85,247,.4);
}
.psycho-quote-mark{
  position:absolute;top:-10px;left:14px;font-size:80px;line-height:1;color:rgba(168,85,247,.35);
  font-family:'Georgia',serif;font-weight:700;
}
.psycho-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.psycho-list li{
  font-size:15px;color:#e8e8ff;line-height:1.55;padding-left:18px;position:relative;
}
.psycho-list li::before{
  content:"❯";position:absolute;left:0;color:#a855f7;font-weight:700;font-size:13px;top:3px;
}
.psycho-closing{
  margin-top:14px;font-size:12px;color:#94a3b8;font-style:italic;text-align:center;
  border-top:1px dashed rgba(255,255,255,.08);padding-top:10px;
}
.psycho-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.psycho-actions .btn-secondary{padding:7px 12px;border-radius:10px;font-size:12px;cursor:pointer;border:none;background:rgba(255,255,255,.06);color:#fff}

/* ── Profile-search loading/empty ── */
.profile-search-loading,.profile-search-empty{padding:10px;color:#94a3b8;font-size:13px}

/* ── Gift QR (refreshed) ── */
.gift-qr-section{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px}
.gift-qr-frame{
  position:relative;background:#fff;border-radius:18px;padding:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 0 4px rgba(255,255,255,.08);
}
.gift-qr-frame canvas{display:block;border-radius:8px}
.gift-qr-brand{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:34px;line-height:1;pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.9));
}
.gift-qr-caption{font-size:13px;color:#cbd5e1}
.gift-copy-qr{
  background:var(--profile-accent-grad);color:#fff;border:none;
  padding:10px 16px;border-radius:12px;cursor:pointer;font-weight:600;
  box-shadow:0 6px 18px var(--profile-accent-glow);
}
.gift-copy-qr:hover{transform:translateY(-1px)}

/* ── Gift history copy button ── */
.gift-hist-copy{
  background:transparent;border:none;color:#94a3b8;cursor:pointer;
  width:34px;height:34px;border-radius:8px;font-size:16px;align-self:center;
  transition:background .15s ease,color .15s ease;
}
.gift-hist-copy:hover{background:rgba(255,255,255,.06);color:#fff}
.gift-history-item{cursor:pointer}

/* Profile history clickable cue */
.profile-history-item.is-clickable:hover{background:var(--profile-accent-soft)}
.profile-history-item{transition:background .15s ease}

/* ── Mobile tweaks ── */
@media (max-width: 540px){
  .dna-stats-row{grid-template-columns:repeat(2,1fr)}
  .dna-summary{grid-template-columns:1fr}
  .extras-rec-card{flex-direction:column}
  .extras-rec-poster{width:100%;height:200px}
  .profile-color-presets{grid-template-columns:repeat(auto-fill, minmax(64px, 1fr))}
}

/* ── Tier-locked overlays for Free users (v56) ────────────────────────── */
.tier-locked{position:relative;opacity:.95}
.tier-locked .profile-banner-upload-row,
.tier-locked > input,
.tier-locked > textarea,
.tier-locked img.profile-banner-preview,
.tier-locked img.profile-avatar-preview,
.tier-locked .profile-field-hint{filter:blur(2px) grayscale(.5);pointer-events:none;user-select:none}
.tier-locked > label.profile-field-label{filter:none}
.tier-lock-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(15,15,35,.55),rgba(15,15,35,.7));backdrop-filter:blur(2px);border-radius:12px;z-index:5;pointer-events:auto}
.tier-lock-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 22px;background:rgba(15,15,35,.85);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.4)}
.tier-lock-icon{font-size:1.6rem}
.tier-lock-text{font-size:.85rem;font-weight:700;color:#e2e8f0;text-align:center}
.tier-lock-btn{margin-top:4px;padding:8px 18px;border:none;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-weight:800;font-size:.82rem;cursor:pointer;box-shadow:0 8px 22px rgba(124,58,237,.4);transition:transform .15s ease}
.tier-lock-btn:hover{transform:translateY(-1px)}
.tier-locked-toggle{opacity:.55}
.tier-locked-toggle .profile-vis-knob{filter:grayscale(1)}
.tier-lock-pill{cursor:pointer;transition:transform .15s ease}
.tier-lock-pill:hover{transform:scale(1.04)}

/* ──────────────────────────────────────────────────────────────────────
 * v58 — Mobile performance: drop expensive backdrop-filter on phones.
 * `backdrop-filter: blur(...)` is the single biggest GPU hog on mobile
 * Safari / low-end Android. Replace with a slightly more opaque
 * background so the visual still reads as a "glass" surface but
 * scrolling, typing, and modals don't stutter.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .glass,
  .glass-deep,
  .glass-pill,
  .glass-input,
  .glass-select,
  .glass-textarea,
  .modal-content,
  .profile-modal-content,
  .header,
  header.header,
  .share-menu-content,
  .tier-lock-overlay,
  .site-popup-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Make sure the now-non-blurred surfaces stay readable. */
  .glass,
  .glass-input,
  .glass-select,
  .glass-textarea,
  .modal-content,
  .profile-modal-content,
  .share-menu-content {
    background-color: rgba(12, 12, 28, 0.94) !important;
  }
  header.header { background-color: rgba(8, 8, 22, 0.96) !important; }

  /* Disable expensive box-shadows + filters on cards while scrolling.
   * They are restored when the user stops touching. */
  .picky-scrolling .result-card,
  .picky-scrolling .glass,
  .picky-scrolling .modal-content {
    box-shadow: none !important;
    filter: none !important;
  }

  /* Long pages: render off-screen sections lazily. */
  .profile-section,
  .extras-section,
  .collections-section,
  .duo-section,
  .live-strip {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
  }
}

/* Always-on: prefers-reduced-motion → kill non-essential animations. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * v58/59 — Header tab morphing "bubble" effect.
 * A pill (.tab-bubble) sits behind the active tab and smoothly slides
 * between Movies / TV / Books on click. Uses the original purple/pink
 * gradient (var(--gradient-main)) to match the previous look — not white.
 * The white-blob ripple on click is kept (it's the "biла бульбашка"
 * the user asked for at click-time, on top of the gradient pill).
 * Scripted in app.js (_initTabBubble / _positionTabBubble).
 * ────────────────────────────────────────────────────────────────────── */
.tab-switch {
  position: relative;
  isolation: isolate;
}
.tab-bubble {
  position: absolute;
  top: 4px; left: 0;
  height: calc(100% - 8px);
  width: 0;
  border-radius: 100px;
  background: var(--gradient-main);
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateX(0);
  transition:
    transform 0.45s cubic-bezier(0.34, 1.45, 0.5, 1),
    width 0.45s cubic-bezier(0.34, 1.45, 0.5, 1);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.tab-bubble.is-ready { opacity: 1; }
/* Active tab carries its own gradient pill — no JS bubble required. */
.tab-switch .tab-btn {
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-dim);
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  /* No overflow:hidden — would clip the active underline + click ripple. */
  font-weight: 600;
}
.tab-switch .tab-btn.active {
  background: var(--gradient-main) !important;
  box-shadow:
    0 6px 22px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  transform: translateY(-1px);
}
.tab-switch .tab-btn.active .tab-icon {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
  transform: scale(1.05);
}
.tab-switch .tab-btn:hover:not(.active) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06) !important;
}
/* Pulse the active pill briefly so the user notices the switch.
   Once attention has settled the animation is removed. */
@keyframes tabActivePulse {
  0%   { transform: translateY(-1px) scale(1); }
  35%  { transform: translateY(-1px) scale(1.06); box-shadow: 0 8px 28px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  100% { transform: translateY(-1px) scale(1); }
}
.tab-switch .tab-btn.active {
  animation: tabActivePulse 0.55s var(--ease) 1;
}
/* Click ripple — quick white blob expanding under the cursor. */
.tab-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.32);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.tab-btn.tab-clicked::after {
  opacity: 1;
  transform: scale(1.05);
  transition: opacity 0.05s ease, transform 0.05s ease;
}

/* ──────────────────────────────────────────────────────────────────────
 * v58 — Mini-profile (profile modal) optimized for desktop.
 * Mobile keeps the existing single-column layout. From 1024px we widen
 * the modal, switch the customization grid to 2-column, and stretch the
 * stat tiles into a 4-column row — no more single tall ribbon on PC.
 * ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .profile-modal-content {
    width: min(94vw, 880px) !important;
    max-height: 88vh !important;
  }
  .profile-head {
    padding: 36px 36px 24px !important;
    gap: 20px;
  }
  .profile-username-section,
  .profile-edit-grid,
  .profile-tabs,
  .profile-panel,
  .profile-section {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .profile-edit-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 12px;
  }
  /* Inputs that should stay full-width inside the 2-col grid. */
  .profile-edit-grid > textarea,
  .profile-edit-grid > .profile-field-group:has(.profile-color-presets),
  .profile-edit-grid > .profile-field-group:has(.profile-banner-preview),
  .profile-edit-grid > .profile-field-group:has(.profile-showcase-grid),
  .profile-edit-grid > .profile-vis-section,
  .profile-edit-grid > .profile-share-actions {
    grid-column: 1 / -1;
  }
  /* Stat tiles: 4 across on desktop. */
  .profile-stats {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  /* Tools grid stays 4-col but with more breathing room. */
  .profile-tools-grid {
    gap: 12px !important;
  }
  /* Keep the default auto-fill grid on PC too — it already wraps cleanly
   * and prevents clipping on narrower modal sizes. */
  .profile-vis-row {
    gap: 10px !important;
  }
  /* Larger close button hit-area on PC. */
  .profile-modal-content .modal-close {
    width: 40px; height: 40px; font-size: 1.6rem;
  }
}
@media (min-width: 1280px) {
  .profile-modal-content {
    width: min(92vw, 980px) !important;
  }
}

/* Ukrainian original badge (v71) */
.meta-tag.meta-ua {
  background: linear-gradient(135deg, rgba(0,87,183,0.85), rgba(255,215,0,0.85)) !important;
  color: #000 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255,215,0,0.6);
  text-shadow: 0 1px 1px rgba(255,255,255,0.25);
}
.trending-poster-wrap {
  position: relative;
  display: block;
}
.trending-ua-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  background: linear-gradient(135deg, rgba(0,87,183,0.92), rgba(255,215,0,0.92));
  color: #000;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255,215,0,0.7);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* ───── Upgrade modal v74 polish ───── */
.upgrade-hero {
  text-align: center;
  margin: 0 0 18px;
  padding: 4px 8px 0;
}
.upgrade-hero-icon {
  font-size: 2.4rem;
  filter: drop-shadow(0 4px 12px rgba(245, 166, 35, 0.45));
  margin-bottom: 4px;
}
.upgrade-subtitle {
  margin: 6px 0 0;
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.upgrade-current-expiry {
  margin: 14px auto 0;
  display: inline-block;
  padding: 6px 14px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 999px;
  font-size: 0.85rem;
}
.upgrade-footnote {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
}
.upgrade-footnote span:nth-child(2n) { opacity: 0.4; }

.plan-card.plan-bestvalue {
  border-color: #10b981;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25), 0 8px 24px rgba(16, 185, 129, 0.1);
}
.plan-card.plan-popular {
  box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.35), 0 8px 24px rgba(245, 166, 35, 0.12);
}
.plan-badge.plan-badge-bestvalue {
  background: linear-gradient(135deg, #10b981, #34d399);
  color: #062f22;
}
.plan-badge.plan-badge-popular {
  background: linear-gradient(135deg, #f5a623, #f7c948);
  color: #1a1a2e;
}
.plan-current-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.plan-price-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 6px 0 12px;
}
.plan-price-amount {
  font-size: 1.65rem;
  font-weight: 900;
  background: linear-gradient(135deg, #f5a623, #ffd166);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}
.plan-price-period {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plan-pricing-selector {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.plan-day-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.plan-day-btn:hover {
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
.plan-day-btn.plan-day-active {
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(168,85,247,0.18));
  border-color: rgba(168,85,247,0.55);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.18) inset;
}

/* Collapse chevron for collections header (v75) */
.collections-header { position: relative; }
.collections-header::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  opacity: 0.55;
  transition: transform 0.2s ease;
  pointer-events: none;
}
.collections-header.is-collapsed::after { transform: translateY(-50%) rotate(-90deg); }
.collections-header-right { padding-right: 18px; }

/* ───── v76: Tier-locked field overlay (replaces hard hide for premium-gated UI) ───── */
.tier-locked {
  position: relative;
  isolation: isolate;
}
.tier-locked > *:not(.tier-locked-banner) {
  pointer-events: none !important;
  filter: blur(2px) grayscale(0.35);
  opacity: 0.55;
  user-select: none;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.tier-locked-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 14px 18px;
  background:
    radial-gradient(ellipse at top, rgba(168, 85, 247, 0.18), transparent 70%),
    linear-gradient(135deg, rgba(15, 12, 30, 0.78), rgba(28, 18, 48, 0.78));
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 14px;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.18);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.tier-locked-banner:hover {
  transform: scale(1.01);
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 10px 32px rgba(124, 58, 237, 0.28);
}
.tier-locked-banner:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}
.tier-locked-banner-icon {
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.45));
}
.tier-locked-banner-text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}
.tier-locked-banner-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #fbbf24, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tier-locked-banner-cta {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}
@media (max-width: 480px) {
  .tier-locked-banner {
    padding: 10px 12px;
    gap: 8px;
  }
  .tier-locked-banner-icon { font-size: 1.3rem; }
  .tier-locked-banner-title { font-size: 0.85rem; }
  .tier-locked-banner-cta { font-size: 0.72rem; }
}

/* ───── v76: Upgrade modal — mobile/touch refinements ───── */
@media (max-width: 768px) {
  .upgrade-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    height: 100vh;
    border-radius: 0 !important;
    padding: 16px 14px 24px !important;
    overflow-y: auto;
  }
  .upgrade-modal-card .modal-close {
    position: sticky;
    top: 4px;
    margin-left: auto;
    z-index: 5;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .upgrade-hero { margin-bottom: 12px; padding: 0; }
  .upgrade-hero-icon { font-size: 2rem; }
  .upgrade-subtitle { font-size: 0.85rem; }
  .upgrade-current-expiry { margin-top: 10px; font-size: 0.78rem; padding: 5px 12px; }
  .trial-banner {
    padding: 12px 14px;
    margin-bottom: 14px;
    gap: 10px;
    border-radius: 14px;
  }
  .trial-banner-icon { font-size: 1.6rem; }
  .trial-banner-text strong { font-size: 0.9rem; }
  .trial-banner-text small { font-size: 0.74rem; line-height: 1.35; }
  .trial-banner-btn { padding: 7px 14px; font-size: 0.78rem; border-radius: 10px; }
  .plans-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 4px 0;
  }
  .plan-card {
    padding: 18px 16px 16px !important;
    border-radius: 18px;
  }
  .plan-icon { font-size: 1.7rem; margin-bottom: 4px; }
  .plan-name { font-size: 1.1rem; }
  .plan-price-amount { font-size: 1.55rem; }
  .plan-price-period { font-size: 0.66rem; }
  .plan-pricing-selector {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
  }
  .plan-day-btn {
    flex: 1 1 0;
    text-align: center;
    padding: 8px 6px;
    font-size: 0.74rem;
    border-radius: 10px;
    line-height: 1.2;
  }
  .plan-features {
    margin: 4px 0 14px;
  }
  .plan-features li {
    padding: 3px 0;
    font-size: 0.82rem;
  }
  .plan-btn {
    padding: 12px;
    font-size: 0.95rem;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.32);
  }
  .upgrade-footnote {
    margin-top: 14px;
    font-size: 0.72rem;
    gap: 6px;
  }
  .plan-current-pill { top: 8px; right: 8px; font-size: 0.6rem; }
  .plan-card.plan-popular,
  .plan-card.plan-bestvalue {
    box-shadow: 0 0 0 1px currentColor inset, 0 6px 18px rgba(0, 0, 0, 0.35);
  }
}
@media (max-width: 380px) {
  .plan-day-btn { font-size: 0.7rem; padding: 7px 4px; }
  .upgrade-title { font-size: 1.18rem !important; }
}

/* ───── v76: Editable showcase badges grid (mini-profile) ───── */
.profile-showcase-badge.not-earned {
  filter: grayscale(0.85) brightness(0.55);
  cursor: not-allowed;
  opacity: 0.65;
}
.profile-showcase-badge.not-earned:hover {
  transform: none;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
.profile-showcase-lock {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.78rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  pointer-events: none;
}
.profile-showcase-icon {
  font-size: 1.7rem;
  line-height: 1;
}
.profile-showcase-name {
  font-size: 0.74rem;
  line-height: 1.15;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.profile-showcase-badge.selected .profile-showcase-name {
  color: #fff;
}
@media (max-width: 480px) {
  .profile-showcase-grid.profile-showcase-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
  }
  .profile-showcase-badge {
    padding: 10px 6px;
    border-radius: 12px;
  }
  .profile-showcase-icon { font-size: 1.4rem; }
  .profile-showcase-name { font-size: 0.7rem; }
}

/* ─────────────────────────────────────────────────────────────────────
 * v76.1 — Rich Premium overlay for headline sections (AI search)
 * Used by `.ai-section[data-tier-required="premium"][data-tier-rich="1"]`.
 * Falls back gracefully on small screens.
 * ───────────────────────────────────────────────────────────────────── */
.ai-section.tier-locked {
  /* Keep the section's own gradient/glass background visible behind the
     blurred children so the lock overlay reads as a layered "glass shelf". */
  isolation: isolate;
}
.ai-section.tier-locked > *:not(.tier-locked-banner) {
  filter: blur(3.5px) grayscale(0.45) brightness(0.85);
  opacity: 0.45;
}
.tier-locked-banner-rich {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
  gap: 12px !important;
  padding: 28px 24px !important;
  text-align: center !important;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(168,85,247,0.28), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(236,72,153,0.22), transparent 55%),
    linear-gradient(135deg, rgba(15,12,30,0.86), rgba(30,18,55,0.86)) !important;
  border: 1px solid rgba(168,85,247,0.45) !important;
  border-radius: 20px !important;
  box-shadow:
    0 18px 50px rgba(124,58,237,0.30),
    inset 0 0 60px rgba(236,72,153,0.10) !important;
  overflow: hidden;
}
.tier-locked-banner-rich:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(168,85,247,0.85) !important;
  box-shadow:
    0 24px 64px rgba(124,58,237,0.40),
    inset 0 0 80px rgba(236,72,153,0.16) !important;
}
.tier-locked-banner-glow {
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(from 0deg,
      rgba(168,85,247,0.0) 0deg,
      rgba(168,85,247,0.35) 80deg,
      rgba(236,72,153,0.32) 160deg,
      rgba(168,85,247,0.0) 240deg,
      rgba(168,85,247,0.0) 360deg);
  filter: blur(38px);
  z-index: 0;
  pointer-events: none;
  animation: tierLockGlowSpin 14s linear infinite;
  opacity: 0.65;
}
@keyframes tierLockGlowSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.tier-locked-banner-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.tier-spark {
  position: absolute;
  font-size: 1rem;
  color: #fde68a;
  filter: drop-shadow(0 0 6px rgba(253,224,71,0.7));
  animation: tierSparkPulse 2.6s ease-in-out infinite;
}
.tier-spark-1 { top: 14%; left: 12%; animation-delay: 0s; }
.tier-spark-2 { top: 22%; right: 14%; animation-delay: 0.6s; font-size: 0.85rem; }
.tier-spark-3 { bottom: 24%; left: 22%; animation-delay: 1.2s; font-size: 0.9rem; }
.tier-spark-4 { bottom: 18%; right: 18%; animation-delay: 1.8s; }
@keyframes tierSparkPulse {
  0%, 100% { transform: scale(0.7) rotate(0deg); opacity: 0.4; }
  50%      { transform: scale(1.15) rotate(180deg); opacity: 1; }
}
.tier-locked-banner-icon-rich {
  position: relative;
  z-index: 2;
  font-size: 2.4rem !important;
  filter: drop-shadow(0 4px 12px rgba(245,158,11,0.55));
  animation: tierLockIconBob 3s ease-in-out infinite;
}
@keyframes tierLockIconBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.tier-locked-banner-rich .tier-locked-banner-text {
  position: relative;
  z-index: 2;
  align-items: center !important;
  max-width: 480px;
}
.tier-locked-banner-title-rich {
  display: inline-block;
  font-size: 1.18rem !important;
  letter-spacing: 0.005em;
  /* Solid warm color with a soft glow — much more reliable than
     background-clip:text inside a PWA shell where clipping sometimes
     paints the entire box. */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
  text-shadow:
    0 0 14px rgba(253, 224, 71, 0.55),
    0 0 28px rgba(244, 114, 182, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.6);
}
.tier-locked-banner-sub {
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
  margin-top: 2px;
}
.tier-locked-banner-cta-rich {
  position: relative;
  z-index: 2;
  margin-top: 6px;
  padding: 11px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.01em;
  box-shadow:
    0 10px 28px rgba(139,92,246,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tier-locked-banner-rich:hover .tier-locked-banner-cta-rich {
  transform: translateY(-1px);
  box-shadow:
    0 14px 36px rgba(139,92,246,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
@media (max-width: 540px) {
  .tier-locked-banner-rich { padding: 22px 16px !important; gap: 10px !important; }
  .tier-locked-banner-icon-rich { font-size: 2rem !important; }
  .tier-locked-banner-title-rich { font-size: 1.04rem !important; }
  .tier-locked-banner-sub { font-size: 0.78rem; }
  .tier-locked-banner-cta-rich { padding: 9px 18px; font-size: 0.85rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────
 * v76.1 — "Report a bug" floating button → Telegram support bot.
 * Sits next to the existing scroll-top / feedback FABs at bottom-left.
 * Always visible for all users (including guests) so any bug is one tap
 * away from being reported.
 * ───────────────────────────────────────────────────────────────────── */
.bug-report-fab {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 10px 24px rgba(239,68,68,0.35),
    inset 0 1px 0 rgba(255,255,255,0.22);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  overflow: visible;
}
.bug-report-fab:hover,
.bug-report-fab:focus-visible {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 14px 32px rgba(239,68,68,0.5),
    inset 0 1px 0 rgba(255,255,255,0.28);
  outline: none;
  filter: brightness(1.08);
}
.bug-report-fab svg { width: 22px; height: 22px; }
.bug-report-fab::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(239,68,68,0.5), rgba(249,115,22,0.5));
  filter: blur(8px);
  opacity: 0.55;
  z-index: -1;
  animation: bugFabPulse 2.6s ease-in-out infinite;
}
@keyframes bugFabPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.08); }
}
.bug-report-fab .bug-report-fab-tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(15,12,30,0.94);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.bug-report-fab:hover .bug-report-fab-tip,
.bug-report-fab:focus-visible .bug-report-fab-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}
@media (max-width: 540px) {
  .bug-report-fab { width: 40px; height: 40px; }
  .bug-report-fab svg { width: 20px; height: 20px; }
  .bug-report-fab .bug-report-fab-tip { display: none; }
}

/* "Found a bug?" link inline in the footer — gives the same Telegram bot a
 * second, less floaty entry point so the user can always find it. */
.footer-bug-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fca5a5;
}
.footer-bug-link:hover { color: #fecaca; }

/* (Legacy .live-bar-clickable styles removed — handled inline by the v2
 * LIVE BAR rules at the top of this stylesheet.) */

/* ---------------------------------------------------------------
 * Recent Picks Modal (opened from the live-bar).
 * --------------------------------------------------------------- */
.recent-picks-modal-content {
  max-width: 720px;
  width: 92vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
}
.recent-picks-header {
  margin-bottom: 14px;
  padding-right: 32px;
}
.recent-picks-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 1.35rem;
  line-height: 1.2;
}
.recent-picks-icon { font-size: 1.4rem; }
.recent-picks-sub {
  font-size: 0.82rem;
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
}
.recent-picks-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.recent-picks-filter {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim, rgba(255, 255, 255, 0.7));
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.recent-picks-filter:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.recent-picks-filter.active {
  background: var(--gradient-main, linear-gradient(135deg, #8b5cf6, #ec4899));
  border-color: transparent;
  color: #fff;
}
.recent-picks-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.5) transparent;
}
.recent-picks-list::-webkit-scrollbar { width: 6px; }
.recent-picks-list::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.5);
  border-radius: 999px;
}
.recent-picks-loading,
.recent-picks-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
}
.recent-pick-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
  text-decoration: none;
  color: inherit;
}
.recent-pick-item:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(236, 72, 153, 0.08));
  border-color: rgba(139, 92, 246, 0.45);
  transform: translateY(-1px);
}
.recent-pick-poster {
  width: 76px;
  height: 114px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
}
.recent-pick-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.recent-pick-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.recent-pick-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.recent-pick-year {
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
  font-size: 0.82rem;
}
.recent-pick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
}
.recent-pick-badge {
  font-size: 1.1rem;
  line-height: 1;
}
.recent-pick-rating {
  color: #fde68a;
  font-weight: 600;
}
.recent-pick-time {
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  font-variant-numeric: tabular-nums;
}
.recent-pick-chip {
  font-size: 0.74rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-dim, rgba(255, 255, 255, 0.75));
  white-space: nowrap;
}
.recent-pick-chip.rating {
  background: rgba(250, 204, 21, 0.12);
  border-color: rgba(250, 204, 21, 0.35);
  color: #fde68a;
}
.recent-pick-chip.duration {
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.30);
  color: #bae6fd;
}
.recent-pick-chip.type {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.38);
  color: #ddd6fe;
}
.recent-pick-overview {
  font-size: 0.84rem;
  color: var(--text-dim, rgba(255, 255, 255, 0.75));
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 0;
}
.recent-pick-duration {
  color: #bae6fd;
  font-variant-numeric: tabular-nums;
}
.recent-pick-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.recent-pick-genre {
  font-size: 0.72rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.32);
  color: #ddd6fe;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .recent-pick-item { grid-template-columns: 64px 1fr; }
  .recent-pick-poster { width: 64px; height: 96px; }
  .recent-pick-title { font-size: 0.94rem; }
  .recent-pick-overview { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ============================================================
 * Desktop performance optimizations (v101+).
 * Goal: keep every feature & every animation, just make the page
 * cheaper to paint/composite on big-resolution desktop monitors,
 * where backdrop-filter + many simultaneous animations make Chrome
 * eat CPU. All rules below are scoped to desktop viewports — mobile
 * is already lighter and untouched.
 * ============================================================ */
@media (min-width: 769px) {
  /* 1. Skip painting offscreen cards entirely.
   *    content-visibility: auto tells the browser it can defer
   *    layout+paint for elements outside the viewport. The
   *    contain-intrinsic-size hint keeps scrollbars stable. */
  .trending-row .trending-card,
  .saved-grid > *,
  .results-grid > *,
  .recent-picks-list .recent-pick-item,
  #profile-history-list > *,
  #history-list > * {
    content-visibility: auto;
    contain-intrinsic-size: 280px 320px;
  }
  /* Recent picks rows are wider/shorter — better intrinsic size */
  .recent-picks-list .recent-pick-item {
    contain-intrinsic-size: 660px 110px;
  }
  /* 2. Self-contained components — confine layout / paint costs so
   *    a card animation doesn't invalidate the whole document. */
  .trending-card,
  .saved-grid > *,
  .results-grid > *,
  .recent-pick-item,
  .glass,
  .glass-deep,
  .modal-content {
    contain: layout paint;
  }
  /* 3. Lighter backdrop-filter on desktop. 16-20px blurs are very
   *    expensive when the surface is large (laptop/desktop). Step
   *    everything down to 8-10px — visually almost identical, but
   *    much cheaper on the compositor. */
  .glass-deep,
  .modal-content,
  .toast,
  .ai-section,
  .filters-bar,
  .nav-pill {
    backdrop-filter: blur(10px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
  }
  .glass {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  /* 4. Slow down purely decorative infinite glow/pulse animations
   *    so the GPU has more headroom. Frames are still smooth,
   *    they just don't churn 60fps for an effect nobody stares at. */
  .streak-fire,
  .badge-glow,
  .pulse-ring {
    animation-duration: 4s !important;
  }
  /* 5. Avoid promoting a layer unless really needed. Some
   *    components had `will-change: transform` set "just in case",
   *    which forces a GPU layer per element and balloons VRAM. */
  .trending-card,
  .saved-grid > *,
  .results-grid > *,
  .recent-pick-item,
  .role-badge,
  .profile-role-badge,
  .tier-badge {
    will-change: auto;
  }
  /* 6. Particle canvas at low z so it composites once and never
   *    blocks other paints. */
  #particles-canvas {
    contain: strict;
    pointer-events: none;
  }
}
/* 7. Respect reduced-motion globally — if the user (or the OS) asks
 *    for less motion, kill ALL infinite decorative animations.
 *    Keep transitions short but functional. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * v116 — Home page bottom refresh
 *
 * Brings the duo / support / brand-footer blocks at the bottom of the
 * homepage in line with the rich `quiz-cta-banner` look used elsewhere
 * (Match / Quiz / Wordle promo cards). The default styling read as
 * "тускло" — flat backgrounds with a faint border. Below is a tighter
 * gradient + glow + hover-lift treatment so the bottom of the page
 * feels as alive as the hero. Also fixes a sneaky overflow that made
 * the AI section bleed past the right edge on narrow viewports.
 * ────────────────────────────────────────────────────────────────────── */

/* Overflow guard: keep every section inside the viewport on narrow
   screens (the AI section's glow can spill past 100vw otherwise). */
main.container,
.container,
.ai-section,
.ai-section-premium,
.duo-section,
.movie-night-section,
.support-section {
  max-width: 100%;
  box-sizing: border-box;
}
.ai-section,
.ai-section-premium {
  overflow: hidden;
}

/* Pick Together — was a plain pill. Now a rich gradient banner that
   matches the rest of the site's CTA cards. */
.duo-section {
  display: block;
  padding: 0;
  margin: 24px 0 16px;
}
.duo-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(236, 72, 153, 0.14) 55%, rgba(245, 158, 11, 0.10)) !important;
  border: 1px solid rgba(139, 92, 246, 0.38) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 36px -16px rgba(139, 92, 246, 0.55);
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}
.duo-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 50%, rgba(139, 92, 246, 0.20), transparent 55%),
    radial-gradient(circle at 100% 50%, rgba(236, 72, 153, 0.18), transparent 60%);
  opacity: 0.75;
  pointer-events: none;
  z-index: -1;
}
/* Behave like the support-banner above: no transform on hover/active,
   only a soft background + border shift. Eliminates the iOS "sticky
   hover pop" entirely — because there's literally nothing to stick. */
.duo-btn {
  transition: background .2s ease, border-color .2s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .duo-btn:hover {
    border-color: rgba(236, 72, 153, 0.55) !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.30), rgba(236, 72, 153, 0.20) 55%, rgba(245, 158, 11, 0.14)) !important;
  }
}
.duo-btn:active {
  border-color: rgba(236, 72, 153, 0.7) !important;
}
.duo-btn:focus-visible {
  outline: 2px solid rgba(236, 72, 153, .7);
  outline-offset: 3px;
}
.duo-btn:focus:not(:focus-visible) { outline: none; }
.duo-btn-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.6));
  animation: duoIconPulse 3s ease-in-out infinite;
}
@keyframes duoIconPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.06) rotate(-4deg); }
}
.duo-btn-title {
  flex: 1;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, #fff, #fde68a 50%, #f472b6);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.duo-btn-badge {
  flex-shrink: 0;
  background: linear-gradient(135deg, #f59e0b, #ec4899) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 0.6rem;
  letter-spacing: 0.7px;
  padding: 3px 9px;
  border-radius: 100px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.45);
}

/* Support card — match the same rich CTA look + arrow affordance. */
.support-section {
  margin: 28px 0 18px;
}
.support-card {
  position: relative;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(245, 158, 11, 0.10) 55%, rgba(139, 92, 246, 0.16)) !important;
  border: 1px solid rgba(236, 72, 153, 0.35) !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
  box-shadow: 0 10px 36px -16px rgba(236, 72, 153, 0.55);
  overflow: hidden;
  isolation: isolate;
}
.support-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 50%, rgba(236, 72, 153, 0.20), transparent 55%),
    radial-gradient(circle at 100% 50%, rgba(245, 158, 11, 0.18), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}
/* Same calm hover model as duo-btn: just shift bg + border, no lift. */
.support-card { transition: background .2s ease, border-color .2s ease !important; }
@media (hover: hover) and (pointer: fine) {
  .support-card:hover {
    border-color: rgba(236, 72, 153, 0.55) !important;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.24), rgba(245, 158, 11, 0.14) 55%, rgba(139, 92, 246, 0.20)) !important;
  }
}
.support-card:active {
  border-color: rgba(236, 72, 153, 0.7) !important;
}
.support-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.55));
  animation: duoIconPulse 3s ease-in-out infinite;
}
.support-title {
  background: linear-gradient(135deg, #fff, #fde68a 50%, #f472b6);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}
.support-desc {
  color: rgba(255, 255, 255, 0.75) !important;
}
.support-btn {
  background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4) !important;
}
.support-btn:hover {
  box-shadow: 0 10px 28px rgba(236, 72, 153, 0.55) !important;
}

/* Brand footer — give it real visual weight; was a barely-visible line
   of text before. */
.brand-footer {
  position: relative;
  margin: 24px 0 16px !important;
  padding: 28px 22px !important;
  opacity: 1 !important;
  border-radius: 22px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.14), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(236, 72, 153, 0.12), transparent 60%),
    linear-gradient(135deg, rgba(15, 12, 30, 0.55), rgba(30, 18, 55, 0.55));
  box-shadow: 0 18px 50px -28px rgba(139, 92, 246, 0.45);
  overflow: hidden;
  isolation: isolate;
}
.brand-footer::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), transparent 40%, rgba(236, 72, 153, 0.3));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}
.brand-mascot {
  font-size: 2rem !important;
  display: inline-block;
  filter: drop-shadow(0 0 14px rgba(236, 72, 153, 0.55));
  animation: brandMascotBob 4s ease-in-out infinite;
}
@keyframes brandMascotBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-4px) rotate(3deg); }
}
.brand-quote {
  font-size: 0.95rem !important;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 8px 0 4px !important;
  font-weight: 500 !important;
}
.brand-signature {
  display: inline-block;
  margin-top: 4px;
  background: linear-gradient(135deg, #fde68a, #f472b6, #8b5cf6);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
}

/* AI section — keep the rich glow but tighten responsive sizing so it
   never spills past the viewport. */
@media (max-width: 540px) {
  .ai-section {
    padding: 16px 14px !important;
  }
  .duo-btn {
    padding: 12px 14px;
    gap: 10px;
  }
  .duo-btn-icon {
    font-size: 1.45rem;
  }
  .duo-btn-title {
    font-size: 0.88rem;
  }
  .support-card {
    padding: 14px 14px !important;
  }
  .support-icon {
    font-size: 1.65rem;
  }
  .brand-footer {
    padding: 22px 16px !important;
  }
  .brand-mascot {
    font-size: 1.65rem !important;
  }
  .brand-quote {
    font-size: 0.85rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * v118 — Mid-page polish (mood / filters / saved / collections)
 *
 * Top of page (hero, banners, AI) was rich and animated, but everything
 * between AI section and the bottom CTA banners read as flat. Restrained
 * touches that boost depth without overdoing it:
 *  - section titles get a soft animated glow
 *  - mood/filter/saved glass-deep cards get a faint accent gradient
 *    bar on the left edge and a hover-lift
 *  - the AI section's premium ribbon gets a small idle shimmer
 *
 * Everything here is purely cosmetic; no JS touch.
 * ────────────────────────────────────────────────────────────────────── */

/* Section title — subtle pulse on the glow so it feels alive without
   distracting from the content below it. */
.section-title .title-glow {
  animation: sectionTitleGlow 6s ease-in-out infinite;
}
@keyframes sectionTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(236, 72, 153, 0)); }
  50%      { filter: drop-shadow(0 0 12px rgba(236, 72, 153, .35)); }
}

/* v122 — Removed left-edge RGB gradient stripe per user request.
   Sections now rely on their own background/border for separation. */
.mood-section,
.filters-section.glass-deep,
.saved-section.glass-deep,
.collections-section.glass-deep {
  position: relative;
}
.mood-section::before,
.filters-section.glass-deep::before,
.saved-section.glass-deep::before,
.collections-section.glass-deep::before {
  display: none !important;
  content: none !important;
}
.filters-section.glass-deep,
.saved-section.glass-deep,
.collections-section.glass-deep {
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.filters-section.glass-deep:hover,
.saved-section.glass-deep:hover,
.collections-section.glass-deep:hover {
  border-color: rgba(236, 72, 153, .32);
  box-shadow: 0 18px 50px -30px rgba(139, 92, 246, .55);
}

/* Mood section — give the grid items a soft depth on hover so the
   block feels as interactive as the genre chips at the top. */
.mood-grid .mood-item,
.mood-grid > * {
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.mood-grid .mood-item:hover,
.mood-grid > *:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px rgba(139, 92, 246, .45);
}

/* AI section — gentle premium-ribbon shimmer so the section's
   ambient state isn't dead between user interactions. */
.ai-section .ai-badge {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ai-section .ai-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: aiBadgeShine 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aiBadgeShine {
  0%, 18%   { transform: translateX(-120%); }
  35%       { transform: translateX(120%); }
  100%      { transform: translateX(120%); }
}

/* AI mood picker chips — match the same gradient hover look the top-of-
   page chip cards use, so the AI block doesn't drop dead halfway down. */
.ai-mood-option {
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.ai-mood-option:hover {
  transform: translateY(-1px);
  border-color: rgba(236, 72, 153, .45);
  background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(236, 72, 153, .08));
  box-shadow: 0 8px 20px -12px rgba(236, 72, 153, .45);
}

/* ──────────────────────────────────────────────────────────────────────
 * v119 — Section differentiation + AI section ambient + support banner
 *
 * 1. Make the stacked items (Збережене, Колекції, Підбір разом, Підтримати)
 *    each visually distinct so the bottom of the page reads as separate
 *    cards rather than one long ribbon.
 * 2. Give the AI section a bit more ambient life (subtle sparkles, soft
 *    grain) — it felt unfinished compared to hero / banners.
 * 3. Make sure the inline support-banner reads as a clear CTA.
 * ────────────────────────────────────────────────────────────────────── */

/* v122 — Left-edge accent stripes removed entirely per user request. */
.saved-section.glass-deep::before,
.collections-section.glass-deep::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Tint each card subtly to match its accent — keeps the gradients but
   biases the dominant hue so they don't all read the same. */
.saved-section.glass-deep {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(239, 68, 68, .10), transparent 55%),
    linear-gradient(135deg, rgba(15, 12, 30, .55), rgba(30, 18, 30, .55)) !important;
  border-color: rgba(239, 68, 68, .18) !important;
}
.collections-section.glass-deep {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(245, 158, 11, .10), transparent 55%),
    linear-gradient(135deg, rgba(15, 12, 30, .55), rgba(30, 22, 18, .55)) !important;
  border-color: rgba(245, 158, 11, .18) !important;
}

/* Section icon hue per card — uses the icon's intrinsic color tone but
   reinforces the section identity. */
.saved-section .section-title::before,
.collections-section .section-title::before { display: none; }
.saved-section .title-glow {
  background: linear-gradient(135deg, #fca5a5, #f43f5e 60%, #be123c) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.collections-section .title-glow {
  background: linear-gradient(135deg, #fde68a, #f59e0b 60%, #c2410c) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ── AI section ambient ── */
.ai-section {
  position: relative;
}
/* Sparkle layer — small twinkling dots that drift in via opacity only,
   so we don't pay for animated layout. */
.ai-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 22%, rgba(253, 224, 71, .65), transparent 55%),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(244, 114, 182, .55), transparent 55%),
    radial-gradient(1.5px 1.5px at 42% 78%, rgba(196, 181, 253, .55), transparent 55%),
    radial-gradient(1px 1px at 88% 64%, rgba(253, 224, 71, .55), transparent 55%),
    radial-gradient(1px 1px at 22% 58%, rgba(244, 114, 182, .55), transparent 55%);
  background-size: 100% 100%;
  animation: aiSparkleTwinkle 5.5s ease-in-out infinite;
  opacity: .7;
}
.ai-section > * { position: relative; z-index: 1; }
@keyframes aiSparkleTwinkle {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50%      { opacity: .9;  transform: translateY(-1px); }
}
/* A thin gradient ribbon along the top edge so the section reads as a
   dedicated "smart" surface, not just another panel. */
.ai-section.glass-deep {
  border-image: linear-gradient(90deg, rgba(245, 158, 11, .55), rgba(236, 72, 153, .45), rgba(139, 92, 246, .55)) 1;
  border-top: 2px solid transparent;
}

/* ── Support banner up top (Знайшов баг…) ── */
.support-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(236, 72, 153, .08) 55%, rgba(139, 92, 246, .10)) !important;
  border-color: rgba(245, 158, 11, .28) !important;
  font-weight: 600;
}
.support-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f59e0b, #ec4899);
  pointer-events: none;
}
.support-banner-icon {
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, .55));
}
.support-banner-text {
  /* Fallback: if i18n wipes the key, the inline UK string in HTML
     stays visible; we also use a sane font-weight so it's clearly the
     primary text in the bar. */
  font-weight: 600 !important;
  color: rgba(255, 255, 255, .92) !important;
}
@media (hover: hover) and (pointer: fine) {
  .support-banner:hover {
    background:
      linear-gradient(135deg, rgba(245, 158, 11, .20), rgba(236, 72, 153, .14) 55%, rgba(139, 92, 246, .18)) !important;
    border-color: rgba(245, 158, 11, .55) !important;
    transform: translateY(-1px);
  }
}
.support-banner:active {
  transform: translateY(1px);
  transition: transform .08s ease;
}

/* Ensure all 4 stacked bottom cards no longer fight on focus rings on
   mobile (Safari adds default tap highlight). */
.duo-btn, .support-card, .saved-section, .collections-section, .support-banner {
  -webkit-tap-highlight-color: rgba(236, 72, 153, .18);
}

/* ──────────────────────────────────────────────────────────────────────
 * v121 — Pick Together mobile lift fix + Saved/Collections animations
 *        + Support card recoloured (warm gradient → cool emerald/teal).
 *
 * 1. Pick Together button on iOS used to "pop out" on tap because the
 *    legacy `.duo-btn:hover { transform: translateY(-2px) }` lived
 *    outside a (hover: hover) media query, so the sticky :hover state
 *    after touchend fired it. Already wrapped above. Belt-and-braces
 *    override here so any future stylesheet appended after this can't
 *    re-introduce the bug.
 *
 * 2. Saved and Collections cards now feel "alive": each gets a slow
 *    icon breath, a soft sheen sweep that runs on hover/tap, a tiny
 *    scale on press for haptic-feeling feedback, and the count badge
 *    gently pulses so the section reads as interactive.
 *
 * 3. Support card had three warm gradients fighting each other on the
 *    dark background. Recoloured to an emerald → teal → cyan palette
 *    that contrasts the rest of the page and reads cleanly as a
 *    "support / donation" CTA without competing with the brand pink.
 * ────────────────────────────────────────────────────────────────────── */

/* ── 1. Pick Together: never translate, anywhere ─────────────────────── */

/* ── 2. Saved + Collections animations ────────────────────────────────── */

/* Section icon (❤️ / 📂) — slow, calm breath. Sits inside .saved-title
   and .collections-title-row as the first <span>. */
.saved-title > span:first-child,
.collections-title-row > span:first-child {
  display: inline-block;
  transform-origin: center;
  animation: picksyCardIconBreath 3.4s ease-in-out infinite;
  will-change: transform, filter;
}
.collections-title-row > span:first-child {
  animation-delay: .7s;
}
@keyframes picksyCardIconBreath {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  50% {
    transform: scale(1.08) rotate(-3deg);
    filter: drop-shadow(0 0 6px rgba(236, 72, 153, .35));
  }
}
.collections-title-row > span:first-child {
  animation-name: picksyCardIconBreathFolder;
}
@keyframes picksyCardIconBreathFolder {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  50% {
    transform: scale(1.08) rotate(3deg);
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, .40));
  }
}

/* Count badge — soft idle pulse so it reads as "live". */
.saved-count,
.collections-count {
  animation: picksyBadgePulse 2.8s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.collections-count { animation-delay: 1.1s; }
@keyframes picksyBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(236, 72, 153, .0);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 14px 0 rgba(236, 72, 153, .35);
  }
}

/* Header rows feel pressable now. */
.saved-header,
.collections-header {
  position: relative;
  transition: background .25s ease, transform .15s ease;
}
.saved-header:active,
.collections-header:active {
  transform: scale(.985);
}
@media (hover: hover) and (pointer: fine) {
  .saved-header:hover,
  .collections-header:hover {
    background: rgba(255, 255, 255, .02);
  }
}

/* Sheen sweep — a single soft gradient that slides left → right on
   hover/tap. Cheap (transform only) and gives the cards "presence". */
.saved-section.glass-deep,
.collections-section.glass-deep {
  position: relative;
  overflow: hidden;
}
.saved-section.glass-deep > .picksy-sheen,
.collections-section.glass-deep > .picksy-sheen { display: none; } /* not used yet */
.saved-section.glass-deep::after,
.collections-section.glass-deep::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, .07) 50%,
    transparent 65%,
    transparent 100%);
  transform: translateX(-130%);
  pointer-events: none;
  z-index: 2;
  transition: transform .9s cubic-bezier(.22, .9, .32, 1);
}
.saved-section.glass-deep:hover::after,
.collections-section.glass-deep:hover::after,
.saved-section.glass-deep:focus-within::after,
.collections-section.glass-deep:focus-within::after {
  transform: translateX(230%);
}
/* On touch devices: trigger the sheen briefly on tap via :active. */
@media (hover: none), (pointer: coarse) {
  .saved-section.glass-deep:active::after,
  .collections-section.glass-deep:active::after {
    transform: translateX(230%);
    transition: transform 1.1s cubic-bezier(.22, .9, .32, 1);
  }
}

/* Subtle border-tint shift on hover — uses each section's accent hue. */
@media (hover: hover) and (pointer: fine) {
  .saved-section.glass-deep:hover {
    border-color: rgba(244, 63, 94, .42) !important;
    box-shadow: 0 18px 50px -28px rgba(244, 63, 94, .45);
  }
  .collections-section.glass-deep:hover {
    border-color: rgba(245, 158, 11, .42) !important;
    box-shadow: 0 18px 50px -28px rgba(245, 158, 11, .45);
  }
}

/* Plus button inside Collections — emphasise on idle so users discover it. */
.collections-create-btn {
  animation: picksyPlusGlow 2.4s ease-in-out infinite;
  will-change: box-shadow;
}
@keyframes picksyPlusGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .0); }
  50%      { box-shadow: 0 0 18px 2px rgba(245, 158, 11, .35); }
}

/* Honour reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .saved-title > span:first-child,
  .collections-title-row > span:first-child,
  .saved-count,
  .collections-count,
  .collections-create-btn {
    animation: none !important;
  }
  .saved-section.glass-deep::after,
  .collections-section.glass-deep::after {
    display: none !important;
  }
}

/* ── 3. Support card recolour: warm → cool (emerald / teal / cyan) ───── */

/* Re-paint the v120 support-card with !important to win over the v120
   block above. */
.support-card,
.support-section .support-card {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.16),
    rgba(20, 184, 166, 0.10) 50%,
    rgba(56, 189, 248, 0.12)) !important;
  border: 1px solid rgba(16, 185, 129, 0.32) !important;
  box-shadow: 0 12px 38px -16px rgba(20, 184, 166, 0.55) !important;
}
.support-card::before {
  background:
    radial-gradient(circle at 0% 50%, rgba(16, 185, 129, 0.22), transparent 55%),
    radial-gradient(circle at 100% 50%, rgba(56, 189, 248, 0.20), transparent 60%) !important;
  opacity: 0.75 !important;
}
@media (hover: hover) and (pointer: fine) {
  .support-card:hover {
    border-color: rgba(56, 189, 248, 0.55) !important;
    background: linear-gradient(135deg,
      rgba(16, 185, 129, 0.24),
      rgba(20, 184, 166, 0.16) 50%,
      rgba(56, 189, 248, 0.20)) !important;
  }
}
.support-card:active {
  border-color: rgba(56, 189, 248, 0.7) !important;
}
.support-icon {
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, .55)) !important;
}
.support-title {
  background: linear-gradient(135deg, #fff, #a7f3d0 50%, #67e8f9) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.support-btn {
  background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(20, 184, 166, 0.45) !important;
  border: none !important;
  transition: box-shadow .25s ease, transform .15s ease, background .25s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .support-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(20, 184, 166, 0.55) !important;
    background: linear-gradient(135deg, #34d399 0%, #2dd4bf 50%, #22d3ee 100%) !important;
  }
}
.support-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.40) !important;
}

/* v122 — Stripe removed globally. Keep this rule disabled. */
.support-section.glass-deep::before {
  display: none !important;
  content: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .support-btn:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 * v122 — Design refresh: soft pink support, refined filters,
 * modernised guest badge, prettier saved heart, mobile-safe duo modal.
 * Final overrides — appended last so they win the cascade.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Support button → soft pink (heart-emoji palette) ── */
.support-card,
.support-section .support-card {
  background: linear-gradient(135deg,
    rgba(244, 114, 182, 0.16),
    rgba(251, 207, 232, 0.10) 50%,
    rgba(236, 72, 153, 0.14)) !important;
  border: 1px solid rgba(244, 114, 182, 0.32) !important;
  box-shadow: 0 12px 38px -16px rgba(244, 114, 182, 0.55) !important;
}
.support-card::before {
  background:
    radial-gradient(circle at 0% 50%, rgba(244, 114, 182, 0.22), transparent 55%),
    radial-gradient(circle at 100% 50%, rgba(251, 207, 232, 0.20), transparent 60%) !important;
  opacity: 0.7 !important;
}
@media (hover: hover) and (pointer: fine) {
  .support-card:hover {
    border-color: rgba(244, 114, 182, 0.55) !important;
    background: linear-gradient(135deg,
      rgba(244, 114, 182, 0.24),
      rgba(251, 207, 232, 0.16) 50%,
      rgba(236, 72, 153, 0.20)) !important;
  }
}
.support-card:active {
  border-color: rgba(244, 114, 182, 0.72) !important;
}
.support-icon {
  filter: drop-shadow(0 0 12px rgba(244, 114, 182, .65)) !important;
}
.support-title {
  background: linear-gradient(135deg, #fff, #fce7f3 45%, #f9a8d4) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.support-btn {
  background: linear-gradient(135deg, #f9a8d4 0%, #f472b6 50%, #ec4899 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(244, 114, 182, 0.55) !important;
  border: none !important;
  transition: box-shadow .25s ease, transform .15s ease, background .25s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .support-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(244, 114, 182, 0.65) !important;
    background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 50%, #f472b6 100%) !important;
  }
}
.support-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(244, 114, 182, 0.50) !important;
}

/* ── Filters section: more refined, modern look ── */
.filters-section.glass-deep {
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(236, 72, 153, 0.04)),
    linear-gradient(180deg, rgba(20, 14, 32, .55), rgba(15, 12, 28, .55)) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 32px -22px rgba(139, 92, 246, 0.45) !important;
}
.filters-section.glass-deep:hover {
  border-color: rgba(139, 92, 246, 0.36) !important;
  box-shadow: 0 16px 44px -22px rgba(139, 92, 246, 0.55) !important;
}
.filters-header {
  padding: 14px 18px !important;
}
.filters-title {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
.filters-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(236, 72, 153, 0.16));
  border: 1px solid rgba(139, 92, 246, 0.32);
  box-shadow: 0 0 12px -4px rgba(139, 92, 246, 0.55);
  font-size: 1rem !important;
}
.filters-section.open .filters-icon {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(236, 72, 153, 0.25));
  border-color: rgba(236, 72, 153, 0.5);
}
.reset-filters-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  align-items: center;
  justify-content: center;
}
.reset-filters-btn:hover {
  background: rgba(139, 92, 246, 0.18) !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
  color: var(--accent) !important;
  transform: rotate(-60deg);
}
.filters-section.glass-deep .chevron {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.filters-section.glass-deep.open .chevron {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.35);
}
.filters-section.glass-deep .filters-body {
  border-top: 1px solid rgba(139, 92, 246, 0.10);
}
.filter-row label {
  font-weight: 600 !important;
  color: var(--text) !important;
  opacity: 0.85;
}
.filter-row .filter-emoji {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  margin-right: 4px;
  font-size: 0.95rem;
}
.glass-select {
  background: rgba(20, 14, 28, 0.55) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.glass-select:hover,
.glass-select:focus {
  border-color: rgba(236, 72, 153, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15) !important;
}

/* ── Guest picks badge: modernised pill (no more boring "Гість 6/6") ── */
.guest-picks-badge {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 7px 14px 7px 12px !important;
  border-radius: 100px !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(236, 72, 153, 0.12)) !important;
  border: 1px solid rgba(139, 92, 246, 0.32) !important;
  color: #e9d5ff !important;
  box-shadow: 0 4px 14px -6px rgba(139, 92, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px !important;
  letter-spacing: 0.01em;
  transition: all .25s var(--ease);
}
.guest-picks-badge::before {
  content: "🎬";
  font-size: 0.95rem;
  filter: drop-shadow(0 0 6px rgba(236, 72, 153, .55));
}
.guest-picks-badge.warning {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(244, 114, 182, 0.14)) !important;
  border-color: rgba(251, 146, 60, 0.45) !important;
  color: #fed7aa !important;
}
.guest-picks-badge.warning::before {
  content: "⏳";
}
.guest-picks-badge.exhausted {
  background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
  border-color: rgba(236, 72, 153, 0.7) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(236, 72, 153, 0.45) !important;
}
.guest-picks-badge.exhausted::before {
  content: "✨";
}
/* The badge is always a registration CTA — make that obvious */
.guest-picks-badge {
  cursor: pointer !important;
}
.guest-picks-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(236, 72, 153, 0.45) !important;
  box-shadow: 0 6px 18px rgba(236, 72, 153, 0.22);
}
.guest-picks-badge:active {
  transform: translateY(0) scale(0.98);
}

/* ── Saved icon: animated sparkle, much nicer than flat heart ── */
.saved-title-icon {
  display: inline-block;
  font-size: 1.15rem;
  filter: drop-shadow(0 0 10px rgba(244, 114, 182, .65));
  animation: savedSparkle 3.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes savedSparkle {
  0%, 100% { transform: rotate(0deg) scale(1);   filter: drop-shadow(0 0 8px  rgba(244, 114, 182, .55)); }
  25%      { transform: rotate(8deg)  scale(1.08); filter: drop-shadow(0 0 14px rgba(236, 72, 153, .75)); }
  50%      { transform: rotate(-6deg) scale(1.04); filter: drop-shadow(0 0 10px rgba(168, 85, 247, .65)); }
  75%      { transform: rotate(4deg)  scale(1.10); filter: drop-shadow(0 0 14px rgba(244, 114, 182, .75)); }
}
.fab-item-icon {
  filter: drop-shadow(0 0 8px rgba(244, 114, 182, .55));
}
.saved-title {
  letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
  .saved-title-icon { animation: none; }
}

/* ── Mood section: small layout polish without stripe ── */
.mood-section .section-title {
  padding-left: 2px;
}

/* ── Pick Together "Підбір разом" — mobile overflow guard ── */
.duo-section {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
}
.duo-btn {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.duo-btn-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Duo modal — clamp to viewport on mobile so it never spills */
.duo-modal-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .duo-modal-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 22px 16px !important;
    border-radius: 22px !important;
  }
  .duo-code-value {
    font-size: 1.6rem !important;
    letter-spacing: 0.22em !important;
    word-break: break-all;
  }
  .duo-actions,
  .duo-join-row {
    flex-wrap: wrap;
  }
  .duo-actions .duo-action-btn,
  .duo-join-row .duo-action-btn {
    min-width: 0;
  }
  .duo-movie-poster {
    width: 120px !important;
    height: 180px !important;
  }
}

/* ─── v76.9: Duo result polish — meta chips, scrollable overview, Telegram button ─── */
.duo-movie-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 4px 0 14px;
}
.duo-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.1;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  white-space: nowrap;
}
.duo-meta-chip.type {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.35);
  color: var(--accent-light);
}
.duo-meta-chip.rating {
  background: rgba(250, 204, 21, 0.12);
  border-color: rgba(250, 204, 21, 0.32);
  color: #facc15;
}
.duo-meta-chip.genre {
  background: rgba(6, 214, 160, 0.10);
  border-color: rgba(6, 214, 160, 0.28);
  color: var(--accent3);
}

/* Overview now lives in a scrollable wrap so long synopses are fully readable
   without breaking the card layout. */
.duo-movie-overview-wrap {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 14px;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.55) transparent;
}
.duo-movie-overview-wrap::-webkit-scrollbar {
  width: 6px;
}
.duo-movie-overview-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.duo-movie-overview-wrap::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.45);
  border-radius: 100px;
}
.duo-movie-overview-wrap .duo-movie-overview {
  margin-bottom: 0;
}

/* New: whole result card is clickable -> opens /descmovie or /desctv */
.duo-movie-card-clickable {
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.duo-movie-card-clickable:hover,
.duo-movie-card-clickable:focus-visible {
  transform: translateY(-2px);
  background: rgba(139, 92, 246, 0.07);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.18);
  outline: none;
}
.duo-movie-card-clickable:active {
  transform: translateY(0);
}

/* Telegram analysis button — distinct from primary/secondary actions */
.duo-action-btn.tg {
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(34, 158, 217, 0.35);
  text-decoration: none;
}
.duo-action-btn.tg:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(34, 158, 217, 0.45);
}
.duo-action-btn.tg .duo-tg-icon {
  font-size: 1.05em;
}

@media (max-width: 600px) {
  .duo-movie-overview-wrap {
    max-height: 200px;
  }
  .duo-result-actions .duo-action-btn {
    flex: 1 1 100%;
  }
}

/* ── Brand quote: subtle fade animation hook for rotating quotes ── */
.brand-quote {
  transition: opacity .35s ease, transform .35s ease;
}
.brand-quote.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}


/* ============================================================================
   v123 — Picksy AI helper in the auth modal.
   The mascot has 4 states (data-state on container reflects the class):
     .is-idle    — neutral purple "Picksy is here to help"
     .is-typing  — animated dots while a request is in flight
     .is-success — emerald/green confirmation
     .is-error   — soft pink/red with cause + recovery hint
   The box is intentionally pillow-soft (rounded, glassy) so it reads
   as a friendly cinema mascot, not a system alert.
   ========================================================================= */
.auth-mascot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: -4px 0 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(167, 139, 250, .14), rgba(236, 72, 153, .08) 60%, rgba(99, 102, 241, .14));
  border: 1px solid rgba(167, 139, 250, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 8px 24px rgba(99, 102, 241, .12);
  position: relative;
  overflow: hidden;
  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}
.auth-mascot::before {
  /* subtle inner glow that we recolor per state */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 0% 0%, rgba(167, 139, 250, .25), transparent 60%);
  opacity: .9;
  transition: background .35s ease;
}
.auth-mascot-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), rgba(167, 139, 250, .35) 60%, rgba(99, 102, 241, .55));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .25),
    0 6px 14px rgba(99, 102, 241, .35);
  transition: background .35s ease, box-shadow .35s ease;
  align-self: flex-start;
}
.auth-mascot-face {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(99, 102, 241, .45));
  transition: filter .35s ease;
  font-size: 30px;          /* emoji fallback size if mascot.js fails to load */
  line-height: 1;
}
/* The Picksy SVG mascot (rendered by mascot.js) lives inside the face box.
   Strip its built-in halo/drop-shadow so it sits cleanly inside the small
   auth-mascot-avatar disc, and let it fill the 56px square. */
.auth-mascot-face .picksy-mascot {
  gap: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-mascot-face .picksy-figure {
  width: 84% !important;
  height: 84% !important;
  filter: none;
  animation: none;
  transform-origin: center center;
}
.auth-mascot-face .picksy-figure::before {
  display: none;            /* hide the big conic-gradient halo */
}
.auth-mascot-face .picksy-figure svg {
  width: 100%;
  height: 100%;
}
.auth-mascot-avatar {
  /* Crop the mascot to a clean circle so it never overflows the disc. The
     soft tint behind blends with the mascot's purple/pink palette. */
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .22), rgba(167, 139, 250, .28) 55%, rgba(99, 102, 241, .32));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    0 6px 14px rgba(99, 102, 241, .3);
}
.auth-mascot.is-typing .auth-mascot-face {
  filter: drop-shadow(0 4px 12px rgba(167, 139, 250, .65));
  animation: authMascotBob 1.6s ease-in-out infinite;
}
.auth-mascot.is-success .auth-mascot-face {
  filter: drop-shadow(0 4px 14px rgba(16, 185, 129, .7));
  animation: authMascotPop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.auth-mascot.is-success .auth-mascot-avatar {
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .28),
                    rgba(16, 185, 129, .35) 55%, rgba(5, 150, 105, .45));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .25),
    0 6px 18px rgba(16, 185, 129, .45);
}
.auth-mascot.is-error .auth-mascot-face {
  filter: drop-shadow(0 4px 14px rgba(244, 63, 94, .7));
  animation: authMascotShake .5s cubic-bezier(.36, .07, .19, .97) both;
}
.auth-mascot.is-error .auth-mascot-avatar {
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .25),
                    rgba(244, 63, 94, .35) 55%, rgba(190, 18, 60, .45));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    0 6px 16px rgba(244, 63, 94, .45);
}
@keyframes authMascotBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes authMascotPop {
  0%   { transform: scale(.7); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes authMascotShake {
  10%, 90% { transform: translateX(-1.5px); }
  20%, 80% { transform: translateX(2.5px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* ── \"PICKSY AI\" name with the AI part styled as a tiny gradient badge. ── */
.auth-mascot-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auth-mascot-name-brand {
  background: linear-gradient(90deg, #f5f3ff, #e9d5ff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.auth-mascot-name-ai {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px 2px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  background:
    linear-gradient(135deg, rgba(167, 139, 250, .95), rgba(236, 72, 153, .95) 55%, rgba(99, 102, 241, .95));
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .25) inset,
    0 6px 14px rgba(167, 139, 250, .45),
    0 0 18px rgba(236, 72, 153, .35);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .35s ease, background .35s ease;
}
.auth-mascot-name-ai::before {
  /* moving sheen on the badge */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  mix-blend-mode: screen;
  transform: translateX(-110%);
  animation: authAiSheen 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.auth-mascot-name-ai-text {
  position: relative;
  z-index: 2;
}
.auth-mascot-name-ai-spark {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 10px rgba(255, 255, 255, .8);
  animation: authAiSpark 1.6s ease-in-out infinite;
}
@keyframes authAiSheen {
  0%   { transform: translateX(-110%); }
  55%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
@keyframes authAiSpark {
  0%, 100% { transform: scale(1);   opacity: .9; }
  50%      { transform: scale(1.4); opacity: 1; }
}
.auth-mascot.is-success .auth-mascot-name-ai {
  background: linear-gradient(135deg, rgba(16, 185, 129, .95), rgba(45, 212, 191, .95) 55%, rgba(34, 197, 94, .95));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .25) inset,
    0 6px 14px rgba(16, 185, 129, .55),
    0 0 18px rgba(45, 212, 191, .4);
}
.auth-mascot.is-error .auth-mascot-name-ai {
  background: linear-gradient(135deg, rgba(244, 114, 182, .95), rgba(251, 113, 133, .95) 55%, rgba(239, 68, 68, .95));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .25) inset,
    0 6px 14px rgba(244, 63, 94, .5),
    0 0 18px rgba(244, 114, 182, .4);
}
@media (prefers-reduced-motion: reduce) {
  .auth-mascot-name-ai::before,
  .auth-mascot-name-ai-spark {
    animation: none !important;
  }
}
.auth-mascot-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, .55);
  opacity: 0;
  animation: authMascotPulse 2.4s ease-out infinite;
}
.auth-mascot-body {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.auth-mascot-name {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: 4px;
  transition: color .35s ease;
}
.auth-mascot-text {
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .92);
  white-space: pre-line;          /* allow \n in reason + hint */
  word-wrap: break-word;
  transition: color .35s ease;
}

/* ── State: typing ── */
.auth-mascot.is-typing .auth-mascot-face {
  animation: authMascotWobble 1.4s ease-in-out infinite;
}
/* Also wobble the SVG mascot inside (mascot.js otherwise has its own
   "thinking" bob — we override here to keep the auth modal vocabulary
   consistent with the rest of the modal). */
.auth-mascot.is-typing .auth-mascot-face .picksy-figure {
  animation: authMascotWobble 1.4s ease-in-out infinite !important;
}

/* ── State: success (emerald) ── */
.auth-mascot.is-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, .18), rgba(34, 197, 94, .10) 55%, rgba(20, 184, 166, .14));
  border-color: rgba(16, 185, 129, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 10px 28px rgba(16, 185, 129, .22);
  animation: authMascotPop .45s cubic-bezier(.16, 1, .3, 1);
}
.auth-mascot.is-success::before {
  background: radial-gradient(120% 80% at 0% 0%, rgba(16, 185, 129, .35), transparent 60%);
}
.auth-mascot.is-success .auth-mascot-avatar {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), rgba(52, 211, 153, .55) 55%, rgba(16, 185, 129, .8));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    0 6px 16px rgba(16, 185, 129, .55);
}
.auth-mascot.is-success .auth-mascot-name {
  color: #6ee7b7;
}
.auth-mascot.is-success .auth-mascot-face {
  animation: authMascotPop .55s cubic-bezier(.16, 1, .3, 1);
}

/* ── State: error (soft red/pink — gentle, not aggressive) ── */
.auth-mascot.is-error {
  background: linear-gradient(135deg, rgba(244, 114, 182, .18), rgba(251, 113, 133, .10) 55%, rgba(239, 68, 68, .12));
  border-color: rgba(244, 114, 182, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 10px 28px rgba(244, 63, 94, .22);
  animation: authMascotShake .5s cubic-bezier(.36, .07, .19, .97);
}
.auth-mascot.is-error::before {
  background: radial-gradient(120% 80% at 0% 0%, rgba(244, 114, 182, .35), transparent 60%);
}
.auth-mascot.is-error .auth-mascot-avatar {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .3), rgba(251, 207, 232, .5) 50%, rgba(236, 72, 153, .75));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    0 6px 16px rgba(244, 63, 94, .55);
}
.auth-mascot.is-error .auth-mascot-name {
  color: #fda4af;
}
.auth-mascot.is-error .auth-mascot-pulse {
  border-color: rgba(244, 114, 182, .55);
}

/* ── Keyframes ── */
@keyframes authMascotPulse {
  0%   { opacity: .55; transform: scale(.85); }
  70%  { opacity: 0;   transform: scale(1.45); }
  100% { opacity: 0;   transform: scale(1.45); }
}
@keyframes authMascotWobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-6deg); }
  75%      { transform: rotate(6deg); }
}
@keyframes authMascotShake {
  10%, 90%  { transform: translate3d(-1px, 0, 0); }
  20%, 80%  { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60%  { transform: translate3d(3px, 0, 0); }
}
@keyframes authMascotPop {
  0%   { transform: scale(.92); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-mascot,
  .auth-mascot.is-success,
  .auth-mascot.is-error {
    animation: none !important;
  }
  .auth-mascot.is-typing .auth-mascot-face,
  .auth-mascot-pulse {
    animation: none !important;
  }
}

/* ── Mobile tuning ── */
@media (max-width: 600px) {
  .auth-mascot {
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    margin-bottom: 14px;
  }
  .auth-mascot-avatar {
    width: 46px;
    height: 46px;
  }
  .auth-mascot-face {
    width: 100%;
    height: 100%;
  }
  .auth-mascot-text {
    font-size: .88rem;
  }
}

/* =========================================================================
   🎁 Gift Loading Splash — shown while we wait for /api/gifts/<token>
   to respond on slow mobile connections. The box wiggles, the lid is
   slightly ajar, Picksy peeks out, and the mascot speaks a friendly
   "one moment, I'm unpacking it for you" line. The visual goal is to
   convince the user that "something is happening" so they don't bail.
   ========================================================================= */
.gift-open-loading {
  align-items: center;
}
.gift-loading-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding: 26px 22px 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(28, 28, 54, .9), rgba(14, 14, 32, .96));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  box-shadow:
    0 30px 80px -10px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(139, 92, 246, .1) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: giftLoadingCardIn .5s cubic-bezier(.5, 1.4, .4, 1) both;
}
@keyframes giftLoadingCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.gift-loading-stage {
  position: relative;
  height: 170px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
.gift-loading-box {
  position: relative;
  width: 130px;
  height: 120px;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .5));
  animation: giftLoadingBoxFloat 3.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes giftLoadingBoxFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
.gift-loading-box-base {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64%;
  background: linear-gradient(135deg, #a78bfa, #ec4899);
  border-radius: 12px;
  box-shadow: 0 14px 28px -6px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .22);
}
.gift-loading-box-lid {
  position: absolute;
  top: 12%;
  left: -3%;
  width: 106%;
  height: 32%;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-radius: 12px 12px 6px 6px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .42), inset 0 2px 0 rgba(255, 255, 255, .22);
  transform-origin: bottom left;
  /* slightly-ajar lid that gently rocks to suggest "unpacking" */
  animation: giftLoadingLidPeek 2.4s ease-in-out infinite;
}
@keyframes giftLoadingLidPeek {
  0%, 100% { transform: rotate(-6deg) translateY(-2px); }
  50%      { transform: rotate(-22deg) translateY(-7px); }
}
.gift-loading-box-ribbon-v {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 16px;
  margin-left: -8px;
  background: linear-gradient(180deg, #fde68a, #b45309);
  box-shadow: inset -2px 0 0 rgba(0, 0, 0, .18);
}
.gift-loading-box-ribbon-h {
  position: absolute;
  left: 0; right: 0;
  top: 33%;
  height: 16px;
  background: linear-gradient(90deg, #fde68a, #b45309);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.gift-loading-box-bow {
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  font-size: 36px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4));
  animation: giftLoadingBowWobble 2.4s ease-in-out infinite;
}
@keyframes giftLoadingBowWobble {
  0%, 100% { transform: translateX(-50%) rotate(-4deg); }
  50%      { transform: translateX(-50%) rotate(6deg); }
}
.gift-loading-sparkles {
  position: absolute;
  inset: -20px;
  pointer-events: none;
}
.gift-loading-sparkles span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde68a, rgba(253, 230, 138, 0));
  animation: giftLoadingSparkle 2.6s ease-in-out infinite;
}
.gift-loading-sparkles span:nth-child(1) { left: 8%;  top: 14%; animation-delay: 0s;   }
.gift-loading-sparkles span:nth-child(2) { left: 88%; top: 22%; animation-delay: .3s;  background: radial-gradient(circle, #f0abfc, rgba(240, 171, 252, 0)); }
.gift-loading-sparkles span:nth-child(3) { left: 18%; top: 78%; animation-delay: .7s;  background: radial-gradient(circle, #c4b5fd, rgba(196, 181, 253, 0)); }
.gift-loading-sparkles span:nth-child(4) { left: 78%; top: 70%; animation-delay: 1.0s; }
.gift-loading-sparkles span:nth-child(5) { left: 50%; top: 4%;  animation-delay: 1.4s; background: radial-gradient(circle, #fb7185, rgba(251, 113, 133, 0)); }
@keyframes giftLoadingSparkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  50%      { opacity: 1; transform: scale(1.4); }
}

.gift-loading-mascot {
  position: absolute;
  right: 12%;
  bottom: 6%;
  width: 78px;
  height: 78px;
  animation: giftLoadingMascotPop .55s cubic-bezier(.22, 1.4, .36, 1) .15s both,
             giftLoadingMascotPeek 3.4s ease-in-out 1s infinite;
  transform-origin: bottom center;
  filter: drop-shadow(0 8px 14px rgba(139, 92, 246, .55));
}
.gift-loading-mascot-face {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), rgba(167, 139, 250, .35) 55%, rgba(99, 102, 241, .5));
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 20px rgba(99, 102, 241, .35);
  font-size: 40px;
  line-height: 1;
}
.gift-loading-mascot-face .picksy-mascot {
  width: 100%;
  height: 100%;
  gap: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift-loading-mascot-face .picksy-figure {
  width: 84% !important;
  height: 84% !important;
  animation: none;
  filter: none;
  transform-origin: center;
}
.gift-loading-mascot-face .picksy-figure::before { display: none; }
@keyframes giftLoadingMascotPop {
  from { opacity: 0; transform: translateY(20px) scale(.5) rotate(-12deg); }
  to   { opacity: 1; transform: translateY(0)    scale(1)  rotate(0deg); }
}
@keyframes giftLoadingMascotPeek {
  0%, 100% { transform: translateY(0)    rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(4deg); }
}

.gift-loading-bubble {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 360px;
  margin: 6px auto 8px;
  padding: 12px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(167, 139, 250, .18), rgba(236, 72, 153, .12) 55%, rgba(99, 102, 241, .18));
  border: 1px solid rgba(167, 139, 250, .4);
  box-shadow: 0 10px 30px rgba(99, 102, 241, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #fff;
  animation: giftLoadingBubbleIn .45s ease .2s both;
}
@keyframes giftLoadingBubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gift-loading-bubble-brand {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f5f3ff, #e9d5ff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gift-loading-bubble-ai {
  -webkit-text-fill-color: #fff;
  color: #fff;
  background: linear-gradient(135deg, rgba(167, 139, 250, .95), rgba(236, 72, 153, .95) 55%, rgba(99, 102, 241, .95));
  -webkit-background-clip: border-box;
          background-clip: border-box;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .62rem;
  box-shadow: 0 4px 10px rgba(167, 139, 250, .45);
}
.gift-loading-bubble-text {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .94);
  line-height: 1.4;
  text-align: center;
}

.gift-loading-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 0 4px;
}
.gift-loading-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #ec4899);
  animation: giftLoadingDot 1.2s ease-in-out infinite;
}
.gift-loading-dots span:nth-child(2) { animation-delay: .15s; }
.gift-loading-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes giftLoadingDot {
  0%, 60%, 100% { transform: scale(.7); opacity: .55; }
  30%           { transform: scale(1.1); opacity: 1; }
}
.gift-loading-sub {
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .02em;
}

@media (max-width: 640px) {
  .gift-loading-stage { height: 150px; }
  .gift-loading-box { width: 112px; height: 100px; }
  .gift-loading-box-bow { font-size: 30px; top: -10px; }
  .gift-loading-mascot { width: 64px; height: 64px; right: 8%; }
  .gift-loading-bubble-text { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gift-loading-box,
  .gift-loading-box-lid,
  .gift-loading-box-bow,
  .gift-loading-mascot,
  .gift-loading-sparkles span,
  .gift-loading-dots span {
    animation: none !important;
  }
}

/* =========================================================================
   🎁 Gift Unwrap Mascot — appears on tap of "Open gift", whispers a
   theme-specific phrase ("happy birthday!", "ho-ho-ho!", etc.), then
   gently fades out once the content underneath is revealed.
   ========================================================================= */
.gift-open-unwrap-mascot {
  position: absolute;
  right: -6px;
  bottom: -10px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px) scale(.7) rotate(8deg);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1.4, .36, 1);
  z-index: 3;
}
.gift-open-unwrap-mascot.is-active {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}
.gift-open-unwrap-mascot.is-fading {
  opacity: 0;
  transform: translateY(8px) scale(.92);
  transition: opacity .6s ease, transform .6s ease;
}
.gift-open-unwrap-mascot-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), rgba(167, 139, 250, .35) 55%, rgba(99, 102, 241, .5));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 18px rgba(99, 102, 241, .45);
  font-size: 28px;
  line-height: 1;
  animation: giftUnwrapMascotBounce 1.6s ease-in-out infinite;
}
.gift-open-unwrap-mascot-avatar .picksy-mascot {
  width: 100%;
  height: 100%;
  gap: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift-open-unwrap-mascot-avatar .picksy-figure {
  width: 84% !important;
  height: 84% !important;
  animation: none !important;
  filter: none;
}
.gift-open-unwrap-mascot-avatar .picksy-figure::before { display: none; }
@keyframes giftUnwrapMascotBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.gift-open-unwrap-mascot-bubble {
  position: relative;
  max-width: 220px;
  padding: 9px 13px;
  margin-bottom: 8px;
  border-radius: 14px 14px 14px 4px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(243, 232, 255, .96));
  color: #2e1065;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  box-shadow:
    0 12px 28px -6px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(139, 92, 246, .2);
}
.gift-open-unwrap-mascot-bubble::after {
  /* tail pointing at the avatar (left side) */
  content: '';
  position: absolute;
  left: -6px;
  bottom: 6px;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, .96);
  border-bottom-left-radius: 4px;
  transform: rotate(45deg);
  box-shadow: -2px 2px 6px rgba(0, 0, 0, .08);
}
@media (max-width: 640px) {
  .gift-open-unwrap-mascot {
    /* On phones the unwrap stage is narrower — anchor the mascot above the
     * box-base so the speech bubble has horizontal room without overflowing
     * the card. */
    right: 0;
    bottom: -4px;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 4px;
  }
  .gift-open-unwrap-mascot-avatar { width: 48px; height: 48px; }
  .gift-open-unwrap-mascot-bubble {
    max-width: 180px;
    font-size: .78rem;
    padding: 7px 11px;
    border-radius: 12px 12px 4px 12px;
  }
  .gift-open-unwrap-mascot-bubble::after {
    left: auto;
    right: 14px;
    bottom: -6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gift-open-unwrap-mascot-avatar { animation: none !important; }
  .gift-open-unwrap-mascot,
  .gift-open-unwrap-mascot.is-fading { transition-duration: .18s !important; }
}

/* ─── Gift Open — Picksy branding, theme badge, refined CTAs (v125) ─── */
.gift-open-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(236, 72, 153, .14));
  border: 1px solid rgba(167, 139, 250, .25);
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 6px 18px -8px rgba(167, 139, 250, .55);
}
.gift-open-brand:hover {
  transform: translateY(-1px);
  border-color: rgba(167, 139, 250, .55);
  box-shadow: 0 10px 28px -10px rgba(167, 139, 250, .8);
}
.gift-open-brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: radial-gradient(circle at 30% 30%, #c4b5fd, #8b5cf6 60%, #6d28d9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 4px 10px rgba(139, 92, 246, .45);
}
.gift-open-brand-name {
  font-weight: 900;
  letter-spacing: .3px;
  background: linear-gradient(135deg, #fff, #e9d5ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gift-open-brand-ai {
  margin-left: 4px;
  font-size: 9.5px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  color: #fff;
  letter-spacing: 1px;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.gift-open-brand-tagline {
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .14);
  color: #cfcfee;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: lowercase;
  letter-spacing: .3px;
}

.gift-open-theme-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 700;
  color: #e9d5ff;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.gift-open-card { padding-top: 22px; }
.gift-open-card > .gift-open-brand,
.gift-open-card > .gift-open-theme-badge { display: inline-flex; }

/* Open-gift button — richer 2-line + icon look */
.gift-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.gift-open-btn-icon {
  font-size: 18px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.gift-open-btn.is-disabled { animation: none; cursor: not-allowed; opacity: .6; }

/* Meta line above title */
.gift-open-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px auto 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .12);
  border: 1px solid rgba(139, 92, 246, .25);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #e9d5ff;
}
.gift-open-meta-type { text-transform: uppercase; }
.gift-open-meta-by   { color: #cfcfee; font-weight: 600; }
.gift-open-meta-by strong {
  background: linear-gradient(135deg, #fff, #e9d5ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}

/* Poster glow wrap */
.gift-open-poster-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}
.gift-open-poster-wrap::before {
  content: "";
  position: absolute;
  inset: -16px;
  background: radial-gradient(closest-side, rgba(167, 139, 250, .35), transparent 72%);
  filter: blur(20px);
  z-index: -1;
  border-radius: 50%;
  animation: giftPosterPulse 3.4s ease-in-out infinite;
}
@keyframes giftPosterPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.08); }
}
.gift-open-poster {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .08);
}

/* Richer actions */
.gift-open-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 18px auto 20px;
  max-width: 360px;
}
@media (min-width: 540px) {
  .gift-open-actions { grid-template-columns: 1fr 1fr; max-width: none; }
}
.gift-open-action-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 14px 18px;
  border-radius: 16px;
  text-decoration: none;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.gift-open-action-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .25), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.gift-open-action-btn:hover::after { left: 130%; }
.gift-open-action-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.gift-open-action-icon {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.gift-open-action-label {
  font-size: 14.5px;
  line-height: 1.2;
  color: #fff;
  letter-spacing: .2px;
}
.gift-open-action-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .75);
  letter-spacing: .25px;
}
.gift-open-action-primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 45%, #ec4899 100%);
  box-shadow: 0 16px 38px -10px rgba(236, 72, 153, .55),
              0 0 0 1px rgba(167, 139, 250, .25) inset;
}
.gift-open-action-primary:hover {
  box-shadow: 0 22px 48px -12px rgba(236, 72, 153, .65),
              0 0 0 1px rgba(255, 255, 255, .25) inset;
}
.gift-open-action-secondary {
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(139, 92, 246, .08));
  border-color: rgba(255, 255, 255, .12);
  color: #fff;
}
.gift-open-action-secondary:hover {
  border-color: rgba(167, 139, 250, .45);
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(139, 92, 246, .14));
}
.gift-open-action-secondary .gift-open-action-icon {
  background: linear-gradient(135deg, rgba(139, 92, 246, .35), rgba(236, 72, 153, .25));
}
.gift-open-action-secondary .gift-open-action-sub { color: #cfcfee; }

/* Promo block */
.gift-open-promo {
  margin: 22px -6px 12px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .14), rgba(236, 72, 153, .08));
  border: 1px solid rgba(167, 139, 250, .25);
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.gift-open-promo::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(167, 139, 250, .25) 60deg, transparent 120deg);
  animation: giftPromoSweep 9s linear infinite;
  pointer-events: none;
  opacity: .35;
}
@keyframes giftPromoSweep { to { transform: rotate(360deg); } }
.gift-open-promo > * { position: relative; z-index: 1; }
.gift-open-promo-mascot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: radial-gradient(circle at 30% 30%, #c4b5fd, #8b5cf6 60%, #6d28d9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 18px rgba(139, 92, 246, .45);
  animation: giftPromoBob 3.4s ease-in-out infinite;
}
@keyframes giftPromoBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-4px) rotate(3deg); }
}
.gift-open-promo-title {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}
.gift-open-promo-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: #d8d4f0;
  margin-bottom: 10px;
}
.gift-open-promo-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gift-open-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease, border-color .2s ease;
}
.gift-open-promo-btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(236, 72, 153, .55);
}
.gift-open-promo-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.gift-open-promo-btn-ghost {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}
.gift-open-promo-btn-ghost:hover {
  border-color: rgba(167, 139, 250, .55);
  background: rgba(167, 139, 250, .14);
}

/* Footer with Picksy branding */
.gift-open-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 11.5px;
  color: #8a89a8;
  letter-spacing: .3px;
}
.gift-open-footer-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  box-shadow: 0 4px 10px rgba(139, 92, 246, .3);
}
.gift-open-footer-link {
  color: #c4b5fd;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .4px;
}
.gift-open-footer-link:hover { color: #ec4899; }

/* Mobile tuning */
@media (max-width: 540px) {
  .gift-open-card { padding: 22px 18px; }
  .gift-open-brand-tagline { display: none; }
  .gift-open-promo { grid-template-columns: 44px 1fr; padding: 14px; }
  .gift-open-promo-mascot { width: 44px; height: 44px; font-size: 22px; }
  .gift-open-promo-title { font-size: 13px; }
  .gift-open-promo-text { font-size: 12px; }
  .gift-open-action-btn { padding: 12px 14px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Telegram Channel CTA section — shown on the main page below the
 * support card and above the brand footer.  Telegram-blue palette,
 * mirrors the .support-card visual rhythm so it feels native.
 * ════════════════════════════════════════════════════════════════════════ */
.tg-channel-section {
  margin: 18px 0 24px;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.tg-channel-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg,
    rgba(34, 158, 217, 0.18),
    rgba(56, 189, 248, 0.10) 55%,
    rgba(14, 165, 233, 0.16));
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 18px;
  box-shadow: 0 10px 36px -16px rgba(14, 165, 233, 0.55);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.tg-channel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 50%, rgba(56, 189, 248, 0.22), transparent 55%),
    radial-gradient(circle at 100% 50%, rgba(14, 165, 233, 0.18), transparent 60%);
  opacity: 0.75;
  pointer-events: none;
  z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
  .tg-channel-card:hover {
    border-color: rgba(56, 189, 248, 0.6);
    background: linear-gradient(135deg,
      rgba(34, 158, 217, 0.26),
      rgba(56, 189, 248, 0.16) 55%,
      rgba(14, 165, 233, 0.22));
  }
}
.tg-channel-card:active {
  border-color: rgba(56, 189, 248, 0.75);
}
.tg-channel-icon {
  font-size: 2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.6));
}
.tg-channel-info {
  flex: 1;
  min-width: 0;
}
.tg-channel-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, #bae6fd 45%, #38bdf8);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tg-channel-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}
.tg-channel-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 100px;
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #0284c7 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
  flex-shrink: 0;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .tg-channel-card:hover .tg-channel-btn {
    box-shadow: 0 10px 28px rgba(14, 165, 233, 0.6);
  }
}
@media (max-width: 540px) {
  .tg-channel-card {
    flex-wrap: wrap;
    gap: 12px;
  }
  .tg-channel-info {
    flex: 1 1 100%;
    order: 2;
  }
  .tg-channel-icon { order: 1; }
  .tg-channel-btn { order: 3; margin-left: auto; }
}

/* ──────────────────────────────────────────────────────────────────────
 * v76.11 — "Підбір разом" homepage CTA: tone down the gradient banner.
 * User feedback: "вилізає" — too prominent. Keep it as a CTA but
 * smaller padding, softer gradient, less glow, smaller icon halo.
 * Overrides the v119 "rich gradient banner" rules earlier in the file.
 * ────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
 * v76.10 — Pricing modal: equal-height plan cards, trial-Premium CTA,
 *          alignment fixes (no more "crooked" stacking on mobile).
 * ────────────────────────────────────────────────────────────────────── */
.plans-grid {
  align-items: stretch !important;
  padding-top: 14px;            /* breathing room for the floating badge */
}
.plan-card {
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
  /* Push the CTA stack to the bottom regardless of feature list length. */
}
.plan-card .plan-features {
  flex: 1 1 auto;
}
.plan-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
/* Secondary trial CTA — looks like a soft ghost button so it doesn't
   compete with the primary "Обрати" CTA. */
.plan-trial-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.08);
  color: #6ee7b7;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.18s var(--ease);
  font-family: inherit;
  white-space: nowrap;
}
.plan-trial-btn:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.85);
  transform: translateY(-1px);
}
.plan-trial-btn:active { transform: translateY(0); }
.plan-trial-used {
  width: 100%;
  text-align: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.78rem;
  font-weight: 600;
}
/* The "Активний" pill should sit above the badge instead of next to it. */
.plan-current-pill {
  margin-top: 6px;
}
/* Stronger active-plan accent so the user instantly sees which is theirs. */
.plan-card.plan-current {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(139, 92, 246, 0.18), transparent 55%),
    rgba(139, 92, 246, 0.06) !important;
  border-color: rgba(168, 85, 247, 0.55) !important;
  box-shadow: 0 12px 36px -18px rgba(168, 85, 247, 0.6);
}

/* ── v76.10 — AI section polish ── */
.ai-section .ai-input-wrap {
  position: relative;
  isolation: isolate;
}
/* Soft gradient frame around the textarea on focus — additive, doesn't
   override the existing :focus glow. */
.ai-section .ai-input-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-md) + 2px);
  padding: 1px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.55), rgba(236, 72, 153, 0.45), rgba(139, 92, 246, 0.55));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}
.ai-section .ai-input-wrap:focus-within::before { opacity: 1; }
/* Lift the search button into a tiny glow capsule. */
.ai-section .ai-search-btn {
  box-shadow:
    0 4px 18px rgba(139, 92, 246, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.ai-section .ai-search-btn::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  background: radial-gradient(closest-side, rgba(236, 72, 153, 0.35), transparent 75%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: -1;
}
.ai-section .ai-search-btn:hover::after { opacity: 1; }
/* Header h2 — gradient text on the AI section title for a slightly
   richer "smart" look. Falls back to var(--text) if clip is unsupported. */
.ai-section .ai-header h2 {
  background: linear-gradient(135deg, #fde68a 0%, #ec4899 55%, #a78bfa 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Suggestion chips — coloured-ring hover so they feel tactile. */
.ai-section .ai-chip {
  position: relative;
}
.ai-section .ai-chip:hover {
  border-color: rgba(236, 72, 153, 0.55);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(236, 72, 153, 0.10));
  color: #fff;
  box-shadow: 0 6px 18px -10px rgba(236, 72, 153, 0.55);
}


/* ──────────────────────────────────────────────────────────────────────
 * Підбір разом — зменшити виступання та ефект збільшення
 * Зменшено: padding, box-shadow, анімація іконки, ефект hover
 * ────────────────────────────────────────────────────────────────────── */
.duo-btn {
  padding: 10px 16px !important;
  box-shadow: 0 4px 16px -8px rgba(139, 92, 246, 0.35) !important;
  border-radius: 14px !important;
  gap: 10px !important;
  transform: none !important;
}
.duo-btn-icon {
  font-size: 1.4rem !important;
  filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.4)) !important;
  animation: duoIconPulseCalm 4s ease-in-out infinite !important;
}
@keyframes duoIconPulseCalm {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.02) rotate(-2deg); }
}
.duo-btn-title {
  font-size: 0.92rem !important;
}
.duo-btn-badge {
  font-size: 0.58rem !important;
  padding: 2px 7px !important;
}
@media (hover: hover) and (pointer: fine) {
  .duo-btn:hover {
    transform: none !important;
    box-shadow: 0 6px 20px -10px rgba(139, 92, 246, 0.45) !important;
  }
}
.duo-btn:active {
  transform: none !important;
}
@media (max-width: 540px) {
  .duo-btn {
    padding: 9px 12px !important;
    gap: 8px !important;
  }
  .duo-btn-icon {
    font-size: 1.2rem !important;
  }
  .duo-btn-title {
    font-size: 0.84rem !important;
  }
}


/* ──────────────────────────────────────────────────────────────────────
 * Підбір разом — повернути компактний pill-стиль, прибрати width:100%
 * ────────────────────────────────────────────────────────────────────── */
.duo-section {
  display: flex !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 12px 0 10px !important;
}
.duo-btn {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 8px 16px 8px 12px !important;
  gap: 8px !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  background: rgba(139, 92, 246, 0.15) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
}
.duo-btn::before {
  display: none !important;
}
.duo-btn-icon {
  font-size: 1.1rem !important;
  animation: none !important;
  filter: none !important;
}
.duo-btn-title {
  font-size: 0.88rem !important;
  white-space: nowrap !important;
}
.duo-btn-badge {
  font-size: 0.58rem !important;
  padding: 2px 6px !important;
}
@media (hover: hover) and (pointer: fine) {
  .duo-btn:hover {
    transform: none !important;
    background: rgba(139, 92, 246, 0.25) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: none !important;
  }
}
.duo-btn:active {
  transform: none !important;
}


/* ──────────────────────────────────────────────────────────────────────
 * Підбір разом — glass-deep стиль як у .saved-section
 * ────────────────────────────────────────────────────────────────────── */
.duo-section {
  display: block !important;
  padding: 0 !important;
  margin: 12px 0 10px !important;
}
.duo-btn {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 18px !important;
  background: var(--glass-deep) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 4px 20px #0000004d !important;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease) !important;
}
.duo-btn::before {
  display: none !important;
}
.duo-btn-icon {
  font-size: 1.3rem !important;
  animation: none !important;
  filter: none !important;
}
.duo-btn-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  letter-spacing: normal !important;
}
@media (hover: hover) and (pointer: fine) {
  .duo-btn:hover {
    border-color: var(--glass-border-hover) !important;
    background: var(--glass-deep) !important;
    box-shadow: 0 4px 20px #0000004d !important;
    transform: none !important;
  }
}
.duo-btn:active {
  transform: none !important;
}


/* ──────────────────────────────────────────────────────────────────────
 * Підбір разом — фінальний стиль: як saved-section + кольоровий акцент
 * ────────────────────────────────────────────────────────────────────── */
.duo-section {
  display: block !important;
  padding: 0 !important;
  margin: 12px 0 10px !important;
}
.duo-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 10px !important;
  padding: 14px 18px !important;
  /* Фон як saved-section — темний з фіолетовим акцентом */
  background:
    radial-gradient(ellipse at 0% 0%, rgba(139, 92, 246, .12), transparent 55%),
    linear-gradient(135deg, rgba(15, 12, 30, .55), rgba(20, 12, 30, .55)) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  /* Рамка як saved-section але фіолетова */
  border: 1px solid rgba(139, 92, 246, .28) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 4px 20px #0000004d !important;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease) !important;
  transform: none !important;
  cursor: pointer !important;
}
.duo-btn::before {
  display: none !important;
}
.duo-btn-icon {
  font-size: 1.3rem !important;
  animation: none !important;
  filter: none !important;
  flex-shrink: 0 !important;
}
.duo-btn-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  letter-spacing: normal !important;
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Hover як saved-section — рожево-фіолетове підсвічування */
@media (hover: hover) and (pointer: fine) {
  .duo-btn:hover {
    border-color: rgba(236, 72, 153, .32) !important;
    box-shadow: 0 18px 50px -30px rgba(139, 92, 246, .55) !important;
    background:
      radial-gradient(ellipse at 0% 0%, rgba(139, 92, 246, .18), transparent 55%),
      linear-gradient(135deg, rgba(15, 12, 30, .55), rgba(20, 12, 30, .55)) !important;
    transform: none !important;
  }
}
.duo-btn:active {
  transform: none !important;
}


/* ──────────────────────────────────────────────────────────────────────
 * Підбір разом — прибрати spring-анімацію (cubic-bezier overshoot)
 * ────────────────────────────────────────────────────────────────────── */
.duo-btn,
.duo-btn:hover,
.duo-btn:active,
.duo-btn:focus {
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
.duo-section {
  transition: opacity 0.5s ease !important;
  transform: none !important;
}


/* ──────────────────────────────────────────────────────────────────────
 * #duo-btn — найвища специфічність, блокує будь-який transform/scale
 * ────────────────────────────────────────────────────────────────────── */
#duo-btn,
#duo-btn:hover,
#duo-btn:active,
#duo-btn:focus,
#duo-btn:focus-visible {
  transform: none !important;
  scale: none !important;
  animation: none !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  will-change: auto !important;
}
#duo-btn * {
  animation: none !important;
  transform: none !important;
}
#duo-section,
#duo-section:hover {
  transform: none !important;
  animation: none !important;
  transition: opacity 0.5s ease !important;
}

/* v84 - serious product layer + tracker */
:root {
  --bg: #0b0d10;
  --surface: rgba(19, 22, 27, 0.86);
  --surface-2: rgba(255, 255, 255, 0.055);
  --glass: rgba(255, 255, 255, 0.045);
  --glass-deep: var(--surface);
  --glass-border: rgba(255, 255, 255, 0.105);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  --text: #f4f4f5;
  --text-dim: rgba(244, 244, 245, 0.74);
  --text-muted: rgba(244, 244, 245, 0.58);
  --accent: #38bdf8;
  --accent-light: #7dd3fc;
  --accent-glow: rgba(56, 189, 248, 0.18);
  --accent2: #f59e0b;
  --accent2-glow: rgba(245, 158, 11, 0.16);
  --accent3: #10b981;
  --accent3-glow: rgba(16, 185, 129, 0.16);
  --accent4: #a3e635;
  --gradient-main: linear-gradient(135deg, #38bdf8 0%, #10b981 100%);
  --gradient-warm: linear-gradient(135deg, #f59e0b, #38bdf8);
  --gradient-cool: linear-gradient(135deg, #38bdf8, #10b981);
  --radius: 8px;
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 7px;
  --spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html {
  scroll-padding-top: 90px;
}

body {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 170px),
    linear-gradient(135deg, #0b0d10 0%, #111318 48%, #0c1110 100%);
}

#app {
  padding-bottom: 132px;
}

.bg-blobs {
  display: none !important;
}

#particles-canvas {
  opacity: 0.06 !important;
}

.glass-deep,
.ai-section,
.filters-section,
.saved-section,
.collections-section,
.daily-pick-section,
.duo-btn,
.movie-night-section,
.support-banner,
.quiz-cta-banner,
.wordle-cta-banner,
.sub-plans-banner,
.promo-banner,
.live-bar,
.tracker-section {
  background: var(--surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
}

.ai-section::before,
.ai-section::after,
.filters-section::before,
.saved-section::before,
.collections-section::before,
.collections-section::after,
.saved-section::after,
.quiz-cta-banner::before,
.wordle-cta-banner::before,
.pick-btn-bg::before,
.more-btn-shimmer,
.live-bar-scan {
  display: none !important;
}

.logo-icon,
.pick-btn-icon,
.lucky-sparkle,
.saved-title-icon,
.filters-icon,
.filter-emoji,
.quiz-cta-banner-icon,
.wordle-cta-icon,
.support-banner-icon,
.duo-btn-icon,
.daily-pick-badge,
.announcement-icon {
  filter: none !important;
  animation: none !important;
}

.header {
  top: 0;
  margin: 0 0 18px;
  padding: 12px 16px;
}

.logo {
  letter-spacing: 0;
}

.logo-icon {
  display: none;
}

.logo-accent,
.title-glow,
.hero-gradient,
.hero-brand {
  background: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
}

.lang-switch,
.tab-switch,
.saved-category-tabs,
.saved-tabs,
.collections-tabs,
.recent-picks-filters,
.profile-tabs,
.profile-history-filters {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px !important;
}

.tab-btn,
.saved-tab,
.saved-cat-tab,
.col-tab,
.profile-tab-btn,
.profile-hf-btn,
.lang-btn {
  border-radius: 6px !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.tab-btn.active,
.saved-tab.active,
.saved-cat-tab.active,
.col-tab.active,
.profile-tab-btn.active,
.profile-hf-btn.active,
.lang-btn.active {
  background: #e4e4e7 !important;
  color: #111317 !important;
  box-shadow: none !important;
}

.user-btn,
.glass-pill,
.ai-chip,
.ai-mood-option,
.mood-btn,
.action-btn,
.fab-item,
.tracker-open-list,
.tracker-goal-input {
  border-radius: 7px !important;
}

.hero-section {
  text-align: left !important;
  padding: 26px 0 18px !important;
  margin: 2px 0 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.hero-tagline {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid rgba(56,189,248,0.28);
  border-radius: 6px;
  background: rgba(56,189,248,0.08) !important;
  color: #bae6fd !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.hero-title {
  max-width: 860px;
  margin-top: 14px !important;
  font-size: clamp(2rem, 5vw, 4.35rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.hero-subtitle {
  max-width: 720px;
  margin-left: 0 !important;
  color: rgba(244,244,245,0.66) !important;
}

.hero-stats {
  justify-content: flex-start !important;
}

.hero-stat {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.hero-cta,
.pick-btn-bg,
.profile-username-save,
.col-edit-save,
.plan-btn,
.support-btn,
.sub-plans-banner-btn {
  background: #f4f4f5 !important;
  color: #0b0d10 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.auth-submit {
  background: var(--gradient-main) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.18) !important;
  text-shadow: none !important;
}

.hero-cta:hover,
.pick-btn:hover .pick-btn-bg,
.profile-username-save:hover,
.col-edit-save:hover,
.support-btn:hover,
.sub-plans-banner-btn:hover {
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
  transform: translateY(-1px) !important;
}

.auth-submit:hover {
  background: linear-gradient(135deg, #4dd4ff 0%, #14c9a0 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(34, 211, 238, 0.28) !important;
  transform: translateY(-1px) !important;
}

.auth-submit:active {
  background: linear-gradient(135deg, #22b8e8 0%, #0d9f7a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.2) !important;
  transform: translateY(0) scale(0.98) !important;
}

.pick-btn {
  padding: 0 !important;
}

.pick-btn-bg {
  border-radius: 8px !important;
}

.pick-btn-content {
  min-height: 60px;
  color: #0b0d10 !important;
  font-size: 1.02rem !important;
  letter-spacing: 0 !important;
}

.lucky-btn,
.tracker-open-list,
.action-btn,
.more-btn,
.ai-search-btn {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.105) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

.lucky-btn:hover,
.tracker-open-list:hover,
.action-btn:hover,
.more-btn:hover,
.ai-chip:hover,
.ai-mood-option:hover,
.mood-btn:hover {
  background: rgba(255,255,255,0.085) !important;
  border-color: rgba(56,189,248,0.34) !important;
  color: var(--text) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.ai-section {
  padding: 18px !important;
}

.ai-badge {
  background: rgba(16,185,129,0.12) !important;
  border: 1px solid rgba(16,185,129,0.26);
  color: #bbf7d0 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none !important;
}

.ai-section .ai-header h2 {
  background: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 0.98rem !important;
}

.ai-input,
.glass-input,
.glass-select,
.tracker-note-input {
  background: rgba(0,0,0,0.24) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.ai-input:focus,
.glass-input:focus,
.glass-select:focus,
.tracker-note-input:focus,
.tracker-goal-input:focus {
  border-color: rgba(56,189,248,0.72) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.14) !important;
}

.mood-grid,
.ai-suggestions,
.ai-mood-options {
  gap: 8px !important;
}

.mood-btn,
.ai-chip,
.ai-mood-option {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(244,244,245,0.76) !important;
  transform: none !important;
  font-weight: 600 !important;
}

.mood-btn.active,
.ai-mood-option.active {
  background: rgba(56,189,248,0.16) !important;
  border-color: rgba(56,189,248,0.5) !important;
  color: #e0f2fe !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.result-card {
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: var(--glass-shadow) !important;
}

.result-card-bg {
  opacity: 0.18;
  filter: blur(34px) saturate(0.9) brightness(0.36) !important;
}

.result-card-inner {
  background: rgba(13,15,19,0.9) !important;
}

.result-poster-wrap,
.trending-poster,
.daily-pick-poster,
.saved-item-poster,
.tracker-recent-item img {
  border-radius: 6px !important;
}

.result-rating-badge,
.meta-tag,
.saved-count,
.stat-badge,
.wordle-cta-pill,
.quiz-cta-banner-pill,
.duo-btn-badge {
  border-radius: 6px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(244,244,245,0.82) !important;
  box-shadow: none !important;
}

.save-btn.saved {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.36) !important;
  color: #bbf7d0 !important;
}

.saved-header,
.collections-header,
.filters-header {
  padding: 14px 16px !important;
}

.saved-item {
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.028);
}

.saved-item:hover {
  background: rgba(255,255,255,0.055) !important;
  transform: none !important;
}

.quiz-cta-banner,
.wordle-cta-banner,
.support-banner {
  gap: 12px !important;
  padding: 12px 14px !important;
}

.quiz-cta-banner:hover,
.wordle-cta-banner:hover,
.support-banner:hover,
.duo-btn:hover,
.collections-section:hover,
.saved-section:hover {
  transform: none !important;
  border-color: rgba(56,189,248,0.22) !important;
  box-shadow: var(--glass-shadow) !important;
}

.live-bar {
  min-height: 44px;
  color: var(--text-dim) !important;
}

.live-bar-badge {
  background: rgba(16,185,129,0.12) !important;
  color: #bbf7d0 !important;
  border-color: rgba(16,185,129,0.24) !important;
}

.tracker-section {
  position: relative;
  z-index: 1;
  padding: 18px;
  margin: 18px 0;
}

.tracker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.tracker-kicker {
  color: var(--accent-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.tracker-title {
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.tracker-open-list {
  min-height: 36px;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.tracker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tracker-card {
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}

.tracker-card-label {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.tracker-progress-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.tracker-progress-row strong,
.tracker-metric {
  display: block;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
}

.tracker-goal-input {
  width: 54px;
  height: 36px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-align: center;
}

.tracker-progress-track {
  height: 8px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}

.tracker-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  transition: width 0.25s ease;
}

.tracker-notes {
  margin-top: 14px;
}

.tracker-notes label,
.tracker-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 700;
}

.tracker-note-input {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  color: var(--text);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.tracker-recent {
  margin-top: 14px;
}

.tracker-recent-head {
  margin-bottom: 8px;
}

.tracker-recent-list {
  display: grid;
  gap: 8px;
}

.tracker-recent-item {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tracker-recent-item:hover {
  background: rgba(255,255,255,0.065);
  border-color: rgba(56,189,248,0.22);
}

.tracker-recent-item img {
  width: 42px;
  height: 56px;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
}

.tracker-recent-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tracker-recent-body strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.87rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracker-recent-body span,
.tracker-empty {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.mobile-nav {
  display: none;
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 74px;
  }

  #app {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .header {
    position: sticky;
    top: 0;
    margin: 0 -12px 14px;
    padding: 10px 12px;
    border-radius: 0 !important;
  }

  .header-left {
    min-width: 0;
  }

  .logo {
    font-size: 1rem;
  }

  .tab-switch {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tab-switch::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    padding: 7px 10px;
    font-size: 0.72rem;
  }

  .lang-switch {
    display: none !important;
  }

  .user-btn {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    justify-content: center;
  }

  .user-name {
    display: none;
  }

  .hero-section {
    padding-top: 18px !important;
  }

  .hero-title {
    font-size: clamp(1.8rem, 12vw, 3.2rem) !important;
  }

  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
  }

  .hero-stat {
    min-width: 0 !important;
    padding: 10px 8px !important;
  }

  .hero-stat-value {
    font-size: 1rem !important;
  }

  .result-card-inner {
    flex-direction: column;
    padding: 14px !important;
  }

  .result-poster-wrap {
    width: min(46vw, 150px) !important;
    height: auto !important;
    aspect-ratio: 2 / 3;
    margin: 0 auto;
  }

  .result-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .action-btn {
    justify-content: center;
    min-width: 0;
    padding: 9px 8px !important;
    white-space: normal !important;
  }

  .tracker-section {
    padding: 14px;
  }

  .tracker-header {
    align-items: stretch;
    flex-direction: column;
  }

  .tracker-open-list {
    width: 100%;
  }

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

  .tracker-progress-card {
    grid-column: 1 / -1;
  }

  .tracker-card {
    min-height: 98px;
    padding: 12px;
  }

  .tracker-progress-row strong,
  .tracker-metric {
    font-size: 1.72rem;
  }

  .saved-tabs,
  .saved-category-tabs,
  .collections-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .saved-tabs::-webkit-scrollbar,
  .saved-category-tabs::-webkit-scrollbar,
  .collections-tabs::-webkit-scrollbar {
    display: none;
  }

  .fab-container {
    display: none !important;
  }

  .mobile-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 10000;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    min-height: 66px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 18px;
    background: rgba(13, 15, 19, 0.94);
    box-shadow: 0 18px 48px rgba(0,0,0,0.42);
    backdrop-filter: blur(18px) saturate(1.05);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
  }

  .mobile-nav-item {
    min-width: 0;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgba(244,244,245,0.58);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
  }

  .mobile-nav-item span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
  }

  .mobile-nav-item.active {
    background: rgba(56,189,248,0.14);
    color: #e0f2fe;
  }

  .cookie-consent {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .ad-banner {
    bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 1024px) {
  .tracker-section {
    padding: 20px;
  }

  .tracker-recent-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tracker-recent-item {
    min-height: 132px;
    grid-template-columns: 1fr;
    align-content: start;
  }

  .tracker-recent-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* v85 - warmer home balance */
:root {
  --accent: #22d3ee;
  --accent-light: #a5f3fc;
  --accent-glow: rgba(34, 211, 238, 0.2);
  --accent2: #f97316;
  --accent2-glow: rgba(249, 115, 22, 0.18);
  --accent3: #14b8a6;
  --accent3-glow: rgba(20, 184, 166, 0.18);
  --accent4: #e879f9;
  --gradient-main: linear-gradient(135deg, #22d3ee 0%, #a78bfa 48%, #fb7185 100%);
  --gradient-warm: linear-gradient(135deg, #fbbf24 0%, #fb7185 55%, #a78bfa 100%);
  --gradient-cool: linear-gradient(135deg, #22d3ee 0%, #14b8a6 100%);
}

body {
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.065) 0%, rgba(34, 211, 238, 0) 210px),
    linear-gradient(135deg, #080d12 0%, #14101f 43%, #07161a 100%) !important;
}

#particles-canvas {
  opacity: 0.12 !important;
}

.header {
  background:
    linear-gradient(135deg, rgba(23, 28, 38, 0.9), rgba(42, 26, 63, 0.78), rgba(16, 44, 48, 0.74)) !important;
  border-color: rgba(167, 139, 250, 0.18) !important;
}

.logo-accent {
  color: #67e8f9 !important;
  -webkit-text-fill-color: currentColor !important;
}

.hero-section {
  padding: 24px 0 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 0 !important;
}

.hero-tagline {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(251, 113, 133, 0.14)) !important;
  border-color: rgba(103, 232, 249, 0.32) !important;
  color: #ecfeff !important;
}

.hero-brand {
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
}

.hero-gradient,
.title-glow {
  background: linear-gradient(135deg, #67e8f9 0%, #f0abfc 46%, #fde68a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-subtitle {
  color: rgba(245, 245, 255, 0.76) !important;
}

.hero-stat {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(251, 113, 133, 0.06)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.tab-btn.active,
.saved-tab.active,
.saved-cat-tab.active,
.col-tab.active,
.profile-tab-btn.active,
.profile-hf-btn.active,
.lang-btn.active {
  background: var(--gradient-main) !important;
  color: #061014 !important;
  box-shadow: 0 10px 24px rgba(34, 211, 238, 0.16) !important;
}

.hero-cta,
.pick-btn-bg,
.auth-submit,
.profile-username-save,
.col-edit-save,
.plan-btn,
.support-btn,
.sub-plans-banner-btn,
.home-blog-cta-btn {
  background: var(--gradient-main) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 14px 30px rgba(34, 211, 238, 0.16) !important;
}

.auth-submit:hover {
  background: linear-gradient(135deg, #4dd4ff 0%, #14c9a0 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(34, 211, 238, 0.28) !important;
  transform: translateY(-1px) !important;
}

.auth-submit:active {
  background: linear-gradient(135deg, #22b8e8 0%, #0d9f7a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.2) !important;
  transform: translateY(0) scale(0.98) !important;
}

.pick-btn-content {
  color: #ffffff !important;
}

.ai-badge,
.live-bar-badge,
.tracker-kicker {
  color: #ccfbf1 !important;
}

.mood-btn.active,
.ai-mood-option.active {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(20, 184, 166, 0.14)) !important;
  border-color: rgba(94, 234, 212, 0.42) !important;
  color: #ecfeff !important;
}

.tracker-progress-fill {
  background: linear-gradient(90deg, #22d3ee 0%, #a78bfa 45%, #fb7185 100%) !important;
}

#support-banner,
#support-section,
#tg-channel-section,
.brand-footer {
  display: none !important;
}

.main-content > #quiz-cta-banner,
.main-content > #match-cta-banner,
.main-content > #wordle-cta-banner {
  min-height: 66px !important;
  margin: 0 8px 12px 0 !important;
  padding: 10px 12px !important;
  vertical-align: top;
}

@media (min-width: 780px) {
  .main-content > #quiz-cta-banner,
  .main-content > #match-cta-banner,
  .main-content > #wordle-cta-banner {
    display: inline-flex !important;
    width: calc((100% - 30px) / 3) !important;
  }

  .main-content > #wordle-cta-banner {
    margin-right: 0 !important;
  }
}

.main-content > #quiz-cta-banner .quiz-cta-banner-sub,
.main-content > #match-cta-banner .quiz-cta-banner-sub,
.main-content > #wordle-cta-banner .wordle-cta-sub {
  display: none !important;
}

.main-content > #quiz-cta-banner,
.main-content > #match-cta-banner,
.main-content > #wordle-cta-banner,
.home-blog-cta-inner,
.tracker-section {
  border-color: rgba(255, 255, 255, 0.13) !important;
}

.main-content > #quiz-cta-banner {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(167, 139, 250, 0.12)) !important;
}

.main-content > #match-cta-banner {
  background:
    linear-gradient(135deg, rgba(232, 121, 249, 0.14), rgba(251, 113, 133, 0.12)) !important;
}

.main-content > #wordle-cta-banner {
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(20, 184, 166, 0.12)) !important;
}

.quiz-cta-banner-icon,
.wordle-cta-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.quiz-cta-banner-title,
.wordle-cta-title {
  font-size: 0.88rem !important;
  line-height: 1.15 !important;
}

.quiz-cta-banner-pill,
.wordle-cta-pill,
.duo-btn-badge {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fef9c3 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.live-bar {
  min-height: 38px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.07), rgba(251, 113, 133, 0.045)) !important;
}

.daily-pick-section,
.saved-section,
.collections-section,
.duo-btn,
.tracker-section {
  margin-top: 12px !important;
}

.home-blog-cta {
  margin: 30px auto 10px !important;
  padding: 0 !important;
}

.home-blog-cta-inner {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 18px !important;
  padding: 20px 22px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(167, 139, 250, 0.14) 42%, rgba(251, 113, 133, 0.16)) !important;
  box-shadow: 0 18px 44px rgba(8, 13, 18, 0.32) !important;
}

.home-blog-cta-mascot {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: var(--gradient-warm) !important;
}

.home-blog-cta-title {
  margin-bottom: 4px !important;
  font-size: 1.28rem !important;
}

.home-blog-cta-text {
  max-width: 620px !important;
  color: rgba(245, 245, 255, 0.82) !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}

.home-blog-cta-btn {
  min-height: 46px !important;
  padding: 11px 20px !important;
  border-radius: 12px !important;
}

@media (max-width: 779px) {
  .main-content > #quiz-cta-banner,
  .main-content > #match-cta-banner,
  .main-content > #wordle-cta-banner {
    display: flex !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 0 8px !important;
  }

  .live-bar {
    min-height: 34px !important;
  }

  .home-blog-cta {
    margin-top: 22px !important;
  }

  .home-blog-cta-inner {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px !important;
    text-align: left !important;
  }

  .home-blog-cta-mascot {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }

  .home-blog-cta-btn {
    width: 100% !important;
  }
}

.site-footer {
  margin-top: 22px !important;
  padding: 16px 0 calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  opacity: 0.82;
}

.footer-content {
  justify-content: center !important;
  gap: 10px !important;
  text-align: center;
}

.footer-brand {
  width: 100%;
  margin: 0 !important;
  font-size: 0.74rem !important;
}

.footer-links {
  justify-content: center !important;
  gap: 6px !important;
}

.footer-link {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  font-size: 0.75rem !important;
}

.footer-dev {
  display: none !important;
}

@media (max-width: 720px) {
  .site-footer {
    margin-top: 14px !important;
    padding-top: 10px !important;
  }

  .footer-link {
    min-height: 32px !important;
    padding: 6px 9px !important;
    font-size: 0.72rem !important;
  }
}

/* v86 - workspace pages */
.workspace-nav-section {
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(167, 139, 250, 0.08), rgba(251, 113, 133, 0.06));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.workspace-nav-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}

.workspace-nav-kicker,
.app-page-kicker {
  color: #67e8f9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-nav-title {
  margin: 4px 0 0;
  font-size: 1.12rem;
  line-height: 1.2;
}

.workspace-nav-desc {
  margin: 0;
  color: rgba(245, 245, 255, 0.68);
  font-size: 0.86rem;
  line-height: 1.45;
}

.workspace-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.workspace-nav-card {
  min-height: 88px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  text-decoration: none;
}

.workspace-nav-card:hover {
  border-color: rgba(103, 232, 249, 0.34);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.workspace-nav-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.15rem;
}

.workspace-nav-card strong,
.workspace-nav-card small {
  display: block;
  min-width: 0;
}

.workspace-nav-card strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

.workspace-nav-card small {
  margin-top: 3px;
  color: rgba(245, 245, 255, 0.62);
  font-size: 0.72rem;
  line-height: 1.3;
}

.app-page-hero {
  margin: 10px 0 16px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(167, 139, 250, 0.1), rgba(251, 113, 133, 0.08));
}

.app-page-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  color: rgba(245, 245, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.app-page-back::before {
  content: "←";
}

.app-page-title {
  margin: 4px 0 6px;
  font-size: clamp(1.65rem, 4vw, 2.8rem);
  line-height: 1;
}

.app-page-desc {
  max-width: 680px;
  margin: 0;
  color: rgba(245, 245, 255, 0.72);
  line-height: 1.5;
}

body[data-page-mode="home"] #saved-section,
body[data-page-mode="home"] #tracker-section,
body[data-page-mode="home"] #collections-section {
  display: none !important;
}

body[data-page-mode="tracker"] .hero-section,
body[data-page-mode="tracker"] #live-bar,
body[data-page-mode="tracker"] #quiz-cta-banner,
body[data-page-mode="tracker"] #match-cta-banner,
body[data-page-mode="tracker"] #wordle-cta-banner,
body[data-page-mode="tracker"] #workspace-nav-section,
body[data-page-mode="tracker"] #daily-pick-section,
body[data-page-mode="tracker"] #announcement-bar,
body[data-page-mode="tracker"] #promo-banner,
body[data-page-mode="tracker"] #sub-plans-banner,
body[data-page-mode="tracker"] #trending-section,
body[data-page-mode="tracker"] #ai-section,
body[data-page-mode="tracker"] #mood-section,
body[data-page-mode="tracker"] #filters-section,
body[data-page-mode="tracker"] #result-section,
body[data-page-mode="tracker"] #saved-section,
body[data-page-mode="tracker"] #collections-section,
body[data-page-mode="tracker"] #duo-section,
body[data-page-mode="tracker"] .home-blog-cta,
body[data-page-mode="notes"] .hero-section,
body[data-page-mode="notes"] #live-bar,
body[data-page-mode="notes"] #quiz-cta-banner,
body[data-page-mode="notes"] #match-cta-banner,
body[data-page-mode="notes"] #wordle-cta-banner,
body[data-page-mode="notes"] #workspace-nav-section,
body[data-page-mode="notes"] #daily-pick-section,
body[data-page-mode="notes"] #announcement-bar,
body[data-page-mode="notes"] #promo-banner,
body[data-page-mode="notes"] #sub-plans-banner,
body[data-page-mode="notes"] #trending-section,
body[data-page-mode="notes"] #ai-section,
body[data-page-mode="notes"] #mood-section,
body[data-page-mode="notes"] #filters-section,
body[data-page-mode="notes"] #result-section,
body[data-page-mode="notes"] #saved-section,
body[data-page-mode="notes"] #collections-section,
body[data-page-mode="notes"] #duo-section,
body[data-page-mode="notes"] .home-blog-cta,
body[data-page-mode="watchlist"] .hero-section,
body[data-page-mode="watchlist"] #live-bar,
body[data-page-mode="watchlist"] #quiz-cta-banner,
body[data-page-mode="watchlist"] #match-cta-banner,
body[data-page-mode="watchlist"] #wordle-cta-banner,
body[data-page-mode="watchlist"] #workspace-nav-section,
body[data-page-mode="watchlist"] #daily-pick-section,
body[data-page-mode="watchlist"] #announcement-bar,
body[data-page-mode="watchlist"] #promo-banner,
body[data-page-mode="watchlist"] #sub-plans-banner,
body[data-page-mode="watchlist"] #trending-section,
body[data-page-mode="watchlist"] #ai-section,
body[data-page-mode="watchlist"] #mood-section,
body[data-page-mode="watchlist"] #filters-section,
body[data-page-mode="watchlist"] #result-section,
body[data-page-mode="watchlist"] #tracker-section,
body[data-page-mode="watchlist"] #collections-section,
body[data-page-mode="watchlist"] #duo-section,
body[data-page-mode="watchlist"] .home-blog-cta,
body[data-page-mode="collections"] .hero-section,
body[data-page-mode="collections"] #live-bar,
body[data-page-mode="collections"] #quiz-cta-banner,
body[data-page-mode="collections"] #match-cta-banner,
body[data-page-mode="collections"] #wordle-cta-banner,
body[data-page-mode="collections"] #workspace-nav-section,
body[data-page-mode="collections"] #daily-pick-section,
body[data-page-mode="collections"] #announcement-bar,
body[data-page-mode="collections"] #promo-banner,
body[data-page-mode="collections"] #sub-plans-banner,
body[data-page-mode="collections"] #trending-section,
body[data-page-mode="collections"] #ai-section,
body[data-page-mode="collections"] #mood-section,
body[data-page-mode="collections"] #filters-section,
body[data-page-mode="collections"] #result-section,
body[data-page-mode="collections"] #saved-section,
body[data-page-mode="collections"] #tracker-section,
body[data-page-mode="collections"] #duo-section,
body[data-page-mode="collections"] .home-blog-cta {
  display: none !important;
}

body[data-page-mode="tracker"] #tracker-section,
body[data-page-mode="notes"] #tracker-section,
body[data-page-mode="watchlist"] #saved-section,
body[data-page-mode="collections"] #collections-section {
  display: block !important;
  margin-top: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body[data-page-mode="tracker"] #app-page-hero,
body[data-page-mode="notes"] #app-page-hero,
body[data-page-mode="watchlist"] #app-page-hero,
body[data-page-mode="collections"] #app-page-hero {
  display: block !important;
}

body[data-page-mode="notes"] #tracker-section .tracker-open-list,
body[data-page-mode="notes"] #tracker-section .tracker-header,
body[data-page-mode="notes"] #tracker-section .tracker-grid,
body[data-page-mode="notes"] #tracker-section .tracker-recent {
  display: none !important;
}

body[data-page-mode="notes"] #tracker-section {
  max-width: 760px;
}

body[data-page-mode="watchlist"] #saved-section .saved-body {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
  .workspace-nav-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .workspace-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .workspace-nav-section,
  .app-page-hero {
    border-radius: 14px;
    padding: 14px;
  }

  .workspace-nav-grid {
    grid-template-columns: 1fr;
  }

  .workspace-nav-card {
    min-height: 72px;
  }
}

/* ────────────────────────────────────────────────────────────────
   IMPROVED BUTTON STYLES - Enhanced UX & Accessibility
   ──────────────────────────────────────────────────────────────── */

/* Enhanced button focus styles for keyboard navigation */
.action-btn:focus-visible,
.mood-btn:focus-visible,
.pick-btn:focus-visible,
.lucky-btn:focus-visible,
.tab-btn:focus-visible,
.saved-tab:focus-visible,
.reset-filters-btn:focus-visible,
.modal-close:focus-visible,
.ai-search-btn:focus-visible,
.ai-chip:focus-visible,
.save-btn:focus-visible,
.share-btn:focus-visible,
.trailer-btn:focus-visible,
.watched-btn:focus-visible,
.link-btn:focus-visible,
.gift-btn:focus-visible,
.feedback-mini-btn:focus-visible,
.more-btn:focus-visible,
.duo-btn:focus-visible,
.movie-night-btn:focus-visible,
.support-btn:focus-visible,
.collections-create-btn:focus-visible,
.col-tab:focus-visible,
.tracker-open-list:focus-visible,
.auth-submit:focus-visible,
.auth-google-btn:focus-visible,
.auth-switch-btn:focus-visible,
.profile-username-save:focus-visible,
.profile-upload-clear:focus-visible,
.error-retry-btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Improved action buttons with better hover states */
.action-btn {
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
}

.action-btn:hover::before {
  opacity: 1;
}

.action-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Improved save button with better feedback */
.save-btn {
  transition: all 0.2s var(--ease);
}

.save-btn:hover {
  background: #ec48992f;
  border-color: #ec48996d;
  color: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
}

.save-btn.saved {
  animation: heartBeat 0.6s var(--spring);
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  15% { transform: scale(1.2); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Improved pick button with better loading state */
.pick-btn.loading {
  pointer-events: none;
  opacity: 0.8;
}

.pick-btn.loading .pick-btn-content {
  gap: 8px;
}

.pick-btn.loading .pick-btn-icon {
  animation: spin 1s linear infinite;
}

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

/* Improved lucky button with better animation */
.lucky-btn {
  position: relative;
  overflow: visible;
}

.lucky-btn::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  border: 1px dashed rgba(6, 214, 160, 0.3);
  animation: dashFloat 3s linear infinite;
  pointer-events: none;
}

.lucky-btn:hover::after {
  animation: dashFloat 2s linear infinite;
}

@keyframes dashFloat {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* Improved more button with better loading state */
.more-btn.loading {
  pointer-events: none;
  opacity: 0.9;
}

.more-btn.loading .more-btn-shimmer {
  display: none;
}

.more-btn.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Improved action buttons group spacing */
.result-actions {
  gap: 8px;
}

.result-actions .action-btn {
  padding: 10px 16px;
  font-size: 0.8rem;
}

/* Improved share button dropdown menu */
.share-btn-menu {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  background: #1a1a2e;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.2s var(--ease);
}

.share-btn-menu.visible {
  transform: translateY(0);
  opacity: 1;
}

.share-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s var(--ease);
  width: 100%;
}

.share-menu-item:hover {
  background: #8b5cf61f;
}

.share-menu-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Improved gift button with animation */
.gift-btn {
  transition: all 0.3s var(--spring);
}

.gift-btn:active {
  transform: scale(0.95) rotate(5deg);
}

/* Improved feedback button with badge */
.feedback-mini-btn {
  position: relative;
}

.feedback-mini-btn::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  background: var(--accent2);
  border-radius: 50%;
  border: 2px solid var(--bg);
  animation: pulseBadge 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseBadge {
  0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(236, 72, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
}

/* Improved duo button */
.duo-btn {
  position: relative;
  overflow: hidden;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.05));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  margin-bottom: 16px;
}

.duo-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.1));
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
}

.duo-btn:active {
  transform: scale(0.98);
}

.duo-btn-icon {
  font-size: 2rem;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.duo-btn-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}

.duo-btn-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.duo-btn-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.duo-btn-arrow {
  font-size: 1.2rem;
  color: var(--accent-light);
  transition: transform 0.3s var(--ease);
}

.duo-btn:hover .duo-btn-arrow {
  transform: translateX(4px);
}

/* Improved movie night button */
.movie-night-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(236, 72, 153, 0.1));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  margin-bottom: 16px;
}

.movie-night-btn:hover {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(236, 72, 153, 0.2));
  border-color: #f97316;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.3);
}

.movie-night-btn:active {
  transform: scale(0.98);
}

.movie-night-icon {
  font-size: 1.4rem;
  animation: popcornPop 0.6s var(--spring) infinite;
}

@keyframes popcornPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2) rotate(5deg); }
}

/* Improved support button */
.support-btn {
  position: relative;
  overflow: hidden;
  padding: 12px 20px;
  background: var(--gradient-main);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.support-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

.support-btn:active {
  transform: scale(0.98);
}

.support-btn-icon {
  font-size: 1rem;
  animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Improved collections create button */
.collections-create-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--gradient-main);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.collections-create-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

.collections-create-btn:active {
  transform: scale(0.9);
}

/* Improved tab buttons with better active state */
.col-tab {
  position: relative;
  padding: 8px 16px;
  background: #ffffff05;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.col-tab.active {
  background: var(--gradient-main);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 16px var(--accent-glow);
}

.col-tab-count {
  margin-left: 6px;
  padding: 2px 8px;
  background: #ffffff1a;
  border-radius: 100px;
  font-size: 0.7rem;
}

/* Improved auth buttons */
.auth-submit {
  width: 100%;
  padding: 14px;
  background: var(--gradient-main);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  margin-top: 12px;
}

.auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

.auth-submit:active {
  transform: scale(0.98);
}

.auth-google-btn {
  width: 100%;
  padding: 12px;
  background: #fff;
  color: #1a1a2e;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.auth-google-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.auth-google-btn:active {
  transform: scale(0.98);
}

/* Improved profile buttons */
.profile-username-save {
  padding: 10px 16px;
  background: var(--gradient-main);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.profile-username-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.profile-upload-clear {
  width: 36px;
  height: 36px;
  padding: 0;
  background: #ef444420;
  color: #ef4444;
  border: 1px solid #ef44444d;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-upload-clear:hover {
  background: #ef444430;
  transform: scale(1.05);
}

/* Improved error retry button */
.error-retry-btn {
  width: 100%;
  padding: 14px;
  background: var(--gradient-main);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  margin-top: 16px;
}

.error-retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

.error-retry-btn:active {
  transform: scale(0.98);
}

/* Improved tracker button */
.tracker-open-list {
  padding: 8px 16px;
  background: #ffffff10;
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.tracker-open-list:hover {
  background: #ffffff1a;
  border-color: var(--accent);
}

/* Improved badge animations */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

/* Improved mobile button sizes */
@media (max-width: 600px) {
  .action-btn {
    padding: 8px 12px;
    font-size: 0.75rem;
  }
  
  .duo-btn {
    padding: 16px 20px;
    gap: 16px;
  }
  
  .duo-btn-icon {
    font-size: 1.6rem;
  }
  
  .duo-btn-title {
    font-size: 0.9rem;
  }
  
  .duo-btn-desc {
    font-size: 0.75rem;
  }
  
  .movie-night-btn {
    padding: 16px 20px;
    font-size: 0.95rem;
  }
  
  .support-btn {
    padding: 10px 16px;
    font-size: 0.85rem;
  }
}

/* Improved contrast for accessibility */
@media (prefers-contrast: more) {
  .action-btn {
    border-width: 2px;
  }
  
  .mood-btn {
    border-width: 2px;
  }
  
  .pick-btn-bg {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .duo-btn:hover {
    transform: none;
  }
  
  .movie-night-icon {
    animation: none;
  }
}

/* Dark mode support (already implemented) */
/* High contrast mode */
@media (prefers-contrast: high) {
  .action-btn:focus-visible {
    outline-width: 3px;
  }
  
  .save-btn.saved {
    border-color: var(--accent2);
    border-width: 2px;
  }
}

/* Picksy workspace/app polish */
.header {
  gap: 16px;
  align-items: center;
}

.logo {
  color: inherit;
  text-decoration: none;
}

.desktop-space-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  min-width: 0;
}

.desktop-space-nav a {
  color: rgba(245,245,255,.7);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 750;
  padding: 9px 11px;
  border-radius: 10px;
  white-space: nowrap;
}

.desktop-space-nav a:hover,
.desktop-space-nav a.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(236,72,153,.24));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.quizzes-section {
  display: none;
  padding: 22px;
  border-radius: 18px;
  margin-bottom: 24px;
}

.quizzes-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 16px;
}

.quizzes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.quiz-menu-card {
  min-height: 132px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  color: #fff;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.quiz-menu-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.36);
  background: linear-gradient(145deg, rgba(56,189,248,.12), rgba(236,72,153,.08));
}

.quiz-menu-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #38bdf8, #ec4899);
  box-shadow: 0 12px 28px rgba(56,189,248,.22);
}

.quiz-menu-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

.quiz-menu-card small {
  display: block;
  color: rgba(245,245,255,.68);
  line-height: 1.45;
}

body[data-page-mode="quizzes"] #quizzes-section {
  display: block !important;
}

body[data-page-mode="quizzes"] .hero-section,
body[data-page-mode="quizzes"] #live-bar,
body[data-page-mode="quizzes"] #quiz-cta-banner,
body[data-page-mode="quizzes"] #match-cta-banner,
body[data-page-mode="quizzes"] #wordle-cta-banner,
body[data-page-mode="quizzes"] #workspace-nav-section,
body[data-page-mode="quizzes"] #daily-pick-section,
body[data-page-mode="quizzes"] #announcement-bar,
body[data-page-mode="quizzes"] #promo-banner,
body[data-page-mode="quizzes"] #sub-plans-banner,
body[data-page-mode="quizzes"] #trending-section,
body[data-page-mode="quizzes"] #ai-section,
body[data-page-mode="quizzes"] #mood-section,
body[data-page-mode="quizzes"] #filters-section,
body[data-page-mode="quizzes"] #result-section,
body[data-page-mode="quizzes"] #saved-section,
body[data-page-mode="quizzes"] #tracker-section,
body[data-page-mode="quizzes"] #collections-section,
body[data-page-mode="quizzes"] #duo-section,
body[data-page-mode="quizzes"] .home-blog-cta {
  display: none !important;
}

body[data-page-mode="quizzes"] #app-page-hero {
  display: block !important;
}

.notes-workspace {
  display: grid;
  gap: 12px;
}

.notes-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.notes-head p {
  margin: 4px 0 0;
  color: rgba(245,245,255,.58);
  font-size: .88rem;
}

.notes-count-pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  color: rgba(245,245,255,.78);
  font-size: .78rem;
  white-space: nowrap;
}

.notes-actions,
.result-note-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notes-save-btn,
.result-note-actions button:first-child {
  border: 0;
  border-radius: 10px;
  padding: 11px 14px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, #38bdf8, #ec4899);
}

.notes-clear-btn,
.result-note-actions button:last-child {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 11px 14px;
  color: rgba(245,245,255,.78);
  font-weight: 750;
  cursor: pointer;
  background: rgba(255,255,255,.045);
}

.notes-list {
  display: grid;
  gap: 10px;
}

.notes-empty {
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.14);
  color: rgba(245,245,255,.58);
  text-align: center;
}

.note-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
}

.note-poster {
  width: 58px;
  height: 86px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
}

.note-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.note-top h3 {
  margin: 0;
  font-size: .95rem;
}

.note-top p,
.note-actions span {
  margin: 3px 0 0;
  color: rgba(245,245,255,.54);
  font-size: .76rem;
}

.note-text {
  margin: 8px 0;
  color: rgba(245,245,255,.82);
  line-height: 1.45;
}

.note-delete,
.note-detail {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(245,245,255,.78);
  border-radius: 9px;
  cursor: pointer;
}

.note-delete {
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
}

.note-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.note-detail {
  padding: 7px 10px;
  font-weight: 750;
}

.result-note-panel {
  max-width: 760px;
  margin: 12px auto 0;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(56,189,248,.18);
  background: linear-gradient(135deg, rgba(56,189,248,.09), rgba(236,72,153,.07));
}

.result-note-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.result-note-head strong,
.result-note-head span {
  display: block;
}

.result-note-head span {
  color: rgba(245,245,255,.58);
  font-size: .8rem;
  margin-top: 2px;
}

.result-note-head a {
  color: #67e8f9;
  text-decoration: none;
  font-weight: 800;
  font-size: .82rem;
}

.result-note-panel textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.22);
  color: #fff;
  padding: 12px;
  margin-bottom: 10px;
}

#recent-picks-modal .recent-picks-modal-content {
  width: min(760px, calc(100vw - 28px)) !important;
  max-height: min(86vh, 760px);
  padding: 18px !important;
  border-radius: 18px !important;
  overflow: hidden;
}

.recent-picks-icon.mascot-mini,
.mobile-nav-item[data-nav="pick"] .mobile-nav-icon {
  background: url("/og/picksy-mascot.svg") center/contain no-repeat;
}

.recent-picks-icon.mascot-mini {
  width: 34px;
  height: 34px;
  display: inline-block;
}

#recent-picks-list.recent-picks-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px !important;
  overflow-y: auto;
  max-height: min(62vh, 620px);
  padding: 2px 4px 2px 0;
}

#recent-picks-list .recent-pick-item {
  appearance: none;
  width: 100%;
  display: grid !important;
  grid-template-columns: 74px 1fr !important;
  gap: 12px !important;
  text-align: left;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.045) !important;
  color: #fff;
}

#recent-picks-list .recent-pick-poster {
  width: 74px !important;
  height: 110px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}

.recent-pick-open {
  margin-top: auto;
  color: #67e8f9;
  font-size: .78rem;
  font-weight: 800;
}

.mobile-nav-item[data-nav="pick"] .mobile-nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(56,189,248,.28);
}

.mobile-nav-item[data-nav="pick"] .mobile-nav-icon svg {
  display: none;
}

.mobile-dynamic-island {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translate(-50%, -18px) scale(.94);
  z-index: 10050;
  max-width: min(88vw, 420px);
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,9,14,.94);
  color: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(56,189,248,.08);
  opacity: 0;
  pointer-events: none;
  font-size: .9rem;
  font-weight: 800;
  text-align: center;
  transition: opacity .24s ease, transform .24s ease;
}

.mobile-dynamic-island.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.theme-picker {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin-top: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
}

.theme-btn {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: rgba(245,245,255,.68);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
  font-size: .78rem;
}

.theme-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(56,189,248,.95), rgba(236,72,153,.95));
}

body.modal-open .mobile-nav,
body:has(#recent-picks-modal:not(.hidden)) .mobile-nav,
body:has(#game-modal:not(.hidden)) .mobile-nav,
body:has(#duo-modal:not(.hidden)) .mobile-nav {
  opacity: 0;
  transform: translateX(-50%) translateY(120%);
  pointer-events: none;
}

body[data-theme="light"] {
  background: #f6f7fb;
  color: #111827;
}

body[data-theme="light"] .glass-deep,
body[data-theme="light"] .glass {
  background: rgba(255,255,255,.82);
  border-color: rgba(17,24,39,.12);
  color: #111827;
}

body[data-theme="light"] .desktop-space-nav,
body[data-theme="light"] .tab-switch,
body[data-theme="light"] .lang-switch {
  background: rgba(255,255,255,.72);
  border-color: rgba(17,24,39,.12);
}

body[data-theme="light"] .desktop-space-nav a,
body[data-theme="light"] .quiz-menu-card small,
body[data-theme="light"] .notes-head p,
body[data-theme="light"] .note-text {
  color: rgba(17,24,39,.72);
}

body[data-theme="purple"] {
  background: radial-gradient(circle at 15% 0%, rgba(139,92,246,.24), transparent 32%), #090314;
}

@media (min-width: 1180px) {
  .header {
    max-width: 1180px;
  }
}

@media (max-width: 1100px) {
  .desktop-space-nav {
    display: none;
  }
}

@media (max-width: 760px) {
  .quizzes-grid {
    grid-template-columns: 1fr;
  }

  .quizzes-head,
  .notes-head,
  .result-note-head {
    flex-direction: column;
  }

  #recent-picks-modal .recent-picks-modal-content {
    width: calc(100vw - 14px) !important;
    padding: 14px !important;
  }

  #recent-picks-list.recent-picks-list {
    grid-template-columns: 1fr;
    max-height: 64vh;
  }

  #recent-picks-list .recent-pick-item {
    grid-template-columns: 64px 1fr !important;
  }

  #recent-picks-list .recent-pick-poster {
    width: 64px !important;
    height: 96px !important;
  }

  .recent-pick-overview {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

@media (min-width: 761px) {
  .mobile-dynamic-island {
    display: none !important;
  }
}

/* Final app-shell fixes: compact desktop header, contextual mobile nav, richer feedback */
@media (min-width: 901px) {
  .header {
    display: grid !important;
    grid-template-columns: auto minmax(220px, 1fr) auto auto;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-radius: 20px !important;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
  }

  .desktop-space-nav {
    justify-self: center;
    max-width: 560px;
    width: 100%;
    justify-content: center;
    padding: 5px !important;
    border-radius: 13px !important;
  }

  .desktop-space-nav a {
    padding: 8px 9px !important;
    font-size: .78rem !important;
  }

  .tab-switch {
    justify-self: end;
    max-width: 360px;
  }

  .header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  body:not([data-page-mode="home"]) .header {
    grid-template-columns: auto minmax(280px, 1fr) auto;
  }

  body:not([data-page-mode="home"]) .header .tab-switch {
    display: none !important;
  }
}

@media (min-width: 1180px) {
  .header {
    max-width: 1120px !important;
  }
}

.quiz-menu-icon {
  flex: 0 0 44px;
  overflow: hidden;
  font-size: 1.25rem;
  line-height: 1;
}

.quiz-menu-icon svg,
.mobile-nav-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  .quiz-menu-card {
    min-height: 92px;
    align-items: center;
    border-radius: 14px;
  }

  .quiz-menu-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 1rem;
  }
}

@media (max-width: 720px) {
  .mobile-nav {
    left: 12px !important;
    right: 12px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    transform: none !important;
    padding: 8px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(9, 10, 18, .84) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
    gap: 4px !important;
  }

  .mobile-nav-item {
    min-width: 0 !important;
    height: 58px !important;
    border-radius: 18px !important;
    padding: 6px 4px !important;
    gap: 4px !important;
    color: rgba(245,245,255,.58) !important;
    transition: transform .18s ease, background .18s ease, color .18s ease;
  }

  .mobile-nav-item.active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(56,189,248,.2), rgba(236,72,153,.18)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  }

  .mobile-nav-item:active {
    transform: scale(.96);
  }

  .mobile-nav-icon {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.055);
  }

  .mobile-nav-item[data-icon="mascot"] .mobile-nav-icon {
    width: 34px !important;
    height: 34px !important;
    background: url("/og/picksy-mascot.svg") center/contain no-repeat !important;
    box-shadow: 0 8px 22px rgba(56,189,248,.22);
  }

  .mobile-nav-item span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .68rem !important;
    font-weight: 800 !important;
  }
}

.mobile-dynamic-island {
  gap: 9px;
  justify-content: flex-start;
  overflow: hidden;
  padding: 9px 13px !important;
  min-height: 46px !important;
}

.mobile-dynamic-island-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(56,189,248,.18);
  color: #67e8f9;
  font-weight: 900;
}

.mobile-dynamic-island.success .mobile-dynamic-island-icon {
  background: rgba(34,197,94,.18);
  color: #86efac;
}

.mobile-dynamic-island.error .mobile-dynamic-island-icon {
  background: rgba(248,113,113,.18);
  color: #fca5a5;
}

.mobile-dynamic-island-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-dynamic-island-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, #38bdf8, #ec4899);
  transform-origin: left;
  animation: islandBar 2.3s linear forwards;
}

@keyframes islandBar {
  from { transform: scaleX(1); opacity: .9; }
  to { transform: scaleX(0); opacity: .25; }
}

body.modal-open .mobile-nav,
body:has(.modal:not(.hidden)) .mobile-nav,
body:has(.game-modal:not(.hidden)) .mobile-nav,
body:has(.gift-modal) .mobile-nav,
body:has(.gift-open-page) .mobile-nav {
  opacity: 0 !important;
  transform: translateY(120%) !important;
  pointer-events: none !important;
}

.quiz-cta-banner-icon-letter,
.wordle-cta-icon.quiz-cta-banner-icon-letter {
  font-family: var(--font);
  font-size: 1.05rem !important;
  font-weight: 950;
  letter-spacing: 0;
  color: #fff;
  text-shadow: none;
}

.main-content > #quiz-cta-banner .quiz-cta-banner-icon,
.main-content > #match-cta-banner .quiz-cta-banner-icon,
.main-content > #wordle-cta-banner .wordle-cta-icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#duo-section {
  border-radius: 18px;
  overflow: hidden;
}

#duo-btn.duo-btn {
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(56,189,248,.22) !important;
  background:
    radial-gradient(circle at 8% 20%, rgba(56,189,248,.18), transparent 30%),
    linear-gradient(135deg, rgba(16,20,34,.94), rgba(29,16,42,.94)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: #fff !important;
}

#duo-btn.duo-btn:hover {
  border-color: rgba(236,72,153,.34) !important;
  background:
    radial-gradient(circle at 8% 20%, rgba(56,189,248,.24), transparent 32%),
    linear-gradient(135deg, rgba(20,28,46,.96), rgba(41,18,52,.96)) !important;
}

.duo-btn-mascot {
  width: 54px !important;
  height: 54px !important;
  border-radius: 17px !important;
  background:
    url("/og/picksy-mascot.svg") center/contain no-repeat,
    linear-gradient(135deg, rgba(56,189,248,.18), rgba(236,72,153,.18)) !important;
  box-shadow: 0 12px 30px rgba(56,189,248,.18) !important;
}

#duo-btn .duo-btn-title {
  font-size: 1.05rem !important;
  color: #fff !important;
}

#duo-btn .duo-btn-desc {
  color: rgba(245,245,255,.66) !important;
  max-width: 560px;
}

#duo-btn .duo-btn-badge {
  background: linear-gradient(135deg, #38bdf8, #ec4899) !important;
  color: #fff !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 34px !important;
  height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transform: translateY(-1px);
}

#duo-btn .duo-btn-arrow {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  color: #67e8f9;
}

@media (max-width: 620px) {
  #duo-btn.duo-btn {
    grid-template-columns: 48px minmax(0, 1fr) 32px !important;
    min-height: 82px !important;
    padding: 14px !important;
    gap: 12px !important;
  }

  .duo-btn-mascot {
    width: 48px !important;
    height: 48px !important;
  }

  #duo-btn .duo-btn-title {
    font-size: .96rem !important;
  }

  #duo-btn .duo-btn-desc {
    font-size: .76rem !important;
    line-height: 1.35;
  }
}

/* Hide home picker controls everywhere outside the home page. */
body:not([data-page-mode="home"]) .tab-switch,
body:not([data-page-mode="home"]) .pick-buttons,
body:not([data-page-mode="home"]) .hide-seen-toggle {
  display: none !important;
}

/* Cleaner desktop app header: home gets tabs, inner pages get workspace nav. */
@media (min-width: 901px) {
  body[data-page-mode="home"] .desktop-space-nav {
    display: none !important;
  }

  body[data-page-mode="home"] .header {
    grid-template-columns: auto minmax(360px, 520px) auto !important;
  }

  body[data-page-mode="home"] .tab-switch {
    justify-self: center !important;
    width: min(520px, 100%) !important;
  }

  body:not([data-page-mode="home"]) .header {
    grid-template-columns: auto minmax(320px, 1fr) auto !important;
  }

  body:not([data-page-mode="home"]) .desktop-space-nav {
    display: flex !important;
    justify-self: center !important;
    width: min(560px, 100%) !important;
  }

  .header-right {
    min-width: 0;
  }

  .user-btn {
    max-width: 210px;
  }
}

@media (max-width: 900px) {
  body:not([data-page-mode="home"]) .header {
    grid-template-columns: auto auto !important;
    justify-content: space-between;
  }

  body:not([data-page-mode="home"]) .header-right {
    margin-left: auto;
  }
}

.note-overview {
  margin: 6px 0 8px;
  color: rgba(245,245,255,.58);
  font-size: .78rem;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Final polish: keep mobile header useful, colorful, and compact. */
.header {
  background:
    linear-gradient(135deg, rgba(12,18,31,.92), rgba(31,18,48,.9)),
    radial-gradient(circle at 10% 0%, rgba(56,189,248,.16), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(236,72,153,.14), transparent 30%) !important;
  border-color: rgba(125,211,252,.16) !important;
}

.header .lang-switch {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 12px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

.header .lang-btn {
  min-width: 35px;
  min-height: 28px;
  padding: 0 9px !important;
  border-radius: 9px !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
}

.header .lang-btn.active {
  background: linear-gradient(135deg, #38bdf8, #fb7185) !important;
  color: #081019 !important;
}

#duo-btn .duo-btn-badge {
  position: relative !important;
  top: -4px !important;
  right: auto !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 38px !important;
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #38bdf8, #a78bfa 52%, #ec4899) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 8px 20px rgba(236,72,153,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  transform: translateY(-2px) !important;
}

#duo-btn .duo-btn-title {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-theme="light"] .header {
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.9)),
    radial-gradient(circle at 10% 0%, rgba(14,165,233,.12), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(236,72,153,.1), transparent 30%) !important;
  border-color: rgba(15,23,42,.1) !important;
}

body[data-theme="light"] #duo-btn.duo-btn,
body[data-theme="light"] .saved-section,
body[data-theme="light"] .ai-section,
body[data-theme="light"] .quizzes-section,
body[data-theme="light"] .tracker-section {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(241,245,249,.94)) !important;
  border-color: rgba(15,23,42,.1) !important;
}

@media (max-width: 900px) {
  .header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
  }

  .header-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .logo {
    min-width: 0;
    font-size: 1.05rem !important;
  }

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

  .header-right .lang-switch {
    order: 1;
  }

  .header-right .user-btn {
    order: 2;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
  }

  .header-right .user-btn .user-name {
    display: none !important;
  }

  .desktop-space-nav {
    display: none !important;
  }

  body[data-page-mode="home"] .tab-switch {
    grid-column: 1 / -1;
    width: 100% !important;
    margin-top: 2px;
  }

  body:not([data-page-mode="home"]) .header {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 520px) {
  .header {
    margin: 10px 8px 14px !important;
  }

  .header .lang-btn {
    min-width: 31px;
    min-height: 28px;
    padding: 0 7px !important;
    font-size: .68rem !important;
  }

  #duo-btn.duo-btn {
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 8% 18%, rgba(56,189,248,.22), transparent 32%),
      linear-gradient(135deg, rgba(12,23,38,.96), rgba(37,19,48,.96)) !important;
  }

  #duo-btn .duo-btn-badge {
    min-width: 34px !important;
    height: 23px !important;
    font-size: .66rem !important;
  }
}

/* Final UI tune-up: avoid white-filled active controls and make app surfaces richer. */
.tab-btn.active,
.saved-tab.active,
.saved-cat-tab.active,
.col-tab.active,
.profile-tab-btn.active,
.profile-hf-btn.active,
.lang-btn.active,
.recent-picks-filter.active,
.gift-tab.active,
.gift-mode-btn.active {
  background: linear-gradient(135deg, #38bdf8, #a78bfa 52%, #fb7185) !important;
  color: #07111f !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 24px rgba(56,189,248,.16), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

body[data-theme="light"] .tab-btn.active,
body[data-theme="light"] .saved-tab.active,
body[data-theme="light"] .saved-cat-tab.active,
body[data-theme="light"] .col-tab.active,
body[data-theme="light"] .profile-tab-btn.active,
body[data-theme="light"] .profile-hf-btn.active,
body[data-theme="light"] .lang-btn.active {
  color: #07111f !important;
}

#duo-btn .duo-btn-badge {
  position: relative !important;
  top: -2px !important;
  right: auto !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: visible !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
  min-width: 38px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #38bdf8, #a78bfa 52%, #ec4899) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 8px 20px rgba(236,72,153,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.saved-section.glass-deep,
.collections-section.glass-deep,
.tracker-section.glass-deep {
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,.12), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(236,72,153,.11), transparent 26%),
    linear-gradient(135deg, rgba(10,15,26,.91), rgba(28,16,37,.9)) !important;
  border-color: rgba(125,211,252,.16) !important;
}

.saved-category-tabs,
.saved-tabs,
.collections-tabs {
  padding: 6px !important;
  gap: 6px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.045) !important;
}

.saved-tab,
.saved-cat-tab,
.col-tab {
  min-height: 42px;
  border-radius: 11px !important;
}

.saved-list {
  gap: 12px !important;
}

.saved-item {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}

.saved-item:hover {
  border-color: rgba(56,189,248,.22) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
}

.saved-item-poster {
  width: 62px !important;
  height: 88px !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}

.saved-item-title {
  color: #f8fafc !important;
  font-size: 1rem !important;
}

.saved-item-sub,
.saved-item-date {
  color: rgba(226,232,240,.62) !important;
}

.saved-progress-chip,
.tracker-recent-progress {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.22);
  color: #7dd3fc;
  font-size: .72rem;
  font-weight: 800;
}

.saved-progress-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.saved-progress-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(226,232,240,.72);
  font-size: .75rem;
  font-weight: 800;
}

.saved-progress-input {
  width: 58px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
  text-align: center;
  font: inherit;
}

.saved-complete-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(34,197,94,.24);
  background: rgba(34,197,94,.09);
  color: #bbf7d0;
  font-size: .75rem;
  font-weight: 900;
  cursor: pointer;
}

.saved-complete-btn.active {
  background: linear-gradient(135deg, rgba(34,197,94,.3), rgba(56,189,248,.18)) !important;
  color: #ecfdf5 !important;
}

.saved-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.saved-item-action {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.055) !important;
  color: rgba(226,232,240,.78) !important;
  padding: 0 !important;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.saved-item-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saved-item-action:hover {
  background: rgba(56,189,248,.12) !important;
  border-color: rgba(56,189,248,.28) !important;
  color: #bae6fd !important;
}

.saved-item-remove:hover {
  background: rgba(248,113,113,.14) !important;
  border-color: rgba(248,113,113,.3) !important;
  color: #fecaca !important;
}

.collection-card,
.col-detail-item {
  border-radius: 16px !important;
  border-color: rgba(255,255,255,.1) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
}

.collection-card:hover,
.col-detail-item:hover {
  background:
    radial-gradient(circle at 0 0, rgba(139,92,246,.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  border-color: rgba(167,139,250,.28) !important;
}

.result-card-inner {
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,.14), transparent 32%),
    radial-gradient(circle at 100% 0, rgba(236,72,153,.12), transparent 30%),
    linear-gradient(135deg, rgba(12,16,27,.94), rgba(23,23,36,.93)) !important;
}

.result-meta {
  gap: 8px !important;
}

.meta-tag {
  border-radius: 999px !important;
  background: rgba(56,189,248,.1) !important;
  border-color: rgba(56,189,248,.2) !important;
  color: #bae6fd !important;
}

.meta-tag:nth-child(2n) {
  background: rgba(167,139,250,.11) !important;
  border-color: rgba(167,139,250,.22) !important;
  color: #ddd6fe !important;
}

.meta-tag:nth-child(3n) {
  background: rgba(251,113,133,.1) !important;
  border-color: rgba(251,113,133,.2) !important;
  color: #fecdd3 !important;
}

@media (max-width: 620px) {
  .saved-item {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .saved-item .drag-handle {
    display: none !important;
  }

  .saved-item-actions,
  .saved-progress-row {
    grid-column: 1 / -1;
  }

  .saved-item-poster {
    width: 56px !important;
    height: 80px !important;
  }

  .saved-item-actions {
    justify-content: space-between;
  }

  .saved-item-action {
    flex: 1;
    max-width: 54px;
  }
}

/* v188 - desktop saved layout, editable notes and richer tracker */
@media (min-width: 621px) {
  .saved-list {
    max-height: min(62vh, 720px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,.65) rgba(255,255,255,.06);
  }

  .saved-list::-webkit-scrollbar {
    width: 8px;
  }

  .saved-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05);
    border-radius: 999px;
  }

  .saved-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #38bdf8, #a78bfa, #ec4899);
    border-radius: 999px;
  }

  .saved-item {
    min-height: 120px !important;
  }

  .saved-item:not(.watched-item) {
    grid-template-columns: 28px 76px minmax(0, 1fr) auto !important;
  }

  .saved-item.watched-item {
    grid-template-columns: 76px minmax(0, 1fr) auto !important;
  }

  .saved-item:not(.watched-item) .drag-handle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .saved-item:not(.watched-item) .saved-item-poster {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  .saved-item:not(.watched-item) .saved-item-info {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  .saved-item:not(.watched-item) .saved-item-actions {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .saved-item.watched-item .saved-item-poster {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  .saved-item.watched-item .saved-item-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  .saved-item.watched-item .saved-item-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .saved-item-poster {
    width: 76px !important;
    height: 104px !important;
  }

  .saved-item-actions {
    flex-wrap: nowrap !important;
    min-width: max-content !important;
  }
}

.note-card {
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,.11), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
}

.note-text {
  color: rgba(248,250,252,.9) !important;
  line-height: 1.55 !important;
}

.note-edit-input {
  width: 100% !important;
  min-height: 128px !important;
  resize: vertical !important;
  margin: 8px 0 2px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(125,211,252,.24) !important;
  background: rgba(7,10,19,.68) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  font: inherit !important;
  line-height: 1.5 !important;
}

.note-edit-input:focus {
  outline: none !important;
  border-color: rgba(236,72,153,.4) !important;
  box-shadow:
    0 0 0 3px rgba(236,72,153,.12),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.note-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.note-edit,
.note-detail,
.note-edit-save,
.note-edit-cancel {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(125,211,252,.2) !important;
  background: rgba(56,189,248,.09) !important;
  color: #bae6fd !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.note-edit:hover,
.note-detail:hover,
.note-edit-save:hover,
.note-edit-cancel:hover {
  background: rgba(167,139,250,.14) !important;
  border-color: rgba(167,139,250,.3) !important;
  color: #f8fafc !important;
}

.note-card:has(.note-edit-input) .note-edit {
  display: none !important;
}

.note-edit-save {
  background: linear-gradient(135deg, #38bdf8, #a78bfa 55%, #ec4899) !important;
  color: #08111f !important;
  border-color: rgba(255,255,255,.2) !important;
}

.note-edit-cancel {
  background: rgba(255,255,255,.055) !important;
  color: rgba(226,232,240,.78) !important;
}

.note-delete {
  border-radius: 12px !important;
  background: rgba(248,113,113,.1) !important;
  border: 1px solid rgba(248,113,113,.2) !important;
  color: #fecaca !important;
}

.tracker-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}

.tracker-insight-card {
  min-height: 78px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 0 0, rgba(125,211,252,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
}

.tracker-insight-card span {
  display: block;
  color: rgba(226,232,240,.64);
  font-size: .78rem;
  font-weight: 850;
}

.tracker-insight-card strong {
  display: block;
  margin-top: 8px;
  color: #f8fafc;
  font-size: 1.45rem;
  line-height: 1;
}

@media (max-width: 780px) {
  .tracker-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v195 - homepage flow and live activity */
body:not([data-page-mode="home"]) #home-picker-shell,
body:not([data-page-mode="home"]) #home-now-shell,
body:not([data-page-mode="home"]) #home-play-shell {
  display: none !important;
}

body[data-page-mode="home"] .hero-section {
  border-bottom: 1px solid rgba(125, 211, 252, .12) !important;
}

body[data-page-mode="home"] #live-bar {
  min-height: 52px !important;
  margin-bottom: 0 !important;
  padding: 10px 14px 10px 11px !important;
  border: 1px solid rgba(251, 113, 133, .28) !important;
  border-left: 3px solid #fb7185 !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(31, 15, 27, .94), rgba(11, 28, 34, .92) 60%, rgba(22, 22, 31, .92)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
}

body[data-page-mode="home"] #live-bar .live-bar-scan {
  display: block !important;
  background:
    linear-gradient(100deg, transparent 0%, transparent 44%, rgba(125, 211, 252, .13) 50%, transparent 56%, transparent 100%) !important;
  background-size: 230% 100% !important;
  animation: homeSignalSweep 5.5s linear infinite !important;
}

body[data-page-mode="home"] #live-bar .live-bar-badge {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, .28) !important;
}

body[data-page-mode="home"] #live-bar .live-bar-arrow {
  background: rgba(125, 211, 252, .09) !important;
  border-color: rgba(125, 211, 252, .2) !important;
  color: #bae6fd !important;
}

@keyframes homeSignalSweep {
  from { background-position: 210% 0; }
  to { background-position: -210% 0; }
}

.home-picker-shell {
  position: relative;
  margin: 16px 0 20px;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(56, 189, 248, .2);
  border-bottom: 1px solid rgba(251, 113, 133, .17);
  background:
    linear-gradient(135deg, rgba(56, 189, 248, .055), rgba(167, 139, 250, .045) 48%, rgba(251, 113, 133, .05));
  overflow: hidden;
}

.home-picker-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #34d399, #fbbf24, #fb7185, #38bdf8);
  background-size: 220% 100%;
  animation: homePickerSignal 7s linear infinite;
}

@keyframes homePickerSignal {
  from { background-position: 0 0; }
  to { background-position: 220% 0; }
}

.home-picker-intro,
.home-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.home-picker-intro {
  padding: 0 4px;
  margin-bottom: 16px;
}

.home-section-kicker {
  display: block;
  margin-bottom: 5px;
  color: #67e8f9;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-picker-intro h2,
.home-section-heading h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.home-picker-intro p {
  max-width: 620px;
  margin: 6px 0 0;
  color: rgba(226, 232, 240, .65);
  font-size: .86rem;
  line-height: 1.45;
}

.home-live-open {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 184px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(52, 211, 153, .24);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(52, 211, 153, .11), rgba(56, 189, 248, .07));
  color: #d1fae5;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.home-live-open-signal {
  position: relative;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 5px rgba(52, 211, 153, .1);
  animation: homeLiveDot 1.7s ease-in-out infinite;
}

.home-live-open-copy {
  min-width: 0;
}

.home-live-open-copy strong,
.home-live-open-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-live-open-copy strong {
  color: #ecfdf5;
  font-size: .76rem;
  font-weight: 900;
}

.home-live-open-copy small {
  margin-top: 2px;
  color: rgba(167, 243, 208, .68);
  font-size: .66rem;
  font-weight: 750;
}

.home-live-open svg {
  color: #67e8f9;
}

.home-live-open:hover {
  transform: translateY(-1px);
  border-color: rgba(52, 211, 153, .42);
  background: rgba(52, 211, 153, .14);
  box-shadow: 0 10px 24px rgba(52, 211, 153, .1);
}

@keyframes homeLiveDot {
  50% { opacity: .45; box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

.home-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 14px;
  align-items: start;
}

.home-picker-grid > #ai-section,
.home-picker-grid > #mood-section,
.home-picker-grid > #filters-section,
.home-picker-grid > .pick-section,
.home-picker-grid > .hide-seen-toggle,
.home-picker-grid > #result-section {
  min-width: 0;
  margin: 0 !important;
}

.home-picker-grid > #ai-section {
  grid-column: 1;
  padding: 18px !important;
  border-color: rgba(56, 189, 248, .18) !important;
  background:
    linear-gradient(145deg, rgba(10, 31, 41, .82), rgba(30, 21, 46, .78)) !important;
}

.home-picker-grid > #mood-section {
  grid-column: 2;
  padding: 16px;
  border: 1px solid rgba(251, 191, 36, .15);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(39, 31, 17, .6), rgba(22, 26, 37, .76));
}

.home-picker-grid > #mood-section .section-title {
  justify-content: flex-start;
  margin: 0 0 11px;
}

.home-picker-grid > #mood-section .section-title::before,
.home-picker-grid > #mood-section .section-title::after {
  display: none !important;
}

.home-picker-grid > #mood-section .mood-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.home-picker-grid > #mood-section .mood-btn {
  min-height: 42px;
  padding: 9px 10px !important;
  border-radius: 7px !important;
  text-align: left;
  justify-content: flex-start;
}

.home-picker-grid > #filters-section,
.home-picker-grid > .pick-section,
.home-picker-grid > .hide-seen-toggle,
.home-picker-grid > #result-section {
  grid-column: 1 / -1;
}

.home-picker-grid > #filters-section {
  border-color: rgba(167, 139, 250, .16) !important;
}

.home-picker-grid > .pick-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
  gap: 10px !important;
  align-items: stretch;
}

.home-picker-grid > .pick-section .pick-btn,
.home-picker-grid > .pick-section .lucky-btn {
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  border-radius: 8px !important;
}

.home-picker-grid > .pick-section .pick-btn {
  border: 1px solid rgba(255, 255, 255, .2) !important;
  background: linear-gradient(100deg, #38bdf8, #818cf8 48%, #fb7185) !important;
  box-shadow: 0 14px 34px rgba(56, 189, 248, .17) !important;
}

.home-picker-grid > .pick-section .lucky-btn {
  border-color: rgba(251, 191, 36, .2) !important;
  background: rgba(251, 191, 36, .07) !important;
  color: #fef3c7 !important;
}

.home-picker-grid > .hide-seen-toggle {
  justify-self: start;
  padding: 4px 2px;
}

.home-now-shell {
  display: none;
  margin: 24px 0;
}

.home-now-shell:has(#daily-pick-section:not(.hidden), #trending-section:not(.hidden)) {
  display: block;
}

.home-now-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.home-now-grid > #daily-pick-section,
.home-now-grid > #trending-section {
  margin: 0 !important;
}

.home-section-heading {
  padding: 0 2px;
}

.home-section-heading > a {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(125, 211, 252, .15);
  border-radius: 7px;
  background: rgba(125, 211, 252, .06);
  color: #bae6fd;
  font-size: .76rem;
  font-weight: 850;
  text-decoration: none;
}

body[data-page-mode="home"] .workspace-nav-section {
  margin: 26px 0 20px !important;
  padding: 20px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page-mode="home"] .workspace-nav-head {
  align-items: start;
  margin-bottom: 14px;
}

body[data-page-mode="home"] .workspace-nav-title {
  font-size: 1.12rem !important;
}

body[data-page-mode="home"] .workspace-nav-desc {
  font-size: .8rem;
}

body[data-page-mode="home"] .workspace-nav-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

body[data-page-mode="home"] .workspace-nav-card {
  min-height: 94px;
  padding: 12px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .035) !important;
}

body[data-page-mode="home"] .workspace-nav-card:nth-child(1) {
  border-color: rgba(56, 189, 248, .2) !important;
  background: linear-gradient(145deg, rgba(56, 189, 248, .075), rgba(255, 255, 255, .025)) !important;
}

body[data-page-mode="home"] .workspace-nav-card:nth-child(2) {
  border-color: rgba(251, 113, 133, .18) !important;
  background: linear-gradient(145deg, rgba(251, 113, 133, .065), rgba(255, 255, 255, .025)) !important;
}

body[data-page-mode="home"] .workspace-nav-card:nth-child(3) {
  border-color: rgba(167, 139, 250, .2) !important;
  background: linear-gradient(145deg, rgba(167, 139, 250, .07), rgba(255, 255, 255, .025)) !important;
}

body[data-page-mode="home"] .workspace-nav-card:nth-child(4) {
  border-color: rgba(251, 191, 36, .18) !important;
  background: linear-gradient(145deg, rgba(251, 191, 36, .06), rgba(255, 255, 255, .025)) !important;
}

body[data-page-mode="home"] .workspace-nav-card:nth-child(5) {
  border-color: rgba(52, 211, 153, .18) !important;
  background: linear-gradient(145deg, rgba(52, 211, 153, .06), rgba(255, 255, 255, .025)) !important;
}

body[data-page-mode="home"] .workspace-nav-icon {
  width: 36px;
  height: 36px;
  border-radius: 7px !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(251, 113, 133, .15)) !important;
}

.home-play-shell {
  margin: 24px 0 18px;
}

.home-play-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.home-play-grid > #quiz-cta-banner,
.home-play-grid > #match-cta-banner,
.home-play-grid > #wordle-cta-banner {
  display: flex !important;
  width: 100% !important;
  min-width: 0;
  min-height: 84px !important;
  margin: 0 !important;
  padding: 13px !important;
  border-radius: 8px !important;
}

.home-play-grid .quiz-cta-banner-sub,
.home-play-grid .wordle-cta-sub {
  display: none !important;
}

.home-play-grid .quiz-cta-banner-icon,
.home-play-grid .wordle-cta-icon {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
}

.home-play-grid #quiz-cta-banner {
  background: linear-gradient(135deg, rgba(56, 189, 248, .13), rgba(129, 140, 248, .09)) !important;
}

.home-play-grid #match-cta-banner {
  background: linear-gradient(135deg, rgba(251, 113, 133, .13), rgba(232, 121, 249, .08)) !important;
}

.home-play-grid #wordle-cta-banner {
  background: linear-gradient(135deg, rgba(251, 191, 36, .12), rgba(52, 211, 153, .08)) !important;
}

body[data-page-mode="home"] #duo-section {
  margin-top: 22px !important;
}

body[data-page-mode="home"] #duo-btn {
  border-radius: 8px !important;
  background:
    linear-gradient(110deg, rgba(56, 189, 248, .13), rgba(167, 139, 250, .12) 48%, rgba(251, 113, 133, .12)) !important;
}

@media (min-width: 900px) {
  body[data-page-mode="home"] .hero-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-rows: auto auto auto auto;
    column-gap: 36px;
    align-items: center;
    padding: 30px 4px 24px !important;
    text-align: left !important;
  }

  body[data-page-mode="home"] .hero-tagline,
  body[data-page-mode="home"] .hero-title,
  body[data-page-mode="home"] .hero-subtitle,
  body[data-page-mode="home"] .hero-cta {
    grid-column: 1;
    justify-self: start;
  }

  body[data-page-mode="home"] .hero-tagline {
    justify-content: flex-start;
  }

  body[data-page-mode="home"] .hero-tagline::after {
    display: none;
  }

  body[data-page-mode="home"] .hero-title {
    max-width: 780px;
    margin-bottom: 10px;
    font-size: clamp(2rem, 4vw, 3.3rem) !important;
    line-height: 1.03;
  }

  body[data-page-mode="home"] .hero-subtitle {
    max-width: 700px;
    margin: 0 0 18px;
  }

  body[data-page-mode="home"] .hero-stats {
    grid-column: 2;
    grid-row: 1 / 5;
    display: grid;
    width: 100%;
    gap: 8px;
    margin: 0;
  }

  body[data-page-mode="home"] .hero-stat {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    text-align: left;
  }
}

@media (max-width: 899px) {
  .home-picker-grid {
    grid-template-columns: 1fr;
  }

  .home-picker-grid > #ai-section,
  .home-picker-grid > #mood-section {
    grid-column: 1;
  }

  body[data-page-mode="home"] .workspace-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page-mode="home"] .workspace-nav-card:last-child {
    grid-column: 1 / -1;
  }

  .home-play-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body[data-page-mode="home"] .main-content,
  body[data-page-mode="home"] .hero-section,
  body[data-page-mode="home"] .hero-stats,
  body[data-page-mode="home"] #live-bar,
  .home-picker-shell,
  .home-picker-grid {
    min-width: 0;
    max-width: 100%;
  }

  body[data-page-mode="home"] .hero-section {
    padding: 20px 2px 16px !important;
    text-align: left !important;
  }

  body[data-page-mode="home"] .hero-tagline {
    justify-content: flex-start;
  }

  body[data-page-mode="home"] .hero-title {
    font-size: 1.85rem !important;
  }

  body[data-page-mode="home"] .hero-subtitle {
    max-width: none;
    margin: 0 0 16px;
  }

  body[data-page-mode="home"] .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    margin-top: 16px;
  }

  body[data-page-mode="home"] .hero-stat {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 7px;
    text-align: center;
  }

  body[data-page-mode="home"] #live-bar {
    min-height: 46px !important;
    padding: 8px 10px 8px 8px !important;
  }

  body[data-page-mode="home"] #live-bar .live-bar-stream,
  body[data-page-mode="home"] #live-bar .live-bar-chip-recent,
  body[data-page-mode="home"] #live-bar .live-bar-chip-text {
    min-width: 0;
  }

  body[data-page-mode="home"] #live-bar .live-bar-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-picker-shell {
    margin-top: 12px;
    padding: 18px 0 20px;
  }

  .home-picker-intro,
  .home-section-heading {
    align-items: flex-start;
  }

  .home-picker-intro {
    display: grid;
    gap: 10px;
  }

  .home-live-open {
    width: 100%;
    justify-self: start;
  }

  .home-picker-grid > #ai-section,
  .home-picker-grid > #mood-section {
    padding: 14px !important;
  }

  .home-picker-grid > #mood-section .mood-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-picker-grid > .pick-section {
    grid-template-columns: 1fr;
  }

  .home-picker-grid > .pick-section .pick-btn,
  .home-picker-grid > .pick-section .lucky-btn {
    min-height: 54px !important;
  }

  body[data-page-mode="home"] .workspace-nav-head {
    display: block;
  }

  body[data-page-mode="home"] .workspace-nav-desc {
    margin-top: 7px;
  }

  body[data-page-mode="home"] .workspace-nav-card {
    min-height: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-picker-shell::before,
  .home-live-open-signal,
  body[data-page-mode="home"] #live-bar .live-bar-scan {
    animation: none !important;
  }
}

body[data-theme="light"][data-page-mode="home"] #live-bar {
  color: #263247 !important;
  border-color: rgba(225, 29, 72, .18) !important;
  border-left-color: #e11d48 !important;
  background: linear-gradient(90deg, rgba(255, 241, 242, .96), rgba(236, 254, 255, .96)) !important;
  box-shadow: 0 14px 30px rgba(51, 65, 85, .1) !important;
}

body[data-theme="light"][data-page-mode="home"] #live-bar .live-bar-chip-recent .live-bar-chip-text {
  color: #334155 !important;
}

body[data-theme="light"] .home-picker-shell {
  border-color: rgba(14, 165, 233, .2);
  background: linear-gradient(135deg, rgba(14, 165, 233, .06), rgba(139, 92, 246, .04) 48%, rgba(244, 63, 94, .055));
}

body[data-theme="light"] .home-picker-intro h2,
body[data-theme="light"] .home-section-heading h2 {
  color: #172033;
}

body[data-theme="light"] .home-picker-intro p {
  color: rgba(51, 65, 85, .76);
}

body[data-theme="light"] .home-picker-grid > #ai-section,
body[data-theme="light"] .home-picker-grid > #mood-section {
  color: #172033 !important;
  background: rgba(255, 255, 255, .76) !important;
  border-color: rgba(51, 65, 85, .13) !important;
}

body[data-theme="light"] .home-live-open {
  color: #047857;
  background: rgba(16, 185, 129, .08);
}

body[data-theme="light"] .home-live-open-copy strong {
  color: #065f46;
}

body[data-theme="light"] .home-live-open-copy small {
  color: rgba(4, 120, 87, .72);
}

body[data-theme="light"][data-page-mode="home"] .workspace-nav-card,
body[data-theme="light"] .home-play-grid > #quiz-cta-banner,
body[data-theme="light"] .home-play-grid > #match-cta-banner,
body[data-theme="light"] .home-play-grid > #wordle-cta-banner {
  color: #172033 !important;
  background: rgba(255, 255, 255, .7) !important;
  border-color: rgba(51, 65, 85, .13) !important;
}

/* v197 - mobile overflow fixes and clearer guest registration entry */
.guest-picks-badge {
  cursor: pointer !important;
}

.guest-picks-badge:hover {
  color: #e0f2fe;
  border-color: rgba(56, 189, 248, .36);
  background: rgba(56, 189, 248, .1);
}

@media (max-width: 640px) {
  .home-now-shell,
  .home-now-grid,
  .home-now-grid > #daily-pick-section,
  .daily-pick-section,
  .daily-pick-card,
  .daily-pick-info {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .home-now-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .daily-pick-section {
    width: 100% !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  .daily-pick-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 7px;
  }

  .daily-pick-badge {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .daily-pick-timer {
    margin-left: 0;
    white-space: normal;
  }

  .daily-pick-card {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px !important;
    width: 100%;
    align-items: start;
  }

  .daily-pick-poster {
    width: 76px !important;
    min-width: 0 !important;
    max-width: 76px !important;
    height: auto !important;
  }

  .daily-pick-title,
  .daily-pick-orig,
  .daily-pick-desc,
  .daily-pick-meta,
  .daily-pick-extra,
  .daily-pick-meta span,
  .daily-pick-extra span,
  .dp-genre-chip {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .daily-pick-title {
    font-size: .98rem !important;
  }

  .daily-pick-desc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .home-play-grid > #quiz-cta-banner,
  .home-play-grid > #match-cta-banner,
  .home-play-grid > #wordle-cta-banner {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px !important;
    overflow: hidden;
  }

  .home-play-grid .quiz-cta-banner-text,
  .home-play-grid .wordle-cta-text,
  .home-play-grid .quiz-cta-banner-title,
  .home-play-grid .wordle-cta-title {
    min-width: 0;
    max-width: 100%;
  }

  .home-play-grid .quiz-cta-banner-title,
  .home-play-grid .wordle-cta-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 7px;
    line-height: 1.25 !important;
  }

  .home-play-grid .quiz-cta-banner-title > span:first-child,
  .home-play-grid .wordle-cta-title > span:first-child {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .home-play-grid .quiz-cta-banner-pill,
  .home-play-grid .wordle-cta-pill {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .home-play-grid .quiz-cta-banner-arrow,
  .home-play-grid .wordle-cta-arrow {
    display: none !important;
  }
}

@media (max-width: 370px) {
  .daily-pick-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px !important;
  }

  .daily-pick-poster {
    width: 64px !important;
    max-width: 64px !important;
  }
}

/* v199 - guided picker, stable daily timer, contained trending posters */
.home-picker-format {
  display: grid;
  grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr);
  gap: 14px;
  align-items: stretch;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid rgba(125, 211, 252, .16);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(56, 189, 248, .08), rgba(167, 139, 250, .055) 55%, rgba(251, 113, 133, .07));
}

.home-picker-step,
.home-picker-step-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.home-picker-step {
  padding: 7px 8px;
}

.home-picker-step-row {
  grid-column: 1 / -1;
  padding: 12px 2px 2px;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

.home-picker-method-step {
  padding-top: 3px;
  border-top: 0;
}

.home-picker-action-step {
  margin-top: 2px;
}

.home-picker-step-number {
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(103, 232, 249, .28);
  border-radius: 50%;
  background: rgba(34, 211, 238, .09);
  color: #a5f3fc;
  font-size: .72rem;
  font-weight: 950;
  box-shadow: inset 0 0 0 4px rgba(34, 211, 238, .035);
}

.home-picker-step > span:last-child,
.home-picker-step-row > span:last-child {
  min-width: 0;
}

.home-picker-step small,
.home-picker-step strong,
.home-picker-step em,
.home-picker-step-row small,
.home-picker-step-row strong,
.home-picker-step-row em {
  display: block;
  font-style: normal;
  letter-spacing: 0;
}

.home-picker-step small,
.home-picker-step-row small {
  margin-bottom: 2px;
  color: #67e8f9;
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-picker-step strong,
.home-picker-step-row strong {
  color: #f8fafc;
  font-size: .94rem;
  line-height: 1.2;
}

.home-picker-step em,
.home-picker-step-row em {
  margin-top: 3px;
  color: rgba(226, 232, 240, .56);
  font-size: .72rem;
  line-height: 1.35;
}

.home-format-switch-slot {
  display: flex;
  min-width: 0;
}

.home-picker-format .home-format-switch {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 5px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 8px !important;
  background: rgba(6, 12, 22, .42) !important;
  overflow: hidden !important;
}

.home-picker-format .home-format-switch .tab-btn {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: rgba(226, 232, 240, .66) !important;
  text-align: left;
  box-shadow: none !important;
}

.home-picker-format .home-format-switch .tab-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  background: rgba(255, 255, 255, .05);
}

.home-picker-format .home-format-switch .tab-btn.active {
  border-color: rgba(125, 211, 252, .24) !important;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, .22), rgba(167, 139, 250, .18) 54%, rgba(251, 113, 133, .2)) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(56, 189, 248, .09) !important;
}

.home-picker-format .home-format-switch .tab-btn.active .tab-icon {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .1);
}

.home-picker-grid > #ai-section,
.home-picker-grid > #mood-section {
  position: relative;
  min-height: 100%;
}

.home-picker-grid > #ai-section {
  border-top: 2px solid rgba(56, 189, 248, .45) !important;
}

.home-picker-grid > #mood-section {
  border-top: 2px solid rgba(251, 191, 36, .42) !important;
}

.daily-pick-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(125, 211, 252, .13);
  border-radius: 7px;
  background: rgba(125, 211, 252, .055);
  white-space: nowrap;
}

.daily-pick-timer-label {
  color: rgba(226, 232, 240, .54);
  font-size: .62rem;
  font-weight: 700;
}

.daily-pick-timer-value {
  color: #bae6fd;
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.trending-scroll {
  padding-top: 6px !important;
  overflow-y: hidden !important;
}

.trending-card,
.trending-card:hover {
  overflow: hidden !important;
  transform: none !important;
  filter: none !important;
}

.trending-poster-wrap {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.trending-poster {
  display: block;
  border: 0 !important;
  border-radius: 7px !important;
  transition: transform .22s ease, filter .22s ease !important;
}

.trending-card:hover .trending-poster {
  transform: scale(1.025) !important;
  filter: brightness(1.06);
}

@media (min-width: 901px) {
  body[data-page-mode="home"] .header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  body[data-page-mode="home"] .header-right {
    grid-column: 3;
  }
}

@media (max-width: 720px) {
  .home-picker-format {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .home-picker-step {
    padding: 3px 2px 7px;
  }

  .home-picker-step-row {
    padding-top: 10px;
  }

  .home-picker-format .home-format-switch .tab-btn {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 5px;
    min-height: 64px;
    padding: 7px 4px !important;
    text-align: center;
    font-size: .7rem !important;
  }

  .home-picker-format .home-format-switch .tab-icon {
    width: 30px;
    height: 30px;
  }

  .daily-pick-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 7px !important;
  }

  .daily-pick-timer {
    display: grid;
    gap: 1px;
    justify-items: end;
    margin-left: 0 !important;
    text-align: right;
    white-space: nowrap !important;
  }
}

@media (max-width: 370px) {
  .daily-pick-header {
    grid-template-columns: 1fr;
  }

  .daily-pick-timer {
    justify-self: start;
    justify-items: start;
    text-align: left;
  }
}

body[data-theme="light"] .home-picker-format {
  border-color: rgba(14, 165, 233, .16);
  background: linear-gradient(120deg, rgba(14, 165, 233, .07), rgba(139, 92, 246, .045), rgba(244, 63, 94, .055));
}

body[data-theme="light"] .home-picker-step strong,
body[data-theme="light"] .home-picker-step-row strong {
  color: #172033;
}

body[data-theme="light"] .home-picker-step em,
body[data-theme="light"] .home-picker-step-row em,
body[data-theme="light"] .daily-pick-timer-label {
  color: rgba(51, 65, 85, .65);
}

body[data-theme="light"] .home-picker-format .home-format-switch {
  background: rgba(255, 255, 255, .56) !important;
}

body[data-theme="light"] .home-picker-format .home-format-switch .tab-btn {
  color: rgba(30, 41, 59, .7) !important;
}

body[data-theme="light"] .home-picker-format .home-format-switch .tab-btn.active {
  color: #0f172a !important;
}

/* v200 - clearer actions, featured daily pick, stable auth overlay and trending */
body[data-page-mode="home"] .home-daily-feature {
  width: 100%;
  margin: 0 0 14px !important;
  padding: 16px !important;
  border-color: rgba(251, 191, 36, .2) !important;
  background:
    linear-gradient(120deg, rgba(251, 191, 36, .07), rgba(56, 189, 248, .055) 58%, rgba(251, 113, 133, .06)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2) !important;
}

body[data-page-mode="home"] .home-daily-feature .daily-pick-header {
  margin-bottom: 11px;
}

.home-picker-grid > .pick-section {
  position: relative;
  padding: 9px !important;
  border: 1px solid rgba(125, 211, 252, .13);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(56, 189, 248, .055), rgba(167, 139, 250, .045) 52%, rgba(251, 113, 133, .05));
}

.home-picker-grid > .pick-section .pick-btn,
.home-picker-grid > .pick-section .lucky-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  min-height: 64px !important;
  border-radius: 7px !important;
  transform: none !important;
}

.home-picker-grid > .pick-section .pick-btn {
  border: 1px solid rgba(255, 255, 255, .2) !important;
  background:
    linear-gradient(105deg, #0ea5e9 0%, #6366f1 48%, #ec4899 100%) !important;
  box-shadow: 0 12px 28px rgba(56, 189, 248, .16), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.home-picker-grid > .pick-section .pick-btn::before {
  opacity: .72;
}

.home-picker-grid > .pick-section .pick-btn-content {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 950;
}

.home-picker-grid > .pick-section .pick-btn-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px;
  background: rgba(7, 17, 31, .18);
}

.home-picker-grid > .pick-section .pick-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.06) saturate(1.04) !important;
  box-shadow: 0 16px 34px rgba(56, 189, 248, .2), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

.home-picker-grid > .pick-section .pick-btn:active {
  transform: translateY(0) !important;
  filter: brightness(.96) !important;
}

.home-picker-grid > .pick-section .lucky-btn {
  border: 1px solid rgba(251, 191, 36, .2) !important;
  background:
    linear-gradient(135deg, rgba(251, 191, 36, .1), rgba(251, 113, 133, .075) 52%, rgba(167, 139, 250, .09)) !important;
  color: #fef3c7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.home-picker-grid > .pick-section .lucky-sparkle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(251, 191, 36, .11);
  color: #fde68a;
}

.home-picker-grid > .pick-section .lucky-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(251, 191, 36, .38) !important;
  background:
    linear-gradient(135deg, rgba(251, 191, 36, .16), rgba(251, 113, 133, .11) 52%, rgba(167, 139, 250, .13)) !important;
  color: #fff7d6 !important;
}

#auth-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  content-visibility: visible !important;
  contain: none !important;
  isolation: isolate;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#auth-modal .modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(3, 7, 18, .72) !important;
  backdrop-filter: blur(18px) saturate(.78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(.78) !important;
}

#auth-modal .auth-modal-content {
  z-index: 1;
}

body.modal-open {
  overflow: hidden !important;
}

.trending-scroll {
  overflow-y: visible !important;
  padding-top: 5px !important;
  padding-bottom: 14px !important;
}

.trending-card,
.trending-card:hover {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.trending-poster-wrap {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  transition: border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}

.trending-card:hover .trending-poster-wrap {
  border-color: rgba(125, 211, 252, .35);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28), 0 0 0 1px rgba(125, 211, 252, .06);
}

.trending-card .trending-poster,
.trending-card:hover .trending-poster {
  transform: none !important;
  filter: none !important;
}

.trending-card .trending-name {
  margin-top: 8px !important;
  color: #f8fafc !important;
}

.trending-card .trending-meta {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 22px;
  margin-top: 5px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.trending-release-date,
.trending-rating {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 6px;
  background: rgba(255, 255, 255, .045);
  color: rgba(226, 232, 240, .7);
  font-size: .65rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.trending-rating {
  color: #fde68a;
  border-color: rgba(251, 191, 36, .14);
  background: rgba(251, 191, 36, .055);
}

@media (max-width: 640px) {
  body[data-page-mode="home"] .home-daily-feature {
    padding: 13px !important;
    margin-bottom: 10px !important;
  }

  .home-picker-grid > .pick-section {
    padding: 7px !important;
  }

  .home-picker-grid > .pick-section .pick-btn,
  .home-picker-grid > .pick-section .lucky-btn {
    min-height: 58px !important;
  }

  #auth-modal .modal-overlay {
    backdrop-filter: blur(14px) saturate(.76) !important;
    -webkit-backdrop-filter: blur(14px) saturate(.76) !important;
  }
}

body[data-theme="light"] #auth-modal .modal-overlay {
  background: rgba(226, 232, 240, .66) !important;
}

body[data-theme="light"] .trending-card .trending-name {
  color: #172033 !important;
}

body[data-theme="light"] .trending-release-date,
body[data-theme="light"] .trending-rating {
  color: #334155;
  border-color: rgba(51, 65, 85, .12);
  background: rgba(255, 255, 255, .7);
}

/* v201 - consistent play icons and tighter picker controls */
.quiz-cta-banner-icon svg,
.wordle-cta-icon svg,
.quiz-menu-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#quiz-cta-banner .quiz-cta-banner-icon {
  color: #67e8f9;
  background: rgba(34, 211, 238, .12) !important;
  border: 1px solid rgba(103, 232, 249, .15);
}

#match-cta-banner .quiz-cta-banner-icon {
  color: #f9a8d4;
  background: rgba(244, 114, 182, .12) !important;
  border: 1px solid rgba(249, 168, 212, .15);
}

#wordle-cta-banner .wordle-cta-icon {
  color: #bef264;
  background: rgba(163, 230, 53, .1) !important;
  border: 1px solid rgba(190, 242, 100, .14);
}

.quiz-menu-card:nth-child(1) .quiz-menu-icon {
  color: #67e8f9;
  background: linear-gradient(135deg, rgba(34, 211, 238, .17), rgba(99, 102, 241, .12));
}

.quiz-menu-card:nth-child(2) .quiz-menu-icon {
  color: #f9a8d4;
  background: linear-gradient(135deg, rgba(244, 114, 182, .17), rgba(168, 85, 247, .12));
}

.quiz-menu-card:nth-child(3) .quiz-menu-icon {
  color: #bef264;
  background: linear-gradient(135deg, rgba(163, 230, 53, .15), rgba(20, 184, 166, .11));
}

.quiz-menu-icon {
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: none !important;
}

.home-picker-grid > .pick-section .pick-btn-content {
  gap: 8px !important;
}

.home-picker-grid > .pick-section .pick-btn-icon,
.home-picker-grid > .pick-section .lucky-sparkle {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  min-width: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.home-picker-grid > .pick-section .pick-btn-icon {
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff;
}

.home-picker-grid > .pick-section .lucky-sparkle {
  width: 18px !important;
  height: 18px !important;
  margin-right: 3px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fde68a;
}

.home-picker-grid > .pick-section .pick-btn-icon svg,
.home-picker-grid > .pick-section .lucky-sparkle svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-picker-grid > .pick-section .pick-btn-icon svg {
  width: 21px;
  height: 21px;
}

.home-picker-grid > .pick-section .lucky-sparkle svg {
  width: 16px;
  height: 16px;
}

/* ---- /impeccable polish — match CTA variant + small home-page polish ---- */

.quiz-cta-banner--match {
  border-color: rgba(236, 72, 153, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(236, 72, 153, 0.08)),
    var(--surface) !important;
}
.quiz-cta-banner--match:hover,
.quiz-cta-banner--match:focus-visible {
  border-color: rgba(236, 72, 153, 0.42) !important;
}
.quiz-cta-banner-pill--match {
  background: linear-gradient(135deg, #a78bfa, #ec4899) !important;
  color: #fff;
}

/* Hero stats: keep 'AI' visually consistent with numeric metrics so the third
   reading position doesn't fall flat next to the numbers. */
.hero-stat-value {
  font-variant-numeric: tabular-nums;
}
.hero-stat-label {
  color: var(--text-dim) !important;
  letter-spacing: 0.04em;
}