:root {
  --bg-start: var(--theme-bg-start);
  --bg-end: var(--theme-bg-end);
  --panel: var(--theme-panel);
  --panel-border: var(--theme-panel-border);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --accent: var(--theme-accent);
  --link: var(--theme-link);
  --link-hover: var(--theme-link-hover);
  --yes: var(--theme-success);
  --no: var(--theme-danger-strong);
  --danger: var(--theme-danger);
  --shadow: var(--theme-shadow-lg);
  --layer-warm: var(--theme-layer-warm);
  --layer-cool: var(--theme-layer-cool);
  --layer-danger: var(--theme-layer-danger);
  --input-option-bg: var(--theme-control-option-bg);
  --input-bg: var(--theme-control-bg);
  --input-placeholder: var(--theme-placeholder);
  --focus-ring: var(--theme-focus-ring);
  --button-primary-start: var(--theme-button-primary-start);
  --button-primary-end: var(--theme-button-primary-end);
  --button-primary-text: var(--theme-button-primary-text);
  --button-type-text: var(--theme-button-type-text);
  --button-secondary-start: var(--theme-button-secondary-start);
  --button-secondary-end: var(--theme-button-secondary-end);
  --button-secondary-text: var(--theme-button-secondary-text);
  --badge-start: var(--theme-badge-start);
  --badge-end: var(--theme-badge-end);
  --badge-text: var(--theme-badge-text);
  --success-soft: var(--theme-success-soft);
  --success-strong: var(--theme-success-strong);
  --success-contrast: var(--theme-success-contrast);
  --success-text: var(--theme-success-text);
  --success-outline: var(--theme-success-outline);
  --success-outline-soft: var(--theme-success-outline-soft);
  --success-bg: var(--theme-success-bg);
  --success-bg-soft: var(--theme-success-bg-soft);
  --shell-pad-x: 1.1rem;
  --surface-raised-border: var(--theme-glass-01);
  --surface-raised-bg: var(--theme-glass-02);
  --surface-raised-bg-hover: var(--theme-glass-03);
  --surface-raised-sheen: var(--theme-glass-04);
  --surface-raised-divider: var(--theme-glass-05);
  --surface-quiet-border: var(--theme-glass-07);
  --surface-quiet-bg: var(--theme-glass-13);
  --surface-quiet-bg-strong: var(--theme-glass-12);
  --surface-quiet-bg-hover: var(--theme-glass-07);
  --surface-quiet-fill: var(--theme-glass-14);
  --surface-quiet-ghost: var(--theme-glass-20);
  --surface-quiet-shadow-inset: var(--theme-glass-17);
  --surface-outline-strong: var(--theme-glass-09);
  --surface-divider: var(--theme-glass-10);
  --surface-tint-bg: var(--theme-glass-08);
  --surface-field-border: var(--theme-glass-11);
  --surface-control-border: var(--theme-glass-15);
  --surface-control-bg: var(--theme-glass-10);
  --surface-control-thumb: var(--theme-glass-16);
  --surface-hover-outline: var(--theme-glass-18);
  --surface-hover-fill: var(--theme-glass-19);
  --surface-card-border: var(--theme-glass-21);
  --surface-card-highlight: var(--theme-glass-22);
  --surface-card-sheen: var(--theme-glass-23);
  --select-accent-border: var(--theme-aurora-01);
  --select-caret: var(--theme-glass-04);
  --select-divider: var(--theme-glass-05);
  --select-accent-arrow: var(--theme-aurora-02);
  --select-accent-divider: var(--theme-aurora-03);
  --select-accent-bg-start: var(--theme-midnight-04);
  --select-accent-bg-end: var(--theme-midnight-05);
  --select-accent-focus-border: var(--theme-spring-01);
  --select-accent-focus-ring: var(--theme-spring-02);
  --select-option-bg-strong: var(--theme-midnight-06);
  --panel-subtle-bg: var(--theme-midnight-02);
  --panel-emphasis-bg: var(--theme-midnight-03);
  --picker-icon: var(--theme-aurora-09);
  --picker-panel-border: var(--theme-aurora-10);
  --picker-panel-bg-start: var(--theme-midnight-11);
  --picker-panel-bg-end: var(--theme-midnight-12);
  --picker-range-border: var(--theme-aurora-11);
  --picker-range-bg: var(--theme-aurora-12);
  --picker-range-text: var(--theme-rose-01);
  --picker-selection-border: var(--theme-spring-01);
  --picker-selection-ring: var(--theme-spring-05);
  --movie-summary-border: var(--theme-ember-01);
  --movie-summary-bg-start: var(--theme-ember-02);
  --movie-summary-bg-end: var(--theme-aurora-04);
  --restaurant-summary-border: var(--theme-aurora-13);
  --restaurant-summary-bg-start: var(--theme-aurora-14);
  --restaurant-summary-bg-end: var(--theme-spring-07);
  --summary-card-glint: var(--theme-glass-02);
  --summary-card-shadow: var(--theme-midnight-01);
  --autocomplete-panel-bg-start: var(--theme-midnight-07);
  --autocomplete-panel-bg-end: var(--theme-midnight-08);
  --autocomplete-panel-border: var(--theme-aurora-03);
  --autocomplete-scroll-track: var(--theme-midnight-09);
  --autocomplete-scroll-thumb: var(--theme-aurora-05);
  --autocomplete-scroll-thumb-start: var(--theme-aurora-06);
  --autocomplete-scroll-thumb-end: var(--theme-aurora-07);
  --autocomplete-scroll-thumb-border: var(--theme-midnight-10);
  --autocomplete-row-hover: var(--theme-aurora-08);
  --toggle-track-border: var(--theme-glass-15);
  --toggle-track-bg: var(--theme-glass-10);
  --toggle-thumb-bg: var(--theme-glass-16);
  --toggle-track-active-bg: var(--theme-spring-03);
  --toggle-track-active-border: var(--theme-spring-04);
  --chip-border: var(--theme-glass-11);
  --chip-bg: var(--theme-glass-12);
  --chip-bg-hover: var(--theme-glass-07);
  --chip-selected-border: var(--success-outline);
  --chip-selected-bg: var(--success-bg-soft);
  --chip-selected-text: var(--success-text);
  --choice-card-border: var(--theme-aurora-13);
  --choice-card-bg-start: var(--theme-aurora-14);
  --choice-card-bg-end: var(--theme-spring-07);
  --choice-card-hover-outline: var(--theme-spring-08);
  --choice-card-hover-border: var(--theme-aurora-15);
  --choice-card-hover-bg-start: var(--theme-aurora-16);
  --choice-card-hover-bg-end: var(--theme-spring-17);
  --choice-card-title: var(--theme-ember-03);
  --choice-action-border: var(--theme-glass-15);
  --choice-action-bg: var(--theme-midnight-15);
  --choice-action-text: var(--theme-rose-02);
  --choice-action-hover-border: var(--theme-rose-03);
  --choice-action-hover-bg: var(--theme-rose-04);
  --choice-action-hover-text: var(--theme-rose-05);
  --choice-checkbox-border: var(--theme-spring-09);
  --choice-checkbox-bg: var(--theme-midnight-13);
  --choice-checkbox-inner: var(--theme-glass-17);
  --choice-checkbox-active-start: var(--theme-spring-10);
  --choice-checkbox-active-end: var(--theme-spring-11);
  --choice-checkbox-active-border: var(--theme-spring-12);
  --choice-checkbox-active-ring: var(--theme-spring-13);
  --choice-checkbox-check: var(--theme-midnight-14);
  --choice-checkbox-hover-border: var(--theme-spring-14);
  --choice-checkbox-focus-ring: var(--theme-spring-15);
  --selection-label: var(--theme-spring-16);
  --picker-boundary-bg: var(--theme-spring-06);
  --scroll-track: var(--theme-glass-17);
  --scroll-thumb-start: var(--theme-spring-19);
  --scroll-thumb-end: var(--theme-spring-20);
  --scroll-thumb-hover-start: var(--theme-spring-21);
  --scroll-thumb-hover-end: var(--theme-spring-22);
  --scroll-thumb-border: var(--theme-midnight-16);
  --separator-fill: var(--theme-midnight-17);
  --menu-surface-bg: var(--theme-midnight-18);
  --room-lock-surface-bg: var(--theme-midnight-19);
  --deck-card-bg-start: var(--theme-midnight-20);
  --deck-card-bg-end: var(--theme-midnight-21);
  --deck-card-media-bg: var(--theme-midnight-22);
  --media-overlay-bg: var(--theme-midnight-23);
  --map-pin-start: var(--theme-rose-07);
  --map-pin-mid: var(--theme-rose-08);
  --map-pin-end: var(--theme-rose-09);
  --map-pin-shadow: var(--theme-midnight-24);
  --map-pin-center-ring: var(--theme-midnight-25);
  --summary-link: var(--theme-aurora-22);
  --summary-link-hover: var(--theme-rose-06);
  --meta-accent: var(--theme-aurora-23);
  --button-no-start: var(--theme-rose-10);
  --button-no-end: var(--theme-rose-11);
  --button-no-text: var(--theme-rose-12);
  --button-yes-start: var(--theme-spring-23);
  --button-yes-end: var(--theme-spring-24);
  --button-yes-text: var(--theme-midnight-26);
  --button-loading-start: var(--theme-aurora-17);
  --button-loading-end: var(--theme-aurora-18);
  --button-loading-text: var(--theme-aurora-19);
  --button-loading-border: var(--theme-aurora-20);
  --button-loading-ring: var(--theme-aurora-21);
  --room-membership-bg: var(--theme-glass-09);
  --room-membership-border: var(--theme-glass-01);
  --room-membership-pending-bg: var(--theme-ember-04);
  --room-membership-pending-text: var(--theme-ember-05);
  --room-membership-pending-border: var(--theme-ember-06);
  --toast-bg: var(--theme-midnight-27);
  --toast-text: var(--theme-spring-25);
  --toast-border: var(--theme-spring-26);
  --modal-backdrop: var(--theme-midnight-28);
  --modal-surface-bg: var(--theme-midnight-29);
  --modal-surface-border: var(--theme-glass-03);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--theme-font-body);
  color: var(--text);
  background: linear-gradient(140deg, var(--bg-start), var(--bg-end));
  overflow-x: hidden;
}

