/* ========================================
   Duo — Design System
   Dark Minimalism with Soft Muted Colors
   ======================================== */

/* CSS Variables */
:root {
  /* Colors - Soft Muted Palette */
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #252525;
  --bg-card: #1e1e1e;
  --bg-card-hover: #2a2a2a;

  --text-primary: #eeece9;
  --text-secondary: #b7b3af;
  --text-muted: #97928e;

  /* Soft muted purple accent */
  --accent: #b8a5d3;
  --accent-light: #d4c7e8;
  --accent-dark: #8b7aab;
  --accent-glow: rgba(184, 165, 211, 0.3);

  /* Glassmorphism & Modern Accents */
  --glass-bg: #191918;
  --glass-bg-card: #20201f;
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hover: rgba(255, 255, 255, 0.2);
  --glass-blur: none;
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
  --gradient-accent: #b8a5d3;
  --gradient-blue: #a9bfd5;
  --gradient-emerald: #a8c3b2;

  /* Soft muted complementary colors */
  --success: #a8d5ba;
  --warning: #e8d5a8;
  --error: #d5a8a8;

  /* User theme colors */
  --user-male: #a9bfd5;
  --user-female: #d3b2bd;
  --user-male-glow: rgba(110, 168, 254, 0.3);
  --user-female-glow: rgba(248, 165, 194, 0.3);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: none;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Z-indexes */
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-splash: 400;

  /* Layout */
  --nav-height: 70px;
  --header-height: 60px;
  --max-width: 1200px;
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Selection */
::selection {
  background: var(--accent);
  color: var(--bg-primary);
}

/* Hidden utility */
.hidden {
  display: none !important;
}

/* ========================================
   Splash Screen
   ======================================== */
.splash {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-splash);
  animation: splashFadeOut 0.5s ease 2s forwards;
}

.splash-content {
  text-align: center;
}

.splash-logo-wrapper {
  display: flex;
  justify-content: center;
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -2px;
}

.splash-logo-left {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: flyFromLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.splash-logo-right {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: flyFromRight 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes flyFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flyFromRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.splash-logo {
  font-size: 4rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -2px;
}

.splash-tagline {
  margin-top: var(--space-sm);
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 300;
}

@keyframes splashPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.02);
    opacity: 0.9;
  }
}

@keyframes splashFadeOut {
  to {
    opacity: 0;
    pointer-events: none;
  }
}

/* ========================================
   App Container
   ======================================== */
.app {
  min-height: 100vh;
  padding-bottom: var(--nav-height);
  animation: appFadeIn 0.25s ease both;
}

@keyframes appFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ========================================
   Header
   ======================================== */
.header {
  position: sticky;
  top: 0;
  height: var(--header-height);
  background: linear-gradient(to bottom, var(--bg-primary) 60%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  z-index: var(--z-nav);
}

.logo {
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn-icon:hover {
  background: var(--bg-tertiary);
  color: var(--accent);
  transform: scale(1.05);
}

/* ========================================
   Main Content
   ======================================== */
.main-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md);
}

/* ========================================
   Sections
   ======================================== */
.section {
  display: none;
  animation: sectionFadeIn 0.3s ease;
}

.section.active {
  display: block;
}

@keyframes sectionFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.section-header h2 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.subsection-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin: var(--space-xl) 0 var(--space-md);
}

/* ========================================
   Search
   ======================================== */
.search-container {
  margin-bottom: var(--space-lg);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.search-box:focus-within {
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-glow);
}

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

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 1rem;
  margin-left: var(--space-sm);
  font-family: inherit;
}

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

.search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-xs);
  transition: color var(--transition-fast);
}

.search-clear:hover {
  color: var(--text-primary);
}

.search-filters {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
}

.search-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.search-toolbar .view-mode-toggle {
  margin-left: auto;
}

.filter-btn,
.filter-btn-secondary {
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

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

.filter-btn.active {
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 500;
}

.sort-toggle-btn {
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.sort-toggle-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.sort-toggle-btn.active {
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 500;
}

@media (max-width: 767px) {
  .search-toolbar {
    align-items: stretch;
  }

  .sort-toggle-btn {
    width: 100%;
  }
}

/* ========================================
   Movies Grid
   ======================================== */
.movies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* Movie Card */
.movie-card {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.movie-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.movie-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.movie-card:hover img {
  transform: scale(1.05);
}

.movie-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
}

.movie-card:hover .movie-card-overlay {
  opacity: 1;
}

.movie-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.movie-card-year {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.movie-card-rating {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-light);
}

.movie-card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* ========================================
   Movies List (for History/Watching)
   ======================================== */
.movies-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.movie-list-item {
  display: flex;
  gap: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.movie-list-item:hover {
  background: var(--bg-tertiary);
  transform: translateX(4px);
}

.movie-list-poster {
  width: 80px;
  height: 120px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.movie-list-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.movie-list-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.movie-list-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.movie-list-ratings {
  display: flex;
  gap: var(--space-md);
  font-size: 0.875rem;
}

.movie-list-rating {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.movie-list-rating .star {
  color: var(--accent);
}

.movie-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.movie-list-tag {
  background: var(--bg-tertiary);
  color: var(--accent-light);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

/* Progress bar for series */
.progress-container {
  margin-top: var(--space-sm);
}

.progress-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.progress-bar {
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-light));
  border-radius: 2px;
  transition: width var(--transition-normal);
}

/* ========================================
   Empty States
   ======================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-muted);
}

.empty-state svg {
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

.empty-state p {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.empty-state span {
  font-size: 0.875rem;
}

/* ========================================
   Bottom Navigation
   ======================================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: linear-gradient(to top, var(--bg-primary) 80%, transparent);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 var(--space-md);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: var(--z-nav);
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-sm);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  font-family: inherit;
}

.nav-btn span {
  font-size: 0.65rem;
  font-weight: 500;
}

.nav-btn:hover {
  color: var(--text-secondary);
}

.nav-btn.active {
  color: var(--accent);
}

.nav-btn.active svg {
  filter: none;
}

/* ========================================
   Buttons
   ======================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-xl);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
}

.btn-small {
  background: var(--accent);
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn-small:hover {
  background: var(--accent-light);
}

.btn-randomizer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn-randomizer:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-glow);
}

/* ========================================
   Modals
   ======================================== */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: var(--z-modal);
}

.modal.active {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-lg);
  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  overflow-y: auto;
  animation: slideUp 0.4s ease;
}

@media (min-width: 768px) {
  .modal {
    align-items: center;
  }

  .modal-content {
    border-radius: var(--radius-xl);
    max-height: 85vh;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  z-index: 10;
}

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

.modal-close-text {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-family: inherit;
  padding: var(--space-md);
  cursor: pointer;
  transition: color var(--transition-fast);
  margin-top: var(--space-md);
}

.modal-close-text:hover {
  color: var(--text-primary);
}

/* ========================================
   Movie Detail Modal
   ======================================== */
.movie-detail {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The fixed frame clips the inner scrollbar and leaves the close button reachable. */
.movie-detail-scroll {
  min-height: 0;
  border-radius: inherit;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.movie-detail-scroll:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-light);
}

.movie-detail-scroll::-webkit-scrollbar { width: 6px; }
.movie-detail-scroll::-webkit-scrollbar-track { background: transparent; margin-block: 22px; }
.movie-detail-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 999px; }
.movie-detail-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .4); }
.movie-detail > .modal-close {
  background: rgba(36, 38, 40, .9);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px);
}

.movie-backdrop {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.movie-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--bg-secondary));
}

.movie-info {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  margin-top: -60px;
  position: relative;
}

.movie-poster-large {
  width: 100px;
  height: 150px;
  border-radius: var(--radius-md);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}

.movie-meta h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

.movie-year {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--space-sm);
}

.movie-genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.movie-genre {
  background: var(--bg-tertiary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.movie-overview {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.movie-runtime {
  font-size: 0.875rem;
  color: var(--text-muted);
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-md);
}

.movie-tags {
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-md);
}

.movie-tags h4,
.movie-notes h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.tag-btn {
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.tag-btn:hover {
  background: var(--bg-primary);
  color: var(--accent-light);
  border-color: var(--accent-dark);
}

.tag-btn.active {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}

.custom-tag-input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}

.custom-tag-input:focus {
  border-color: var(--accent);
}

.movie-notes {
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-lg);
}

.movie-notes textarea {
  width: 100%;
  height: 80px;
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color var(--transition-fast);
}

.movie-notes textarea:focus {
  border-color: var(--accent);
}

.movie-notes textarea::placeholder {
  color: var(--text-muted);
}

.movie-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0 var(--space-lg);
}

.movie-actions .btn-primary,
.movie-actions .btn-secondary {
  width: 100%;
}

/* ========================================
   Rating Modal
   ======================================== */
.rating-modal {
  text-align: center;
}

.rating-modal h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-lg);
}

.rating-poster {
  width: 100px;
  height: 150px;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-md);
}

.rating-modal h4 {
  font-size: 1rem;
  margin-bottom: var(--space-xl);
}

.dual-rating {
  margin-bottom: var(--space-xl);
}

.rating-slider {
  margin-bottom: var(--space-lg);
}

.rating-slider label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  outline: none;
  margin-bottom: var(--space-xs);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: var(--accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.rating-value {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-light);
}

.combined-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.combined-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.combined-value {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.combined-star {
  font-size: 1.5rem;
  color: var(--accent);
}

/* ========================================
   Randomizer Modal
   ======================================== */
.randomizer-modal {
  text-align: center;
}

.randomizer-modal h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-lg);
}

.randomizer-filters {
  text-align: left;
  margin-bottom: var(--space-xl);
}

.filter-group {
  margin-bottom: var(--space-lg);
}

.filter-group label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.time-buttons,
.mood-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.time-btn {
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.time-btn:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.time-btn.active {
  background: var(--accent);
  color: var(--bg-primary);
}

.randomizer-result {
  margin-bottom: var(--space-lg);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.randomizer-wheel {
  width: 160px;
  height: 240px;
  perspective: 1000px;
}

.wheel-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel-item {
  width: 140px;
  height: 210px;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.wheel-rating {
  position: absolute;
  bottom: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  color: var(--accent-light);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
}

.btn-spin {
  width: 100%;
  font-size: 1.125rem;
  padding: var(--space-lg);
}

.btn-spin.spinning {
  animation: pulse 0.5s ease infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.98);
  }
}

/* ========================================
   Matcher Modal (Cinema Tinder)
   ======================================== */
.matcher-modal {
  text-align: center;
  min-height: 500px;
}

.matcher-modal h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.matcher-subtitle {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--space-xl);
}

