/* SecretFrame · Modern Cinema Design System */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
}
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent-hover); }
::-webkit-scrollbar-corner { background:transparent; }
:root {
  color-scheme: dark;
  --bg: #07080c;
  --bg-deep: #040507;
  --surface: rgba(18, 21, 32, 0.75);
  --surface-solid: #121520;
  --surface-hover: rgba(28, 33, 49, 0.85);
  --surface-card: #0e111a;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f8fafc;
  --text-secondary: #cbd5e1;
  --muted: #94a3b8;
  --dim: #64748b;
  --accent: #e11d48;
  --accent-hover: #f43f5e;
  --accent-glow: rgba(225, 29, 72, 0.4);
  --accent-soft: rgba(225, 29, 72, 0.12);
  --gold: #f59e0b;
  --gold-glow: rgba(245, 158, 11, 0.35);
  --emerald: #10b981;
  --emerald-glow: rgba(16, 185, 129, 0.3);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.15);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 30px -5px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 20px 50px -10px rgba(0, 0, 0, 0.85), 0 0 25px var(--accent-glow);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: 
    radial-gradient(circle at 10% 0%, rgba(99, 102, 241, 0.1), transparent 35%),
    radial-gradient(circle at 90% 15%, rgba(225, 29, 72, 0.08), transparent 40%),
    radial-gradient(circle at 50% 85%, rgba(14, 165, 233, 0.05), transparent 45%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 5%;
  background: rgba(7, 8, 12, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
  transition: var(--transition);
}

a {
  color: inherit;
  text-decoration: none;
}

.brand {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1.5px;
  display: flex;
  flex-direction:column;
  align-items: center;
  width:max-content;
  gap:5px;
  line-height:1;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.brand-block { min-width:0; flex-shrink:0; }
.brand-wordmark { display:flex; align-items:center; }
.brand .brand-slogan { margin:0; font-size:10px; line-height:1.35; font-weight:500; letter-spacing:.35px; font-style:normal; text-align:center; color:#a9b5c6; text-shadow:none; }

.brand-accent {
  font-size: inherit;
  letter-spacing: inherit;
  margin-left: 0;
  background: linear-gradient(135deg, #ffffff 40%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand i {
  font-style: normal;
  font-size: 6px;
  color: var(--accent);
  margin-left: 8px;
  display: inline-block;
  animation: pulseDot 2.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 6px var(--accent)); }
  50% { opacity: 0.4; transform: scale(0.85); filter: drop-shadow(0 0 0 transparent); }
}

nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

nav .link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid transparent;
  transition: var(--transition);
}

nav .link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.header-account { display:flex; align-items:center; gap:12px; margin-left:auto; flex-shrink:0; }
.header-account #accountNav { flex:0 0 auto; gap:4px; }
.header-account #accountNav:empty { display:none; }
.header-account #myProfile { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header-account #myProfile { display:inline-flex; align-items:center; gap:9px; }
.account-avatar { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border:1px solid var(--line-strong); border-radius:50%; overflow:hidden; background:var(--surface-solid); color:var(--muted); }
.account-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.account-avatar svg { display:block; width:20px; height:20px; }
.header-account .private { white-space:nowrap; flex-shrink:0; }
header > #nav { flex-wrap:wrap; }
#nav #manage { border:1px solid var(--accent); }
#nav #manage:hover,#nav #manage:focus-visible { border-color:var(--accent-hover); background:var(--accent-soft); }
@media(max-width:768px) { .header-account { width:100%; justify-content:flex-end; gap:8px; } .header-account .private { display:inline-flex; font-size:10px; letter-spacing:1px; padding:6px 10px; } .header-account #accountNav .link { padding:8px 10px; } .header-account #myProfile { max-width:130px; } }

.private {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--emerald);
  box-shadow: 0 0 15px var(--emerald-glow);
}

.private::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
}

/* ==========================================================================
   Main & Layout Containers
   ========================================================================== */
main {
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 5% 90px;
  flex: 1;
}

h1, h2, h3, h4, p {
  margin-top: 0;
}

h1 {
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  color: #fff;
}

h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
}

h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 12px 0 4px;
  color: #f1f5f9;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.muted, small {
  color: var(--muted);
}

small {
  font-size: 12px;
}

/* ==========================================================================
   Buttons & Interactive Elements
   ========================================================================== */
button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

button {
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
  transition: var(--transition);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.primary, .secondary, .danger, .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  transition: var(--transition);
  text-align: center;
}

.primary {
  background: linear-gradient(135deg, var(--accent) 0%, #be123c 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px var(--accent-glow);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-hover) 0%, #e11d48 100%);
  box-shadow: 0 6px 25px var(--accent-glow);
  transform: translateY(-2px);
}

.secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
}

.secondary:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.danger {
  background: var(--danger-bg);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 13px;
  padding: 8px 16px;
}

.danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.28);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fff;
}

.link {
  color: var(--text-secondary);
  background: transparent;
  padding: 8px 12px;
}

.link:hover {
  color: #fff;
}

/* ==========================================================================
   Panel & Forms
   ========================================================================== */
.panel {
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px;
  margin: 28px 0;
  box-shadow: var(--shadow-sm);
}

label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 18px 0 6px;
}

input, select, textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  background: rgba(10, 12, 18, 0.85);
  color: var(--text);
  margin-top: 6px;
  transition: var(--transition);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: rgba(15, 18, 28, 0.95);
}

textarea {
  min-height: 110px;
  resize: vertical;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 24px;
  cursor: pointer;
  user-select: none;
}

.check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.notice {
  padding: 16px 20px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fde68a;
  background: rgba(245, 158, 11, 0.08);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  margin: 15px 0;
}

.error:empty { display:none; }
.draft-status { font-size:12px; color:var(--muted); margin:10px 0 16px; }
.movie-audit { font-size:12px; }
.movie-details-grid { display:grid; grid-template-columns:minmax(0,1fr) 130px 160px; gap:0 16px; align-items:end; }
.movie-details-grid > div { min-width:0; }
.movie-title-field { grid-column:auto; }
.number-stepper { display:flex; align-items:stretch; border:1px solid var(--line-strong); border-radius:var(--radius-sm); overflow:hidden; }
.number-stepper input { min-width:0; border:0; border-radius:0; text-align:center; appearance:textfield; }
.number-stepper input::-webkit-inner-spin-button,.number-stepper input::-webkit-outer-spin-button { appearance:none; margin:0; }
.number-stepper button { flex:0 0 38px; border:0; border-radius:0; padding:0; color:var(--muted); background:var(--surface-solid); font-size:20px; }
.number-stepper button:hover { color:#fff; background:var(--accent); }
.number-stepper:focus-within { border-color:var(--accent); }
.movie-rating-field label { display:flex; justify-content:space-between; align-items:center; gap:8px; }
#movieRatingValue { color:var(--accent-hover); font-size:12px; white-space:nowrap; }
.movie-rating-field input[type=range] { accent-color:var(--accent); padding:0; height:40px; background:transparent; border:0; cursor:pointer; }
.rating-range-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.movie-details-grid .number-stepper button { flex-basis:28px; }
.movie-scores { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:22px 0; }
.movie-score { display:flex; flex-direction:column; justify-content:center; gap:8px; padding:16px; border:1px solid var(--line); border-radius:12px; background:rgba(8,15,23,.65); }
.movie-score > span,.movie-score label { font-size:12px; color:var(--muted); margin:0; }
.movie-score strong,#movieRatingValue { font-size:22px; font-weight:700; color:var(--text); }
.movie-score small { font-size:11px; line-height:1.5; color:var(--muted); }
.update-imdb-score { align-self:flex-start; padding:7px 11px; font-size:12px; }
@media(max-width:650px) { .movie-details-grid { grid-template-columns:minmax(0,1fr) 96px 112px; gap:0 8px; } .movie-details-grid .number-stepper button { flex-basis:22px; } .movie-details-grid .number-stepper input { padding-left:2px; padding-right:2px; } .movie-details-grid label { font-size:11px; } .movie-scores { grid-template-columns:1fr; } }
.metadata-query-row { display:flex; align-items:flex-end; gap:12px; }
.metadata-query-row label { width:240px; max-width:100%; min-width:0; margin:0; }
.metadata-query-row button { flex-shrink:0; margin-bottom:6px; }
@media(max-width:450px) { .metadata-query-row { gap:8px; } .metadata-query-row label { flex:1; } .metadata-query-row button { padding:12px 10px; font-size:12px; } }
.error {
  color: #f87171;
  background: var(--danger-bg);
  border: 1px solid rgba(239, 68, 68, 0.25);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin: 14px 0;
}

.empty {
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  padding: 50px 20px;
  background: rgba(18, 21, 32, 0.3);
}

/* ==========================================================================
   Login Experience
   ========================================================================== */
.login {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 8%;
  align-items: center;
  min-height: 70vh;
  padding: 40px 0;
}

.login h1 {
  font-size: clamp(42px, 5.5vw, 76px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -2px;
}

.login .panel {
  max-width: 480px;
  width: 100%;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.login .primary {
  width: 100%;
  margin: 20px 0 10px;
  padding: 14px 24px;
  font-size: 16px;
}

.login-art {
  position: relative;
  height: 260px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: 
    radial-gradient(ellipse at 10% 90%, rgba(225, 29, 72, 0.25), transparent 60%),
    radial-gradient(ellipse at 90% 10%, rgba(99, 102, 241, 0.2), transparent 60%),
    #0c0e16;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 900;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.08);
  user-select: none;
}

.login-art span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent);
  margin-top: 16px;
}

/* ==========================================================================
   Catalog, Search & Filters
   ========================================================================== */
.catalog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10px 0 32px;
  gap: 30px;
  flex-wrap: wrap;
}

.catalog-head h1 {
  margin-bottom: 0;
}

.search-wrap {
  width: 360px;
  position: relative;
}

.search-wrap input {
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 14px 22px 14px 46px;
  margin: 0;
  font-size: 14px;
  backdrop-filter: blur(12px);
  background-image: url("img/search.svg");
  background-repeat: no-repeat;
  background-position: 18px center;
}

.search-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 20px var(--accent-glow);
}

/* Hero Section */
.hero {
  min-height: 460px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: #0d1019;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-md);
  margin-bottom: 40px;
}

.hero-image {
  position: absolute;
  right: 0;
  top: 0;
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: -2;
  opacity: 0.7;
  filter: contrast(1.1) brightness(0.9);
  transition: transform 0.6s ease;
}