.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 20%, var(--layer-warm), transparent 28%),
    radial-gradient(circle at 90% 10%, var(--layer-cool), transparent 25%),
    radial-gradient(circle at 40% 80%, var(--layer-danger), transparent 28%);
  z-index: 0;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.hidden {
  display: none !important;
}

.app-shell {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1rem var(--shell-pad-x) 1.4rem;
}

.app-footer {
  position: relative;
  z-index: 1;
  width: calc(100% - (var(--shell-pad-x) * 2));
  max-width: calc(1180px - (var(--shell-pad-x) * 2));
  margin: 0 auto 1rem;
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.footer-meta {
  min-width: 0;
}

.footer-made-by {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
}

.footer-contact {
  margin-top: 0.22rem;
  display: inline-block;
  font-size: 0.8rem;
  color: var(--link);
  text-decoration: none;
}

.footer-contact:hover {
  text-decoration: underline;
}

.tmdb-credit {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
}

.footer-accredit {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
  flex-basis: 100%;
}

.tmdb-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.tmdb-logo-link:hover {
  filter: brightness(1.06);
}

.tmdb-logo {
  height: 20px;
  width: auto;
  display: block;
}

.tmdb-url {
  font-size: 0.78rem;
  color: var(--link);
  text-decoration: none;
}

.tmdb-url:hover {
  text-decoration: underline;
}

.app-header {
  position: relative;
  z-index: 2;
  width: calc(100% - (var(--shell-pad-x) * 2));
  max-width: calc(1180px - (var(--shell-pad-x) * 2));
  margin: 0.75rem auto 0;
  padding: 0.5rem 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  border-radius: 14px;
}

.header-left,
.header-center,
.header-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.header-left {
  justify-self: start;
}

.header-center {
  justify-self: center;
  width: min(520px, 100%);
}

.header-center input {
  flex: 1;
  padding: 0.44rem 0.58rem;
  font-size: 0.82rem;
  border-radius: 10px;
}

#headerNameInput {
  flex: 0 0 170px;
}

#emailInput {
  flex: 1 1 220px;
  min-width: 0;
}

.header-right {
  justify-self: end;
  position: relative;
  z-index: 3;
}

