:root {
  --bg: #121212;
  --home-accent: #ffcf00;
  --home-dot-inactive: #dbdfe4;
  --surface: #0b1422;
  --surface-2: #121f33;
  --line: #26364f;
  --text: #eef3ff;
  --muted: #a6b2c7;
  --text-soft: #c7d1e4;
  --accent: #18a7ff;
  --accent-soft: rgba(24, 167, 255, 0.2);
  --type-display: 34px;
  --type-title: 22px;
  --type-meta: 13px;
  --type-caption: 12px;
  --watch: #37d277;
  --skip: #ff5a5a;
  --gold-1: #ffe38a;
  --gold-2: #c89b2f;
  --radius-card: 16px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
}

* {
  box-sizing: border-box;
}

* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0.1px;
}

.app-shell {
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

.app-shell:has(.film-screen) {
  padding-bottom: 0;
}

#app {
  min-height: calc(100vh - 86px);
}

.screen {
  padding: var(--space-4);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--space-6) 0 var(--space-2);
}

.section-head h2 {
  margin: 0;
  font-size: var(--type-title);
  font-weight: 700;
  letter-spacing: -0.1px;
  color: #f1f5ff;
}

.section-head span {
  color: var(--muted);
  font-size: 13px;
}

.see-all-btn {
  border: 0;
  background: transparent;
  color: #f6f6f6;
  font-size: var(--type-caption);
  letter-spacing: 0.2px;
  text-transform: none;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: opacity 180ms ease;
}

.see-all-btn:hover {
  color: #f6f6f6;
  opacity: 0.82;
}

.hero {
  position: relative;
  height: 430px;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 260ms ease;
}

.prime-home-shell {
  --home-gutter: 16px;
  position: relative;
  padding-top: 76px;
}

.prime-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 35;
  padding: 12px var(--home-gutter, 16px) 8px;
  background: var(--bg);
}

.home-topbar {
  padding: 10px var(--home-gutter, 16px) 2px;
  transition:
    background 240ms ease,
    backdrop-filter 240ms ease,
    -webkit-backdrop-filter 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease;
}

.app-shell.home-header-scrolled .prime-topbar.home-topbar {
  background: rgba(18, 18, 18, 0.68);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.home-logo-slot {
  position: relative;
  height: var(--brand-logo-home-slot-height, 64px);
  width: var(--brand-logo-home-slot-max-width, min(58vw, 220px));
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
}

.home-logo {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: auto;
  height: var(--brand-logo-home-image-height, 83px);
  transform: translateY(-50%);
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
}

.home-topbar .prime-topbar-row {
  align-items: center;
  min-height: 64px;
}

.home-topbar-actions {
  gap: 18px;
  align-items: center;
}

.home-bell-btn {
  position: relative;
  border: 0;
  background: transparent;
  color: #ffffff;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.home-bell-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.home-bell-dot {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  border: 1px solid var(--bg);
}

.app-shell.home-header-scrolled .home-bell-dot {
  border-color: rgba(18, 18, 18, 0.72);
}

.prime-logo {
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.25px;
  color: #f5f8ff;
  padding-bottom: 6px;
}

.prime-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prime-brand-kicker {
  margin: 0;
  text-transform: uppercase;
  color: #9bb3d5;
  letter-spacing: 1.8px;
  font-size: 10px;
  font-weight: 600;
}

.prime-topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prime-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reco-top-btn {
  border: 1px solid rgba(130, 201, 255, 0.28);
  background: rgba(14, 25, 43, 0.78);
  color: #d8ecff;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
}

.notification-bell-btn {
  position: relative;
  border: 1px solid rgba(130, 201, 255, 0.28);
  background: rgba(14, 25, 43, 0.78);
  color: #d8ecff;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.notification-bell-icon {
  font-size: 14px;
  line-height: 1;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff6b6b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.45);
}

.notifications-screen {
  padding: 14px 12px 28px;
}

.push-enable-btn {
  border: 1px solid rgba(255, 214, 130, 0.45);
  background: rgba(255, 214, 130, 0.12);
  color: #f5d89b;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#push-enable-prompt-root,
#notification-settings-root {
  position: fixed;
  inset: 0;
  z-index: 12050;
  pointer-events: none;
}

#push-enable-prompt-root > *,
#notification-settings-root > * {
  pointer-events: auto;
}

.push-enable-prompt-layer,
.notification-settings-layer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.notification-settings-layer {
  align-items: center;
}

.push-enable-prompt-backdrop,
.notification-settings-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  cursor: pointer;
}

.push-enable-prompt-card,
.notification-settings-card {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(175deg, rgba(22, 24, 32, 0.98), rgba(10, 11, 16, 0.98));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  padding: 18px 18px 16px;
}

.push-enable-prompt-copy {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: #e8e8e8;
  text-align: center;
}

.push-enable-prompt-hint {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.4;
  color: #a8a8a8;
  text-align: center;
}

.push-enable-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.push-enable-prompt-dismiss {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #d0d0d0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.push-enable-prompt-actions .push-enable-btn {
  width: 100%;
  margin-top: 0;
  border-radius: 12px;
  padding: 12px 14px;
}

.notification-settings-title {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
  color: #f2f2f2;
}

.notification-settings-subtitle {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #a8a8a8;
}

.notification-settings-list {
  margin-bottom: 16px;
}

.notification-settings-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
}

.notification-settings-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}

.notification-settings-row input {
  margin-top: 3px;
  accent-color: #d4af37;
}

.notification-settings-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notification-settings-row-text strong {
  font-size: 14px;
  color: #f0f0f0;
  font-weight: 600;
}

.notification-settings-row-text span {
  font-size: 12px;
  line-height: 1.35;
  color: #a8a8a8;
}

.notification-settings-actions {
  display: flex;
  gap: 8px;
}

.notification-settings-btn {
  flex: 1;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.notification-settings-btn.primary {
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.16);
  color: #e8d5a3;
}

.notification-settings-btn.secondary {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #d0d0d0;
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-row {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(16, 20, 30, 0.86);
  color: #edf1f7;
  text-align: left;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification-row.unread {
  border-color: rgba(255, 214, 130, 0.38);
  background: rgba(255, 214, 130, 0.08);
}

.notification-row-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #eef4ff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}

.notification-row-body {
  min-width: 0;
  flex: 1;
}

.notification-row-message {
  font-size: 13px;
  line-height: 1.3;
  color: #f0f2f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-row-time {
  margin-top: 3px;
  color: #aeb6c5;
  font-size: 11px;
}

.notification-row-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.notification-row-thumb-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #d7e1f3;
  font-size: 12px;
  font-weight: 700;
}

.notification-row-thumb-tier {
  background: linear-gradient(180deg, rgba(248, 215, 166, 0.28), rgba(195, 125, 68, 0.22));
  border-color: rgba(248, 215, 166, 0.45);
  color: #f8d7a6;
}

.notification-row-promotion .notification-row-message {
  color: #f3e2b8;
}

.notifications-empty {
  color: #adb3be;
  font-size: 13px;
  text-align: center;
  padding: 32px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(10, 13, 20, 0.5);
}

.recommender-screen {
  padding-top: 10px;
  font-family: "Inter", sans-serif;
}

.recommender-head {
  margin: 2px 0 18px;
}

.recommender-head .collection-title {
  margin: 0;
}

.reco-mode-group {
  margin-top: 16px;
}

.reco-mode-group:first-of-type {
  margin-top: 0;
}

.reco-field-label {
  display: block;
  margin-bottom: 10px;
  color: #f6f6f6;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15px;
}

.reco-field-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 18, 20, 0.96);
  color: #f6f6f6;
  border-radius: 12px;
  padding: 12px 38px 12px 14px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.reco-field-input:focus {
  border-color: rgba(245, 201, 117, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 201, 117, 0.12);
}

.reco-select {
  position: relative;
}

.reco-select-trigger {
  position: relative;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 18, 20, 0.96);
  color: #f6f6f6;
  border-radius: 12px;
  padding: 12px 40px 12px 14px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.reco-select-trigger:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(24, 24, 28, 0.98);
}

.reco-select.is-open .reco-select-trigger {
  border-color: rgba(245, 201, 117, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 201, 117, 0.12);
}

.reco-select-value {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.reco-select-value.is-placeholder {
  color: #9aa0ad;
  font-weight: 400;
}

.reco-select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #c8cdd8;
  transition: transform 180ms ease, color 180ms ease;
  pointer-events: none;
}

.reco-select.is-open .reco-select-chevron {
  transform: translateY(-50%) rotate(180deg);
  color: #f5d89b;
}

.reco-select-backdrop {
  position: fixed;
  inset: 0;
  z-index: 24;
}

.reco-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 25;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 24, 30, 0.98);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 6px;
}

.reco-select-option {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: #f2f4f8;
  text-align: left;
  padding: 11px 12px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  border-radius: 9px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.reco-select-option + .reco-select-option {
  margin-top: 2px;
}

.reco-select-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.reco-select-option.is-selected {
  background: rgba(245, 201, 117, 0.14);
  color: #fff4ce;
  font-weight: 700;
}

.reco-mode-group.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.reco-mode-group.disabled .reco-select-trigger,
.reco-mode-group.disabled .reco-field-input {
  cursor: not-allowed;
}

.reco-similar-input-wrap {
  margin-top: 0;
}

.reco-similar-input {
  width: 100%;
}

.reco-similar-results {
  margin-top: 8px;
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
}

.reco-similar-result-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 18, 20, 0.96);
  color: #f6f6f6;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: border-color 140ms ease, background 140ms ease;
}

.reco-similar-result-item:hover {
  border-color: rgba(245, 201, 117, 0.35);
  background: rgba(245, 201, 117, 0.08);
}