.hero:hover .hero-image {
  transform: scale(1.02);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, #090a0f 25%, rgba(9, 10, 15, 0.92) 48%, rgba(9, 10, 15, 0.5) 75%, rgba(9, 10, 15, 0.15) 100%),
    linear-gradient(0deg, #090a0f 5%, transparent 60%);
  z-index: -1;
}

.hero-content {
  padding: 50px 6%;
  max-width: 680px;
}

.hero h2 {
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hero-content > p:not(.eyebrow):not(.meta) {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 26px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.meta span {
  color: var(--dim);
}

.hero-note {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--dim);
  margin-left: 20px;
}

/* Category Filter Chips */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0 35px;
}

.chip {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}

.chip:hover {
  background: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-1px);
}

.chip.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 15px var(--accent-glow);
}

/* Section titles */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 30px 0 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.section-title h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.section-title span {
  font-size: 13px;
  color: var(--dim);
  font-weight: 500;
}

/* ==========================================================================
   Movie Cards Grid
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 26px;
  margin-bottom: 50px;
}

.card {
  background: transparent;
  color: inherit;
  border: none;
  text-align: left;
  padding: 0;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.poster {
  aspect-ratio: 2 / 3;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: var(--transition);
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover .poster {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card:hover .poster img {
  transform: scale(1.06);
}

.play-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(225, 29, 72, 0.9);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  padding-left: 3px;
  opacity: 0;
  transform: scale(0.75);
  box-shadow: 0 0 25px var(--accent-glow);
  backdrop-filter: blur(8px);
  transition: var(--transition);
}

.card:hover .play-dot {
  opacity: 1;
  transform: scale(1);
}

.placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 70px;
  font-weight: 900;
  color: var(--dim);
  background: radial-gradient(circle, rgba(225, 29, 72, 0.1), transparent 70%);
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(10, 12, 18, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold);
}

.card h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 12px 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  transition: color 0.2s;
}

.card:hover h3 {
  color: var(--accent);
}

.card p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card p span:last-child {
  color: var(--gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.card small {
  display: inline-block;
  margin-top: 5px;
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
}

/* ==========================================================================
   Movie Detail View
   ========================================================================== */
.detail {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 50px;
  margin: 25px 0 50px;
  align-items: flex-start;
}

.detail-poster {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line-strong);
  aspect-ratio: 2 / 3;
  background: var(--surface-card);
}

.detail-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail h1 {
  font-size: clamp(34px, 4.5vw, 56px);
  margin: 10px 0 16px;
}

.synopsis {
  max-width: 820px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 20px 0;
}

.rating {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.rating p {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.star {
  background: none;
  border: none;
  color: #334155;
  font-size: 32px;
  padding: 0 4px;
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}

.star:hover, .star.active {
  color: var(--gold);
  transform: scale(1.15);
}

/* ==========================================================================
   Video Player Experience (Full Width Top Screen)
   ========================================================================== */
.player-hero-wrap {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #020305;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 60px rgba(225, 29, 72, 0.15);
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line-strong);
}

.player {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  position: relative;
}

.player-video-container {
  width: 100%;
  max-height: 82vh;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player video {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  background: #000;
  outline: none;
  display: block;
}

/* Estilo y visibilidad mejorada de subtítulos WebVTT */
::cue {
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-family: var(--font);
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.9);
  padding: 3px 8px;
  border-radius: 4px;
}

.player-bar {
  max-width: 1560px;
  margin: 0 auto;
  padding: 14px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(10, 12, 18, 0.95);
  border-top: 1px solid var(--line);
}

.player-tools {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: none;
}

.player-tools label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.player-tools select {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.player-bar { justify-content:center; gap:12px; }
.player-tools { width:100%; justify-content:center; gap:12px; }
.player-timeline { position:relative; width:100%; height:22px; display:flex; align-items:center; }
.player-timeline progress { position:absolute; width:100%; height:4px; border:0; border-radius:4px; overflow:hidden; appearance:none; background:#334155; color:var(--accent); }
.player-timeline progress::-webkit-progress-bar { background:#334155; }
.player-timeline progress::-webkit-progress-value { background:var(--accent); }
.player-timeline progress::-moz-progress-bar { background:var(--accent); }
.player-timeline input { position:relative; width:100%; height:22px; margin:0; padding:0; border:0; background:transparent; appearance:none; cursor:pointer; accent-color:var(--accent); }
.player-timeline input::-webkit-slider-runnable-track { height:4px; background:transparent; }
.player-timeline input::-moz-range-track { height:4px; background:transparent; }
.player-timeline input::-moz-range-progress { background:transparent; }
.player-timeline input::-webkit-slider-thumb { appearance:none; width:12px; height:12px; margin-top:-4px; border-radius:50%; background:var(--accent); transition:transform 180ms ease; }
.player-timeline input::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:var(--accent); }
.player-timeline input:hover::-webkit-slider-thumb { transform:scale(1.25); }
.player-control { display:inline-flex; align-items:center; justify-content:center; gap:3px; min-width:40px; min-height:40px; padding:8px; border:1px solid transparent; border-radius:50%; background:transparent; color:var(--text); font-size:21px; }
.player-control:hover { background:rgba(225,29,72,.15); border-color:var(--accent); }
.player-control:focus-visible,.player-timeline input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.player-control small { font-size:11px; }
.player-toggle { width:46px; height:46px; background:var(--accent); color:#fff; }
.player-toggle:hover { background:var(--accent-hover); }
.player-time { color:var(--text-secondary); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.player-volume { display:flex; align-items:center; gap:3px; }
.player-volume input { width:75px; padding:0; margin:0; accent-color:var(--accent); cursor:pointer; }
.player-status { width:100%; text-align:center; font-size:11px; }
.player .player-overlay-controls { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); width:min(560px,80%); max-height:none; padding:18px 24px; border:0; border-radius:18px; background:rgba(7,8,12,.55); backdrop-filter:blur(6px); display:flex; flex-direction:column; gap:8px; opacity:0; pointer-events:none; transition:opacity 220ms ease; }
.player:hover .player-overlay-controls,.player:focus-within .player-overlay-controls,.player.is-paused .player-overlay-controls { opacity:1; pointer-events:auto; }
.player-overlay-controls .player-tools { gap:24px; }
.player-overlay-controls .player-toggle { width:60px; height:60px; font-size:26px; }
.player-corner-tools { position:absolute; z-index:3; right:16px; bottom:16px; display:flex; align-items:center; gap:8px; }
.player-corner-tools > .player-control,.player-settings > summary { background:rgba(7,8,12,.8); border-color:rgba(255,255,255,.18); }
.player-corner-tools > .player-control,.player-settings > summary { display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; flex:0 0 44px; padding:0; margin:0; box-sizing:border-box; border-radius:50%; line-height:1; }
.player-corner-tools svg { display:block; width:22px; height:22px; flex-shrink:0; }
.player-corner-tools > .player-control:hover,.player-settings > summary:hover,.player-settings[open] > summary { border-color:var(--accent); background:rgba(225,29,72,.22); }
.player-expand { font-size:27px; }
.player-settings { position:relative; }
.player-settings > summary { list-style:none; cursor:pointer; }
.player-settings > summary::-webkit-details-marker { display:none; }
.player-settings-panel { position:absolute; right:0; bottom:52px; width:min(280px,calc(100vw - 40px)); display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:18px; border:1px solid var(--line-strong); border-radius:14px; background:rgba(10,12,18,.97); box-shadow:0 8px 30px #0008; color:var(--text); max-height:65dvh; overflow:auto; }
.player-settings[open] .player-settings-panel { animation:sectionReveal 180ms var(--motion-ease); }
.player-settings-panel label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; font-size:13px; }
.player-settings-panel select { width:auto; margin:0; }
.player-settings-panel .player-volume input { width:100%; }
.player-comment { display:none; position:relative; }
.player-hero-wrap.is-expanded .player-comment { display:block; }
.player-comment > summary { display:grid; place-items:center; width:44px; height:44px; padding:0; margin:0; box-sizing:border-box; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(7,8,12,.8); list-style:none; cursor:pointer; line-height:1; }
.player-comment > summary::-webkit-details-marker { display:none; }
.player-comment > summary:hover,.player-comment[open] > summary { border-color:var(--accent); background:rgba(225,29,72,.22); }
.player-comment > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.player-comment-panel { width:min(340px,calc(100vw - 40px)); right:-104px; margin:0; }
.player-comment-panel textarea { min-height:100px; margin:0; }
.player-comment[open] .player-comment-panel { animation:sectionReveal 180ms var(--motion-ease); }
.player-hero-wrap.is-expanded .player-corner-tools { opacity:0; pointer-events:none; transition:opacity 220ms ease; }
.player-hero-wrap.is-expanded .player:hover .player-corner-tools,.player-hero-wrap.is-expanded .player:focus-within .player-corner-tools,.player-hero-wrap.is-expanded .player.is-paused .player-corner-tools { opacity:1; pointer-events:auto; }
@media(hover:none) { .player-hero-wrap.is-expanded .player-corner-tools { opacity:1; pointer-events:auto; } }
@media(hover:none) { .player .player-overlay-controls { opacity:1; pointer-events:auto; } }
@media(max-width:600px) { .player .player-overlay-controls { padding:10px 16px; width:80%; } .player-overlay-controls .player-toggle { width:44px; height:44px; } .player-corner-tools { right:8px; bottom:8px; } }
@media(max-width:600px) { .player-tools { gap:6px; } .player-tools .player-size-switch { width:100%; justify-content:center; } .player-bar { padding:8px 12px; } }

.player-size-switch { display:inline-flex; align-items:center; gap:9px; position:relative; margin:0; cursor:pointer; font-size:13px; color:var(--text-secondary); }
.player-size-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.player-switch-track { width:36px; height:21px; flex-shrink:0; border:1px solid var(--line-strong); border-radius:20px; background:#334155; transition:background 200ms ease,border-color 200ms ease; }
.player-switch-track::after { content:''; display:block; width:15px; height:15px; margin:2px; border-radius:50%; background:#fff; transition:transform 200ms ease; }
.player-size-switch input:checked + .player-switch-track { background:var(--accent); border-color:var(--accent); }
.player-size-switch input:checked + .player-switch-track::after { transform:translateX(15px); }
.player-size-switch input:focus-visible + .player-switch-track { outline:2px solid var(--text); outline-offset:3px; }
body:has(.player-hero-wrap.is-expanded) { overflow:hidden; }
.player-hero-wrap.is-expanded { display:block; position:fixed; inset:0; z-index:100; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; box-sizing:border-box; color:var(--text); animation:player-expand-in 200ms ease; }
.player-hero-wrap.is-expanded::backdrop { background:#000; }
.player-hero-wrap.is-expanded .player { height:100%; display:flex; flex-direction:column; }
.player-hero-wrap.is-expanded .player-video-container { position:relative; flex:1 1 0; min-height:0; max-height:none; }
.player-hero-wrap.is-expanded video { position:absolute; inset:0; width:100%; height:100%; max-height:none; }
@keyframes player-expand-in { from { opacity:.5; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .player-hero-wrap.is-expanded { animation:none; } .player-switch-track,.player-switch-track::after { transition:none; } }

/* ==========================================================================
   Discussion / Comments
   ========================================================================== */
.discussion {
  max-width: 920px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
  margin-top: 40px;
}

.discussion form {
  margin-bottom: 35px;
}

.comment {
  display: flex;
  align-items:flex-start;
  gap: 14px;
  padding: 0;
  margin:20px 0;
}

.avatar {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.25) 0%, rgba(99, 102, 241, 0.25) 100%);
  color: #fff;
  border: 1px solid var(--line-strong);
}

.comment-card {
  flex: 1;
  min-width: 0;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  transition:border-color 200ms ease,background-color 200ms ease;
}
.comment-card:hover { border-color:var(--line-strong); }
.comment-side { display:flex; flex:0 0 68px; flex-direction:column; align-items:center; gap:10px; margin-top:4px; }
.comment-side .avatar { width:64px; height:64px; min-width:64px; font-size:23px; }
.comment-votes { display:flex; flex-direction:column; align-items:center; gap:4px; }
.comment-votes .chip { display:flex; align-items:center; justify-content:center; gap:5px; min-width:44px; min-height:28px; padding:4px 8px; }
.comment-votes svg { display:block; width:18px; height:18px; }
.comment-votes .comment-score { text-align:center; font-variant-numeric:tabular-nums; }
.comment-actions:empty { display:none; }
@media(max-width:600px) { .comment { gap:10px; } .comment-card { padding:14px; } .comment-side { flex-basis:56px; } .comment-side .avatar { width:52px; height:52px; min-width:52px; font-size:20px; } }

.comment p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0 14px;
  color: var(--text-secondary);
}

.comment-actions {
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  gap: 12px;
}

.comment-actions .chip {
  padding: 4px 12px;
  font-size: 12px;
}

/* ==========================================================================
   Admin Dashboard & Toolbar
   ========================================================================== */
.admin-toolbar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 24px 0 32px;
}

.admin-row {
  display: flex;
  gap: 20px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 18px 0;
}

.admin-row:first-child {
  border-top: none;
}
.admin-user-row { flex-wrap:wrap; gap:12px; }
.admin-user-row > div:first-child { flex:1 1 220px; }

.admin-row > div:first-child {
  flex: 1;
  min-width: 0;
}

.admin-row small {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 4px;
  color: var(--dim);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 20px 0;
}

legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0 8px;
}

.metadata-box {
  background: rgba(10, 12, 18, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-bottom: 24px;
}

.result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-top: 8px;
  transition: var(--transition);
}

.result:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  transform: translateX(4px);
}

progress {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  accent-color: var(--accent);
  margin: 12px 0;
}

/* ==========================================================================
   Modals & Toast
   ========================================================================== */
dialog {
  background: #0d1017;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  padding: 36px;
  width: min(780px, 94vw);
  max-height: 90vh;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9);
  animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.close {
  float: right;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--muted);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  transition: var(--transition);
}

.close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(18, 21, 32, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid var(--accent);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  max-width: 90%;
  z-index: 1000;
  display: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px var(--accent-glow);
  font-weight: 500;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}

#toast.show {
  display: block;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  border-top: 1px solid var(--line);
  padding: 30px 5%;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--dim);
  background: rgba(7, 8, 12, 0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

footer span {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--muted);
}