.theme-toggle-btn {
  border: 1px solid var(--surface-raised-border);
  background: var(--surface-raised-bg);
  color: var(--text);
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.theme-toggle-btn:hover {
  transform: translateY(-1px);
  background: var(--surface-raised-bg-hover);
  border-color: var(--surface-hover-outline);
}

.theme-toggle-btn:active {
  transform: translateY(1px);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.theme-toggle-icon {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle-icon--dark {
  display: none;
}

html[data-theme="fusedly-light"] .theme-toggle-icon--dark {
  display: block;
}

html[data-theme="fusedly-light"] .theme-toggle-icon--light {
  display: none;
}

.header-notification-btn {
  position: relative;
  border: 1px solid var(--surface-raised-border);
  background: var(--surface-raised-bg);
  color: var(--text);
  border-radius: 999px;
  font-family: var(--theme-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.58rem;
  cursor: pointer;
  line-height: 1.25;
}

.header-notification-btn:hover {
  background: var(--surface-raised-bg-hover);
}

.header-notification-badge {
  position: absolute;
  top: -0.42rem;
  right: -0.35rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.22rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--badge-start), var(--badge-end));
  color: var(--success-contrast);
  font-size: 0.64rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-link {
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  margin-right: 0.6rem;
}

.brand-logo {
  height: clamp(1.2rem, 2.3vw, 1.55rem);
  width: auto;
  aspect-ratio: 1200 / 520;
  display: block;
}

.brand-logo-wordmark {
  fill: var(--text);
  stroke: var(--bg-start);
}

.header-text-link {
  background: none;
  border: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  line-height: 1.2;
}

.header-text-link:hover {
  color: var(--text);
  text-decoration: underline;
}

.header-text-link:disabled {
  opacity: 0.62;
  cursor: default;
  text-decoration: none;
}

.header-user {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
}

h1,
h2,
h3 {
  font-family: var(--theme-font-display);
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1;
}

h1 {
  font-size: clamp(2rem, 6vw, 4rem);
}

h2 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}

h3 {
  font-size: clamp(1.2rem, 3.2vw, 1.7rem);
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  font-size: 0.72rem;
}

.subhead {
  margin: 0.55rem 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.lobby-card > .subhead {
  margin-bottom: 1.05rem;
}

.field {
  display: block;
  margin-top: 0.8rem;
}

.field.compact {
  margin-top: 0;
}

.field span {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--surface-raised-border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
  padding: 0.82rem 0.95rem;
  font-size: 0.96rem;
  outline: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--select-caret) 50%),
    linear-gradient(135deg, var(--select-caret) 50%, transparent 50%),
    linear-gradient(to right, var(--select-divider), var(--select-divider));
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px),
    calc(100% - 2.2rem) 0.28rem;
  background-size: 5px 5px, 5px 5px, 1px calc(100% - 0.56rem);
  background-repeat: no-repeat;
}

select option {
  background: var(--input-option-bg);
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
}

.btn {
  border: 0;
  border-radius: 14px;
  padding: 0.72rem 1rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.16s ease, filter 0.16s ease;
  white-space: nowrap;
}

.btn-mini {
  padding: 0.38rem 0.62rem;
  font-size: 0.78rem;
  border-radius: 10px;
}

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  width: 100%;
  background: linear-gradient(120deg, var(--button-primary-start), var(--button-primary-end));
  color: var(--button-primary-text);
}

.btn-secondary {
  background: linear-gradient(120deg, var(--button-secondary-start), var(--button-secondary-end));
  color: var(--button-secondary-text);
}

.btn-tertiary {
  background: var(--surface-quiet-bg-hover);
  color: var(--text);
  border: 1px solid var(--surface-raised-border);
}

.btn-type {
  flex: 1;
  background: var(--surface-tint-bg);
  color: var(--text);
  border: 1px solid var(--surface-raised-bg-hover);
}

.btn-type.active {
  background: linear-gradient(120deg, var(--button-primary-start), var(--button-primary-end));
  color: var(--button-type-text);
  border-color: transparent;
}

.action-row {
  display: flex;
  gap: 0.55rem;
}

.action-row input {
  flex: 1;
}

#createRoomBtn {
  width: auto;
  margin-top: 0;
  padding: 0.8rem 1.18rem;
  min-height: 49px;
  border-radius: 11px;
  font-size: 0.92rem;
  font-weight: 800;
}

.error {
  margin: 0.9rem 0 0;
  color: var(--danger);
  font-size: 0.9rem;
}

.lobby-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1rem;
  align-items: start;
}

.lobby-main-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.lobby-side-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lobby-card,
.rooms-card {
  padding: 1rem;
}

.lobby-card,
.wizard-box {
  overflow: visible;
}

.lobby-card {
  position: relative;
  z-index: 4;
}

.join-card {
  padding: 0.8rem 0.9rem;
}

.join-card .eyebrow {
  margin-bottom: 0.45rem;
}

.join-compact-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.join-compact-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.62rem 0.72rem;
  font-size: 0.88rem;
  border-radius: 11px;
}

#joinRoomBtn {
  margin: 0;
  padding: 0.6rem 0.86rem;
  border-radius: 11px;
}

.join-card .error {
  margin-top: 0.55rem;
  font-size: 0.82rem;
}

.info-card {
  padding: 1rem;
  position: relative;
  z-index: 1;
}

.info-card h3 {
  margin: 0.9rem 0 0.3rem;
  font-family: var(--theme-font-body);
  font-size: 1rem;
  letter-spacing: 0;
}

.info-card p {
  margin: 0.32rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.recovery-box {
  margin-top: 1rem;
  border: 1px solid var(--surface-outline-strong);
  border-radius: 14px;
  padding: 0.85rem;
  background: var(--panel-subtle-bg);
}

.type-picker {
  display: flex;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
}

.wizard-box {
  margin-top: 0.4rem;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 0.85rem;
  background: transparent;
}

.subtle-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.94rem;
}

.room-name-row {
  display: flex;
  gap: 0.6rem;
  align-items: end;
  margin-top: 0;
}

#surpriseMeBtn {
  width: auto;
  margin-top: 0;
  margin-left: auto;
  padding: 0.8rem 1.18rem;
  min-height: 49px;
  border-radius: 11px;
  align-self: end;
  font-size: 0.88rem;
  font-weight: 800;
}

.connection-invite-wrap {
  margin-top: 0.62rem;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.58rem;
  background: transparent;
}