.reco-similar-result-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reco-similar-result-text span {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reco-similar-result-text small {
  font-family: "Inter", sans-serif;
  color: #9aa0ad;
  font-size: 12px;
  font-weight: 400;
}

.reco-similar-result-thumb {
  width: 34px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.reco-similar-empty,
.reco-similar-hint {
  margin: 8px 0 0;
  color: #9a9a9a;
  font-size: 11px;
}

.reco-similar-selected {
  margin: 8px 0 0;
  color: #f5d89b;
  font-size: 11px;
}

.reco-find-btn {
  margin-top: 12px;
  width: 100%;
  border: 1px solid rgba(245, 201, 117, 0.52);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(145, 111, 35, 0.95), rgba(97, 72, 22, 0.95));
  color: #fff4ce;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 12px;
  cursor: pointer;
}

.reco-find-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.reco-reset-btn {
  margin-top: 8px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #e8ebf2;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  padding: 10px 12px;
  cursor: pointer;
}

.reco-inline-state {
  margin-top: 14px;
  color: #b3b8c4;
  font-size: 13px;
  text-align: center;
}

.reco-inline-state.error {
  color: #ffb3b3;
}

.reco-inline-state.error button {
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #f4f4f4;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}

.reco-stack-wrap {
  margin-top: 14px;
}

.reco-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(17, 21, 31, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.reco-card.fading {
  opacity: 0;
}

.reco-release-pill {
  display: inline-block;
  margin-bottom: 8px;
  background: #D4AF37;
  color: #000;
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.reco-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reco-thumb {
  width: 60px;
  height: 84px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 60px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.reco-head-copy {
  min-width: 0;
  flex: 1;
}

.reco-head-copy h3 {
  margin: 2px 0 4px;
  color: #F5F5F0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.reco-meta {
  margin: 0;
  color: #555;
  font-size: 11px;
  line-height: 1.25;
}

.reco-seeti-score {
  margin-top: 6px;
}

.reco-seeti-score-line {
  margin: 0;
  color: #f2f2f2;
  font-size: 11px;
  line-height: 1.35;
}

.reco-seeti-score-gap {
  margin-left: 10px;
}

.reco-streaming-line {
  margin: 4px 0 0;
  color: #9a9a9a;
  font-size: 10px;
  line-height: 1.35;
}

.reco-streaming-line span {
  color: #d4d4d4;
}

.reco-watchlist-note {
  margin: 4px 0 0;
  color: #f5d89b;
  font-size: 10px;
}

.reco-plot-wrap {
  margin-top: 10px;
}

.reco-description {
  margin: 0;
  color: #A0A0A0;
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reco-description.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.reco-read-more {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5d89b;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.reco-score-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
}

.reco-score-row-compact {
  margin-top: 4px;
}

.reco-score-row .watch {
  color: #4CAF50;
}

.reco-score-row .skip {
  color: #E53935;
}

.reco-score-row .watchlist {
  color: #f5d89b;
}

.reco-actions {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.reco-action-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  transition:
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.reco-action-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

.reco-action-btn.skip {
  color: #ff6b7a;
  border-color: rgba(255, 95, 115, 0.38);
  background: linear-gradient(160deg, rgba(255, 95, 115, 0.18), rgba(255, 95, 115, 0.05));
  box-shadow:
    0 6px 20px rgba(255, 95, 115, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.reco-action-btn.watch {
  color: #4ee39a;
  border-color: rgba(53, 207, 126, 0.38);
  background: linear-gradient(160deg, rgba(53, 207, 126, 0.18), rgba(53, 207, 126, 0.05));
  box-shadow:
    0 6px 20px rgba(53, 207, 126, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.reco-action-btn:hover {
  transform: translateY(-2px);
}

.reco-action-btn:active {
  transform: scale(0.94);
}

.reco-action-btn.skip:hover {
  border-color: rgba(255, 95, 115, 0.58);
  background: linear-gradient(160deg, rgba(255, 95, 115, 0.26), rgba(255, 95, 115, 0.1));
  box-shadow:
    0 8px 24px rgba(255, 95, 115, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.reco-action-btn.watch:hover {
  border-color: rgba(53, 207, 126, 0.58);
  background: linear-gradient(160deg, rgba(53, 207, 126, 0.26), rgba(53, 207, 126, 0.1));
  box-shadow:
    0 8px 24px rgba(53, 207, 126, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.reco-completion {
  margin-top: 16px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(12, 13, 19, 0.62);
  padding: 18px 14px;
}

.reco-completion h3 {
  margin: 0;
  font-size: 15px;
  color: #f1f2f4;
}

.reco-try-again-btn {
  margin-top: 12px;
  border: 1px solid rgba(245, 201, 117, 0.52);
  border-radius: 999px;
  background: #d4af37;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
}

.prime-hero-wrap {
  position: relative;
  padding: 0 var(--home-gutter, 16px) 0;
  overflow: visible;
}

.prime-hero-card {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  min-height: 210px;
  max-height: 268px;
  border-radius: 20px;
  border: 0;
  box-shadow: none;
}

.prime-hero-card--loading {
  background: #262626;
  display: grid;
  place-items: center;
}

.hero-loading-label {
  color: #dbdfe4;
  font-size: 13px;
  font-weight: 600;
}

.hero-dots {
  margin-top: 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hero-dot {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: var(--home-dot-inactive);
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    width 360ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 300ms ease,
    transform 220ms ease;
}

.hero-dot.is-active {
  width: 24px;
  background: var(--home-accent);
}

.hero-dot:not(.is-active):hover {
  transform: scale(1.15);
}

.prime-hero-strip {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  touch-action: pan-x pan-y;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.prime-hero-strip::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.prime-hero-tile {
  flex: 0 0 98px;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.prime-hero-tile img {
  width: 100%;
  height: 138px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.prime-home-sections {
  padding-top: 18px;
}

.prime-hero-card .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: none;
  animation: none;
  z-index: 1;
  transition: opacity 300ms ease;
}

#heroBanner.is-transitioning .hero-image,
#heroBanner.is-transitioning .hero-carousel-copy {
  opacity: 0.12;
}

.prime-hero-card .hero-carousel-copy {
  transition: opacity 300ms ease;
}

.hero-bleed {
  position: absolute;
  inset: -80px -56px -76px;
  width: calc(100% + 112px);
  height: calc(100% + 156px);
  object-fit: cover;
  object-position: center;
  filter: blur(42px) saturate(1.45) brightness(1.08) contrast(1.03);
  opacity: 0.46;
  transform: scale(1.07);
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.prime-hero-card {
  position: relative;
  z-index: 2;
}

.hero-carousel-copy {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  pointer-events: none;
}

.hero-carousel-title {
  margin: 0;
  color: #ffffff;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(17px, 4.8vw, 30px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}

.hero-carousel-genre {
  margin: 5px 0 0;
  color: #f5f5f5;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.15px;
  opacity: 0.92;
}

@keyframes hero-zoom {
  from {
    transform: scale(1.03);
  }
  to {
    transform: scale(1.07);
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.34) 42%,
    rgba(0, 0, 0, 0.86) 76%,
    rgba(7, 7, 7, 0.98) 100%
  );
}

.prime-hero-card.hero::before {
  display: none;
}

.prime-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.35) 58%,
    rgba(0, 0, 0, 0.72) 78%,
    rgba(0, 0, 0, 0.9) 100%
  );
  z-index: 3;
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.26) 0%, rgba(8, 8, 8, 0) 100%);
}

.hero-content {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
}

.prime-hero-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prime-hero-kicker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prime-hero-pill {
  background: #f6b310;
  color: #121212;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
}

.prime-hero-genre {
  color: #aac1df;
  font-size: 11px;
  line-height: 1;
}

.hero-content h1 {
  margin: 0 0 10px;
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.35px;
  text-wrap: balance;
}

.meta {
  color: #bcc7db;
  font-size: var(--type-meta);
  letter-spacing: 0.1px;
  opacity: 0.92;
}

.dots {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.dot.active {
  background: #fff;
}

.carousel {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 2px 1px 10px;
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carousel:active {
  cursor: grabbing;
}

.carousel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.poster-card {
  flex: 0 0 114px;
  height: 180px;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(124, 176, 229, 0.2);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .poster-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.4);
    border-color: rgba(130, 201, 255, 0.34);
  }
}

.poster-card--placeholder,
.poster-card.poster-card-media.poster-card--placeholder,
.poster-card.poster-card--title-blur {
  display: grid;
  place-items: center;
  background-image: none !important;
  background: linear-gradient(160deg, rgba(28, 42, 66, 0.96) 0%, rgba(12, 18, 30, 0.98) 100%);
  overflow: hidden;
  position: relative;
}

.poster-placeholder-bg {
  position: absolute;
  inset: -12px;
  background-size: cover;
  background-position: center;
  filter: blur(14px);
  transform: scale(1.08);
  opacity: 0.55;
}

.poster-card--placeholder .poster-placeholder-title,
.poster-card.poster-card-media.poster-card--placeholder .poster-placeholder-title,
.poster-card.poster-card--title-blur .poster-placeholder-title {
  position: relative;
  z-index: 1;
  padding: 8px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(245, 245, 245, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

.poster-card--placeholder span,
.poster-card.poster-card-media.poster-card--placeholder span {
  display: none;
}

.poster-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(4, 10, 20, 0) 0%, rgba(4, 10, 20, 0.76) 70%, rgba(4, 10, 20, 0.95) 100%);
  pointer-events: none;
}

.carousel .poster-card::after,
.upcoming-poster-card .poster-card-media::after {
  display: none;
}

.upcoming-poster-card {
  flex: 0 0 114px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(124, 176, 229, 0.2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
  background: #000000;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .upcoming-poster-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.4);
    border-color: rgba(130, 201, 255, 0.34);
  }
}

.carousel .poster-card,
.carousel .upcoming-poster-card,
.carousel .upcoming-poster-card .poster-card {
  transition: none;
}

.carousel .poster-card:hover,
.carousel .upcoming-poster-card:hover,
.carousel .upcoming-poster-card .poster-card:hover {
  transform: none;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
  border-color: rgba(124, 176, 229, 0.2);
}

.upcoming-poster-card .poster-card-media,
.upcoming-poster-card .poster-card.poster-card-media {
  flex: 0 0 180px;
  width: 100%;
  height: 180px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.upcoming-poster-meta {
  width: 100%;
  background: #000000;
  border: 0;
  border-radius: 0;
  padding: 8px 10px 9px;
  box-sizing: border-box;
}

.upcoming-poster-line {
  margin: 0;
  color: #f6f6f6;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.1px;
}

.upcoming-poster-line + .upcoming-poster-line {
  margin-top: 4px;
}

.upcoming-poster-waitlist-count {
  color: #4dff00;
  font-weight: 400;
}

.poster-score-watch {
  color: #4dff00;
  font-weight: 400;
}

.poster-score-skip {
  color: #c80000;
  font-weight: 400;
}

.carousel {
  align-items: flex-start;
}

.prime-home-sections .carousel {
  padding-bottom: 14px;
}

.poster-info {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 12px;
}

.poster-info h4 {
  margin: 0;
  font-size: 16px;
  line-height: 1.1;
}

.poster-info p {
  margin: 0;
  color: #d9cfbf;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.62);
}

.poster-info .meta-primary {
  font-size: 12px;
  font-weight: 700;
}

.poster-info .meta-secondary {
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.86;
}

.home-screen .section-head:first-child {
  margin-top: 18px;
}

.prime-home-sections .section-head {
  margin: 22px 0 10px;
}

.home-brand {
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.8px;
  margin: 10px 0 -30px;
  position: relative;
  z-index: 4;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.24);
}

.collection-title {
  margin: 2px 0 14px;
  font-size: 34px;
}

.collection-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.collection-head-row .collection-title {
  margin: 0;
}

.film-topbar,
.collection-topbar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.seeti-back-btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f7ff;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.seeti-back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.seeti-back-btn:active {
  transform: scale(0.96);
}

.seeti-back-btn:focus-visible {
  outline: 2px solid rgba(245, 201, 117, 0.85);
  outline-offset: 2px;
}

.seeti-back-btn-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.collection-filter-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.collection-filter-trigger {
  border: 0;
  background: transparent;
  color: #f6f6f6;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 6px 2px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 180ms ease;
}

.collection-filter-trigger:hover {
  color: #f6f6f6;
  opacity: 0.82;
}

.collection-filter-popup-layer {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.collection-filter-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.52);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  pointer-events: auto;
  cursor: pointer;
}

.collection-filter-popup-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: min(78vh, 560px);
  overflow-y: auto;
  pointer-events: auto;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, rgba(22, 24, 32, 0.72), rgba(10, 11, 16, 0.78));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 18px 18px 16px;
  -webkit-overflow-scrolling: touch;
}

.collection-filter-popup-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #f2f2f2;
}

.collection-filter-popup-section {
  margin-bottom: 16px;
}

.collection-filter-popup-heading {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: rgba(200, 200, 210, 0.72);
}

.collection-filter-popup-empty {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.collection-filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collection-filter-chip {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 9, 12, 0.45);
  color: rgba(220, 222, 230, 0.88);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.collection-filter-chip:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(16, 18, 24, 0.55);
}

.collection-filter-chip.is-selected {
  border-color: rgba(245, 201, 117, 0.55);
  color: rgba(252, 220, 160, 0.98);
  background: rgba(245, 201, 117, 0.12);
  box-shadow: 0 0 0 1px rgba(245, 201, 117, 0.12);
}

.collection-filter-submit {
  width: 100%;
  margin-top: 4px;
  border: 1px solid rgba(245, 201, 117, 0.45);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(245, 201, 117, 0.22), rgba(245, 201, 117, 0.08));
  color: rgba(255, 246, 228, 0.98);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 12px 14px;
  cursor: pointer;
}

.collection-filter-submit:hover {
  border-color: rgba(252, 214, 150, 0.65);
  background: linear-gradient(180deg, rgba(245, 201, 117, 0.3), rgba(245, 201, 117, 0.12));
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 118px);
  justify-content: center;
  gap: 12px;
}

.collection-grid .poster-card {
  flex: 0 0 118px;
  width: 118px;
  height: 182px;
  border-radius: 16px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  image-rendering: auto;
}

.collection-grid .upcoming-poster-card {
  flex: none;
  width: 118px;
  border-radius: 16px;
}

.collection-grid .upcoming-poster-card .poster-card-media {
  flex: 0 0 182px;
  width: 100%;
  height: 182px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.collection-grid .upcoming-poster-card .poster-card.poster-card-media {
  border-radius: 0;
}

.collection-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 14px;
}

.collection-filters-wrap {
  margin: 2px 0 14px;
}

.collection-filter-count {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 11px;
  letter-spacing: 0.4px;
}

.filter-chip {
  border: 1px solid #2d2d2d;
  background: #101010;
  color: var(--text-soft);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.4px;
  cursor: pointer;
}

.filter-chip.active {
  border-color: rgba(213, 185, 128, 0.42);
  color: var(--accent);
  background: rgba(213, 185, 128, 0.09);
}

.filter-chip-clear {
  border-style: dashed;
}

.collection-filter-empty {
  color: var(--muted);
  font-size: 12px;
}

.collection-status {
  margin: 18px 0 4px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.4px;
}

.film-hero {
  position: relative;
  height: 330px;
  border-radius: 18px;
  overflow: visible;
  box-sizing: content-box;
  margin-left: -10px;
  margin-right: -10px;
  z-index: 3;
  isolation: isolate;
}

.film-hero::before {
  content: "";
  position: absolute;
  top: -48px;
  left: -12px;
  right: -12px;
  height: 88px;
  background: radial-gradient(circle at 50% 100%, rgba(130, 90, 200, 0.22) 0%, rgba(130, 90, 200, 0) 72%);
  filter: blur(18px);
  pointer-events: none;
}

.film-screen {
  position: relative;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

.film-screen::before {
  content: "";
  position: absolute;
  inset: -10px -14px auto;
  height: 420px;
  background-image: var(--film-ambient);
  background-size: cover;
  background-position: center top;
  filter: blur(48px) saturate(1.35);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

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

.film-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
  display: block;
}

.film-hero::before,
.film-hero::after {
  border-radius: inherit;
}

.film-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0.1) 70%);
}

.film-hero-save-wrap {
  position: absolute;
  top: 14px;
  right: 14px;
  left: auto;
  bottom: auto;
  z-index: 5;
}

.film-hero-save-wrap.open {
  z-index: 130;
}

.film-hero-save-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: #ffffff;
  background: rgba(8, 8, 8, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.film-hero-save-btn.saved {
  color: #b8f6cf;
}

.film-hero-save-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.film-hero-content {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 14px;
}

.film-hero-content h1 {
  margin: 0 0 7px;
}

.film-hero-title-row {
  display: block;
  min-width: 0;
}

.film-hero-title-row h1,
.film-hero-title {
  margin: 0 0 7px;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(18px, 5.6vw, 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.film-hero-meta--upcoming {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #bcc7db;
  font-size: var(--type-meta);
  letter-spacing: 0.1px;
  opacity: 0.92;
}

.film-hero-meta-base {
  min-width: 0;
}

.film-hero-release-bubble {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(245, 209, 109, 0.7);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: #f5d89b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15px;
  white-space: nowrap;
}

.film-action-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 430px;
  z-index: 45;
  background: var(--bg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}

.film-action-bar-inner {
  display: flex;
  align-items: stretch;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}

.film-action-bar .watch-later-wrap {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 3;
}

.film-action-bar .watch-later-btn {
  width: 100%;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15px;
  padding: 11px 14px;
  text-align: center;
  border-radius: 8px;
}

.save-list-wrap {
  position: relative;
  flex: 0 0 auto;
  z-index: 3;
}

.save-list-wrap.open {
  z-index: 130;
}

.save-list-btn {
  border: 1px solid rgba(159, 197, 255, 0.45);
  background: rgba(13, 16, 26, 0.56);
  color: #cfe2ff;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.save-list-btn.saved {
  border-color: rgba(91, 224, 160, 0.55);
  color: #b8f6cf;
}

.save-list-chooser {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 131;
}

.seeti-dropdown-menu,
.save-list-chooser.seeti-dropdown-menu,
.save-list-chooser {
  min-width: 196px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(22, 24, 32, 0.94);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 6px;
  overflow: hidden;
}

.seeti-dropdown-item,
.save-list-chooser button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: #f2f2f2;
  text-align: left;
  padding: 12px 14px;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.1px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.seeti-dropdown-item + .seeti-dropdown-item,
.save-list-chooser button + button {
  margin-top: 2px;
  border-top: 0;
}

.seeti-dropdown-item:hover,
.save-list-chooser button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.seeti-dropdown-item-danger {
  color: #f0b4b4;
}

.seeti-dropdown-item-danger:hover {
  background: rgba(200, 64, 64, 0.16);
  color: #ffd0d0;
}

.watch-later-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(245, 201, 117, 0.45);
  background: rgba(13, 14, 18, 0.52);
  color: #f5d89b;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
}

.watch-later-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.watch-later-btn.watchlisted {
  border-color: rgba(74, 214, 131, 0.55);
  color: #b8f6cf;
}

.watchlisted-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 6;
}

.film-people-strip {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.film-person-chip {
  flex: 0 0 auto;
  width: 92px;
  text-align: center;
}

.film-person-avatar {
  width: 52px;
  height: 52px;
  margin: 0 auto 6px;
  border-radius: 50%;
  border: 1px solid #383838;
  background: radial-gradient(circle at 35% 28%, #c8d0dd 0 24%, #68778d 28% 52%, #1f2632 58% 100%);
  display: grid;
  place-items: center;
  color: #f4f4f4;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}

.film-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.film-key-person {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
}

.film-key-person .film-person-avatar {
  margin: 0;
  width: 46px;
  height: 46px;
}

.film-key-person small {
  display: block;
  color: #969696;
  font-size: 10px;
  margin-bottom: 2px;
}

.film-key-person span {
  display: block;
  color: #e5e5e5;
  font-size: 12px;
  line-height: 1.2;
}

.film-person-chip small {
  display: block;
  color: #969696;
  font-size: 10px;
  margin-bottom: 2px;
}

.film-person-chip span {
  display: block;
  color: #e5e5e5;
  font-size: 11px;
  line-height: 1.2;
}

.film-more-toggle {
  margin-top: 10px;
  border: 1px solid #2e2e2e;
  background: transparent;
  color: #d5d5d5;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.3px;
  cursor: pointer;
}

.film-details-block {
  margin-top: 10px;
  padding: 10px 0 4px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 240ms ease, transform 240ms ease, max-height 280ms ease;
}

.film-details-block.collapsed {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.film-details-block.expanded {
  max-height: 640px;
}

.film-detail-section + .film-detail-section {
  margin-top: 18px;
}

.film-detail-heading {
  margin: 0 0 8px;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: #ececec;
  letter-spacing: 0.15px;
}

.film-cast-section .film-detail-heading {
  margin-bottom: 16px;
}

.film-cast-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

.film-person-chip.cast {
  width: 70px;
}

.film-person-chip.cast .film-person-avatar {
  width: 42px;
  height: 42px;
}

.film-fun-fact {
  margin-top: 10px;
  color: #c5c5c5;
  font-size: 13px;
  line-height: 1.4;
}

.film-more-toggle.bottom {
  margin-top: 8px;
}

.film-score-wrap {
  margin-top: 16px;
}

.kicker {
  color: #b6b6b6;
  margin: 9px 0;
  font-size: 13px;
}

.soft-btn {
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  background: #222;
  color: #f4f4f4;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
}

.plot {
  font-size: 14px;
  color: #d4d4d4;
  line-height: 1.55;
}

.card {
  margin-top: 10px;
  background: linear-gradient(180deg, #121212, #0b0b0b);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

.glass-card {
  background: rgba(20, 22, 30, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bars .row {
  margin-bottom: 10px;
}

.bars label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 4px;
}

.track {
  height: 12px;
  border-radius: 999px;
  background: #202020;
  overflow: hidden;
}

.watch-fill {
  height: 100%;
  background: linear-gradient(90deg, #1f7d4a, #42dd86);
}

.skip-fill {
  height: 100%;
  background: linear-gradient(90deg, #742f2f, #ff6666);
}

.verdict-card {
  position: relative;
  overflow: visible;
  margin-top: 12px;
  padding: 12px 16px 12px 16px;
  border-radius: 10px;
  background: linear-gradient(170deg, rgba(20, 24, 34, 0.2), rgba(10, 12, 18, 0.14));
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.verdict-card > .seeti-share-btn.verdict-share-btn {
  position: absolute;
  top: 20px;
  right: 15px;
  z-index: 2;
}

.verdict-top-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding-right: 26px;
}

.verdict-title-panel {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.verdict-actions-panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  overflow: visible;
}

.verdict-card .verdict-title.film-score-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}

.verdict-card .verdicts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.verdict-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.verdicts-offset {
  flex: 1 1 auto;
  min-width: 0;
}

.verdict-watch-wrap {
  position: relative;
  flex: 0 0 auto;
}

.verdict-card .verdicts .vote.watch,
.verdict-card .verdicts .vote.skip {
  flex: 0 0 auto;
  box-sizing: border-box;
}

.verdict-card .vote.watch.active,
.verdict-card .vote.skip.active {
  box-shadow: inset 0 0 0 1px currentColor;
}

.verdict-clear-btn {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  padding: 2px 8px;
  border: none;
  border-radius: 4px;
  background: none;
  color: #777;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.verdict-clear-btn:hover:not(:disabled):not(.is-inactive) {
  color: #f0b0b0;
}

.verdict-clear-btn:disabled,
.verdict-clear-btn.is-inactive {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@keyframes watchChannelPanelIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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

.watch-channel-menu-panel {
  display: none;
  position: absolute;
  z-index: 20;
  min-width: 180px;
  width: max-content;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 10, 10, 0.98);
  box-sizing: border-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.watch-channel-menu-panel.is-open {
  display: flex;
  visibility: hidden;
  animation: watchChannelPanelIn 200ms ease-out;
}

.watch-channel-menu-panel.is-open.global-chooser-floating {
  visibility: visible;
}

.watch-channel-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #f2f2f2;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 14px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  box-sizing: border-box;
}

.watch-channel-menu-item::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
}

.watch-channel-menu-item.is-selected::before {
  border-color: #3ed681;
  background: #3ed681;
}

.watch-channel-menu-item.is-selected {
  font-weight: 700;
  color: #f8f8f8;
}

.watch-channel-menu-item + .watch-channel-menu-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.watch-channel-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.watch-channel-menu-panel.is-locked .watch-channel-menu-item {
  pointer-events: none;
  opacity: 0.85;
  cursor: default;
}

.watch-channel-menu-panel.is-locked .watch-channel-menu-item:hover {
  background: transparent;
}

.watch-channel-info-wrap {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
}

.watch-channel-info-btn {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 10, 10, 0.9);
  color: #bdbdbd;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.watch-channel-info-btn[aria-expanded="true"] {
  border-color: rgba(245, 209, 109, 0.5);
  color: #f5d16d;
}

.watch-channel-info-popover {
  position: absolute;
  width: min(240px, 72vw);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(12, 12, 12, 0.98);
  padding: 10px 12px;
  z-index: 12;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  display: none;
}

.watch-channel-info-popover.is-open {
  display: block;
  visibility: hidden;
  animation: watchChannelPanelIn 200ms ease-out;
}

.watch-channel-info-popover.is-open.global-chooser-floating {
  visibility: visible;
}

.watch-channel-info-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #f2f2f2;
}

.watch-channel-info-stat {
  margin: 0;
  font-size: 12px;
  color: #d0d0d0;
  line-height: 1.45;
}

.watch-channel-info-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: #8f8f8f;
}


@media (prefers-reduced-motion: reduce) {
  .watch-channel-menu-panel.is-open,
  .watch-channel-info-popover.is-open {
    animation: none;
  }
}

.verdict-card .vote {
  min-width: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 8, 8, 0.9);
  color: #f4f4f4;
  box-shadow: none;
}

.verdict-card .vote.watch:not(.active),
.verdict-card .vote.skip:not(.active) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(8, 8, 8, 0.9);
  color: #ececec;
  box-shadow: none;
}

.verdict-card::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 12%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(38px);
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, -50%);
  transition: right 220ms ease, opacity 180ms ease, background 180ms ease;
}

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

.verdict-card.verdict-watch::before {
  right: 10%;
  opacity: 0.22;
  background: radial-gradient(circle, rgba(58, 220, 144, 0.42) 0%, rgba(58, 220, 144, 0) 72%);
}

.verdict-card.verdict-skip::before {
  right: 10%;
  opacity: 0.22;
  background: radial-gradient(circle, rgba(255, 88, 118, 0.44) 0%, rgba(255, 88, 118, 0) 72%);
}

.verdict-card.verdict-none::before {
  right: 10%;
  opacity: 0.22;
  background: radial-gradient(circle, rgba(245, 209, 109, 0.44) 0%, rgba(245, 209, 109, 0) 72%);
}

.vote {
  border-radius: 12px;
  padding: 12px 8px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #333;
  background: #111;
  color: #e6e6e6;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.vote.watch.active {
  border-color: rgba(62, 214, 129, 0.58);
  background: linear-gradient(180deg, rgba(34, 118, 74, 0.88), rgba(22, 74, 47, 0.9));
  box-shadow: 0 0 0 1px rgba(62, 214, 129, 0.2), 0 0 10px rgba(62, 214, 129, 0.2);
  color: #eafff2;
}

.verdict-card .vote.watch.active {
  border-color: rgba(62, 214, 129, 0.72);
  background: linear-gradient(180deg, rgba(30, 108, 68, 0.95), rgba(18, 62, 40, 0.98));
}

.vote.skip.active {
  border-color: rgba(255, 107, 107, 0.5);
  background: linear-gradient(180deg, rgba(145, 52, 52, 0.88), rgba(88, 33, 33, 0.9));
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.18), 0 0 10px rgba(255, 107, 107, 0.16);
  color: #ffecec;
}

.verdict-card .vote.skip.active {
  border-color: rgba(255, 107, 107, 0.62);
  background: linear-gradient(180deg, rgba(132, 46, 46, 0.95), rgba(82, 30, 30, 0.98));
}

.vote.none.active {
  border-color: rgba(245, 209, 109, 0.5);
  background: linear-gradient(180deg, rgba(120, 98, 44, 0.88), rgba(78, 64, 30, 0.9));
  box-shadow: 0 0 0 1px rgba(245, 209, 109, 0.2), 0 0 10px rgba(245, 209, 109, 0.14);
  color: #fff4cd;
}

.verdict-card .verdict-disclaimer {
  margin: 12px 0 0;
  text-align: center;
  color: #f0f0f0;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.1px;
}

.verdict-card .vote-locked-note {
  margin: 6px 0 0;
  text-align: center;
  color: #9a9a9a;
  font-size: 11px;
}

.waitlist-card {
  margin-top: 12px;
  text-align: center;
  border-color: rgba(246, 246, 246, 0.22);
}

.waitlist-global-release-note {
  margin: 10px 4px 0;
  color: var(--muted);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}

.waitlist-head-row {
  min-height: 38px;
  margin-bottom: 2px;
}

.seeti-waitlist-logo-slot {
  height: var(--brand-logo-waitlist-slot-height, 34px);
  width: 100%;
  margin: 0 auto 6px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: transparent;
  line-height: 0;
}

.seeti-waitlist-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  height: var(--brand-logo-waitlist-image-height, 211px);
  width: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  background: transparent;
}

.waitlist-share-btn {
  right: 2px;
  top: 2px;
}

.waitlist-count {
  margin: 8px 0 14px;
  font-size: 13px;
  color: #d6d6d6;
  letter-spacing: 0.25px;
}

.waitlist-card .vote.wait-toggle {
  width: 100%;
  border: 1px solid rgba(246, 246, 246, 0.4);
  background: transparent;
  color: #f6f6f6;
  border-radius: 8px;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

.waitlist-card .vote.wait-toggle.active {
  border-color: rgba(245, 209, 109, 0.6);
  background: linear-gradient(180deg, rgba(120, 98, 44, 0.88), rgba(78, 64, 30, 0.9));
  box-shadow: 0 0 0 1px rgba(245, 209, 109, 0.18), 0 0 10px rgba(245, 209, 109, 0.14);
  color: #fff4cd;
}

.vote-locked-note {
  margin: 8px 0 0;
  color: #555;
  font-size: 10px;
  text-align: center;
}

body.watch-picker-open {
  overflow: hidden;
}

.watch-picker-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  box-sizing: border-box;
}

.watch-picker-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  cursor: pointer;
}

.watch-picker-modal {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(175deg, rgba(22, 24, 32, 0.98), rgba(10, 11, 16, 0.98));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  padding: 16px 14px 14px;
}

.watch-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.watch-picker-head strong {
  font-size: 14px;
  letter-spacing: 0.2px;
}

.watch-picker-close {
  border: 0;
  background: transparent;
  color: #d4d4d4;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.watch-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.watch-cal-nav span {
  font-size: 13px;
  color: #e7e7e7;
}

.watch-cal-nav-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #ececec;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
}

.watch-cal-weekdays,
.watch-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.watch-cal-weekdays {
  margin-bottom: 7px;
}

.watch-cal-weekdays span {
  text-align: center;
  font-size: 10px;
  color: #8f8f8f;
}

.watch-cal-cell {
  height: 38px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #e6e6e6;
  font-size: 13px;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

.watch-cal-cell.day {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.watch-cal-cell.day.selected {
  border-color: rgba(245, 201, 117, 0.75);
  background: rgba(245, 201, 117, 0.22);
  color: #ffefc5;
}

.watch-cal-cell.day.today:not(.selected) {
  border-color: rgba(77, 255, 0, 0.45);
  color: #d8ffd0;
}

.watch-cal-cell.day:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.watch-cal-cell.pad {
  visibility: hidden;
  pointer-events: none;
}

.watch-picker-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.watch-picker-today-btn {
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #ececec;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
}

.watch-picker-confirm {
  flex: 1 1 0;
  margin-top: 0;
  border-radius: 10px;
  border: 1px solid rgba(245, 201, 117, 0.5);
  background: linear-gradient(180deg, rgba(120, 98, 44, 0.88), rgba(78, 64, 30, 0.9));
  color: #fff4cd;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  cursor: pointer;
}

.watch-picker-confirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.watch-reminder-overlay {
  position: fixed;
  inset: 0;
  z-index: 84;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 10, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.watch-reminder-toast {
  position: fixed;
  left: auto;
  top: auto;
  transform: none;
  width: calc(100% - 38px);
  max-width: 408px;
  text-align: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 14, 20, 0.94);
  color: #f5f5f5;
  font-size: 15px;
  line-height: 1.5;
  padding: 18px 20px;
  z-index: 85;
}

.review {
  border-top: 1px dashed #2a2a2a;
  padding-top: 10px;
  margin-top: 10px;
}

.review b {
  font-size: 13px;
}

.review-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-author-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  flex: 1;
}

.review-author-link:hover .review-head-meta b,
.review-author-link:hover .review-reply-head b {
  color: #f5d89b;
}

.review-author-link--avatar-only {
  flex: 0 0 auto;
}

.review-author-name-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.review-author-name-link:hover b {
  color: #f5d89b;
}

.review-head-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.review-thread-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #eef4ff;
}

.review-thread-avatar.is-review-author {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.review-reply-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.review-reply-body {
  min-width: 0;
  flex: 1;
}

.review-reply-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.review-reply-card-head .review-reply-head {
  min-width: 0;
  flex: 1 1 auto;
}

.review-reply-edit-input {
  margin-top: 6px;
  min-height: 64px;
}

.review p {
  margin: 4px 0 0;
  color: #cfcfcf;
  font-size: 13px;
}

.review {
  position: relative;
}

.review-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.review-card-head .review-head {
  min-width: 0;
  flex: 1 1 auto;
}

.review-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.review-menu-trigger {
  border: 0;
  background: transparent;
  color: #bdbdbd;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.review-menu-trigger:hover {
  color: #f2f2f2;
}

.review-thread-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 148px;
}

.review-reply .review-thread-menu {
  top: auto;
  bottom: calc(100% + 4px);
  z-index: 50;
}

.review-thread-locked {
  color: #8f8f8f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}

.review-thread-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.review-thread-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #b8b8b8;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.review-thread-action:hover {
  color: #ececec;
}

.review-thread-action.is-active {
  color: #f5d89b;
}

.review-thread-time {
  color: #8f94ab;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  margin-left: 2px;
  flex-shrink: 0;
}

.review-thread-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.review-replies-wrap {
  margin-top: 10px;
}

.review-replies-toggle {
  border: 0;
  background: transparent;
  color: #9eb4ff;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.review-replies-toggle:hover {
  color: #c5d4ff;
}

.review-replies-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.review-reply-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.review-reply-head b {
  font-size: 12px;
  color: #f1f1f1;
}

.review-reply-head .seeti-tier-badge {
  padding: 2px 8px;
  font-size: 10px;
}

.review-reply-head span {
  font-size: 11px;
  color: #8f94ab;
}

.review-reply-body p {
  margin: 4px 0 0;
  color: #cfcfcf;
  font-size: 13px;
  line-height: 1.45;
}

.film-community-card {
  margin-top: 28px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.film-community-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.film-community-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.community-list > .review:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.film-community-heading .write-review-link {
  margin-top: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.film-community-title {
  margin: 0;
  min-width: 0;
  flex: 1;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.film-community-title span {
  font-size: 14px;
  font-weight: 400;
  color: #9a9a9a;
  margin-left: 6px;
}

.film-community-card > .kicker,
.film-community-card > .community-list {
  margin-top: 16px;
}

.profile-community-tabs {
  margin: 20px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 6px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  gap: 0;
}

.profile-community-tabs .community-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  font-size: 12px;
  padding: 6px 4px;
  text-align: center;
  white-space: nowrap;
}

.profile-community-tabs .community-tab + .community-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
}

.community-tab {
  border: 0;
  background: transparent;
  color: #c8c8c8;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.community-tab span {
  color: #a8a8a8;
  margin-left: 4px;
  font-size: 12px;
}

.community-tab.active {
  color: #f4f4f4;
  border-bottom-color: rgba(245, 201, 117, 0.9);
}

.community-tab.locked,
.community-tab:disabled {
  color: #8c8c8c;
  cursor: not-allowed;
}

.community-tab.locked span,
.community-tab:disabled span {
  color: #7e7e7e;
}

.write-review-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: #f5d89b;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.write-review-link:hover {
  color: #ffe3a8;
}

.write-review-bubble {
  margin-top: 10px;
  border: 1px solid rgba(245, 201, 117, 0.4);
  background: rgba(22, 23, 30, 0.65);
  color: #f5d89b;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.community-list {
  margin-top: 10px;
  padding-bottom: 4px;
}

.write-review-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 3, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 90;
}

.write-review-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 36px);
  max-width: 404px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(175deg, rgba(18, 21, 30, 0.95), rgba(8, 10, 15, 0.95));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  padding: 14px;
  z-index: 91;
}

