/* ========================================================
   奇优影视-奇优电影网 纯静态样式系统 (淡黑金奢华影院美学)
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Noto+Sans+SC:wght@300;400;500;600;700;900&display=swap');

:root {
  --bg-main: #0b0c10;
  --bg-card: #12141f;
  --bg-card-hover: #181b28;
  --gold-primary: #f5d061;
  --gold-secondary: #e5b948;
  --gold-dark: #caa037;
  --gold-border: rgba(229, 185, 72, 0.25);
  --gold-glow: 0 0 25px rgba(245, 208, 97, 0.18);
  --text-primary: #f0f2f5;
  --text-muted: #8c93a4;
  --border-dark: #242738;
}

html {
  scroll-behavior: smooth;
  font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-primary);
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  selection-background-color: rgba(212, 175, 55, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0d0f16;
}
::-webkit-scrollbar-thumb {
  background: #2a2d3e;
  border-radius: 4px;
  border: 1px solid rgba(229, 185, 72, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: #d4af37;
}

/* Gold Gradient Typography */
.gold-gradient-text {
  background: linear-gradient(135deg, #fff7d6 0%, #f5d061 40%, #c89d2d 80%, #9e7518 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-gradient-bg {
  background: linear-gradient(135deg, #f5d061 0%, #e5b948 50%, #caa037 100%);
  color: #0b0c10;
}

.gold-border {
  border: 1px solid var(--gold-border);
}

.gold-glow {
  box-shadow: var(--gold-glow);
}

.dark-glass {
  background: rgba(18, 20, 31, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Active navigation state */
.nav-active {
  color: #f5d061 !important;
  background: #1d202d !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #f5d061 !important;
}

/* Active filter pill */
.filter-pill-active {
  background: #f5d061 !important;
  color: #0d0f16 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(245, 208, 97, 0.25) !important;
  border-color: #f5d061 !important;
}

/* Active sort button */
.sort-btn-active {
  background: #1e2130 !important;
  color: #f5d061 !important;
  border-color: rgba(245, 208, 97, 0.5) !important;
  font-weight: 700 !important;
}

/* Line clamp helpers */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}