.connection-invite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.connection-invite-head a {
  color: var(--link);
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.connection-invite-list {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  max-height: 120px;
  overflow: auto;
}

.connection-invite-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  padding: 0.32rem 0.62rem;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.connection-invite-item:hover {
  background: var(--chip-bg-hover);
}

.connection-invite-item.active {
  border-color: var(--chip-selected-border);
  background: var(--chip-selected-bg);
  color: var(--chip-selected-text);
}

.connection-invite-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.connection-invite-item-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.connection-invite-empty {
  margin: 0.48rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.room-name-row .grow {
  flex: 1 1 auto;
  min-width: 0;
}

.room-name-field {
  margin: 0;
}

#roomNameInput {
  padding: 0.7rem 0.95rem;
  font-size: 1.08rem;
  font-weight: 800;
}

.room-name-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.38rem;
}

.room-name-auto-link {
  border: 0;
  background: none;
  color: var(--link);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.room-name-auto-link:hover {
  color: var(--link-hover);
}

.create-room-row {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#createRoomBtn {
  margin-left: auto;
}

.movie-create-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.source-selector-field {
  margin-top: 1.3rem;
}

.source-selector {
  display: flex;
  gap: 0.42rem;
  flex-wrap: wrap;
}

.source-selector-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.source-selector-row .source-selector {
  flex: 1 1 auto;
}

.source-language-select-wrap {
  margin-left: auto;
  flex: 0 0 auto;
}

.source-toggle {
  position: relative;
  display: inline-flex;
}

.source-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.source-toggle span {
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text);
  padding: 0.34rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
}

.source-toggle input:checked + span {
  border-color: var(--success-outline);
  background: var(--success-bg);
  color: var(--success-text);
}

.source-toggle input:focus-visible + span {
  box-shadow: 0 0 0 1px var(--success-outline-soft);
}

#movieCreateModeSelect,
#movieCreateGenreSelect,
#movieCreateLanguageSelect {
  border-color: var(--select-accent-border);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--select-accent-arrow) 50%),
    linear-gradient(135deg, var(--select-accent-arrow) 50%, transparent 50%),
    linear-gradient(to right, var(--select-accent-divider), var(--select-accent-divider)),
    linear-gradient(145deg, var(--select-accent-bg-start), var(--select-accent-bg-end));
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px),
    calc(100% - 2.2rem) 0.28rem,
    0 0;
  background-size: 5px 5px, 5px 5px, 1px calc(100% - 0.56rem), 100% 100%;
  background-repeat: no-repeat;
}

#movieCreateModeSelect:focus,
#movieCreateGenreSelect:focus,
#movieCreateLanguageSelect:focus {
  border-color: var(--select-accent-focus-border);
  box-shadow: 0 0 0 1px var(--select-accent-focus-ring);
}

#movieCreateModeSelect option,
#movieCreateGenreSelect option,
#movieCreateLanguageSelect option {
  background: var(--select-option-bg-strong);
}

.field span.room-name-title {
  margin-bottom: 0;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text);
}

.movie-config-wrap {
  margin-top: 0.7rem;
  border-top: 1px solid var(--surface-divider);
  padding-top: 0.7rem;
  position: relative;
  z-index: 18;
}

.movie-catalog-filters-wrap {
  margin-top: 0.7rem;
}

.movie-catalog-filters-wrap > .subtle-title {
  margin-top: 0.9rem;
}

.movie-config-grid {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.movie-year-field {
  grid-column: 1 / -1;
}

.movie-config-divider {
  border-top: 1px solid var(--surface-divider);
  height: 0;
}

.movie-config-grid .movie-config-divider {
  grid-column: 1 / -1;
  margin: 0.16rem 0 0.08rem;
}

.movie-config-divider-block {
  margin: 0.68rem 0 0.7rem;
}

.movie-config-spacer {
  height: 0.72rem;
}

.movie-rating-field,
.movie-viewer-rating-field {
  margin: 0.62rem 0 0;
  border: 1px solid var(--surface-quiet-border);
  border-radius: 11px;
  padding: 0.5rem 0.55rem 0.55rem;
  background: var(--surface-quiet-bg);
}

.movie-rating-field legend,
.movie-viewer-rating-field legend {
  padding: 0 0.32rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.movie-viewer-rating-field {
  margin-top: 0.95rem;
}

#movieCreateLanguageSelect {
  min-width: 122px;
  max-width: 148px;
  padding: 0.24rem 1.5rem 0.24rem 0.52rem;
  border-radius: 999px;
  font-size: 0.74rem;
  line-height: 1.05;
}

.rating-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.rating-options-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.rating-chip {
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text);
  padding: 0.28rem 0.5rem;
  font-size: 0.75rem;
  font-family: var(--theme-font-body);
  line-height: 1.1;
  cursor: pointer;
}

.rating-chip:hover {
  background: var(--chip-bg-hover);
}

.rating-chip.active {
  border-color: var(--success-outline);
  background: var(--success-bg-soft);
  color: var(--success-text);
}

.viewer-rating-options {
  gap: 0.26rem;
}

.star-rating-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.34rem;
  min-width: 0;
}

.star-rating-chip-stars {
  font-size: 0.94rem;
  letter-spacing: 0.045em;
  line-height: 1;
}

.manual-builder-wrap {
  margin-top: 0.7rem;
  border-top: 1px solid var(--surface-divider);
  padding-top: 0.7rem;
}

.manual-header-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.manual-header-row .subtle-title {
  white-space: nowrap;
}

.manual-search-field {
  margin-top: 0.48rem;
}

.manual-search-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.34rem;
}

.manual-search-title {
  white-space: nowrap;
}

.manual-search-wrap {
  position: relative;
  z-index: 130;
}

.manual-search-wrap input {
  border: 1px solid var(--select-accent-border);
  background: linear-gradient(145deg, var(--select-accent-bg-start), var(--select-accent-bg-end));
}

.manual-search-wrap input:focus {
  border-color: var(--select-accent-focus-border);
  box-shadow: 0 0 0 1px var(--select-accent-focus-ring);
}

.manual-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.2rem);
  z-index: 700;
  background: linear-gradient(145deg, var(--autocomplete-panel-bg-start), var(--autocomplete-panel-bg-end));
  border: 1px solid var(--autocomplete-panel-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--autocomplete-scroll-thumb) var(--autocomplete-scroll-track);
}