.write-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.write-review-head img {
  width: 68px;
  height: 96px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.write-review-head h3 {
  margin: 0;
  font-size: 36px;
  line-height: 1.05;
  color: #f5f5f5;
}

.write-review-input {
  margin-top: 12px;
  width: 100%;
  min-height: 110px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(7, 8, 12, 0.8);
  color: #efefef;
  padding: 12px;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.write-review-submit {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #262626;
  color: #f0f0f0;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.write-review-submit:hover {
  background: #333;
}

.discussion-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0f0f0f;
  padding: 12px;
  margin-bottom: 10px;
}

.discussion-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.discussion-meta {
  display: flex;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 7px;
}

.discussion-card p {
  margin: 0;
  color: #d2d2d2;
  font-size: 13px;
}

.hot-screen .search-input-wrap {
  margin-top: 10px;
}

.hot-screen .section-head.hot-section-head h2 {
  font-size: 17px;
  font-weight: 700;
}

.hot-discussion {
  margin-top: 12px;
  border-color: #262626;
  background: linear-gradient(180deg, #121212, #0d0d0d);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
}

.discussion-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.discussion-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.discussion-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f7d2bf 0 22%, #9f6d5a 24% 45%, #2f2a33 48% 100%);
  border: 1px solid #3a353a;
}

.discussion-author strong {
  display: block;
  font-size: 14px;
  line-height: 1.1;
}

.discussion-author small {
  color: #999;
  font-size: 11px;
}

.discussion-more {
  border: 0;
  background: transparent;
  color: #d5d5d5;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.hot-discussion h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.2;
}

.hot-discussion p {
  margin: 0;
  color: #dbdbdb;
  font-size: 14px;
  line-height: 1.35;
}

.discussion-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  color: #d5d5d5;
  font-size: 12px;
}