.matcher-card-container {
  position: relative;
  height: 320px;
  margin-bottom: var(--space-xl);
}

.matcher-card {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 300px;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lg);
  transition: all 0.4s ease;
}

.matcher-card:nth-child(2) {
  transform: translateX(-50%) scale(0.95) translateY(10px);
  opacity: 0.7;
  z-index: -1;
}

.matcher-card:nth-child(3) {
  transform: translateX(-50%) scale(0.9) translateY(20px);
  opacity: 0.5;
  z-index: -2;
}

.matcher-card.swipe-left {
  transform: translateX(-200%) rotate(-20deg);
  opacity: 0;
}

.matcher-card.swipe-right {
  transform: translateX(100%) rotate(20deg);
  opacity: 0;
}

.matcher-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
}

.matcher-btn {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.matcher-no {
  background: var(--bg-tertiary);
  color: var(--error);
}

.matcher-no:hover {
  background: var(--error);
  color: var(--bg-primary);
  transform: scale(1.1);
}

.matcher-yes {
  background: var(--bg-tertiary);
  color: var(--accent);
}

.matcher-yes:hover {
  background: var(--accent);
  color: var(--bg-primary);
  transform: scale(1.1);
}

.matcher-match {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  animation: matchPop 0.5s ease;
}

.matcher-match h2 {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.matcher-match p {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

#matchedMovie {
  width: 120px;
  height: 180px;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

@keyframes matchPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Confetti effect */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti::before,
.confetti::after {
  content: '';
  position: absolute;
  font-size: 2rem;
  animation: confettiFall 3s ease-out infinite;
}

.confetti::before {
  left: 20%;
  animation-delay: 0.5s;
}

.confetti::after {
  right: 20%;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* ========================================
   Profile Section
   ======================================== */
.profile-content {
  padding-bottom: var(--space-xl);
}

.profile-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.avatar span {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  font-size: 1.75rem;
}

.avatar-name {
  width: 100px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  text-align: center;
  padding: var(--space-xs) 0;
  outline: none;
  transition: border-color var(--transition-fast);
}

.avatar-name:focus {
  border-color: var(--accent);
}

.avatar-heart {
  font-size: 1.5rem;
  animation: none;
}

@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.stat-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-light);
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.stats-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.stats-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.kindness-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.kindness-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 4px;
  width: 50%;
  transition: width var(--transition-slow);
}

.kindness-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.genres-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.genre-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.genre-label {
  width: 80px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: right;
}

.genre-fill-container {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.genre-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width var(--transition-slow);
}

.genre-count {
  width: 30px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.movie-of-year {
  text-align: center;
}

.movie-of-year .empty-hint {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.movie-of-year-card {
  display: inline-block;
  width: 140px;
}

.movie-of-year-poster {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: var(--radius-md);
  object-fit: cover;
  margin-bottom: var(--space-sm);
}

.movie-of-year-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.movie-of-year-rating {
  font-size: 0.875rem;
  color: var(--accent);
}

.settings-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.settings-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.setting-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.setting-item span {
  font-size: 0.875rem;
  color: var(--text-secondary);
  min-width: 100px;
}

.api-key-input {
  flex: 1;
  min-width: 150px;
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}

.api-key-input:focus {
  border-color: var(--accent);
}

.api-link {
  display: block;
  margin-top: var(--space-md);
  color: var(--accent);
  font-size: 0.75rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.api-link:hover {
  color: var(--accent-light);
}

/* ========================================
   Toast Notification
   ======================================== */
.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--space-lg));
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  opacity: 0;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast.success {
  background: var(--success);
  color: var(--bg-primary);
}

.toast.error {
  background: var(--error);
  color: var(--bg-primary);
}

/* ========================================
   Loading States
   ======================================== */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease infinite;
}

@keyframes skeleton {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--bg-tertiary);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: var(--space-xl) auto;
}

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

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 480px) {
  :root {
    --space-lg: 20px;
    --space-xl: 28px;
  }

  .splash-logo {
    font-size: 3rem;
  }

  .section-header h2 {
    font-size: 1.5rem;
  }

  .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--space-sm);
  }

  .movie-list-poster {
    width: 60px;
    height: 90px;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }

  .profile-avatars {
    flex-direction: row;
    gap: var(--space-md);
  }
}

/* Landscape mode on mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-content {
    max-height: 100vh;
    border-radius: var(--radius-lg);
  }

  .movie-backdrop {
    height: 120px;
  }
}

/* Dark mode media query (already dark, but for system preference) */
@media (prefers-color-scheme: light) {
  /* Keep dark theme regardless of system preference */
}

/* ========================================
   AI Assistant Widget
   ======================================== */
.ai-widget {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: calc(var(--z-modal) - 10);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.ai-widget-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border: none;
  color: var(--bg-primary);
  cursor: pointer;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-widget-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg), 0 0 30px var(--accent-glow);
}

.ai-widget-btn svg {
  fill: var(--bg-primary);
  stroke: var(--bg-primary);
}

.ai-widget-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--error);
  border: 2px solid var(--bg-primary);
  color: var(--bg-primary);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.ai-widget-close.visible {
  display: flex;
}

.ai-widget-close:hover {
  transform: scale(1.1);
}

/* AI Chat Window */
.ai-chat {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 50vw;
  height: 50dvh;
  min-width: min(360px, calc(100vw - 40px));
  min-height: min(320px, calc(100dvh - 116px));
  max-width: calc(100vw - 40px);
  max-height: calc(100dvh - 116px);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: calc(var(--z-modal) - 5);
  resize: none;
  overflow: hidden;
  animation: chatSlideUp 0.3s ease;
}

@keyframes chatSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--bg-tertiary);
  font-weight: 600;
  font-size: 0.95rem;
}

.ai-chat-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.ai-chat-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.ai-model-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-primary);
  color: var(--accent-light);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.ai-clear-btn {
  border: 1px solid var(--bg-primary);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ai-clear-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.ai-chat-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.ai-chat-close:hover {
  color: var(--text-primary);
}

.ai-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ai-message {
  max-width: 85%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.5;
  word-wrap: break-word;
}

.ai-message.ai-user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--bg-primary);
  border-bottom-right-radius: var(--space-xs);
}

.ai-message.ai-assistant {
  align-self: flex-start;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-bottom-left-radius: var(--space-xs);
}

.ai-message.ai-assistant p + p {
  margin-top: var(--space-sm);
}

.ai-message.ai-system {
  align-self: center;
  background: transparent;
  color: var(--text-secondary);
  text-align: center;
  font-size: 0.8rem;
  padding: var(--space-sm);
}

.ai-message.ai-error {
  align-self: center;
  background: var(--error);
  color: var(--bg-primary);
  text-align: center;
}

.ai-message.ai-loading {
  align-self: flex-start;
  background: var(--bg-tertiary);
  padding: var(--space-md);
}

.ai-loading {
  display: flex;
  gap: 4px;
}

.ai-loading span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  animation: loadingPulse 1.4s infinite ease-in-out both;
}

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

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

@keyframes loadingPulse {

  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.5;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.ai-chat-input {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-primary);
  border-top: 1px solid var(--bg-tertiary);
  flex-shrink: 0;
}

.ai-chat-input input {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}

.ai-chat-input input:focus {
  border-color: var(--accent);
}

.ai-chat-input input::placeholder {
  color: var(--text-muted);
}