.manual-suggestions::-webkit-scrollbar {
  width: 9px;
}

.manual-suggestions::-webkit-scrollbar-track {
  background: var(--autocomplete-scroll-track);
  border-radius: 10px;
}

.manual-suggestions::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--autocomplete-scroll-thumb-start), var(--autocomplete-scroll-thumb-end));
  border-radius: 10px;
  border: 1px solid var(--autocomplete-scroll-thumb-border);
}

.manual-suggest-btn {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--theme-font-body);
  font-size: 0.82rem;
  padding: 0.54rem 0.62rem;
  cursor: pointer;
  border-bottom: 1px solid var(--surface-raised-bg);
}

.manual-suggest-btn:hover {
  background: var(--autocomplete-row-hover);
}

.manual-suggest-btn:last-child {
  border-bottom: 0;
}

.manual-suggest-meta {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.manual-suggestions-empty {
  margin: 0;
  padding: 0.56rem 0.62rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.manual-selected-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  max-height: 180px;
  overflow-y: auto;
}

.manual-selected-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.45rem;
  border: 1px solid var(--surface-quiet-border);
  border-radius: 10px;
  background: var(--surface-quiet-fill);
  padding: 0.4rem 0.45rem;
}

.manual-selected-title {
  font-size: 0.79rem;
  font-weight: 700;
}

.manual-selected-meta {
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.manual-selected-remove {
  flex: 0 0 auto;
  padding: 0.2rem 0.38rem;
  border-radius: 8px;
  border: 1px solid var(--surface-raised-border);
  background: var(--surface-raised-bg);
  color: var(--text);
  font-family: var(--theme-font-body);
  font-size: 0.73rem;
  cursor: pointer;
}

.manual-selected-remove:hover {
  background: var(--surface-raised-bg-hover);
}

.manual-selected-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.79rem;
}

.manual-autoyes-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.73rem;
  color: var(--muted);
  cursor: pointer;
  justify-self: center;
}

.manual-autoyes-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.manual-autoyes-track {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  border: 1px solid var(--toggle-track-border);
  background: var(--toggle-track-bg);
  transition: background 140ms ease, border-color 140ms ease;
}

.manual-autoyes-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--toggle-thumb-bg);
  transition: transform 140ms ease;
}

.manual-autoyes-toggle input:checked + .manual-autoyes-track {
  background: var(--toggle-track-active-bg);
  border-color: var(--toggle-track-active-border);
}

.manual-autoyes-toggle input:checked + .manual-autoyes-track .manual-autoyes-thumb {
  transform: translateX(15px);
}

.manual-autoyes-text {
  line-height: 1.2;
}

#movieManualClearBtn {
  margin-left: 0;
  padding: 0.24rem 0.46rem;
  font-size: 0.69rem;
  border-radius: 8px;
  line-height: 1.1;
}

.year-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 11px;
  border: 1px solid var(--surface-raised-border);
  background: var(--surface-quiet-shadow-inset);
  color: var(--text);
  padding: 0.62rem 0.72rem;
  text-align: left;
  font-family: var(--theme-font-body);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.year-trigger::after {
  content: "▾";
  font-size: 0.78rem;
  color: var(--picker-icon);
  transform: translateY(-1px);
}

.year-trigger:hover {
  border-color: var(--surface-hover-outline);
  background: var(--surface-hover-fill);
}

.year-trigger.active {
  border-color: var(--picker-selection-border);
  box-shadow: 0 0 0 1px var(--picker-selection-ring);
}

.year-trigger.active::after {
  content: "▴";
}

.year-picker {
  margin-top: 0.55rem;
  border: 1px solid var(--picker-panel-border);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--picker-panel-bg-start), var(--picker-panel-bg-end));
  padding: 0.5rem;
  box-shadow: var(--shadow);
}

.year-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.year-picker-head p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.year-picker-head .btn {
  padding: 0.32rem 0.48rem;
  font-size: 0.72rem;
  border-radius: 8px;
}

.year-picker-grid {
  margin-top: 0.45rem;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.2rem;
}

.year-chip {
  border: 1px solid var(--surface-raised-border);
  border-radius: 8px;
  background: var(--surface-raised-bg);
  color: var(--text);
  font-size: 0.67rem;
  font-family: var(--theme-font-body);
  padding: 0.23rem 0.06rem;
  cursor: pointer;
}

.year-chip:hover {
  background: var(--surface-raised-bg-hover);
}

.year-chip.start,
.year-chip.end {
  border-color: var(--success-outline);
  background: var(--picker-boundary-bg);
  color: var(--success-text);
}

.year-chip.range {
  border-color: var(--picker-range-border);
  background: var(--picker-range-bg);
  color: var(--picker-range-text);
}

.year-picker-actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-start;
  gap: 0.45rem;
}

.year-picker-actions .btn {
  padding: 0.32rem 0.48rem;
  font-size: 0.72rem;
  border-radius: 8px;
}

.custom-wrap {
  margin-top: 0.7rem;
  border-top: 1px solid var(--surface-divider);
  padding-top: 0.7rem;
}

.restaurant-config-wrap {
  margin-top: 0.7rem;
  border-top: 1px solid var(--surface-divider);
  padding-top: 0.7rem;
}

.restaurant-count-bar {
  margin-top: 0.78rem;
  border: 1px solid var(--restaurant-summary-border);
  border-radius: 13px;
  padding: 0.62rem 0.72rem;
  background: linear-gradient(120deg, var(--restaurant-summary-bg-start), var(--restaurant-summary-bg-end));
  box-shadow:
    inset 0 1px 0 var(--summary-card-glint),
    0 10px 24px var(--summary-card-shadow);
}