.discussion-actions span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid #2b2b2b;
  border-radius: 999px;
  background: #121212;
  cursor: pointer;
}

.discussion-actions span.is-delete {
  color: #c98a8a;
  border-color: #3a2828;
}

.discussion-actions span.is-delete:hover {
  opacity: 0.88;
}

.inline-reply-wrap {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.inline-reply-input {
  flex: 1;
  border: 1px solid #2f2f2f;
  background: #101010;
  color: #f2f2f2;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  outline: none;
}

.inline-reply-wrap button {
  border: 1px solid rgba(245, 201, 117, 0.5);
  background: rgba(120, 98, 44, 0.88);
  color: #fff4cd;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.inline-edit-input {
  margin-top: 8px;
  width: 100%;
  min-height: 86px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(7, 8, 12, 0.8);
  color: #efefef;
  padding: 10px;
  font-size: 13px;
  line-height: 1.35;
  resize: vertical;
  outline: none;
}

.inline-edit-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.inline-edit-actions button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #e8e8e8;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.search-bar {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid #2f2f2f;
  background: #101010;
  color: #f8f8f8;
  outline: none;
  font-size: 15px;
}

.search-group {
  margin-top: 14px;
}

.search-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.search-history-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.search-history-clear {
  border: 0;
  background: transparent;
  color: #8a8a8a;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  flex-shrink: 0;
}