.project-credits { display:flex; align-items:center; gap:18px; letter-spacing:0; }
.creator-logo { display:block; flex-shrink:0; opacity:.5; transition:opacity 220ms ease; }
.creator-logo:hover,.creator-logo:focus-visible { opacity:1; }
.creator-logo img,.creator-logo:hover img { display:block; width:68px; height:68px; object-fit:contain; opacity:1; }
.creator-details { display:flex; flex-direction:column; align-items:flex-start; gap:0; line-height:1.4; }
.credit-label { margin:0; font-size:13px; color:var(--muted); }
.credit-label a { font-weight:700; color:var(--text); }
.creator-links { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12px; color:var(--muted); }
.creator-links a:hover,.credit-label a:hover { color:var(--accent); }
.creator-socials { display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:var(--text-secondary); }
.creator-socials a:hover { color:var(--accent); }
.project-purpose { max-width:370px; letter-spacing:0; }
.project-purpose strong { font-size:12px; font-weight:600; color:var(--text-secondary); }
.project-purpose p { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
@media(max-width:600px) { footer { align-items:flex-start; gap:24px; } .project-purpose { max-width:none; } .creator-logo img { width:56px; height:56px; } }

.sr {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (min-width: 1400px) {
  .cards {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 1024px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
  .hero-image {
    width: 60%;
  }
}

@media (max-width: 768px) {
  header {
    height: auto;
    padding: 16px 5%;
    gap: 16px;
    flex-wrap: wrap;
  }
  .private {
    display: none;
  }
  nav {
    justify-content: flex-end;
    gap: 8px;
  }
  .brand {
    font-size: 26px;
  }
  .login {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .login-art {
    display: none;
  }
  .login .panel {
    max-width: none;
  }
  .hero {
    min-height: auto;
  }
  .hero-image {
    width: 100%;
    opacity: 0.35;
  }
  .hero-content {
    padding: 35px 6%;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .detail {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .detail-poster {
    width: 200px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  dialog {
    padding: 24px;
  }
}
.media-upload-grid { display:grid; grid-template-columns:minmax(0, 3.3fr) minmax(150px,1fr); grid-template-areas:"video poster" "video subtitle" "backdrop backdrop"; gap:14px; margin:24px 0 8px; }
.media-upload { min-width:0; display:flex; flex-direction:column; }
.media-upload-video { grid-area:video; }
.media-upload-video > progress { display:block; width:100%; margin:0 0 10px; flex-shrink:0; }
.media-upload-video > progress[hidden] { display:none; }
.category-alt[hidden] { display:none; }
.poster-preview { max-width:100%; height:110px; object-fit:contain; border-radius:6px; }
.frame-preview { max-width:100%; height:90px; object-fit:contain; border-radius:6px; }
.frame-choices { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; margin-top:14px; }
.frame-choice { padding:4px; border:2px solid var(--line); border-radius:10px; background:var(--surface-solid); color:var(--text); overflow:hidden; }
.frame-choice img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; }
.frame-choice span { display:block; padding:5px; font-size:12px; }
.frame-choice[aria-pressed="true"] { border-color:var(--accent); }
.frame-choice[aria-pressed="true"] span::before { content:"✓ "; color:var(--accent); font-weight:800; }
.frame-choice span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.backdrop-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:8px; }
.backdrop-actions #extractBackdrop { margin:0; }
#localBackdrops:disabled { opacity:.35; cursor:not-allowed; }
#framePreview { position:fixed; inset:auto; margin:0; box-sizing:border-box; padding:8px; border:1px solid var(--line-strong); background:#0d1017; color:var(--text); border-radius:12px; pointer-events:none; z-index:110; overflow:hidden; animation:none; box-shadow:0 12px 40px rgba(0,0,0,.65); }
#framePreview img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; border-radius:6px; }
#framePreview p { margin:6px 0 0; text-align:center; color:var(--text-secondary); font-size:12px; line-height:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.frame-choice:focus-visible { outline:2px solid var(--text); outline-offset:2px; }
.media-upload select[hidden] { display:none; }
.drop-zone.has-preview { overflow:hidden; isolation:isolate; }
.drop-zone .media-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; pointer-events:none; }
.drop-zone.has-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.15)); z-index:-1; pointer-events:none; }
.drop-zone.has-preview > strong,.drop-zone.has-preview > span,.drop-zone.has-preview > small { color:#fff; text-shadow:0 1px 5px #000; }
.drop-zone.has-file > span:not(.browse-file):not(.subtitle-document),.drop-zone.has-file > small { display:none; }
.drop-zone.has-preview .browse-file { background:rgba(0,0,0,.65); border-color:rgba(255,255,255,.6); }
.media-upload-poster .drop-zone.has-preview { min-height:250px; justify-content:flex-end; }
.media-upload-poster .media-preview { object-fit:contain; background:#080a10; }
.subtitle-document { font-size:34px !important; line-height:1; }
#fetchPoster { margin-top:8px; width:100%; }
#extractBackdrop { margin-top:8px; align-self:flex-start; }
.featured-navigation { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
dialog.movie-editor { width:min(1100px,94vw); padding:0; overflow:hidden; }
.movie-editor { background:var(--bg); isolation:isolate; }
.editor-backdrop-layer { position:absolute; inset:0 0 auto; height:min(420px,55vh); z-index:0; overflow:hidden; pointer-events:none; }
.backdrop-frames { position:absolute; inset:0; opacity:.5; }
.editor-backdrop-layer img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; opacity:0; transition:opacity 1400ms ease-in-out; }
.editor-backdrop-layer img.is-visible { opacity:1; }
.editor-backdrop-layer::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,8,12,.25) 0%,rgba(7,8,12,.55) 40%,var(--bg) 100%); }
.movie-editor #modalBody { position:relative; z-index:1; }
.movie-editor #modalBody { max-height:90vh; overflow-y:auto; padding:36px 36px 112px; box-sizing:border-box; }
.movie-editor > .close { position:absolute; top:14px; right:14px; z-index:3; }
.movie-editor .floating-save { position:absolute; right:24px; bottom:24px; z-index:3; width:64px; height:64px; min-width:64px; padding:0; border-radius:50%; display:grid; place-items:center; box-shadow:0 8px 28px rgba(0,0,0,.6); }
.movie-editor .floating-save:focus-visible { outline:3px solid var(--text); outline-offset:4px; }
@media(max-width:450px) { .movie-editor #modalBody { padding:28px 20px 104px; } .movie-editor .floating-save { right:20px; bottom:20px; width:58px; height:58px; min-width:58px; } }
.media-upload-poster { grid-area:poster; }
.media-upload-subtitle { grid-area:subtitle; }
.media-upload-backdrop { grid-area:backdrop; }
.drop-zone { position:relative; display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:190px; margin:0; padding:18px 10px; border:2px dashed var(--line); border-radius:14px; background:rgba(255,255,255,.025); text-align:center; cursor:pointer; }
.media-upload-video .drop-zone { min-height:320px; }
.media-upload-subtitle .drop-zone { min-height:120px; gap:6px; padding:12px 8px; }
.media-upload-subtitle .drop-zone > span:not(.browse-file),.media-upload-subtitle .drop-zone > small { display:none; }
.media-upload-backdrop .drop-zone { min-height:110px; flex-direction:row; flex-wrap:wrap; gap:12px 22px; }
.drop-zone:hover,.drop-zone.drag-over,.drop-zone:focus-within { border-color:var(--accent); background:rgba(255,255,255,.07); }
.drop-zone strong { font-size:18px; }
.drop-zone span,.drop-zone small { font-size:12px; }
.browse-file { padding:9px 12px; border:1px solid var(--line); border-radius:8px; color:var(--accent); }
.media-upload select { width:100%; min-width:0; text-overflow:ellipsis; }
.media-upload > label:not(.drop-zone) { font-size:11px; margin-top:12px; }
.file-status { overflow-wrap:anywhere; font-size:12px; color:var(--muted); }
.file-status:empty { display:none; }
.media-upload-poster #status-poster,.media-upload-subtitle #status-subtitle { display:none; }
.selected-file-name { max-width:100%; overflow-wrap:anywhere; font-size:11px; line-height:1.5; color:var(--text-secondary); }
.drop-zone.has-preview .selected-file-name { color:#fff; text-shadow:0 1px 5px #000; }
@media(max-width:450px) { .media-upload-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"video" "poster" "subtitle" "backdrop"; } .media-upload-video .drop-zone { min-height:220px; } }
.drop-zone { background:#080f17; border:1px solid var(--line); gap:14px; }
.drop-zone > .upload-icon,.drop-zone.has-file > .upload-icon,.media-upload-subtitle .drop-zone > .upload-icon { display:block; width:48px; height:48px; flex-shrink:0; color:#c4d2dd; margin-bottom:5px; }
.upload-icon svg { display:block; width:100%; height:100%; }
.drop-zone.has-preview > .upload-icon { display:none; }
.media-upload-video .drop-zone.has-file > span.upload-icon { display:block; color:#c4d2dd; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.media-upload-video .drop-zone.has-file > span.upload-icon,.media-upload-video .drop-zone.has-file > strong { display:none; }
.movie-file-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; }
.movie-file-actions > button { padding:12px 14px; font-size:12px; border-radius:9px; }
.movie-file-actions > button[hidden] { display:none; }
#deleteEditorVideoDialog { width:min(550px,90vw); }
#deleteEditorVideoDialog p { overflow-wrap:anywhere; }
.media-upload-video #status-video { display:none; }
.drop-zone .browse-file { padding:12px 14px; background:rgba(0,0,0,.12); border-radius:9px; color:var(--accent); font-weight:600; }
.drop-zone small { color:var(--muted); font-weight:600; }
.media-upload-subtitle .drop-zone { min-height:170px; gap:10px; }
.media-upload-subtitle .drop-zone > .upload-icon { width:38px; height:38px; }
.media-upload-subtitle .drop-zone.has-file strong::after { content:" ✓"; color:var(--emerald); }
.media-upload-poster .drop-zone > .upload-icon,.media-upload-backdrop .drop-zone > .upload-icon { width:32px; height:32px; }
.media-upload-subtitle .drop-zone > .upload-icon { display:block; width:36px; height:36px; }
.drop-zone label.browse-file { margin:0; font-size:12px; cursor:pointer; }
.drop-zone #fetchPoster { margin:0; width:auto; max-width:100%; padding:10px 12px; font-size:12px; }
.poster-actions { display:flex; align-items:center; justify-content:center; gap:8px; max-width:100%; }
.poster-actions button { display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; background:rgba(8,15,23,.9); }
.poster-actions .upload-icon { display:block; width:22px; height:22px; flex-shrink:0; }
#fetchPoster:not(.poster-icon-only) .upload-icon { display:none; }
#fetchPoster.poster-icon-only { width:40px; height:40px; padding:8px; }
.poster-icon-only .poster-action-text { display:none; }
.poster-actions button:disabled { opacity:.35; cursor:not-allowed; }
.local-poster-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:300px; overflow-y:auto; margin-top:10px; }
.local-poster-choices button { padding:3px; border:2px solid var(--line); border-radius:8px; background:var(--surface-solid); }
.local-poster-choices button[aria-pressed="true"] { border-color:var(--accent); }
.local-poster-choices img { width:100%; aspect-ratio:2/3; object-fit:contain; display:block; }
.media-upload-video .media-preview,.media-upload-backdrop .media-preview { opacity:.5; }
.video-file-info { display:flex; flex-direction:column; align-items:center; gap:6px; max-width:100%; padding:12px 16px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(8,15,23,.8); }
.video-file-info strong { font-size:13px; color:var(--text); }
.video-file-info span { font-size:12px; color:var(--text-secondary); overflow-wrap:anywhere; }
.video-file-info small { font-size:11px; color:var(--muted); }
.movie-inline-preview { width:100%; min-width:0; animation:sectionReveal 220ms var(--motion-ease); }
.movie-inline-preview video { display:block; width:100%; aspect-ratio:16/9; max-height:400px; background:#000; border-radius:8px; object-fit:contain; }
.movie-file-heading { width:100%; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; text-align:left; }
.movie-file-heading strong { font-size:13px; color:var(--text); white-space:nowrap; }
.movie-file-heading span { min-width:0; overflow-wrap:anywhere; font-size:12px; color:var(--text-secondary); }
.movie-file-heading small { font-size:11px; color:var(--muted); }
.movie-video-surface { position:relative; }
.movie-hover-actions { position:absolute; inset:0 0 48px; display:flex; align-items:center; justify-content:center; gap:10px; opacity:0; pointer-events:none; transition:opacity 200ms var(--motion-ease); }
.movie-hover-actions button { pointer-events:none; padding:10px 14px; background:rgba(8,15,23,.9); }
.movie-hover-actions .danger { color:#ff9292; }
.movie-video-surface:hover .movie-hover-actions,.movie-video-surface:focus-within .movie-hover-actions { opacity:1; }
.movie-video-surface:hover .movie-hover-actions button,.movie-video-surface:focus-within .movie-hover-actions button { pointer-events:auto; }
.movie-file-actions #deleteVideo { display:none; }
.media-upload-video .drop-zone.has-file > .movie-file-actions { display:none; }
@media(hover:none) { .movie-hover-actions { opacity:1; } .movie-hover-actions button { pointer-events:auto; } }
.movie-inline-preview .error { font-size:12px; text-align:left; }
.media-upload-video .drop-zone.has-file { gap:12px; padding:16px; }
.media-upload-video .drop-zone.has-file > span.upload-icon { width:32px; height:32px; margin-bottom:0; }
.frame-gallery { position:relative; width:100%; margin-top:8px; }
.frame-gallery .frame-choices { display:flex; gap:0; margin:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-snap-type:x proximity; }
.frame-gallery .frame-choices::-webkit-scrollbar { display:none; }
.frame-gallery .frame-choice { position:relative; flex:0 0 112px; margin:0; padding:0; border:0; border-radius:0; background:transparent; overflow:hidden; scroll-snap-align:start; box-shadow:none; transform:none; }
.frame-gallery .frame-choice img { width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.5; transition:opacity .18s ease; }
.frame-gallery .frame-choice:hover img,.frame-gallery .frame-choice:focus-visible img,.frame-gallery .frame-choice[aria-pressed="true"] img { opacity:1; }
.frame-gallery .frame-choice[aria-pressed="true"]::after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--accent); }
.frame-gallery .frame-choice[aria-pressed="true"]::before { content:"✓"; position:absolute; z-index:1; top:4px; right:5px; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; display:grid; place-items:center; }
.frame-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:28px; height:38px; border:0; border-radius:4px; padding:0; background:rgba(8,15,23,.9); color:#fff; font-size:28px; line-height:1; }
.frame-nav-prev { left:0; }.frame-nav-next { right:0; }
.frame-nav[hidden] { display:none; }.frame-nav:disabled { opacity:.3; }
.drop-zone .backdrop-actions { justify-content:center; margin:0; }
.backdrop-actions button { display:flex; align-items:center; gap:7px; padding:10px 12px; font-size:12px; background:rgba(8,15,23,.85); }
.backdrop-actions .upload-icon { display:block; width:21px; height:21px; }
.primary-category-row { display:flex; align-items:flex-end; gap:12px; }
.primary-category-row > label { flex:1; min-width:0; margin:0; }
.primary-category-row > button { flex-shrink:0; margin:0 0 6px; }
.category-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.category-tag { position:relative; margin:0; cursor:pointer; }
.category-tag span { display:block; padding:8px 14px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(255,255,255,.025); color:var(--muted); font-size:12px; transition:background .15s,color .15s,border-color .15s; }
.category-tag input:checked + span { background:var(--accent-soft); border-color:var(--accent); color:#ff819c; }
.category-tag:hover span { border-color:var(--accent); }
.category-tag input:focus-visible + span { outline:2px solid var(--text); outline-offset:3px; }
.category-tag:has(input:disabled) { cursor:default; }
#movieCategoryDialog { width:min(420px,90vw); }
.category-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
@media(max-width:450px) { .primary-category-row { align-items:stretch; flex-direction:column; } .primary-category-row > button { align-self:flex-start; } }
.media-upload-backdrop .drop-zone.has-preview { min-height:160px; }

/* Shared presentation classes; compatible with the site CSP. */
.initially-hidden { display:none; }
.invitation-note { display:block;margin-top:16px;text-align:center; }
.rating-badge { left:auto;right:10px;color:var(--gold);background:rgba(10,12,18,0.85); }
.text-dim { color:var(--dim); }
.text-gold { color:var(--gold); }
.hero-actions { display:flex;align-items:center;gap:18px;flex-wrap:wrap; }
.back-to-catalog { margin-bottom:18px; }
.detail-meta { margin-bottom:16px; }
.imdb-link { color:var(--gold);text-decoration:underline; }
.rating-summary { font-size:16px;color:var(--gold);font-weight:600;margin:16px 0; }
.movie-engagement { display:flex; flex-wrap:wrap; gap:10px 22px; margin:14px 0; color:var(--muted); font-size:12px; }
.movie-engagement strong { color:var(--text-secondary); font-weight:600; }
.detail-page { position:relative; isolation:isolate; }
.profile-hero { display:grid; grid-template-columns:240px minmax(0,1fr); align-items:center; gap:44px; padding:40px 0 64px; min-height:420px; }
.profile-portrait { width:240px; aspect-ratio:1; display:grid; place-items:center; border-radius:24px; border:1px solid var(--line-strong); overflow:hidden; background:linear-gradient(145deg,var(--surface-solid),rgba(225,29,72,.2)); box-shadow:var(--shadow-md); }
.profile-portrait img { width:100%; height:100%; object-fit:cover; }
.profile-portrait { position:relative; }
.profile-avatar-edit { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; padding:16px; border:0; border-radius:inherit; background:rgba(7,8,12,.65); color:#fff; opacity:0; transition:opacity 220ms ease,background-color 180ms ease; }
.profile-avatar-edit svg { width:30px; height:30px; }
.profile-portrait:hover .profile-avatar-edit,.profile-portrait:focus-within .profile-avatar-edit { opacity:1; }
.profile-avatar-edit:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; }
.profile-avatar-edit:disabled { opacity:1; cursor:wait; }
.avatar-crop-dialog { width:min(480px,94vw); padding:24px; max-height:92dvh; overflow:auto; }
.avatar-crop-dialog h2 { margin-bottom:8px; }
.avatar-crop-stage { position:relative; width:min(320px,100%); margin:20px auto; aspect-ratio:1; border-radius:14px; overflow:hidden; border:1px solid var(--line-strong); }
.avatar-crop-stage canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.avatar-crop-stage canvas:active { cursor:grabbing; }
.avatar-crop-stage canvas:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.avatar-crop-guides { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent calc(33.333% - .5px),#ffffff40 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff40 66.666%,transparent calc(66.666% + .5px)),linear-gradient(transparent calc(33.333% - .5px),#ffffff40 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff40 66.666%,transparent calc(66.666% + .5px)); }
.avatar-crop-zoom { display:flex; align-items:center; gap:14px; }
.avatar-crop-zoom input { flex:1; margin:0; padding:0; accent-color:var(--accent); }
.avatar-crop-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:24px; }
@media(hover:none) { .profile-avatar-edit { inset:auto 0 0; height:auto; padding:10px; flex-direction:row; opacity:1; border-radius:0; } .profile-avatar-edit svg { width:20px; height:20px; } }
.profile-portrait > span { font-size:80px; color:var(--text-secondary); }
.profile-info h1 { margin-bottom:16px; overflow-wrap:anywhere; }
.profile-name-row { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:16px; }
.profile-theme-controls { display:flex; align-items:center; gap:10px; }
.profile-theme-volume { display:flex; align-items:center; gap:7px; margin:0; color:var(--muted); }
.profile-theme-volume svg { width:18px; height:18px; }
.profile-theme-volume input { width:90px; margin:0; padding:0; accent-color:var(--accent); cursor:pointer; }
.profile-theme-volume output { width:32px; font-size:11px; font-variant-numeric:tabular-nums; }
.profile-theme-volume input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
.profile-name-row h1 { min-width:0; margin:0; }
.profile-theme-toggle { flex:0 0 40px; display:grid; place-items:center; width:40px; height:40px; padding:9px; border:1px solid var(--line-strong); border-radius:50%; background:var(--surface); color:var(--text); }
.profile-theme-toggle svg { display:block; width:20px; height:20px; }
.profile-theme-toggle:hover,.profile-theme-toggle[aria-pressed="true"] { border-color:var(--accent); color:var(--accent-hover); background:var(--accent-soft); }
.profile-theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.profile-music-field { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:22px 0; padding:18px; border:1px solid var(--line); border-radius:var(--radius-md); }
.profile-music-field p { margin:0; overflow-wrap:anywhere; max-width:100%; }
.profile-music-field input[type=file] { max-width:100%; margin:0; }
.profile-bio { max-width:720px; white-space:pre-line; overflow-wrap:anywhere; color:var(--text-secondary); font-size:16px; line-height:1.8; }
.profile-socials { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.profile-socials a { display:grid; place-items:center; width:42px; height:42px; padding:10px; border:1px solid var(--line-strong); border-radius:var(--radius-full); background:var(--surface); }
.profile-socials svg { display:block; width:20px; height:20px; }
.profile-socials a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.profile-socials a:hover { border-color:var(--accent); color:var(--accent-hover); transform:translateY(-2px); }
.profile-account { max-width:720px; }
.profile-account p { overflow-wrap:anywhere; }
.profile-image-fields,.profile-network-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:20px 0; }
.profile-image-field { display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); text-align:center; }
.profile-image-preview { width:100%; height:130px; object-fit:cover; border-radius:10px; }
.profile-image-preview.avatar { width:100px; height:100px; border-radius:50%; }
.profile-image-preview[hidden] { display:none; }
.profile-image-field .browse-file { margin:0; }
.profile-image-field small { font-size:11px; }
.comment .avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.profile-author { font-weight:600; text-align:left; }
@media(max-width:650px) { .profile-hero { grid-template-columns:1fr; gap:24px; padding:24px 0 40px; } .profile-portrait { width:160px; } .profile-image-fields,.profile-network-fields { grid-template-columns:1fr; } }
.detail-cinematic-bg { position:absolute; top:-40px; left:50%; right:auto; width:100vw; transform:translateX(-50%); height:min(760px,95vh); overflow:hidden; z-index:-1; pointer-events:none; }
body:has(main.detail-page) { overflow-x:clip; }
.detail-cinematic-bg .backdrop-frames { opacity:.55; }
.detail-cinematic-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; opacity:0; transition:opacity 1400ms ease-in-out; }
.detail-cinematic-bg img.is-visible { opacity:1; }
.detail-cinematic-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,8,12,.3),rgba(7,8,12,.65) 45%,var(--bg) 100%),linear-gradient(90deg,rgba(7,8,12,.45),transparent 55%); }
.detail-poster { position:relative; }
.poster-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; width:68px; height:68px; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:#fff; background:rgba(225,29,72,.88); display:grid; place-items:center; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.poster-play:hover { transform:translate(-50%,-50%) scale(1.07); background:var(--accent-hover); }
.poster-play:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.detail-score-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 36px; }
.detail-page > .detail { margin-bottom:24px; }
.detail-score-card { padding:18px; border:1px solid var(--line-strong); border-radius:12px; background:rgba(8,15,23,.8); display:flex; flex-direction:column; gap:10px; min-width:0; }
.detail-score-card > span { color:var(--muted); font-size:12px; }
.detail-score-card strong { color:var(--text); font-size:24px; }
.detail-score-card small { color:var(--muted); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.personal-stars { display:flex; flex-wrap:wrap; }.personal-stars .star { font-size:24px; padding:0 2px; }
.half-star-rating { display:inline-flex; flex-wrap:nowrap; gap:3px; align-self:flex-start; }
.rating-star { position:relative; display:block; width:30px; height:36px; font-size:32px; line-height:36px; }
.star-base { color:#334155; }.star-fill { position:absolute; left:0; top:0; width:0; overflow:hidden; color:var(--gold); pointer-events:none; transition:width 180ms var(--motion-ease); }
.rating-star.is-half .star-fill { width:50%; }.rating-star.is-full .star-fill { width:100%; }
.rating-star .star-hit { position:absolute; top:0; bottom:0; width:50%; padding:0; border:0; border-radius:3px; background:transparent; color:transparent; box-shadow:none; transform:none; }
.star-left { left:0; }.star-right { right:0; }
.rating-star .star-hit:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:650px) { .detail-score-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .personal-score { grid-column:1/-1; } }
@media(max-width:450px) { .detail-score-card { padding:12px; } }
.rating-count { font-size:13px;font-weight:400; }
.detail-actions { display:flex;gap:12px;flex-wrap:wrap;margin:22px 0; }
.space-top { margin-top:12px; }
.comment-score { font-weight:600;font-size:13px; }
.status-negative { color:#f87171; }
.no-margin { margin:0; }
.flex-fill { flex:1; }
.form-submit-spacing { margin-top:14px; }
.metadata-poster-wrap { margin:10px 0; }
.metadata-poster { height:120px;border-radius:6px;box-shadow:var(--shadow-sm); }
.metadata-apply { margin-top:10px; }
.status-positive { color:var(--emerald); }
.status-pending { color:var(--gold); }
.publication-status { font-weight:600; }
.card-progress { position:absolute; bottom:0; left:0; width:100%; height:4px; margin:0; border:0; border-radius:0; appearance:none; background:rgba(255,255,255,.15); }
.card-progress::-webkit-progress-bar { background:rgba(255,255,255,.15); }
.card-progress::-webkit-progress-value { background:var(--accent); box-shadow:0 0 8px var(--accent); }
.card-progress::-moz-progress-bar { background:var(--accent); }
.publication-control { display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; margin-top:22px; }
.editor-statistics { display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; color:var(--muted); font-size:12px; }
.editor-statistics strong { color:var(--text); font-weight:600; }
.publication-control input[hidden] { display:none; }
.publish-toggle { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:1px solid var(--accent); border-radius:12px; background:var(--accent); color:#fff; font-size:13px; font-weight:600; }
.publish-toggle:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.publish-toggle[aria-pressed="true"] { background:var(--surface-solid); border-color:var(--line-strong); color:var(--muted); }
.publish-toggle[aria-pressed="true"]:hover { color:var(--text); border-color:var(--accent); }
.publish-toggle:focus-visible { outline:2px solid var(--text); outline-offset:3px; }

/* Persistent soundtrack dock. */
#musicDock { position:fixed; z-index:90; left:0; top:50%; transform:translateY(-50%); width:84px; padding:12px 8px 8px; border:1px solid var(--line-strong); border-left:0; border-radius:0 20px 20px 0; background:rgba(10,12,18,.95); box-shadow:0 8px 28px #0007; display:flex; align-items:center; flex-direction:column; gap:8px; }
#musicDock[hidden] { display:none; }
#musicDock { transition:opacity 220ms ease,visibility 220ms ease; }
#musicDock.is-video-active { opacity:0; visibility:hidden; pointer-events:none; }
#musicDock.is-video-active .music-info { opacity:0; visibility:hidden; pointer-events:none; }
.music-disc-wrap { width:64px; height:64px; border-radius:50%; box-shadow:0 3px 15px #000; }
.music-disc { position:relative; width:100%; height:100%; overflow:hidden; border-radius:50%; border:1px solid #ffffff28; background:repeating-radial-gradient(circle,#171923 0 2px,#090a10 3px 4px); animation:soundtrackSpin 12s linear infinite; animation-play-state:paused; }
.music-disc img { position:absolute; inset:17%; width:66%; height:66%; object-fit:cover; border-radius:50%; }
.music-disc img[hidden] { display:none; }
.music-disc-hole { position:absolute; top:50%; left:50%; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-50%); background:var(--text); box-shadow:0 0 0 3px #090a10; }
#musicDock.is-playing .music-disc { animation-play-state:running; }
.music-transport { display:flex; align-items:center; justify-content:center; gap:0; }
#musicDock button { display:grid; place-items:center; padding:0; width:22px; height:30px; min-width:0; border:0; border-radius:50%; background:transparent; color:var(--text-secondary); font-size:22px; }
#musicDock button:hover { color:var(--accent-hover); background:var(--accent-soft); }
#musicDock button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#musicDock #ambientToggle { width:30px; height:30px; background:var(--accent-soft); color:var(--accent); }
#musicDock button svg { display:block; width:18px; height:18px; }
#musicDock .music-power { width:28px; height:24px; font-size:16px; color:var(--muted); }
.music-info { position:absolute; top:50%; left:calc(100% + 10px); transform:translate(-5px,-50%); width:min(290px,calc(100vw - 105px)); display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--line-strong); border-radius:14px; background:#0e111a; color:var(--text-secondary); box-shadow:var(--shadow-md); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 220ms ease,transform 220ms var(--motion-ease),visibility 220ms; }
.music-info::before { content:''; position:absolute; inset:0 auto 0 -12px; width:12px; }
.music-info { isolation:isolate; }
.music-info > .music-info-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; border-radius:inherit; z-index:-2; }
.music-info::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg,rgba(14,17,26,.5),rgba(14,17,26,.92) 55%,#0e111a); z-index:-1; pointer-events:none; }
.music-info a { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.music-info a:hover,.music-info a:focus-visible { color:var(--accent-hover); }
.movie-music-section { margin:28px 0; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); }
.movie-music-section h2 { font-size:20px; }
.movie-music-list { padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:12px; }
.movie-music-list li { display:flex; flex-direction:column; gap:5px; padding:12px 16px; border:1px solid var(--line); border-radius:10px; }
#musicDock:hover .music-info,#musicDock:focus-within .music-info { opacity:1; visibility:visible; pointer-events:auto; transform:translate(0,-50%); }
.music-info .eyebrow { font-size:9px; letter-spacing:1px; margin:0 0 5px; }
.music-info strong { color:var(--text); font-size:15px; overflow-wrap:anywhere; }
.music-info > span { font-size:12px; overflow-wrap:anywhere; }
.music-info p { margin:6px 0; font-size:11px; line-height:1.6; color:var(--muted); }
.music-info p:empty { display:none; }
.music-info label { display:flex; align-items:center; gap:10px; margin:8px 0 0; font-size:11px; }
.music-info input { min-width:0; width:100%; padding:0; margin:0; accent-color:var(--accent); }
#musicDock.is-disabled { width:38px; padding:8px 4px; }
#musicDock.is-disabled .music-disc-wrap,#musicDock.is-disabled .music-transport { display:none; }
.music-admin-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.music-admin-heading h2 { margin:0; }
.music-admin-row > img { width:42px; height:42px; object-fit:cover; border-radius:50%; }
.music-cover-preview { display:block; width:120px; height:120px; object-fit:cover; border-radius:50%; margin:14px 0; }
.music-cover-preview[hidden] { display:none; }
.music-upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:22px 0; }
.music-upload-zone { min-width:0; min-height:280px; height:100%; overflow:hidden; isolation:isolate; }
.music-upload-zone > :not(img):not(input) { position:relative; z-index:1; }
.music-upload-icon svg { display:block; width:34px; height:34px; color:var(--muted); }
.music-upload-zone small { max-width:100%; overflow-wrap:anywhere; }
.music-upload-zone [data-upload-status]:empty { display:none; }
.music-upload-zone [data-upload-status] { color:var(--accent-hover); }
.music-upload-zone[aria-busy="true"] { border-color:var(--accent); cursor:wait; }
.music-upload-zone .music-cover-preview { position:absolute; inset:0; width:100%; height:100%; margin:0; border-radius:12px; opacity:.5; pointer-events:none; }
#applyMusicTags[hidden] { display:none; }
@media(max-width:480px) { .music-upload-grid { grid-template-columns:1fr; } .music-upload-zone { min-height:210px; } }
@keyframes soundtrackSpin { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@media(min-width:769px) { body:has(#musicDock:not([hidden]):not(.is-disabled)) main { padding-left:max(5%,100px); } }
@media(max-width:768px) { #musicDock { top:auto; bottom:18px; transform:none; width:68px; padding:10px 4px 6px; } .music-disc-wrap { width:50px; height:50px; } .music-info { top:auto; bottom:0; transform:translateX(-5px); } #musicDock:hover .music-info,#musicDock:focus-within .music-info { transform:translateX(0); } #musicDock button { width:20px; } }

/* Community, personal collections and reputation. */
.community-toolbar,.community-tabs,.friendship-actions,.profile-social-actions,.social-pagination,.profile-section-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.community-toolbar { justify-content:space-between; margin:24px 0; }
#memberSearch { display:flex; align-items:center; gap:8px; }
#memberSearch input { margin:0; min-width:0; }
.member-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.member-card { display:flex; flex-direction:column; gap:20px; padding:24px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.member-profile-link { display:flex; flex:1; flex-direction:column; align-items:center; gap:12px; width:100%; padding:0; border:0; background:transparent; color:var(--text); text-align:center; }
.member-profile-link:hover { color:var(--accent-hover); }
.member-profile-link strong { font-size:19px; overflow-wrap:anywhere; }
.member-profile-link > span.muted { font-size:12px; overflow-wrap:anywhere; }
.member-avatar { display:grid; place-items:center; width:88px; height:88px; flex-shrink:0; border:1px solid var(--line-strong); border-radius:50%; overflow:hidden; background:var(--surface-solid); font-size:32px; color:var(--muted); }
.member-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.member-card .friendship-actions { justify-content:center; gap:8px; }
.friendship-actions button { font-size:12px; padding:10px 14px; }
.friendship-actions .muted,.friend-status { font-size:12px; }
.friend-status { color:var(--accent-hover); }
.social-pagination { justify-content:center; margin:36px 0; }
.profile-community-stats { display:grid; grid-template-columns:110px minmax(260px,320px) minmax(240px,300px); gap:12px; margin:0 0 12px; }
.profile-community-stats > div { display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.profile-community-stats strong { color:var(--text); font-size:20px; }
.profile-community-stats span { color:var(--muted); font-size:12px; text-align:center; }
.reputation-help { margin-bottom:40px; font-size:11px; }
.profile-reputation-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); min-width:0; }
.reputation-data { flex:1; min-width:0; }
.reputation-values { display:flex; flex-direction:column; gap:6px; }
.reputation-values > div { display:flex; align-items:center; gap:12px; text-align:left; }
.reputation-values > div > span { order:-1; text-align:left; min-width:84px; font-size:11px; }
.profile-reputation-card .reputation-positive { color:var(--emerald); }
.profile-reputation-card .reputation-negative { color:var(--accent-hover); }
.profile-reputation-card .reputation-balance { color:var(--gold); }
.profile-reputation-card .reputation-ratio { margin:0; text-align:center; color:var(--muted); font-size:12px; }
.profile-reputation-card .reputation-ratio strong { margin-left:6px; font-size:16px; }
.reputation-heart { flex:0 0 86px; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--accent-hover); }
.reputation-heart svg { width:42px; height:42px; transition:transform 220ms ease; }
.reputation-heart:hover svg { transform:scale(1.06); }
.reputation-heart-low { color:var(--accent); }
.reputation-heart-unrated { color:var(--dim); }
.reputation-heart-high .reputation-sparkle { color:var(--gold); fill:currentColor; stroke:none; }
.profile-reputation-card .reputation-heart span { font-size:9px; }
.profile-community-stats > .profile-friends-card { position:relative; overflow:hidden; justify-content:center; padding:14px 12px; gap:4px; }
.friends-card-icon { position:absolute; width:66px; height:66px; right:-10px; bottom:-8px; color:var(--muted); opacity:.13; pointer-events:none; }
.profile-friends-card > strong,.profile-friends-card > span { position:relative; }
.profile-participation-card { padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); min-width:0; }
.profile-participation-card h3 { margin:0 0 8px; font-size:12px; }
.profile-participation-card > div { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:3px 0; }
.profile-participation-card > div span { font-size:11px; }
.profile-participation-card > div strong { font-size:16px; }
@media(max-width:850px) { .profile-community-stats { grid-template-columns:110px minmax(0,1fr); } .profile-friends-card { order:1; } .profile-participation-card { order:2; } .profile-reputation-card { order:3; grid-column:1/-1; } }
.profile-movie-section { margin:36px 0 48px; }
.profile-section-heading { justify-content:space-between; margin-bottom:22px; }
.profile-section-heading h2 { margin:0; }
.profile-section-heading h2 small { font-size:14px; font-weight:400; }
.social-movie-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
.social-movie-grid > .empty { grid-column:1/-1; }
#collectMovie[aria-pressed="true"] { border-color:var(--accent); color:var(--accent-hover); background:var(--accent-soft); }
.comment-up,.comment-down { font-size:16px; font-weight:600; }
.comment-votes .comment-up { color:var(--emerald); border-color:rgba(16,185,129,.3); }
.comment-votes .comment-down { color:var(--danger); border-color:rgba(239,68,68,.3); }
.comment-votes .comment-up:hover,.comment-votes .comment-up.selected { color:var(--emerald); border-color:var(--emerald); background:rgba(16,185,129,.16); }
.comment-votes .comment-down:hover,.comment-votes .comment-down.selected { color:var(--danger); border-color:var(--danger); background:var(--danger-bg); }
.comment-votes .comment-up.selected { box-shadow:0 0 0 1px var(--emerald); }
.comment-votes .comment-down.selected { box-shadow:0 0 0 1px var(--danger); }
.comment-up .vote-count,.comment-down .vote-count { font-size:12px; }
.comment-actions .comment-score { min-width:24px; text-align:center; font-variant-numeric:tabular-nums; }
@media(max-width:1024px) { .member-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .social-movie-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .member-grid { grid-template-columns:1fr; } .profile-community-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .profile-community-stats > div:last-child { grid-column:1/-1; } .social-movie-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #memberSearch { width:100%; } }

/* Film reviews, forum topics and trivia alongside comments. */
.movie-conversation-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,340px); align-items:start; gap:36px; margin-top:40px; }
.movie-conversation-layout > .discussion { min-width:0; max-width:none; margin:0; padding-top:28px; }
.film-community-sidebar { min-width:0; display:grid; gap:20px; border-top:1px solid var(--line); padding-top:28px; }
.film-sidebar-card { padding:20px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.film-sidebar-card h3 { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; font-size:17px; }
.film-sidebar-card h3 small { font-size:12px; font-weight:400; }
.film-recent-list { display:grid; gap:16px; }
.film-recent-list > article + article { border-top:1px solid var(--line); padding-top:14px; }
.film-entry-link { display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; padding:0; border:0; border-radius:4px; background:transparent; color:var(--text); text-align:left; }
.film-entry-link:hover { color:var(--accent-hover); }
.film-entry-link strong { font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.film-entry-link > span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--muted); font-size:12px; font-weight:400; line-height:1.6; overflow-wrap:anywhere; }
.film-entry-link > small { color:var(--muted); font-size:11px; }
.film-author { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0; }
.film-author button { display:inline-flex; align-items:center; gap:8px; font-size:12px; }
.film-author-avatar { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; overflow:hidden; background:var(--surface); border:1px solid var(--line); color:var(--dim); font-size:12px; }
.film-author-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.film-author small { color:var(--dim); font-size:10px; }
.film-sidebar-actions,.film-entry-actions,.film-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.film-sidebar-actions { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.film-sidebar-actions button { font-size:11px; text-align:left; }
.film-empty { font-size:12px; margin:0; }
dialog.film-community-modal { width:min(860px,94vw); }
.film-modal-content { padding-top:10px; }
.film-modal-content h2 { overflow-wrap:anywhere; }
.film-section-heading { margin-bottom:24px; }
.film-section-heading h2 { margin:0; }
.film-entry-list { display:grid; gap:16px; }
.film-list-card,.film-reply-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.film-list-card .film-entry-link strong { font-size:17px; }
.film-entry-body { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text-secondary); line-height:1.8; margin:24px 0; }
.film-source { color:var(--accent-hover); font-size:13px; }
.film-entry-actions { justify-content:flex-start; margin:18px 0 24px; }
.film-entry-actions:empty { display:none; }
.film-replies { display:grid; gap:18px; margin:20px 0 28px; }
.film-reply { display:flex; align-items:flex-start; gap:14px; }
.film-reply > .avatar { flex-shrink:0; }
.film-reply > .avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.film-reply-card { flex:1; }
.film-reply-card p { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text-secondary); }
.film-reply-card .film-entry-actions { margin:12px 0 0; font-size:12px; }
.film-entry-link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media(max-width:1050px) { .movie-conversation-layout { grid-template-columns:1fr; } .film-community-sidebar { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .film-community-sidebar { grid-template-columns:1fr; } .film-sidebar-card { padding:18px; } .film-reply { gap:10px; } }

.profile-activity-sections { display:grid; gap:32px; margin:36px 0; }
.profile-activity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.profile-activity-card { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; padding:20px; text-align:left; background:var(--panel,#101820); border:1px solid #ffffff18; border-radius:14px; color:inherit; }
.profile-activity-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.profile-activity-content { display:flex; flex-direction:column; gap:10px; min-width:0; flex:1; width:100%; }
.profile-comment-card { flex-direction:row; gap:14px; }
.profile-comment-poster { display:flex; align-items:center; justify-content:center; flex:0 0 72px; width:72px; height:108px; overflow:hidden; border-radius:6px; background:#ffffff08; }
.profile-comment-poster img { width:100%; height:100%; object-fit:cover; }
.profile-activity-card:focus-visible,.comment:focus { outline:2px solid var(--accent); outline-offset:4px; }
.profile-activity-movie,.profile-activity-open { color:var(--accent); font-size:.85rem; }
.profile-activity-excerpt { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line; overflow-wrap:anywhere; line-height:1.6; }
.profile-activity-card strong { overflow-wrap:anywhere; }
.profile-activity-card time { margin-top:auto; color:#a3afbc; font-size:.8rem; }
@media(max-width:900px) { .profile-activity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .profile-activity-grid { grid-template-columns:1fr; } }

.request-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0; }
.request-tabs { margin:28px 0 24px; }
.admin-request-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.admin-request-row > div:first-child { flex:1; min-width:220px; }
.admin-request-actions { display:flex; flex-wrap:wrap; gap:10px; }
.request-share-button { display:block; margin:16px 0; }
.request-rejected { align-self:start; gap:14px; padding:16px; }
.request-rejected .request-poster { width:72px; flex-basis:72px; filter:grayscale(1); }
.request-rejected .request-details h3 { margin:8px 0; }
.request-rejected .request-details p { margin:8px 0; font-size:12px; }
.request-rejection-reason { white-space:pre-line; overflow-wrap:anywhere; color:var(--muted); }
.request-upload-zone { display:flex; flex-direction:column; align-items:center; gap:18px; padding:40px 20px; border:1px dashed var(--line); border-radius:16px; transition:border-color 180ms ease,background-color 180ms ease; }
.request-upload-zone.drag-over { border-color:var(--accent); background:var(--accent-soft); }
.request-upload-zone > span { font-size:36px; }
#requestShareProgress { width:100%; margin-top:20px; accent-color:var(--accent); }
.movie-request-card { display:flex; align-items:flex-start; gap:20px; padding:20px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); min-width:0; }
.request-poster { width:100px; aspect-ratio:2/3; object-fit:cover; border-radius:8px; flex:0 0 100px; }
.request-no-poster { display:grid; place-items:center; background:#ffffff08; font-size:30px; }
.request-details { min-width:0; overflow-wrap:anywhere; }
.request-details h3 { margin:12px 0 8px; }
.request-status { display:inline-block; padding:4px 9px; border:1px solid var(--accent); border-radius:999px; color:var(--accent); font-size:11px; }
.request-synopsis { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.request-note { white-space:pre-line; }
.request-title-row { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:16px; }
#movieRequestForm > button[type="submit"] { margin-top:20px; }
.request-results { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.request-preview { display:flex; align-items:flex-start; gap:16px; margin:20px 0; padding:16px; border:1px solid var(--line); border-radius:10px; }
.request-preview img { flex:0 0 80px; border-radius:6px; }
.request-preview div { min-width:0; }
@media(max-width:1000px) { .request-grid { grid-template-columns:1fr; } }
@media(max-width:600px) { .movie-request-card { gap:12px; padding:14px; } .request-poster { width:72px; flex-basis:72px; } .request-title-row { grid-template-columns:minmax(0,1fr) 90px; } }

/* Consistent motion across navigation, editors and media controls. */
:root { --motion-ease:cubic-bezier(.2,.7,.2,1); --motion-fast:180ms; --motion-normal:260ms; }
button,a,.browse-file,.drop-zone,.category-tag span { transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease,opacity var(--motion-fast) ease,transform var(--motion-normal) var(--motion-ease); }
.drop-zone .media-preview { animation:mediaReveal var(--motion-normal) var(--motion-ease); }
.drop-zone .upload-icon { transition:color var(--motion-fast) ease,transform var(--motion-normal) var(--motion-ease); }
.drop-zone:hover > .upload-icon { transform:translateY(-2px); }
.frame-gallery .frame-choice img { transition:opacity 220ms ease,filter 220ms ease; }
.local-poster-choices img { transition:opacity var(--motion-fast) ease; }
.local-poster-choices button:hover img { opacity:.85; }
.frame-gallery,.local-poster-choices { animation:sectionReveal 220ms var(--motion-ease); }
dialog { animation:dialogReveal 280ms var(--motion-ease); }
dialog::backdrop { animation:backdropReveal 220ms ease; }
#framePreview:popover-open { animation:previewReveal 180ms var(--motion-ease); }
@keyframes dialogReveal { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes backdropReveal { from { opacity:0; } to { opacity:1; } }
@keyframes sectionReveal { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes mediaReveal { from { filter:blur(2px); } to { filter:blur(0); } }
@keyframes previewReveal { from { opacity:0; transform:translateY(4px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* Internal alerts */
#notificationBell{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px}
.notification-count{position:absolute;top:0;right:-3px;min-width:18px;border-radius:20px;padding:1px 4px;background:#e71143;color:white;font-size:10px;line-height:16px}
.notification-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-right:24px}
.notification-heading h2{margin-bottom:0}.notification-heading small{font-size:12px;display:block;margin-top:6px}
.notification-list{display:grid;gap:7px;margin:20px 0}.notification-row{display:flex;align-items:center;border:1px solid #ffffff12;border-radius:12px;transition:background-color 200ms,border-color 200ms}
.notification-row.unread{background:#e7114310;border-color:#e7114355}.notification-row:hover{background:#ffffff08;border-color:#e7114380}
.notification-open{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;border:0;padding:16px;color:inherit;line-height:1.6}
.notification-kind{color:#e71143;font-size:24px;min-width:26px;text-align:center}.notification-open time{display:block;font-size:11px;color:#9aa9ba;margin-top:5px}
.notification-read{margin-right:12px;flex-shrink:0}.notification-target{outline:2px solid #e71143;outline-offset:4px}
@media(max-width:480px){.header-account .private{font-size:9px;letter-spacing:.5px;padding:6px 7px}.header-account #accountNav .link{padding:8px}#notificationBell{min-width:36px;min-height:38px}.notification-open{padding:12px;gap:9px}.notification-heading{padding-right:20px}}
@media(prefers-reduced-motion:reduce){.notification-row{transition:none}}
/* Entradas: invitaciones privadas y mapa de la comunidad */
.ticket-symbol{color:var(--accent);width:48px;flex-shrink:0}.ticket-symbol svg{width:100%;height:auto}.ticket-card-heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ticket-card-heading h2{margin:0}.ticket-card-heading p{margin:5px 0}.ticket-balance{margin-left:auto;display:grid;text-align:right}.ticket-balance strong{font-size:26px;color:var(--accent)}.ticket-balance span{font-size:12px;color:var(--muted)}
.ticket-profile-card{border-left:3px solid var(--accent)}.ticket-profile-card .primary svg{width:26px;height:22px}.ticket-history{margin-top:18px}.ticket-history-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line-strong)}.ticket-history-row small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.ticket-history-row .link{padding:0;text-align:left}.ticket-history-row strong{overflow-wrap:anywhere}.ticket-status{display:inline-block;font-size:10px;letter-spacing:.4px;border:1px solid var(--line-strong);border-radius:20px;padding:2px 8px;margin-left:8px}.ticket-used{color:#4ade80}.ticket-pending{color:#fbbf24}.ticket-revoked,.ticket-expired{color:var(--muted)}
.ticket-admin-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.ticket-policy-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.entrance-registration{max-width:560px;margin:40px auto}.entrance-registration #ticketLogin{margin-top:18px}#ticketShareLink{font-size:12px}.map-legend{display:flex;flex-wrap:wrap;gap:24px;font-size:12px;color:var(--muted)}.map-legend span:first-child{color:var(--accent)}
.invitation-map-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;margin-top:18px}.invitation-map-scroll{overflow:auto;max-height:650px;min-height:300px;background:#090d15;border:1px solid var(--line-strong);border-radius:16px}.invitation-map-scroll svg{display:block}.map-invite{fill:none;stroke:var(--accent);stroke-width:2;color:var(--accent)}.map-friend{fill:none;stroke:#94a3b8;stroke-width:1.5;stroke-dasharray:6 6;opacity:.6}.map-node{cursor:pointer;outline:none}.map-node rect{fill:#141923;stroke:#394150;transition:fill 200ms,stroke 200ms}.map-node:hover rect,.map-node:focus-visible rect{fill:#26151e;stroke:var(--accent)}.map-node circle{fill:#e11d4830}.map-node text{fill:var(--text);font-size:12px;pointer-events:none}.map-node .map-node-caption{fill:var(--muted);font-size:10px}.map-node .map-initial{fill:var(--accent);font-size:18px;font-weight:bold}.map-node-inactive rect{stroke:#ef4444;stroke-dasharray:4 3}.map-zoom{display:flex;align-items:center;gap:14px;width:240px}.map-zoom input{min-width:0}#mapSearch{display:flex;align-items:end;gap:12px;max-width:550px}#mapSearch label{flex:1;margin:0}#mapSelection{align-self:start}#mapSelection .secondary{margin-bottom:12px}
@media(max-width:800px){.invitation-map-layout{grid-template-columns:1fr}.ticket-policy-fields{grid-template-columns:1fr}.ticket-history-row{align-items:flex-start}.ticket-card-heading{gap:10px}#mapSearch{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.map-node rect{transition:none}}
.map-node-selected rect{stroke:var(--accent);fill:#26151e;stroke-width:2}
.ticket-delivered-card{position:relative;isolation:isolate;overflow:hidden;flex:1;min-width:220px;padding:20px 24px;border:1px solid #fb718580;border-radius:16px;background:linear-gradient(120deg,#be123c,#e11d48 65%,#9f1239);color:#fff;box-shadow:0 8px 24px #e11d481a;transition:border-color 200ms,box-shadow 200ms}
.ticket-delivered-card:hover{border-color:#fda4af;box-shadow:0 10px 28px #e11d4830}.ticket-delivered-card h2{position:relative;font-size:14px;color:#fff;margin:0}.ticket-delivered-total{position:relative;display:block;font-size:44px;line-height:1.2;margin:6px 0;font-variant-numeric:tabular-nums;letter-spacing:-1px}.ticket-delivered-card>span{position:relative;display:block;font-size:12px;color:#ffe4e6}.ticket-delivered-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%) rotate(-16deg);width:126px;opacity:.13;z-index:-1;pointer-events:none}.ticket-delivered-icon svg{display:block;width:100%;height:auto}
@media(max-width:480px){.ticket-delivered-card{min-width:0;flex-basis:100%;padding:18px 20px}}
@media(prefers-reduced-motion:reduce){.ticket-delivered-card{transition:none}}
.profile-community-stats{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(144px,1fr);align-items:stretch}
.profile-community-stats > .profile-friends-card,.profile-community-stats > .profile-reputation-card,.profile-community-stats > .profile-participation-card,.profile-community-stats > .profile-ticket-stat{min-width:0;height:100%;grid-column:auto;order:0}
.profile-community-stats .profile-ticket-stat{padding:14px 16px;border-radius:var(--radius-md)}.profile-community-stats .profile-ticket-stat h2{font-size:12px}.profile-community-stats .profile-ticket-stat .ticket-delivered-total{font-size:34px;color:#fff;margin:6px 0}.profile-community-stats .profile-ticket-stat>span{color:#ffe4e6;font-size:11px;text-align:left}.profile-ticket-stat .ticket-delivered-icon{width:90px;right:8px}
@media(max-width:1100px){.profile-community-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.profile-community-stats{grid-template-columns:minmax(0,1fr)}}
#profileTickets{container-type:inline-size}.ticket-history-layout{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(0,2fr);gap:28px}.ticket-history-details{min-width:0;padding-right:24px;border-right:1px solid var(--line-strong)}.ticket-history-details h2{margin-top:0}.ticket-history-details p{font-size:12px;line-height:1.7}.ticket-history-details .ticket-admin-actions{flex-direction:column;align-items:flex-start}.ticket-history-register{min-width:0}.ticket-history-columns,.ticket-history-register .ticket-history-row{display:grid;grid-template-columns:minmax(0,1fr) 125px;gap:20px;align-items:start}.ticket-history-columns{align-items:center;min-height:54px;padding-bottom:12px;border-bottom:1px solid var(--line-strong)}.ticket-history-columns h3{font-size:13px;margin:0}.ticket-history-register .ticket-history{margin-top:0}.ticket-history-management-heading,.ticket-history-management{padding-left:18px;border-left:1px solid var(--line-strong);min-width:0}.ticket-history-management-heading .ticket-balance{text-align:left;margin:0}.ticket-history-management-heading>span{color:var(--muted);font-size:12px}.ticket-history-recipient{min-width:0;overflow-wrap:anywhere}.ticket-history-recipient .ticket-status{margin:6px 0}.ticket-history-management{display:flex;flex-direction:column;align-items:flex-start;gap:10px;align-self:stretch}.ticket-history-number{font-variant-numeric:tabular-nums;color:var(--text);font-size:16px}.ticket-history-register .social-pagination{margin:20px 0 0}.ticket-history-row{transition:background-color 200ms}.ticket-history-row:hover{background:#ffffff03}
@container(max-width:740px){.ticket-history-layout{grid-template-columns:minmax(0,1fr);gap:20px}.ticket-history-details{padding-right:0;padding-bottom:20px;border-right:0;border-bottom:1px solid var(--line-strong)}}
@media(max-width:600px){.ticket-history-layout{grid-template-columns:minmax(0,1fr);gap:20px}.ticket-history-details{padding-right:0;padding-bottom:20px;border-right:0;border-bottom:1px solid var(--line-strong)}.ticket-history-columns,.ticket-history-register .ticket-history-row{grid-template-columns:minmax(0,1fr) 85px;gap:12px}.ticket-history-management-heading,.ticket-history-management{padding-left:12px}}
@media(prefers-reduced-motion:reduce){.ticket-history-row{transition:none}}
.ticket-history-layout .ticket-history-details,.ticket-history-layout .ticket-history-columns,.ticket-history-layout .ticket-history-management-heading,.ticket-history-layout .ticket-history-management,.ticket-history-layout .ticket-history-row{border:0}
.ticket-history-layout .ticket-history-details{padding-right:0}.ticket-history-layout .ticket-history-management-heading,.ticket-history-layout .ticket-history-management{padding-left:0}
.ticket-history-layout .ticket-history-footer{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px;margin-top:0}.ticket-history-footer>button{flex:0 0 auto;width:auto;max-width:100%;min-width:0;justify-content:center}
.ticket-history-view-all{margin-top:12px;padding-left:0;text-align:left}
.hero.featured-carousel{display:block}.hero.featured-carousel::after{display:none}.featured-slides{display:grid}.featured-slide{grid-area:1/1;position:relative;isolation:isolate;display:flex;align-items:center;min-height:460px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 240ms ease,visibility 240ms ease}.featured-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}.featured-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090a0f 20%,rgba(9,10,15,.9) 45%,rgba(9,10,15,.4) 75%,rgba(9,10,15,.12)),linear-gradient(0deg,#090a0f 2%,transparent 60%);z-index:-1;pointer-events:none}.featured-image-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;z-index:0}.featured-image-play:focus-visible{outline:3px solid var(--accent);outline-offset:-5px}.featured-slide .hero-content{position:relative;z-index:1;pointer-events:none;padding:48px 76px 64px;max-width:720px}.featured-slide .hero-actions button{pointer-events:auto}.featured-slide h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.featured-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:grid;place-items:center;width:42px;height:58px;padding:0;border:1px solid #ffffff30;border-radius:14px;background:#07080c99;color:white;font-size:36px;line-height:1;transition:background-color 200ms,border-color 200ms}.featured-arrow:hover{background:#e11d48cc;border-color:var(--accent)}.featured-previous{left:14px}.featured-next{right:14px}.featured-carousel-controls{position:absolute;bottom:14px;right:20px;z-index:3;display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:12px;font-variant-numeric:tabular-nums}.featured-rotation{width:34px;height:34px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:#07080c99;color:white;transition:background-color 200ms}.featured-rotation:hover{background:var(--accent)}
@media(max-width:650px){.featured-slide .hero-content{padding:38px 54px 66px}.featured-arrow{width:32px;height:48px;font-size:28px}.featured-previous{left:8px}.featured-next{right:8px}.featured-slide .hero-actions{gap:10px}.featured-slide .hero-note{font-size:9px}.featured-slide .hero-image{width:100%}}
@media(prefers-reduced-motion:reduce){.featured-slide,.featured-arrow,.featured-rotation{transition:none}}
.login-steps .login-submit{width:100%;margin-top:12px}.login-change-email{padding:0;margin:-8px 0 20px;font-size:12px}.login-access-help{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.login-access-help .link{padding:0;text-align:left;font-size:12px}.login-access-help p,.login-contact{font-size:12px;margin-top:12px}.login-access-help a,.login-contact a{color:var(--accent-hover)}.login-request-confirmation{padding:16px;border:1px solid #e11d4855;border-radius:12px;background:#e11d4810;line-height:1.7}.login-steps>h2,.login-steps>label,.login-request-confirmation,.login-access-help{animation:sectionReveal 200ms ease}.access-request-row{flex-wrap:wrap}.access-request-row>div:first-child{min-width:0;overflow-wrap:anywhere}.access-request-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media(prefers-reduced-motion:reduce){.login-steps>h2,.login-steps>label,.login-request-confirmation,.login-access-help{animation:none}}
.creator-socials a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;transition:color 200ms,transform 200ms}.creator-socials a:hover{transform:translateY(-2px)}.creator-socials svg{width:18px;height:18px}.creator-logo img{animation:upz-logo-spin 24s linear infinite;transform-origin:center}
@keyframes upz-logo-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.creator-logo{transition:none}.creator-logo img{animation:none}.creator-socials a{transition:none}.creator-socials a:hover{transform:none}}