.restaurant-count-summary {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.restaurant-location-wrap {
  margin-top: 0.72rem;
  border: 1px solid var(--surface-quiet-border);
  border-radius: 11px;
  padding: 0.52rem 0.58rem;
  background: var(--surface-quiet-ghost);
}

.restaurant-location-toggle {
  margin-bottom: 0.48rem;
}

.restaurant-filter-grid {
  margin-top: 0.62rem;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0.55rem;
  align-items: end;
}

.restaurant-filter-grid-tight {
  align-items: center;
}

.restaurant-open-now-toggle {
  margin-top: 1.35rem;
}

.restaurant-subtext {
  margin: 0.38rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.restaurant-chip-list {
  margin-top: 0.24rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.restaurant-chip-btn {
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text);
  padding: 0.26rem 0.5rem;
  font-size: 0.73rem;
  font-family: var(--theme-font-body);
  line-height: 1.1;
  cursor: pointer;
}

.restaurant-chip-btn:hover {
  background: var(--chip-bg-hover);
}

.restaurant-chip-btn.active {
  border-color: var(--success-outline);
  background: var(--success-bg-soft);
  color: var(--success-text);
}

.restaurant-cuisine-input-row {
  margin-top: 0.42rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.42rem;
}

.restaurant-cuisine-input-row .btn {
  padding: 0.5rem 0.66rem;
  font-size: 0.76rem;
  border-radius: 10px;
}

.restaurant-selected-cuisine-list {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.restaurant-selected-cuisine-item {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: 1px solid var(--surface-raised-border);
  background: var(--surface-raised-bg);
  border-radius: 999px;
  padding: 0.19rem 0.36rem;
  font-size: 0.72rem;
}

.restaurant-selected-cuisine-item button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.76rem;
}

.restaurant-selected-cuisine-item button:hover {
  color: var(--text);
}

.restaurant-price-options .rating-chip {
  min-width: 0;
  padding: 0.24rem 0.46rem;
}

.restaurant-search-actions {
  margin-top: 0.72rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.restaurant-search-actions .btn {
  width: 100%;
  padding: 0.54rem 0.78rem;
  font-size: 0.8rem;
  border-radius: 11px;
  font-weight: 700;
}

.restaurant-results-list {
  margin: 0.56rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  max-height: 270px;
  overflow-y: auto;
}

.restaurant-result-item {
  border: 1px solid var(--surface-card-border);
  border-radius: 10px;
  background: var(--surface-quiet-fill);
  padding: 0.46rem 0.52rem;
  transition: border-color 140ms ease, background 140ms ease;
}

.restaurant-result-item:hover {
  border-color: var(--choice-card-hover-outline);
  background: var(--surface-quiet-bg-strong);
}

.restaurant-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.46rem;
}

.restaurant-result-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.restaurant-result-add {
  padding: 0.24rem 0.5rem;
  font-size: 0.71rem;
  border-radius: 8px;
  line-height: 1.1;
}

.restaurant-result-add:disabled {
  opacity: 0.76;
  cursor: default;
}

.restaurant-result-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}

.restaurant-result-meta {
  margin-top: 0.16rem;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
}

.restaurant-result-links {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
}

.restaurant-result-links a {
  font-size: 0.71rem;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.restaurant-result-links a:hover {
  color: var(--link-hover);
}

.restaurant-selected-head {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.05rem 0.15rem;
}

.restaurant-selected-head .subtle-title {
  color: var(--selection-label);
  font-weight: 800;
  letter-spacing: 0.03em;
}

#restaurantSelectedClearBtn {
  padding: 0.24rem 0.46rem;
  font-size: 0.69rem;
  border-radius: 8px;
  line-height: 1.1;
}

.restaurant-selected-list {
  margin: 0.5rem 0 0;
  padding: 0.6rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.44rem;
  border: 1px solid var(--surface-quiet-border);
  border-radius: 14px;
  background: var(--surface-quiet-ghost);
  box-shadow: inset 0 1px 0 var(--surface-quiet-shadow-inset);
  max-height: min(74vh, 640px);
  overflow-y: auto;
}

.restaurant-selected-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  border: 1px solid var(--choice-card-border);
  border-radius: 13px;
  background: linear-gradient(120deg, var(--choice-card-bg-start), var(--choice-card-bg-end));
  box-shadow:
    inset 0 1px 0 var(--summary-card-glint),
    0 10px 24px var(--summary-card-shadow);
  padding: 0.5rem 0.56rem;
}

.restaurant-selected-item:hover {
  border-color: var(--choice-card-hover-border);
  background: linear-gradient(120deg, var(--choice-card-hover-bg-start), var(--choice-card-hover-bg-end));
}

.restaurant-selected-title {
  font-size: 0.79rem;
  font-weight: 700;
  color: var(--choice-card-title);
}

.restaurant-selected-meta {
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.restaurant-selected-remove {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--choice-action-border);
  background: var(--choice-action-bg);
  color: var(--choice-action-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.restaurant-selected-remove::before {
  content: "\1F5D1";
  font-size: 0.95rem;
}

.restaurant-selected-remove:hover {
  border-color: var(--choice-action-hover-border);
  background: var(--choice-action-hover-bg);
  color: var(--choice-action-hover-text);
}

.restaurant-list-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.79rem;
}

.restaurant-results-list,
.restaurant-selected-list {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-start) var(--surface-raised-bg);
}

.restaurant-results-list::-webkit-scrollbar,
.restaurant-selected-list::-webkit-scrollbar {
  width: 10px;
}

.restaurant-results-list::-webkit-scrollbar-track,
.restaurant-selected-list::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 999px;
}

.restaurant-results-list::-webkit-scrollbar-thumb,
.restaurant-selected-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scroll-thumb-start), var(--scroll-thumb-end));
  border-radius: 999px;
  border: 2px solid var(--scroll-thumb-border);
}

.restaurant-results-list::-webkit-scrollbar-thumb:hover,
.restaurant-selected-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--scroll-thumb-hover-start), var(--scroll-thumb-hover-end));
}

.custom-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
}

.custom-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.custom-option-card {
  border: 1px solid var(--surface-quiet-border);
  border-radius: 12px;
  padding: 0.65rem;
  background: var(--input-bg);
}

.custom-option-card .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.custom-meta-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.custom-option-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.divider {
  text-align: center;
  margin: 1rem 0 0.5rem;
  position: relative;
}

.divider span {
  color: var(--muted);
  font-size: 0.78rem;
  background: var(--separator-fill);
  padding: 0 0.55rem;
}

.divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--surface-raised-bg-hover);
  z-index: -1;
}

.rooms-head {
  display: flex;
  justify-content: space-between;
  gap: 0.55rem;
  align-items: center;
}