.search-history-clear:hover {
  color: #c8c8c8;
}

.result-item {
  border-bottom: 1px solid #1e1e1e;
  padding: 10px 0;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  touch-action: manipulation;
}

.result-item-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  min-height: 52px;
  box-sizing: border-box;
}

.result-item-btn:active {
  opacity: 0.72;
}

.search-screen {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.result-item img,
.mini-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: #263040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #eef4ff;
}

.result-item .square {
  border-radius: 8px;
}

.result-item h4 {
  margin: 0;
  font-size: 14px;
}

.result-item p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.profile {
  background: transparent;
}

.profile-topbar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  margin: 0 0 14px;
  min-height: 40px;
  gap: 8px;
}

.profile-topbar-leading {
  justify-self: start;
}

.profile-topbar-leading .seeti-back-btn {
  width: 40px;
  height: 40px;
}

.profile-topbar-spacer {
  width: 40px;
  height: 40px;
}

.profile-topbar-username {
  margin: 0;
  text-align: center;
  color: #f1f1f1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-topbar-menu-wrap,
.profile-menu-wrap {
  position: relative;
  justify-self: end;
}

.profile-menu-trigger {
  width: 40px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #f6f6f6;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 0;
}

.profile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 41;
  min-width: 148px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #1a1a1a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  padding: 6px;
}

.profile-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #f6f6f6;
  text-align: left;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.profile-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.profile-identity-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 4px;
}

.profile-avatar-compact {
  width: 76px;
  height: 76px;
  font-size: 20px;
  margin-top: 8px;
  flex: 0 0 auto;
  overflow: hidden;
}

.profile-avatar-edit-wrap {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  width: 76px;
  height: 76px;
  margin-top: 8px;
  align-self: flex-start;
}

.profile-avatar-edit-wrap > .avatar {
  grid-area: 1 / 1;
  width: 76px;
  height: 76px;
  margin-top: 0;
}

.profile-avatar-edit-wrap .profile-avatar-compact {
  margin-top: 0;
}

.profile-avatar-edit-wrap:has(.profile-avatar-edit-btn)::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.34);
  pointer-events: none;
  z-index: 1;
}

.profile-avatar-edit-btn {
  grid-area: 1 / 1;
  place-self: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(18, 18, 18, 0.72);
  color: #f5f5f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.profile-avatar-edit-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-photo-remove-btn {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d4af37;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.profile-username-locked {
  opacity: 0.72;
  cursor: not-allowed;
}

.profile-username-hint {
  margin: -2px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: #9a9a9a;
}

.user-avatar-has-photo {
  overflow: hidden;
  padding: 0;
}

.user-avatar-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.notification-row-avatar.user-avatar-has-photo,
.mini-avatar.user-avatar-has-photo,
.review-thread-avatar.user-avatar-has-photo {
  background: transparent !important;
}

.profile-ig-stats {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  padding-top: 6px;
}

.profile-ig-stat {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: center;
}

.profile-ig-stat strong {
  display: block;
  font-size: 18px;
  line-height: 1.1;
  color: #f5f5f5;
  font-weight: 700;
}

.profile-ig-stat span {
  display: block;
  margin-top: 3px;
  color: #a8a8a8;
  font-size: 12px;
  line-height: 1.2;
}

.profile-identity-meta {
  margin-top: 16px;
}

.profile-edit-open .profile-identity-meta {
  margin-top: 20px;
}

.profile-edit-open .profile-photo-remove-btn {
  margin-top: 10px;
}

.profile-edit-open .profile-inline-edit {
  margin-top: 18px;
}

.profile-name-row .profile-name {
  margin: 0;
}

.profile-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.profile-seeti-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-seeti-score {
  font-size: 12px;
  color: #a0a0a0;
  white-space: nowrap;
}

.seeti-tier-badge-btn {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.seeti-tier-badge-btn:hover .seeti-tier-badge {
  filter: brightness(1.08);
}

.profile-seeti-bubble-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 3, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 90;
}

.profile-seeti-bubble {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 91;
  min-width: 196px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 24, 32, 0.96);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 20px 24px;
  text-align: center;
}

.profile-seeti-bubble-tier {
  margin: 0 0 12px;
}

.profile-seeti-bubble-score {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #f5f5f5;
  letter-spacing: 0.2px;
}

.profile-follow-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  background: #454545;
  color: #fff;
  cursor: pointer;
}

.profile-follow-chip.is-following {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: #e8e8e8;
}

.profile-bio {
  margin: 10px 0 12px;
}

.profile-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.profile-head > div:last-child {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #b4c0cd;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.avatar.profile-avatar-compact {
  width: 76px;
  height: 76px;
  font-size: 20px;
}

.profile-avatar {
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
}