.ai-send-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent);
  border: none;
  color: var(--bg-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ai-send-btn:hover {
  background: var(--accent-light);
  transform: scale(1.05);
}

.ai-send-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.ai-chat-settings {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-top: 1px solid var(--bg-primary);
  flex-shrink: 0;
}

.ai-chat-settings.ai-chat-settings-collapsed {
  display: none;
}

.ai-key-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ai-key-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.ai-key-row .btn-small {
  flex-shrink: 0;
}

.ai-key-row input {
  flex: 1;
  min-width: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--bg-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-family: inherit;
  outline: none;
}

.ai-key-row input:focus {
  border-color: var(--accent);
}

.ai-key-hint {
  margin-top: var(--space-sm);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.ai-key-hint code {
  color: var(--accent-light);
}

.ai-setting-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.ai-setting-row label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.ai-setting-row input {
  flex: 1;
  min-width: 120px;
  background: var(--bg-secondary);
  border: 1px solid var(--bg-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-family: inherit;
  outline: none;
}

.ai-setting-row input:focus {
  border-color: var(--accent);
}

.ai-chat-settings .api-link {
  display: block;
  margin-top: var(--space-sm);
  font-size: 0.7rem;
  color: var(--accent);
  text-decoration: none;
}

.ai-chat-settings .api-link:hover {
  text-decoration: underline;
}

.ai-chat-footer {
  padding: 10px var(--space-md) var(--space-md);
  background: var(--bg-primary);
  border-top: 1px solid var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.ai-settings-toggle {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ai-settings-toggle:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.ai-chat-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.ai-key-status,
.ai-resize-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.ai-key-status.is-saved {
  color: var(--success);
}

.ai-key-status.is-fallback {
  color: var(--warning);
}

.ai-key-status.is-missing {
  color: var(--error);
}

.ai-resize-hint {
  opacity: 0.85;
}

/* Mobile adjustments for AI chat */
@media (max-width: 480px) {
  .ai-widget {
    bottom: 90px;
    right: 16px;
  }

  .ai-widget-btn {
    width: 48px;
    height: 48px;
  }

  .ai-chat {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: min(78vh, 680px);
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 78vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    resize: none;
  }

  .ai-chat-footer-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-resize-hint {
    display: none;
  }
}

/* ========================================
   Advanced Filters Modal
   ======================================== */
.filters-modal {
  max-height: 85vh;
}

.filters-modal h3 {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.filter-section {
  margin-bottom: var(--space-lg);
}

.filter-section h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

#aiModelName {
  color: var(--accent-light);
  font-size: 0.8rem;
  font-weight: 600;
}

.ai-recommendations {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.ai-recommendation-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.ai-recommendation-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.ai-recommendation-body {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.filter-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

/* Genre exclusion grid */
.genre-exclude-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.genre-btn {
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.genre-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.genre-btn.excluded {
  background: var(--error);
  color: var(--bg-primary);
  border-color: var(--error);
}

/* Advanced filter button */
.filter-advanced {
  background: var(--bg-tertiary);
  padding: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-advanced:hover {
  background: var(--accent);
  color: var(--bg-primary);
}

.filter-advanced.has-filters {
  background: var(--accent);
  color: var(--bg-primary);
}

/* Year range */
.year-range {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.year-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.year-input-group label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.year-input-group input {
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-card-hover);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  text-align: center;
}

.year-input-group input:focus {
  border-color: var(--accent);
}

.year-separator {
  color: var(--text-muted);
  font-size: 1.25rem;
  margin-top: var(--space-md);
}

/* Rating filter */
.rating-filter {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.rating-filter .slider {
  flex: 1;
}

.rating-display {
  min-width: 50px;
  text-align: center;
  font-weight: 600;
  color: var(--accent);
}

/* Country exclusion */
.country-exclude {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.checkbox-label:hover {
  color: var(--text-primary);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Filter actions */
.filter-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.filter-actions .btn-secondary,
.filter-actions .btn-primary {
  flex: 1;
}

/* ========================================
   Adaptive Theme (Color from Poster)
   ======================================== */
.modal-content.adaptive-theme {
  --adaptive-bg: var(--bg-secondary);
  --adaptive-accent: var(--accent);
  --adaptive-glow: var(--accent-glow);

  background: var(--adaptive-bg);
  transition: background 0.5s ease;
}

.modal-content.adaptive-theme .movie-backdrop {
  transition: background 0.5s ease;
}

.modal-content.adaptive-theme .btn-primary {
  background: linear-gradient(135deg, var(--adaptive-accent), var(--adaptive-bg));
  box-shadow: 0 0 20px var(--adaptive-glow);
}

.modal-content.adaptive-theme .tag-btn.active {
  background: var(--adaptive-accent);
}

.modal-content.adaptive-theme .movie-genres span {
  background: var(--adaptive-glow);
  border-color: var(--adaptive-accent);
}

/* Filter summary */
.filter-summary {
  grid-column: 1 / -1;
  background: var(--bg-tertiary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.filter-summary p {
  font-size: 0.875rem;
  color: var(--accent);
  margin: 0;
}

/* ========================================
   Turn Tracker Widget
   ======================================== */
.turn-tracker {
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  text-align: center;
}

.turn-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.turn-icon {
  font-size: 1.5rem;
}

.turn-title {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.turn-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.turn-coin {
  width: 80px;
  height: 80px;
  position: relative;
  perspective: 400px;
  cursor: pointer;
}

.turn-coin .coin-front,
.turn-coin .coin-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  backface-visibility: hidden;
  transition: transform 0.6s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.turn-coin .coin-front {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--bg-primary);
}

.turn-coin .coin-back {
  background: linear-gradient(135deg, var(--success), #7cb896);
  color: var(--bg-primary);
  transform: rotateY(180deg);
}

.turn-coin.flipped .coin-front {
  transform: rotateY(180deg);
}

.turn-coin.flipped .coin-back {
  transform: rotateY(0deg);
}

.turn-coin.flipping {
  animation: coinFlip 0.6s ease;
}

@keyframes coinFlip {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.turn-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent);
}

.turn-switch-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--bg-card-hover);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.turn-switch-btn:hover {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}

/* ========================================
   Betting System Modal
   ======================================== */
.bet-modal h3 {
  text-align: center;
  margin-bottom: var(--space-sm);
}

.bet-movie-title {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.bet-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.bet-tab {
  flex: 1;
  background: var(--bg-tertiary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.bet-tab:hover {
  color: var(--text-primary);
}

.bet-tab.active {
  background: var(--accent);
  color: var(--bg-primary);
}

.bet-content {
  animation: fadeIn 0.3s ease;
}

.bet-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--space-md);
}

.bet-user-select {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.bet-user {
  flex: 1;
  background: var(--bg-tertiary);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: var(--space-sm);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.bet-user:hover {
  border-color: var(--accent);
}

.bet-user.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

.bet-textarea {
  width: 100%;
  min-height: 100px;
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-card-hover);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  margin-bottom: var(--space-md);
}

.bet-textarea:focus {
  border-color: var(--accent);
}

.bet-textarea::placeholder {
  color: var(--text-muted);
}

/* Bets list */
.bets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  max-height: 300px;
  overflow-y: auto;
}

.bet-card {
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.bet-card:hover {
  background: var(--bg-card-hover);
}

.bet-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.bet-card-user {
  font-weight: 600;
  color: var(--accent);
}

.bet-card-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.bet-card-prediction {
  position: relative;
  padding: var(--space-sm);
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  min-height: 40px;
}

.bet-card-prediction.hidden-bet {
  filter: blur(8px);
  user-select: none;
  cursor: pointer;
}

.bet-card-prediction.hidden-bet::after {
  content: '🔒 Нажмите чтобы раскрыть';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.8rem;
}

.bet-card-prediction.revealed {
  animation: revealBet 0.5s ease;
}

@keyframes revealBet {
  0% {
    filter: blur(8px);
    transform: scale(0.95);
  }

  100% {
    filter: blur(0);
    transform: scale(1);
  }
}

/* ========================================
   Challenges
   ======================================== */
.challenges-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.challenge-card {
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  border: 1px solid transparent;
}

.challenge-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}

.challenge-card.active {
  border-color: var(--success);
}

.challenge-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.challenge-icon {
  font-size: 1.5rem;
}

.challenge-info {
  flex: 1;
}

.challenge-name {
  font-weight: 600;
  font-size: 1rem;
}

.challenge-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.challenge-progress {
  margin-top: var(--space-sm);
}

.challenge-progress-bar {
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
}

.challenge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--success));
  border-radius: 3px;
  transition: width 0.5s ease;
}

.challenge-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.challenge-badge {
  background: var(--success);
  color: var(--bg-primary);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: var(--space-xs);
}

/* ========================================
   Seasonal Calendar Widget
   ======================================== */
.calendar-widget {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.calendar-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.calendar-icon {
  font-size: 1.25rem;
}

.calendar-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.calendar-episodes {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
}

.calendar-episode {
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  min-width: 140px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.calendar-episode:hover {
  background: var(--bg-card-hover);
}

.calendar-episode-poster {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.calendar-episode-title {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-episode-info {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.calendar-episode-date {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-xs);
  font-size: 0.7rem;
}

.calendar-badge {
  background: var(--accent);
  color: var(--bg-primary);
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
}

.calendar-badge.today {
  background: var(--success);
}

.calendar-badge.soon {
  background: var(--warning);
}

/* ========================================
   User Theme System
   ======================================== */

/* Theme override for male user */
body.user-male {
  --accent: var(--user-male);
  --accent-glow: var(--user-male-glow);
}

/* Theme override for female user */
body.user-female {
  --accent: var(--user-female);
  --accent-glow: var(--user-female-glow);
}

/* User indicator badge */
.user-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--bg-tertiary);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  border: 1px solid transparent;
}

.user-indicator:hover {
  border-color: var(--accent);
}

.user-indicator-icon {
  font-size: 1rem;
}

.user-indicator-name {
  font-weight: 600;
  color: var(--accent);
}

/* Ticket badge */
.ticket-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--warning), #d4a574);
  color: var(--bg-primary);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
}

.ticket-badge-icon {
  font-size: 0.8rem;
}

/* User profile section */
.user-profile-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border: 1px solid var(--bg-tertiary);
}

.user-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.user-profile-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 2px solid var(--accent);
}

.user-details h4 {
  margin: 0;
  font-size: 1rem;
}

.user-details span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.user-tickets {
  text-align: center;
}

.user-tickets-count {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--warning);
}

.user-tickets-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Added by user indicator */
.added-by-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border: 2px solid;
}

.added-by-badge.male {
  border-color: var(--user-male);
}

.added-by-badge.female {
  border-color: var(--user-female);
}

.added-by-badge.match {
  background: var(--success);
  border-color: var(--success);
  color: var(--bg-primary);
}

/* ========================================
   Veto System
   ======================================== */
.section-header-actions {
  display: flex;
  gap: var(--space-sm);
}

.btn-veto {
  background: var(--bg-tertiary);
  border: 1px solid var(--error);
  border-radius: var(--radius-md);
  color: var(--error);
  padding: var(--space-xs) var(--space-md);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn-veto:hover {
  background: var(--error);
  color: var(--bg-primary);
}

.veto-modal {
  max-width: 500px;
}

.veto-hint {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

.veto-user-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--bg-tertiary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
}

.veto-count {
  background: var(--error);
  color: var(--bg-primary);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.8rem;
}

.veto-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.veto-movie {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  border: 2px solid transparent;
}

.veto-movie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.veto-movie:hover {
  transform: scale(1.05);
  border-color: var(--accent);
}

.veto-movie.vetoed {
  border-color: var(--error);
  opacity: 0.5;
}

.veto-movie.vetoed::after {
  content: '🚫';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: rgba(0, 0, 0, 0.6);
}

.veto-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.veto-results {
  text-align: center;
}

.veto-results h4 {
  color: var(--success);
  margin-bottom: var(--space-md);
}

.veto-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.veto-result-movie {
  aspect-ratio: 2/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--success);
}

.veto-result-movie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   Cheating Badge
   ======================================== */
.btn-cheating {
  background: transparent;
  border: 1px dashed var(--warning);
  border-radius: var(--radius-md);
  color: var(--warning);
  padding: var(--space-xs) var(--space-md);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn-cheating:hover {
  background: var(--warning);
  color: var(--bg-primary);
}

.cheated-badge {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: var(--space-sm);
}

.cheated-badge.male {
  background: var(--user-male-glow);
  border: 1px solid var(--user-male);
  color: var(--user-male);
}

.cheated-badge.female {
  background: var(--user-female-glow);
  border: 1px solid var(--user-female);
  color: var(--user-female);
}

/* ========================================
   Quotes Section
   ======================================== */
.quotes-section {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.quotes-section h4 {
  margin-bottom: var(--space-sm);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.quote-input-wrapper {
  display: flex;
  gap: var(--space-sm);
}

.quote-input {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--bg-card-hover);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
}

.quote-input:focus {
  border-color: var(--accent);
  outline: none;
}

.quotes-list {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.quote-item {
  background: var(--bg-primary);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-secondary);
}

.quote-item::before {
  content: '"';
}

.quote-item::after {
  content: '"';
}

/* Quote of the day widget */
.quote-widget {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border: 1px solid var(--accent-glow);
}

.quote-widget-header {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.quote-widget-text {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.quote-widget-movie {
  font-size: 0.75rem;
  color: var(--accent);
  margin-top: var(--space-xs);
}

/* ========================================
   Date Night Generator
   ======================================== */
.btn-date-night {
  background: linear-gradient(135deg, var(--user-female), var(--accent));
  border: none;
  border-radius: var(--radius-md);
  color: var(--bg-primary);
  padding: var(--space-xs) var(--space-md);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn-date-night:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px var(--user-female-glow);
}

.date-night-modal {
  max-width: 400px;
}

.date-night-card {
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-md);
  text-align: center;
  border: 1px solid var(--accent-glow);
}

.date-night-item {
  margin-bottom: var(--space-md);
}

.date-night-item-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-xs);
}

.date-night-item-value {
  font-size: 1.1rem;
  color: var(--text-primary);
}

.date-night-item-emoji {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.date-night-regenerate {
  margin-top: var(--space-md);
}

/* Duration Filter */
.duration-filter {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.duration-slider-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.duration-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
}

.duration-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}

.duration-value {
  min-width: 60px;
  text-align: right;
  font-size: 0.85rem;
  color: var(--accent);
}

/* ========================================
   Vibe Calendar (Emotional Calendar)
   ======================================== */
.view-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-tertiary);
  padding: 3px;
  border-radius: var(--radius-md);
}

.view-btn {
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.view-btn.active {
  background: var(--accent);
}

.vibe-calendar {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.vibe-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.vibe-month {
  font-weight: 600;
  font-size: 1rem;
}

.vibe-nav {
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.vibe-nav:hover {
  background: var(--accent);
}

.vibe-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.vibe-day-header {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: var(--space-xs);
}

.vibe-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  position: relative;
}

.vibe-day:hover {
  transform: scale(1.1);
}

.vibe-day.empty {
  background: transparent;
  cursor: default;
}

.vibe-day.has-movie {
  color: var(--bg-primary);
  font-weight: 600;
}

.vibe-day.today {
  border: 2px solid var(--accent);
}

.vibe-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  justify-content: center;
}

.vibe-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.vibe-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ========================================
   Card View Modes
   ======================================== */
.view-mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-tertiary);
  padding: 4px;
  border-radius: var(--radius-md);
  width: fit-content;
}

.view-mode-btn {
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  color: var(--text-secondary);
}

.view-mode-btn.active {
  background: var(--accent);
  color: var(--bg-primary);
}

/* Small cards - 6 columns */
.movies-grid.view-small {
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.movies-grid.view-small .movie-card {
  transform: scale(0.9);
}

/* Large cards - 3 columns */
.movies-grid.view-large {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.movies-grid.view-large .movie-card {
  transform: scale(1);
}

/* List view */
.movies-grid.view-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.movies-grid.view-list .movie-card {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  aspect-ratio: auto;
  height: 80px;
  background: var(--bg-secondary);
}

.movies-grid.view-list .movie-card img,
.movies-grid.view-list .movie-card .movie-card-placeholder {
  width: 60px;
  height: 80px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  flex-shrink: 0;
}

.movies-grid.view-list .movie-card .movie-card-overlay {
  opacity: 1;
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-sm);
  flex: 1;
  background: none;
}

.movies-grid.view-list .movie-card .movie-card-title {
  font-size: 0.9rem;
}

.movies-grid.view-list .movie-card .movie-card-year,
.movies-grid.view-list .movie-card .movie-card-rating {
  font-size: 0.75rem;
}

.movies-grid.view-list .movie-card .movie-card-rating {
  position: static;
  margin: 0 var(--space-sm) 0 0;
  align-self: center;
}

.rating-range {
  margin-top: var(--space-md);
}

.rating-range label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.rating-range-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.rating-range-row input[type="range"] {
  flex: 1;
}

/* ========================================
   Challenge Editor
   ======================================== */
.challenges-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.challenges-header h3 {
  margin: 0;
}

.btn-add-challenge {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  color: var(--bg-primary);
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn-add-challenge:hover {
  transform: scale(1.05);
}

.challenge-modal {
  max-width: 400px;
}

.challenge-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-card-hover);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.assignee-buttons {
  display: flex;
  gap: var(--space-xs);
}

.assignee-btn {
  flex: 1;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.assignee-btn:hover {
  background: var(--bg-card-hover);
}

.assignee-btn.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.ticket-reward-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.ticket-reward-preview span:first-child {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

#challengeReward {
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffc107;
}

.form-group small {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.challenge-modal-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* ========================================
   Search Pagination
   ======================================== */
.trending-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; }
.trending-page-btn { min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--text-secondary); font: inherit; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease; }
.trending-page-btn:hover:not(:disabled) { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.25); }
.trending-page-btn[aria-current="page"] { background: rgba(255,255,255,.12); border-color: var(--accent-light); color: var(--text-primary); }
.trending-page-btn:disabled { opacity: .35; cursor: default; }
.trending-page-status { text-align: center; color: var(--text-secondary); font-size: .75rem; margin-top: 12px; }
#trendingSection > h3 { scroll-margin-top: 88px; }
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  grid-column: 1 / -1;
  width: 100%;
  padding: var(--space-lg) 0;
}

.page-btn {
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  min-width: 36px;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.page-btn:hover:not(:disabled) {
  background: var(--bg-card-hover);
}

.page-btn.active {
  background: var(--accent);
  color: var(--bg-primary);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========================================
   Improved Genre Chart
   ======================================== */
.genres-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.genre-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.genre-name {
  width: 100px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: right;
}

.genre-bar-fill {
  height: 20px;
  border-radius: var(--radius-sm);
  transition: width 0.5s ease;
  min-width: 4px;
}

.genre-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 30px;
}

/* ========================================
   Custom Avatar Upload
   ======================================== */
.avatar {
  position: relative;
  cursor: pointer;
}

.avatar-upload {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  border: 2px solid var(--bg-secondary);
}

.avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-hidden-input {
  display: none;
}

/* ========================================
   Detailed Stats Modal
   ======================================== */
.stats-detail {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-top: var(--space-sm);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.stats-detail:hover {
  background: var(--bg-tertiary);
}

.stats-detail-title {
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.stats-detail-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.stats-modal {
  max-width: 500px;
}

.stats-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.stats-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--bg-tertiary);
}

.stats-row-label {
  color: var(--text-secondary);
}

.stats-row-value {
  color: var(--accent);
  font-weight: 600;
}

/* ========================================
   Calendar Day Improvements
   ======================================== */
.vibe-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: var(--space-sm);
}

.vibe-day-header {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: var(--space-xs);
  text-transform: uppercase;
}

.vibe-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  min-height: 36px;
}

.vibe-day.empty {
  background: transparent;
}

.day-num {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-secondary);
  z-index: 1;
}

.vibe-day.today {
  border: 2px solid var(--accent);
}

.vibe-day.today .day-num {
  color: var(--accent);
  font-weight: 700;
}

/* Movie indicator - enhanced */
.vibe-day.has-movie {
  cursor: pointer;
  border-radius: var(--radius-md);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.vibe-day.has-movie::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

.vibe-day.has-movie .day-num {
  color: var(--bg-primary);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.day-dot {
  position: absolute;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  animation: none;
}

@keyframes dotPulse {

  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.vibe-day.has-movie:hover {
  transform: scale(1.2);
  z-index: 10;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 0 20px currentColor;
}

.vibe-day.has-movie:active {
  transform: scale(1.1);
}

/* Movie details popup */
.day-movie-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 320px;
  width: 90%;
  z-index: 1000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.day-movie-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.day-movie-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.day-movie-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.day-movie-header {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.day-movie-poster {
  width: 80px;
  height: 120px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.day-movie-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.day-movie-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.day-movie-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.day-movie-genre {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent);
  color: var(--bg-primary);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  width: fit-content;
}

.day-movie-ratings {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--bg-tertiary);
  border-bottom: 1px solid var(--bg-tertiary);
  margin: var(--space-sm) 0;
}

.day-movie-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.day-movie-rating-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.day-movie-rating-value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffc107;
}

.day-movie-close {
  width: 100%;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.day-movie-close:hover {
  background: var(--bg-card-hover);
}

/* ========================================
   Challenge Cards
   ======================================== */
.challenges-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.challenge-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.challenge-card:hover {
  background: var(--bg-card-hover);
}

.challenge-icon {
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border-radius: var(--radius-md);
}

.challenge-info {
  flex: 1;
  min-width: 0;
}

.challenge-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.challenge-progress-mini {
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.challenge-progress-bar-mini {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #00d9ff);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.challenge-meta {
  display: flex;
  gap: var(--space-sm);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.challenge-meta span {
  display: flex;
  align-items: center;
  gap: 2px;
}

.challenge-actions {
  display: flex;
  gap: var(--space-xs);
}

.challenge-edit,
.challenge-delete {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.challenge-edit:hover {
  background: var(--accent);
}

.challenge-delete:hover {
  background: #ff4757;
}

/* ========================================
   Challenge Detail Popup
   ======================================== */
.challenge-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.challenge-detail-overlay.active {
  opacity: 1;
  visibility: visible;
}

.challenge-detail-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.challenge-detail-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.challenge-detail-popup h3 {
  margin-bottom: var(--space-md);
  font-size: 1.3rem;
}

.challenge-detail-progress-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.challenge-detail-progress-bar {
  flex: 1;
  height: 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  overflow: hidden;
}

.challenge-detail-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #00d9ff);
  border-radius: 6px;
  transition: width 0.3s ease;
  width: 0%;
}

.challenge-detail-progress-wrap span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 80px;
  text-align: right;
}

.challenge-detail-movies {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  max-height: 300px;
  overflow-y: auto;
}

.challenge-movie-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.challenge-movie-item.watched {
  background: rgba(76, 175, 80, 0.2);
}

.challenge-movie-item.watched .challenge-movie-id {
  text-decoration: line-through;
  opacity: 0.6;
}

.challenge-movie-id {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.challenge-movie-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.challenge-movie-toggle:hover {
  transform: scale(1.2);
}

.challenge-movie-poster {
  width: 40px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.challenge-movie-title {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-left: var(--space-sm);
}

  background: var(--bg-card);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.challenge-progress-bar-mini {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #00d9ff);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.challenge-meta {
  display: flex;
  gap: var(--space-sm);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.challenge-meta span {
  display: flex;
  align-items: center;
  gap: 2px;
}

.challenge-actions {
  display: flex;
  gap: var(--space-xs);
}

.challenge-edit,
.challenge-delete {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.challenge-edit:hover {
  background: var(--accent);
}

.challenge-delete:hover {
  background: #ff4757;
}

/* ========================================
   Challenge Detail Popup
   ======================================== */
.challenge-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.challenge-detail-overlay.active {
  opacity: 1;
  visibility: visible;
}

.challenge-detail-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.challenge-detail-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.challenge-detail-popup h3 {
  margin-bottom: var(--space-md);
  font-size: 1.3rem;
}

.challenge-detail-progress-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.challenge-detail-progress-bar {
  flex: 1;
  height: 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  overflow: hidden;
}

.challenge-detail-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #00d9ff);
  border-radius: 6px;
  transition: width 0.3s ease;
  width: 0%;
}

.challenge-detail-progress-wrap span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 80px;
  text-align: right;
}

.challenge-detail-movies {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  max-height: 300px;
  overflow-y: auto;
}

.challenge-movie-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.challenge-movie-item.watched {
  background: rgba(76, 175, 80, 0.2);
}

.challenge-movie-item.watched .challenge-movie-id {
  text-decoration: line-through;
  opacity: 0.6;
}

.challenge-movie-id {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.challenge-movie-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.challenge-movie-toggle:hover {
  transform: scale(1.2);
}

.challenge-movie-poster {
  width: 40px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.challenge-movie-title {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-left: var(--space-sm);
}

.challenge-movie-item.watched .challenge-movie-title {
  text-decoration: line-through;
  opacity: 0.6;
}

.loading-hint {
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-lg);
}

/* Solid surfaces and restrained interaction feedback. */
.header, .bottom-nav {
  background: var(--bg-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: #30302e;
  border-style: solid;
  border-width: 0;
}
.header { border-bottom-width: 1px; }
.bottom-nav { border-top-width: 1px; }
.modal-content { background: var(--bg-secondary); border: 1px solid #363633; }
.modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
.movie-card { background: var(--bg-card); border: 1px solid #333330; }
/* Media Badges */
.media-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.media-badge-movie {
  background: rgba(168, 85, 247, 0.85);
  color: #ffffff;
}

.media-badge-tv {
  background: rgba(59, 130, 246, 0.85);
  color: #ffffff;
}

.media-badge-anime {
  background: rgba(236, 72, 153, 0.85);
  color: #ffffff;
}

/* Skeleton Loading State */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
  width: 100%;
}

.skeleton-card {
  aspect-ratio: 2/3;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, #181824 25%, #2a2a3c 50%, #181824 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite ease-in-out;
  border: 1px solid var(--glass-border);
}

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

/* Backup & Sync Settings UI */
.backup-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-border);
}

.backup-section h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.backup-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.backup-actions .btn-secondary {
  flex: 1;
  min-width: 140px;
  justify-content: center;
  padding: 10px 14px;
}

/* Matcher Stamps & Animation */
.matcher-card {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.matcher-card.swipe-right {
  transform: translate(150%, 40px) rotate(25deg) !important;
  opacity: 0;
}

.matcher-card.swipe-left {
  transform: translate(-150%, 40px) rotate(-25deg) !important;
  opacity: 0;
}

/* Readable cards, compact navigation and short, finite motion. */
html { color-scheme: dark; scroll-padding-top: 80px; }
.skip-link { position: fixed; top: 8px; left: 16px; transform: translateY(-180%); z-index: 1000; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: #151515; text-decoration: none; }
.skip-link:focus { transform: none; }
body { background: #141413; }
button, input, textarea, select { font: inherit; }
button { touch-action: manipulation; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
input, textarea, select { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
.main-content { padding: 32px 24px 40px; }
.header { padding-inline: max(24px, calc((100vw - 1152px) / 2)); }
.header { justify-content: flex-start; gap: 8px; }
.header .logo { margin-right: auto; }
.header .btn-icon { flex-shrink: 0; }
.header .user-indicator { flex-shrink: 1; min-width: 0; }
.header .user-indicator-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header .ai-widget { position: relative; right: auto; bottom: auto; flex-shrink: 0; }
.header .ai-widget-btn { width: 44px; padding: 10px; border-radius: 50%; }
.header .ai-widget-btn span { display: none; }
.logo, .splash-logo-left, .splash-logo-right { background: none; color: var(--text-primary); -webkit-text-fill-color: currentColor; }
.section-header { margin-bottom: 24px; }
.section-header h2 { font-size: clamp(1.5rem, 2.6vw, 1.85rem); font-weight: 600; }
.section { animation: sectionEnter 180ms ease-out; }
@keyframes sectionEnter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.search-box { border: 1px solid #3a3a36; border-radius: 12px; padding: 14px 16px; }
.search-box:focus-within { border-color: var(--accent); box-shadow: none; background: var(--bg-secondary); }
.search-input { min-width: 0; }
.search-box .search-input:focus-visible { outline: none; }
.search-clear { min-width: 32px; min-height: 32px; }
.filter-btn, .filter-btn-secondary, .sort-toggle-btn { min-height: 42px; }
.search-filters { flex-wrap: wrap; overflow: visible; }
.search-container { margin-bottom: 16px; }
.search-toolbar { gap: 12px; }
.view-mode-toggle { padding: 3px; border: 1px solid #3a3a36; background: var(--bg-secondary); }
.view-mode-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 36px; padding: 6px; }
.movies-grid:not(.view-list) .movie-card { aspect-ratio: auto; display: flex; flex-direction: column; border-radius: 10px; }
.movies-grid:not(.view-list) .movie-card > img, .movies-grid:not(.view-list) .movie-card-placeholder { aspect-ratio: 2/3; height: auto; width: 100%; }
.movies-grid:not(.view-list) .movie-card-overlay { position: static; background: none; opacity: 1; padding: 12px; flex: 1; }
.movie-card-title { color: var(--text-primary); font-size: .875rem; line-height: 1.45; }
.movies-grid:not(.view-list) .movie-card-overlay { justify-content: flex-start; gap: 4px; }
.movie-card-title { min-height: 2.9em; margin-bottom: 0; }
.movie-card > img { transition: opacity 220ms ease; }
.movie-card > img.poster-loading { opacity: 0; }
.catalog-card { animation: cardEnter 240ms ease-out both; animation-delay: var(--card-delay, 0ms); }
@keyframes cardEnter { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.movie-card-year { color: var(--text-secondary); }
.movie-card:hover, .movie-card:hover img, .movie-list-item:hover { transform: none; box-shadow: none; }
.movie-card:hover, .movie-card:focus-visible { border-color: var(--accent); }
.movie-list-item:hover { background: #292927; }
.movie-card-rating { color: #e6d4aa; background: #242421; border: 1px solid #4a4840; backdrop-filter: none; }
.media-badge { background: #242421; color: #eeece9; border: 1px solid #4a4840; text-transform: none; letter-spacing: 0; backdrop-filter: none; }
.bottom-nav { height: calc(76px + env(safe-area-inset-bottom)); padding-inline: max(12px, calc((100vw - 720px) / 2)); }
.app { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.nav-btn { min-height: 56px; min-width: 64px; border-radius: 10px; gap: 5px; }
.nav-btn span { font-size: .75rem; }
.nav-btn.active { background: var(--bg-tertiary); }
.nav-btn.active svg { filter: none; }
.btn-primary { background: var(--accent); color: #151515; }
.btn-primary:hover { background: var(--accent-light); box-shadow: none; transform: none; }
.btn-secondary, .btn-date-night, .btn-veto, .btn-randomizer, .turn-switch-btn { background: var(--bg-tertiary); border: 1px solid #45453f; color: var(--text-primary); }
.btn-secondary:hover, .btn-date-night:hover, .btn-veto:hover, .btn-randomizer:hover { background: #32322e; box-shadow: none; transform: none; }
.btn-primary, .btn-secondary { min-height: 44px; padding: 11px 18px; font-size: .875rem; }
.btn-icon:hover { transform: none; }
.modal-content { animation: dialogEnter 180ms ease-out; overscroll-behavior: contain; }
.modal { opacity: 0; transition: opacity 140ms ease, display 140ms allow-discrete; }
.modal.active { opacity: 1; }
.modal:not(.active) { pointer-events: none; }
@starting-style { .modal.active { opacity: 0; } }
@keyframes dialogEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.modal-close, .ai-chat-close { min-width: 44px; min-height: 44px; }
.modal-close-text { min-height: 44px; margin-top: 12px; color: var(--text-secondary); }
.modal-content h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.4; }
.movie-detail, .movie-backdrop { background: var(--bg-secondary); }
.movie-detail .btn-primary { box-shadow: none; }
.movie-backdrop-glow, .confetti { display: none; }
.movie-detail .movie-poster { box-shadow: var(--shadow-md); }
.without-backdrop .movie-info { margin-top: 0; padding-top: 64px; }
.poster-unavailable { display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary); color: var(--text-muted); text-align: center; font-size: .75rem; box-shadow: none; padding: 12px; }
.movie-overview { display: block; overflow: visible; }
.movie-detail { max-width: 660px; }
.movie-backdrop { height: 190px; }
.movie-detail .movie-info { align-items: flex-start; margin-bottom: 0; padding-bottom: 20px; }
.movie-detail .movie-meta { flex: 1; padding-top: 40px; }
.movie-detail.without-backdrop .movie-meta { padding-top: 0; }
.movie-detail .movie-meta h2 { font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 600; line-height: 1.3; }
.movie-detail .movie-runtime { padding: 0; margin: 12px 0 0; }
.movie-overview { padding-inline: 24px; line-height: 1.75; margin-bottom: 12px; font-size: .9375rem; }
.movie-overview.overview-collapsed { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.overview-toggle { display: block; border: 0; background: none; color: var(--accent); padding: 4px 0; margin: 0 24px 24px; min-height: 36px; font-size: .875rem; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.movie-tags, .movie-notes { border-top: 1px solid #343431; padding-top: 20px; }
.movie-actions { padding-top: 16px; border-top: 1px solid #343431; }
.tag-btn { border-radius: 8px; }
.movie-card:active { border-color: var(--accent); }
.movie-info, .movie-meta { min-width: 0; }
.movie-meta h2 { overflow-wrap: anywhere; }
.reset-list-filters { margin-top: 16px; }
.empty-state { color: var(--text-secondary); padding: 40px 20px; }
.empty-state svg { width: 40px; height: 40px; color: var(--text-muted); }
.empty-state p { color: var(--text-primary); margin-block: 12px 6px; }
.empty-state span { color: var(--text-secondary); line-height: 1.6; }
.catalog-notice { grid-column: 1 / -1; text-align: left; align-items: flex-start; padding: 28px; background: var(--bg-secondary); border: 1px solid #363633; border-radius: 12px; }
.catalog-notice h3 { font-size: 1.1rem; color: var(--text-primary); }
.catalog-notice p { max-width: 56ch; margin: 8px 0 20px; font-size: .9375rem; color: var(--text-secondary); line-height: 1.7; }
.catalog-notice button { align-self: flex-start; }
.filter-summary { color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }
.profile-content { max-width: 800px; margin-inline: auto; }
.profile-avatars { padding-block: 28px; }
.avatar-heart { animation: none; color: var(--text-muted); font-size: 1.5rem; font-weight: 400; }
.avatar > span { font-size: 1.5rem; font-weight: 500; }
.avatar-upload { font-size: 1.2rem; background: var(--bg-tertiary); color: var(--text-primary); }
.avatar-name { min-height: 40px; }
.settings-section, .stats-section, .turn-tracker, .stat-card, .stats-detail, .calendar-widget { border: 1px solid #363633; background: var(--bg-secondary); border-radius: 12px; }
.stats-section { padding: 20px; }
.stats-section h3, .settings-section h3 { font-size: 1rem; margin-bottom: 12px; }
.stat-card { padding: 20px 12px; }
.stat-value { font-size: 1.8rem; }
.stat-label, .stats-detail-subtitle { color: var(--text-secondary); }
.stats-detail:hover { background: #292927; transform: none; }
.room-settings { border-left: 3px solid var(--accent); }
.room-settings.local-room [data-needs-session] { display: none; }
.stats-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.stats-detail { margin-bottom: 16px; }
.turn-tracker { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; text-align: left; padding: 20px; }
.turn-header { margin: 0; }
.turn-display { grid-column: 1; display: flex; align-items: center; gap: 12px; margin: 0; }
.turn-coin { width: 36px; height: 36px; margin: 0; }
.turn-display { flex-direction: row; justify-content: flex-start; }
.turn-display .turn-name { margin: 0; }
.turn-coin .coin-front, .turn-coin .coin-back { background: #383833; color: var(--text-primary); font-size: 1rem; box-shadow: none; transition-duration: 200ms; }
.turn-name { font-size: 1rem; }
.turn-switch-btn { grid-column: 2; grid-row: 1 / 3; min-height: 44px; margin: 0; padding: 10px 12px; }
.kindness-fill, .progress-fill, .challenge-progress-bar-mini { background: var(--accent); }
.ticket-reward-preview { background: #302e24; border-color: #514c39; }
#challengeReward { color: #e6d4aa; }
.movies-grid.view-small .movie-card { transform: none; }
.room-actions { align-items: stretch; }
.room-actions button { text-align: left; justify-content: flex-start; }
.room-access { border-top: 1px solid #363633; padding-top: 8px; }
.room-access summary { min-height: 44px; }
.room-access .room-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room-access .room-actions button { white-space: normal; }
.list-tools input[type="search"], .list-tools select { min-height: 44px; }
.list-tools label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; color: var(--text-secondary); }
.list-tools input[type="checkbox"] { width: 18px; height: 18px; }
.list-tools input[type="search"], .list-tools select, .room-modal input, .room-modal textarea { background: var(--bg-secondary); border-color: #45453f; }
.user-indicator { min-height: 40px; padding: 5px 10px; gap: 8px; }
.user-indicator-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #57574e; border-radius: 50%; font-size: .75rem; }
.ticket-badge { background: #38352a; color: #e6d4aa; gap: 6px; }
.ticket-badge-icon { display: flex; align-items: center; }
.date-night-item-emoji, .calendar-icon:empty, .turn-icon:empty { display: none; }
.date-night-item { border-radius: 10px; background: var(--bg-tertiary); }
.challenge-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.challenge-edit, .challenge-delete { min-height: 36px; padding: 6px 8px; font-size: .75rem; }
.challenge-icon { font-size: 1.25rem; color: var(--text-secondary); }
.vibe-day.has-movie, .vibe-day.has-movie:hover { transform: none; box-shadow: none; }
.vibe-day.has-movie::before { display: none; }
.day-dot { box-shadow: none; animation: none; }
.ai-widget-btn { width: auto; height: 44px; padding: 0 14px; gap: 8px; border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid #494940; box-shadow: none; font-size: .8125rem; font-weight: 500; }
.ai-widget-btn svg { fill: none; stroke: currentColor; }
.ai-widget-btn:hover { transform: none; box-shadow: none; background: var(--bg-tertiary); }
.ai-widget-close { background: var(--bg-tertiary); color: var(--text-secondary); }
.ai-chat { border: 1px solid #494940; animation: fadeIn 180ms ease-out; }
.ai-chat-header { background: var(--bg-secondary); border-bottom: 1px solid #363633; }
.ai-chat-header { padding-left: 38px; }
.ai-resize-handle { position: absolute; top: 0; left: 0; z-index: 5; display: grid; place-items: center; width: 30px; height: 30px; padding: 4px; border: 0; background: transparent; color: var(--text-muted); cursor: nwse-resize; touch-action: none; }
.ai-resize-handle:hover, .ai-resize-handle:focus-visible { color: var(--accent-light); }
.ai-resize-handle:focus-visible { outline-offset: -5px; }
.ai-chat.is-resizing { user-select: none; }
.ai-chat-title-wrap { flex-wrap: wrap; gap: 4px 8px; }
.ai-model-badge { display: none; }
.ai-chat-messages { line-height: 1.65; }
.ai-system { color: var(--text-secondary); }
.ai-chat-footer { border-top: 1px solid #363633; }
.ai-chat-close { padding: 8px; }
.ai-quick-prompts button { font-size: .8125rem; line-height: 1.5; }
.ai-send-btn { min-width: 44px; min-height: 44px; }
.skeleton-card, .skeleton { background: #262624; animation: quietLoading 1.8s ease-in-out infinite; }
@keyframes quietLoading { 50% { opacity: .55; } }
@media (hover: hover) and (pointer: fine) {
  .movie-card:hover { transform: translateY(-2px); }
  .btn-primary:active, .btn-secondary:active { transform: translateY(1px); }
}
@media (max-width: 767px) {
  .header .user-indicator-name { max-width: 48px; }
  .main-content { padding: 24px 16px 32px; }
  .header { padding-inline: 16px; }
  .sort-toggle-btn { width: auto; }
  .search-toolbar { flex-wrap: nowrap; }
  .search-filters { gap: 6px; }
  .filter-btn { padding-inline: 12px; }
  .search-toolbar .view-mode-toggle { margin-left: auto; }
  .view-mode-btn { min-width: 32px; }
  .bottom-nav { padding-inline: 4px; }
  .nav-btn { flex: 1; min-width: 0; padding-inline: 4px; }
  .nav-btn span { font-size: .6875rem; }
  .section-header-actions { width: 100%; gap: 8px; }
  .section-header-actions button { min-height: 42px; flex: 1 1 auto; justify-content: center; }
  .catalog-notice { padding: 24px 20px; }
  .room-access .room-actions { grid-template-columns: 1fr; }
  .ai-widget { right: 16px; }
  .ai-chat { right: 12px; left: 12px; width: auto; min-width: 0; min-height: 0; bottom: calc(88px + env(safe-area-inset-bottom)); height: min(680px, calc(100dvh - 108px - env(safe-area-inset-bottom))); max-height: calc(100dvh - 108px - env(safe-area-inset-bottom)); border-radius: 16px; }
  .ai-resize-handle, .ai-resize-hint { display: none; }
  .ai-chat-header { padding-left: 16px; }
}
@media (max-width: 359px) {
  .main-content { padding-inline: 12px; }
  .search-toolbar { flex-wrap: wrap; }
  .view-mode-toggle { margin-left: 0 !important; }
}

/* Rooms, offline status and accessible controls */
[hidden] { display: none !important; }
button:focus-visible, [role="button"]:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent, #8ba7ff); outline-offset: 4px; }
.room-settings { margin-bottom: 24px; }
.room-settings p { color: #bcbcc6; line-height: 1.55; margin: 12px 0; overflow-wrap: anywhere; }
.room-actions, .list-tools, .ai-quick-prompts { display: flex; flex-wrap: wrap; gap: 10px; }
.room-actions button, .room-settings > button { margin: 4px 0; }
#syncStatus { color: #a8d5ba; }
.room-modal { max-width: 640px; padding: 28px; max-height: 85dvh; overflow-y: auto; }
.room-modal h3 { margin-bottom: 18px; line-height: 1.4; }
.room-modal p { line-height: 1.6; margin: 16px 0; }
.room-modal input, .room-modal textarea, .list-tools input[type="search"], .list-tools select, .challenge-search-results + input, #challengeModal input[type="search"] { color: #eee; background: #202026; border: 1px solid #45454f; border-radius: 12px; padding: 12px; font: inherit; }
.room-modal input, .room-modal textarea { width: 100%; margin: 12px 0; }
.room-modal textarea { resize: vertical; overflow-wrap: anywhere; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #393941; }
.device-row span { overflow-wrap: anywhere; }
.list-tools { margin: 16px 0; align-items: center; }
.list-tools input[type="search"] { flex: 1; min-width: 150px; }
.list-tools label { white-space: nowrap; }
.load-more, .filter-summary, #searchResults > .empty-hint { grid-column: 1 / -1; }
.movies-grid > .empty-state { grid-column: 1 / -1; }
.room-access { margin-top: 14px; }
.room-access summary { cursor: pointer; color: #bcbcc6; padding: 10px 0; }
.room-access .room-actions { margin: 10px 0; }
.load-more { margin: 12px auto; }
.evening-btn { margin-bottom: 12px; }
#dayMoviesList, .challenge-search-results, .challenge-chosen { display: grid; gap: 8px; margin: 10px 0; }
.challenge-search-results button, .challenge-chosen button, #dayMoviesList button { text-align: left; }
.season-control { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.season-control input { width: 80px; padding: 8px; color: #fff; background: #282830; border-radius: 8px; }
.ai-quick-prompts { padding: 8px 16px; }
.ai-quick-prompts button { font-size: 12px; padding: 8px; }
.ai-consent { display: flex; gap: 10px; line-height: 1.5; font-size: 13px; }
.day-count { font-size: 10px; position: absolute; right: 3px; top: 3px; }
.ai-widget { bottom: calc(94px + env(safe-area-inset-bottom)); }
@media (max-width: 480px) {
    .movie-backdrop { height: 155px; }
    .movie-detail .movie-info { gap: 16px; }
    .movie-detail .movie-meta { padding-top: 32px; }
    .movie-poster-large { width: 92px; height: 138px; }
    .movie-overview { font-size: .875rem; }
    .movies-grid:not(.view-small):not(.view-large):not(.view-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .movies-grid.view-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .movies-grid.view-large { grid-template-columns: 1fr; }
    .search-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 38px; overflow: visible; gap: 6px; }
    .filter-btn { padding-inline: 5px; font-size: .8125rem; }
    .filter-advanced { flex: 0 0 42px; }
    .room-actions button { flex: 1 1 100%; }
    .room-modal { padding: 20px; }
    .section-header-actions { flex-wrap: wrap; justify-content: flex-start; }
    .section-header:has(.section-header-actions) { flex-wrap: wrap; gap: 12px; }
    .list-tools select { flex: 1; }
    .ai-chat { max-height: calc(100dvh - 100px); }
}
.movie-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 24px 20px; padding: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; }
.movie-facts:has(.movie-fact:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.movie-facts:has(.movie-fact:last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.movie-fact { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 2px 8px; }
.movie-fact + .movie-fact { border-left: 1px solid rgba(255,255,255,.1); }
.movie-fact strong { font-size: .875rem; line-height: 1.4; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.movie-fact span { color: var(--text-secondary); font-size: .6875rem; line-height: 1.4; }
.movie-fact-score strong { color: var(--accent-light); }
@media (max-width: 480px) {
    .movie-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 4px; padding: 12px 8px; }
    .movie-fact:nth-child(3) { border-left: 0; }
    .movie-facts:has(.movie-fact:last-child:nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Profile and chat surfaces. */
#profile-section > .section-header { max-width: 920px; margin-inline: auto; }
.profile-content { max-width: 920px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
.profile-content > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
.profile-hero, .profile-recent, .profile-fold, .profile-content > .room-settings, .profile-content > .challenges-section {
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(31,32,33,.72);
    border: 1px solid rgba(255,255,255,.13); border-radius: 24px;
    backdrop-filter: blur(24px) saturate(125%); -webkit-backdrop-filter: blur(24px) saturate(125%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 32px rgba(0,0,0,.1);
}
.profile-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 24px; }
.profile-eyebrow { grid-column: 1 / -1; color: var(--text-primary); font-size: 1.125rem; font-weight: 500; }
.profile-connection { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: -12px; }
.profile-connection p { color: var(--text-secondary); font-size: .8125rem; }
.profile-connection button { min-height: 44px; font-size: .8125rem; }
.profile-hero .profile-avatars { padding: 0; margin: 0; gap: 20px; align-self: center; }
.profile-hero .avatar { width: 120px; min-width: 0; }
.profile-hero .avatar-name { width: 100%; min-height: 44px; }
.profile-photo { position: relative; width: 72px; height: 72px; }
.profile-photo > span { width: 72px; height: 72px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.profile-photo img { width: 100%; height: 100%; }
.profile-photo .avatar-upload { right: -2px; bottom: -2px; width: 24px; height: 24px; }
.profile-hero .avatar-heart { align-self: flex-start; line-height: 72px; }
.profile-hero .avatar-name { border: 1px solid transparent; border-radius: 10px; background: rgba(255,255,255,.025); }
.profile-hero .avatar-name:hover, .profile-hero .avatar-name:focus { border-color: rgba(255,255,255,.25); }
.profile-hero .avatar-name:disabled { opacity: .7; background: none; }
.profile-hero .stats-cards { align-self: center; gap: 10px; margin: 0; }
.profile-hero .stat-card { padding: 16px 8px; border: 0; background: rgba(255,255,255,.035); border-radius: 16px; }
.profile-hero .stat-value { color: var(--text-primary); font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.profile-hero .stat-label { font-size: .6875rem; }
.profile-avatar-readonly { cursor: default; }
.profile-avatar-readonly .avatar-upload { display: none; }
.profile-shortcuts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.profile-shortcut { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.025); color: var(--text-primary); cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.profile-shortcut:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.24); }
.profile-shortcut strong { font-weight: 500; font-size: 1.1rem; }
.profile-shortcut span { font-size: .8125rem; color: var(--text-secondary); }
.profile-hero .turn-tracker { grid-column: 1 / -1; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.09); border-radius: 0; background: none; }
.profile-hero .turn-header { font-size: .8125rem; }
.profile-hero .turn-tracker { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
.profile-hero .turn-header { grid-column: 1; grid-row: 1; justify-content: flex-start; text-align: left; }
.profile-hero .turn-display { grid-column: 1; grid-row: 2; }
.profile-hero .turn-switch-btn { grid-column: 2; grid-row: 1 / 3; }
.profile-hero .turn-switch-btn { min-height: 44px; border-radius: 12px; }
.profile-recent { padding: 24px; }
.profile-block-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.profile-block-heading h3 { font-size: 1rem; font-weight: 500; }
.profile-block-heading button { min-height: 44px; }
.profile-recent-grid.movies-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.profile-empty { padding: 16px 0 4px; display: grid; justify-items: start; gap: 12px; }
.profile-empty p { font-size: .9375rem; }
.profile-empty span, .profile-empty-note { font-size: .875rem; color: var(--text-secondary); line-height: 1.65; }
.profile-empty-note { margin: 0 24px 24px; }
.profile-fold > summary { padding: 20px 24px; min-height: 60px; cursor: pointer; font-size: .9375rem; }
.profile-fold > summary::marker { color: var(--text-muted); }
.profile-fold[open] > summary { border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 20px; }
.profile-fold .stats-detail { margin: 0 24px 20px; background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
.profile-insight-grid { padding: 0 24px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-insight-grid .stats-section { margin: 0; background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.07); }
.profile-insight-grid .stats-section:last-child { grid-column: 1 / -1; }
.profile-content > .challenges-section, .profile-content > .profile-preferences { grid-column: 1 / -1; }
.profile-content > .challenges-section { padding: 24px; }
.profile-content .btn-add-challenge { min-width: 92px; min-height: 44px; padding: 10px 14px; border-radius: 12px; }
.profile-content .challenges-header { gap: 12px; flex-wrap: wrap; }
.profile-content .challenges-header h3 { margin-bottom: 0; }
.profile-content .challenges-grid { margin-top: 16px; }
.profile-preferences .settings-section { margin: 0; padding: 0 24px 24px; border: 0; background: none; }
.profile-preferences .settings-section > h3 { display: none; }
.profile-content > .room-settings { padding: 24px; border-left: 1px solid rgba(255,255,255,.13); }
.profile-content > .room-settings h3 { font-size: 1rem; font-weight: 500; }
.profile-content .room-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-content .room-actions button { margin: 0; min-height: 44px; white-space: normal; }
.profile-content .room-settings > p { font-size: .875rem; }
.ai-widget { position: fixed; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); }
.ai-widget-btn { width: 52px; height: 52px; padding: 13px; border-radius: 50%; color: var(--text-primary); background: rgba(44,47,49,.75); border: 1px solid rgba(255,255,255,.23); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 22px rgba(0,0,0,.18); }
.ai-widget-btn span { display: none; }
.ai-widget-btn:hover { background: rgba(68,72,74,.85); }
.ai-chat { width: 25vw; min-width: min(300px, calc(100vw - 40px)); border-radius: 24px; background: rgba(28,31,33,.86); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(28px) saturate(135%); -webkit-backdrop-filter: blur(28px) saturate(135%); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 50px rgba(0,0,0,.25); }
.ai-chat-header { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.08); }
.ai-chat-settings, .ai-chat-footer { background: rgba(0,0,0,.12); border-color: rgba(255,255,255,.08); }
.ai-quick-prompts button, .ai-clear-btn { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.ai-quick-prompts button { white-space: normal; text-align: left; }
.main-content { padding-bottom: 92px; }
@media (max-width: 767px) {
    .profile-content { grid-template-columns: 1fr; gap: 16px; }
    .profile-content > .challenges-section, .profile-content > .profile-preferences { grid-column: 1; }
    .profile-hero { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .profile-hero .profile-avatars { justify-content: center; gap: 12px; }
    .profile-hero .avatar { width: 100px; }
    .profile-hero .stats-cards { grid-column: 1; }
    .profile-hero .turn-tracker { padding-top: 16px; gap: 8px; }
    .profile-hero .turn-header { grid-column: 1 / -1; }
    .profile-hero .turn-switch-btn { grid-row: 2; }
    .profile-shortcut { flex-direction: column; gap: 2px; padding: 10px 4px; }
    .profile-shortcut span { font-size: .75rem; }
    .profile-recent, .profile-content > .room-settings, .profile-content > .challenges-section { padding: 20px; }
    .profile-recent-grid.movies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-insight-grid { grid-template-columns: 1fr; padding: 0 20px 20px; }
    .profile-content .room-actions { grid-template-columns: 1fr; }
    .profile-fold > summary { padding-inline: 20px; }
    .profile-preferences .settings-section { padding-inline: 20px; }
    .ai-widget { right: 16px; }
    .ai-chat { width: auto; }
}
@supports not (backdrop-filter: blur(1px)) { .profile-hero, .profile-recent, .profile-fold, .ai-chat, .ai-widget-btn { background: #242628; } }

/* Film synopsis: a translucent companion panel, separate from the chat. */
.movie-modal-layout { position: relative; width: min(660px, 100%); min-width: 0; }
.movie-modal-layout > .movie-detail { width: 100%; max-width: none; }
.movie-synopsis { position: relative; margin: 0 24px 24px; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.synopsis-button, .synopsis-glass {
    background: rgba(47, 48, 47, .56);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(20px) saturate(115%);
    -webkit-backdrop-filter: blur(20px) saturate(115%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    border-radius: 16px;
}
.synopsis-button { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; padding: 10px; border-radius: 50%; color: var(--accent-light); cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.synopsis-button:hover { background: rgba(65, 66, 64, .7); border-color: rgba(255, 255, 255, .3); }
.synopsis-button[aria-expanded="true"] { background: rgba(61, 63, 60, .65); }
.synopsis-panel { width: 100%; margin-top: 10px; transform-origin: top; animation: synopsisReveal 260ms ease-out backwards; }
@keyframes synopsisReveal { from { opacity: 0; clip-path: inset(0 0 100% 0 round 16px); transform: translateY(-6px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 16px); transform: translateY(0); } }
.synopsis-glass { padding: 20px; overflow-wrap: anywhere; }
.synopsis-text { font-size: .9375rem; line-height: 1.8; color: #eeefeb; margin: 0; }
.synopsis-status { display: flex; align-items: center; gap: 10px; color: #c8cbc5; font-size: .875rem; line-height: 1.65; }
.synopsis-spinner { width: 17px; height: 17px; flex-shrink: 0; border: 1.5px solid rgba(255, 255, 255, .16); border-top-color: var(--accent-light); border-radius: 50%; animation: spin 900ms linear infinite; }
.synopsis-error .synopsis-spinner { display: none; }
.synopsis-retry { padding: 8px 0; min-height: 40px; margin-top: 10px; border: 0; color: var(--accent-light); background: none; font-size: .8125rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@supports not (backdrop-filter: blur(1px)) { .synopsis-button, .synopsis-glass { background: #2a2d29; } }
@media (min-width: 768px) {
    #movieModal .movie-modal-layout { display: grid; grid-template-columns: minmax(0, 660px) 48px; align-items: start; gap: 12px; width: min(720px, calc(100% - 32px)); max-height: 85dvh; }
    #movieModal .movie-synopsis { margin: 0; width: 48px; }
    .synopsis-panel { position: absolute; top: 48px; right: 0; width: 300px; }
    .synopsis-glass { max-height: calc(85dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 1280px) { .synopsis-panel { left: 0; right: auto; } }
@media (max-width: 767px) { .movie-modal-layout > .movie-detail { max-height: 90dvh; } }

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

/* Shared controls polish: glass surfaces, spacing and touch targets. */
:root {
    --control-glass-bg: rgba(31, 32, 34, .82);
    --control-glass-edge: rgba(255, 255, 255, .15);
    --control-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.header {
    background: rgba(19, 20, 21, .78);
    border-bottom-color: rgba(255, 255, 255, .09);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.bottom-nav {
    left: 50%; right: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(720px, calc(100% - 24px));
    height: 68px;
    transform: translateX(-50%);
    padding: 6px;
    gap: 4px;
    background: var(--control-glass-bg);
    border: 1px solid var(--control-glass-edge);
    border-radius: 24px;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25), var(--control-glass-highlight);
}
.app { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.nav-btn {
    flex: 1; min-width: 0; min-height: 54px;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: 18px;
    gap: 4px;
}
.nav-btn.active {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.nav-btn span { font-size: .72rem; line-height: 1.2; }
.search-box, .search-filters, .search-toolbar .view-mode-toggle {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: var(--control-glass-highlight);
}
.search-box { min-height: 54px; border-radius: 16px; }
.search-filters {
    width: fit-content; max-width: 100%;
    padding: 4px; gap: 6px; border-radius: 17px;
}
.search-filters > button { min-height: 44px; border-radius: 12px; }
.filter-btn:not(.active), .filter-btn-secondary:not(.has-filters) { background: transparent; }
.search-toolbar { gap: 12px; align-items: center; }
.sort-toggle-btn { min-height: 44px; padding: 10px 14px; border-color: rgba(255, 255, 255, .13); }
.view-mode-toggle { gap: 4px; border-radius: 14px; }
.view-mode-btn { min-width: 44px; min-height: 44px; padding: 10px; border-radius: 10px; }
.section-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.section-header-actions > button { min-height: 44px; padding: 10px 14px; border-radius: 12px; }
#randomizerBtn { background: var(--accent); color: #151515; border-color: transparent; }
:where(#search-section, #wishlist-section, #watching-section, #history-section, .modal-content) .btn-secondary,
.tag-btn, .time-btn, .assignee-btn, .bet-tab, .view-btn {
    border-color: rgba(255, 255, 255, .13);
    box-shadow: var(--control-glass-highlight);
}
.tag-btn, .time-btn, .genre-btn, .assignee-btn, .bet-tab, .bet-user, .view-btn {
    min-height: 44px;
    padding: 10px 12px;
    line-height: 1.35;
}
.genre-exclude-grid, .tags-container, .time-buttons, .mood-buttons, .assignee-buttons { gap: 8px; }
.genre-btn { font-size: .8125rem; }
.vibe-nav, .episode-controls > button { min-width: 44px; min-height: 44px; }
.view-toggle { gap: 6px; }
.view-btn { font-size: .8125rem; }
.modal-overlay { background: rgba(0, 0, 0, .58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-content:not(.room-modal) {
    background: linear-gradient(rgba(255, 255, 255, .025), transparent 180px), rgba(27, 28, 29, .9);
    border-color: var(--control-glass-edge);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .3), var(--control-glass-highlight);
}
.modal-content .form-group, .modal-content .filter-group { margin-bottom: 20px; }
.movie-actions, .filter-actions, .challenge-modal-actions, .date-night-regenerate { gap: 12px; }
.movie-actions .episode-controls { gap: 12px; }
.year-range { gap: 12px; }
.year-input-group { min-width: 0; }
.year-input-group input { width: 100%; min-width: 0; min-height: 44px; }
.country-exclude { gap: 8px 16px; }
.checkbox-label { min-height: 44px; padding-block: 6px; }
.modal-content .modal-close-text { margin-top: 16px; }
.section .list-tools { gap: 12px; }
.section .list-tools input[type="search"], .section .list-tools select { border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
    .nav-btn:hover, .tag-btn:not(.active):hover, .time-btn:not(.active):hover { background: rgba(255, 255, 255, .09); }
    .section-header-actions > button:active, .modal-content .btn-primary:active, .modal-content .btn-secondary:active { transform: scale(.985); }
}
@media (max-width: 767px) {
    .search-toolbar { flex-wrap: wrap; }
    .search-toolbar .view-mode-toggle { margin-left: auto; }
    .section-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .section-header-actions > button { width: 100%; min-width: 0; padding-inline: 10px; justify-content: center; }
    #randomizerBtn { grid-column: 1 / -1; grid-row: 1; }
    .section .list-tools input[type="search"] { flex-basis: 100%; }
    .section .list-tools select { flex: 1 1 160px; min-width: 0; }
    .filters-modal { max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); }
    .filter-actions { margin-top: 20px; }
    .modal-content:not(.room-modal) { border-radius: 22px 22px 0 0; }
}
@media (max-width: 480px) {
    .search-filters { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)) 44px; gap: 6px; }
    .search-filters .filter-btn { padding-inline: 4px; font-size: .75rem; }
    .search-filters .filter-advanced { padding: 10px; }
    .nav-btn span { font-size: .6875rem; }
}
@media (max-width: 359px) {
    .search-filters { gap: 4px; }
    .search-filters .filter-btn { font-size: .734375rem; }
    .search-toolbar { align-items: stretch; }
    .search-toolbar .sort-toggle-btn { width: 100%; }
    .search-toolbar .view-mode-toggle { margin-left: 0; }
    .year-range { gap: 8px; }
    .filter-actions { gap: 8px; }
    .filter-actions > button { min-width: 0; padding-inline: 12px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header, .bottom-nav, .modal-content:not(.room-modal) { background: #202123; }
}
@media (prefers-contrast: more) {
    .header, .bottom-nav, .modal-content:not(.room-modal) { background: #202123; border-color: #777; }
}
/* End shared controls polish. */
.profile-account .account-form { display: grid; gap: 16px; margin-top: 16px; }
.account-field { display: grid; gap: 8px; font-size: .875rem; color: var(--text-secondary); min-width: 0; }
.account-field input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; color: var(--text-primary); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; font: inherit; }
.account-field input[readonly] { color: var(--text-secondary); }
.profile-account > .account-field { margin-top: 16px; }
.account-form > button { justify-self: start; min-height: 44px; }
.account-error { color: #f0b2ae; font-size: .875rem; margin-top: 12px; }
.access-pending .app, .access-pending .ai-widget { visibility: hidden; }
.profile-system-body { display: grid; gap: 16px; padding: 0 20px 20px; }
.profile-system-body .profile-account, .profile-system-body .profile-fold, .profile-system-body .room-settings { margin: 0; border-radius: 16px; padding: 20px; min-width: 0; }
.profile-system-body .profile-preferences { padding: 0; }
.login-gate { width: min(440px, calc(100% - 32px)); margin: max(32px, 8dvh) auto; padding-bottom: 32px; }
.login-gate > h1 { font-size: 2rem; letter-spacing: -.05em; }
.login-gate > p { color: var(--text-secondary); margin: 8px 0 24px; }
.login-gate .profile-account { padding: 24px; }
.login-gate .profile-account .account-form > button { width: 100%; }
.login-help { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.login-help button { flex: 1; font-size: .8125rem; }
.login-gate > .btn-primary { width: 100%; margin-top: 16px; }
.profile-system-body .profile-account { padding: 0 0 16px; background: none; border: 0; box-shadow: none; backdrop-filter: none; }