* { box-sizing: border-box; }
html { min-height: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
  background:
    radial-gradient(ellipse 65% 440px at 85% 100px, #46052d 0%, transparent 90%),
    radial-gradient(ellipse 90% 580px at 0 170px, #390416 0%, transparent 85%),
    var(--color-bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.has-overlay, body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; }
button:disabled { opacity: .5; }
button, a, input, select, textarea { touch-action: manipulation; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
svg { width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-size: 22px; line-height: 28px; font-weight: 750; letter-spacing: -.025em; }
h3 { font-size: 14px; line-height: 18px; font-weight: 700; }
::selection { background: #a5156c; color: white; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
#page-content:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.muted, .fine-print, .secondary-text { color: var(--color-muted); }
.fine-print { font-size: 12px; line-height: 18px; }
.primary-btn, .secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  max-width: 100%;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.primary-btn { background: var(--brand-gradient); color: white; }
.secondary-btn { background: rgb(255 255 255 / 8%); border: 1px solid var(--color-border); }
.primary-btn:disabled { background: #634b58; opacity: .8; color: #e0d6db; }
.text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 0 8px 8px;
  background: transparent;
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.icon-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: rgb(255 255 255 / 8%);
  color: white;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 260px;
  padding: 32px 20px;
  text-align: center;
  color: var(--color-muted);
}
.empty-state h1, .empty-state h2, .empty-state h3 { color: var(--color-text); }
.empty-state > svg { width: 40px; height: 40px; color: #d3a5bf; }
.empty-state p { max-width: 38ch; overflow-wrap: anywhere; }
.skeleton {
  border-radius: var(--radius-card);
  background: linear-gradient(100deg, #301023 20%, #451c36 45%, #301023 70%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  min-height: 24px;
}
.skeleton.poster, .poster-wrap.skeleton { aspect-ratio: 2 / 3; }
.skeleton-card { width: var(--rail-card-width); flex: 0 0 var(--rail-card-width); }
.skeleton-card .skeleton:first-child { aspect-ratio: 2 / 3; }
.skeleton-card .skeleton + .skeleton { margin-top: 12px; width: 80%; min-height: 20px; }
.toast {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 12px;
  background: #38212e;
  box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
  text-align: center;
  color: white;
  font-size: 14px;
  overflow-wrap: anywhere;
}
@keyframes skeleton-shimmer { to { background-position: -220% 0; } }
@media (hover: hover) {
  .icon-btn:hover, .secondary-btn:hover, .menu-item:hover { background-color: rgb(255 255 255 / 14%); }
  .primary-btn:not(:disabled):hover { filter: brightness(1.12); }
  .text-btn:hover { color: #ff88b2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .skeleton { animation: none; background: #35162a; }
}