:root {
  --bg: #3f0508;
  --surface: #f6f0e6;
  --ink: #252322;
  --muted: #6e6964;
  --line: #d6cbbd;
  --accent: #a82d29;
  --accent-dark: #731a18;
  --gold: #caa24d;
  --green: #2f7259;
  --blue: #356c86;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-brand: "Manrope", "Segoe UI Black", "Arial Black", "Segoe UI", sans-serif;
  --shadow: 0 18px 42px rgba(22, 12, 10, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(25, 2, 5, 0.88), rgba(30, 5, 8, 0.78) 34%, rgba(20, 1, 4, 0.9)),
    url("theater-curtain-bg.png") center top / cover fixed,
    #2b0508;
  color: var(--ink);
  font-family: var(--font-ui);
  font-optical-sizing: auto;
  font-synthesis: none;
}

/* Secure account access */
.account-access-dialog {
  width: min(92vw, 520px);
  max-height: min(90vh, 760px);
  overflow: auto;
  padding: 0;
}

.account-access-card {
  display: grid;
  gap: 18px;
  width: 100%;
  margin: 0;
  padding: 24px;
}

.account-access-card .dialog-header {
  align-items: start;
}

.account-access-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #e4b84f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.account-access-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid rgba(116, 67, 39, 0.24);
}

.account-access-tabs button {
  min-height: 44px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #5f514c;
  font-weight: 800;
}

.account-access-tabs button.is-active {
  border-bottom-color: #bd322f;
  color: #6b0f14;
}

.account-access-form {
  display: grid;
  gap: 14px;
}

.account-sign-up-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.account-sign-up-fields[hidden] {
  display: none;
}

.account-display-name-field {
  grid-column: 1 / -1;
}

.account-display-name-field small {
  color: #83736d;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}

.account-access-form > p:first-child {
  margin: 0 0 2px;
  color: #6f625d;
  line-height: 1.5;
}

.account-access-form label,
.local-preview-access label {
  display: grid;
  gap: 7px;
  color: #4b312c;
  font-size: 0.82rem;
  font-weight: 800;
}

.account-access-form input,
.local-preview-access input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d6c7b8;
  border-radius: 5px;
  background: #fffdf8;
  color: #281510;
  padding: 10px 12px;
}

.account-password-row {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #83736d;
  font-size: 0.75rem;
}

.account-access-status {
  min-height: 20px;
  margin: 0;
  color: #74635d;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.account-access-status[data-tone="error"] { color: #a21e25; }
.account-access-status[data-tone="success"] { color: #2f6b48; }

.local-preview-access {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 12px 14px;
  border-top: 1px solid #dfd2c4;
  padding-top: 18px;
}

.local-preview-access > div {
  grid-column: 1 / -1;
}

.local-preview-access strong,
.local-preview-access span {
  display: block;
}

.local-preview-access span {
  margin-top: 3px;
  color: #76665f;
  font-size: 0.78rem;
  line-height: 1.4;
}

.local-preview-access .secondary-button {
  align-self: end;
  min-height: 46px;
}

@media (max-width: 560px) {
  .account-access-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 32px);
  }

  .account-access-card {
    gap: 12px;
    padding: 16px;
  }

  .account-access-form {
    gap: 11px;
  }

  .account-sign-up-fields {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .account-display-name-field {
    grid-column: auto;
  }

  .account-access-form input,
  .local-preview-access input {
    min-height: 42px;
  }

  .local-preview-access {
    gap: 9px;
    padding-top: 14px;
  }

  .local-preview-access {
    grid-template-columns: 1fr;
  }

  .local-preview-access > div {
    grid-column: auto;
  }
}

body.pref-soft-curtain {
  background:
    linear-gradient(180deg, rgba(19, 1, 4, 0.93), rgba(24, 3, 6, 0.87) 34%, rgba(16, 0, 3, 0.94)),
    url("theater-curtain-bg.png") center top / cover fixed,
    #240407;
}

body.watchlist-page,
body.profile-page,
body.account-page,
body.shop-page,
body.archive-page {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(111, 35, 42, 0.28), transparent 45%),
    radial-gradient(circle at 8% 28%, rgba(91, 22, 29, 0.16), transparent 31%),
    linear-gradient(145deg, #26090d 0%, #170306 52%, #22070a 100%);
  background-attachment: fixed;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  outline: 0;
}

input,
select {
  min-height: 42px;
  padding: 8px 10px;
}

textarea {
  resize: vertical;
  padding: 10px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  box-shadow: 0 0 0 3px rgba(201, 54, 45, 0.22);
  position: relative;
  z-index: 1;
}

.app-shell {
  position: relative;
  z-index: 0;
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: 0 20px 20px;
}

.topbar {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 18px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
}

.topbar::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 50%;
  width: 100vw;
  border-bottom: 1px solid rgba(255, 248, 237, 0.09);
  background: linear-gradient(180deg, #380e13, #2a090d);
  box-shadow: 0 12px 30px rgba(12, 0, 1, 0.34), inset 0 -1px 0 rgba(255, 248, 237, 0.03);
  transform: translateX(-50%);
  pointer-events: none;
}

.topbar::after,
.account-topbar::after,
.home-nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url("metallic-grain-texture.webp") center 48% / cover no-repeat;
  opacity: 0.28;
  mix-blend-mode: soft-light;
}

.topbar::after {
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
}

.topbar > * {
  position: relative;
  z-index: 1;
}

.hero-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 74px;
}

.watchlist-hero-bar {
  grid-template-columns: 170px minmax(150px, 1fr) max-content;
  gap: 16px;
}

.watchlist-hero-bar .brand-block,
.watchlist-hero-bar .header-brand {
  width: 170px;
  overflow: visible;
}

.watchlist-hero-bar .header-brand-logo {
  width: 270px;
  max-width: none;
  pointer-events: none;
}

.hero-bar::before {
  display: none;
}

.hero-bar > * {
  position: relative;
  z-index: 1;
}

.brand-block {
  display: flex;
  min-height: 74px;
  align-items: center;
  min-width: 0;
}

.header-brand {
  display: block;
  min-width: 0;
  text-decoration: none;
}

.header-brand-logo {
  display: block;
  width: min(270px, 100%);
  height: 56px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

.site-menu-bar {
  position: relative;
  display: flex;
  width: max-content;
  max-width: 100%;
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
  align-content: center;
  justify-content: end;
  justify-self: end;
  min-height: 74px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.site-menu {
  position: relative;
  z-index: 60;
}

.site-menu[open] {
  z-index: 2200;
}

.site-menu summary,
.site-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #d9cbbd;
  box-shadow: none;
  font-size: 0.76rem;
  font-weight: 800;
  list-style: none;
  padding: 0 11px;
  text-transform: none;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.34);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.watchlists-menu summary {
  min-width: 0;
}

.site-menu summary::-webkit-details-marker {
  display: none;
}

.site-menu summary::after {
  content: "▾";
  margin-left: 8px;
  font-size: 0.74rem;
}

@media (min-width: 921px) {
  .signed-header .where-to-watch-menu > summary::after { display: none; }
}

.site-menu[open] summary,
.site-menu summary:hover,
.site-nav-button:hover {
  border-color: var(--gold);
  background: transparent;
  color: #fff8e8;
  text-shadow: none;
  transform: none;
}

.site-menu-panel {
  position: absolute;
  z-index: 2000;
  top: calc(100% - 2px);
  right: 0;
  display: grid;
  gap: 7px;
  width: 210px;
  border: 1px solid rgba(255, 248, 237, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(247, 238, 224, 0.98));
  box-shadow: 0 22px 46px rgba(13, 0, 0, 0.32);
  padding: 8px;
  max-width: calc(100vw - 20px);
  translate: var(--menu-shift-x, 0) 0;
}

.site-menu-panel.is-scrollable {
  max-height: var(--menu-max-height, calc(100dvh - 90px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(133, 91, 42, 0.58) rgba(236, 224, 207, 0.74);
  scrollbar-width: thin;
}

.site-menu-panel.is-upward {
  top: auto;
  bottom: calc(100% - 2px);
}

.site-menu-panel.is-upward::before {
  top: auto;
  bottom: -6px;
  transform: rotate(225deg);
}

.watchlists-menu .site-menu-panel.is-scrollable > .watchlist-add-button {
  position: sticky;
  z-index: 3;
  top: 0;
  box-shadow: 0 5px 12px rgba(69, 18, 14, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.watchlists-menu .site-menu-panel.is-scrollable .watchlist-archive-link {
  position: sticky;
  z-index: 2;
  bottom: 0;
  box-shadow: 0 -5px 12px rgba(69, 42, 14, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.site-menu[open] .site-menu-panel {
  animation: menu-reveal 140ms ease-out both;
}

.watchlists-menu .site-menu-panel {
  width: min(470px, calc(100vw - 28px));
  right: auto;
  left: 0;
}

.watchlists-menu .site-menu-panel::before {
  right: auto;
  left: 26px;
}

.friends-menu .site-menu-panel {
  width: 270px;
}

.friends-lobby-link {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(225, 172, 53, 0.72);
  border-radius: 4px;
  background: #e9c66d;
  color: #4b1113;
  font-size: 0.82rem;
  font-weight: 900;
  margin-bottom: 4px;
  text-decoration: none;
}

.friends-lobby-link:hover {
  background: #fff0bd;
  color: #4b1113;
}

.lobby-nav-panel a:not(.friends-lobby-link) {
  display: flex;
  min-height: 34px;
  align-items: center;
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0 8px;
  text-decoration: none;
}

.lobby-nav-panel a:not(.friends-lobby-link):hover {
  background: #f2eadc;
}

.site-menu-panel.where-to-watch-panel {
  width: min(184px, calc(100vw - 28px));
  gap: 3px;
}

.where-to-watch-panel a {
  display: flex;
  min-height: 34px;
  align-items: center;
  border-radius: 4px;
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0 10px;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.where-to-watch-panel a:hover,
.where-to-watch-panel a:focus-visible {
  background: #f2eadc;
  color: #5c1518;
  transform: translateX(2px);
}

.where-to-watch-label {
  display: block;
  border-bottom: 1px solid rgba(185, 137, 42, 0.56);
  color: #8a6a3a;
  font-size: 0.68rem;
  font-weight: 900;
  margin: 1px 4px 4px;
  padding: 4px 6px 5px;
  text-align: center;
}

.where-to-watch-divider {
  height: 1px;
  background: rgba(139, 99, 43, 0.26);
  margin: 5px 8px;
}

.where-to-watch-panel .provider-pill {
  display: flex;
  width: 100%;
  height: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(166, 133, 83, 0.32);
  border-radius: 7px;
  background: linear-gradient(180deg, #fffdf8, #f7f0e5);
  padding: 4px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transform: none;
}

.where-to-watch-panel .provider-pill:hover,
.where-to-watch-panel .provider-pill:focus-visible {
  border-color: rgba(181, 133, 39, 0.7);
  background: linear-gradient(180deg, #fffefb, #f4e5c9);
  box-shadow: 0 3px 9px rgba(83, 39, 12, 0.12), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

.provider-pill-logo {
  display: block;
  width: auto;
  max-width: min(129px, 80%);
  height: auto;
  max-height: 20px;
  object-fit: contain;
  object-position: center;
}

.provider-logo-wide {
  max-width: min(133px, 84%);
  max-height: 17px;
}

.provider-logo-amc {
  max-height: 21px;
}

.provider-logo-harkins {
  max-width: min(117px, 78%);
  max-height: 21px;
}

.provider-logo-disney {
  max-height: 24px;
}

.provider-logo-apple {
  max-height: 22px;
}

.provider-pill-fallback {
  color: var(--accent-dark);
  font-size: 0.74rem;
  font-weight: 900;
}

.site-menu-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 26px;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(255, 248, 237, 0.78);
  border-top: 1px solid rgba(255, 248, 237, 0.78);
  background: rgba(255, 253, 248, 0.98);
  transform: rotate(45deg);
}

.site-menu-panel .icon-button,
.site-menu-panel .primary-button,
.site-menu-panel .secondary-button,
.site-menu-panel .text-button,
.site-menu-panel .import-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  justify-content: start;
  text-align: left;
  box-shadow: none;
}

.site-menu-panel .primary-button {
  justify-content: center;
  text-align: center;
}

.profile-avatar {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 248, 237, 0.72);
  border-radius: 999px;
  background:
    linear-gradient(135deg, var(--accent), var(--gold));
  color: #fff8ed;
  font-size: 0.74rem;
  font-weight: 900;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.34);
  background-position: center;
  background-size: cover;
}

.profile-link {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-left: 7px;
  place-items: center;
  border: 1px solid rgba(225, 172, 53, 0.72);
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.profile-link:hover,
.profile-link:focus-visible {
  border-color: var(--gold);
  background: rgba(225, 172, 53, 0.12);
  outline: 0;
  transform: translateY(-1px);
}

.profile-link .profile-avatar {
  width: 27px;
  height: 27px;
  border: 0;
}

.year-tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  align-items: center;
  width: 100%;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 248, 237, 0.09);
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(205, 186, 161, 0.46) 0 9px, transparent 9px 15px) top 5px left 8px / calc(100% - 16px) 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(205, 186, 161, 0.46) 0 9px, transparent 9px 15px) bottom 5px left 8px / calc(100% - 16px) 5px no-repeat,
    linear-gradient(180deg, #34272a, #21191b 52%, #2b2023);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), inset 0 0 14px rgba(0, 0, 0, 0.14), 0 5px 12px rgba(0, 0, 0, 0.12);
  padding: 13px 12px;
}

.year-tabs::before,
.year-tabs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}

.year-tabs::before {
  background:
    repeating-linear-gradient(101deg, transparent 0 27px, rgba(255, 245, 224, 0.035) 28px, transparent 29px 63px),
    repeating-linear-gradient(7deg, transparent 0 19px, rgba(0, 0, 0, 0.06) 20px, transparent 21px 47px);
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

.year-tabs::after {
  background: linear-gradient(90deg, rgba(49, 6, 9, 0.42), transparent 28px, transparent calc(100% - 28px), rgba(49, 6, 9, 0.42));
}

.year-tabs > * {
  position: relative;
  z-index: 1;
}

.year-tab {
  flex: 0 0 auto;
  width: 47px;
  min-height: 34px;
  border: 1px solid rgba(225, 172, 53, 0.24);
  border-radius: 5px;
  background: #cfc4b3;
  color: #443c38;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.16);
}

.year-tab.active {
  border-color: #f0bd4e;
  background: linear-gradient(180deg, #c73b31, #98251f);
  color: #fff8ed;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.18), 0 0 0 1px rgba(240, 189, 78, 0.2), 0 4px 9px rgba(0, 0, 0, 0.25);
}

.year-tab.active:hover {
  border-color: #e8493e;
  background: #e0443a;
  box-shadow: 0 14px 28px rgba(98, 7, 9, 0.26);
}

.add-movie-top,
.add-watchlist-top {
  flex: 0 0 auto;
  white-space: nowrap;
}

.year-row {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 74px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.year-arrow {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #b9954e;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.48);
}

.year-arrow:hover:not(:disabled),
.year-arrow:focus-visible:not(:disabled) {
  background: transparent;
  color: #ffd66f;
  box-shadow: none;
  transform: translateY(-1px) scale(1.08);
}

.year-arrow:disabled {
  cursor: default;
  opacity: 0.42;
  transform: none;
}

.watchlist-tabs {
  display: grid;
  gap: 7px;
}

.watchlist-add-button {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid #b82626;
  border-radius: 5px;
  background: linear-gradient(180deg, #d43a34, #b92828);
  color: #fff9ee;
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.watchlist-add-button:hover,
.watchlist-add-button:focus-visible {
  background: linear-gradient(180deg, #e0473f, #c72e2e);
  box-shadow: 0 8px 18px rgba(102, 12, 14, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.watchlist-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px auto auto;
  gap: 6px;
  align-items: center;
}

.watchlist-row-action {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd3c6;
  border-radius: 6px;
  background: #fffdf9;
  color: #741e20;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0 9px;
  text-decoration: none;
  white-space: nowrap;
}

.watchlist-row-action:hover:not(:disabled),
.watchlist-row-action:focus-visible:not(:disabled) {
  border-color: #d4a748;
  background: #fff5d8;
}

.watchlist-row-delete {
  color: #8d2022;
}

.watchlist-row-action:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.watchlist-row-action[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.42;
  pointer-events: none;
}

.watchlist-visibility-static {
  display: flex;
  width: 70px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9c2b8;
  border-radius: 7px;
  background: #f3efe9;
  color: #68645f;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.watchlist-archive-link {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  border: 1px solid rgba(202, 162, 77, 0.52);
  border-radius: 5px;
  background: linear-gradient(180deg, #f1d47e, #d5aa48);
  color: #551315;
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.watchlist-archive-link:hover,
.watchlist-archive-link.active {
  border-color: #f0c75e;
  background: linear-gradient(180deg, #f5df99, #dfb854);
  color: #3e0b0d;
}

.watchlist-tab {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--accent-dark);
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 900;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-tab.active {
  border-color: var(--gold);
  background: var(--gold);
  color: #382600;
}

.watchlist-visibility {
  position: relative;
  display: block;
  width: 70px;
  cursor: pointer;
}

.watchlist-visibility input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.watchlist-visibility span {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9c2b8;
  border-radius: 7px;
  background: #f3efe9;
  color: #68645f;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.watchlist-visibility input:checked + span {
  border-color: #b78218;
  background: #f0c34e;
  color: #382600;
}

.watchlist-visibility input:focus-visible + span {
  outline: 3px solid rgba(201, 54, 45, 0.28);
  outline-offset: 2px;
}

.friends-list,
.friend-search-results {
  display: grid;
  gap: 7px;
}

.friends-list {
  max-height: 280px;
  overflow-y: auto;
}

.friend-row,
.friend-result {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  padding: 5px 7px;
}

.friend-row strong,
.friend-result strong {
  overflow: hidden;
  color: var(--accent-dark);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-members-list {
  display: grid;
  max-height: min(420px, 54vh);
  gap: 7px;
  overflow-y: auto;
  padding-right: 3px;
}

.watchlist-member-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #ded2c4;
  border-radius: 6px;
  background: #fffaf2;
  padding: 8px 10px;
  cursor: pointer;
}

.watchlist-member-row:hover {
  border-color: rgba(202, 162, 77, 0.72);
  background: #fff5df;
}

.watchlist-member-row strong {
  overflow: hidden;
  color: var(--accent-dark);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-member-row input {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  accent-color: var(--accent);
}

.watchlist-members-empty {
  margin: 0;
  border: 1px dashed #d5c6b4;
  border-radius: 6px;
  color: var(--muted);
  padding: 24px 16px;
  text-align: center;
}

.friend-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(225, 172, 53, 0.76);
  border-radius: 50%;
  background: #671016;
  color: #fff8e8;
  font-size: 0.67rem;
  font-weight: 900;
}

.friend-avatar.has-photo {
  background-image: url("kino-keep-friend-avatars.png");
  background-position: var(--avatar-position, center);
  background-repeat: no-repeat;
  background-size: 300% 200%;
  color: transparent;
}

.friend-remove {
  display: grid;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  place-items: center;
  color: #8f211b;
  font-size: 1.15rem;
  cursor: pointer;
}

.friends-empty,
.friend-search-message {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 9px 7px;
}

.friend-result .primary-button {
  min-height: 32px;
  padding: 0 11px;
  font-size: 0.72rem;
}

.compact-dialog {
  width: min(440px, calc(100vw - 28px));
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

.compact-dialog::backdrop {
  background: rgba(20, 2, 3, 0.68);
  backdrop-filter: blur(3px);
}

.compact-dialog-card {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(225, 172, 53, 0.44);
  border-radius: 8px;
  background: #fffaf3;
  box-shadow: 0 28px 80px rgba(17, 0, 1, 0.46);
  padding: 16px;
}

.compact-dialog-card > label:not(.privacy-setting) {
  display: grid;
  gap: 6px;
}

.compact-dialog-card > label:not(.privacy-setting) > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.privacy-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  padding: 10px 12px;
  cursor: pointer;
}

.privacy-setting > span {
  display: grid;
  gap: 2px;
}

.privacy-setting strong {
  color: var(--accent-dark);
  font-size: 0.86rem;
}

.privacy-setting small {
  color: var(--muted);
  font-size: 0.73rem;
}

.privacy-setting input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.privacy-setting i {
  position: relative;
  display: block;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #b8b3ac;
  transition: background 150ms ease;
}

.privacy-setting i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  transition: transform 150ms ease;
}

.privacy-setting input:checked + i {
  background: #bd861b;
}

.privacy-setting input:checked + i::after {
  transform: translateX(20px);
}

.privacy-setting input:focus-visible + i {
  outline: 3px solid rgba(201, 54, 45, 0.28);
  outline-offset: 2px;
}

.compact-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: end;
}

.recovery-dialog {
  width: min(560px, calc(100vw - 28px));
}

.dialog-subtitle {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
}

.recovery-point-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 360px);
  overflow-y: auto;
}

.recovery-point {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  padding: 10px;
}

.recovery-point strong,
.recovery-point span {
  display: block;
}

.recovery-point strong {
  color: var(--accent-dark);
  font-size: 0.86rem;
}

.recovery-point span,
.recovery-empty {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.recovery-point .secondary-button {
  min-width: 78px;
}

.recovery-empty {
  display: block;
  padding: 8px 0;
}

.account-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 20px;
}

.account-topbar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 104px;
  border: 1px solid rgba(225, 172, 53, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 0 9px, rgba(225, 172, 53, 0.2) 9px 11px, transparent 11px calc(100% - 11px), rgba(225, 172, 53, 0.2) calc(100% - 11px) calc(100% - 9px), transparent calc(100% - 9px)),
    repeating-linear-gradient(90deg, rgba(255, 248, 237, 0.12) 0 12px, transparent 12px 26px),
    linear-gradient(135deg, rgba(24, 3, 4, 0.95), rgba(99, 12, 15, 0.84) 48%, rgba(15, 2, 3, 0.95));
  box-shadow: 0 24px 60px rgba(13, 0, 0, 0.34);
  padding: 16px 20px;
}

.account-topbar > * {
  position: relative;
  z-index: 1;
}

.account-brand {
  display: block;
  width: min(205px, 42vw);
}

.account-brand .site-logo {
  display: block;
  width: 100%;
  height: auto;
}

.account-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

.account-nav .site-nav-button {
  min-height: 40px;
  border: 1px solid rgba(255, 248, 237, 0.42);
  border-radius: 5px;
  color: #fff8ed;
  font-size: 0.9rem;
  padding: 0 15px;
  text-transform: none;
}

.account-nav .site-nav-button:hover {
  border-color: #fff8ed;
  background: #fffdf8;
  color: var(--accent-dark);
}

.back-to-watchlist {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border: 1px solid rgba(255, 248, 237, 0.42);
  border-radius: 5px;
  color: #fff8ed;
  font-weight: 900;
  padding: 0 15px;
  text-decoration: none;
}

.back-to-watchlist:hover,
.back-to-watchlist:focus-visible {
  border-color: #fff8ed;
  background: #fffdf8;
  color: var(--accent-dark);
  outline: 0;
}

.account-main {
  margin: 18px 0 40px;
  border: 1px solid rgba(255, 248, 237, 0.54);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.97);
  box-shadow: 0 26px 70px rgba(13, 0, 0, 0.35);
  overflow: hidden;
}

.account-heading {
  border-bottom: 1px solid #ded4c5;
  background: linear-gradient(120deg, #fffdf8, #f1e4d1);
  padding: 34px clamp(22px, 5vw, 54px) 30px;
}

.account-heading p {
  margin: 0 0 7px;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.account-heading h1 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.08;
  text-shadow: none;
}

.account-heading > span {
  color: var(--muted);
}

.account-form {
  padding: 0 clamp(22px, 5vw, 54px);
}

.account-section {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(280px, 1.28fr);
  gap: clamp(24px, 6vw, 70px);
  align-items: start;
  border-bottom: 1px solid #ded4c5;
  padding: 30px 0;
}

.account-section h2 {
  margin: 0 0 6px;
  font-size: 1.02rem;
}

.account-section p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.account-archive-access {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ded4c5;
  border-radius: 7px;
  background: #fffaf2;
  padding: 18px;
}

.account-archive-access > div {
  display: grid;
  gap: 4px;
}

.account-archive-access strong {
  color: var(--ink);
}

.account-archive-access span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.account-archive-access .primary-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.account-restore-button {
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}

.account-restore-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile-photo-editor {
  display: flex;
  gap: 18px;
  align-items: center;
}

.account-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  background-position: center;
  background-size: cover;
  box-shadow: 0 10px 24px rgba(65, 22, 17, 0.2);
  color: #fff8ed;
  font-size: 1.6rem;
  font-weight: 900;
}

.profile-photo-actions {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.photo-upload-button {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 40px;
}

.photo-upload-button input {
  display: none;
}

.account-fields {
  display: grid;
  gap: 16px;
}

.account-fields label > span {
  display: block;
  margin-bottom: 6px;
  color: #565f66;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.account-preferences {
  display: grid;
  gap: 10px;
}

.account-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  padding: 14px 16px;
}

.account-toggle strong,
.account-toggle small {
  display: block;
}

.account-toggle small {
  margin-top: 3px;
  color: var(--muted);
}

.account-toggle input {
  flex: 0 0 auto;
  width: 20px;
  min-height: 20px;
}

.account-save-row {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

#account-status {
  color: var(--green);
  font-weight: 900;
}

.rename-watchlist-button,
.delete-watchlist-button {
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 4px;
  color: #ffe0b0;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  color: #fff8ed;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.36);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 0.9;
  letter-spacing: 0;
}

.form-actions,
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.icon-button,
.primary-button,
.secondary-button,
.text-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fbf7f0;
  color: var(--ink);
  font-weight: 800;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.icon-button:hover,
.primary-button:hover,
.secondary-button:hover,
.text-button:hover,
.year-tab:hover,
.watchlist-tab:hover,
.segment:hover {
  transform: translateY(-1px);
}

.icon-button {
  display: grid;
  min-width: 42px;
  place-items: center;
  padding: 0 9px;
  font-size: 0.78rem;
}

.import-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.primary-button,
.secondary-button,
.text-button {
  padding: 0 14px;
}

.primary-button {
  border-color: var(--accent);
  background: linear-gradient(180deg, #b93631, var(--accent));
  color: #ffffff;
}

.primary-button:hover {
  border-color: #c84a43;
  background: linear-gradient(180deg, #c5423b, #9d2724);
  box-shadow: 0 12px 24px rgba(69, 9, 11, 0.24);
}

.secondary-button {
  color: #514a44;
}

.text-button {
  color: var(--accent-dark);
}

.danger-action,
.danger-button {
  color: var(--accent-dark);
}

.entry-panel,
.library-tools,
.empty-state {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
}

.entry-panel {
  padding: 14px;
}

.movie-dialog {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

.movie-dialog::backdrop {
  background: rgba(31, 35, 40, 0.42);
}

.movie-dialog .entry-panel {
  box-shadow: 0 24px 70px rgba(31, 35, 40, 0.28);
}

.dialog-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dialog-header h2 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.1;
}

.dialog-header .icon-button {
  width: auto;
  min-width: 58px;
  padding: 0 10px;
  font-size: 0.78rem;
}

.movie-form {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 16px;
  align-items: start;
}

.media-type-toggle {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0;
}

.media-type-toggle legend {
  width: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.media-type-toggle label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 12px;
  font-weight: 900;
}

.media-type-toggle input {
  width: auto;
  min-height: 0;
}

.also-add-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.72);
  padding: 10px;
}

.also-add-field[hidden] {
  display: none;
}

.also-add-field legend {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.also-add-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.also-add-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 12px;
  color: var(--accent-dark);
  font-weight: 900;
}

.also-add-options input {
  width: auto;
  min-height: 0;
}

.poster-picker {
  display: grid;
  gap: 10px;
}

.poster-preview {
  display: grid;
  aspect-ratio: 2 / 3;
  width: 100%;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(201, 54, 45, 0.16), rgba(225, 172, 53, 0.22)),
    #f2e7d8;
  color: var(--accent-dark);
  font-weight: 900;
  outline: 2px dashed transparent;
  outline-offset: -10px;
  text-align: center;
  transition: border-color 160ms ease, box-shadow 160ms ease, outline-color 160ms ease, transform 160ms ease;
}

.poster-preview.is-dragging,
.poster-preview.is-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(201, 54, 45, 0.18);
  outline-color: rgba(201, 54, 45, 0.55);
  transform: translateY(-1px);
}

.poster-preview.has-image {
  background-image: none !important;
  padding: 0;
}

.poster-preview.has-image span {
  display: none;
}

.poster-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poster-preview-image[hidden] {
  display: none;
}

.poster-controls,
.form-grid label {
  display: grid;
  gap: 5px;
}

.poster-controls span,
.form-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.edit-poster-crop {
  width: max-content;
}

.poster-crop-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

.poster-crop-dialog::backdrop {
  background: rgba(20, 2, 3, 0.74);
  backdrop-filter: blur(4px);
}

.crop-editor {
  border: 1px solid rgba(225, 172, 53, 0.45);
  border-radius: 8px;
  background: #fffaf3;
  box-shadow: 0 28px 90px rgba(17, 0, 1, 0.52);
  padding: 16px;
}

.crop-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-dark);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crop-stage-shell {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #180305;
  padding: 18px;
}

.crop-stage {
  position: relative;
  width: min(360px, calc(100vw - 96px));
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 2px solid #e1ac35;
  border-radius: 6px;
  background: #090909;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.crop-stage:active {
  cursor: grabbing;
}

.crop-stage:focus-visible {
  outline: 3px solid rgba(225, 172, 53, 0.7);
  outline-offset: 4px;
}

.crop-stage img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  pointer-events: none;
  will-change: width, height, transform;
}

.crop-safe-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.08);
}

.crop-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin-top: 14px;
}

.crop-zoom-control {
  display: grid;
  gap: 7px;
}

.crop-zoom-control span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crop-zoom-control input {
  min-height: 28px;
  accent-color: var(--accent);
}

.crop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: end;
}

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

.wide {
  grid-column: 1 / -1;
}

.catalog-search-combobox {
  position: relative;
  display: block;
}

.media-catalog-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid rgba(207, 157, 54, 0.75);
  border-radius: 6px;
  background: #fffaf0;
  box-shadow: 0 16px 32px rgba(36, 3, 7, 0.32);
}

.media-catalog-results[hidden] {
  display: none;
}

.media-catalog-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid rgba(91, 48, 45, 0.16);
  border-radius: 0;
  background: transparent;
  color: #310609;
  text-align: left;
  cursor: pointer;
}

.media-catalog-option:last-child {
  border-bottom: 0;
}

.media-catalog-option:hover,
.media-catalog-option.is-active {
  background: #f3e5c5;
}

.form-grid .media-catalog-title,
.form-grid .media-catalog-meta,
.form-grid .media-catalog-empty {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.form-grid .media-catalog-title {
  overflow: hidden;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-grid .media-catalog-meta {
  color: #785d50;
  font-size: 0.72rem;
  font-weight: 800;
}

.form-grid .media-catalog-empty {
  display: block;
  padding: 14px 12px;
  color: #785d50;
  font-size: 0.82rem;
  font-weight: 600;
}

.form-actions {
  grid-column: 1 / -1;
  justify-content: end;
}

.library-tools {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(360px, auto) minmax(190px, 280px) 10.8rem max-content max-content;
  gap: 12px;
  align-items: center;
  border-color: rgba(255, 248, 237, 0.88);
  background: linear-gradient(180deg, rgba(239, 224, 193, 0.98), rgba(204, 170, 103, 0.97));
  padding: 12px;
  margin: 0 0 18px;
  box-shadow: 0 16px 34px rgba(27, 12, 2, 0.22), inset 0 1px 0 rgba(255, 251, 241, 0.52);
}

.library-tools::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -45%;
  bottom: -45%;
  left: -30%;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 249, 220, 0.04) 25%,
    rgba(255, 252, 229, 0.24) 50%,
    rgba(255, 249, 220, 0.04) 75%,
    transparent
  );
  filter: blur(2px);
  transform: skewX(-18deg);
  animation: watchlist-toolbar-shimmer 8.5s ease-in-out infinite;
}

.library-tools::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.04), transparent 42%, rgba(255, 242, 205, 0.07)),
    url("metallic-grain-texture.webp") center 52% / cover no-repeat;
  opacity: 0.34;
  mix-blend-mode: soft-light;
}

.library-tools > * {
  position: relative;
  z-index: 1;
}

@keyframes watchlist-toolbar-shimmer {
  0%,
  20% {
    transform: skewX(-18deg) translateX(0);
  }

  58%,
  100% {
    transform: skewX(-18deg) translateX(650%);
  }
}

#reset-order {
  width: max-content;
  white-space: nowrap;
}

.toolbar-add-media {
  min-width: max-content;
  white-space: nowrap;
}

.toolbar-actions {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  gap: 5px;
  justify-content: end;
}