.simple-list {
  list-style: none;
  padding: 0;
  margin: 0.65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.simple-list li {
  padding: 0.6rem;
  border-radius: 11px;
  background: var(--surface-raised-bg);
  border: 1px solid var(--surface-hover-fill);
  font-size: 0.92rem;
}

.room-row-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.room-code-pill {
  font-weight: 800;
  letter-spacing: 0.08em;
}

.room-list-item {
  position: relative;
}

.room-role-menu {
  position: relative;
  margin-left: auto;
}

.room-role-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  font-family: var(--theme-font-body);
  line-height: 1;
}

.room-role-menu-btn::after {
  content: "▾";
  font-size: 0.6rem;
  opacity: 0.9;
  transition: transform 120ms ease;
}

.room-role-menu.open .room-role-menu-btn::after {
  transform: rotate(180deg);
}

.room-role-menu-btn:hover {
  background: var(--surface-raised-divider);
}

.room-actions-flyout {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 6;
  min-width: 132px;
  padding: 0.3rem;
  border-radius: 10px;
  border: 1px solid var(--surface-raised-border);
  background: var(--menu-surface-bg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
}

.room-actions-flyout .btn {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  padding: 0.34rem 0.5rem;
  font-size: 0.73rem;
  border-radius: 8px;
}

.room-row-meta {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.room-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.room-actions-right {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  margin-left: auto;
}

.room-actions .btn {
  padding: 0.36rem 0.56rem;
  font-size: 0.74rem;
  border-radius: 9px;
}

.room-actions .btn.btn-secondary.is-loading {
  background: linear-gradient(120deg, var(--button-loading-start), var(--button-loading-end));
  color: var(--button-loading-text);
  border-color: var(--button-loading-border);
  box-shadow: 0 0 0 1px var(--button-loading-ring);
}

.room-membership-state {
  font-size: 0.74rem;
  padding: 0.14rem 0.35rem;
  border-radius: 999px;
  background: var(--room-membership-bg);
  color: var(--muted);
  border: 1px solid var(--room-membership-border);
}

.room-membership-state.pending {
  background: var(--room-membership-pending-bg);
  color: var(--room-membership-pending-text);
  border-color: var(--room-membership-pending-border);
}

.rooms-head .btn {
  padding: 0.35rem 0.54rem;
  font-size: 0.74rem;
  border-radius: 9px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1rem;
  margin-bottom: 1rem;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.room-code-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.room-code-wrap strong {
  font-family: var(--theme-font-display);
  font-size: clamp(1.5rem, 5vw, 2.05rem);
  letter-spacing: 0.08em;
}

.presence {
  text-align: right;
}

.presence-count {
  margin: 0.2rem 0 0;
  font-family: var(--theme-font-display);
  letter-spacing: 0.08em;
  font-size: 2.1rem;
}

.layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
}

.deck-panel {
  padding: 1rem;
}

.deck-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.8rem;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 0.8fr auto;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.filter-row input,
.filter-row select {
  padding: 0.62rem 0.72rem;
  font-size: 0.88rem;
}

.filter-row .btn {
  padding: 0.62rem 0.8rem;
}

.room-config-lock {
  margin-bottom: 0.7rem;
  border: 1px solid var(--surface-quiet-border);
  border-radius: 12px;
  background: var(--room-lock-surface-bg);
  padding: 0.5rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.room-config-lock p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.room-config-lock .btn {
  padding: 0.36rem 0.56rem;
  font-size: 0.74rem;
  border-radius: 9px;
}

.movie-card {
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--deck-card-bg-start), var(--deck-card-bg-end));
  border: 1px solid var(--surface-card-border);
  transform-origin: center;
  transition: transform 220ms ease, opacity 220ms ease;
  display: flex;
  flex-direction: column;
  --movie-card-fixed-height: clamp(520px, 72vh, 720px);
  height: var(--movie-card-fixed-height);
  touch-action: pan-y;
  user-select: none;
  will-change: transform, opacity;
}

.movie-card.summary-expanded {
  height: auto;
  min-height: var(--movie-card-fixed-height);
}

.movie-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--deck-card-media-bg);
  flex: 0 0 auto;
}

.movie-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 180ms ease;
  -webkit-user-drag: none;
  user-select: none;
}

.movie-card img.media-hidden {
  opacity: 0;
}

.movie-details {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
}

#itemTitle {
  font-size: clamp(1.85rem, 5vw, 2.8rem);
}

#itemInfo {
  margin: 0.18rem 0 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
}

#itemSummary {
  margin: 0;
  line-height: 1.45;
  font-size: 0.97rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#itemSummary.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.item-summary-toggle {
  align-self: flex-start;
  border: 0;
  background: none;
  color: var(--summary-link);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0;
  margin-top: -0.05rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.item-summary-toggle:hover {
  color: var(--summary-link-hover);
}

.detail-list {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.detail-list li {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.3;
}

.detail-list li.movie-meta-primary {
  color: var(--meta-accent);
}

.detail-list li.movie-meta-secondary {
  color: var(--muted);
}

.trailer-area {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--media-overlay-bg);
}

.trailer-area iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.movie-media.restaurant-map-media::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -78%) rotate(-45deg);
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 28% 28%, var(--surface-card-highlight) 0%, var(--map-pin-start) 24%, var(--map-pin-mid) 56%, var(--map-pin-end) 100%);
  box-shadow: 0 6px 16px var(--map-pin-shadow);
  border: 1px solid var(--surface-card-sheen);
  z-index: 1;
  pointer-events: none;
}

.movie-media.restaurant-map-media::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--surface-card-highlight);
  box-shadow: 0 0 0 1px var(--map-pin-center-ring);
  z-index: 1;
  pointer-events: none;
}

.controls {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.9rem;
}

.controls .btn {
  flex: 1;
}

.btn-no {
  background: linear-gradient(120deg, var(--button-no-start), var(--button-no-end));
  color: var(--button-no-text);
}

.btn-yes {
  background: linear-gradient(120deg, var(--button-yes-start), var(--button-yes-end));
  color: var(--button-yes-text);
}

.btn-trailer {
  background: var(--surface-tint-bg);
  color: var(--text);
  border: 1px solid var(--surface-raised-border);
}

.restaurant-action-row {
  margin-top: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.restaurant-action-row .btn {
  flex: 1;
  padding: 0.44rem 0.6rem;
  font-size: 0.76rem;
}

#mapsProviderSelect {
  flex: 0 0 auto;
  width: auto;
  min-width: 110px;
  max-width: 150px;
  padding: 0.46rem 0.5rem;
  font-size: 0.76rem;
  border-radius: 10px;
}