.profile-name {
  margin: 0;
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: 0.1px;
  color: rgba(245, 245, 245, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-username {
  margin: 5px 0 0;
  color: #9e9e9e;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.seeti-tier-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-single-badge {
  margin-top: 7px;
}

.seeti-tier-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.tier-badge-iron {
  background: #6b6b6b;
  color: #fff;
}

.tier-badge-bronze {
  background: #cd7f32;
  color: #fff;
}

.tier-badge-silver {
  background: #c0c0c0;
  color: #1a1a1a;
}

.tier-badge-gold {
  background: #d4af37;
  color: #1a1a1a;
}

.tier-badge-legend {
  background: linear-gradient(90deg, #d4af37, #a67c2e);
  color: #fff;
}

.seeti-tier-total {
  font-size: 11px;
  color: #a0a0a0;
  white-space: nowrap;
}

.profile-edit-inline-btn {
  border: 1px solid rgba(245, 201, 117, 0.4);
  background: rgba(22, 23, 30, 0.65);
  color: #f5d89b;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #3a3a3a;
}

.tier-iron {
  color: #d2d2d2;
}

.tier-bronze {
  color: #e4b17a;
}

.tier-silver {
  color: #dbe4ee;
}

.tier-gold {
  color: #ffd969;
  border-color: #6b5320;
  background: linear-gradient(90deg, rgba(255, 214, 102, 0.15), rgba(137, 100, 14, 0.15));
}

.tier-legend {
  color: #ffe08b;
  border-color: #806117;
  background: linear-gradient(90deg, rgba(255, 224, 139, 0.19), rgba(186, 140, 35, 0.2));
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.stats-inline {
  margin-top: 16px;
  gap: 14px;
}

.stats-inline div {
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: center;
  padding: 0;
}

.stats-inline strong {
  display: block;
  font-size: 26px;
  line-height: 1;
}

.stats-inline span {
  margin-top: 4px;
  display: block;
  color: #a8a8a8;
  font-size: 12px;
}

.profile-stats-drilldown {
  gap: 10px;
}

.profile-stat-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  border-radius: 14px;
  padding: 10px 6px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.profile-stat-btn:hover {
  border-color: rgba(245, 201, 117, 0.46);
  background: rgba(245, 201, 117, 0.08);
  transform: translateY(-1px);
}

.profile-drilldown-screen {
  min-height: calc(100vh - 32px);
}

.profile-drilldown-title {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.profile-drilldown-title-text {
  line-height: 1.05;
}

.profile-drilldown-title-count {
  font-size: 18px;
  font-weight: 600;
  color: #a6b2c7;
  letter-spacing: 0.2px;
}

.profile-drilldown-head-row .collection-filter-controls {
  flex-shrink: 0;
}

.drilldown-list {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.drilldown-item {
  border-bottom: 0;
  padding: 0;
}

.drilldown-item + .drilldown-item {
  margin-top: 10px;
}

.drilldown-card {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 12, 12, 0.7);
  color: #efefef;
  border-radius: 10px;
  padding: 8px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.drilldown-card-main {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 190px;
  cursor: pointer;
}

.drilldown-thumb {
  width: 37px;
  aspect-ratio: 118 / 182;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex: 0 0 auto;
  display: block;
  background: #141414;
  clip-path: inset(0 round 8px);
}

.drilldown-text {
  min-width: 0;
  flex: 1 1 auto;
}

.drilldown-text span {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drilldown-text small {
  display: block;
  color: #aaaaaa;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drilldown-actions {
  margin-top: 0;
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 1 auto;
}

.drilldown-actions button {
  border: 1px solid #2f2f2f;
  background: #121212;
  color: #ececec;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .drilldown-card-main {
    flex-basis: 100%;
  }

  .drilldown-actions {
    width: 100%;
    margin-left: 44px;
    justify-content: flex-start;
  }
}

.bio {
  margin: 16px 0 14px;
  color: #d2d2d2;
  font-size: 14px;
  line-height: 1.45;
}

.profile .bio.profile-bio {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.profile-inline-edit {
  margin: 16px 0 12px;
  display: grid;
  gap: 8px;
}

@media (max-width: 360px) {
  .profile-identity-row {
    gap: 14px;
  }

  .profile-avatar-compact {
    width: 68px;
    height: 68px;
    font-size: 18px;
  }

  .avatar.profile-avatar-compact {
    width: 68px;
    height: 68px;
    font-size: 18px;
  }

  .profile-avatar-edit-wrap {
    width: 68px;
    height: 68px;
  }

  .profile-avatar-edit-wrap > .avatar {
    width: 68px;
    height: 68px;
  }

  .profile-ig-stat strong {
    font-size: 16px;
  }

  .profile-ig-stat span {
    font-size: 11px;
  }

  .profile-name {
    font-size: 16px;
  }
}

.profile-inline-edit label {
  color: #b7b7b7;
  font-size: 12px;
}

.profile-inline-edit input,
.profile-inline-edit textarea {
  width: 100%;
  border: 1px solid #2f2f2f;
  background: #101010;
  color: #f2f2f2;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}

.profile-inline-edit textarea {
  min-height: 86px;
  resize: vertical;
}

.profile-inline-edit-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-inline-edit-foot span {
  font-size: 11px;
  color: #969696;
}

.profile-inline-edit-foot div {
  display: flex;
  gap: 8px;
}

.profile-inline-edit-foot button {
  border: 1px solid #2f2f2f;
  background: #141414;
  color: #ececec;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.profile-list-block {
  margin-top: 12px;
}

.my-list-controls {
  margin-bottom: 14px;
}

.my-list-actions {
  margin-top: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.my-list-action-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.my-list-actions.inline {
  margin-top: 0;
  margin-bottom: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: relative;
}

.my-list-delete-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 3, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 140;
}

.my-list-delete-confirm {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 34px);
  max-width: 360px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(175deg, rgba(18, 21, 30, 0.95), rgba(8, 10, 15, 0.95));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  padding: 14px;
  z-index: 141;
}

.my-list-delete-confirm h3 {
  margin: 0;
  font-size: 18px;
}

.my-list-delete-confirm p {
  margin: 10px 0 0;
  color: #d8d8d8;
  font-size: 13px;
  line-height: 1.4;
}

.my-list-delete-confirm-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.my-list-delete-btn {
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.my-list-delete-btn.cancel {
  border: 1px solid #2f2f2f;
  background: #121212;
  color: #ececec;
}

.my-list-delete-btn.danger {
  border: 1px solid rgba(255, 107, 107, 0.58);
  background: linear-gradient(180deg, rgba(145, 52, 52, 0.88), rgba(88, 33, 33, 0.9));
  color: #ffecec;
}

.my-list-actions button {
  border: 1px solid #2f2f2f;
  background: #121212;
  color: #ececec;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  cursor: pointer;
}

.my-list-edit-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 6px;
  min-width: 90px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(16, 16, 16, 0.96);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
  z-index: 5;
}

.my-list-edit-menu button {
  width: 100%;
  text-align: left;
}

.my-list-composer {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.my-list-composer-input {
  width: 100%;
  border: 1px solid #2f2f2f;
  background: #101010;
  color: #f2f2f2;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}

.my-list-composer-actions {
  display: flex;
  gap: 8px;
}

.my-list-rename-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.my-list-rename-input {
  width: auto;
  flex: 0 1 180px;
  min-width: 120px;
}

.my-list-rename-actions {
  margin-left: auto;
  flex-wrap: nowrap;
}

.my-list-composer-btn {
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

.my-list-composer-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.my-list-composer-btn.primary {
  border-color: rgba(245, 201, 117, 0.45);
  background: linear-gradient(180deg, rgba(145, 111, 35, 0.95), rgba(97, 72, 22, 0.95));
  color: #fff4ce;
}

.my-list-composer-btn.secondary {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #e8e8e8;
}

.my-list-group {
  margin-top: 10px;
  position: relative;
}

.my-list-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.my-list-group-head .section-head {
  margin: 0;
}

.section-head.compact {
  margin: 0;
}

.profile-list-item,
.profile-feed-item {
  border-bottom: 1px solid #1f1f1f;
  padding: 10px 0;
}

.profile-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-list-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.profile-list-meta > div {
  min-width: 0;
}

.profile-list-head {
  margin-bottom: 10px;
  gap: 8px;
}

.profile-list-preview-strip {
  width: 86px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, #131313, #0f0f0f);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  position: relative;
}

.profile-list-preview-strip img,
.profile-list-preview-fallback {
  flex: 1 1 0;
  min-width: 0;
  object-fit: cover;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-list-preview-strip img:last-child,
.profile-list-preview-fallback:last-child {
  border-right: 0;
}

.profile-list-preview-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #232323, #181818);
  color: #d9d0c1;
  font-size: 11px;
  font-weight: 700;
}

.profile-list-preview-strip.empty {
  display: grid;
  place-items: center;
}

.profile-list-preview-strip.empty span {
  color: #d2c9bc;
  font-size: 14px;
  font-weight: 700;
}

.profile-list-preview-overflow {
  position: absolute;
  right: 4px;
  bottom: 4px;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #f4e6c8;
  border: 1px solid rgba(245, 201, 117, 0.48);
  background: rgba(9, 10, 13, 0.86);
}

.profile-list-meta h4 {
  margin: 0;
  font-size: 14px;
}

.profile-list-meta p {
  margin: 3px 0 0;
  color: #9f9f9f;
  font-size: 12px;
}

.profile-list-actions {
  margin-top: 0;
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.profile-list-actions button {
  border: 1px solid #2f2f2f;
  background: #121212;
  color: #ececec;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .my-list-group-head {
    flex-wrap: wrap;
  }

  .my-list-actions.inline {
    width: 100%;
    justify-content: flex-start;
  }

  .my-list-edit-menu {
    right: auto;
    left: 0;
  }
}

.profile-feed-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.profile-feed-head strong {
  font-size: 14px;
}

.profile-feed-head span {
  color: #9a9a9a;
  font-size: 11px;
}

.profile-feed-item p {
  margin: 6px 0 0;
  color: #cdcdcd;
  font-size: 13px;
  line-height: 1.4;
}

.profile-review-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.profile-review-thumb,
.profile-review-thumb-fallback {
  width: 42px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  flex: 0 0 auto;
}

.profile-review-thumb {
  object-fit: cover;
  object-position: center;
  background: var(--bg);
}

.profile-review-thumb-fallback {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(28, 42, 66, 0.96) 0%, rgba(12, 18, 30, 0.98) 100%);
}

.profile-review-thumb--title-blur {
  display: grid;
  place-items: center;
}

.profile-review-thumb-bg {
  position: absolute;
  inset: -8px;
  background-size: cover;
  background-position: center;
  filter: blur(10px);
  transform: scale(1.08);
  opacity: 0.55;
}

.profile-review-thumb-title {
  position: relative;
  z-index: 1;
  padding: 4px 5px;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(245, 245, 245, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.profile-review-content {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: start;
}

.profile-review-title {
  grid-column: 1;
  grid-row: 1;
  margin: 1px 0 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-review-aside {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.profile-review-aside .review-menu-wrap {
  position: relative;
}

.profile-review-aside .review-thread-menu {
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
}

.profile-review-date {
  color: #9a9a9a;
  font-size: 11px;
  line-height: 1.2;
}

.profile-review-text-wrap {
  position: relative;
  grid-column: 1;
  grid-row: 2;
}

.profile-review-text {
  margin: 0;
  color: #cdcdcd;
  font-size: 13px;
  line-height: 1.4;
}

.profile-review-text.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.profile-review-text.is-expanded {
  display: block;
  overflow: visible;
}

.profile-review-read-more {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 2.5em;
  background: linear-gradient(90deg, transparent, #101218 35%);
  border: 0;
  color: #f5d89b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.profile-review-read-more.is-expanded {
  position: static;
  display: inline-block;
  margin-top: 4px;
  padding-left: 0;
  background: transparent;
}

.profile-review-item.is-clickable {
  cursor: pointer;
}

.profile-review-action {
  border: 0;
  background: transparent;
  color: #f6f6f6;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 0;
  cursor: pointer;
  line-height: 1.2;
}

.profile-review-action:hover {
  opacity: 0.82;
}

.profile-review-action.is-locked {
  cursor: default;
  opacity: 0.72;
}

.profile-review-delete {
  color: #c98a8a;
}

.profile-review-delete:hover {
  opacity: 0.88;
}

.profile-review-content.is-editing .profile-review-aside {
  grid-row: 1;
}

.profile-review-edit-input {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}

.profile-review-edit-actions {
  grid-column: 1 / -1;
  grid-row: 3;
}

.tab-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}

.tab-row button {
  border: 1px solid #2d2d2d;
  background: #101010;
  color: #f1f1f1;
  border-radius: 12px;
  padding: 10px 8px;
  font-weight: 600;
}

.tab-row button.active {
  background: #2f3747;
}

.people {
  margin-top: 18px;
}

.people-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #1b1b1b;
  padding: 10px 0;
}

.people-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.people-meta-text {
  min-width: 0;
}

.people-meta-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.people-meta-username {
  font-size: 15px;
  font-weight: 600;
  color: #f5f5f5;
  line-height: 1.2;
}

.people-meta-name {
  margin: 2px 0 0;
  font-size: 13px;
  color: #9c9c9c;
  line-height: 1.2;
}

.people-meta-text.is-compact-list .people-meta-name {
  margin-top: 6px;
}

.follow-btn {
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid #2f3847;
  background: #171f2c;
  color: #fff;
  cursor: pointer;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 430px;
  box-sizing: border-box;
  background: var(--bg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
}

.nav-btn {
  background: transparent;
  color: #8f94ab;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 14px;
  padding: 6px 0 4px;
  cursor: pointer;
  position: relative;
  transition: color 180ms ease, background 180ms ease;
}

.nav-btn.active {
  color: #f5c975;
  background: transparent;
}

.nav-btn.active::before {
  content: "";
  position: absolute;
  top: -8px;
  width: 70%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 212, 130, 0.2), rgba(255, 212, 130, 1), rgba(255, 212, 130, 0.2));
  box-shadow: 0 0 10px rgba(255, 212, 130, 0.58);
}

.rate-cta {
  transform: none;
}

.rate-cta .nav-icon {
  background: #121421;
  color: #f5c975;
  border-color: rgba(245, 201, 117, 0.55);
  box-shadow: 0 0 10px rgba(245, 201, 117, 0.22);
  animation: rate-icon-float 2.8s ease-in-out infinite;
}

.nav-icon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.02);
  line-height: 1;
}

.nav-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes rate-icon-float {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(0.6px, -1.2px);
  }
  50% {
    transform: translate(0px, -1.9px);
  }
  75% {
    transform: translate(-0.6px, -1px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

#rate-sheet-root,
#my-list-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

.rate-sheet-shell {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#global-chooser-layer {
  position: fixed;
  inset: 0;
  z-index: 4000;
  pointer-events: none;
}

#global-chooser-layer .global-chooser-floating {
  pointer-events: auto;
}

#global-chooser-layer .review-thread-menu.global-chooser-floating,
#global-chooser-layer .profile-menu.global-chooser-floating,
#global-chooser-layer .reco-select-menu.global-chooser-floating {
  position: fixed;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.rate-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}

.rate-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 30vh;
  max-width: 430px;
  max-height: 70vh;
  margin: 0 auto;
  background: rgba(15, 15, 15, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px 16px 0 0;
  padding: 10px 12px 14px;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 260ms ease, opacity 260ms ease;
}

.rate-sheet-shell.entered {
  pointer-events: auto;
}

.rate-sheet-shell.closing {
  pointer-events: auto;
}

.rate-sheet-shell.entered .rate-sheet-backdrop {
  pointer-events: auto;
  opacity: 1;
}

.rate-sheet-shell.closing .rate-sheet-backdrop {
  pointer-events: auto;
}

.rate-sheet-shell.entered .rate-sheet-panel {
  opacity: 1;
  transform: translateY(0);
}

.vote:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  box-shadow: none;
}

.rate-sheet-handle {
  width: 46px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.rate-sheet-panel h2 {
  margin: 0 0 9px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.rate-search-input {
  width: 100%;
  border: 1px solid #262626;
  background: rgba(10, 10, 10, 0.88);
  color: #f3f3f3;
  border-radius: 10px;
  padding: 9px 34px 9px 11px;
  font-size: 13px;
  outline: none;
}

.search-bar {
  padding-right: 34px;
}

.search-input-wrap {
  position: relative;
}

.search-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #efefef;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.rate-search-results {
  margin-top: 9px;
  display: grid;
  gap: 7px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 0;
  align-content: start;
  grid-auto-rows: max-content;
}

.rate-search-results .search-group {
  margin-top: 0;
  display: grid;
  gap: 7px;
}

.rate-search-results .search-group .section-head {
  margin: 4px 0 0;
}

.rate-result-item {
  border: 1px solid #262626;
  background: rgba(11, 11, 11, 0.84);
  color: #efefef;
  border-radius: 9px;
  padding: 7px 9px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  height: auto;
}

.rate-result-text {
  min-width: 0;
}

.rate-result-text span {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}

.rate-result-text small {
  display: block;
  color: #b0b0b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.rate-result-thumb {
  width: 32px;
  height: 46px;
  border-radius: 5px;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}

.rate-empty {
  color: #aaaaaa;
  font-size: 12px;
}

.rate-selected-card {
  margin-top: 10px;
  border: 1px solid #262626;
  background: rgba(11, 11, 11, 0.82);
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rate-selected-card strong {
  display: block;
}

.rate-selected-card span {
  color: #b5b5b5;
  font-size: 12px;
}

.rate-selected-thumb {
  width: 34px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.rate-vote-actions {
  margin-top: 9px;
  width: 100%;
}

.rate-vote-actions .verdicts {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 2fr);
  align-items: center;
  gap: 10px;
  width: 100%;
}

.rate-vote-actions .rate-verdict-watch-wrap {
  min-width: 0;
}

.rate-vote-actions .rate-verdict-watch-wrap > .vote.watch,
.rate-vote-actions .verdicts > .vote.skip {
  width: 100%;
  display: block;
  box-sizing: border-box;
  text-align: center;
}

.rate-vote-actions .verdict-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-width: 0;
}

.rate-vote-actions .vote {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 999px;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  white-space: nowrap;
}

.rate-search-history {
  display: grid;
  gap: 7px;
}

.rate-search-history .search-history-head {
  margin-top: 0;
}

.rate-verdict-watch-wrap {
  position: relative;
}

.rate-vote-actions .watch-channel-menu-panel {
  min-width: max(100%, 160px);
}

.rate-vote-actions .vote.watch {
  border: 1px solid rgba(62, 214, 129, 0.58);
  box-shadow: 0 0 0 1px rgba(62, 214, 129, 0.2);
}

.rate-vote-actions .vote.skip {
  border: 1px solid rgba(255, 107, 107, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.18);
}

.rate-vote-actions .vote.watch.active {
  background: linear-gradient(180deg, rgba(34, 118, 74, 0.88), rgba(22, 74, 47, 0.9));
  color: #eafff2;
  box-shadow: inset 0 0 0 1px currentColor;
}

.rate-vote-actions .vote.skip.active {
  background: linear-gradient(180deg, rgba(145, 52, 52, 0.88), rgba(88, 33, 33, 0.9));
  color: #ffecec;
  box-shadow: inset 0 0 0 1px currentColor;
}

.verdict-surface-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: #b5b5b5;
  font-size: 13px;
  font-weight: 600;
}

.verdict-card.verdict-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
}

.verdict-surface-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.82);
  animation: verdictSurfaceSpin 700ms linear infinite;
  flex: 0 0 auto;
}

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

.my-list-sheet-panel {
  top: 24vh;
  max-height: 76vh;
}

.add-movie-sheet-panel {
  top: 22vh;
  max-height: 78vh;
}

.add-movie-result-item {
  position: relative;
  overflow: visible;
  align-items: center;
  z-index: 1;
}

.add-movie-result-item .rate-result-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}

.add-movie-result-item .rate-result-text span,
.add-movie-result-item .rate-result-text small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

.add-movie-result-item.chooser-open {
  z-index: 120;
}

.add-movie-result-actions {
  position: relative;
  margin-left: auto;
  z-index: 121;
  flex: 0 0 32px;
  width: 32px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  pointer-events: auto;
}

.add-movie-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(34, 34, 34, 0.98);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  opacity: 1;
  visibility: visible;
  cursor: pointer;
  position: relative;
  z-index: 122;
}

.add-movie-chooser {
  position: absolute;
  right: 0;
  top: auto;
  bottom: calc(100% + 6px);
  min-width: 170px;
  display: grid;
  gap: 6px;
  background: rgba(10, 10, 10, 0.96);
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  padding: 7px;
  z-index: 123;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.38);
  pointer-events: auto;
}

.add-movie-chooser.down {
  bottom: auto;
  top: calc(100% + 6px);
}

.add-movie-chooser button {
  border: 1px solid #333;
  background: #141414;
  color: #ececec;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.add-movie-chooser button:disabled {
  color: #a9a9a9;
  border-color: #2a2a2a;
  background: #101010;
  cursor: default;
}

.rate-score-block {
  margin-top: 12px;
  padding-top: 3px;
}

.rate-score-title {
  margin: 0 0 14px;
  font-size: 30px;
  text-align: center;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.rate-donut-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rate-donut {
  --watch-color: #35cf7e;
  --skip-color: #ff5f73;
  --arc-len: 528;
  width: 180px;
  height: 180px;
  position: relative;
  display: inline-block;
}

.rate-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.rate-arc-track,
.rate-arc {
  fill: none;
  stroke-width: 16;
}

.rate-arc-track {
  stroke: rgba(255, 255, 255, 0.08);
}

.rate-arc {
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

.rate-arc.watch {
  stroke: var(--watch-color);
  stroke-dasharray: calc((var(--watch-pct, 50) / 100) * var(--arc-len)) var(--arc-len);
  stroke-dashoffset: var(--arc-len);
  opacity: 0;
  animation: donut-watch-sweep 1750ms cubic-bezier(0.25, 0.75, 0.2, 1) forwards;
}

.rate-arc.skip {
  stroke: var(--skip-color);
  stroke-dasharray: calc((var(--skip-pct, 50) / 100) * var(--arc-len)) var(--arc-len);
  stroke-dashoffset: var(--arc-len);
  transform-origin: 50% 50%;
  transform: rotate(calc(var(--watch-pct, 50) * 3.6deg));
  opacity: 0;
  animation: donut-skip-sweep 1750ms cubic-bezier(0.25, 0.75, 0.2, 1) 140ms forwards;
}

.rate-donut-center {
  width: 112px;
  height: 112px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #0f0f0f;
  border: 1px solid #292929;
  display: grid;
  place-items: center;
  text-align: center;
}

.rate-donut-center b {
  font-size: 34px;
  line-height: 1;
}

.rate-side-stat {
  flex: 0 0 78px;
}

.rate-side-stat.skip {
  text-align: right;
}

.rate-side-stat.watch {
  text-align: left;
}

.rate-side-stat p {
  margin: 0;
  font-size: 12px;
  color: #cfcfcf;
  letter-spacing: 0.2px;
}

.rate-side-stat b {
  display: block;
  margin-top: 6px;
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
}

.rate-side-stat small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #a8a8a8;
  line-height: 1.25;
}

.rate-side-stat .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.rate-side-stat .dot.watch {
  background: #35cf7e;
}

.rate-side-stat .dot.skip {
  background: #ff5f73;
}

.rate-thanks {
  margin-top: 12px;
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 0.2px;
  text-align: center;
}

.rate-score-divider {
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

.rate-write-review-row {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.rate-write-review-row .write-review-bubble {
  margin-top: 0;
}

.film-score-block {
  position: relative;
  overflow: visible;
  padding: 10px 16px 12px 16px;
  border-radius: 10px;
  background: linear-gradient(170deg, rgba(20, 24, 34, 0.2), rgba(10, 12, 18, 0.14));
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.film-score-block::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 12%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.16;
  pointer-events: none;
  transform: translate(50%, -50%);
  transition: right 220ms ease, opacity 180ms ease, background 180ms ease;
}

.film-score-block.seeti-source-skip::before {
  right: 10%;
  opacity: 0.2;
  background: radial-gradient(circle, rgba(255, 88, 118, 0.46) 0%, rgba(255, 88, 118, 0) 72%);
}

.film-score-block.seeti-source-watch::before {
  right: 10%;
  opacity: 0.2;
  background: radial-gradient(circle, rgba(58, 220, 144, 0.44) 0%, rgba(58, 220, 144, 0) 72%);
}

.film-score-block > * {
  position: relative;
  z-index: 1;
}

.film-score-block > .seeti-share-btn.film-score-share {
  position: absolute;
  top: 20px;
  right: 15px;
  z-index: 2;
}

.film-score-layout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 88px;
  padding-top: 0;
  padding-right: 28px;
}

.film-score-copy {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(100% - 108px);
  padding-right: 4px;
}

.film-score-title {
  margin: 0 0 6px;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-align: left;
  line-height: 1.1;
  letter-spacing: -0.15px;
  color: #ffffff;
}

.seeti-says-logo-slot {
  height: var(--brand-logo-says-slot-height, 34px);
  width: 100%;
  margin: 0 0 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

.seeti-says-logo {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  height: var(--brand-logo-says-image-height, 167px);
  width: auto;
  max-width: none;
  transform: translateY(calc(-50% + var(--brand-logo-says-slot-nudge-y, 1px)));
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  margin-top: 0;
}

.film-score-meta {
  margin: 0;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: #f2f2f2;
  white-space: nowrap;
}

.film-score-pct.watch {
  color: #4dff00;
}

.film-score-pct.skip {
  color: #c80000;
}

.film-score-meta-skip {
  margin-left: 10px;
}

.film-score-donut {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: -6px;
  transform: translateX(4px);
}

.film-score-donut .rate-arc-track,
.film-score-donut .rate-arc {
  stroke-width: 12;
}

.film-score-donut .rate-arc.watch,
.film-score-donut .rate-arc.skip {
  animation: none;
  stroke-dashoffset: 0;
  opacity: 1;
}

.film-score-donut.seeti-donut-animate .rate-arc.watch {
  stroke-dashoffset: var(--arc-len);
  opacity: 0;
  animation: donut-watch-sweep 1750ms cubic-bezier(0.25, 0.75, 0.2, 1) forwards;
}

.film-score-donut.seeti-donut-animate .rate-arc.skip {
  stroke-dashoffset: var(--arc-len);
  opacity: 0;
  animation: donut-skip-sweep 1750ms cubic-bezier(0.25, 0.75, 0.2, 1) 140ms forwards;
}

.film-score-donut .rate-donut-center {
  width: 56px;
  height: 56px;
}

.film-score-donut .rate-donut-center b {
  font-size: 14px;
  font-weight: 700;
}

.seeti-head-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-bottom: 4px;
}

.seeti-share-btn {
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  background: transparent;
  color: #dce7ff;
  line-height: 1;
  cursor: pointer;
  padding: 0 1px;
}

.seeti-share-btn:disabled,
.seeti-share-btn.is-sharing {
  opacity: 0.45;
  cursor: wait;
  pointer-events: none;
}

.seeti-share-btn:focus-visible {
  outline: 2px solid rgba(245, 201, 117, 0.85);
  outline-offset: 2px;
  border-radius: 6px;
}

.seeti-share-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.film-score-block .film-score-votes {
  margin-top: 6px;
  text-align: left;
  color: #b8b8b8;
  font-size: 11px;
  letter-spacing: 0.2px;
}

@keyframes donut-watch-sweep {
  from {
    stroke-dashoffset: var(--arc-len);
    opacity: 0.3;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes donut-skip-sweep {
  from {
    stroke-dashoffset: var(--arc-len);
    opacity: 0.3;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.bottom-nav.nav-hidden {
  display: none;
}

.seeti-toast-wrap {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 398px;
  z-index: 120;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.seeti-toast {
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(15, 15, 15, 0.86);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #d4af37;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
  text-align: center;
}

.seeti-toast.points {
  font-size: 13px;
  font-weight: 600;
}

.seeti-toast.promotion {
  font-size: 14px;
  font-weight: 600;
}

body.verdict-share-picker-open {
  overflow: hidden;
}

.verdict-share-picker-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  box-sizing: border-box;
}

.verdict-share-picker-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  cursor: pointer;
}

.verdict-share-picker-modal {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  max-height: min(78vh, 520px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(175deg, rgba(22, 24, 32, 0.98), rgba(10, 11, 16, 0.98));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  padding: 16px 14px 14px;
}

.verdict-share-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.verdict-share-picker-head strong {
  font-size: 15px;
  letter-spacing: 0.2px;
  color: #f2f2f2;
}

.verdict-share-picker-close {
  border: 0;
  background: transparent;
  color: #d4d4d4;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.verdict-share-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
  margin-bottom: 12px;
}

.verdict-share-review-option {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: #ececec;
  padding: 12px 13px;
  cursor: pointer;
}

.verdict-share-review-option.selected {
  border-color: rgba(248, 215, 166, 0.55);
  background: rgba(248, 215, 166, 0.08);
  box-shadow: 0 0 0 1px rgba(248, 215, 166, 0.12);
}

.verdict-share-review-preview {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #efefef;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.verdict-share-review-date {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #9a9a9a;
}

.verdict-share-picker-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.verdict-share-picker-cancel,
.verdict-share-picker-confirm {
  flex: 1 1 0;
  min-height: 42px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.verdict-share-picker-cancel {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #e8e8e8;
}

.verdict-share-picker-confirm {
  border: 1px solid rgba(248, 215, 166, 0.45);
  background: linear-gradient(180deg, rgba(248, 215, 166, 0.22), rgba(195, 125, 68, 0.18));
  color: #fff8eb;
}

.verdict-share-picker-confirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* Auth screens */
.auth-screen {
  min-height: calc(100vh - 24px);
  display: grid;
  place-items: center;
  padding: 24px 16px 40px;
}

.auth-card {
  width: min(100%, 420px);
  padding: 28px 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.96) 0%, rgba(14, 14, 14, 0.98) 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.auth-card-centered {
  text-align: center;
}

.auth-screen-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: min(100%, 420px);
}

.auth-logo-wrap {
  display: flex;
  justify-content: center;
  line-height: 0;
  max-height: var(--brand-logo-auth-wrap-max-height, 90px);
  overflow: hidden;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.auth-tagline {
  margin: 0;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #b8b8b8;
  text-align: center;
  line-height: 1.3;
}

.auth-logo {
  display: block;
  height: var(--brand-logo-auth-image-height, 104px);
  width: auto;
  object-fit: contain;
  object-position: top center;
}

.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.auth-mode-tab {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #bdbdbd;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.auth-mode-tab.active {
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.14);
  color: #f5e6b8;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 16px;
  color: #8f8f8f;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.auth-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4af37;
}

.auth-title {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.1;
  color: #f5f5f5;
}

.auth-copy {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: #a8a8a8;
}

.auth-copy code {
  font-size: 12px;
  color: #d8d8d8;
}

.auth-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #bdbdbd;
}

.auth-input {
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #f4f4f4;
  font: inherit;
}

.auth-input:focus {
  outline: none;
  border-color: rgba(212, 175, 55, 0.55);
}

.auth-error {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #ff8f8f;
}

.auth-google-btn,
.auth-primary-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.auth-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f5f5f5;
  color: #171717;
}

.auth-google-btn:disabled,
.auth-primary-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.auth-google-mark {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: #4285f4;
  font-weight: 800;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.auth-primary-btn {
  margin-top: 4px;
  background: linear-gradient(135deg, #d4af37 0%, #a67c00 100%);
  color: #111;
}

.auth-text-btn {
  width: 100%;
  margin-top: 14px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-text-btn:hover {
  color: rgba(255, 255, 255, 0.88);
}

.auth-text-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.supabase-connection-hint {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.1);
  color: #e8d5a3;
  font-size: 13px;
  line-height: 1.45;
}

body.profile-setup-prompt-open {
  overflow: hidden;
}

.profile-setup-prompt-layer {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  box-sizing: border-box;
}

.profile-setup-prompt-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  cursor: pointer;
}

.profile-setup-prompt-card {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(175deg, rgba(22, 24, 32, 0.98), rgba(10, 11, 16, 0.98));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  padding: 20px 18px 16px;
}

.profile-setup-prompt-title {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.2;
  color: #f2f2f2;
}

.profile-setup-prompt-copy {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #c8c8c8;
}

.profile-setup-prompt-checklist {
  margin: 0 0 16px;
  padding-left: 18px;
  color: #d8d8d8;
  font-size: 13px;
  line-height: 1.5;
}

.profile-setup-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-setup-prompt-btn {
  width: 100%;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.profile-setup-prompt-btn.primary {
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.16);
  color: #e8d5a3;
}

.profile-setup-prompt-btn.secondary {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #d0d0d0;
}