.toolbar-action {
  display: grid;
  width: 50px;
  height: 44px;
  place-items: center;
  border: 1px solid #9d2825;
  border-radius: 5px;
  background: linear-gradient(180deg, #c63d37, #aa2c29);
  color: #fff8ed;
  box-shadow: inset 0 1px 0 rgba(255, 244, 230, 0.17), 0 5px 10px rgba(75, 12, 11, 0.16);
  padding: 0;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.toolbar-action svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toolbar-action:hover,
.toolbar-action:focus-visible,
.toolbar-action.active {
  border-color: #e0b34f;
  background: linear-gradient(180deg, #d64942, #b62f2b);
  box-shadow: inset 0 1px 0 rgba(255, 244, 230, 0.2), 0 0 0 2px rgba(224, 179, 79, 0.2), 0 7px 14px rgba(75, 12, 11, 0.2);
  transform: translateY(-1px);
}

.toolbar-action:disabled {
  cursor: not-allowed;
  border-color: rgba(112, 81, 66, 0.38);
  background: linear-gradient(180deg, #9d7770, #82615c);
  color: rgba(255, 248, 237, 0.64);
  box-shadow: none;
  transform: none;
}

.toolbar-tools-popover {
  position: fixed;
  inset: auto;
  width: 230px;
  margin: 0;
  overflow: visible;
  border: 1px solid rgba(255, 248, 237, 0.8);
  border-radius: 7px;
  background: linear-gradient(180deg, #fffdf8, #f4e9d8);
  box-shadow: 0 24px 52px rgba(20, 2, 3, 0.36);
  color: var(--ink);
  padding: 8px;
}

.toolbar-tools-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 22px;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(255, 248, 237, 0.8);
  border-left: 1px solid rgba(255, 248, 237, 0.8);
  background: #fffdf8;
  transform: rotate(45deg);
}

.toolbar-tools-popover > strong {
  display: block;
  border-bottom: 1px solid rgba(126, 88, 34, 0.2);
  color: #6d1d1d;
  font-size: 0.78rem;
  padding: 7px 10px 9px;
}

.toolbar-tool-command {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 39px;
  align-items: center;
  justify-content: start;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #4c3d34;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0 10px;
  text-align: left;
}

.toolbar-tool-command:hover,
.toolbar-tool-command:focus-visible {
  background: #eadfcf;
  color: #761f1f;
  box-shadow: none;
}

.toolbar-tools-popover::backdrop {
  background: transparent;
}

.read-only-watchlist {
  width: max-content;
  max-width: 100%;
  margin: -6px 0 16px;
  border: 1px solid rgba(208, 165, 66, 0.66);
  border-radius: 5px;
  background: rgba(50, 17, 18, 0.9);
  color: #fff8ed;
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 750;
  box-shadow: 0 7px 18px rgba(34, 8, 9, 0.15);
}

.read-only-watchlist span {
  display: inline-block;
  margin-left: 7px;
  border-left: 1px solid rgba(231, 192, 103, 0.55);
  color: #f0cc77;
  padding-left: 8px;
}

.movie-card.is-read-only .movie-menu-button,
.movie-card.is-read-only .watched-toggle,
.movie-card.is-read-only .next-up-toggle {
  cursor: default;
}

.search-wrap {
  display: grid;
  grid-template-columns: minmax(104px, 48%) minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 88, 34, 0.42);
  border-radius: 7px;
  background: rgba(250, 245, 234, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 5px 12px rgba(96, 56, 11, 0.12);
}

.search-wrap span {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid rgba(130, 105, 83, 0.22);
  background: #f2ece3;
  color: #6d1d22;
  padding: 4px 8px;
  font-size: var(--watchlist-context-font-size, 0.68rem);
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: none;
}

.search-wrap input {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: 12px;
}

.search-wrap input:focus {
  box-shadow: none;
}

.search-wrap input:focus-visible {
  outline: 0;
}

.search-wrap:focus-within {
  border-color: #caa24d;
  box-shadow: 0 0 0 3px rgba(202, 162, 77, 0.18), inset 0 1px 0 #fff;
}

.segmented {
  display: flex;
  align-items: end;
  gap: 4px;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid rgba(108, 76, 31, 0.5);
  border-radius: 0;
  background: transparent;
  padding: 7px 6px 0;
}

.segment {
  position: relative;
  flex: 1 1 0;
  min-width: max-content;
  min-height: 39px;
  border: 1px solid rgba(126, 88, 34, 0.55);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #e8d3a5, #c49b50);
  color: #44331d;
  padding: 0 13px 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 -1px 0 rgba(255, 255, 255, 0.25);
  font-weight: 900;
  white-space: nowrap;
}

.segment[data-filter="all"] {
  flex: 0 0 auto;
  padding-inline: 14px;
}

.segment::before {
  content: "";
  position: absolute;
  inset: 4px 8px auto 8px;
  height: 1px;
  background: rgba(255, 247, 213, 0.7);
}

.segment.active {
  z-index: 1;
  min-height: 44px;
  background: linear-gradient(180deg, #f1dfb8, #d1ad68 72%, #b98c42);
  color: #2d2215;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 -4px 12px rgba(96, 56, 11, 0.16);
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 18px;
}

body.pref-compact-cards .movie-grid {
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 10px;
}

.movie-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: visible;
  min-height: 100%;
  border: 1px solid rgba(202, 162, 77, 0.34);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(17, 7, 5, 0.25);
  animation: card-settle 180ms ease-out both;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.movie-card:hover {
  border-color: rgba(202, 162, 77, 0.68);
  box-shadow: 0 22px 48px rgba(17, 7, 5, 0.32);
  transform: translateY(-2px);
}

body.pref-compact-cards .movie-body {
  gap: 7px;
  padding: 9px;
}

body.pref-compact-cards .movie-notes {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body.pref-compact-cards .card-actions {
  gap: 5px;
}

.movie-card.is-reordering {
  opacity: 0.48;
}

.movie-card.is-drop-target {
  outline: 3px solid rgba(201, 54, 45, 0.36);
  outline-offset: 3px;
}

.order-handle {
  display: grid;
  width: 28px;
  height: 28px;
  align-self: start;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #8a7d74;
  padding: 0;
  cursor: grab;
  touch-action: none;
}

.order-handle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.order-handle:hover,
.order-handle:focus-visible {
  border-color: rgba(130, 105, 83, 0.3);
  background: #e7dfd3;
  color: #6d1d22;
}

.order-handle:active {
  cursor: grabbing;
}

.poster-button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 0;
  border-radius: 5px 5px 0 0;
  background: #ede0cf;
  padding: 0;
}

.movie-poster,
.poster-fallback {
  width: 100%;
  height: 100%;
}

.movie-poster {
  display: block;
  object-fit: cover;
}

.poster-fallback {
  display: none;
  place-items: center;
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(39, 106, 143, 0.22), rgba(36, 123, 90, 0.18)),
    #f7efe4;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

.movie-card.no-poster .movie-poster {
  display: none;
}

.movie-card.no-poster .poster-fallback {
  display: grid;
}

.watched-ribbon {
  position: absolute;
  top: 12px;
  right: -44px;
  width: 150px;
  transform: rotate(35deg);
  background: #255f49;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 28px;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
}

.next-up-ribbon,
.in-progress-ribbon {
  position: absolute;
  left: 10px;
  bottom: 10px;
  border: 1px solid rgba(31, 35, 40, 0.22);
  border-color: rgba(202, 162, 77, 0.66);
  border-radius: 4px;
  background: #e9d49b;
  color: #4d3914;
  padding: 6px 9px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(31, 35, 40, 0.18);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.in-progress-ribbon {
  border-color: rgba(53, 108, 134, 0.54);
  background: #c8dce5;
  color: #214f64;
}

.movie-card.is-watched .watched-ribbon {
  opacity: 1;
}

.movie-card.is-next-up {
  border-color: var(--gold);
  box-shadow: 0 18px 44px rgba(202, 162, 77, 0.28);
}

.movie-card.is-next-up .next-up-ribbon {
  opacity: 1;
}

.movie-card.is-next-up .movie-body {
  background: #eee1b9;
  border-top: 1px solid rgba(202, 162, 77, 0.58);
}

.movie-card.is-in-progress {
  border-color: var(--blue);
  box-shadow: 0 18px 44px rgba(35, 78, 99, 0.3);
}

.movie-card.is-in-progress .in-progress-ribbon {
  opacity: 1;
}

.movie-card.is-next-up.is-in-progress .in-progress-ribbon {
  bottom: 46px;
}

.movie-card.is-in-progress .movie-body {
  background: #b8d3df;
  border-top: 1px solid rgba(53, 108, 134, 0.62);
}

.movie-card.is-next-up .next-up-action {
  border-color: var(--gold);
  background: #e7d092;
  color: #49350f;
}

.movie-card.is-watched {
  border-color: #438565;
  box-shadow:
    inset 0 0 0 1px rgba(178, 255, 206, 0.18),
    0 0 0 1px rgba(82, 206, 140, 0.3),
    0 0 12px rgba(78, 227, 144, 0.32),
    0 0 30px rgba(47, 192, 108, 0.22),
    0 0 58px rgba(34, 155, 83, 0.13),
    0 20px 46px rgba(15, 53, 37, 0.34);
}

.movie-card.is-watched:hover {
  border-color: #70bc92;
  box-shadow:
    inset 0 0 0 1px rgba(210, 255, 225, 0.3),
    0 0 0 2px rgba(111, 231, 159, 0.42),
    0 0 16px rgba(98, 239, 151, 0.46),
    0 0 36px rgba(55, 207, 116, 0.32),
    0 0 66px rgba(34, 165, 88, 0.2),
    0 24px 52px rgba(12, 47, 32, 0.4);
}

.movie-card.is-watched:not(:hover) {
  animation: watched-led-pulse 3.8s ease-in-out infinite;
}

@keyframes watched-led-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(197, 255, 218, 0.18),
      0 0 0 1px rgba(102, 221, 153, 0.3),
      0 0 16px rgba(91, 235, 151, 0.32),
      0 0 36px rgba(49, 202, 113, 0.22),
      0 0 64px rgba(34, 165, 88, 0.13),
      0 20px 46px rgba(15, 53, 37, 0.34);
  }

  50% {
    box-shadow:
      inset 0 0 0 1px rgba(178, 255, 206, 0.06),
      0 0 0 1px rgba(82, 206, 140, 0.1),
      0 0 12px rgba(78, 227, 144, 0.11),
      0 0 30px rgba(47, 192, 108, 0.08),
      0 0 58px rgba(34, 155, 83, 0.05),
      0 20px 46px rgba(15, 53, 37, 0.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  .movie-card.is-watched:not(:hover) {
    animation: none;
  }
}

.movie-card.is-watched .movie-body {
  background: #acd1b9;
  border-top: 1px solid rgba(47, 114, 89, 0.68);
}

.movie-card.is-watched .movie-meta {
  color: #294c3b;
}

.movie-card.is-in-progress .movie-meta {
  color: #284f61;
}

.movie-card.is-next-up .movie-meta {
  color: #57451f;
}


.movie-body {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  min-height: 168px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #f8f3eb, #f1e9dd);
  padding: 11px;
  transition: background 200ms ease, border-color 200ms ease;
}

.movie-card.is-series .movie-body {
  min-height: 206px;
}

.select-check {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  padding: 8px 10px;
  color: var(--muted);
  font-weight: 900;
}

.select-check input {
  width: auto;
  min-height: 0;
}

.is-selecting .select-check {
  display: flex;
}

.is-selecting .movie-card .card-actions,
.is-selecting .movie-card .card-control-row {
  display: none;
}

.movie-card.is-selected {
  outline: 4px solid rgba(201, 54, 45, 0.42);
  outline-offset: 3px;
}

.movie-heading {
  display: block;
}

.movie-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.movie-meta {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.season-tracker {
  display: none;
  flex: 1 1 auto;
  gap: 5px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 34px;
}

.movie-card.is-series .season-tracker {
  display: grid;
}

.card-control-row {
  display: flex;
  min-width: 0;
  align-items: stretch;
  align-self: end;
  justify-content: flex-end;
  gap: 6px;
}

.season-button,
.season-nav {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8f3eb;
  color: var(--muted);
  padding: 0 6px;
  font-size: 0.74rem;
  font-weight: 900;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.season-button.is-complete {
  border-color: var(--green);
  background: var(--green);
  color: #ffffff;
}

.season-nav {
  border-color: #2f7259;
  background: #2f7259;
  color: #ffffff;
  font-size: 0.68rem;
}

.season-nav:hover:not(:disabled) {
  border-color: #3e8a6a;
  background: #3e8a6a;
}

.season-nav:disabled,
.season-button.is-placeholder {
  cursor: default;
  opacity: 0.38;
}

.tag {
  max-width: 100%;
  border: 1px solid rgba(111, 98, 84, 0.15);
  border-radius: 4px;
  background: #e8ded0;
  color: var(--ink);
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.tag.priority-tonight {
  background: #ead2cb;
  color: var(--accent-dark);
}

.tag.priority-soon {
  background: #e6d5a8;
  color: #5e4819;
}

.tag.rating {
  background: #d6e1e5;
  color: var(--blue);
}

.tag.next-up {
  background: #e7d294;
  color: #4d3914;
}

.tag.series {
  background: #d6e1e5;
  color: var(--blue);
}

.tag.in-progress {
  background: #c8dce5;
  color: #214f64;
}

.tag.watched {
  background: #c7ddce;
  color: #24513f;
}

.movie-notes {
  position: absolute;
  z-index: 70;
  right: 10px;
  bottom: 58px;
  left: 10px;
  max-height: 132px;
  overflow: auto;
  margin: 0;
  border: 1px solid rgba(202, 162, 77, 0.62);
  border-radius: 5px;
  background: rgba(28, 23, 21, 0.97);
  box-shadow: 0 16px 34px rgba(18, 7, 5, 0.36);
  color: #f5ecdf;
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 28px 12px 11px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.movie-notes::before {
  content: "Notes";
  position: absolute;
  top: 9px;
  left: 12px;
  color: #d8b661;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.movie-card:hover .movie-notes:not([hidden]),
.movie-card:focus-within .movie-notes:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.card-actions {
  position: relative;
  display: grid;
  grid-template-columns: minmax(56px, 0.8fr) minmax(73px, 1.2fr) 38px;
  gap: 6px;
  padding-top: 0;
}

.card-actions > .next-up-action,
.card-actions > .watched-action {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 5px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.watched-action {
  margin-top: 0;
}

.card-menu {
  position: relative;
  flex: 0 0 auto;
}

.card-menu summary {
  display: grid;
  width: 38px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fbf7f0;
  color: #514a44;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  list-style: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.card-menu summary::-webkit-details-marker {
  display: none;
}

.card-menu summary:hover,
.card-menu[open] summary {
  border-color: var(--gold);
  background: #f0e3c9;
  color: var(--accent-dark);
}

.card-menu-panel {
  position: absolute;
  z-index: 80;
  right: 0;
  bottom: calc(100% + 7px);
  display: grid;
  gap: 5px;
  width: 150px;
  border: 1px solid rgba(202, 162, 77, 0.58);
  border-radius: 6px;
  background: #f8f2e9;
  box-shadow: 0 16px 34px rgba(24, 10, 8, 0.3);
  padding: 6px;
  animation: menu-reveal 140ms ease-out both;
}

.card-menu-panel .secondary-button {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  justify-content: start;
  text-align: left;
}

.card-menu-panel .delete-action {
  color: var(--accent-dark);
}

.movie-card:has(.card-menu[open]) {
  z-index: 90;
}

.watched-ribbon {
  transition: opacity 180ms ease;
}

@keyframes menu-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-settle {
  from {
    opacity: 0.7;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-tools::before {
    animation: none;
    opacity: 0;
  }

  .movie-card,
  .site-menu-panel,
  .card-menu-panel {
    animation: none;
  }

  .movie-card,
  .movie-body,
  .movie-notes,
  .watched-ribbon,
  .next-up-ribbon,
  .in-progress-ribbon {
    transition: none;
  }
}

.empty-state {
  display: grid;
  gap: 4px;
  place-items: center;
  min-height: 180px;
  color: var(--muted);
  text-align: center;
}

.empty-state[hidden] {
  display: none;
}

.empty-state strong {
  color: var(--ink);
  font-size: 1.2rem;
}

.home-page {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(19, 1, 3, 0.66), rgba(24, 3, 6, 0.44) 38%, rgba(16, 0, 3, 0.7)),
    url("theater-curtain-bg.png") center top / cover fixed,
    #2b0508;
}

body.home-page.pref-soft-curtain {
  background:
    linear-gradient(180deg, rgba(19, 1, 3, 0.76), rgba(24, 3, 6, 0.58) 38%, rgba(16, 0, 3, 0.8)),
    url("theater-curtain-bg.png") center top / cover fixed,
    #280407;
}

/* Public Kino Keep homepage */
.public-homepage {
  background:
    linear-gradient(180deg, rgba(34, 1, 5, 0.72) 0, rgba(39, 2, 7, 0.62) 30%, rgba(20, 1, 5, 0.88) 100%),
    url("theater-curtain-bg.png") center top / cover fixed,
    #250206;
  color: #fff7e9;
}

.public-homepage main {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  border-right: 1px solid rgba(245, 214, 139, 0.58);
  border-left: 1px solid rgba(245, 214, 139, 0.58);
  background: #3d161a;
  box-shadow: 0 0 54px rgba(9, 0, 2, 0.5);
}

.public-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(235, 198, 102, 0.2);
  background: rgba(44, 3, 8, 0.91);
  box-shadow: 0 10px 30px rgba(10, 0, 2, 0.22);
  backdrop-filter: blur(12px);
}

.public-header-inner,
.public-hero,
.story-section,
.final-cta,
.public-footer {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.public-header-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.public-brand { display: block; width: 196px; flex: 0 0 auto; }
.public-brand img { display: block; width: 100%; height: auto; }

.public-navigation { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.public-navigation a,
.public-navigation button,
.footer-link {
  border: 0;
  background: transparent;
  color: #f9edda;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.public-navigation a,
.public-navigation button { padding: 10px 12px; }
.public-navigation a:hover,
.public-navigation a:focus-visible { color: #f6cf71; }
.public-sign-in { color: #f6ddae !important; }
.public-get-started,
.public-primary {
  border: 1px solid #db4337 !important;
  border-radius: 6px;
  background: linear-gradient(180deg, #dc4c40, #b92329) !important;
  color: #fffaf1 !important;
  box-shadow: 0 10px 22px rgba(13, 0, 2, 0.25);
}
.public-menu-toggle { display: none; }

.public-hero {
  display: grid;
  grid-template-columns: minmax(330px, 0.84fr) minmax(510px, 1.16fr);
  gap: clamp(34px, 6vw, 82px);
  align-items: center;
  min-height: min(800px, calc(100vh - 78px));
  padding: 72px 0 94px;
}
.public-eyebrow {
  margin: 0 0 15px;
  color: #f6d47e;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: none;
}
.public-hero h1,
.story-section h2,
.final-cta h2 {
  margin: 0;
  color: #fff8ed;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.94;
}
.public-hero h1 { font-size: clamp(4.8rem, 10vw, 8.6rem); text-shadow: 0 16px 35px rgba(0, 0, 0, 0.35); }
.hero-eyebrow { margin: 20px 0 12px; }
.public-lede { max-width: 540px; margin: 0; color: #fff3e1; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.6; }
.public-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.public-primary,
.public-secondary,
.final-sign-in {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 6px;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.public-secondary,
.final-sign-in { border: 1px solid rgba(255, 246, 229, 0.5); background: rgba(37, 3, 7, 0.35); color: #fff8ed; }
.public-note { margin: 24px 0 0; color: rgba(255, 236, 201, 0.72); font-size: 0.92rem; }

.product-showcase { min-width: 0; position: relative; }
.showcase-caption { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px 8px; color: #f4d88f; }
.showcase-caption span { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.showcase-caption strong { color: #fff7e9; font-size: 0.92rem; }
.product-browser-frame { position: relative; overflow: hidden; aspect-ratio: 1.28 / 1; border: 1px solid rgba(245, 214, 139, 0.56); border-radius: 8px; background: #1d0205; box-shadow: 0 36px 70px rgba(0, 0, 0, 0.42), 0 0 0 7px rgba(62, 5, 10, 0.45); }
.product-browser-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 54px rgba(12, 0, 3, 0.24); }
.product-browser-frame iframe { position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 0; transform: scale(0.5); transform-origin: top left; pointer-events: none; }
.product-showcase-watchlist { width: min(100%, 680px); justify-self: end; }
.watchlist-showcase-shell { position: relative; }
.watchlist-showcase-frame { aspect-ratio: 1330 / 1035; }
.watchlist-showcase-track {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: auto;
}
.watchlist-showcase-track::-webkit-scrollbar { display: none; }
.watchlist-showcase-track:focus-visible { outline: 3px solid #f8d579; outline-offset: -4px; }
.watchlist-showcase-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.watchlist-demo-capture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; user-select: none; -webkit-user-drag: none; }
.watchlist-showcase-dots {
  position: absolute;
  right: 0;
  bottom: 12px;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.watchlist-showcase-dots button {
  width: 38px;
  height: 6px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 248, 235, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
}
.watchlist-showcase-dots button.is-active { background: #f4cf73; }
.watchlist-showcase-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 28px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #f4cf73;
  transform: translateY(-50%);
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
}
.watchlist-showcase-arrow:hover { color: #fff7e9; }
.watchlist-showcase-arrow:focus-visible { outline: 1px solid #f4cf73; outline-offset: 4px; }
.watchlist-showcase-arrow span { font-family: Georgia, serif; font-size: 2rem; line-height: 1; }
.watchlist-showcase-previous { left: -34px; }
.watchlist-showcase-previous:hover { transform: translate(-2px, -50%); }
.watchlist-showcase-next { right: -34px; }
.watchlist-showcase-next:hover { transform: translate(2px, -50%); }

/* Product feedback and social navigation */
.feedback-center {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 10000;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 36px));
  pointer-events: none;
}

.feedback-toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  border: 1px solid rgba(218, 177, 86, 0.38);
  border-radius: 7px;
  background: rgba(35, 8, 11, 0.97);
  box-shadow: 0 18px 42px rgba(8, 0, 2, 0.42);
  padding: 11px 13px;
  color: #fff7e9;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: auto;
}

.feedback-toast.is-visible { opacity: 1; transform: translateY(0); }
.feedback-toast.is-error { border-color: rgba(226, 92, 84, 0.72); }
.feedback-toast.is-info { border-color: rgba(168, 188, 207, 0.62); }
.feedback-toast-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(214, 176, 81, 0.16); color: #f2cf76; font-weight: 800; }
.feedback-toast.is-success .feedback-toast-icon { color: #8ce2ae; background: rgba(42, 139, 91, 0.2); }
.feedback-toast.is-error .feedback-toast-icon { color: #ffaaa3; background: rgba(180, 43, 43, 0.22); }
.feedback-toast.is-loading .feedback-toast-icon { border: 2px solid rgba(242, 207, 118, 0.22); border-top-color: #f2cf76; background: transparent; animation: feedback-spin 800ms linear infinite; }
.feedback-toast-copy { font-size: 0.86rem; font-weight: 700; line-height: 1.35; }
.feedback-toast button { border: 0; background: transparent; color: #f2cf76; padding: 7px 5px; font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; }
@keyframes feedback-spin { to { transform: rotate(360deg); } }

.notification-menu-trigger { position: relative; display: grid !important; place-items: center; width: 38px; min-width: 38px; padding-inline: 0 !important; }
.notification-menu-trigger::after { display: none !important; }
.notification-menu-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; border: 2px solid #300508; border-radius: 999px; background: #c93432; color: #fff; font-size: 0.58rem; line-height: 12px; text-align: center; }
.site-message-link { position: relative; display: grid; width: 38px; min-width: 38px; min-height: 74px; place-items: center; border-bottom: 2px solid transparent; color: #d9cbbd; text-decoration: none; }
.site-message-link:hover, .site-message-link:focus-visible, .site-message-link.is-current { border-bottom-color: var(--gold); color: #fff8e8; outline: 0; }
.site-message-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.message-badge { position: absolute; top: 13px; right: 0; min-width: 16px; height: 16px; border: 2px solid #300508; border-radius: 999px; background: #c93432; color: #fff; font-size: 0.58rem; font-weight: 800; line-height: 12px; text-align: center; }
.signed-header .notification-panel { width: min(330px, calc(100vw - 24px)); padding: 0; }
.notification-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(181, 143, 58, 0.24); padding: 13px 14px; }
.notification-panel-heading strong { font-family: var(--font-display); font-size: 1.08rem; }
.notification-panel-heading button { border: 0; background: transparent; color: #8d201f; font: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer; }
.notification-list { display: grid; max-height: min(380px, 56vh); overflow: auto; }
.notification-item { display: block; border-bottom: 1px solid rgba(111, 72, 45, 0.12); padding: 12px 14px 12px 28px; color: #542023; font-size: 0.78rem; line-height: 1.4; text-decoration: none; position: relative; }
.notification-item.is-unread::before { content: ""; position: absolute; left: 13px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: #c93432; }
.notification-item:hover, .notification-item:focus-visible { background: #f3e8d8; }
.notification-empty { margin: 0; padding: 22px 14px; color: #766863; font-size: 0.78rem; text-align: center; }

.toolbar-tools-divider { display: block; height: 1px; margin: 4px 0; background: rgba(151, 103, 39, 0.22); }
.toolbar-tools-popover > .danger-button { color: #a22d2d; }

.friend-request-section { margin-top: 18px; border-top: 1px solid rgba(180, 137, 54, 0.24); padding-top: 16px; }
.friend-request-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.friend-request-heading h3, .friend-search-heading { margin: 0; color: #f8eedc; font-family: var(--font-display); font-size: 1rem; }
.friend-request-count { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: rgba(203, 50, 48, 0.9); color: #fff; font-size: 0.7rem; font-weight: 800; }
.friend-request-list { display: grid; gap: 8px; }
.friend-request-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid rgba(214, 177, 86, 0.2); border-radius: 7px; background: rgba(255, 248, 234, 0.07); padding: 9px; }
.friend-request-row.is-targeted { border-color: rgba(218, 177, 86, 0.78); background: rgba(218, 177, 86, 0.14); box-shadow: 0 0 0 3px rgba(218, 177, 86, 0.09); }
.friend-request-row > div { display: grid; gap: 2px; min-width: 0; }
.friend-request-row strong { color: #fff8ea; font-size: 0.8rem; }
.friend-request-row small { color: #c9b7ae; font-size: 0.68rem; }
.friend-request-actions { display: flex !important; gap: 5px !important; }
.friend-request-actions button { min-height: 30px; border: 1px solid rgba(218, 177, 86, 0.32); border-radius: 5px; background: rgba(255, 249, 238, 0.95); padding: 5px 8px; color: #65161a; font: inherit; font-size: 0.68rem; font-weight: 800; cursor: pointer; }
.friend-request-actions button:last-child { background: transparent; color: #d2c0b8; }
.friend-request-empty { margin: 0; padding: 10px 0; color: #bba9a2; font-size: 0.75rem; }
.friend-search-heading { margin-top: 18px; margin-bottom: 8px; }

.profile-link-inline, .film-link-inline, .lobby-mention { color: inherit; text-decoration: none; }
.profile-link-inline:hover, .profile-link-inline:focus-visible, .lobby-mention:hover, .lobby-mention:focus-visible { color: #f2cf76; text-decoration: underline; text-underline-offset: 3px; }
.lobby-film-note.film-link-inline { display: block; }
.demo-profile-avatar { background-image: url("kino-keep-friend-avatars.png") !important; background-size: 300% 200% !important; background-position: var(--demo-avatar-position) !important; }

.film-page { background: #210508; }
.film-page .app-shell { min-height: 100vh; background: radial-gradient(circle at 70% 18%, rgba(108, 26, 31, 0.3), transparent 38%), linear-gradient(180deg, #260609, #170305); }
.film-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 52px 0 80px; }
.film-back-link { display: inline-flex; margin-bottom: 20px; color: #d7bd82; font-size: 0.78rem; font-weight: 800; text-decoration: none; }
.film-back-link::before { content: "‹"; margin-right: 7px; font-size: 1.05rem; line-height: 0.9; }
.film-detail { display: grid; grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); gap: clamp(34px, 6vw, 78px); align-items: center; overflow: hidden; border: 1px solid rgba(218, 177, 86, 0.2); border-radius: 8px; background: linear-gradient(135deg, rgba(76, 20, 25, 0.88), rgba(37, 7, 11, 0.96)); box-shadow: 0 28px 70px rgba(5, 0, 2, 0.38); padding: clamp(24px, 4vw, 52px); position: relative; }
.film-detail::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,0.035), transparent 34%); }
.film-detail > * { position: relative; z-index: 1; }
.film-detail-poster { aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid rgba(230, 193, 104, 0.5); border-radius: 6px; background: #110306; box-shadow: 0 22px 42px rgba(0, 0, 0, 0.38); }
.film-detail-poster img { width: 100%; height: 100%; object-fit: contain; background: #110306; }
.film-detail-poster span { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(244, 220, 163, 0.4); font-family: var(--font-display); font-size: 3rem; }
.film-detail-copy { display: grid; justify-items: start; gap: 15px; }
.film-detail-copy h1 { max-width: 780px; margin: 0; color: #fff8ea; font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5.7rem); line-height: 0.94; letter-spacing: 0; }
.film-detail-meta { margin: 0; color: #e1c98f; font-size: 0.9rem; font-weight: 700; }
.film-detail-notes { max-width: 670px; margin: 5px 0 8px; color: #ddd0ca; font-size: 1rem; line-height: 1.75; }
.film-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.film-detail-actions a { text-decoration: none; }
.film-not-found { width: min(680px, 100%); margin: 80px auto; }

@media (max-width: 720px) {
  .film-shell { width: min(100% - 28px, 1120px); padding-top: 28px; }
  .film-detail { grid-template-columns: 1fr; padding: 22px; }
  .film-detail-poster { width: min(280px, 82vw); margin: 0 auto; }
  .film-detail-copy { justify-items: center; text-align: center; }
  .film-detail-actions { justify-content: center; }
}

[hidden] { display: none !important; }

@media (max-width: 640px) {
  .feedback-center { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
  .feedback-toast { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .notification-menu-trigger { width: 34px; min-width: 34px; }
}

.film-interlude { position: relative; min-height: clamp(240px, 31vw, 430px); margin: 0; overflow: hidden; isolation: isolate; }
.film-interlude::before { display: none; }
.film-interlude-image { position: absolute; top: 50%; left: 50%; z-index: 0; width: auto; height: auto; max-width: min(1280px, 96vw); max-height: 100%; transform: translate(-50%, -50%); object-fit: initial; filter: none; }
.film-interlude-copy { position: relative; z-index: 2; width: min(1180px, calc(100% - 48px)); margin: 0 auto; min-height: inherit; display: flex; align-items: flex-end; padding-bottom: 34px; }
.film-interlude-copy span { color: #fff7e9; font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 2.55rem); font-weight: 700; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.66); }

.story-section { padding: clamp(80px, 12vw, 150px) 0; }
.story-section h2,
.final-cta h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); max-width: 820px; }
.story-heading { max-width: 790px; }
.personal-layout { display: grid; grid-template-columns: minmax(260px, 0.7fr) minmax(520px, 1.3fr); gap: 55px; align-items: end; margin-top: 42px; }
.personal-copy > p,
.social-intro > p,
.shared-copy > p { margin: 0; color: #f8ead4; font-size: 1.08rem; line-height: 1.65; }
.feature-list { display: grid; gap: 12px; margin: 28px 0; padding: 0; color: #fff7e9; list-style: none; font-weight: 700; line-height: 1.4; }
.feature-list li { position: relative; padding-left: 24px; }
.feature-list li::before { content: ""; position: absolute; top: 0.5em; left: 0; width: 9px; height: 9px; border: 2px solid #f5cd70; border-radius: 50%; }
.text-link { border: 0; padding: 0; background: transparent; color: #f4d178; font: inherit; font-weight: 900; cursor: pointer; }
.memory-strip { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.memory-strip figure { position: relative; min-height: 175px; margin: 0; overflow: hidden; border: 1px solid rgba(242, 209, 134, 0.38); border-radius: 7px; background: #210306; }
.memory-strip figure:first-child { grid-row: span 2; min-height: 362px; }
.memory-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.memory-strip figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 26px 12px 11px; background: linear-gradient(transparent, rgba(18, 0, 4, 0.9)); color: #fff9ee; font-size: 0.8rem; font-weight: 900; }

.social-section { display: grid; grid-template-columns: minmax(270px, 0.74fr) minmax(520px, 1.26fr); gap: 58px; align-items: center; }
.social-intro { max-width: 430px; }
.social-intro h2 { margin-bottom: 24px; }
.social-link { margin-top: 28px; }
.product-showcase-lobby { width: min(100%, 650px); justify-self: end; }
.product-showcase-lobby .product-browser-frame { aspect-ratio: 403 / 464; }
.community-feed-frame { background: #2a0408; }
.community-feed-capture { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; }

.shared-section { display: grid; grid-template-columns: minmax(300px, 0.92fr) minmax(320px, 1.08fr); gap: 72px; align-items: center; }
.shared-list-visual { position: relative; min-height: 385px; }
.shared-list-card { position: absolute; width: min(83%, 360px); display: grid; gap: 8px; border: 1px solid rgba(245, 216, 149, 0.55); border-radius: 7px; background: linear-gradient(150deg, rgba(255, 249, 237, 0.98), rgba(225, 205, 158, 0.97)); box-shadow: 0 20px 38px rgba(5, 0, 2, 0.35); padding: 24px; color: #4a0b10; transform: rotate(-6deg); }
.shared-list-card span { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.shared-list-card small { color: #7b5a35; font-weight: 900; }
.shared-list-card:nth-child(1) { top: 14px; left: 7%; }
.shared-list-card:nth-child(2) { top: 130px; left: 17%; z-index: 2; transform: rotate(3deg); }
.shared-list-card:nth-child(3) { top: 247px; left: 6%; transform: rotate(-2deg); }
.shared-copy h2 { margin-bottom: 25px; }
.shared-copy .public-primary { margin-top: 30px; }

.final-cta { display: flex; justify-content: space-between; gap: 36px; align-items: center; border-top: 1px solid rgba(244, 207, 116, 0.42); padding: clamp(64px, 8vw, 104px) 0; }
.final-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }

.public-footer { display: grid; grid-template-columns: 1.2fr 1.8fr; gap: 42px; border-top: 1px solid rgba(244, 207, 116, 0.28); padding: 50px 0 26px; }
.footer-brand img { width: 170px; height: auto; }
.footer-brand p { margin: 14px 0 0; color: rgba(255, 238, 204, 0.7); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-links section { display: grid; align-content: start; gap: 10px; }
.footer-links h2 { margin: 0 0 4px; color: #f2d17b; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-links a,
.footer-link { color: #fff3df; font-size: 0.9rem; text-align: left; text-decoration: none; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(244, 207, 116, 0.18); padding-top: 22px; color: rgba(255, 238, 204, 0.62); font-size: 0.82rem; }

.site-legal-footer {
  width: 100%;
  margin-top: auto;
  border-top: 1px solid rgba(244, 207, 116, 0.2);
  background: #2b0508;
  padding: 18px clamp(20px, 5vw, 72px);
  color: rgba(255, 238, 204, 0.68);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-align: center;
}
.site-legal-footer a { color: #f8d579; text-decoration: none; }
.site-legal-footer a:hover, .site-legal-footer a:focus-visible { text-decoration: underline; }

.legal-notice-page { min-height: 100dvh; background: #210306; color: #fff5e6; }
.legal-notice-shell { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: clamp(34px, 8vw, 90px) 0; }
.legal-notice-back { color: #f8d579; font-weight: 800; text-decoration: none; }
.legal-notice { margin-top: 30px; border: 1px solid rgba(246, 217, 141, 0.3); border-radius: 8px; background: rgba(78, 19, 25, 0.7); padding: clamp(28px, 5vw, 54px); }
.legal-notice > span { color: #f8d579; font-size: 0.76rem; font-weight: 900; }
.legal-notice h1 { margin: 10px 0 20px; font-family: var(--font-brand); font-size: clamp(2.3rem, 7vw, 4.6rem); line-height: 0.98; }
.legal-notice h2 { margin: 30px 0 10px; color: #f8d579; font-size: 1rem; }
.legal-notice p, .legal-notice li { color: rgba(255, 245, 230, 0.82); line-height: 1.7; }
.legal-notice ul { margin: 0; padding-left: 22px; }
.legal-notice-action { display: inline-flex; margin-top: 30px; border: 1px solid #f8d579; border-radius: 6px; background: #f8d579; color: #3d1116; padding: 12px 16px; font-weight: 900; text-decoration: none; }

.private-preview-page { min-height: 100dvh; background: #210306; color: #fff5e6; }
.private-preview-shell { display: grid; min-height: 100dvh; place-items: center; padding: 28px; }
.private-preview-message { width: min(620px, 100%); border: 1px solid rgba(246, 217, 141, 0.3); border-radius: 8px; background: rgba(78, 19, 25, 0.72); padding: clamp(34px, 8vw, 76px); text-align: center; }
.private-preview-message img { width: min(230px, 72%); height: auto; }
.private-preview-message > span { display: block; margin-top: 36px; color: #f8d579; font-size: 0.76rem; font-weight: 900; }
.private-preview-message h1 { margin: 12px 0; font-family: var(--font-brand); font-size: clamp(2.25rem, 7vw, 4.7rem); line-height: 0.98; }
.private-preview-message p { margin: 0; color: rgba(255, 245, 230, 0.76); }

.wikidata-import-dialog { width: min(620px, calc(100% - 28px)); }
.wikidata-import-note { margin: 0 0 18px; color: rgba(255, 245, 230, 0.72); line-height: 1.55; }
.wikidata-import-status { min-height: 24px; margin-top: 14px; color: rgba(255, 245, 230, 0.74); font-size: 0.86rem; }
.wikidata-import-results { display: grid; gap: 8px; max-height: min(42dvh, 340px); overflow: auto; margin-top: 12px; }
.wikidata-import-result { display: grid; gap: 3px; border: 1px solid rgba(246, 217, 141, 0.24); border-radius: 6px; background: rgba(44, 5, 9, 0.46); color: #fff5e6; padding: 13px 14px; text-align: left; cursor: pointer; }
.wikidata-import-result:hover, .wikidata-import-result:focus-visible { border-color: #f8d579; background: rgba(88, 26, 32, 0.76); }
.wikidata-import-result span { color: rgba(255, 245, 230, 0.7); font-size: 0.82rem; }
.tmdb-background-dialog { width: min(900px, calc(100% - 28px)); }
.tmdb-background-dialog .compact-dialog-card { max-height: min(86dvh, 760px); overflow: auto; }
.tmdb-background-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tmdb-background-results.is-poster-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tmdb-background-choice { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(246, 217, 141, 0.26); border-radius: 6px; background: #210407; cursor: pointer; padding: 0; }
.tmdb-background-results.is-poster-grid .tmdb-background-choice { aspect-ratio: 2 / 3; }
.tmdb-background-choice:hover, .tmdb-background-choice:focus-visible { border-color: #f8d579; box-shadow: 0 0 0 3px rgba(248, 213, 121, 0.16); outline: 0; }
.tmdb-background-choice:disabled { cursor: wait; opacity: 0.58; }
.tmdb-background-choice img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .tmdb-background-results, .tmdb-background-results.is-poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.public-homepage :is(a, button, input):focus-visible { outline: 3px solid #f8d579; outline-offset: 3px; }

@media (max-width: 960px) {
  .public-header-inner,
  .public-hero,
  .story-section,
  .final-cta,
  .public-footer,
  .film-interlude-copy { width: min(100% - 32px, 740px); }
  .public-hero,
  .personal-layout,
  .social-section,
  .shared-section { grid-template-columns: 1fr; }
  .public-hero { min-height: 0; padding: 60px 0 88px; }
  .product-showcase { max-width: 700px; }
  .personal-layout { gap: 36px; }
  .social-section { gap: 40px; }
  .social-intro { max-width: 620px; }
  .product-showcase-lobby { justify-self: start; width: min(100%, 620px); }
}

@media (max-width: 720px) {
  .public-homepage main { width: calc(100% - 26px); }
  .public-header-inner { min-height: 68px; position: relative; }
  .public-brand { width: 165px; }
  .public-menu-toggle { width: 42px; height: 42px; display: grid; align-content: center; justify-items: center; gap: 5px; border: 1px solid rgba(245, 216, 149, 0.52); border-radius: 5px; background: rgba(30, 1, 5, 0.46); cursor: pointer; }
  .public-menu-toggle span:not(.visually-hidden) { display: block; width: 18px; height: 2px; background: #f7dfaa; }
  .public-navigation { display: none; position: absolute; top: calc(100% - 4px); right: 0; left: 0; grid-template-columns: 1fr; gap: 2px; border: 1px solid rgba(245, 216, 149, 0.34); border-radius: 6px; background: #3c060b; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42); padding: 10px; }
  .public-navigation.is-open { display: grid; }
  .public-navigation a,
  .public-navigation button { width: 100%; padding: 12px 10px; text-align: left; }
  .public-get-started { text-align: center !important; }
  .public-hero h1 { font-size: clamp(4.3rem, 20vw, 6rem); }
  .public-actions,
  .public-actions > *,
  .final-cta-actions,
  .final-cta-actions > * { width: 100%; }
  .product-browser-frame { aspect-ratio: 1 / 1; }
  .watchlist-showcase-frame { aspect-ratio: 1330 / 1035; }
  .watchlist-showcase-arrow { width: 24px; height: 40px; }
  .watchlist-showcase-previous { left: -20px; }
  .watchlist-showcase-next { right: -20px; }
  .product-showcase-lobby .product-browser-frame { aspect-ratio: 403 / 464; }
  .film-interlude { min-height: clamp(210px, 58vw, 280px); }
  .film-interlude-image { width: auto; height: auto; max-width: 100vw; max-height: 100%; }
  .memory-strip { grid-template-columns: 1fr 1fr; }
  .memory-strip figure:first-child { grid-column: 1 / -1; grid-row: auto; min-height: 230px; }
  .shared-list-visual { min-height: 330px; }
  .final-cta,
  .public-footer { grid-template-columns: 1fr; }
  .final-cta { flex-direction: column; align-items: stretch; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 430px) {
  .public-header-inner,
  .public-hero,
  .story-section,
  .final-cta,
  .public-footer,
  .film-interlude-copy { width: min(100% - 26px, 740px); }
  .public-hero { padding-top: 42px; }
  .story-section { padding: 72px 0; }
  .public-hero h1 { font-size: 4.25rem; }
  .story-section h2,
  .final-cta h2 { font-size: 2.5rem; }
  .memory-strip { grid-template-columns: 1fr; }
  .memory-strip figure { min-height: 210px; }
  .memory-strip figure:first-child { min-height: 245px; }
  .shared-list-card { width: 91%; }
  .footer-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .public-header { backdrop-filter: none; }
}

.home-nav {
  position: relative;
  isolation: isolate;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0;
}

.home-nav > * {
  position: relative;
  z-index: 1;
}

.home-brand {
  display: block;
  width: 230px;
}

.home-brand img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3));
}

.home-nav nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: end;
}

.home-nav a,
.home-nav button {
  color: #fff8ed;
  font-weight: 900;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.home-nav nav a,
.home-nav nav button {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  padding: 10px 14px;
}

.home-nav .nav-sign-in {
  border-color: rgba(255, 248, 237, 0.7);
  background: rgba(255, 253, 248, 0.96);
  color: var(--accent-dark);
  text-shadow: none;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 44px;
  align-items: center;
  width: min(1180px, calc(100% - 40px));
  min-height: calc(100vh - 118px);
  margin: 0 auto;
  padding: 34px 0 72px;
}

.home-hero-copy {
  color: #fff8ed;
}

.home-kicker,
.home-section-heading span,
.home-split span {
  display: block;
  color: #ffe0b0;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-hero h1 {
  max-width: 820px;
  margin: 10px 0 18px;
  color: #fff8ed;
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 8.2rem);
  line-height: 0.86;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
}

.home-hero p {
  max-width: 640px;
  margin: 0;
  color: #fff3df;
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  line-height: 1.55;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.home-primary-link,
.home-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 0 20px;
  font-weight: 900;
  text-decoration: none;
}

.home-primary-link {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 15px 30px rgba(30, 0, 0, 0.3);
}

.home-secondary-link {
  border: 1px solid rgba(255, 248, 237, 0.58);
  background: rgba(255, 253, 248, 0.12);
  color: #fff8ed;
}

.home-preview {
  border: 1px solid rgba(255, 248, 237, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(238, 219, 185, 0.92));
  box-shadow: 0 26px 70px rgba(10, 0, 0, 0.38);
  padding: 14px;
}

.preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.preview-toolbar span {
  border-radius: 999px;
  background: #ffffff;
  color: var(--accent-dark);
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 900;
}

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

.preview-list article {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(152, 113, 54, 0.35);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.9);
  padding: 10px;
}

.preview-poster {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 237, 0.42);
}

.preview-poster.red {
  background: linear-gradient(135deg, #6e0708, #e04834);
}

.preview-poster.gold {
  background: linear-gradient(135deg, #442a06, #e1ac35);
}

.preview-poster.blue {
  background: linear-gradient(135deg, #0d2534, #276a8f);
}

.preview-list strong {
  color: var(--accent-dark);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.preview-list p {
  margin: 4px 0 0;
  color: var(--ink);
  font-weight: 900;
}

.home-band,
.home-split {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 40px;
  color: #fff8ed;
}

.home-section-heading {
  display: grid;
  gap: 8px;
  max-width: 740px;
  margin-bottom: 20px;
}

.home-section-heading h2,
.home-split h2 {
  margin: 0;
  color: #fff8ed;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

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

.feature-grid article {
  min-height: 188px;
  border: 1px solid rgba(255, 248, 237, 0.24);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  color: var(--ink);
  box-shadow: 0 18px 46px rgba(13, 0, 0, 0.24);
  padding: 18px;
}

.feature-grid h3 {
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-size: 1.12rem;
}

.feature-grid p,
.home-split p {
  margin: 0;
  line-height: 1.55;
}

.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr) auto;
  gap: 22px;
  align-items: center;
  border-top: 1px solid rgba(255, 248, 237, 0.24);
  padding: 32px 0 56px;
}

.home-split p {
  color: #fff3df;
}

.sign-in-dialog {
  width: min(430px, calc(100vw - 28px));
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

.sign-in-dialog::backdrop {
  background: rgba(12, 0, 0, 0.58);
}

.sign-in-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 248, 237, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(247, 238, 224, 0.98));
  box-shadow: 0 28px 80px rgba(10, 0, 0, 0.42);
  padding: 16px;
}

.sign-in-card h2 {
  margin: 0;
  color: var(--accent-dark);
  font-size: 1.32rem;
}

.sign-in-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.sign-in-card label {
  display: grid;
  gap: 5px;
}

.sign-in-card label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .home-nav,
  .home-hero,
  .home-band,
  .home-split {
    width: min(100% - 28px, 680px);
  }

  .home-nav {
    align-items: flex-start;
  }

  .home-brand {
    width: 190px;
  }

  .home-hero,
  .home-split,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .home-hero {
    min-height: 0;
    padding-top: 20px;
  }

  .home-preview {
    max-width: 520px;
  }

  .hero-bar,
  .movie-form,
  .library-tools {
    grid-template-columns: 1fr;
  }

  .year-tabs {
    overflow-x: auto;
    padding: 15px 12px;
    scrollbar-width: thin;
  }

  .form-actions,
  .watchlist-tabs {
    justify-content: start;
  }

  .site-menu-bar {
    width: 100%;
    flex-wrap: wrap;
    justify-content: end;
  }

  .year-tabs {
    justify-content: center;
  }

  .site-menu-panel {
    right: auto;
    left: 0;
  }

  .site-menu-panel::before {
    right: auto;
    left: 26px;
  }

  .poster-picker {
    grid-template-columns: minmax(130px, 180px) 1fr;
    align-items: start;
  }

  .account-section {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 600px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-width: 320px;
  }

  .home-nav {
    display: grid;
    gap: 14px;
  }

  .crop-controls {
    grid-template-columns: 1fr;
  }

  .crop-actions {
    justify-content: stretch;
  }

  .crop-actions button {
    flex: 1 1 auto;
  }

  .home-nav nav {
    justify-content: start;
  }

  .home-hero h1 {
    font-size: 4rem;
  }

  .home-hero-actions,
  .home-primary-link,
  .home-secondary-link {
    width: 100%;
  }

  .home-split .home-primary-link {
    width: 100%;
  }

  .app-shell {
    padding: 0 max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  .topbar {
    padding: 0;
  }

  .account-shell {
    padding: 14px;
  }

  .account-topbar {
    align-items: flex-start;
    padding: 14px;
  }

  .account-nav {
    display: grid;
    justify-items: end;
  }

  .account-nav .site-nav-button {
    min-width: 0;
  }

  .profile-photo-editor {
    align-items: flex-start;
  }

  .account-save-row {
    justify-content: space-between;
  }

  .site-menu {
    min-width: 0;
  }

  .site-menu-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0;
    justify-content: stretch;
  }

  .site-menu summary {
    min-width: 100%;
    min-height: 52px;
    padding: 0 10px;
    font-size: 0.72rem;
  }

  .site-nav-button {
    min-height: 52px;
    padding: 0 10px;
    font-size: 0.72rem;
  }

  .profile-link {
    width: 100%;
    height: 52px;
  }

  .site-menu:nth-child(even) .site-menu-panel {
    right: 0;
    left: auto;
  }

  .site-menu:nth-child(even) .site-menu-panel::before {
    right: 26px;
    left: auto;
  }

  .site-menu-panel,
  .watchlists-menu .site-menu-panel,
  .friends-menu .site-menu-panel {
    width: min(320px, calc(100vw - 28px));
  }

  .watchlist-menu-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px;
    padding-block: 2px;
  }

  .watchlist-menu-row > .watchlist-tab {
    grid-column: 1 / -1;
  }

  .site-menu-panel.where-to-watch-panel {
    gap: 2px;
  }

  .where-to-watch-panel .provider-pill {
    height: 32px;
    min-height: 32px;
  }

  .poster-picker,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .poster-preview {
    width: min(190px, 100%);
    justify-self: center;
  }

  .poster-controls {
    gap: 10px;
  }

  .media-type-toggle,
  .also-add-options {
    gap: 7px;
  }

  .media-type-toggle label,
  .also-add-options label {
    flex: 1 1 140px;
    justify-content: center;
  }

  .form-actions,
  .compact-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .form-actions .primary-button:only-child {
    grid-column: 1 / -1;
  }

  .movie-dialog,
  .poster-crop-dialog,
  .compact-dialog,
  .recovery-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .movie-dialog .entry-panel,
  .crop-editor,
  .compact-dialog-card {
    padding: 14px;
  }

  .crop-stage-shell {
    padding: 12px;
  }

  .crop-stage {
    width: min(320px, calc(100vw - 72px));
  }

  .library-tools {
    gap: 10px;
    padding: 10px;
  }

  .search-wrap {
    min-height: 46px;
  }

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

  .segment {
    min-height: 42px;
  }

  .library-tools select,
  #reset-order {
    min-height: 44px;
  }

  .movie-grid,
  body.pref-compact-cards .movie-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .movie-card:hover {
    transform: none;
  }

  .recovery-point {
    grid-template-columns: 1fr;
  }

  .recovery-point .secondary-button {
    width: 100%;
  }

  .segmented {
    flex-wrap: wrap;
    align-items: stretch;
    border-bottom: 0;
    padding-top: 0;
  }

  .segment {
    flex: 1 1 calc(50% - 4px);
    border: 1px solid rgba(126, 88, 34, 0.55);
    border-radius: 7px;
    padding-bottom: 0;
  }

  .segment.active {
    min-height: 39px;
  }

}







/* Kino Keep media desk */
.movie-dialog .entry-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 237, 0.2);
  background: #583637;
  box-shadow: 0 30px 90px rgba(16, 0, 2, 0.72), inset 0 1px 0 rgba(255, 248, 237, 0.08);
  padding: 22px;
}

.movie-dialog .entry-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 248, 237, 0.05), transparent 24%),
    linear-gradient(90deg, rgba(255, 248, 237, 0.025), transparent 38%, rgba(255, 248, 237, 0.018));
  opacity: 1;
}

.movie-dialog .entry-panel > * {
  position: relative;
  z-index: 1;
}

.movie-dialog .dialog-header {
  margin: -22px -22px 18px;
  border: 1px solid #070707;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, #e7dcc6 0 9px, transparent 9px 15px) top 5px left 8px / calc(100% - 16px) 5px no-repeat,
    repeating-linear-gradient(90deg, #e7dcc6 0 9px, transparent 9px 15px) bottom 5px left 8px / calc(100% - 16px) 5px no-repeat,
    linear-gradient(180deg, #171717, #080808 52%, #151515);
  box-shadow: 0 0 0 1px rgba(225, 172, 53, 0.48), 0 12px 26px rgba(0, 0, 0, 0.3);
  padding: 15px 12px;
}

.movie-dialog .dialog-header h2,
.movie-dialog .media-type-toggle legend,
.movie-dialog .also-add-field legend,
.movie-dialog .form-grid > label > span,
.movie-dialog .poster-source-note {
  font-family: var(--font-display);
}

.movie-dialog .dialog-header h2 {
  display: flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(225, 172, 53, 0.45);
  border-radius: 5px;
  background: #f2eadc;
  color: #fff8e9;
  font-size: 1.65rem;
  letter-spacing: 0;
  padding: 0 12px;
  color: #393532;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 3px 7px rgba(0, 0, 0, 0.28);
}

.movie-dialog .dialog-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.entry-view-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(225, 172, 53, 0.38);
  border-radius: 5px;
  background: rgba(8, 0, 1, 0.5);
  padding: 3px;
}

.entry-view-tab {
  min-height: 30px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: rgba(255, 247, 226, 0.72);
  padding: 0 10px;
  font: 800 0.76rem/1 var(--font-ui);
}

.entry-view-tab.is-active {
  background: #f2eadc;
  color: #4b1113;
}

.entry-view-tab:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.scrapbook-panel {
  min-height: 430px;
}

.scrapbook-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.scrapbook-toolbar .primary-button,
.scrapbook-toolbar .secondary-button {
  min-height: 36px;
}

.scrapbook-toolbar .secondary-button.is-active {
  border-color: #f2cd6d;
  background: #f2eadc;
  color: #531114;
}

.scrapbook-add {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

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

.memory-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(225, 172, 53, 0.48);
  border-radius: 4px;
  background: #250507;
  cursor: default;
}

.memory-tile.is-moveable {
  cursor: grab;
}

.memory-tile.is-moving {
  opacity: 0.45;
}

.memory-tile.is-selected {
  border-color: #fff0bc;
  box-shadow: 0 0 0 3px rgba(233, 198, 109, 0.45);
}

.memory-tile img,
.memory-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-video-badge {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255, 250, 236, 0.72);
  border-radius: 50%;
  background: rgba(21, 0, 2, 0.72);
  color: #fff8e9;
  font-size: 0.68rem;
}

.scrapbook-empty {
  margin: 42px 0;
  color: rgba(255, 248, 233, 0.75);
  text-align: center;
  font: 700 0.95rem/1.4 var(--font-ui);
}

@media (max-width: 680px) {
  .movie-dialog .dialog-header-actions {
    gap: 8px;
  }

  .entry-view-tab {
    padding: 0 7px;
    font-size: 0.7rem;
  }

  .scrapbook-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dialog-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.movie-dialog .header-media-type-toggle {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
  margin: 0;
  padding: 0;
}

.movie-dialog .header-media-type-toggle label {
  min-height: 28px;
  border-color: rgba(225, 172, 53, 0.42);
  border-radius: 4px;
  background: transparent;
  color: #d9cbbd;
  padding: 0 8px;
  font-size: 0.72rem;
}

.movie-dialog .header-media-type-toggle label:has(input:checked) {
  border-color: rgba(225, 172, 53, 0.7);
  background: rgba(255, 248, 232, 0.12);
  color: #fff8e8;
  box-shadow: none;
}

.movie-dialog .header-media-type-toggle input {
  accent-color: #e9c66d;
}

.movie-dialog .movie-form {
  gap: 18px;
}

.movie-dialog .media-type-toggle legend,
.movie-dialog .also-add-field legend,
.movie-dialog .form-grid > label > span {
  color: #f4e8dc;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.movie-dialog .media-type-toggle label,
.movie-dialog .also-add-options label {
  border-color: rgba(225, 172, 53, 0.72);
  background: #fff8e9;
  color: #591012;
}

.movie-dialog .media-type-toggle label:has(input:checked) {
  border-color: #f3c64b;
  background: #e9c66d;
  box-shadow: 0 4px 14px rgba(15, 0, 2, 0.28);
}

.movie-dialog .poster-preview {
  border: 1px dashed rgba(255, 248, 233, 0.46);
  border-radius: 6px;
  background:
    linear-gradient(155deg, rgba(255, 248, 233, 0.035), transparent 46%),
    #482b2d;
  color: #fff8e9;
  box-shadow: inset 0 1px 0 rgba(255, 248, 233, 0.045);
  padding: 20px;
}

.movie-dialog .poster-preview span {
  max-width: 15ch;
  color: rgba(255, 250, 240, 0.72);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.35;
}

.movie-dialog .poster-preview.is-dragging,
.movie-dialog .poster-preview.is-focused {
  border-color: #e9c66d;
  box-shadow: 0 0 0 4px rgba(233, 198, 109, 0.24), inset 0 1px 0 rgba(255, 248, 233, 0.05);
  outline-color: rgba(255, 242, 189, 0.75);
}

.movie-dialog .poster-preview.has-image {
  border-style: solid;
  border-color: rgba(225, 172, 53, 0.58);
  box-shadow: 0 14px 28px rgba(18, 0, 2, 0.24);
}

.movie-dialog .poster-controls {
  gap: 8px;
}

.movie-dialog .poster-artwork-actions {
  display: flex;
  width: 100%;
  align-items: stretch;
  gap: 7px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.custom-artwork-button {
  display: inline-flex;
  width: max-content;
  min-height: 38px;
  align-items: center;
  border: 1px solid rgba(255, 248, 233, 0.42);
  border-radius: 6px;
  background: #fff8e9;
  color: #651315;
  padding: 0 12px;
  font-weight: 900;
  cursor: pointer;
}

.custom-artwork-button:hover {
  background: #f4dfaa;
}

.movie-dialog .poster-artwork-actions .custom-artwork-button,
.movie-dialog .poster-artwork-actions .edit-poster-crop {
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
}

.movie-dialog .poster-artwork-actions .custom-artwork-button {
  flex: 1 1 auto;
}

.movie-dialog .poster-artwork-actions .edit-poster-crop {
  flex: 0 1 88px;
  width: auto;
  min-width: 64px;
  border-color: rgba(255, 248, 233, 0.58);
  background: #fff8e9;
  color: #651315;
  font-weight: 900;
}

.movie-dialog .poster-download-button {
  position: relative;
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #d44a45;
  border-radius: 6px;
  background: #bd302f;
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fffaf2;
  padding: 0;
}

.movie-dialog .poster-download-button:hover {
  border-color: #ed6a63;
  background: #cf3d38;
}

.movie-dialog .poster-download-button span {
  position: relative;
  display: grid;
  width: 18px;
  height: 20px;
  place-items: start center;
  color: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 0.86;
}

.movie-dialog .poster-download-button span::after {
  position: absolute;
  right: 1px;
  bottom: 0;
  left: 1px;
  height: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
}

.movie-dialog .edit-poster-crop {
  border-color: rgba(255, 248, 233, 0.34);
  background: rgba(35, 16, 18, 0.12);
  color: #fff8e9;
}

.movie-dialog .form-grid input,
.movie-dialog .form-grid select,
.movie-dialog .form-grid textarea {
  border-color: rgba(225, 172, 53, 0.56);
  background: #fffaf0;
}

.movie-dialog .also-add-field {
  border-color: rgba(255, 248, 233, 0.24);
  background: rgba(34, 18, 20, 0.18);
}

.movie-dialog .form-actions .primary-button {
  border-color: rgba(225, 172, 53, 0.45);
  background: #f2eadc;
  color: #393532;
  box-shadow: 0 8px 18px rgba(20, 0, 2, 0.3);
}

.movie-dialog .film-command {
  min-height: 34px;
  border: 1px solid rgba(225, 172, 53, 0.45);
  border-radius: 5px;
  background: #f2eadc;
  color: #393532;
  padding: 0 12px;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 3px 7px rgba(0, 0, 0, 0.28);
}

.movie-dialog .dialog-header .film-command {
  min-width: 68px;
}

.movie-dialog .film-command:hover {
  border-color: #f0bd4e;
  background: #fff8e9;
  filter: none;
}

@media (max-width: 680px) {
  .movie-dialog .entry-panel {
    padding: 16px;
  }

  .movie-dialog .dialog-header {
    margin: -16px -16px 16px;
    padding: 15px 10px;
  }

  .movie-dialog .dialog-header h2 {
    font-size: 1.45rem;
  }
}

/* Keep the media desk header quiet and consistent with the site navigation. */
.movie-dialog .dialog-header {
  border: 0;
  border-bottom: 1px solid rgba(225, 172, 53, 0.34);
  border-radius: 0;
  background: linear-gradient(180deg, #380e13, #2a090d);
  box-shadow: 0 10px 22px rgba(12, 0, 1, 0.26), inset 0 -1px 0 rgba(255, 248, 237, 0.04);
  padding: 16px 22px;
}

.movie-dialog .dialog-header h2 {
  display: block;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #d9cbbd;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0;
  text-transform: none;
}

.dialog-close {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #d9cbbd;
  font-family: var(--font-ui);
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
  padding: 0;
}

.dialog-close:hover,
.dialog-close:focus-visible {
  background: rgba(255, 248, 232, 0.1);
  color: #fff8e8;
  box-shadow: none;
}

.title-mode-toggle {
  display: flex;
  grid-column: 1 / -1;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
}

.title-mode-toggle label {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 248, 233, 0.26);
  border-radius: 5px;
  background: rgba(34, 3, 6, 0.34);
  color: #f4e8dc;
  padding: 0 11px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 800;
}

.title-mode-toggle input {
  width: auto;
  min-height: 0;
  accent-color: #e9c66d;
}

.title-mode-toggle label:has(input:checked) {
  border-color: #e9c66d;
  background: #e9c66d;
  color: #3f2520;
  box-shadow: 0 3px 10px rgba(28, 8, 10, 0.2);
}

.movie-dialog .title-mode-note {
  display: block;
  margin-top: 2px;
  color: rgba(255, 248, 233, 0.78);
  font-size: 0.76rem;
  line-height: 1.25;
}

.also-add-dropdown {
  position: relative;
}

.also-add-dropdown summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid rgba(225, 172, 53, 0.56);
  border-radius: 5px;
  background: #fffaf0;
  color: #393532;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0 11px;
}

.also-add-dropdown[open] summary {
  border-color: #e9c66d;
}

.also-add-dropdown .also-add-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0;
  display: grid;
  width: min(330px, 100%);
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid rgba(225, 172, 53, 0.7);
  border-radius: 6px;
  background: #fffaf0;
  box-shadow: 0 16px 30px rgba(14, 0, 2, 0.34);
  padding: 7px;
}

.also-add-dropdown .also-add-options label {
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #591012;
  padding: 0 7px;
}

.also-add-dropdown .also-add-options label:hover {
  background: #f2eadc;
}

.movie-dialog .entry-panel {
  overflow: visible;
}

.movie-dialog.has-open-watchlist-picker {
  overflow: visible;
}

.also-add-dropdown .also-add-options label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  justify-content: start;
  text-align: left;
}

.also-add-dropdown .also-add-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: #9f2b27;
}

@media (max-width: 680px) {
  .dialog-heading {
    gap: 8px;
  }

  .movie-dialog .dialog-header h2 {
    font-size: 1.1rem;
  }

  .movie-dialog .header-media-type-toggle label {
    padding: 0 6px;
  }

  .also-add-dropdown .also-add-options {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .movie-dialog .dialog-header {
    padding: 14px 16px;
  }
}

.optional-details {
  grid-column: 1 / -1;
  border: 0;
  border-top: 1px solid rgba(255, 248, 233, 0.24);
  border-bottom: 1px solid rgba(255, 248, 233, 0.16);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.optional-details summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  color: #fff4e5;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0 2px;
}

.optional-details summary::marker {
  color: #e9c66d;
}

.optional-details[open] summary {
  border-bottom: 1px solid rgba(255, 248, 233, 0.12);
  background: transparent;
}

.optional-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 0 16px;
}

.optional-form-grid > label {
  display: grid;
  gap: 5px;
}

.optional-form-grid > label > span {
  color: #f4e8dc;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.movie-dialog .form-actions {
  margin-top: 2px;
  border-top: 1px solid rgba(255, 248, 233, 0.2);
  padding-top: 16px;
}

/* Friends Lobby */
.archive-page .app-shell {
  min-height: 100dvh;
}

.archive-topbar {
  position: relative;
}

.archive-nav-row .watchlist-tab {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.archive-nav-privacy {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.archive-main {
  margin: 18px 0 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 237, 0.42);
  border-radius: 8px;
  background: rgba(250, 246, 239, 0.98);
  box-shadow: 0 26px 70px rgba(13, 0, 0, 0.38);
}

.archive-heading {
  display: flex;
  gap: 30px;
  align-items: end;
  justify-content: space-between;
  border-bottom: 1px solid rgba(202, 162, 77, 0.42);
  background: linear-gradient(110deg, #4b0d11, #2c080b 68%, #210609);
  color: #fff8e9;
  padding: 30px clamp(22px, 4vw, 48px);
}

.archive-heading p,
.archive-section-title p {
  margin: 0 0 6px;
  color: #e2b953;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.archive-heading h1 {
  margin: 0 0 7px;
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  letter-spacing: 0;
  line-height: 1.05;
}

.archive-heading > div > span {
  color: rgba(255, 248, 233, 0.72);
}

.archive-totals,
.archive-detail-totals {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin: 0;
}

.archive-totals > div,
.archive-detail-totals > div {
  min-width: 82px;
  border-left: 1px solid rgba(226, 185, 83, 0.38);
  padding-left: 13px;
}

.archive-totals dt,
.archive-detail-totals dt {
  color: rgba(255, 248, 233, 0.62);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.archive-totals dd,
.archive-detail-totals dd {
  margin: 2px 0 0;
  color: #fff8e9;
  font-size: 1.2rem;
  font-weight: 900;
}

.archive-overview,
.archive-detail {
  padding: 28px clamp(18px, 4vw, 44px) 42px;
}

.archive-section-title {
  display: flex;
  gap: 20px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 22px;
}

.archive-section-title h2 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 1.45rem;
  letter-spacing: 0;
}

.archive-section-title .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.archive-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}

.archive-year-card {
  display: grid;
  gap: 15px;
  align-content: start;
  border: 1px solid #d4c7b7;
  border-radius: 7px;
  background: #fffaf2;
  box-shadow: 0 12px 26px rgba(45, 22, 18, 0.1);
  padding: 20px;
}

.archive-year-card-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.archive-year-card-heading span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.archive-year-card-heading h2 {
  margin: 1px 0 0;
  color: #4b1113;
  font-family: var(--font-brand);
  font-size: 2rem;
  letter-spacing: 0;
}

.archive-year-card-heading > strong,
.archive-privacy {
  border: 1px solid rgba(202, 162, 77, 0.38);
  border-radius: 4px;
  background: #f3e6c7;
  color: #6a4210;
  padding: 5px 8px;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.archive-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: #ded4c7;
}

.archive-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2f7259, #4b9a77);
}

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

.archive-year-stats span {
  display: grid;
  gap: 1px;
  color: var(--muted);
  font-size: 0.72rem;
}

.archive-year-stats strong {
  color: var(--ink);
  font-size: 1rem;
}

.archive-year-lists {
  display: grid;
  border-top: 1px solid #e1d7ca;
}

.archive-year-lists > div {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e1d7ca;
  padding: 9px 2px;
  font-size: 0.82rem;
}

.archive-year-lists span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-open-year {
  width: 100%;
}

.archive-empty {
  max-width: 620px;
  margin: 12px auto 4px;
  padding: 38px 24px;
  text-align: center;
}

.archive-empty-year {
  display: block;
  color: rgba(115, 26, 24, 0.12);
  font-family: var(--font-brand);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 900;
  line-height: 0.85;
}

.archive-empty h2 {
  margin: 18px 0 7px;
  font-family: var(--font-brand);
  letter-spacing: 0;
}

.archive-empty p {
  margin: 0 auto 20px;
  color: var(--muted);
  line-height: 1.5;
}

.archive-empty .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.archive-back {
  width: max-content;
  margin-bottom: 18px;
}

.archive-detail-heading {
  display: flex;
  gap: 22px;
  align-items: end;
  justify-content: space-between;
  border-radius: 6px;
  background: #4b0d11;
  color: #fff8e9;
  padding: 22px 24px;
}

.archive-detail-heading > div > span {
  color: #e2b953;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.archive-detail-heading h2 {
  margin: 2px 0 0;
  font-family: var(--font-brand);
  font-size: 2.2rem;
  letter-spacing: 0;
}

.archive-watchlist-detail {
  display: grid;
  gap: 34px;
  margin-top: 30px;
}

.archive-list-section {
  border-top: 2px solid #caa24d;
  padding-top: 15px;
}

.archive-list-heading {
  display: flex;
  gap: 18px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.archive-list-heading h3 {
  margin: 0 0 3px;
  font-family: var(--font-brand);
  font-size: 1.15rem;
  letter-spacing: 0;
}

.archive-list-heading > div > span,
.archive-list-empty {
  color: var(--muted);
  font-size: 0.82rem;
}

.archive-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.archive-media-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d4c7b7;
  border-radius: 6px;
  background: #fffaf2;
}

.archive-media-card.is-watched {
  border-color: rgba(47, 114, 89, 0.72);
  background: #d5eadc;
  box-shadow: 0 0 14px rgba(47, 114, 89, 0.16);
}

.archive-media-poster {
  display: grid;
  aspect-ratio: 2 / 3;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #541216, #2c080b);
  color: rgba(255, 248, 233, 0.62);
  font-family: var(--font-brand);
  font-size: 1.4rem;
}

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

.archive-media-body {
  padding: 11px;
}

.archive-media-body h4 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.archive-media-body p {
  min-height: 32px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.archive-media-body p span {
  color: #b59d83;
}

.archive-media-body > div {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.68rem;
}

.archive-media-body strong {
  color: #2f7259;
  text-align: right;
}

@media (max-width: 760px) {
  .archive-heading,
  .archive-detail-heading {
    align-items: start;
    flex-direction: column;
  }

  .archive-totals,
  .archive-detail-totals {
    width: 100%;
  }

  .archive-totals > div,
  .archive-detail-totals > div {
    flex: 1 1 0;
    min-width: 0;
  }

  .account-archive-access {
    align-items: stretch;
    flex-direction: column;
  }

  .account-archive-access .primary-button {
    justify-content: center;
  }
}

/* Kino Keep component system: shared scale, controls, overlays, and feedback. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-control: 4px;
  --radius-card: 6px;
  --radius-panel: 8px;
  --radius-pill: 999px;
  --shadow-control: 0 5px 12px rgba(39, 7, 9, 0.16);
  --shadow-card: 0 18px 36px rgba(18, 0, 2, 0.28);
  --shadow-raised: 0 24px 58px rgba(18, 0, 2, 0.38);
  --shadow-menu: 0 18px 42px rgba(18, 0, 2, 0.34);
  --shadow-modal: 0 30px 82px rgba(13, 0, 1, 0.58);
  --motion-fast: 150ms ease;
}

:where(.primary-button, .secondary-button, .text-button, .icon-button, .shop-primary-button, .profile-ghost-button, .profile-edit-list, .watchlist-add-button, .watchlist-archive-link, .toolbar-tool-command) {
  min-height: 40px;
  border-radius: var(--radius-control);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}

:where(.primary-button, .secondary-button, .text-button, .icon-button, .shop-primary-button, .profile-ghost-button, .profile-edit-list, .toolbar-action, .toolbar-tool-command):not(:disabled) {
  cursor: pointer;
}

:where(.primary-button, .shop-primary-button) {
  border-color: #982522;
  background: linear-gradient(180deg, #c43d37, #a72c29);
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fffaf2;
}

:where(.primary-button, .shop-primary-button):hover {
  border-color: #d15a52;
  background: linear-gradient(180deg, #d04740, #b3302c);
  box-shadow: 0 9px 20px rgba(74, 8, 10, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.secondary-button {
  border-color: rgba(76, 53, 44, 0.2);
  background: #fffaf2;
  box-shadow: 0 2px 6px rgba(58, 30, 24, 0.08);
  color: #514a44;
}

.text-button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--accent-dark);
}

:where(.secondary-button, .text-button):hover {
  border-color: rgba(115, 26, 24, 0.22);
  background: #f4e9dc;
  box-shadow: none;
}

:where(.primary-button, .secondary-button, .text-button, .icon-button, .shop-primary-button, .toolbar-action):disabled {
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.58;
  transform: none;
}

.danger-button,
.danger-action {
  color: #941f21;
}

.danger-button:hover,
.danger-action:hover {
  border-color: rgba(148, 31, 33, 0.3);
  background: #f7e4e1;
  color: #741416;
}

.toolbar-actions {
  gap: var(--space-1);
}

.toolbar-action {
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255, 244, 230, 0.17);
}

:where(.site-menu-panel, .toolbar-tools-popover, .lobby-post-menu > div, .lobby-reaction-picker) {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-menu);
}

.signed-header .site-menu-panel {
  border-radius: var(--radius-card);
}

/* Final archive dialog guard: preserve vertical scrolling without a mobile horizontal rail. */
.archive-recap-dialog {
  overflow-x: hidden;
}

/* Preserve the authored title and sentence case inside compact editor controls. */
.privacy-setting :is(strong, small),
.movie-dialog .title-mode-toggle span,
.movie-dialog .also-add-field legend,
.movie-dialog .also-add-dropdown summary,
.movie-dialog .also-add-options label,
.movie-dialog .also-add-options label span {
  letter-spacing: 0;
  text-transform: none;
}

html.dialog-scroll-locked,
body.dialog-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 920px) {
  body:not(.watchlist-page) .mobile-brand-mark {
    display: none;
  }

  body:not(.watchlist-page) .signed-header-inner > .brand-block {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: center;
    place-self: center;
  }

  body:not(.watchlist-page) .signed-header-inner > .brand-block .header-brand {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: center;
  }

  body:not(.watchlist-page) .signed-header-inner > .brand-block .header-brand-logo {
    object-position: center;
  }

  .film-page .signed-header-inner > .mobile-site-drawer {
    display: flex;
    grid-template-columns: none;
    width: min(340px, calc(100vw - 42px));
    min-height: 100dvh;
    flex-direction: column;
  }

  .film-page .signed-header .mobile-site-drawer > :is(.site-nav-button, .site-menu) {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .movie-dialog[open] {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: none;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .movie-dialog .entry-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .movie-dialog.has-open-watchlist-picker,
  .movie-dialog.has-open-watchlist-picker .entry-panel {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .movie-dialog .also-add-dropdown .also-add-options {
    position: static;
    width: 100%;
    max-height: 190px;
    margin-top: 6px;
    overflow-y: auto;
    box-shadow: inset 0 0 0 1px rgba(225, 172, 53, 0.14);
  }

  .shop-product-dialog[open] {
    display: flex;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .shop-product-dialog > .shop-dialog-close {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 10px;
    margin: 0;
  }

  .shop-product-dialog > .shop-dialog-image {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    background: #f4eadc;
  }

  .shop-product-dialog .shop-dialog-image > img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 330px;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
  }

  .shop-product-dialog > .shop-dialog-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    justify-content: flex-start;
    background: #3d1418;
    padding: 24px 20px 22px;
  }

  .shop-product-dialog .shop-dialog-copy h2 {
    font-size: 1.55rem;
  }

  .shop-product-dialog .shop-dialog-copy p {
    margin-bottom: 16px;
  }
}

/* My Watchlists: a dedicated collection gallery replacing the navigation dropdown. */
body.watchlists-page {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(111, 35, 42, 0.28), transparent 45%),
    radial-gradient(circle at 8% 28%, rgba(91, 22, 29, 0.16), transparent 31%),
    linear-gradient(145deg, #26090d 0%, #170306 52%, #22070a 100%);
  background-attachment: fixed;
}

.watchlists-main {
  margin: 18px 0 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 237, 0.42);
  border-radius: var(--radius-card, 8px);
  background: #f5f0e8;
  box-shadow: 0 26px 70px rgba(13, 0, 0, 0.38);
}

.watchlists-heading {
  display: grid;
  grid-template-columns: minmax(310px, 1fr) minmax(430px, 520px);
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  border-bottom: 1px solid rgba(202, 162, 77, 0.42);
  background: #35080c;
  color: #fff8e9;
  padding: 34px clamp(22px, 4vw, 48px);
}

.watchlists-heading-copy {
  min-width: 0;
}

.watchlists-heading p,
.watchlists-overview-heading p {
  margin: 0 0 6px;
  color: #e2b953;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.watchlists-heading h1,
.watchlists-overview-heading h2 {
  margin: 0;
  font-family: var(--font-brand);
  letter-spacing: 0;
}

.watchlists-heading h1 {
  margin-bottom: 7px;
  font-size: clamp(1.9rem, 3vw, 2.55rem);
  line-height: 1.05;
  white-space: nowrap;
}

.watchlists-heading > div:first-child > span {
  color: rgba(255, 248, 233, 0.72);
}

.watchlists-heading-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 8px;
}

.watchlists-heading-controls {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-self: end;
  gap: 7px;
}

.watchlists-year-reel {
  width: 100%;
  min-height: 60px;
}

.watchlists-year-reel .year-tabs {
  height: 60px;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 7px;
  border-right: 0;
  border-left: 0;
  background:
    repeating-linear-gradient(90deg, rgba(205, 186, 161, 0.44) 0 9px, transparent 9px 15px) top 5px left / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(205, 186, 161, 0.44) 0 9px, transparent 9px 15px) bottom 5px left / 100% 5px no-repeat,
    linear-gradient(180deg, #34272a, #21191b 52%, #2b2023);
  padding: 8px 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
  cursor: grab;
  user-select: none;
}

.watchlists-year-reel .year-tabs::-webkit-scrollbar {
  display: none;
}

.watchlists-year-reel .year-tabs::after {
  display: none;
}

.watchlists-year-reel .year-tabs.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.watchlists-year-reel .year-tabs.is-dragging .year-tab {
  pointer-events: none;
}

.watchlists-year-reel .year-tab {
  flex: 0 0 calc((100% - 49px) / 8);
  width: auto;
  min-width: 0;
  font-size: 0.72rem;
  scroll-snap-align: start;
}

.watchlist-header-context {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  color: #fff8e9;
  text-align: center;
}

.watchlist-header-context h1 {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-header-context span {
  flex: 0 0 auto;
  color: #d7b45d;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.watchlist-year-state[hidden] {
  display: none;
}

@media (max-width: 1240px) {
  .watchlists-heading {
    grid-template-columns: minmax(220px, 0.8fr) minmax(430px, 1.2fr);
    padding-inline: 24px;
  }

  .watchlists-heading-actions {
    gap: 7px;
  }

  .watchlists-heading h1 {
    font-size: 2rem;
  }

  .watchlists-heading-actions .primary-button,
  .watchlist-builder-button,
  .watchlist-sort-button {
    padding-inline: 12px;
  }
}

@media (max-width: 980px) {
  .watchlists-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .watchlists-heading-controls {
    width: min(100%, 520px);
    justify-self: start;
  }
}

.watchlists-year-control {
  display: grid;
  gap: 5px;
}

.watchlists-year-control > span {
  color: rgba(255, 248, 233, 0.68);
  font-size: 0.67rem;
  font-weight: 750;
}

.watchlists-year-control select {
  width: 108px;
  border-color: rgba(226, 185, 83, 0.5);
  background: #fffaf2;
}

.watchlists-heading-actions .primary-button {
  min-height: 42px;
  border-color: rgba(238, 192, 118, 0.38);
  background: #9f3432;
  box-shadow: inset 0 1px 0 rgba(255, 248, 233, 0.1), 0 3px 8px rgba(16, 2, 3, 0.13);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.watchlists-heading-actions .primary-button:hover {
  border-color: rgba(244, 207, 136, 0.58);
  background: #ad3a37;
  box-shadow: inset 0 1px 0 rgba(255, 248, 233, 0.12), 0 4px 10px rgba(16, 2, 3, 0.16);
}

.watchlist-builder-button {
  min-height: 42px;
  border: 1px solid #d3b469;
  border-radius: var(--radius-control, 7px);
  background: #e3ce91;
  box-shadow: inset 0 1px 0 rgba(255, 253, 244, 0.56), 0 3px 8px rgba(16, 2, 3, 0.11);
  color: #421216;
  font-size: 0.72rem;
  font-weight: 750;
  padding: 0 16px;
  white-space: nowrap;
}

.watchlist-builder-button:hover {
  border-color: #ddc27c;
  background: #ead9a6;
}

.watchlist-sort-button {
  min-height: 42px;
  border-color: rgba(220, 175, 112, 0.38);
  background: #673033;
  color: #fbf0df;
  box-shadow: inset 0 1px 0 rgba(255, 248, 233, 0.08), 0 3px 8px rgba(16, 2, 3, 0.12);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.watchlist-sort-button:hover,
.watchlist-sort-button[aria-pressed="true"] {
  border-color: rgba(235, 199, 132, 0.58);
  background: #76383b;
  color: #fff8e9;
}

.watchlists-overview {
  padding: 28px clamp(18px, 4vw, 44px) 34px;
}

.watchlists-overview-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(184, 139, 62, 0.48);
  padding-bottom: 18px;
}

.watchlists-overview-heading h2 {
  color: #241d1a;
  font-size: 1.42rem;
}

.watchlists-totals {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin: 0;
}

.watchlists-totals > div {
  min-width: 76px;
  border-left: 1px solid rgba(184, 139, 62, 0.42);
  padding-left: 13px;
}

.watchlists-totals dt,
.watchlist-collection-stats dt {
  color: #84766c;
  font-size: 0.61rem;
  font-weight: 800;
  text-transform: uppercase;
}

.watchlists-totals dd {
  margin: 2px 0 0;
  color: #3b0b10;
  font-size: 1.15rem;
  font-weight: 850;
}

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

.watchlist-collection-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8cbbb;
  border-radius: var(--radius-card, 8px);
  background: #fffaf2;
  box-shadow: 0 13px 30px rgba(55, 32, 25, 0.12);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.watchlist-collection-card:hover {
  border-color: rgba(184, 139, 62, 0.62);
  box-shadow: 0 18px 38px rgba(55, 32, 25, 0.16);
  transform: translateY(-2px);
}

.watchlist-collection-card.is-shared {
  border-color: rgba(66, 115, 135, 0.48);
}

.watchlist-collection-card.is-moving {
  opacity: 0.55;
}

.watchlist-collection-card.is-drop-target {
  border-color: #b98a28;
  box-shadow: 0 0 0 3px rgba(202, 162, 77, 0.28), 0 18px 38px rgba(55, 32, 25, 0.16);
}

.watchlist-arrange-bar {
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(52px, auto) 1fr auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #d8cbbb;
  background: #f3e6d3;
  padding: 6px 9px 6px 13px;
}

.watchlist-arrange-bar > span {
  color: #78675e;
  font-size: 0.68rem;
  font-weight: 800;
}

.watchlist-drag-handle,
.watchlist-arrange-controls button {
  min-width: 38px;
  min-height: 34px;
  border: 1px solid #cdbba7;
  border-radius: 5px;
  background: #fffaf2;
  color: #4a302b;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
}

.watchlist-drag-handle {
  justify-self: start;
  cursor: grab;
  padding-inline: 12px;
}

.watchlist-drag-handle:active {
  cursor: grabbing;
}

.watchlist-arrange-controls {
  display: flex;
  gap: 5px;
}

.watchlist-arrange-controls button {
  font-size: 1rem;
}

.watchlist-arrange-controls button:disabled {
  opacity: 0.34;
}

.watchlist-collection-preview {
  display: grid;
  height: 178px;
  overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #d8cbbb;
  background: #2d080b;
  text-decoration: none;
}

.watchlist-collection-poster {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid rgba(255, 248, 233, 0.14);
  background: linear-gradient(145deg, #531117, #26070a);
  color: rgba(255, 248, 233, 0.55);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.watchlist-collection-poster:last-child {
  border-right: 0;
}

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

.watchlist-collection-poster.is-placeholder:nth-child(2) {
  background: linear-gradient(145deg, #6a1c22, #370b0f);
  color: rgba(248, 220, 151, 0.8);
  font-family: var(--font-brand);
  font-size: 0.85rem;
}

.watchlist-collection-body {
  display: grid;
  gap: 16px;
  padding: 17px;
}

.watchlist-collection-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.watchlist-collection-heading h2 {
  margin: 0 0 3px;
  color: #2d2420;
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0;
  line-height: 1.05;
}

.watchlist-collection-heading > div > span {
  color: #7a6f67;
  font-size: 0.7rem;
}

.watchlist-collection-status {
  flex: 0 0 auto;
  border: 1px solid rgba(202, 162, 77, 0.42);
  border-radius: 5px;
  background: #f7edcf;
  color: #795816;
  padding: 5px 7px;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.watchlist-collection-status.is-public {
  border-color: rgba(47, 114, 89, 0.42);
  background: #dbeadf;
  color: #315f49;
}

.watchlist-collection-status.is-shared {
  border-color: rgba(53, 108, 134, 0.42);
  background: #dce9ee;
  color: #315e72;
}

.watchlist-collection-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid #e5dacf;
  padding-block: 11px;
}

.watchlist-collection-stats > div {
  min-width: 0;
  border-right: 1px solid #e5dacf;
  padding-inline: 9px;
}

.watchlist-collection-stats > div:first-child {
  padding-left: 0;
}

.watchlist-collection-stats > div:last-child {
  border-right: 0;
  padding-right: 0;
}

.watchlist-collection-stats dd {
  margin: 3px 0 0;
  color: #3b0b10;
  font-size: 1rem;
  font-weight: 850;
}

.watchlist-collection-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  align-items: stretch;
}

.watchlist-collection-actions > * {
  min-width: 0;
  min-height: 36px;
  justify-content: center;
  padding: 7px 8px;
  font-size: 0.67rem;
  white-space: nowrap;
}

.watchlist-open-button {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  text-decoration: none;
}

.watchlist-tile-action {
  width: auto;
}

.watchlist-tile-delete {
  width: auto;
  color: #922b2a;
  font-size: 0.67rem;
}

.watchlist-tile-delete:disabled {
  visibility: hidden;
}

.watchlists-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  border-top: 1px solid rgba(184, 139, 62, 0.36);
  padding-top: 18px;
}

.watchlists-footer .watchlist-archive-link {
  padding-inline: 18px;
}

.watchlist-page-dialog {
  width: min(480px, calc(100vw - 28px));
  max-width: none;
  overflow-x: hidden;
}

.watchlist-page-dialog .compact-dialog-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.watchlist-page-dialog .compact-dialog-card > label,
.watchlist-page-dialog .compact-dialog-card input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.watchlist-page-dialog .compact-dialog-actions {
  min-width: 0;
  flex-wrap: wrap;
}

.watchlist-builder-dialog {
  width: min(620px, calc(100vw - 28px));
  max-width: none;
  overflow: hidden;
}

.watchlist-builder-dialog .compact-dialog-card {
  width: 100%;
  max-height: min(90vh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
}

.watchlist-builder-intro {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.watchlist-builder-fieldset {
  display: grid;
  gap: 9px;
  margin: 0;
  border: 0;
  padding: 0;
}

.watchlist-builder-fieldset legend,
.watchlist-builder-row label > span,
.watchlist-builder-name > span {
  margin-bottom: 7px;
  color: #4a302b;
  font-size: 0.72rem;
  font-weight: 800;
}

.watchlist-builder-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.watchlist-builder-choices label {
  cursor: pointer;
}

.watchlist-builder-choices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.watchlist-builder-choices span {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid #dccdbb;
  border-radius: var(--radius-control, 7px);
  background: #fffaf2;
  color: #5d4941;
  font-size: 0.76rem;
  font-weight: 750;
  padding: 8px;
  text-align: center;
}

.watchlist-builder-choices input:checked + span {
  border-color: #bd8b2f;
  background: #f5e5ae;
  box-shadow: 0 0 0 2px rgba(189, 139, 47, 0.12);
  color: #4b1115;
}

.watchlist-builder-choices input:focus-visible + span {
  outline: 3px solid rgba(202, 162, 77, 0.3);
  outline-offset: 2px;
}

.watchlist-builder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.watchlist-builder-row label,
.watchlist-builder-name {
  display: grid;
}

.watchlist-builder-row select,
.watchlist-builder-name input {
  width: 100%;
}

.compact-dialog-card > label.watchlist-builder-existing {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #66554e;
  font-size: 0.75rem;
}

.compact-dialog-card > label.watchlist-builder-existing > span {
  margin: 0;
  color: #66554e;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.watchlist-builder-existing input {
  width: 17px;
  min-height: 17px;
  flex: 0 0 17px;
  accent-color: var(--accent);
}

.watchlist-builder-status {
  min-height: 20px;
  color: #8b2528;
  font-size: 0.75rem;
  line-height: 1.4;
}

#watchlist-builder-form[aria-busy="true"] {
  cursor: wait;
}

.watchlist-showcase-dialog {
  width: min(900px, calc(100vw - 28px));
  max-width: none;
}

.watchlist-showcase-dialog .compact-dialog-card {
  width: 100%;
  max-height: min(88vh, 820px);
  overflow-x: hidden;
  overflow-y: auto;
}

.watchlist-showcase-current,
.watchlist-showcase-library {
  display: grid;
  gap: 12px;
}

.watchlist-showcase-library {
  border-top: 1px solid rgba(184, 139, 62, 0.35);
  padding-top: 18px;
}

.watchlist-showcase-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.watchlist-showcase-section-heading strong {
  color: #3b0b10;
  font-size: 0.84rem;
}

.watchlist-showcase-section-heading span {
  border: 1px solid rgba(202, 162, 77, 0.4);
  border-radius: 999px;
  background: #f7edcf;
  color: #795816;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 5px 8px;
}

.watchlist-showcase-section-heading span.is-custom {
  border-color: rgba(47, 114, 89, 0.35);
  background: #dbeadf;
  color: #315f49;
}

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

.watchlist-showcase-slot {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 8px 11px;
  align-items: start;
  border: 1px solid #ddd0c0;
  border-radius: var(--radius-card, 8px);
  background: #fffaf2;
  box-shadow: 0 7px 18px rgba(55, 32, 25, 0.09);
  padding: 10px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.watchlist-showcase-slot.is-active {
  border-color: #c99e42;
  box-shadow: 0 0 0 2px rgba(202, 162, 77, 0.15), 0 8px 20px rgba(55, 32, 25, 0.11);
}

.watchlist-showcase-slot-number {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 15px;
  border-radius: 4px;
  background: rgba(38, 4, 7, 0.86);
  color: #f6d989;
  font-size: 0.58rem;
  font-weight: 900;
  padding: 3px 5px;
  pointer-events: none;
}

.watchlist-showcase-slot-poster {
  display: grid;
  width: 78px;
  aspect-ratio: 2 / 3;
  grid-column: 1;
  grid-row: 1 / 4;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(184, 139, 62, 0.48);
  border-radius: 5px;
  background: linear-gradient(145deg, #531117, #26070a);
  color: rgba(255, 248, 233, 0.68);
  font-size: 0.62rem;
  padding: 0;
}

.watchlist-showcase-slot-poster img,
.watchlist-showcase-choice-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watchlist-showcase-slot > strong {
  align-self: end;
  color: #352723;
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.1;
}

.watchlist-showcase-slot-controls {
  display: flex;
  align-self: end;
  gap: 5px;
}

.watchlist-showcase-slot-controls button {
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  border: 1px solid rgba(76, 53, 44, 0.2);
  border-radius: 5px;
  background: #f5ecdf;
  color: #64171a;
  font-size: 0.84rem;
  font-weight: 900;
  padding: 0;
}

.watchlist-showcase-slot-controls button:disabled {
  cursor: default;
  opacity: 0.3;
}

.watchlist-showcase-library-grid {
  display: grid;
  max-height: 390px;
  overflow-x: hidden;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fill, 108px);
  grid-auto-rows: 210px;
  align-content: start;
  justify-content: start;
  gap: 12px;
  padding: 2px 4px 4px 2px;
  scrollbar-color: rgba(133, 91, 42, 0.58) rgba(236, 224, 207, 0.74);
  scrollbar-width: thin;
}

.watchlist-showcase-choice {
  display: grid;
  width: 108px;
  height: 210px;
  min-width: 0;
  overflow: hidden;
  align-content: start;
  grid-template-rows: 162px 48px;
  border: 1px solid #ddd0c0;
  border-radius: 6px;
  background: #fffaf2;
  color: #402d27;
  padding: 0;
  text-align: left;
}

.watchlist-showcase-choice-poster {
  display: block;
  width: 100%;
  height: 162px;
  overflow: hidden;
  border-bottom: 1px solid rgba(76, 53, 44, 0.16);
  background: linear-gradient(145deg, #531117, #26070a);
}

.watchlist-showcase-choice-poster img {
  display: block;
}

.watchlist-showcase-choice-title {
  display: block;
  overflow: hidden;
  padding: 8px;
  font-size: 0.65rem;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.watchlist-showcase-choice:hover,
.watchlist-showcase-choice.is-selected {
  border-color: #c99e42;
  background: #fff4d3;
  box-shadow: 0 0 0 2px rgba(202, 162, 77, 0.12);
}

.watchlist-showcase-actions {
  justify-content: space-between;
}

.watchlist-showcase-dialog .ui-state {
  border-color: rgba(76, 53, 44, 0.22);
  background: #f7efe4;
  color: #6e6964;
}

.watchlist-page-privacy {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dfd1c0;
  border-radius: var(--radius-control, 7px);
  background: #fffaf2;
  padding: 12px;
}

.watchlist-page-privacy input {
  width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  accent-color: var(--accent);
}

.watchlist-page-privacy span {
  display: grid;
  gap: 2px;
}

.watchlist-page-privacy small,
.watchlist-delete-copy {
  color: var(--muted);
  line-height: 1.5;
}

.watchlist-delete-copy {
  margin: 0;
}

@media (max-width: 1050px) {
  .watchlists-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .watchlists-heading,
  .watchlists-overview-heading {
    align-items: stretch;
  }

  .watchlists-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .watchlists-heading-controls {
    grid-column: 1;
  }

  .watchlists-heading-actions {
    width: 100%;
  }

  .watchlists-totals {
    align-self: stretch;
  }

  .watchlists-totals > div {
    flex: 1 1 0;
  }

  .watchlists-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .watchlist-showcase-slots {
    grid-template-columns: minmax(0, 1fr);
  }

  .watchlist-showcase-slot {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .watchlist-showcase-slot-poster {
    width: 68px;
  }

  .watchlist-showcase-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 186px;
    gap: 8px;
  }

  .watchlist-showcase-choice {
    width: 100%;
    height: 186px;
    grid-template-rows: 144px 42px;
  }

  .watchlist-showcase-choice-poster {
    height: 144px;
  }
}

@media (max-width: 460px) {
  .watchlist-page-dialog .compact-dialog-actions > button {
    min-width: 0;
    white-space: normal;
  }

  .watchlists-main {
    margin-inline: -6px;
  }

  .watchlists-heading,
  .watchlists-overview {
    padding-inline: 16px;
  }

  .watchlists-heading-actions {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .watchlists-year-control {
    grid-column: 1 / -1;
  }

  .watchlists-year-control select {
    width: 100%;
  }

  .watchlists-heading-actions .primary-button,
  .watchlist-builder-button,
  .watchlist-sort-button {
    width: 100%;
  }

  .watchlist-builder-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .watchlist-builder-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .watchlist-collection-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .watchlist-collection-actions .watchlist-open-button {
    grid-column: 1 / -1;
  }
}

.toolbar-action {
  position: relative;
}

.toolbar-members-count {
  position: absolute;
  z-index: 2;
  top: -5px;
  right: -5px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(117, 67, 15, 0.35);
  border-radius: 999px;
  background: #f3d889;
  box-shadow: 0 2px 7px rgba(25, 5, 7, 0.35);
  color: #541319;
  padding: 0 4px;
  font-size: 0.61rem;
  font-weight: 850;
  line-height: 1;
}

.toolbar-members-count[hidden] {
  display: none;
}

/* Watchlist archive-card treatment: poster first, compact controls, consistent height. */
body.watchlist-page {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(135, 53, 61, 0.32), transparent 48%),
    radial-gradient(circle at 8% 30%, rgba(112, 35, 43, 0.2), transparent 34%),
    linear-gradient(145deg, #351116 0%, #24080c 52%, #2d0d12 100%);
  background-attachment: fixed;
}

.watchlist-gallery-surface {
  overflow: visible;
  min-height: 360px;
  border: 1px solid rgba(255, 248, 237, 0.52);
  border-radius: 8px;
  background: #f5f0e8;
  box-shadow: 0 24px 64px rgba(13, 0, 0, 0.3);
  padding: 20px clamp(16px, 2.2vw, 28px) 30px;
}

.watchlist-gallery-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(184, 139, 62, 0.52);
  padding: 0 2px 14px;
}

.watchlist-gallery-heading-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.watchlist-page .watchlist-gallery-surface > .library-tools {
  overflow: visible;
  grid-template-columns: minmax(380px, 1.15fr) minmax(296px, 1fr) 10.25rem max-content max-content;
  gap: 8px;
  align-items: end;
  margin: -4px 0 20px;
  border: 0;
  border-bottom: 1px solid rgba(130, 105, 83, 0.34);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 0;
}

.watchlist-page .watchlist-gallery-surface > .library-tools::before,
.watchlist-page .watchlist-gallery-surface > .library-tools::after {
  display: none;
}

.watchlist-page .library-tools .segmented {
  align-self: end;
  margin-bottom: -1px;
  border-bottom: 0;
  padding: 6px 0 0;
}

.watchlist-page .library-tools .segment {
  border-color: rgba(130, 105, 83, 0.38);
  background: #e7dfd3;
  color: #5b5049;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.watchlist-page .library-tools .segment::before {
  background: rgba(255, 255, 255, 0.56);
}

.watchlist-page .library-tools .segment.active {
  border-color: rgba(130, 105, 83, 0.48);
  background: #f5f0e8;
  color: #6d1d22;
  box-shadow: 0 -3px 10px rgba(65, 42, 29, 0.08), inset 0 1px 0 #fff;
}

.watchlist-page .library-tools .search-wrap,
.watchlist-page .library-tools #sort,
.watchlist-page .library-tools #reset-order {
  margin-bottom: 8px;
}

.watchlist-page .library-tools #sort {
  width: 10.25rem;
}

.watchlist-page .library-tools .search-wrap {
  border-color: rgba(130, 105, 83, 0.34);
  background: #fffdf9;
  box-shadow: inset 0 1px 0 #fff;
}

.watchlist-page .library-tools #sort,
.watchlist-page .library-tools #reset-order {
  border-color: rgba(130, 105, 83, 0.34);
  background: #fffdf9;
  color: #514741;
  box-shadow: none;
}

.watchlist-page .library-tools .toolbar-actions {
  grid-template-columns: repeat(3, 42px);
  margin-bottom: 7px;
}

.watchlist-page .library-tools .toolbar-action {
  width: 42px;
}

@media (min-width: 861px) and (max-width: 1240px) {
  .watchlist-page .watchlist-gallery-surface > .library-tools {
    grid-template-areas:
      "search sort reset actions"
      "tabs tabs tabs tabs";
    grid-template-columns: minmax(260px, 1fr) 10.25rem max-content max-content;
    row-gap: 8px;
  }

  .watchlist-page .library-tools .segmented {
    grid-area: tabs;
  }

  .watchlist-page .library-tools .search-wrap {
    grid-area: search;
  }

  .watchlist-page .library-tools #sort {
    grid-area: sort;
  }

  .watchlist-page .library-tools #reset-order {
    grid-area: reset;
  }

  .watchlist-page .library-tools .toolbar-actions {
    grid-area: actions;
  }
}

@media (max-width: 860px) {
  .watchlist-page .watchlist-gallery-surface > .library-tools {
    grid-template-areas:
      "search search"
      "sort reset"
      "actions tabs";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 9px;
    margin-top: 0;
    padding-bottom: 14px;
  }

  .watchlist-page .library-tools .search-wrap {
    grid-area: search;
    width: 100%;
    margin: 0;
  }

  .watchlist-page .library-tools #sort {
    grid-area: sort;
  }

  .watchlist-page .library-tools #reset-order {
    grid-area: reset;
  }

  .watchlist-page .library-tools #sort,
  .watchlist-page .library-tools #reset-order {
    width: 100%;
    min-height: 44px;
    height: 44px;
    margin: 0;
  }

  .watchlist-page .library-tools .toolbar-actions {
    grid-area: actions;
    width: auto;
    margin: 0;
    grid-template-columns: repeat(3, 50px);
    justify-content: start;
    align-self: end;
  }

  .watchlist-page .library-tools .toolbar-action {
    width: 50px;
    height: 44px;
  }

  .watchlist-page .library-tools .segmented {
    grid-area: tabs;
    display: block;
    position: relative;
    min-width: 0;
    width: 100%;
    min-height: 48px;
    align-self: end;
    overflow: hidden;
    margin: 0;
    padding: 4px 3px 0;
    border-bottom: 1px solid rgba(130, 105, 83, 0.34);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
  }

  .watchlist-page .library-tools .segment {
    position: absolute;
    z-index: var(--tab-layer, 1);
    left: 50%;
    bottom: -1px;
    width: 92px;
    min-height: 40px;
    margin: 0 0 0 -46px;
    padding: 0 10px;
    border-radius: 6px 6px 0 0;
    white-space: nowrap;
    transform: translateX(calc(var(--tab-shift, 0px) + var(--tab-drag, 0px))) translateY(var(--tab-lift, 0px)) scale(var(--tab-scale, 1));
    transform-origin: center bottom;
    transition: transform 190ms ease, background 160ms ease, box-shadow 160ms ease;
  }

  .watchlist-page .library-tools .segment.active {
    --tab-lift: -2px;
    min-height: 44px;
  }

  .watchlist-page .library-tools .segmented.is-dragging {
    cursor: grabbing;
  }

  .watchlist-page .library-tools .segmented.is-dragging .segment {
    transition: none;
  }
}

.watchlist-gallery-heading h1 {
  margin: 0 0 3px;
  color: #241d1a;
  font-family: var(--font-brand);
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.2;
}

.watchlist-gallery-heading > div > span {
  color: #766a62;
  font-size: 0.73rem;
}

.watchlist-gallery-visibility {
  flex: 0 0 auto;
  border: 1px solid rgba(202, 162, 77, 0.48);
  border-radius: 5px;
  background: #f7edcf;
  color: #795816;
  padding: 5px 8px;
  font-size: 0.61rem;
  font-weight: 750;
  text-transform: uppercase;
}

.watchlist-gallery-surface .empty-state {
  box-shadow: none;
}

.watchlist-page .movie-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.watchlist-page.pref-compact-cards .movie-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.watchlist-page .movie-card {
  align-self: start;
  min-height: 0;
  overflow: visible;
  border-color: rgba(91, 65, 53, 0.24);
  background: #fffaf2;
  box-shadow: 0 12px 26px rgba(45, 22, 18, 0.14);
}

.watchlist-page .movie-card.is-watched,
.watchlist-page .movie-card.is-watched:hover,
.watchlist-page .movie-card.is-watched:not(:hover) {
  border-color: rgba(47, 114, 89, 0.72);
  box-shadow: 0 12px 26px rgba(45, 22, 18, 0.14);
  animation: none;
}

.watchlist-page .poster-button {
  cursor: pointer;
}

.watchlist-page .poster-button:focus-visible {
  outline: 3px solid rgba(202, 162, 77, 0.72);
  outline-offset: 2px;
}

.watchlist-page :is(.poster-button, .next-up-action, .watched-action, .season-menu > summary)[data-tooltip]::after {
  position: absolute;
  z-index: 110;
  bottom: calc(100% + 7px);
  left: 50%;
  width: max-content;
  max-width: 160px;
  border: 1px solid rgba(202, 162, 77, 0.48);
  border-radius: 4px;
  background: rgba(35, 8, 11, 0.96);
  box-shadow: 0 8px 20px rgba(18, 3, 5, 0.28);
  color: #fff8e9;
  content: attr(data-tooltip);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 5px 7px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, 3px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.watchlist-page :is(.poster-button, .next-up-action, .watched-action, .season-menu > summary)[data-tooltip]:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.watchlist-page .movie-body,
.watchlist-page .movie-card.is-series .movie-body {
  display: grid;
  min-height: 132px;
  grid-template-areas:
    "heading heading heading"
    "meta meta meta"
    "space space space"
    "next seasons watched";
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  grid-template-rows: auto auto 1fr auto;
  gap: 5px 6px;
  background: #fffaf2;
  padding: 10px;
}

.watchlist-page .movie-heading {
  display: grid;
  grid-area: heading;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: start;
  min-width: 0;
  padding-right: 0;
}

.watchlist-page .movie-heading h2 {
  display: -webkit-box;
  min-height: 2.3em;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.watchlist-page .movie-meta {
  display: -webkit-box;
  grid-area: meta;
  min-height: 2.7em;
  overflow: hidden;
  color: #786b61;
  font-size: 0.72rem;
  font-weight: 550;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.watchlist-page .card-control-row {
  display: none;
  grid-area: seasons;
  min-width: 0;
  align-self: end;
  justify-self: center;
}

.watchlist-page .movie-card.is-series .card-control-row {
  display: block;
}

.watchlist-page .season-tracker,
.watchlist-page .movie-card.is-series .season-tracker {
  display: block;
  min-height: 32px;
}

.watchlist-page .season-menu {
  position: relative;
}

.watchlist-page .season-menu > summary {
  position: relative;
  display: flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid rgba(35, 78, 99, 0.24);
  border-radius: 4px;
  background: #e2edf1;
  color: #285368;
  justify-content: center;
  padding: 0 5px;
  font-size: 0.68rem;
  font-weight: 800;
  list-style: none;
  white-space: nowrap;
  cursor: pointer;
}

.watchlist-page .season-menu > summary::-webkit-details-marker {
  display: none;
}

.watchlist-page .season-menu > summary::after {
  margin-left: 6px;
  content: "▾";
  font-size: 0.58rem;
}

.watchlist-page .season-menu[open] > summary {
  border-color: #caa24d;
  background: #f0e3c9;
  color: #5b4015;
}

.watchlist-page .season-menu-panel {
  position: absolute;
  z-index: 95;
  bottom: calc(100% + 7px);
  left: 0;
  display: grid;
  width: 218px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  border: 1px solid rgba(202, 162, 77, 0.54);
  border-radius: 6px;
  background: #fffaf2;
  box-shadow: 0 16px 34px rgba(24, 10, 8, 0.3);
  padding: 7px;
}

.watchlist-page .season-button,
.watchlist-page .season-nav {
  min-height: 34px;
  padding: 0 4px;
}

.watchlist-page .card-actions {
  display: contents;
}

.watchlist-page .card-actions > .next-up-action,
.watchlist-page .card-actions > .watched-action {
  position: relative;
  display: grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #cdbfae;
  border-radius: 50%;
  background: rgba(255, 250, 242, 0.72);
  color: transparent;
  padding: 0;
  font-size: 0;
  box-shadow: 0 2px 6px rgba(43, 24, 19, 0.08);
}

.watchlist-page .card-actions > .next-up-action {
  grid-area: next;
  align-self: end;
  justify-self: start;
}

.watchlist-page .card-actions > .watched-action {
  grid-area: watched;
  align-self: end;
  justify-self: end;
}

.watchlist-page .card-actions > .watched-action::before {
  color: #9e9285;
  content: "✓";
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
}

.watchlist-page .card-actions > .next-up-action::before {
  color: #a09277;
  content: "↑";
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.watchlist-page .card-actions > .watched-action[aria-pressed="true"] {
  border-color: #8eb59c;
  background: #c9dfd0;
}

.watchlist-page .card-actions > .watched-action[aria-pressed="true"]::before {
  color: #35684f;
}

.watchlist-page .card-actions > .next-up-action[aria-pressed="true"] {
  border-color: #d1b568;
  background: #eadba9;
}

.watchlist-page .card-actions > .next-up-action[aria-pressed="true"]::before {
  color: #6e5518;
}

.watchlist-page .card-actions > .next-up-action:hover,
.watchlist-page .card-actions > .next-up-action:focus-visible,
.watchlist-page .card-actions > .watched-action:hover,
.watchlist-page .card-actions > .watched-action:focus-visible {
  border-color: #caa24d;
  box-shadow: 0 0 0 3px rgba(202, 162, 77, 0.18);
}

.watchlist-page .movie-notes {
  right: 8px;
  bottom: 48px;
  left: 8px;
}

.watchlist-page .movie-card.is-watched .movie-body {
  background: #d1e6d8;
}

.watchlist-page .movie-card.is-in-progress .movie-body {
  background: #c9dfe8;
}

.watchlist-page .movie-card.is-next-up .movie-body {
  background: #eee1b9;
}

.watchlist-page .movie-card:has(.season-menu[open]) {
  z-index: 96;
}

@media (max-width: 620px) {
  .watchlist-gallery-surface {
    border-radius: 7px;
    padding: 14px 10px 20px;
  }

  .watchlist-gallery-heading {
    margin-bottom: 14px;
    padding-inline: 2px;
  }

  .watchlist-page .movie-grid,
  .watchlist-page.pref-compact-cards .movie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .watchlist-page .movie-body,
  .watchlist-page .movie-card.is-series .movie-body {
    min-height: 128px;
    gap: 5px 4px;
    padding: 9px;
  }

  .watchlist-page .season-menu > summary {
    padding-inline: 3px;
    font-size: 0.62rem;
  }

  .watchlist-page .season-menu-panel {
    width: min(218px, calc(100vw - 32px));
  }
}

/* Past Years: cinema timeline and yearly recaps. */
.archive-page .archive-main {
  background: #f5f0e8;
}

.archive-page .archive-heading {
  align-items: center;
  background: #35080c;
  padding-block: 36px;
}

.archive-page .archive-heading h1,
.archive-page .archive-section-title h2,
.archive-page .archive-detail-heading h2 {
  font-family: var(--font-brand);
  font-weight: 750;
}

.archive-timeline-shell {
  position: relative;
  margin: 0 0 30px;
  border-bottom: 1px solid rgba(75, 17, 19, 0.16);
  padding: 0 4px 24px;
}

.archive-timeline-shell > span {
  display: block;
  margin-bottom: 13px;
  color: #7a6560;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.archive-timeline {
  position: relative;
  display: flex;
  gap: 0;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-timeline::before {
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  height: 1px;
  background: #b9a68f;
  content: "";
}

.archive-timeline li {
  position: relative;
  z-index: 1;
}

.archive-timeline button {
  display: grid;
  gap: 7px;
  min-width: 70px;
  border: 0;
  background: transparent;
  color: #4b1113;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.archive-timeline button::before {
  width: 15px;
  height: 15px;
  margin: 0 auto;
  border: 3px solid #f5f0e8;
  border-radius: 50%;
  background: #8a7169;
  box-shadow: 0 0 0 1px #8a7169;
  content: "";
  transition: background var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.archive-timeline button:hover::before,
.archive-timeline button:focus-visible::before,
.archive-timeline .is-current::before {
  background: #caa24d;
  box-shadow: 0 0 0 1px #9c7628, 0 0 0 5px rgba(202, 162, 77, 0.15);
  transform: scale(1.08);
}

.archive-timeline button strong {
  font-size: 0.8rem;
}

.archive-timeline button small {
  color: #7a6560;
  font-size: 0.62rem;
}

.archive-page .archive-year-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 22px;
}

.archive-page .archive-year-card {
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 0 20px;
  overflow: hidden;
  border-color: rgba(75, 17, 19, 0.16);
  background: #fffaf3;
  box-shadow: 0 16px 34px rgba(48, 18, 16, 0.12);
  padding: 14px;
}

.archive-page .archive-year-card.is-current {
  border-color: rgba(202, 162, 77, 0.7);
}

.archive-year-cover {
  position: relative;
  grid-row: 1 / span 6;
  width: 100%;
  min-height: 0;
  aspect-ratio: 2 / 3;
  align-self: start;
  overflow: hidden;
  border-radius: 5px;
  background: #35080c;
  color: #fff9ec;
}

.archive-year-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-year-cover::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 2, 4, 0.03) 30%, rgba(26, 2, 4, 0.88) 100%);
  content: "";
}

.archive-year-cover-copy {
  position: absolute;
  z-index: 1;
  right: 13px;
  bottom: 14px;
  left: 13px;
  display: grid;
  gap: 2px;
}

.archive-year-cover-copy span {
  color: #e5c56f;
  font-size: 0.62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.archive-year-cover-copy strong {
  font-family: var(--font-brand);
  font-size: 2rem;
  line-height: 1;
}

.archive-year-cover-copy small {
  overflow: hidden;
  color: rgba(255, 249, 236, 0.78);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-page .archive-year-card-heading {
  margin-top: 2px;
}

.archive-page .archive-year-card-heading h2 {
  font-size: 1.55rem;
}

.archive-page .archive-year-card-heading > strong {
  align-self: start;
  border-color: transparent;
  background: #eee4d3;
  color: #6c574c;
}

.archive-page .archive-year-card.is-current .archive-year-card-heading > strong {
  background: #f0d98e;
  color: #5b370a;
}

.archive-page .archive-year-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 13px;
}

.archive-page .archive-year-stats span {
  border-left: 1px solid #ded2c3;
  padding-left: 8px;
}

.archive-page .archive-year-stats span:first-child {
  border-left: 0;
  padding-left: 0;
}

.archive-page .archive-year-lists {
  margin-top: 3px;
}

.archive-year-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-self: end;
  margin-top: 5px;
}

.archive-year-actions .archive-open-year {
  width: auto;
}

.archive-year-actions .secondary-button {
  white-space: nowrap;
}

.archive-detail-summary {
  display: flex;
  gap: 22px;
  align-items: center;
}

.archive-detail-summary .primary-button {
  flex: 0 0 auto;
  border-color: #d6b052;
  background: #f5e5b6;
  color: #521014;
}

.archive-page .archive-detail-heading {
  background: #35080c;
}

.archive-page .archive-list-section {
  border-top-width: 1px;
  border-top-color: rgba(151, 113, 37, 0.56);
}

.archive-recap-dialog {
  width: min(720px, calc(100vw - 28px));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.archive-recap-card {
  width: 100%;
  max-width: none;
  border: 1px solid rgba(202, 162, 77, 0.46);
  background: #f5f0e8;
  box-shadow: var(--shadow-modal);
}

.archive-recap-card .dialog-header {
  background: #35080c;
  color: #fff9ec;
}

.archive-recap-card .dialog-header h2 {
  margin: 3px 0 0;
  font-family: var(--font-brand);
  font-size: 1.45rem;
}

.archive-recap-card .modal-close-button {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 249, 236, 0.78);
  font-size: 1.35rem;
}

.archive-recap-card .modal-close-button:hover,
.archive-recap-card .modal-close-button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff9ec;
}

.archive-recap-poster {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  background: #220407;
  color: #fff9ec;
}

.archive-recap-covers {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.archive-recap-covers img,
.archive-recap-cover-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-recap-cover-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #5a1117, #240508);
  color: rgba(255, 249, 236, 0.38);
  font-family: var(--font-brand);
  font-size: 1.35rem;
}

.archive-recap-poster::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 2, 4, 0.96) 0%, rgba(24, 2, 4, 0.82) 40%, rgba(24, 2, 4, 0.3) 100%);
  content: "";
}

.archive-recap-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(440px, 74%);
  min-height: 400px;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
}

.archive-recap-overlay > span {
  color: #e5c56f;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.archive-recap-overlay h3 {
  margin: 5px 0 10px;
  font-family: var(--font-brand);
  font-size: 4.5rem;
  line-height: 0.95;
}

.archive-recap-overlay p {
  max-width: 410px;
  margin: 0 0 24px;
  color: rgba(255, 249, 236, 0.82);
  line-height: 1.55;
}

.archive-recap-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.archive-recap-stats > div {
  border-top: 1px solid rgba(229, 197, 111, 0.62);
  padding-top: 8px;
}

.archive-recap-stats dt {
  color: rgba(255, 249, 236, 0.62);
  font-size: 0.62rem;
  font-weight: 750;
  text-transform: uppercase;
}

.archive-recap-stats dd {
  margin: 2px 0 0;
  font-size: 1.1rem;
  font-weight: 850;
}

.archive-recap-signature {
  margin-top: 28px;
  color: #e5c56f;
  font-size: 0.68rem;
}

.archive-recap-actions {
  margin: 0;
  border-top: 1px solid #d8cbb8;
  padding: 16px 20px 20px;
}

@media (max-width: 720px) {
  .archive-timeline-shell {
    overflow-x: auto;
  }

  .archive-timeline {
    min-width: max-content;
    gap: 18px;
  }

  .archive-page .archive-year-card {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 0 14px;
  }

  .archive-year-cover {
    min-height: 0;
  }

  .archive-page .archive-year-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-page .archive-year-stats span:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .archive-year-actions {
    grid-column: 1 / -1;
    margin-top: 12px;
  }

  .archive-detail-summary {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .archive-detail-summary .primary-button {
    width: 100%;
  }

  .archive-recap-poster,
  .archive-recap-overlay {
    min-height: 430px;
  }

  .archive-recap-poster::after {
    background: linear-gradient(180deg, rgba(24, 2, 4, 0.55), rgba(24, 2, 4, 0.96) 62%);
  }

  .archive-recap-overlay {
    width: 100%;
    justify-content: end;
    padding: 26px;
  }

  .archive-recap-overlay h3 {
    font-size: 3.25rem;
  }
}

@media (max-width: 460px) {
  .archive-page .archive-year-card {
    grid-template-columns: 104px minmax(0, 1fr);
    padding: 10px;
  }

  .archive-year-cover {
    min-height: 0;
  }

  .archive-year-cover-copy strong {
    font-size: 1.45rem;
  }

  .archive-page .archive-year-lists {
    grid-column: 1 / -1;
    margin-top: 12px;
  }

  .archive-year-actions {
    grid-template-columns: 1fr;
  }

  .archive-recap-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site-menu-panel,
.toolbar-tools-popover {
  gap: var(--space-2);
  padding: var(--space-2);
}

:where(.site-menu-panel a, .site-menu-panel button, .toolbar-tool-command, .lobby-post-menu > div button) {
  border-radius: var(--radius-control);
}

:where(.compact-dialog, .movie-dialog, .poster-crop-dialog, .sign-in-dialog, .shop-product-dialog)::backdrop {
  background: rgba(16, 1, 3, 0.72);
  backdrop-filter: blur(4px);
}

:where(.compact-dialog-card, .movie-dialog .entry-panel, .crop-editor, .sign-in-card, .shop-product-dialog) {
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-modal);
}

:where(.compact-dialog-card, .crop-editor, .sign-in-card) {
  gap: var(--space-4);
  padding: var(--space-4);
}

:where(.compact-dialog-card, .crop-editor, .sign-in-card) > .dialog-header {
  min-height: 56px;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  border-bottom: 1px solid rgba(246, 217, 141, 0.2);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background: #3a0b0f;
  color: #fff8e9;
  padding: var(--space-3) var(--space-4);
}

:where(.compact-dialog-card, .crop-editor, .sign-in-card) > .dialog-header h2 {
  color: #fff8e9;
  font-family: var(--font-brand);
  font-size: 1.12rem;
}

.modal-close-button,
.shop-dialog-close,
.dialog-close {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 248, 237, 0.2);
  border-radius: 50%;
  background: rgba(12, 0, 2, 0.22);
  box-shadow: none;
  color: #fff8e9;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
}

:where(.modal-close-button, .shop-dialog-close, .dialog-close):hover,
:where(.modal-close-button, .shop-dialog-close, .dialog-close):focus-visible {
  border-color: rgba(246, 217, 141, 0.58);
  background: rgba(255, 248, 237, 0.12);
  color: #fff8e9;
  transform: none;
}

:where(.compact-dialog-actions, .form-actions) {
  gap: var(--space-2);
}

.compact-dialog-actions {
  border-top: 1px solid rgba(76, 53, 44, 0.12);
  padding-top: var(--space-3);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  border-radius: var(--radius-control);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
  border-color: rgba(202, 162, 77, 0.78);
  box-shadow: 0 0 0 3px rgba(202, 162, 77, 0.16);
  outline: 0;
}

:where(.profile-showcase, .lobby-friends, .lobby-picks, .lobby-feed, .lobby-cinematography, .shop-stage, .shop-product-card, .shop-reviews-window, .archive-year-card, .archive-media-card, .account-safety-card) {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

:where(.profile-identity, .account-main-premium, .archive-main) {
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-raised);
}

.ui-state,
:where(.friends-empty, .friend-search-message, .watchlist-members-empty, .recovery-empty, .profile-picker-empty, .archive-list-empty, .lobby-friends-empty, .lobby-picks-empty, .scrapbook-empty) {
  display: grid;
  min-height: 88px;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  border: 1px dashed rgba(255, 248, 237, 0.2);
  border-radius: var(--radius-card);
  background: rgba(255, 248, 237, 0.045);
  color: rgba(255, 248, 233, 0.7);
  padding: var(--space-4);
  line-height: 1.5;
  text-align: center;
}

.ui-state::before,
:where(.friends-empty, .friend-search-message, .watchlist-members-empty, .recovery-empty, .profile-picker-empty, .archive-list-empty, .lobby-friends-empty, .lobby-picks-empty, .scrapbook-empty)::before {
  width: 30px;
  border-top: 2px solid rgba(202, 162, 77, 0.68);
  content: "";
}

:where(.empty-state, .profile-picker-empty, .archive-list-empty, .archive-empty, .recovery-empty, .watchlist-members-empty, .friends-empty, .friend-search-message) {
  border-color: rgba(76, 53, 44, 0.18);
  background: rgba(255, 250, 242, 0.72);
  color: var(--muted);
}

.ui-state-loading,
[aria-busy="true"] .ui-state {
  opacity: 0.76;
}

.ui-state-loading::before,
[aria-busy="true"] .ui-state::before {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(202, 162, 77, 0.22);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: ui-state-spin 800ms linear infinite;
}

.ui-state-error,
.ui-feedback.is-error,
[data-state="error"] {
  border-color: rgba(168, 45, 41, 0.34);
  background: rgba(168, 45, 41, 0.09);
  color: #8c2524;
}

.ui-state-error::before,
.ui-feedback.is-error::before,
[data-state="error"]::before {
  border-top-color: #b93631;
}

.ui-state-success,
.ui-feedback.is-success,
[data-state="success"] {
  border-color: rgba(47, 114, 89, 0.34);
  background: rgba(47, 114, 89, 0.09);
  color: #285f4b;
}

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

@media (prefers-reduced-motion: reduce) {
  .ui-state-loading::before,
  [aria-busy="true"] .ui-state::before {
    animation: none;
  }
}

@media (max-width: 480px) {
  .archive-section-title {
    align-items: stretch;
    flex-direction: column;
  }

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

  .profile-link {
    width: 52px;
    justify-self: center;
  }
}

.shop-page .app-shell {
  min-height: 100dvh;
}

html.shop-availability-loading [data-shop-storefront] { display: none; }
.shop-coming-soon { display: grid; min-height: min(64dvh, 620px); place-items: center; align-content: center; gap: 12px; border: 1px solid rgba(246, 217, 141, 0.26); border-radius: 8px; background: linear-gradient(145deg, rgba(74, 13, 19, 0.94), rgba(23, 2, 5, 0.98)); color: #fff8e9; text-align: center; }
.shop-coming-soon h1 { margin: 0; font-family: var(--font-brand); font-size: clamp(2.6rem, 6vw, 5.4rem); }
.management-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: end; }
.shop-availability-toggle { display: grid; grid-template-columns: auto auto; gap: 3px 9px; align-items: center; border: 1px solid rgba(246, 217, 141, 0.28); border-radius: 8px; background: rgba(30, 4, 7, 0.34); color: #fff8e9; padding: 9px 12px; }
.shop-availability-toggle > span { grid-column: 1 / -1; color: rgba(255, 248, 233, 0.7); font-size: 0.67rem; font-weight: 800; }
.shop-availability-toggle input { width: 36px; height: 20px; accent-color: #d5aa4e; }
.shop-availability-toggle strong { color: #f6d98d; font-size: 0.78rem; }

.shop-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 42px auto 68px;
}

.shop-stage {
  position: relative;
  display: grid;
  min-height: 330px;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 30px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(225, 172, 53, 0.44);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(61, 22, 26, 0.99) 0 38%, rgba(61, 22, 26, 0.76) 62%, rgba(38, 7, 10, 0.42)),
    url("kino-keep-lobby-scene.png") center 58% / cover no-repeat;
  box-shadow: 0 28px 62px rgba(18, 0, 2, 0.38);
  color: #fff8e9;
  padding: clamp(28px, 6vw, 70px);
}

.shop-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%, rgba(16, 1, 3, 0.18));
}

.shop-stage > * {
  position: relative;
  z-index: 1;
}

.shop-stage-copy {
  max-width: 610px;
}

.shop-stage-copy > span {
  color: #efcb73;
  font-size: 0.78rem;
  font-weight: 900;
}

.shop-stage h1 {
  margin: 8px 0 14px;
  font-family: var(--font-brand);
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: 0;
  line-height: 1.02;
}

.shop-stage p {
  max-width: 56ch;
  margin: 0 0 24px;
  color: rgba(255, 248, 233, 0.8);
  line-height: 1.65;
}

.shop-stage-copy > strong {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border: 1px solid rgba(239, 203, 115, 0.72);
  border-radius: 4px;
  background: rgba(36, 4, 7, 0.68);
  color: #f6d98d;
  padding: 0 16px;
}

.shop-stage > img {
  width: min(150px, 100%);
  justify-self: end;
  filter: drop-shadow(0 18px 24px rgba(12, 0, 2, 0.4));
}

.shop-departments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.shop-departments article {
  min-height: 160px;
  border: 1px solid rgba(255, 248, 237, 0.2);
  border-radius: 7px;
  background: rgba(61, 20, 24, 0.96);
  box-shadow: 0 16px 30px rgba(18, 0, 2, 0.24);
  color: #fff8e9;
  padding: 22px;
}

.shop-departments article > span {
  color: #e9bd58;
  font-size: 0.72rem;
  font-weight: 900;
}

.shop-departments h2 {
  margin: 12px 0 8px;
  font-family: var(--font-brand);
  font-size: 1.2rem;
  letter-spacing: 0;
}

.shop-departments p {
  margin: 0;
  color: rgba(255, 248, 233, 0.72);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Profile menu — shared by the watchlist, lobby, archive, shop, and account pages. */
.profile-menu {
  flex: 0 0 auto;
  margin-left: 7px;
}

.site-menu summary.profile-menu-trigger {
  width: 40px;
  min-height: 40px;
  border: 1px solid rgba(225, 172, 53, 0.72);
  border-radius: 50%;
  padding: 0;
}

.site-menu summary.profile-menu-trigger::after {
  display: none;
}

.site-menu[open] summary.profile-menu-trigger,
.site-menu summary.profile-menu-trigger:hover,
.site-menu summary.profile-menu-trigger:focus-visible {
  border-color: #f6d98d;
  background: rgba(225, 172, 53, 0.12);
  box-shadow: 0 0 0 3px rgba(225, 172, 53, 0.13);
}

.profile-menu-trigger .profile-avatar {
  width: 31px;
  height: 31px;
  border: 0;
}

.profile-menu .profile-menu-panel {
  width: 250px;
  gap: 4px;
  padding: 7px;
}

.profile-menu-item {
  display: grid;
  gap: 2px;
  border-radius: 5px;
  color: var(--accent-dark);
  padding: 10px 11px;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.profile-menu-item + .profile-menu-item {
  border-top: 1px solid rgba(115, 26, 24, 0.14);
}

.profile-menu-item:hover,
.profile-menu-item:focus-visible,
.profile-menu-item.is-current {
  background: #efe2cf;
  color: #4b1113;
  outline: 0;
  transform: translateX(2px);
}

.profile-menu-item span {
  font-size: 0.86rem;
  font-weight: 900;
}

.profile-menu-item small {
  color: #7b6a5d;
  font-size: 0.68rem;
  line-height: 1.3;
}

.profile-menu-sign-out {
  width: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-menu-sign-out:hover,
.profile-menu-sign-out:focus-visible {
  color: #8d201f;
}

/* My Account — cream controls presented inside the Friends Lobby theater language. */
.account-page .app-shell,
.profile-page .app-shell {
  min-height: 100dvh;
}

.account-premium-topbar .hero-bar,
.profile-topbar .hero-bar {
  grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
}

.account-premium-topbar .site-menu-bar,
.profile-topbar .site-menu-bar {
  width: auto;
}

.account-premium-topbar .site-nav-button,
.profile-topbar .site-nav-button {
  padding-inline: 9px;
}

.account-main-premium {
  width: min(1120px, calc(100% - 32px));
  margin: 42px auto 72px;
  border-color: rgba(255, 248, 237, 0.18);
  background: #3d161a;
  box-shadow: 0 28px 64px rgba(18, 0, 2, 0.38);
}

.account-heading-premium {
  position: relative;
  display: flex;
  min-height: 210px;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  border-bottom-color: rgba(225, 172, 53, 0.48);
  background:
    linear-gradient(90deg, #3d161a 0 12%, rgba(61, 22, 26, 0.86) 38%, rgba(61, 22, 26, 0.18) 82%),
    url("kino-keep-lobby-scene.png") center 66% / cover no-repeat;
  padding: 42px clamp(22px, 5vw, 54px) 36px;
}

.account-heading-premium > * {
  position: relative;
  z-index: 1;
}

.account-heading-premium p,
.account-section-number {
  color: #f6d98d;
}

.account-heading-premium h1 {
  max-width: 650px;
  color: #fff8e9;
  font-family: var(--font-brand);
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: 0;
}

.account-heading-premium > div > span {
  color: rgba(255, 248, 233, 0.76);
}

.account-profile-preview {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(246, 217, 141, 0.58);
  border-radius: 4px;
  background: rgba(30, 4, 7, 0.42);
  color: #fff8e9;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 0 15px;
  text-decoration: none;
}

.account-profile-preview:hover,
.account-profile-preview:focus-visible {
  border-color: #f6d98d;
  background: rgba(246, 217, 141, 0.12);
  outline: 0;
}

.account-main-premium .account-form {
  background:
    linear-gradient(180deg, rgba(61, 22, 26, 0.98), rgba(44, 10, 14, 0.98));
}

.account-main-premium .account-section {
  border-bottom-color: rgba(255, 248, 237, 0.13);
}

.account-main-premium .account-section h2 {
  margin-top: 5px;
  color: #fff8e9;
  font-family: var(--font-display);
  font-size: 1.16rem;
}

.account-main-premium .account-section > div:first-child > p {
  color: rgba(255, 248, 233, 0.66);
}

.account-section-number {
  display: block;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.account-main-premium .account-fields label > span {
  color: #f6d98d;
}

.account-main-premium .account-fields input {
  border-color: rgba(225, 172, 53, 0.42);
  background: #fffaf2;
}

.account-main-premium .account-toggle,
.account-main-premium .account-archive-access,
.account-safety-card {
  border-color: rgba(225, 172, 53, 0.3);
  background: #fffaf2;
  box-shadow: inset 0 1px 0 #fff;
}

.account-main-premium .account-toggle:hover {
  border-color: rgba(225, 172, 53, 0.68);
}

.account-main-premium .account-save-row {
  color: #fff8e9;
}

.account-safety-grid {
  display: grid;
  gap: 10px;
}

.account-safety-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid;
  border-radius: 7px;
  padding: 16px;
}

.account-safety-card > div {
  display: grid;
  gap: 4px;
}

.account-safety-card strong {
  color: var(--ink);
}

.account-safety-card span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.account-safety-card .secondary-button,
.account-safety-card .primary-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

/* Profile — a poster-first public film identity inspired by the Friends Lobby. */
.profile-shell {
  display: grid;
  gap: 22px;
  width: min(1180px, calc(100% - 32px));
  margin: 42px auto 72px;
}

.profile-identity {
  position: relative;
  display: grid;
  min-height: 300px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(22px, 4vw, 46px);
  align-items: end;
  overflow: hidden;
  border: 1px solid rgba(225, 172, 53, 0.42);
  border-radius: 7px;
  background:
    linear-gradient(90deg, #3d161a 0 26%, rgba(61, 22, 26, 0.82) 50%, rgba(61, 22, 26, 0.2) 100%),
    url("kino-keep-lobby-scene.png") center 58% / cover no-repeat;
  box-shadow: 0 28px 62px rgba(18, 0, 2, 0.38);
  color: #fff8e9;
  padding: clamp(28px, 5vw, 58px);
}

.profile-identity::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 248, 237, 0.08);
  border-radius: inherit;
  box-shadow: inset 0 0 70px rgba(18, 0, 2, 0.2);
  content: "";
  pointer-events: none;
}

.profile-identity-glow {
  position: absolute;
  top: -90px;
  left: -60px;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 172, 53, 0.16), transparent 68%);
  pointer-events: none;
}

.profile-identity > *:not(.profile-identity-glow) {
  position: relative;
  z-index: 1;
}

.profile-hero-avatar {
  display: grid;
  width: clamp(116px, 15vw, 164px);
  height: clamp(116px, 15vw, 164px);
  place-items: center;
  border: 4px solid #e1ac35;
  border-radius: 50%;
  background: linear-gradient(135deg, #8f211f, #d3a948);
  background-position: center;
  background-size: cover;
  box-shadow: 0 20px 42px rgba(18, 0, 2, 0.42), 0 0 0 7px rgba(34, 4, 7, 0.54);
  color: #fff8e9;
  font-family: var(--font-brand);
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.profile-identity-copy h1 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: 0;
  line-height: 0.95;
}

.profile-handle {
  margin: 9px 0 0;
  color: #f6d98d;
  font-size: 0.84rem;
  font-weight: 800;
}

.profile-bio {
  max-width: 54ch;
  margin: 13px 0 0;
  color: rgba(255, 248, 233, 0.78);
  font-family: var(--font-display);
  font-size: 1.03rem;
  line-height: 1.5;
}

.profile-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 19px;
}

.profile-social-actions { gap: 10px; }

.profile-social-button {
  display: inline-flex;
  min-width: 112px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(246, 217, 141, 0.48);
  border-radius: var(--radius-control);
  background: rgba(28, 3, 6, 0.48);
  color: #fff8e9;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 900;
  padding: 0 15px;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}

.profile-social-button:hover:not(:disabled),
.profile-social-button:focus-visible {
  border-color: #f6d98d;
  background: rgba(246, 217, 141, 0.14);
  outline: 0;
}

.profile-social-button:disabled { cursor: default; opacity: 0.64; }

.profile-social-button.is-unfriend {
  border-color: rgba(255, 248, 233, 0.3);
  color: rgba(255, 248, 233, 0.78);
}

.profile-social-button.is-unfriend:hover,
.profile-social-button.is-unfriend:focus-visible {
  border-color: rgba(220, 79, 76, 0.72);
  background: rgba(174, 42, 42, 0.2);
  color: #fff8e9;
}

.profile-applause-button.is-active {
  border-color: #e8be5a;
  background: #e8be5a;
  color: #3b1115;
}

.profile-applause-count {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 248, 233, 0.12);
  padding: 0 5px;
  font-size: 0.65rem;
}

.profile-applause-button.is-active .profile-applause-count { background: rgba(59, 17, 21, 0.13); }

.profile-social-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: rgba(255, 248, 233, 0.68);
  font-size: 0.68rem;
}

.profile-ghost-button,
.profile-edit-list {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(246, 217, 141, 0.44);
  border-radius: 4px;
  background: rgba(28, 3, 6, 0.38);
  color: #fff8e9;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 0 13px;
  text-decoration: none;
}

.profile-ghost-button:hover,
.profile-ghost-button:focus-visible,
.profile-edit-list:hover,
.profile-edit-list:focus-visible {
  border-color: #f6d98d;
  background: rgba(246, 217, 141, 0.12);
  outline: 0;
}

.profile-message-dialog { width: min(720px, calc(100vw - 28px)); }
.profile-message-card { width: 100%; padding: 0; }
.profile-message-card > .dialog-header { padding: 18px 20px; }
.profile-message-thread {
  display: flex;
  min-height: 180px;
  max-height: min(46vh, 390px);
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  border-top: 1px solid rgba(76, 53, 44, 0.13);
  border-bottom: 1px solid rgba(76, 53, 44, 0.13);
  background: #f6ecdf;
  padding: 18px 20px;
}
.profile-message-bubble { max-width: min(78%, 470px); align-self: flex-start; border: 1px solid rgba(76, 53, 44, 0.14); border-radius: 6px 6px 6px 2px; background: #fffdf8; color: #3f302a; padding: 10px 12px; }
.profile-message-bubble.is-mine { align-self: flex-end; border-color: rgba(151, 39, 37, 0.2); border-radius: 6px 6px 2px 6px; background: #5a171c; color: #fff8e9; }
.profile-message-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.profile-message-bubble time { display: block; margin-top: 6px; color: #8b7a70; font-size: 0.58rem; }
.profile-message-bubble.is-mine time { color: rgba(255, 248, 233, 0.58); }
.profile-message-state { margin: auto; color: #83736a; font-size: 0.76rem; text-align: center; }
.profile-message-form { display: grid; gap: 12px; padding: 16px 20px 20px; }
.profile-message-form label { display: grid; gap: 6px; color: #6f5f57; font-size: 0.68rem; font-weight: 900; }
.profile-message-form textarea { width: 100%; resize: vertical; }

.profile-stats {
  display: grid;
  min-width: 172px;
  gap: 10px;
  margin: 0;
}

.profile-stats > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  border-bottom: 1px solid rgba(246, 217, 141, 0.22);
  padding: 0 0 9px;
}

.profile-stats dt {
  color: rgba(255, 248, 233, 0.64);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-stats dd {
  margin: 0;
  color: #f6d98d;
  font-family: var(--font-brand);
  font-size: 1.38rem;
}

.profile-showcase {
  overflow: hidden;
  border: 1px solid rgba(255, 248, 237, 0.16);
  border-radius: 7px;
  background: #3d161a;
  box-shadow: 0 22px 48px rgba(18, 0, 2, 0.3);
  color: #fff8e9;
  padding: clamp(22px, 4vw, 38px);
}

.profile-showcase-feature {
  border-color: rgba(225, 172, 53, 0.46);
  background:
    radial-gradient(circle at 50% -50%, rgba(225, 172, 53, 0.13), transparent 58%),
    linear-gradient(180deg, #4a1b20, #351015);
  padding: clamp(26px, 5vw, 48px);
}

.profile-showcase-worst {
  background: linear-gradient(135deg, #321116, #45191d);
}

.profile-showcase-classics {
  background:
    linear-gradient(180deg, rgba(40, 9, 13, 0.97), rgba(55, 17, 21, 0.98)),
    url("metallic-grain-texture.webp") center / cover;
}

.profile-showcase-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

.profile-showcase-kicker,
.profile-dialog-kicker {
  display: block;
  margin-bottom: 6px;
  color: #f6d98d;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.profile-showcase-heading h2 {
  margin: 0;
  color: #fff8e9;
  font-family: var(--font-brand);
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  letter-spacing: 0;
  line-height: 1;
}

.profile-showcase-heading p {
  margin: 8px 0 0;
  color: rgba(255, 248, 233, 0.65);
  font-family: var(--font-display);
  font-size: 0.92rem;
}

.profile-poster-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-poster-row > li,
.profile-poster-card,
.profile-poster-caption {
  min-width: 0;
}

.profile-poster-card {
  display: grid;
  width: 100%;
  gap: 9px;
  border: 0;
  background: transparent;
  color: #fff8e9;
  padding: 0;
  text-align: left;
}

.profile-poster-frame {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 2 / 3;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(225, 172, 53, 0.46);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(246, 217, 141, 0.09), transparent),
    #23070a;
  box-shadow: 0 16px 28px rgba(13, 0, 2, 0.34);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.profile-poster-card:hover .profile-poster-frame,
.profile-poster-card:focus-visible .profile-poster-frame {
  border-color: #f6d98d;
  box-shadow: 0 18px 32px rgba(13, 0, 2, 0.46), 0 0 0 2px rgba(246, 217, 141, 0.14);
  transform: translateY(-4px);
}

.profile-poster-card:focus-visible {
  outline: 0;
}

.profile-poster-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-poster-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: linear-gradient(145deg, #6e181b, #271014 72%);
  color: #fff3d6;
  font-family: var(--font-brand);
  font-size: clamp(0.78rem, 1.6vw, 1.25rem);
  line-height: 1.05;
  padding: 14px;
  text-align: center;
}

.profile-poster-card.is-empty .profile-poster-frame {
  border-style: dashed;
  color: rgba(255, 248, 233, 0.52);
  font-size: 0.72rem;
  font-weight: 800;
}

.profile-empty-mark {
  display: block;
  color: #f6d98d;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.profile-poster-rank {
  color: #f6d98d;
  font-family: var(--font-brand);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.profile-poster-caption strong,
.profile-poster-caption small {
  display: block;
}

.profile-poster-caption strong {
  overflow: hidden;
  color: #fff8e9;
  font-family: var(--font-display);
  font-size: 0.88rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-poster-caption small {
  margin-top: 4px;
  color: rgba(255, 248, 233, 0.52);
  font-size: 0.66rem;
}

.profile-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: rgba(255, 248, 233, 0.58);
  font-family: var(--font-display);
  font-size: 0.82rem;
  padding: 14px;
}

.profile-footer-note img {
  width: 27px;
  height: 34px;
  object-fit: contain;
}

.profile-footer-note p {
  margin: 0;
}

.profile-picker-dialog {
  width: min(720px, calc(100vw - 28px));
}

.profile-picker-card {
  width: 100%;
  max-height: min(88vh, 820px);
  overflow-y: auto;
}

.profile-picker-card .dialog-header h2,
.profile-intro-dialog .dialog-header h2 {
  font-family: var(--font-brand);
  font-size: 1.45rem;
}

.profile-dialog-kicker {
  color: var(--accent-dark);
}

.profile-picker-search > span,
.profile-intro-field > span {
  display: block;
  margin-bottom: 6px;
  color: #665b52;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-picker-results {
  display: grid;
  gap: 6px;
  max-height: 430px;
  overflow-y: auto;
  margin-top: 14px;
  padding-right: 3px;
}

.profile-picker-result {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  border: 1px solid #ded4c5;
  border-radius: 6px;
  background: #fffaf2;
  color: var(--ink);
  padding: 7px 10px 7px 7px;
  text-align: left;
}

.profile-picker-result:hover:not(:disabled),
.profile-picker-result:focus-visible:not(:disabled),
.profile-picker-result.is-selected {
  border-color: #caa24d;
  background: #f6ead4;
  outline: 0;
}

.profile-picker-result:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.profile-picker-artwork {
  display: grid;
  width: 48px;
  aspect-ratio: 2 / 3;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(145deg, #72191c, #321014);
  color: #fff4dc;
  font-weight: 900;
}

.profile-picker-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-picker-result > span:nth-child(2) strong,
.profile-picker-result > span:nth-child(2) small,
.profile-picker-empty strong,
.profile-picker-empty span {
  display: block;
}

.profile-picker-result > span:nth-child(2) small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
}

.profile-picker-state {
  color: var(--accent-dark);
  font-size: 0.7rem;
  font-weight: 900;
}

.profile-picker-empty {
  border: 1px dashed #cdbfae;
  border-radius: 6px;
  color: var(--ink);
  padding: 28px;
  text-align: center;
}

.profile-picker-empty span {
  max-width: 48ch;
  margin: 7px auto 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.profile-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.profile-picker-footer .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.profile-intro-dialog {
  width: min(540px, calc(100vw - 28px));
}

.profile-intro-field textarea {
  min-height: 120px;
}

.profile-intro-field small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: right;
}

@media (max-width: 900px) {
  .profile-identity {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-stats > div {
    display: block;
    border-bottom: 0;
    border-left: 1px solid rgba(246, 217, 141, 0.22);
    padding: 0 0 0 13px;
  }

  .profile-stats dd {
    margin-top: 5px;
  }
}

@media (max-width: 720px) {
  .account-heading-premium {
    min-height: 240px;
    align-items: start;
    flex-direction: column;
    justify-content: end;
  }

  .account-profile-preview {
    align-self: start;
  }

  .account-safety-card {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-shell,
  .account-main-premium {
    width: min(100% - 28px, 1180px);
    margin-top: 28px;
  }

  .profile-identity {
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    text-align: center;
  }

  .profile-identity-copy {
    display: grid;
    justify-items: center;
  }

  .profile-identity-actions {
    justify-content: center;
  }

  .profile-social-actions {
    width: min(100%, 430px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-social-button {
    min-width: 0;
    padding-inline: 9px;
  }

  .profile-message-thread {
    min-height: 220px;
    padding-inline: 14px;
  }

  .profile-message-bubble {
    max-width: 88%;
  }

  .profile-stats {
    width: 100%;
    grid-column: auto;
  }

  .profile-stats > div {
    text-align: left;
  }

  .profile-showcase {
    padding-inline: 18px;
  }

  .profile-showcase-heading {
    align-items: start;
    flex-direction: column;
  }

  .profile-poster-row {
    grid-template-columns: repeat(5, minmax(0, 42vw));
    overflow-x: auto;
    margin-inline: -18px;
    padding: 3px 18px 15px;
    scroll-snap-type: x proximity;
    scrollbar-color: rgba(246, 217, 141, 0.52) transparent;
  }

  .profile-poster-row li {
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .profile-menu {
    width: 100%;
    margin-left: 0;
  }

  .site-menu summary.profile-menu-trigger {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }

  .profile-menu .profile-menu-panel {
    right: 0;
    left: auto;
    width: min(280px, calc(100vw - 28px));
  }

  .profile-menu .profile-menu-panel::before {
    right: 26px;
    left: auto;
  }

  .account-main-premium .account-form {
    padding-inline: 18px;
  }

  .account-heading-premium {
    padding-inline: 18px;
  }

  .account-main-premium .profile-photo-editor {
    flex-direction: column;
  }

  .profile-identity {
    padding-inline: 20px;
  }

  .profile-stats {
    gap: 3px;
  }

  .profile-stats dt {
    font-size: 0.56rem;
  }

  .profile-stats dd {
    font-size: 1.1rem;
  }

  .profile-picker-result {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .profile-picker-artwork {
    width: 42px;
  }

  .profile-picker-state {
    grid-column: 2;
  }

  .profile-picker-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .shop-stage {
    grid-template-columns: 1fr;
  }

  .shop-stage > img {
    display: none;
  }

  .shop-departments {
    grid-template-columns: 1fr;
  }
}

.lobby-page .app-shell {
  min-height: 100dvh;
}

.lobby-topbar {
  position: relative;
}

.site-nav-button.is-current {
  color: #f6d98d;
}

.lobby-shell {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 720px) minmax(240px, 280px);
  justify-content: center;
  gap: 34px;
  width: min(1400px, calc(100% - 32px));
  margin: 42px auto 68px;
}

.lobby-left-rail {
  display: grid;
  min-width: 0;
  align-self: start;
  gap: 18px;
}

.lobby-friends {
  align-self: start;
  border: 1px solid rgba(255, 248, 237, 0.16);
  border-radius: 6px;
  background: rgba(61, 20, 24, 0.94);
  box-shadow: 0 18px 32px rgba(18, 0, 2, 0.26);
  padding: 14px;
}

.lobby-picks {
  border: 1px solid rgba(255, 248, 237, 0.16);
  border-radius: 6px;
  background: rgba(61, 20, 24, 0.94);
  box-shadow: 0 18px 32px rgba(18, 0, 2, 0.26);
  padding: 14px;
}

.lobby-picks h2 {
  margin: 0 0 13px;
  color: #fff8e9;
  font-family: var(--font-brand);
  font-size: 1.12rem;
  line-height: 1.1;
}

.lobby-picks-list {
  display: grid;
}

.lobby-pick {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 82px;
  border-top: 1px solid rgba(246, 217, 141, 0.17);
  color: #fff8e9;
  text-decoration: none;
  padding: 8px 2px;
  transition: background 150ms ease, color 150ms ease;
}

.lobby-pick:first-child {
  border-top: 0;
  padding-top: 2px;
}

.lobby-pick:hover,
.lobby-pick:focus-visible {
  background: rgba(255, 248, 233, 0.07);
  color: #f6d98d;
  outline: none;
}

.lobby-pick img {
  display: block;
  width: 50px;
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(225, 172, 53, 0.58);
  object-fit: cover;
}

.lobby-pick > span,
.lobby-pick strong,
.lobby-pick small {
  display: block;
  min-width: 0;
}

.lobby-pick strong {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.88rem;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.lobby-pick small {
  margin-top: 5px;
  color: rgba(255, 248, 233, 0.6);
  font-size: 0.68rem;
}

.lobby-picks-empty {
  margin: 0;
  color: rgba(255, 248, 233, 0.66);
  font-size: 0.8rem;
  line-height: 1.5;
}

.lobby-cinematography {
  align-self: start;
  border: 1px solid rgba(255, 248, 237, 0.16);
  border-radius: 6px;
  background: rgba(61, 20, 24, 0.94);
  box-shadow: 0 18px 32px rgba(18, 0, 2, 0.26);
  padding: 14px;
}

.lobby-cinematography .lobby-section-heading h2 {
  margin: 0;
  color: #fff8e9;
  font-family: var(--font-brand);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.1;
}

.cinematography-add {
  display: inline-flex;
  width: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 211, 113, 0.32);
  border-radius: 3px;
  background: #c63a35;
  color: #fff8e9;
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
  padding: 0;
}

.cinematography-add:hover {
  background: #de4a43;
}

.lobby-cinematography-quote {
  margin: 8px 0 14px;
  color: #f6d98d;
  font-family: var(--font-display);
  font-size: 0.86rem;
  line-height: 1.35;
}

.cinematography-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.cinematography-post {
  overflow: visible;
  border: 1px solid rgba(225, 172, 53, 0.45);
  border-radius: 4px;
  background: #250507;
  box-shadow: 0 8px 18px rgba(18, 0, 2, 0.2);
}

.cinematography-post:hover {
  border-color: rgba(246, 217, 141, 0.78);
}

.cinematography-post-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
}

.cinematography-post-meta .friend-avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

.cinematography-post-meta strong,
.cinematography-post-meta span {
  display: block;
}

.cinematography-post-meta strong {
  color: #fff8e9;
  font-size: 0.78rem;
}

.cinematography-post-meta span {
  margin-top: 2px;
  color: rgba(255, 248, 233, 0.6);
  font-size: 0.66rem;
}

.cinematography-media-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #160204;
}

.cinematography-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cinematography-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  color: #fff8e9;
  font-size: 0.72rem;
}

.cinematography-post-footer > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cinematography-reactions {
  position: relative;
  flex: 0 0 auto;
  color: #f6d98d;
  font-size: 0.7rem;
  white-space: nowrap;
}

.cinematography-reaction-picker {
  right: 0;
  left: auto;
}

.cinematography-dialog {
  width: min(620px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
}

.cinematography-dialog-card {
  width: 100%;
  max-height: min(88vh, 860px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

.cinematography-dialog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.cinematography-dialog-meta .friend-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
}

.cinematography-dialog-meta strong,
.cinematography-dialog-meta span {
  display: block;
}

.cinematography-dialog-meta strong {
  color: var(--ink);
}

.cinematography-dialog-meta span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.cinematography-dialog-frame {
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid var(--gold);
  border-radius: 4px;
  background: #160204;
  box-shadow: 0 14px 28px rgba(28, 2, 4, 0.2);
}

.cinematography-dialog-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cinematography-dialog-caption-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

.cinematography-dialog-caption-row h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.cinematography-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 14px;
}

.cinematography-comment-form input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffaf1;
  color: var(--ink);
  padding: 0 13px;
}

.cinematography-comment-form button {
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  font-weight: 900;
  padding: 0 6px;
}

.cinematography-empty {
  margin: 18px 0 2px;
  color: rgba(255, 248, 233, 0.62);
  font-size: 0.8rem;
  line-height: 1.45;
}

@media (max-width: 1120px) {
  .lobby-shell {
    grid-template-columns: minmax(210px, 250px) minmax(0, 720px);
  }

  .lobby-cinematography {
    grid-column: 1 / -1;
  }

  .cinematography-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lobby-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lobby-section-heading button {
  min-height: 36px;
  border: 1px solid rgba(255, 211, 113, 0.32);
  border-radius: 3px;
  background: #c63a35;
  color: #fff8e9;
  font-size: 0.73rem;
  font-weight: 900;
  padding: 0 10px;
}

.lobby-section-heading button:hover {
  background: #de4a43;
}

.lobby-friends h1 {
  margin: 0;
  color: #fff8e9;
  font-family: var(--font-brand);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
}

.lobby-friend-quote {
  margin: 10px 0 16px;
  color: #f6d98d;
  font-family: var(--font-display);
  font-size: 0.82rem;
  line-height: 1.35;
}

.lobby-friends-list {
  display: grid;
  gap: 7px;
}

.lobby-see-more-friends,
.lobby-top-six-button {
  width: 100%;
  min-height: 36px;
  border-radius: 4px;
  font-weight: 900;
  margin-top: 9px;
}

.lobby-see-more-friends {
  border: 1px solid rgba(255, 248, 233, 0.2);
  background: rgba(255, 248, 233, 0.1);
  color: #fff8e9;
}

.lobby-see-more-friends:hover:not(:disabled) {
  background: rgba(255, 248, 233, 0.17);
}

.lobby-see-more-friends:disabled {
  cursor: default;
  opacity: 0.48;
}

.lobby-top-six-button {
  border: 1px solid #efc75f;
  background: linear-gradient(180deg, #f3d477, #d7a63b);
  color: #4b1113;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
}

.lobby-top-six-button:hover {
  background: linear-gradient(180deg, #ffe393, #e4b546);
}

.top-six-dialog-card .dialog-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.top-six-options {
  display: grid;
  max-height: min(430px, 56vh);
  gap: 7px;
  overflow-y: auto;
  padding-right: 3px;
}

.top-six-option {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--accent-dark);
  cursor: pointer;
  padding: 6px 9px;
}

.top-six-option:has(input:checked) {
  border-color: #c9972c;
  background: #fff6dc;
}

.top-six-option .friend-avatar {
  width: 38px;
  height: 38px;
}

.top-six-option strong {
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-six-option input {
  width: 18px;
  height: 18px;
  accent-color: #b78218;
}

.top-six-option:has(input:disabled) {
  cursor: default;
  opacity: 0.58;
}

.top-six-status {
  min-height: 1.1em;
  margin: -5px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.lobby-friend {
  position: relative;
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 243, 219, 0.1);
  border-radius: 4px;
  background: rgba(255, 248, 233, 0.12);
  color: #fff8e9;
  font-size: 0.9rem;
  padding: 0 9px;
}

.lobby-friends .friend-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
}

.lobby-friend-details {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.lobby-friend-details strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-friend-activity {
  position: absolute;
  z-index: 4;
  top: calc(100% + 5px);
  left: 34px;
  max-width: calc(100% - 42px);
  overflow: hidden;
  border: 1px solid rgba(225, 172, 53, 0.5);
  border-radius: 4px;
  background: #fff8e9;
  color: rgba(255, 248, 233, 0.62);
  font-size: 0.68rem;
  opacity: 0;
  padding: 6px 8px;
  pointer-events: none;
  transform: translateY(-3px);
  text-overflow: ellipsis;
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
}

.lobby-friend:hover .lobby-friend-activity,
.lobby-friend:focus-within .lobby-friend-activity {
  color: #4b1113;
  opacity: 1;
  transform: translateY(0);
}

.lobby-friends-empty {
  margin: 0;
  color: rgba(255, 248, 233, 0.68);
  font-size: 0.86rem;
  line-height: 1.5;
}

.lobby-feed {
  min-width: 0;
  border: 1px solid rgba(255, 248, 237, 0.18);
  border-radius: 7px;
  background: #3d161a;
  box-shadow: 0 26px 55px rgba(18, 0, 2, 0.34);
  padding: 0 24px 24px;
}

.lobby-compose {
  display: grid;
  gap: 9px;
  border-bottom: 1px solid rgba(255, 243, 219, 0.22);
  padding: 20px 0;
}

.lobby-compose label {
  color: #f6d98d;
  font-family: var(--font-display);
  font-size: 1rem;
}

.lobby-compose textarea {
  min-height: 92px;
  resize: vertical;
  border: 1px solid rgba(225, 172, 53, 0.58);
  border-radius: 5px;
  background: rgba(255, 250, 240, 0.96);
  color: #393532;
  padding: 11px 12px;
  font: 0.95rem/1.45 var(--font-ui);
}

.lobby-film-search {
  margin-top: 2px;
  color: #f6d98d;
  font-family: var(--font-display);
  font-size: 0.9rem;
}

.lobby-compose input[type="search"] {
  min-height: 40px;
  border: 1px solid rgba(225, 172, 53, 0.58);
  border-radius: 5px;
  background: rgba(255, 250, 240, 0.96);
  color: #393532;
  padding: 0 12px;
  font: 0.9rem var(--font-ui);
}

.lobby-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lobby-compose-actions span {
  color: rgba(255, 248, 233, 0.62);
  font-size: 0.76rem;
}

.lobby-feed-list {
  display: grid;
}

.lobby-post {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  grid-template-rows: auto 1fr;
  column-gap: 20px;
  min-height: 184px;
  margin: 13px 0;
  border: 1px solid rgba(255, 243, 219, 0.15);
  border-radius: 5px;
  background: rgba(255, 248, 233, 0.14);
  padding: 16px;
}

.lobby-post:nth-child(even) {
  background: rgba(255, 236, 195, 0.21);
}

.lobby-post header {
  display: flex;
  grid-column: 1;
  align-items: center;
  gap: 10px;
}

.lobby-post header > div {
  display: grid;
  gap: 2px;
}

.lobby-post strong {
  color: #fff8e9;
  font-size: 0.9rem;
}

.lobby-post .profile-link-inline {
  color: #fffaf2;
  font-weight: 800;
}

.lobby-post .profile-link-inline:hover,
.lobby-post .profile-link-inline:focus-visible {
  color: #f6d98d;
}

.lobby-post time {
  color: rgba(255, 248, 233, 0.58);
  font-size: 0.74rem;
}

.lobby-post p {
  display: -webkit-box;
  grid-column: 1;
  max-height: 5.7em;
  margin: 12px 0 0;
  overflow: hidden;
  color: rgba(255, 248, 233, 0.9);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: pre-wrap;
}

.lobby-film-note {
  position: relative;
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  width: 110px;
  height: 164px;
  margin: 0;
  border: 1px solid rgba(225, 172, 53, 0.82);
  background: rgba(12, 0, 2, 0.42);
  cursor: help;
  padding: 5px;
}

.lobby-film-note img,
.lobby-film-fallback {
  width: 100%;
  height: 100%;
  background: #5c1418;
  object-fit: cover;
}

.lobby-film-note::after {
  position: absolute;
  right: 5px;
  bottom: 5px;
  left: 5px;
  display: grid;
  min-height: 38px;
  align-items: center;
  background: rgba(20, 0, 2, 0.92);
  color: #fff8e9;
  content: attr(data-film-title);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  padding: 7px;
  text-align: center;
  transition: opacity 160ms ease;
}

.lobby-film-note:hover::after,
.lobby-film-note:focus-visible::after {
  opacity: 1;
}

.lobby-post-copy {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  align-content: start;
}

.lobby-post-copy p {
  margin-top: 12px;
}

.lobby-read-more {
  width: max-content;
  margin: 7px 0 0;
  border: 0;
  background: transparent;
  color: #f6d98d;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0;
}

.lobby-reactions {
  position: relative;
  display: flex;
  margin: 0;
}

.lobby-post-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-column: 1 / -1;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0 42px;
}

.lobby-post-menu {
  position: absolute;
  right: 12px;
  bottom: 10px;
}

.lobby-post-menu summary {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 248, 233, 0.23);
  border-radius: 4px;
  color: rgba(255, 248, 233, 0.74);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.lobby-post-menu summary::-webkit-details-marker {
  display: none;
}

.lobby-post-menu > div {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: calc(100% + 5px);
  display: grid;
  min-width: 112px;
  border: 1px solid rgba(225, 172, 53, 0.6);
  border-radius: 4px;
  background: #fff8e9;
  box-shadow: 0 12px 24px rgba(15, 0, 2, 0.32);
  padding: 4px;
}

.lobby-post-menu > div button {
  min-height: 30px;
  border: 0;
  background: transparent;
  color: #4b1113;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: left;
  padding: 0 8px;
}

.lobby-post-menu > div button:hover {
  background: #f2eadc;
}

.lobby-comment-form {
  display: contents;
}

.lobby-comment-input {
  min-width: 0;
  min-height: 28px;
  border: 1px solid rgba(255, 248, 233, 0.25);
  border-radius: 999px;
  background: rgba(11, 0, 2, 0.24);
  color: #fff8e9;
  font: 0.78rem var(--font-ui);
  padding: 0 10px;
}

.lobby-comment-input::placeholder {
  color: rgba(255, 248, 233, 0.52);
}

.lobby-comment-submit,
.lobby-view-comments {
  min-height: 28px;
  border: 0;
  background: transparent;
  color: #f6d98d;
  font-size: 0.74rem;
  font-weight: 900;
  padding: 0 4px;
}

.lobby-view-comments {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 4px 0 0 42px;
}

.lobby-reaction-trigger {
  position: relative;
  display: grid;
  width: 29px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255, 248, 233, 0.24);
  border-radius: 999px;
  background: rgba(11, 0, 2, 0.26);
  font-size: 0.86rem;
  padding: 0;
}

.lobby-reaction-total {
  position: absolute;
  top: -7px;
  right: -8px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid #fff8e9;
  border-radius: 999px;
  background: #c63a35;
  color: #fff8e9;
  font: 900 0.6rem/1 var(--font-ui);
}

.lobby-reaction-picker {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 7px);
  left: 0;
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: min(330px, calc(100vw - 80px));
  flex-wrap: wrap;
  border: 1px solid rgba(225, 172, 53, 0.7);
  border-radius: 999px;
  background: #fff8e9;
  box-shadow: 0 14px 28px rgba(15, 0, 2, 0.38);
  padding: 5px;
}

.lobby-reaction-picker[hidden] {
  display: none;
}

.lobby-reaction {
  display: inline-flex;
  min-width: 30px;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(255, 248, 233, 0.24);
  border-radius: 50%;
  background: transparent;
  color: #3b191a;
  font-size: 0.84rem;
  padding: 0 5px;
}

.lobby-reaction.is-reacted {
  border-color: #f6d98d;
  background: rgba(225, 172, 53, 0.3);
}

.lobby-reaction-count {
  font: 800 0.68rem/1 var(--font-ui);
}

.lobby-reaction-picker.cinematography-reaction-picker {
  right: 0;
  left: auto;
  max-width: min(286px, calc(100vw - 48px));
  border-radius: 16px;
}

.friend-avatar.current-user-photo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
}

.friend-avatar.has-remote-photo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
}

.profile-crop-stage {
  aspect-ratio: 1;
}

.lobby-post-dialog-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.lobby-post-dialog-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.lobby-post-dialog {
  width: min(600px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
}

.lobby-post-dialog-feature {
  display: flex;
  min-height: 114px;
  justify-content: space-between;
  gap: 22px;
}

.lobby-post-dialog-feature > div {
  min-width: 0;
}

.lobby-post-dialog-feature h2 {
  margin: 0 0 38px;
  color: var(--ink);
  font-size: 1.2rem;
}

.lobby-post-dialog-feature img {
  width: 76px;
  height: 114px;
  flex: 0 0 auto;
  border: 1px solid var(--gold);
  object-fit: cover;
  padding: 3px;
}

.lobby-post-dialog-feature img[hidden] {
  display: none;
}

.lobby-post-dialog-text {
  margin: 16px 0 0;
  color: var(--ink);
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.lobby-post-dialog-comments {
  display: grid;
  gap: 9px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.lobby-dialog-comment {
  border-left: 3px solid var(--gold);
  background: #f7efe4;
  padding: 9px 11px;
}

.lobby-dialog-comment strong,
.lobby-dialog-comment span {
  display: block;
}

.lobby-dialog-comment strong {
  color: var(--accent-dark);
  font-size: 0.82rem;
}

.lobby-dialog-comment span {
  margin-top: 3px;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cinematography-dialog-comment {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

.cinematography-dialog-comment .friend-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  margin: 0;
}

.cinematography-comment-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.cinematography-dialog-comment .cinematography-comment-heading strong {
  display: block;
}

.cinematography-comment-heading time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.7rem;
}

.lobby-empty {
  margin: 34px 0;
  color: rgba(255, 248, 233, 0.68);
  text-align: center;
}

@media (max-width: 720px) {
  .lobby-shell {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 28px;
  }

  .lobby-left-rail {
    order: 2;
  }

  .lobby-cinematography {
    order: 3;
  }

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

  .lobby-friends-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .lobby-feed {
    padding: 18px;
  }

  .lobby-post {
    grid-template-columns: minmax(0, 1fr) 82px;
    column-gap: 12px;
    min-height: 130px;
  }

  .lobby-film-note {
    width: 82px;
    height: 122px;
  }
}

.optional-form-grid .wide,
.optional-form-grid .also-add-field {
  grid-column: 1 / -1;
}

.movie-dialog .form-grid .wide > input {
  min-height: 48px;
  font-size: 1rem;
}

@media (max-width: 680px) {
  .optional-form-grid {
    grid-template-columns: 1fr;
  }

  .optional-form-grid .wide,
  .optional-form-grid .also-add-field {
    grid-column: auto;
  }
}

/* Shop — deliberately shares the Friends Lobby visual language. */
.shop-shell {
  width: min(1240px, calc(100% - 32px));
  margin: 38px auto 72px;
}

.shop-stage {
  display: grid;
  height: 400px;
  min-height: 0;
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.35fr);
  gap: 0;
  border: 1px solid rgba(255, 248, 237, 0.16);
  border-radius: 6px;
  background: rgba(61, 20, 24, 0.94);
  box-shadow: 0 18px 32px rgba(18, 0, 2, 0.26);
  padding: 0;
}

.shop-stage::after {
  background: linear-gradient(90deg, rgba(61, 20, 24, 0.2), rgba(61, 20, 24, 0.05));
}

.shop-stage-copy {
  z-index: 2;
  max-width: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 3.2vw, 40px);
}

.shop-kicker,
.shop-section-heading > div > span,
.shop-product-copy > span {
  color: #e9bd58;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shop-stage h1 {
  margin: 7px 0 11px;
  color: #fff8e9;
  font-family: var(--font-brand);
  font-size: clamp(2.15rem, 3.2vw, 3rem);
  line-height: 0.98;
}

.shop-stage p {
  max-width: 37ch;
  margin: 0 0 18px;
  color: rgba(255, 248, 233, 0.74);
  font-size: 1rem;
  line-height: 1.48;
}

.shop-primary-button,
.shop-product-copy button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(246, 217, 141, 0.62);
  border-radius: 4px;
  background: rgba(36, 4, 7, 0.68);
  color: #f6d98d;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0 16px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.shop-primary-button:hover,
.shop-product-copy button:hover {
  border-color: #f6d98d;
  background: #f6d98d;
  color: #3b1115;
  transform: translateY(-1px);
}

.shop-showcase {
  position: relative;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid rgba(246, 217, 141, 0.16);
  background: #250508;
}

.shop-showcase::before,
.shop-showcase::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 64px;
  background: linear-gradient(90deg, rgba(61, 20, 24, 0.92), transparent);
  pointer-events: none;
}

.shop-showcase::after {
  right: 0;
  left: auto;
  transform: rotate(180deg);
}

.shop-showcase-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: shop-showcase-scroll 36s linear infinite;
}

.shop-showcase-track img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.shop-reviews-window:hover .shop-reviews-track,
.shop-reviews-window:focus .shop-reviews-track {
  animation-play-state: paused;
}

.shop-intro {
  margin: 18px 0 46px;
  color: rgba(255, 248, 233, 0.72);
  text-align: center;
}

.shop-intro p { margin: 0; }
.shop-intro span { display: inline-block; width: 28px; border-top: 1px solid #e9bd58; vertical-align: middle; margin: 0 10px 0 0; }

.shop-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 16px;
}

.shop-section-heading h2 {
  margin: 7px 0 0;
  color: #fff8e9;
  font-family: var(--font-brand);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1;
}

.shop-section-heading > p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 248, 233, 0.65);
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: right;
}

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

.shop-product-card {
  overflow: hidden;
  border: 1px solid rgba(255, 248, 237, 0.16);
  border-radius: 6px;
  background: rgba(61, 20, 24, 0.94);
  box-shadow: 0 18px 32px rgba(18, 0, 2, 0.26);
  color: #fff8e9;
  transition: transform 160ms ease, border-color 160ms ease;
}

.shop-product-card:hover { border-color: rgba(246, 217, 141, 0.58); transform: translateY(-3px); }

.shop-product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid rgba(246, 217, 141, 0.16);
  background: #240508;
}

.shop-product-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(25, 2, 5, 0.3)); pointer-events: none; }
.shop-product-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 10% center; }
.shop-product-card[data-product="plush"] .shop-product-image img,
.shop-product-card[data-product="popcorn-bucket"] .shop-product-image img {
  object-fit: contain;
  object-position: center;
  background: #cec4bf;
}
.product-image-popcorn img { object-position: 35% center; }
.product-image-mug img { object-position: 55% center; }
.product-image-pints img { object-position: 77% center; }
.product-image-plush img { object-position: 100% center; }

.shop-product-copy { display: grid; gap: 8px; padding: 16px; }
.shop-product-copy h3 { margin: 0; color: #fff8e9; font-family: var(--font-brand); font-size: 1.08rem; line-height: 1.05; }
.shop-product-copy p { min-height: 58px; margin: 0; color: rgba(255, 248, 233, 0.66); font-size: 0.8rem; line-height: 1.5; }
.shop-product-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; }
.shop-product-copy strong { color: #f6d98d; font-family: var(--font-brand); font-size: 1.05rem; }
.shop-product-copy button { min-height: 32px; font-size: 0.72rem; padding: 0 10px; }

.shop-reviews { margin-top: 56px; }
.shop-reviews-window { overflow: hidden; outline: 0; border: 1px solid rgba(255, 248, 237, 0.16); border-radius: 6px; background: rgba(61, 20, 24, 0.94); box-shadow: 0 18px 32px rgba(18, 0, 2, 0.26); }
.shop-reviews-track { display: flex; width: max-content; gap: 12px; padding: 14px; animation: shop-reviews-scroll 58s linear infinite; }
.shop-reviews-track article { width: min(316px, calc(100vw - 72px)); min-height: 148px; border: 1px solid rgba(246, 217, 141, 0.16); border-radius: 4px; background: rgba(41, 8, 12, 0.72); padding: 16px; }
.shop-reviews-track article > div { display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 8px; }
.review-avatar { display: grid; grid-row: span 2; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(246, 217, 141, 0.5); border-radius: 50%; background: #5f1e22; color: #f6d98d; font-size: 0.72rem; font-weight: 900; }
.shop-reviews-track strong { color: #fff8e9; font-size: 0.78rem; }
.shop-reviews-track article > div > span:last-child { color: #e9bd58; font-size: 0.64rem; letter-spacing: 0.07em; }
.shop-reviews-track p { margin: 14px 0 0; color: rgba(255, 248, 233, 0.71); font-size: 0.83rem; font-style: italic; line-height: 1.55; }

.shop-product-dialog { width: min(760px, calc(100% - 28px)); grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid rgba(246, 217, 141, 0.54); border-radius: 7px; background: #3d1418; box-shadow: 0 28px 62px rgba(18, 0, 2, 0.6); color: #fff8e9; padding: 0; }
.shop-product-dialog[open] { display: grid; }
.shop-product-dialog::backdrop { background: rgba(18, 0, 2, 0.72); backdrop-filter: blur(3px); }
.shop-dialog-close { position: absolute; z-index: 3; top: 10px; right: 12px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(246, 217, 141, 0.55); border-radius: 50%; background: rgba(36, 4, 7, 0.78); color: #fff8e9; font-size: 1.35rem; line-height: 1; }
.shop-dialog-image { min-height: 100%; background: #240508; }
.shop-dialog-image > img { display: block; width: 100%; height: 100%; min-height: 390px; object-fit: cover; object-position: 10% center; }
.shop-dialog-image > img[hidden] { display: none; }
.shop-product-dialog[data-product="popcorn-tee"] .shop-dialog-image > img { object-position: 35% center; }
.shop-product-dialog[data-product="mug"] .shop-dialog-image > img { object-position: 55% center; }
.shop-product-dialog[data-product="pints"] .shop-dialog-image > img { object-position: 77% center; }
.shop-product-dialog[data-product="plush"] .shop-dialog-image > img { object-position: 100% center; }
.shop-dialog-copy { display: flex; flex-direction: column; align-items: stretch; padding: 46px 30px 28px; }
.shop-dialog-copy > span { color: #e9bd58; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.shop-dialog-copy h2 { margin: 9px 0 12px; color: #fff8e9; font-family: var(--font-brand); font-size: 1.8rem; line-height: 1; }
.shop-dialog-copy p { margin: 0 0 22px; color: rgba(255, 248, 233, 0.7); line-height: 1.55; }
.shop-dialog-copy strong { color: #f6d98d; font-family: var(--font-brand); font-size: 1.28rem; }
.shop-dialog-copy label { display: grid; gap: 7px; margin: 22px 0 14px; color: rgba(255, 248, 233, 0.72); font-size: 0.75rem; font-weight: 800; }
.shop-dialog-copy select { border-color: rgba(246, 217, 141, 0.32); border-radius: 4px; background: rgba(36, 4, 7, 0.74); color: #fff8e9; }
.shop-dialog-button { width: 100%; }
.shop-dialog-copy small { margin-top: 12px; color: rgba(255, 248, 233, 0.5); font-size: 0.71rem; text-align: center; }

@keyframes shop-showcase-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes shop-reviews-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .shop-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .shop-shell { margin-top: 22px; }
  .shop-stage { height: auto; grid-template-columns: 1fr; }
  .shop-stage-copy { min-height: 240px; }
  .shop-showcase { height: 180px; border-top: 1px solid rgba(246, 217, 141, 0.16); border-left: 0; }
  .shop-section-heading { align-items: start; flex-direction: column; gap: 10px; }
  .shop-section-heading > p { text-align: left; }
  .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-product-card:last-child { grid-column: 1 / -1; }
  .shop-product-card:last-child .shop-product-image { aspect-ratio: 1.8 / 1; }
  .shop-product-dialog[open] { grid-template-columns: 1fr; }
  .shop-dialog-image > img { min-height: 280px; max-height: 330px; }
  .shop-dialog-copy { padding: 30px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-showcase-track,
  .shop-reviews-track { animation: none; }
}

/* Product classifications are carried by the detail dialog rather than repeated on cards. */
.shop-product-copy > span { display: none; }

.shop-product-carousel > img {
  position: absolute;
  inset: 0;
}

.shop-product-carousel > img[hidden] { display: none; }

.shop-product-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.shop-product-carousel .shop-product-image-alt { display: none; }
.shop-product-carousel .shop-product-toggle:checked ~ .shop-product-image-primary { display: none; }
.shop-product-carousel .shop-product-toggle:checked ~ .shop-product-image-alt { display: block; }
.shop-product-carousel .shop-product-toggle:checked ~ .shop-pint-bundle-boxes { display: grid; }

.shop-pint-box-preview {
  position: absolute;
  inset: 8%;
  overflow: hidden;
  border: 14px solid #171313;
  border-top-width: 36px;
  border-radius: 5px;
  background: #4b1117;
  box-shadow: 0 10px 22px rgba(31, 5, 8, 0.28), inset 0 0 0 2px #caa24d;
}

.shop-pint-box-preview > span {
  position: absolute;
  z-index: 2;
  top: -28px;
  right: 0;
  left: 0;
  color: #f6d98d;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.shop-pint-box-preview > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-pint-bundle-exact {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #f8eddb;
}

.shop-pint-bundle-exact > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-pint-bundle-boxes {
  position: absolute;
  inset: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  background: #f8eddb;
  padding: 8px;
}

.shop-pint-bundle-boxes > .shop-pint-box-preview {
  position: relative;
  inset: auto;
  border-width: 9px;
  border-top-width: 30px;
}

.shop-pint-bundle-boxes .shop-pint-box-preview > span {
  top: -24px;
  font-size: 0.5rem;
}

.shop-keeper-kit-visual {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 3px;
  background: #ead8ba;
  padding: 3px;
}

.shop-keeper-kit-visual[hidden] { display: none; }

.shop-keeper-kit-visual > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  background: #f8eddb;
}

.shop-keeper-kit-dialog-visual {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
}

.shop-product-dialog[data-product="keeper-kit"] { grid-template-columns: 1fr; }
.shop-product-dialog[data-product="keeper-kit"] .shop-dialog-image { min-height: 0; }

.shop-product-image-arrow {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(246, 217, 141, 0.72);
  border-radius: 50%;
  background: rgba(36, 4, 7, 0.82);
  color: #f6d98d;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 160ms ease, color 160ms ease;
}

.shop-product-image-arrow:hover {
  background: #f6d98d;
  color: #3b1115;
}

.shop-product-card[data-product="keeper-kit"] .shop-product-image { aspect-ratio: 1 / 1; }

/* Shop milestone: shared bag, product pages, and private catalog management. */
.shop-cart-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.shop-cart-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(246, 217, 141, 0.52);
  border-radius: 999px;
  background: rgba(246, 217, 141, 0.14);
  color: #f6d98d;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.shop-cart-count.is-empty { opacity: 0.6; }

.shop-cart-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: min(760px, calc(100dvh - 30px));
  overflow: hidden;
  border: 1px solid rgba(246, 217, 141, 0.34);
  border-radius: var(--radius-panel);
  background: #351015;
  box-shadow: var(--shadow-modal);
  color: #fff8e9;
  padding: 0;
}

.shop-cart-dialog::backdrop { background: rgba(16, 1, 3, 0.74); backdrop-filter: blur(4px); }
.shop-cart-card { display: grid; max-height: min(760px, calc(100dvh - 30px)); grid-template-rows: auto minmax(0, 1fr) auto; }
.shop-cart-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255, 248, 237, 0.14); padding: 22px 24px 18px; }
.shop-cart-card > header span { color: #d6ac55; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.shop-cart-card > header h2 { margin: 4px 0 0; font-family: var(--font-brand); font-size: 1.8rem; }
.shop-cart-close { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255, 248, 237, 0.2); border-radius: 50%; background: transparent; color: #fff8e9; font-size: 1.3rem; }
.shop-cart-items { overflow: auto; padding: 8px 24px; }
.shop-cart-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; border-bottom: 1px solid rgba(255, 248, 237, 0.12); padding: 16px 0; }
.shop-cart-item > img { width: 76px; aspect-ratio: 1; border-radius: var(--radius-control); object-fit: cover; background: #f5ead9; }
.shop-cart-item > div { display: grid; gap: 5px; }
.shop-cart-item > div > span { color: rgba(255, 248, 233, 0.62); font-size: 0.74rem; }
.shop-cart-item > div:last-child { justify-items: end; align-self: stretch; align-content: space-between; }
.shop-cart-item > div:last-child button { border: 0; background: transparent; color: rgba(255, 248, 233, 0.58); font-size: 0.7rem; text-decoration: underline; }
.shop-cart-stepper { display: inline-grid !important; width: max-content; grid-template-columns: 28px 28px 28px; place-items: center; gap: 0 !important; overflow: hidden; border: 1px solid rgba(246, 217, 141, 0.22); border-radius: var(--radius-control); }
.shop-cart-stepper button { width: 28px; height: 28px; border: 0; background: rgba(255, 248, 237, 0.06); color: #fff8e9; }
.shop-cart-stepper span { font-size: 0.72rem; }
.shop-cart-card > footer { display: grid; gap: 12px; border-top: 1px solid rgba(255, 248, 237, 0.14); background: rgba(18, 1, 4, 0.18); padding: 18px 24px 22px; }
.shop-cart-card > footer > div { display: flex; align-items: center; justify-content: space-between; }
.shop-cart-card > footer > div span { color: rgba(255, 248, 233, 0.68); }
.shop-cart-card > footer > div strong { color: #f6d98d; font-family: var(--font-brand); font-size: 1.35rem; }
.shop-cart-card > footer small { color: rgba(255, 248, 233, 0.48); text-align: center; }
.shop-cart-empty { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 12px; color: rgba(255, 248, 233, 0.68); text-align: center; }
.shop-cart-empty a { color: #f6d98d; font-weight: 800; }

.shop-card-inventory {
  display: block !important;
  width: max-content;
  color: #d9b460 !important;
  font-size: 0.66rem !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shop-card-inventory[data-state="out_of_stock"] { color: #e58e88 !important; }
.shop-card-inventory[data-state="preorder"] { color: #d6b9ef !important; }
.shop-product-copy > div { flex-wrap: wrap; }
.shop-card-page-link,
.shop-dialog-page-link { color: #f6d98d; font-size: 0.7rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.shop-card-page-link { margin-left: auto; }
.shop-dialog-page-link { margin-top: 13px; text-align: center; }
.shop-dialog-inventory { display: block !important; margin-top: 7px; color: #d9b460 !important; font-size: 0.72rem !important; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.shop-dialog-inventory[data-state="out_of_stock"] { color: #e58e88 !important; }

.product-shell,
.management-shell { width: min(1180px, calc(100% - 32px)); margin: 30px auto 72px; }
.product-breadcrumbs { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: rgba(255, 248, 233, 0.58); font-size: 0.78rem; }
.product-breadcrumbs a { color: #f6d98d; font-weight: 800; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr); overflow: hidden; border: 1px solid rgba(255, 248, 237, 0.19); border-radius: var(--radius-panel); background: #431318; box-shadow: var(--shadow-raised); }
.product-gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; min-width: 0; border-right: 1px solid rgba(255, 248, 237, 0.14); background: #f7eddd; padding: 18px; }
.product-main-photo { min-height: 560px; overflow: hidden; border-radius: var(--radius-card); background: #f7eddd; }
.product-main-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-detail[data-product="plush"] .product-main-photo img,
.product-detail[data-product="popcorn-bucket"] .product-main-photo img {
  object-fit: contain;
  background: #cec4bf;
}
.product-thumbnails { display: flex; flex-direction: column; gap: 9px; order: -1; }
.product-thumbnails button { overflow: hidden; width: 72px; aspect-ratio: 1; border: 2px solid transparent; border-radius: var(--radius-control); background: #fff8ed; padding: 0; opacity: 0.72; }
.product-thumbnails button.is-active { border-color: #b7852e; opacity: 1; }
.product-thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-purchase-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 64px); }
.product-heading-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.product-kicker { color: #e4bd63; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.product-inventory-state,
.product-variant-inventory { color: #d8b15e; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.product-inventory-state::before,
.product-variant-inventory::before { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #58a781; content: ""; }
.product-inventory-state[data-state="low_stock"]::before,
.product-variant-inventory[data-state="low_stock"]::before { background: #e2ae41; }
.product-inventory-state[data-state="out_of_stock"]::before,
.product-variant-inventory[data-state="out_of_stock"]::before { background: #c65c58; }
.product-inventory-state[data-state="preorder"]::before,
.product-variant-inventory[data-state="preorder"]::before,
.product-inventory-state[data-state="draft"]::before { background: #a884c2; }
.product-purchase-panel h1 { margin: 12px 0 9px; color: #fff8e9; font-family: var(--font-brand); font-size: clamp(2.25rem, 4vw, 3.8rem); line-height: 0.98; }
.product-price { color: #f6d98d; font-family: var(--font-brand); font-size: 1.65rem; }
.product-description { margin: 22px 0 26px; color: rgba(255, 248, 233, 0.72); line-height: 1.7; }
.product-option-field { display: grid; gap: 8px; color: rgba(255, 248, 233, 0.78); font-size: 0.74rem; font-weight: 800; }
.product-option-field select { min-height: 46px; border-color: rgba(246, 217, 141, 0.24); background: rgba(27, 3, 6, 0.34); color: #fff8e9; padding: 0 13px; }
.product-variant-inventory { min-height: 20px; margin: 9px 0 0; }
.product-buy-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.product-buy-row label { display: grid; gap: 5px; color: rgba(255, 248, 233, 0.66); font-size: 0.68rem; font-weight: 800; }
.product-buy-row input { width: 100%; min-height: 44px; border-color: rgba(246, 217, 141, 0.24); background: rgba(27, 3, 6, 0.34); color: #fff8e9; text-align: center; }
.product-buy-row .shop-primary-button { width: 100%; align-self: end; }
.product-purchase-notes { display: grid; gap: 12px; margin-top: 24px; border-top: 1px solid rgba(255, 248, 237, 0.13); padding-top: 20px; }
.product-purchase-notes > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; }
.product-purchase-notes > div > span { color: #d8b15e; }
.product-purchase-notes p { display: grid; gap: 2px; margin: 0; font-size: 0.75rem; }
.product-purchase-notes p strong { color: #fff8e9; }
.product-purchase-notes p span { color: rgba(255, 248, 233, 0.54); line-height: 1.45; }
.product-information { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.product-info-card { border: 1px solid rgba(255, 248, 237, 0.16); border-radius: var(--radius-card); background: rgba(61, 20, 24, 0.94); box-shadow: var(--shadow-card); color: #fff8e9; padding: clamp(24px, 4vw, 38px); }
.product-info-card h2,
.product-related h2 { margin: 8px 0 12px; font-family: var(--font-brand); font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1; }
.product-info-card p { margin: 0; color: rgba(255, 248, 233, 0.66); line-height: 1.65; }
.product-info-card ul { display: grid; gap: 10px; margin: 17px 0 0; padding: 0; list-style: none; }
.product-info-card li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; color: rgba(255, 248, 233, 0.72); }
.product-info-card li::before { color: #d8b15e; content: "✓"; font-weight: 900; }
.product-size-table-wrap { overflow-x: auto; margin-top: 18px; }
.product-size-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.product-size-table-wrap th,
.product-size-table-wrap td { border-bottom: 1px solid rgba(255, 248, 237, 0.12); padding: 10px 8px; text-align: left; }
.product-size-table-wrap thead th { color: #d8b15e; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }
.product-related { margin-top: 46px; }
.product-related > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; color: #fff8e9; }
.product-related > header a { color: #f6d98d; font-size: 0.76rem; font-weight: 800; }
.product-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-related-grid article { overflow: hidden; border: 1px solid rgba(255, 248, 237, 0.16); border-radius: var(--radius-card); background: rgba(61, 20, 24, 0.94); box-shadow: var(--shadow-card); }
.product-related-grid a { display: grid; color: #fff8e9; text-decoration: none; }
.product-related-grid img { width: 100%; aspect-ratio: 1.35 / 1; object-fit: cover; background: #f7eddd; }
.product-related-grid span { margin: 15px 16px 0; color: #d8b15e; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.product-related-grid h3 { margin: 6px 16px; font-family: var(--font-brand); font-size: 1.2rem; }
.product-related-grid strong { margin: 0 16px 17px; color: #f6d98d; }
.product-not-found,
.management-access { display: grid; min-height: 460px; place-items: center; align-content: center; gap: 13px; border: 1px solid rgba(255, 248, 237, 0.16); border-radius: var(--radius-panel); background: rgba(61, 20, 24, 0.94); color: #fff8e9; padding: 32px; text-align: center; }
.product-not-found[hidden],
.management-access[hidden] { display: none; }
.product-not-found h1,
.management-access h1 { margin: 0; font-family: var(--font-brand); font-size: clamp(2rem, 5vw, 3.6rem); }
.product-not-found p,
.management-access p { max-width: 48ch; margin: 0 0 8px; color: rgba(255, 248, 233, 0.66); line-height: 1.65; }

.management-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: start; border: 1px solid rgba(255, 248, 237, 0.17); border-radius: var(--radius-panel); background: rgba(61, 20, 24, 0.96); box-shadow: var(--shadow-raised); color: #fff8e9; padding: clamp(26px, 5vw, 48px); }
.management-hero h1 { margin: 7px 0 10px; font-family: var(--font-brand); font-size: clamp(2.1rem, 4vw, 3.45rem); line-height: 1; }
.management-hero p { max-width: 64ch; margin: 0; color: rgba(255, 248, 233, 0.64); line-height: 1.6; }
.management-stats { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 0 0; border-top: 1px solid rgba(255, 248, 237, 0.12); padding-top: 20px; }
.management-stats div { display: grid; gap: 5px; border-right: 1px solid rgba(255, 248, 237, 0.12); padding: 0 20px; }
.management-stats div:first-child { padding-left: 0; }
.management-stats div:last-child { border-right: 0; }
.management-stats dt { color: rgba(255, 248, 233, 0.54); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.management-stats dd { margin: 0; color: #f6d98d; font-family: var(--font-brand); font-size: 1.55rem; }
.management-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; }
.management-catalog-panel { position: sticky; top: 16px; overflow: hidden; border: 1px solid rgba(255, 248, 237, 0.16); border-radius: var(--radius-card); background: #3d1418; box-shadow: var(--shadow-card); color: #fff8e9; }
.management-catalog-panel > header { display: grid; gap: 14px; border-bottom: 1px solid rgba(255, 248, 237, 0.12); padding: 20px; }
.management-catalog-panel > header > div > span,
.management-editor-heading span:first-child { color: #d8b15e; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.management-catalog-panel h2,
.management-editor-heading h2 { margin: 5px 0 0; font-family: var(--font-brand); font-size: 1.55rem; }
.management-catalog-panel input[type="search"] { border-color: rgba(246, 217, 141, 0.2); background: rgba(22, 2, 5, 0.34); color: #fff8e9; }
.management-filter-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid rgba(255, 248, 237, 0.12); padding: 8px; }
.management-filter-row button { min-height: 34px; border: 0; border-radius: var(--radius-control); background: transparent; color: rgba(255, 248, 233, 0.58); font-size: 0.65rem; font-weight: 800; }
.management-filter-row button.is-active { background: rgba(246, 217, 141, 0.14); color: #f6d98d; }
.management-product-list { max-height: calc(100dvh - 260px); overflow: auto; padding: 8px; }
.management-product-row { display: grid; width: 100%; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: #fff8e9; padding: 8px; text-align: left; }
.management-product-row:hover,
.management-product-row.is-active { border-color: rgba(246, 217, 141, 0.24); background: rgba(246, 217, 141, 0.08); }
.management-product-row img { width: 48px; aspect-ratio: 1; border-radius: 4px; object-fit: cover; background: #f7eddd; }
.management-product-row > span { display: grid; min-width: 0; gap: 3px; }
.management-product-row strong { overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.management-product-row small { overflow: hidden; color: rgba(255, 248, 233, 0.5); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.management-product-row em { border-radius: 999px; background: rgba(73, 152, 111, 0.18); color: #9ed2b7; font-size: 0.54rem; font-style: normal; font-weight: 900; padding: 4px 6px; text-transform: uppercase; }
.management-product-row em[data-state="draft"] { background: rgba(218, 176, 84, 0.16); color: #e6c36f; }
.management-product-row em[data-state="archived"] { background: rgba(255, 248, 237, 0.08); color: rgba(255, 248, 233, 0.5); }
.management-list-empty { padding: 32px 16px; color: rgba(255, 248, 233, 0.54); font-size: 0.76rem; text-align: center; }
.management-editor { overflow: hidden; border: 1px solid rgba(76, 53, 44, 0.18); border-radius: var(--radius-panel); background: #fbf5eb; box-shadow: var(--shadow-raised); color: #3d2e28; }
.management-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(76, 53, 44, 0.14); background: #f4eadb; padding: 22px 26px; }
.management-editor-heading > span { border-radius: 999px; background: rgba(47, 114, 89, 0.1); color: #2d6a52; font-size: 0.68rem; font-weight: 800; padding: 7px 10px; }
.management-editor-heading > span.is-unsaved { background: rgba(168, 91, 37, 0.1); color: #9b5a24; }
.management-form-section { border-bottom: 1px solid rgba(76, 53, 44, 0.13); padding: 28px 26px; }
.management-form-section > header { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; margin-bottom: 22px; }
.management-form-section > header > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(151, 106, 37, 0.3); border-radius: 50%; color: #976a25; font-size: 0.62rem; font-weight: 900; }
.management-form-section h3 { margin: 0; font-family: var(--font-brand); font-size: 1.22rem; }
.management-form-section header p { margin: 4px 0 0; color: #75665e; font-size: 0.75rem; line-height: 1.45; }
.management-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.management-field { display: grid; gap: 7px; color: #5b4d46; font-size: 0.7rem; font-weight: 800; }
.management-field-wide { grid-column: 1 / -1; }
.management-field input,
.management-field select,
.management-field textarea,
.management-media-toolbar input,
.management-image-list input,
.management-variant-row input,
.management-variant-row select { border: 1px solid rgba(76, 53, 44, 0.2); background: #fffdf8; color: #392b26; }
.management-field textarea { resize: vertical; }
.management-price-input { display: grid; grid-template-columns: 36px minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(76, 53, 44, 0.2); border-radius: var(--radius-control); background: #fffdf8; }
.management-price-input > span { display: grid; place-items: center; border-right: 1px solid rgba(76, 53, 44, 0.14); color: #976a25; }
.management-price-input input { border: 0; border-radius: 0; }
.management-media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.management-upload-button,
.management-media-toolbar button,
.management-variant-heading button,
.management-action-bar button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(76, 53, 44, 0.22); border-radius: var(--radius-control); background: #fffdf8; color: #4a3932; font-size: 0.7rem; font-weight: 800; padding: 0 13px; }
.management-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.management-media-toolbar > div { display: grid; min-width: min(480px, 100%); grid-template-columns: minmax(0, 1fr) auto; }
.management-media-toolbar > div input { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.management-media-toolbar > div button { border-left: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.management-media-note { margin: 10px 0 16px; color: #82726a; font-size: 0.68rem; }
.management-image-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.management-image-list figure { overflow: hidden; margin: 0; border: 1px solid rgba(76, 53, 44, 0.16); border-radius: var(--radius-card); background: #fffdf8; }
.management-image-list figure.is-cover { border-color: rgba(151, 106, 37, 0.62); box-shadow: 0 0 0 2px rgba(151, 106, 37, 0.08); }
.management-image-list figure > img { display: block; width: 100%; aspect-ratio: 1.2 / 1; object-fit: cover; background: #f4eadb; }
.management-image-list figcaption { display: grid; gap: 8px; padding: 10px; }
.management-image-list figcaption > span { color: #6e5d55; font-size: 0.62rem; font-weight: 900; text-transform: uppercase; }
.management-image-list figcaption > div { display: flex; gap: 5px; }
.management-image-list figcaption button { min-height: 28px; border: 1px solid rgba(76, 53, 44, 0.16); border-radius: 4px; background: #f7efe4; color: #5b4d46; font-size: 0.62rem; }
.management-variant-heading { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 9px; color: #5b4d46; font-size: 0.7rem; font-weight: 900; }
.management-variant-list { display: grid; gap: 8px; }
.management-variant-row { display: grid; grid-template-columns: minmax(120px, 1.3fr) minmax(110px, 1fr) minmax(110px, 1fr) 76px 34px; gap: 8px; align-items: end; border: 1px solid rgba(76, 53, 44, 0.12); border-radius: var(--radius-control); background: #f7efe4; padding: 10px; }
.management-variant-row label { display: grid; gap: 5px; color: #76675f; font-size: 0.6rem; font-weight: 800; }
.management-variant-row > button { width: 34px; height: 38px; border: 1px solid rgba(139, 47, 40, 0.2); border-radius: var(--radius-control); background: rgba(168, 45, 41, 0.06); color: #9c3833; }
.management-action-bar { position: sticky; z-index: 2; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(76, 53, 44, 0.16); background: rgba(251, 245, 235, 0.96); backdrop-filter: blur(8px); padding: 16px 26px; }
.management-action-bar > div:first-child { display: grid; gap: 3px; }
.management-action-bar > div:first-child span { color: #503e36; font-size: 0.74rem; font-weight: 900; }
.management-action-bar > div:first-child small { color: #88776f; font-size: 0.62rem; }
.management-action-bar > div:last-child { display: flex; gap: 8px; }
.management-action-bar button.shop-primary-button {
  border-color: #982522;
  background: linear-gradient(180deg, #c43d37, #a72c29);
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fffaf2;
}
.management-action-bar .management-danger-button { border-color: rgba(160, 56, 48, 0.25); color: #9f3933; }
.management-action-bar .management-public-profile-button { border-color: rgba(128, 95, 32, 0.34); background: #ead393; color: #4b2b19; }
.management-action-bar .management-public-profile-button:hover:not(:disabled) { border-color: #9a7129; background: #dfc16c; }
.management-action-bar .management-public-profile-button:disabled { cursor: not-allowed; opacity: 0.44; }

/* Home Page Management */
.homepage-management-shell { width: min(1320px, calc(100% - 32px)); }
.homepage-management-hero { grid-template-columns: minmax(0, 1fr) auto; }
.homepage-management-summary { display: grid; align-content: center; justify-items: end; gap: 4px; color: #fff8e9; }
.homepage-management-summary span { color: #f4cf73; font-size: 0.74rem; font-weight: 900; }
.homepage-management-summary small { color: rgba(255, 248, 233, 0.68); font-size: 0.66rem; }
.homepage-management-layout { grid-template-columns: 300px minmax(0, 1fr); }
.homepage-section-panel > header { padding-bottom: 16px; }
.homepage-section-list { display: grid; padding: 8px; }
.homepage-section-button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 248, 237, 0.1);
  border-radius: 3px;
  background: transparent;
  color: #fff8e9;
  padding: 12px 10px;
  text-align: left;
  cursor: pointer;
}
.homepage-section-button > span { grid-row: 1 / 3; color: #d8b15e; font-size: 0.63rem; font-weight: 900; padding-top: 2px; }
.homepage-section-button strong { font-family: var(--font-brand); font-size: 0.92rem; }
.homepage-section-button small { overflow: hidden; color: rgba(255, 248, 233, 0.58); font-size: 0.58rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.homepage-section-button:hover { background: rgba(255, 248, 237, 0.06); }
.homepage-section-button.is-active { background: #f4eadb; color: #3d2e28; }
.homepage-section-button.is-active small { color: #75665e; }
.homepage-version-panel { display: grid; gap: 10px; border-top: 1px solid rgba(255, 248, 237, 0.14); padding: 18px; }
.homepage-version-panel > div > span { color: #d8b15e; font-size: 0.6rem; font-weight: 900; text-transform: uppercase; }
.homepage-version-panel h3 { margin: 3px 0 0; font-family: var(--font-brand); font-size: 1rem; }
.homepage-version-panel select,
.homepage-version-panel button { width: 100%; min-height: 38px; border: 1px solid rgba(255, 248, 237, 0.18); border-radius: var(--radius-control); background: rgba(22, 2, 5, 0.34); color: #fff8e9; padding: 0 10px; font-size: 0.68rem; }
.homepage-version-panel button { cursor: pointer; font-weight: 800; }
.homepage-version-panel button:disabled { cursor: default; opacity: 0.45; }
.homepage-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; min-height: 460px; }
.homepage-editor-fields .management-field { align-content: start; }
.homepage-editor-fields .management-field-wide,
.homepage-image-field { grid-column: 1 / -1; }
.homepage-editor-fields textarea { resize: vertical; }
.homepage-range { width: 100%; accent-color: #b72d2f; }
.homepage-editor-fields output { display: block; margin-top: 5px; color: #8a6753; font-size: 0.66rem; font-weight: 800; }
.homepage-image-field { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 18px; align-items: center; border: 1px solid rgba(76, 53, 44, 0.16); border-radius: var(--radius-card); background: #fffdf8; padding: 12px; }
.homepage-image-field img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; background: #2b080b; }
.homepage-image-field > div { display: grid; justify-items: start; gap: 8px; }
.homepage-image-field strong { font-family: var(--font-brand); font-size: 1rem; }
.homepage-image-field small { color: #75665e; font-size: 0.65rem; }
.homepage-image-field .management-upload-button { display: inline-flex; min-height: 38px; align-items: center; border-radius: var(--radius-control); background: #b72d2f; color: #fffaf2; padding: 0 14px; font-size: 0.68rem; font-weight: 900; cursor: pointer; }
.homepage-image-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.homepage-adjust-crop { min-height: 38px; border: 1px solid rgba(89, 55, 43, 0.24); border-radius: var(--radius-control); background: #f7efe4; color: #59372f; padding: 0 14px; font-size: 0.68rem; font-weight: 900; cursor: pointer; }
.homepage-adjust-crop:hover { border-color: rgba(149, 45, 43, 0.38); background: #fffaf2; }
.homepage-crop-dialog { width: min(900px, calc(100vw - 28px)); }
.homepage-crop-stage-shell { min-height: 300px; }
.homepage-crop-stage { width: min(700px, calc(100vw - 96px)); max-height: min(58vh, 520px); aspect-ratio: 1330 / 1035; }
.homepage-management-actions > div:last-child { flex-wrap: wrap; justify-content: flex-end; }

.discover-management-shell { width: min(1320px, calc(100% - 32px)); }
.discover-management-hero { grid-template-columns: minmax(0, 1fr) auto; }
.discover-management-layout { grid-template-columns: 300px minmax(0, 1fr); }
.discover-section-panel > header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.discover-add-shelf { min-height: 34px; border: 1px solid rgba(246, 217, 141, 0.28); border-radius: var(--radius-control); background: rgba(246, 217, 141, 0.1); color: #f6d98d; font-size: 0.66rem; font-weight: 900; padding: 0 11px; }
.discover-editor-fields { display: grid; gap: 24px; }
.discover-management-note { margin: 0; color: #75665e; font-size: 0.72rem; line-height: 1.55; }
.discover-emoji-field { position: relative; align-content: start; }
.discover-emoji-picker { position: relative; }
.discover-emoji-picker > summary {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(151, 106, 37, 0.28);
  border-radius: var(--radius-control);
  background: #f7efe4;
  color: #694b1e;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 900;
  list-style: none;
  padding: 0 11px;
}
.discover-emoji-picker > summary::-webkit-details-marker { display: none; }
.discover-emoji-picker > summary::after { content: "▾"; margin-left: 7px; color: #a2742d; }
.discover-emoji-picker[open] > summary { border-color: rgba(151, 106, 37, 0.5); background: #fffaf1; }
.discover-emoji-panel {
  position: absolute;
  z-index: 12;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: min(520px, calc(100vw - 72px));
  max-height: 390px;
  gap: 14px;
  overflow-y: auto;
  border: 1px solid rgba(76, 53, 44, 0.2);
  border-radius: 6px;
  background: #fffdf8;
  box-shadow: 0 18px 38px rgba(46, 24, 17, 0.2);
  padding: 14px;
}
.discover-emoji-panel section { display: grid; gap: 7px; }
.discover-emoji-panel section > strong { color: #806d62; font-size: 0.58rem; text-transform: uppercase; }
.discover-emoji-panel section > div { display: grid; grid-template-columns: repeat(10, 36px); gap: 6px; }
.discover-emoji-panel button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(76, 53, 44, 0.13);
  border-radius: 5px;
  background: #f8f0e5;
  cursor: pointer;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.22rem;
}
.discover-emoji-panel button:hover,
.discover-emoji-panel button:focus-visible { border-color: rgba(151, 106, 37, 0.55); background: #fff8e8; transform: translateY(-1px); }
.discover-toggle-field { display: flex; min-height: 46px; align-items: center; gap: 10px; border: 1px solid rgba(76, 53, 44, 0.14); border-radius: var(--radius-control); background: #fffdf8; padding: 0 13px; }
.discover-toggle-field input { width: 18px; height: 18px; accent-color: #aa2d2d; }
.discover-toggle-field span { color: #4f4039; font-size: 0.72rem; font-weight: 800; }
.discover-catalog-editor { display: grid; gap: 12px; border-top: 1px solid rgba(76, 53, 44, 0.13); padding-top: 22px; }
.discover-catalog-editor > div:first-child { display: grid; gap: 4px; }
.discover-catalog-editor > div:first-child strong { font-family: var(--font-brand); font-size: 1.15rem; }
.discover-catalog-editor > div:first-child small { color: #75665e; font-size: 0.68rem; }
.discover-catalog-editor > input { border: 1px solid rgba(76, 53, 44, 0.2); background: #fffdf8; color: #392b26; }
.discover-catalog-results,
.discover-selected-titles { display: grid; gap: 7px; }
.discover-catalog-results { max-height: 270px; overflow: auto; border: 1px solid rgba(76, 53, 44, 0.12); border-radius: var(--radius-control); background: rgba(244, 234, 219, 0.58); padding: 7px; }
.discover-selected-titles { border-top: 1px solid rgba(76, 53, 44, 0.1); padding-top: 12px; }
.discover-catalog-row { display: grid; min-height: 58px; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid rgba(76, 53, 44, 0.12); border-radius: var(--radius-control); background: #fffdf8; padding: 7px; }
.discover-catalog-row img { width: 38px; height: 48px; border-radius: 3px; object-fit: cover; background: #eee2d1; }
.discover-catalog-row > div { display: grid; min-width: 0; gap: 3px; }
.discover-catalog-row strong { overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.discover-catalog-row small { color: #7c6b62; font-size: 0.6rem; }
.discover-catalog-row > span { display: flex; gap: 5px; }
.discover-catalog-row button,
.discover-shelf-controls button { min-height: 30px; border: 1px solid rgba(76, 53, 44, 0.16); border-radius: 4px; background: #f7efe4; color: #5b4d46; font-size: 0.62rem; font-weight: 800; padding: 0 9px; }
.discover-catalog-row.is-result button { border-color: rgba(164, 113, 35, 0.28); background: #f6e4ad; color: #4b3514; }
.discover-shelf-controls { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid rgba(76, 53, 44, 0.13); padding-top: 18px; }
.discover-shelf-controls .management-danger-button { color: #9f3933; }
.discover-management-actions > div:last-child { flex-wrap: wrap; justify-content: flex-end; }
.management-editor-heading > span.is-error { background: rgba(168, 45, 41, 0.1); color: #9f3933; }

@media (max-width: 920px) {
  .discover-management-hero,
  .discover-management-layout { grid-template-columns: 1fr; }
  .discover-section-panel { position: static; }
  .discover-section-panel .homepage-section-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .discover-management-shell { width: min(100% - 20px, 1320px); }
  .discover-section-panel .homepage-section-list { grid-template-columns: 1fr; }
  .discover-catalog-row { grid-template-columns: 38px minmax(0, 1fr); }
  .discover-catalog-row > span { grid-column: 1 / -1; justify-content: flex-end; }
  .discover-shelf-controls,
  .discover-management-actions > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discover-emoji-panel { right: auto; left: 0; width: min(360px, calc(100vw - 56px)); }
  .discover-emoji-panel section > div { grid-template-columns: repeat(7, 36px); }
}

@media (max-width: 900px) {
  .homepage-management-hero { grid-template-columns: 1fr; }
  .homepage-management-summary { justify-items: start; }
  .homepage-management-layout { grid-template-columns: 1fr; }
  .homepage-section-panel { position: static; }
  .homepage-section-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .homepage-management-shell { width: min(100% - 20px, 1320px); }
  .homepage-section-list,
  .homepage-editor-fields { grid-template-columns: 1fr; }
  .homepage-image-field { grid-template-columns: 1fr; }
  .homepage-image-field img { height: 190px; }
  .homepage-crop-stage-shell { min-height: 220px; padding: 10px; }
  .homepage-crop-stage { width: min(100%, calc(100vw - 68px)); }
  .homepage-management-actions > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .product-detail { grid-template-columns: minmax(0, 1fr); }
  .product-gallery { border-right: 0; border-bottom: 1px solid rgba(255, 248, 237, 0.14); }
  .management-layout { grid-template-columns: minmax(0, 1fr); }
  .management-catalog-panel { position: static; }
  .management-product-list { display: grid; max-height: 360px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .product-shell,
  .management-shell { width: min(100% - 20px, 1180px); margin-top: 18px; }
  .product-gallery { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .product-main-photo { min-height: 0; aspect-ratio: 1; }
  .product-thumbnails { flex-direction: row; order: 0; overflow-x: auto; }
  .product-thumbnails button { flex: 0 0 66px; }
  .product-purchase-panel { padding: 28px 20px; }
  .product-information { grid-template-columns: minmax(0, 1fr); }
  .product-related > header { align-items: start; flex-direction: column; }
  .product-related-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-cart-item { grid-template-columns: 62px minmax(0, 1fr); }
  .shop-cart-item > img { width: 62px; }
  .shop-cart-item > div:last-child { grid-column: 2; grid-row: 2; grid-template-columns: 1fr auto; justify-items: start; }
  .management-hero { grid-template-columns: minmax(0, 1fr); }
  .management-hero > button { width: 100%; }
  .management-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .management-stats div { padding: 0 10px; }
  .management-product-list { grid-template-columns: minmax(0, 1fr); }
  .management-field-grid { grid-template-columns: minmax(0, 1fr); }
  .management-field-wide { grid-column: auto; }
  .management-media-toolbar { align-items: stretch; flex-direction: column; }
  .management-media-toolbar > div { min-width: 0; }
  .management-image-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-variant-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-variant-row > button { grid-column: 2; justify-self: end; }
  .management-action-bar { position: static; align-items: stretch; flex-direction: column; }
  .management-action-bar > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Universal signed-in header and restrained premium accents. */
:root {
  --line-on-dark: rgba(255, 248, 237, 0.16);
  --line-on-dark-strong: rgba(255, 248, 237, 0.25);
  --line-on-light: rgba(76, 53, 44, 0.2);
}

.signed-header-inner {
  grid-template-columns: 170px minmax(0, 1fr) max-content;
  gap: 16px;
  min-height: 74px;
}

.signed-header-inner > .brand-block,
.signed-header-inner > .brand-block .header-brand {
  width: 170px;
  min-height: 74px;
  overflow: visible;
}

.signed-header-inner > .brand-block .header-brand-logo {
  width: 270px;
  max-width: none;
  height: 56px;
  pointer-events: none;
  transform: translateY(8px);
}

.signed-header-inner > .site-menu-bar {
  grid-column: 3;
  width: max-content;
  min-height: 74px;
}

.signed-header .site-menu summary,
.signed-header .site-nav-button {
  min-height: 74px;
  color: #d9cbbd;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 800;
  padding-inline: 11px;
}

.signed-header .site-menu summary.profile-menu-trigger {
  width: 40px;
  min-height: 40px;
  padding: 0;
}

.signed-header .site-menu.is-current > summary,
.signed-header .site-nav-button.is-current {
  border-bottom-color: var(--gold);
  color: #fff8e8;
}

.signed-header .site-menu-panel {
  gap: 7px;
  border-color: rgba(255, 248, 237, 0.72);
  border-radius: 7px;
  padding: 8px;
}

.signed-header .site-menu-panel::before {
  border-color: rgba(255, 248, 237, 0.72);
}

.universal-watchlist-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.universal-watchlist-row .watchlist-visibility-static {
  min-width: 60px;
}

/* The signed-in pages use a compact, read-only watchlist switcher. */
.watchlists-menu .site-menu-panel:has(.universal-watchlist-row) {
  width: min(370px, calc(100vw - 28px));
}

.universal-watchlist-row .watchlist-tab {
  display: flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  border-color: #d8cec1;
  border-radius: 6px;
  background: #fffdf9;
  color: #741e20;
  line-height: 1.2;
  text-decoration: none;
}

.universal-watchlist-row .watchlist-tab:hover,
.universal-watchlist-row .watchlist-tab:focus-visible {
  border-color: #d4a748;
  background: #fff5d8;
  color: #551315;
  text-decoration: none;
}

.universal-watchlist-row .watchlist-visibility-static {
  width: 66px;
  min-width: 66px;
}

/* Gold now identifies selection, focus, and premium hierarchy instead of every edge. */
.site-menu summary.profile-menu-trigger,
.profile-link,
.friend-avatar,
.review-avatar {
  border-color: var(--line-on-dark-strong);
}

.profile-page .profile-menu-trigger,
.account-page .profile-menu-trigger {
  border-color: rgba(246, 217, 141, 0.72);
  box-shadow: 0 0 0 2px rgba(225, 172, 53, 0.1);
}

.lobby-pick img,
.cinematography-post,
.lobby-post-poster,
.profile-identity,
.profile-showcase-feature,
.profile-poster-frame,
.shop-product-dialog,
.cinematography-dialog-card,
.lobby-post-dialog-card,
.compact-dialog-card,
.poster-crop-dialog,
.movie-dialog .entry-panel {
  border-color: var(--line-on-dark-strong);
}

html,
body {
  overflow-x: clip;
}

.cinematography-post:hover,
.profile-poster-card:hover .profile-poster-frame,
.profile-poster-card:focus-visible .profile-poster-frame,
.shop-product-card:hover {
  border-color: rgba(246, 217, 141, 0.58);
}

.movie-dialog .dialog-header,
.movie-dialog .dialog-header h2,
.movie-dialog .dialog-header-actions,
.movie-dialog .optional-details,
.movie-dialog .also-add-field,
.movie-dialog .title-mode-control,
.movie-dialog .title-mode-note {
  border-color: var(--line-on-dark);
}

.movie-dialog .form-grid input,
.movie-dialog .form-grid select,
.movie-dialog .form-grid textarea,
.lobby-compose textarea,
.lobby-compose input[type="search"] {
  border-color: var(--line-on-light);
}

.movie-dialog .header-media-type-toggle label,
.movie-dialog .media-type-toggle label,
.movie-dialog .also-add-options label {
  border-color: var(--line-on-light);
}

.movie-dialog .header-media-type-toggle label:has(input:checked),
.movie-dialog .media-type-toggle label:has(input:checked),
.movie-dialog .also-add-options label:has(input:checked) {
  border-color: rgba(225, 172, 53, 0.72);
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid #f0c866;
  outline-offset: 3px;
}

@media (max-width: 920px) {
  .signed-header-inner,
  .signed-header-inner.watchlist-hero-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .signed-header-inner > .brand-block,
  .signed-header-inner > .brand-block .header-brand {
    width: 170px;
    min-height: 64px;
  }

  .signed-header-inner > .brand-block .header-brand-logo {
    height: 50px;
  }

  .signed-header-inner > .year-row,
  .signed-header-inner > .site-menu-bar {
    grid-column: 1;
    width: 100%;
  }

  .signed-header .site-menu summary,
  .signed-header .site-nav-button {
    min-height: 52px;
  }

  .signed-header .profile-menu {
    display: grid;
    place-items: center;
  }

  .signed-header .site-menu summary.profile-menu-trigger {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    margin: 0 auto;
  }
}

/* Compact signed-in mobile header and off-canvas navigation. */
.mobile-nav-trigger,
.mobile-profile-shortcut,
.mobile-brand-mark,
.mobile-nav-drawer-heading,
.mobile-nav-backdrop,
.mobile-nav-label {
  display: none;
}

@media (max-width: 920px) {
  body.mobile-nav-open {
    overflow: hidden;
  }

  .signed-header-inner,
  .signed-header-inner.watchlist-hero-bar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: 64px;
    align-items: center;
    gap: 8px;
  }

  .mobile-nav-trigger,
  .mobile-brand-mark {
    position: relative;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(246, 217, 141, 0.32);
    border-radius: 5px;
    background: rgba(34, 3, 6, 0.34);
    color: #fff8e9;
  }

  .mobile-nav-trigger {
    grid-column: 1;
    grid-row: 1;
    align-content: center;
    gap: 5px;
    padding: 0;
  }

  .mobile-nav-trigger > span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .mobile-brand-mark {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    border: 0;
    background: transparent;
    overflow: hidden;
    text-decoration: none;
  }

  .mobile-brand-mark img {
    display: block;
    width: 150px;
    max-width: none;
    height: 50px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.34));
  }

  .mobile-profile-shortcut {
    display: none;
  }

  .signed-header-inner > .brand-block {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-height: 64px;
    justify-content: center;
  }

  .signed-header-inner > .brand-block .header-brand {
    width: min(166px, 100%);
    min-height: 64px;
  }

  .signed-header-inner > .brand-block .header-brand-logo {
    width: 100%;
    max-width: 166px;
    height: 46px;
    object-position: center;
  }

  .watchlist-page .signed-header-inner > .brand-block {
    display: none;
  }

  .watchlist-page .watchlist-header-context {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }

  .watchlist-page .watchlist-header-context h1 {
    font-size: clamp(1.05rem, 5vw, 1.55rem);
  }

  .watchlist-page .signed-header-inner > .year-row {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-height: 54px;
    margin: 0;
    overflow: hidden;
  }

  .watchlist-page .signed-header {
    margin-bottom: 10px;
  }

  .watchlist-page .year-arrow {
    display: none;
  }

  .watchlist-page .year-tabs {
    justify-content: flex-start;
    min-height: 50px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 11px 10px;
    cursor: grab;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .watchlist-page .year-tabs::-webkit-scrollbar {
    display: none;
  }

  .watchlist-page .year-tabs:active {
    cursor: grabbing;
  }

  .watchlist-page .year-tab {
    width: 44px;
    min-height: 30px;
    font-size: 0.7rem;
    scroll-snap-align: center;
  }

  .signed-header-inner > .mobile-site-drawer {
    position: fixed;
    z-index: 1200;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: min(340px, calc(100vw - 42px));
    max-width: none;
    min-height: 100dvh;
    align-items: stretch;
    align-content: start;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid rgba(246, 217, 141, 0.34);
    background: #3a090d;
    box-shadow: 24px 0 54px rgba(10, 0, 2, 0.48);
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 180ms ease, visibility 180ms;
  }

  .signed-header-inner > .mobile-site-drawer.is-mobile-open {
    transform: translateX(0);
    visibility: visible;
  }

  .mobile-nav-drawer-heading {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(246, 217, 141, 0.24);
    padding: 10px 16px 10px 22px;
  }

  .mobile-nav-drawer-heading strong {
    color: #fff8e9;
    font-family: var(--font-brand);
    font-size: 1.45rem;
  }

  .mobile-nav-close {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 248, 237, 0.24);
    border-radius: 5px;
    background: rgba(18, 0, 3, 0.24);
    color: #fff8e9;
    font-size: 1.65rem;
    line-height: 1;
  }

  .signed-header .mobile-site-drawer > :is(.site-nav-button, .site-menu) {
    width: 100%;
    min-width: 0;
    border-bottom: 1px solid rgba(255, 248, 237, 0.11);
  }

  .signed-header .mobile-site-drawer > .site-nav-button,
  .signed-header .mobile-site-drawer > .site-menu > summary {
    display: flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    justify-content: flex-start;
    border-left: 3px solid transparent;
    border-bottom: 0;
    color: #f4e8db;
    font-size: 0.92rem;
    padding: 0 22px;
    text-align: left;
    text-decoration: none;
  }

  .signed-header .mobile-site-drawer > :is(.site-nav-button.is-current, .site-menu.is-current > summary) {
    border-left-color: var(--gold);
    background: rgba(246, 217, 141, 0.09);
    color: #fff8e9;
  }

  .signed-header .mobile-site-drawer .site-menu > summary::after {
    margin-left: auto;
  }

  .signed-header .mobile-site-drawer .notification-menu-trigger,
  .signed-header .mobile-site-drawer .profile-menu-trigger,
  .signed-header .mobile-site-drawer .site-message-link {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    place-items: center start;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
    margin: 0;
    padding: 0 22px;
  }

  .signed-header .mobile-site-drawer .site-message-link {
    display: grid;
    border-left: 3px solid transparent;
    border-bottom: 0;
    color: #f4e8db;
    text-decoration: none;
  }

  .signed-header .mobile-site-drawer .site-message-link.is-current {
    border-left-color: var(--gold);
    background: rgba(246, 217, 141, 0.09);
    color: #fff8e9;
  }

  .mobile-site-drawer .message-badge {
    position: static;
    grid-column: 3;
    grid-row: 1;
    border-color: #3a090d;
  }

  .mobile-site-drawer .mobile-nav-label {
    display: block;
    color: inherit;
    font-size: 0.92rem;
  }

  .mobile-site-drawer .notification-badge {
    position: static;
    grid-column: 3;
    grid-row: 1;
    border-color: #3a090d;
  }

  .signed-header .mobile-site-drawer .site-menu-panel {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    border-top: 1px solid rgba(255, 248, 237, 0.1);
    border-radius: 0;
    box-shadow: none;
    padding: 8px;
    transform: none;
    translate: 0 0;
  }

  .signed-header .mobile-site-drawer .site-menu-panel::before {
    display: none;
  }

  .signed-header .mobile-site-drawer .where-to-watch-panel {
    max-height: min(360px, 44dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .signed-header > .mobile-nav-backdrop {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(12, 0, 2, 0.64);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .signed-header > .mobile-nav-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Final component enforcement: page-specific themes may color these, not reshape them. */
.primary-button,
.shop-primary-button,
.shop-product-copy button,
.movie-dialog .form-actions .primary-button {
  border: 1px solid #982522;
  border-radius: var(--radius-control);
  background: linear-gradient(180deg, #c43d37, #a72c29);
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fffaf2;
  font-family: var(--font-ui);
  font-weight: 800;
}

.primary-button:hover,
.shop-primary-button:hover,
.shop-product-copy button:hover,
.movie-dialog .form-actions .primary-button:hover {
  border-color: #d15a52;
  background: linear-gradient(180deg, #d04740, #b3302c);
  color: #fffaf2;
}

:where(.secondary-button, .text-button, .icon-button, .profile-ghost-button, .profile-edit-list) {
  border-radius: var(--radius-control);
  font-family: var(--font-ui);
}

.toolbar-action {
  width: 50px;
  height: 44px;
  border-radius: var(--radius-control);
  background: linear-gradient(180deg, #c63d37, #aa2c29);
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255, 244, 230, 0.17);
}

:where(.site-menu-panel, .toolbar-tools-popover, .lobby-post-menu > div, .lobby-reaction-picker) {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-menu);
}

:where(.compact-dialog, .movie-dialog, .poster-crop-dialog, .sign-in-dialog, .shop-product-dialog)::backdrop {
  background: rgba(16, 1, 3, 0.72);
  backdrop-filter: blur(4px);
}

:where(.compact-dialog-card, .movie-dialog .entry-panel, .crop-editor, .sign-in-card, .shop-product-dialog) {
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-modal);
}

:where(.compact-dialog-card, .crop-editor, .sign-in-card) > .dialog-header {
  min-height: 56px;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  border-bottom: 1px solid rgba(246, 217, 141, 0.2);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background: #3a0b0f;
  color: #fff8e9;
  padding: var(--space-3) var(--space-4);
}

:where(.compact-dialog-card, .crop-editor, .sign-in-card) > .dialog-header h2 {
  color: #fff8e9;
  font-family: var(--font-brand);
  font-size: 1.12rem;
}

.modal-close-button,
.dialog-close,
.shop-dialog-close {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 248, 237, 0.2);
  border-radius: 50%;
  background: rgba(12, 0, 2, 0.22);
  box-shadow: none;
  color: #fff8e9;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
}

.shop-dialog-close {
  position: relative;
  z-index: 3;
  top: auto;
  right: auto;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  margin: 12px;
}

.shop-product-dialog[open] {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.05fr);
  grid-template-rows: minmax(0, 1fr);
}

.shop-product-dialog > .shop-dialog-image {
  grid-column: 1;
  grid-row: 1;
}

.shop-product-dialog > .shop-dialog-copy {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
}

.shop-product-dialog .shop-dialog-image > img {
  object-fit: contain;
  object-position: center;
  background: #f4eadc;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  border-radius: var(--radius-control);
}

:where(.profile-showcase, .lobby-friends, .lobby-picks, .lobby-feed, .lobby-cinematography, .shop-stage, .shop-product-card, .shop-reviews-window, .archive-year-card, .archive-media-card, .account-safety-card) {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.ui-state,
:where(.friends-empty, .friend-search-message, .watchlist-members-empty, .recovery-empty, .profile-picker-empty, .archive-list-empty, .lobby-friends-empty, .lobby-picks-empty, .scrapbook-empty) {
  display: grid;
  min-height: 88px;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  border: 1px dashed rgba(255, 248, 237, 0.2);
  border-radius: var(--radius-card);
  background: rgba(255, 248, 237, 0.045);
  color: rgba(255, 248, 233, 0.7);
  padding: var(--space-4);
  line-height: 1.5;
  text-align: center;
}

.ui-state::before,
:where(.friends-empty, .friend-search-message, .watchlist-members-empty, .recovery-empty, .profile-picker-empty, .archive-list-empty, .lobby-friends-empty, .lobby-picks-empty, .scrapbook-empty)::before {
  width: 30px;
  border-top: 2px solid rgba(202, 162, 77, 0.68);
  content: "";
}

@media (max-width: 700px) {
  .movie-dialog .dialog-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding-right: 56px;
  }

  .movie-dialog .dialog-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .movie-dialog .dialog-header h2 {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .movie-dialog .header-media-type-toggle {
    display: grid;
    width: min(190px, calc(100% - 82px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .movie-dialog .header-media-type-toggle label {
    width: auto;
    min-width: 0;
  }

  .movie-dialog .dialog-header-actions {
    display: flex;
    width: 100%;
    justify-content: start;
  }

  .movie-dialog .dialog-header .dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .shop-product-dialog[open] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .shop-product-dialog > .shop-dialog-image {
    grid-column: 1;
    grid-row: 1;
  }

  .shop-product-dialog > .shop-dialog-copy {
    grid-column: 1;
    grid-row: 2;
  }

  .shop-product-dialog > .shop-dialog-close {
    grid-column: 1;
    grid-row: 1;
  }
}

.watchlist-gallery-surface .empty-state {
  border-color: rgba(76, 53, 44, 0.34);
  background: #fffaf2;
  color: #5f5149;
  box-shadow: none;
}

.watchlist-gallery-surface .empty-state strong {
  color: #332621;
  font-weight: 800;
}

.watchlist-gallery-surface .empty-state span {
  color: #62554d;
}

.signed-header .site-menu-panel {
  border-radius: var(--radius-card);
}

.archive-recap-dialog {
  overflow-x: hidden;
}

/* Catalog search is a picker; detailed entry tools are reserved for Custom Media. */
.movie-dialog .inline-media-type-toggle { grid-column: 1 / -1; margin: 0; }
.movie-dialog .movie-form:not(.is-custom-media) .poster-controls { display: none; }
.movie-dialog .movie-form:not(.is-custom-media) .inline-media-type-toggle { display: none; }
.movie-dialog .movie-form:not(.is-custom-media) .title-mode-toggle { grid-column: 1; align-self: end; }
.movie-dialog .movie-form:not(.is-custom-media) .catalog-search-field { grid-column: 2 / -1; align-self: end; min-width: 0; }
.movie-dialog .movie-form:not(.is-custom-media) .catalog-search-field > span:first-child { display: none; }
.movie-dialog .movie-form:not(.is-custom-media) .catalog-search-field input { min-height: 42px; }
.movie-dialog .movie-form:not(.is-custom-media) .optional-details { display: none; }
.movie-dialog .catalog-profile-preview { grid-column: 1 / -1; justify-self: start; min-height: 38px; }
.movie-dialog .media-catalog-option { grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: start; }
.movie-dialog .form-grid .media-catalog-title { overflow: visible; line-height: 1.2; text-overflow: clip; white-space: normal; }
.movie-dialog .form-grid .media-catalog-meta { line-height: 1.25; }

.watchlist-profile-dialog { width: min(1240px, calc(100vw - 36px)); height: min(900px, calc(100vh - 36px)); max-width: none; max-height: none; overflow: hidden; border: 1px solid var(--line-on-dark-strong); border-radius: var(--radius-panel); background: #180305; padding: 0; box-shadow: var(--shadow-modal); }
.watchlist-profile-dialog::backdrop { background: rgba(16, 1, 3, 0.76); backdrop-filter: blur(5px); }
.watchlist-profile-frame { position: relative; width: 100%; height: 100%; }
.watchlist-profile-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #180305; }
.watchlist-profile-frame > .dialog-close { position: absolute; z-index: 3; top: 12px; right: 12px; }
@media (max-width: 700px) {
  .movie-dialog .movie-form:not(.is-custom-media) .title-mode-toggle, .movie-dialog .movie-form:not(.is-custom-media) .catalog-search-field { grid-column: 1 / -1; }
  .watchlist-profile-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
}

/* Media Catalog Management */
.media-catalog-management-shell { width: min(1320px, calc(100% - 32px)); }
.media-catalog-management-hero { grid-template-columns: minmax(0, 1fr) minmax(560px, auto); gap: 10px 28px; align-items: center; padding: 20px 28px; }
.media-catalog-management-hero > div:first-child { grid-column: 1; grid-row: 1 / span 2; }
.media-catalog-management-hero h1 { margin: 4px 0 5px; font-size: 2.55rem; }
.media-catalog-management-hero p { max-width: 42ch; font-size: 0.84rem; line-height: 1.4; }
.media-catalog-management-hero .management-hero-actions { grid-column: 2; grid-row: 1; gap: 8px; }
.media-catalog-management-hero .management-hero-actions :is(.secondary-button, .shop-primary-button) { min-height: 36px; font-size: 0.72rem; padding-inline: 12px; }
.media-catalog-management-hero .management-stats { grid-column: 2; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 0; border-top: 0; padding: 0; }
.media-catalog-management-hero .management-stats div { gap: 2px; padding: 0 13px; }
.media-catalog-management-hero .management-stats div:first-child { padding-left: 0; }
.media-catalog-management-hero .management-stats dt { font-size: 0.6rem; }
.media-catalog-management-hero .management-stats dd { font-size: 1.2rem; }
.catalog-quality-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; margin-top: 12px; border: 1px solid rgba(255, 248, 237, 0.16); border-radius: var(--radius-card); background: #f4eadb; box-shadow: var(--shadow-card); padding: 12px 18px; }
.catalog-quality-heading { display: contents; }
.catalog-quality-heading > div { grid-column: 1; grid-row: 1; }
.catalog-quality-heading .secondary-button { grid-column: 1; grid-row: 2; justify-self: start; min-height: 34px; margin-top: 7px; font-size: 0.68rem; padding-inline: 11px; }
.catalog-quality-heading h2 { margin: 2px 0 0; color: #2d2420; font-family: var(--font-brand); font-size: 1.3rem; }
.catalog-quality-summary { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid rgba(92, 54, 41, 0.18); background: rgba(92, 54, 41, 0.16); }
.catalog-quality-summary button { display: grid; min-width: 0; min-height: 54px; align-content: center; gap: 2px; border: 0; border-radius: 0; background: #fffaf1; color: #6d5650; padding: 7px 9px; text-align: left; }
.catalog-quality-summary button:hover,
.catalog-quality-summary button.is-active { background: #ead393; color: #421216; }
.catalog-quality-summary button span { overflow: hidden; font-size: 0.64rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.catalog-quality-summary button strong { color: #381013; font-family: var(--font-brand); font-size: 1.12rem; }
.media-catalog-view-bar { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; border: 1px solid rgba(255, 248, 237, 0.16); border-radius: var(--radius-card); background: #3d1418; box-shadow: var(--shadow-card); color: #fff8e9; padding: 10px 14px; }
.media-catalog-view-picker { display: flex; align-items: center; gap: 6px; }
.media-catalog-view-picker > span,
.media-catalog-list-options label > span { color: rgba(255, 248, 233, 0.58); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.media-catalog-view-picker > span { margin-right: 5px; }
.media-catalog-view-picker button { min-width: 76px; min-height: 38px; border: 1px solid rgba(246, 217, 141, 0.2); border-radius: var(--radius-control); background: rgba(22, 2, 5, 0.26); color: rgba(255, 248, 233, 0.7); font: inherit; font-size: 0.76rem; font-weight: 800; }
.media-catalog-view-picker button:hover,
.media-catalog-view-picker button.is-active { border-color: #d6b75d; background: #ead393; color: #421216; }
.media-catalog-list-options { display: flex; align-items: center; gap: 10px; }
.media-catalog-list-options label { display: flex; align-items: center; gap: 8px; }
.media-catalog-list-options select { min-height: 38px; border-color: rgba(246, 217, 141, 0.24); background: #26070a; color: #fff8e9; font-size: 0.76rem; }
.media-catalog-management-layout { grid-template-columns: 330px minmax(0, 1fr); }
.media-catalog-list { max-height: calc(100dvh - 248px); }
.media-catalog-row img { aspect-ratio: 2 / 3; object-fit: cover; }
.media-catalog-row-badges { display: grid; justify-items: end; gap: 5px; }
.media-catalog-row-badges em.catalog-quality-issue-badge { background: rgba(203, 139, 54, 0.2); color: #f1c96e; }
.catalog-quality-checklist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.catalog-quality-checklist > button { display: flex; min-width: 0; min-height: 48px; align-items: center; gap: 8px; border: 1px solid rgba(78, 54, 44, 0.16); border-radius: var(--radius-control); background: #fffaf1; color: #765f57; padding: 9px; text-align: left; }
.catalog-quality-checklist > button:not(:disabled) { cursor: pointer; }
.catalog-quality-checklist > button:not(:disabled):hover { border-color: rgba(184, 58, 52, 0.74); background: #fff1ed; }
.catalog-quality-checklist > button:disabled { cursor: default; opacity: 1; }
.catalog-quality-checklist > button > span { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #39765a; color: #fff; font-size: 0.7rem; font-weight: 900; }
.catalog-quality-checklist > button.needs-review > span { background: #b83a34; }
.catalog-quality-checklist strong { min-width: 0; font-size: 0.68rem; line-height: 1.3; }
.management-field.has-quality-issue,
.management-form-section.has-quality-issue,
.catalog-artwork-preview.has-quality-issue { border-color: rgba(184, 58, 52, 0.82); box-shadow: 0 0 0 2px rgba(184, 58, 52, 0.13); }
.management-field.has-quality-issue > span:first-child,
.management-form-section.has-quality-issue > header h3 { color: #a92f2d; }
.catalog-quality-field-note { display: block; color: #a92f2d; font-size: 0.68rem; font-weight: 800; line-height: 1.3; }
.media-catalog-years-view { margin-top: 18px; border: 1px solid rgba(76, 53, 44, 0.18); border-radius: var(--radius-panel); background: #f4eadb; box-shadow: var(--shadow-raised); padding: clamp(20px, 4vw, 34px); }
.media-catalog-years-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; border-bottom: 1px solid rgba(184, 139, 62, 0.4); padding-bottom: 17px; }
.media-catalog-years-heading h2 { margin: 4px 0 0; color: #2d2420; font-family: var(--font-brand); font-size: 2rem; }
.media-catalog-years-heading > span { color: #76665d; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; }
.media-catalog-year-preview { width: 100%; border: 0; border-radius: 0; padding: 0; cursor: pointer; }
.media-catalog-year-card .watchlist-collection-heading h2 { font-size: 1.35rem; }
.media-catalog-year-stats { grid-template-columns: minmax(0, 1fr); }
.media-catalog-year-stats > div { border-right: 0; padding-inline: 0; }
.media-catalog-year-actions { grid-template-columns: minmax(0, 1fr); }
.media-catalog-year-actions .watchlist-open-button { width: 100%; border: 1px solid #9d3131; }
.media-catalog-year-actions .watchlist-tile-action { width: 100%; }
.media-catalog-years-empty { grid-column: 1 / -1; }
.media-catalog-showcase-dialog .compact-dialog-card { width: min(820px, calc(100vw - 28px)); }
.media-catalog-showcase-dialog .watchlist-showcase-library { max-height: min(68vh, 620px); }
.media-catalog-showcase-order { position: absolute; top: 8px; right: 8px; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #f2d17c; border-radius: 50%; background: #7e2025; color: #fff8e9; font-size: 0.72rem; }
.catalog-profile-artwork-grid { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr); gap: 26px; align-items: start; }
.catalog-artwork-panel { display: grid; min-width: 0; align-content: start; gap: 13px; }
.catalog-artwork-panel > h4 { margin: 0; color: #311013; font-family: var(--font-ui); font-size: 0.88rem; }
.catalog-artwork-editor { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; }
.catalog-artwork-preview { position: relative; overflow: hidden; width: 150px; aspect-ratio: 2 / 3; border: 1px dashed rgba(118, 72, 45, 0.46); border-radius: var(--radius-card); background: #eee2d1; cursor: pointer; }
.catalog-artwork-preview img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #180305; }
.catalog-artwork-preview > span { position: absolute; inset: auto 8px 8px; border: 1px solid rgba(255, 248, 237, 0.3); border-radius: 4px; background: rgba(35, 8, 8, 0.82); color: #fff8ed; font-size: 0.6rem; font-weight: 900; padding: 7px 8px; text-align: center; }
.catalog-artwork-preview:hover,
.catalog-artwork-preview:focus-visible,
.catalog-artwork-preview.is-dragging { border-color: #b52f2c; box-shadow: 0 0 0 3px rgba(181, 47, 44, 0.13); outline: 0; }
.catalog-artwork-preview.is-dragging > span { inset: 8px; display: grid; place-items: center; background: rgba(65, 12, 14, 0.9); font-size: 0.72rem; }
.catalog-artwork-editor > div:last-child { display: grid; align-content: start; justify-items: start; gap: 10px; }
.catalog-poster-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-poster-actions .secondary-button { min-height: 38px; font-size: 0.7rem; padding: 0 13px; }
.catalog-artwork-drop-copy { color: #6f5d54; font-size: 0.66rem; }
.catalog-artwork-editor .management-media-note { max-width: 48ch; margin: 0; line-height: 1.5; }
.catalog-backdrop-preview { position: relative; display: grid; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; place-items: center; border: 1px dashed rgba(118,72,45,0.46); border-radius: var(--radius-card); background: #160205; color: rgba(255,248,237,0.58); cursor: pointer; }
.catalog-backdrop-preview:hover,
.catalog-backdrop-preview:focus-visible,
.catalog-backdrop-preview.is-dragging { border-color: #b52f2c; box-shadow: 0 0 0 3px rgba(181,47,44,0.13); outline: 0; }
.catalog-backdrop-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catalog-backdrop-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,1,4,0.7), rgba(18,1,4,0.34)), rgba(18,1,4,0.2); pointer-events: none; }
.catalog-backdrop-preview > span { position: relative; z-index: 1; font-size: 0.74rem; font-weight: 800; }
.catalog-backdrop-preview > strong { position: absolute; z-index: 2; right: 10px; bottom: 10px; border: 1px solid rgba(255,248,237,0.25); border-radius: 4px; background: rgba(35,8,8,0.82); color: #fff8ed; font-size: 0.6rem; padding: 7px 9px; }
.catalog-backdrop-preview.is-dragging > strong { inset: 10px; display: grid; place-items: center; font-size: 0.72rem; }
.catalog-backdrop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-backdrop-actions .secondary-button { min-height: 38px; font-size: 0.7rem; padding: 0 13px; }
.catalog-backdrop-panel .management-media-note { margin: 0; color: #6f5d54; font-size: 0.66rem; line-height: 1.5; }
.catalog-credit-groups { display: grid; gap: 18px; }
.catalog-credit-group { border-top: 1px solid rgba(78, 54, 44, 0.16); padding-top: 14px; }
.catalog-credit-group:first-child { border-top: 0; padding-top: 0; }
.catalog-credit-group > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.catalog-credit-group > header h4 { margin: 0; color: #311013; font-family: var(--font-ui); font-size: 0.88rem; }
.catalog-credit-group > header p { margin: 2px 0 0; color: #78665d; font-size: 0.7rem; }
.catalog-credit-group > header button { min-height: 36px; border: 1px solid #9d3131; border-radius: var(--radius-control); background: #fffaf1; color: #701d22; font: inherit; font-size: 0.72rem; font-weight: 800; padding: 7px 12px; }
.catalog-credit-group > header button:hover { background: #ead393; color: #421216; }
.catalog-credit-list { display: grid; gap: 8px; }
.catalog-credit-empty { margin: 0; border: 1px dashed rgba(78, 54, 44, 0.2); border-radius: var(--radius-control); color: #87746a; font-size: 0.72rem; padding: 13px; }
.catalog-credit-row { display: grid; grid-template-columns: 54px minmax(140px, 1fr) minmax(150px, 1fr) auto; align-items: end; gap: 10px; border-bottom: 1px solid rgba(78, 54, 44, 0.12); padding: 0 0 8px; }
.catalog-credit-portrait { position: relative; display: grid; overflow: hidden; width: 54px; aspect-ratio: 4 / 5; place-items: center; border: 1px dashed rgba(118, 72, 45, 0.46); border-radius: var(--radius-control); background: #eadfce; color: #702126; cursor: pointer; font-size: 0.72rem; font-weight: 900; }
.catalog-credit-portrait:hover,
.catalog-credit-portrait.is-dragging { border-color: #b52f2c; box-shadow: 0 0 0 3px rgba(181, 47, 44, 0.13); }
.catalog-credit-portrait img { width: 100%; height: 100%; object-fit: cover; }
.catalog-credit-portrait input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.catalog-credit-field { display: grid; min-width: 0; gap: 5px; }
.catalog-credit-field > span { color: #6d5951; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
.catalog-credit-field input { width: 100%; min-width: 0; min-height: 42px; }
.catalog-credit-actions { display: flex; gap: 5px; padding-bottom: 2px; }
.catalog-credit-actions button { display: grid; width: 34px; min-width: 34px; height: 38px; place-items: center; border: 1px solid rgba(78, 54, 44, 0.24); border-radius: var(--radius-control); background: #fffaf1; color: #5e3432; font-size: 1rem; padding: 0; }
.catalog-credit-actions button:hover:not(:disabled) { border-color: #9d3131; color: #8a2226; }
.catalog-credit-actions button:disabled { opacity: 0.32; }
.catalog-credit-provider-note { margin: 18px 0 0; border-left: 3px solid #c5a853; color: #756159; font-size: 0.7rem; line-height: 1.5; padding-left: 11px; }
.catalog-ratings-fields { margin-top: 4px; border-top: 1px solid rgba(78,54,44,0.14); padding-top: 16px; }
.catalog-rating-fields-row { display: grid; grid-template-columns: minmax(130px, 0.55fr) minmax(220px, 1.45fr); gap: 12px; }
.catalog-rating-fields-row > label { display: grid; min-width: 0; gap: 5px; }
.catalog-rating-fields-row > label > span { color: #756159; font-size: 0.62rem; font-weight: 800; }
.catalog-rating-fields-row input { width: 100%; min-width: 0; }

@media (max-width: 980px) {
  .media-catalog-management-hero { grid-template-columns: minmax(0, 1fr); }
  .media-catalog-management-hero > div:first-child,
  .media-catalog-management-hero .management-hero-actions,
  .media-catalog-management-hero .management-stats { grid-column: auto; grid-row: auto; }
  .media-catalog-management-hero .management-stats { border-top: 1px solid rgba(255, 248, 237, 0.12); padding-top: 12px; }
  .catalog-quality-bar { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .catalog-quality-heading > div,
  .catalog-quality-heading .secondary-button,
  .catalog-quality-summary { grid-column: auto; grid-row: auto; }
  .catalog-quality-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .catalog-quality-heading .secondary-button { margin-top: 0; }
  .catalog-quality-summary { margin: 0; }
  .catalog-quality-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-quality-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-catalog-management-layout { grid-template-columns: minmax(0, 1fr); }
  .media-catalog-list { max-height: 360px; }
  .media-catalog-years-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-profile-artwork-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .catalog-quality-heading { align-items: stretch; flex-direction: column; }
  .catalog-quality-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-quality-checklist { grid-template-columns: minmax(0, 1fr); }
  .media-catalog-management-shell { width: min(100% - 20px, 1320px); }
  .media-catalog-management-hero { grid-template-columns: minmax(0, 1fr); }
  .media-catalog-view-bar,
  .media-catalog-list-options { align-items: stretch; flex-direction: column; }
  .media-catalog-view-picker { width: 100%; }
  .media-catalog-view-picker button { flex: 1; }
  .media-catalog-list-options label { display: grid; grid-template-columns: 54px minmax(0, 1fr); }
  .media-catalog-years-heading { align-items: start; flex-direction: column; }
  .media-catalog-years-grid { grid-template-columns: minmax(0, 1fr); }
  .catalog-artwork-editor { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .catalog-artwork-preview { width: 112px; }
  .catalog-credit-group > header { align-items: stretch; flex-direction: column; }
  .catalog-credit-group > header button { align-self: start; }
  .catalog-credit-row { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: end; }
  .catalog-credit-portrait { width: 48px; grid-row: 1 / span 2; }
  .catalog-credit-row .catalog-credit-field:nth-of-type(2) { grid-column: 2; }
  .catalog-credit-actions { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: grid; grid-template-columns: repeat(2, 32px); }
  .catalog-credit-actions button { width: 32px; min-width: 32px; height: 32px; }
  .catalog-rating-fields-row { grid-template-columns: minmax(0, 1fr); }
}