.movie-card.fly-right {
  transform: translateX(130px) rotate(12deg);
  opacity: 0;
}

.movie-card.fly-left {
  transform: translateX(-130px) rotate(-12deg);
  opacity: 0;
}

.sidebar {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar-actions {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--surface-divider);
}

.sidebar-actions-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.sidebar-actions-row .btn {
  padding: 0.36rem 0.58rem;
  font-size: 0.75rem;
  border-radius: 9px;
}

.toast-stack {
  position: fixed;
  right: 0.9rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 6;
}

.toast {
  max-width: min(90vw, 350px);
  background: var(--toast-bg);
  color: var(--toast-text);
  border: 1px solid var(--toast-border);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  box-shadow: var(--shadow);
  animation: pop-in 240ms ease;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 12;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  width: min(96vw, 520px);
  background: var(--modal-surface-bg);
  border: 1px solid var(--modal-surface-border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: var(--shadow);
}

.quick-help-modal-card {
  width: min(96vw, 620px);
}

.welcome-modal-card {
  width: min(96vw, 640px);
}

.welcome-modal-copy {
  margin-top: 0.55rem;
}

.welcome-modal-list {
  margin-top: 0.9rem;
}

.quick-help-list {
  margin: 0.8rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.45;
}

.quick-help-list li + li {
  margin-top: 0.42rem;
}

.quick-help-details-link {
  margin: 0.85rem 0 0;
  font-size: 0.86rem;
}

.quick-help-details-link a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.quick-help-details-link a:hover {
  color: var(--link-hover);
}

.add-connection-modal-card {
  width: min(96vw, 460px);
}

.room-members-modal-card {
  width: min(96vw, 700px);
}

.create-from-yes-modal-card {
  width: min(96vw, 560px);
}

.create-from-yes-field {
  margin-top: 0.15rem;
}

.create-from-yes-scope-field {
  margin-top: 0.8rem;
}

.create-from-yes-help {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.35;
}

.create-from-yes-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
}

.create-from-yes-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.create-from-yes-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--toggle-track-border);
  background: var(--toggle-track-bg);
  transition: background 140ms ease, border-color 140ms ease;
}

.create-from-yes-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--toggle-thumb-bg);
  transition: transform 140ms ease;
}

.create-from-yes-toggle input:checked + .create-from-yes-toggle-track {
  background: var(--toggle-track-active-bg);
  border-color: var(--toggle-track-active-border);
}

.create-from-yes-toggle input:checked + .create-from-yes-toggle-track .create-from-yes-toggle-thumb {
  transform: translateX(16px);
}

.create-from-yes-toggle-text {
  line-height: 1.2;
}

.create-from-yes-help-toggle {
  margin-top: 0.4rem;
}

.room-members-list {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  max-height: 46vh;
  overflow: auto;
}

.room-members-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-quiet-shadow-inset);
  border-radius: 11px;
  padding: 0.52rem 0.62rem;
}

.room-members-meta {
  min-width: 0;
}

.room-members-name {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text);
}

.room-members-email {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.room-members-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.room-members-actions .btn {
  padding: 0.34rem 0.5rem;
  font-size: 0.72rem;
  border-radius: 8px;
}

#magicLinkSwitchTitle {
  margin-top: 0.55rem;
}

#magicLinkSwitchBody {
  margin-top: 0.85rem;
  white-space: pre-line;
}

.modal-actions {
  margin-top: 0.9rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1080px) {
  .lobby-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .layout-grid {
    grid-template-columns: 1fr;
  }

  .movie-card {
    --movie-card-fixed-height: clamp(500px, 70vh, 680px);
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .presence {
    text-align: left;
  }

  .filter-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .action-row {
    flex-direction: column;
  }

  .app-header {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .header-left,
  .header-center,
  .header-right {
    justify-self: stretch;
  }

  .header-center,
  .header-right {
    justify-content: flex-start;
  }

  .header-notification-btn {
    margin-right: 0.25rem;
  }

  .theme-toggle-btn {
    margin-right: 0.1rem;
  }

  .header-center {
    flex-direction: column;
    align-items: stretch;
  }

  .header-center input,
  #headerNameInput,
  #emailInput {
    flex: 0 0 auto;
    width: 100%;
  }

  .custom-option-card .grid-2,
  .meta-row,
  .movie-config-grid,
  .room-name-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  #surpriseMeBtn,
  #createRoomBtn,
  .room-name-field {
    width: 100%;
  }

  .manual-header-row {
    display: block;
  }

  .connection-invite-list {
    max-height: 150px;
  }

  .manual-search-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.35rem;
    column-gap: 0.45rem;
  }

  .manual-search-title {
    width: 100%;
  }

  .source-selector-row {
    flex-wrap: wrap;
  }

  .source-language-select-wrap {
    margin-left: 0;
  }

  .manual-autoyes-toggle {
    order: 1;
    width: auto;
    margin: 0;
  }

  .restaurant-filter-grid {
    grid-template-columns: 1fr;
  }

  .restaurant-open-now-toggle {
    margin-top: 0;
  }

  .restaurant-search-actions .btn {
    flex: 1 1 auto;
  }

  .restaurant-selected-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .restaurant-action-row {
    flex-wrap: wrap;
  }

  #mapsProviderSelect {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }

  #movieManualClearBtn {
    margin-left: auto;
  }

  .join-compact-row {
    flex-direction: column;
    align-items: stretch;
  }

  #joinRoomBtn {
    width: 100%;
  }

  .year-picker-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .room-config-lock {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .tmdb-credit {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 520px) {
  :root {
    --shell-pad-x: 0.8rem;
  }

  .app-shell {
    padding: 0.8rem var(--shell-pad-x);
  }

  .app-header {
    margin: 0.8rem auto 0;
    padding: 0.45rem 0.6rem;
  }

  .lobby-card,
  .rooms-card,
  .deck-panel,
  .sidebar,
  .topbar {
    border-radius: 18px;
  }

  .controls {
    gap: 0.5rem;
  }

  .movie-card {
    --movie-card-fixed-height: clamp(460px, 68vh, 620px);
  }

  .btn {
    padding: 0.68rem 0.74rem;
    font-size: 0.95rem;
  }

  .filter-row {
    grid-template-columns: 1fr;
  }
}